338 lines
7.3 KiB
Vue
338 lines
7.3 KiB
Vue
<template>
|
||
<view class="commonPageBox commonDetailPage" style="height: auto !important;padding-bottom: 0 !important;">
|
||
<u-popup :show="show" mode="bottom" @close="close" class="popup_box">
|
||
<view class="popup_top">
|
||
<view class="product_image">
|
||
<image
|
||
:src="selectGoodsData.productImages"
|
||
mode="aspectFit"
|
||
class="goods_image"
|
||
></image>
|
||
</view>
|
||
<view class="title">已选：{{ selectGoodsData.productName }}</view>
|
||
</view>
|
||
|
||
<view :class="`common_radius_box goods_box popup_content`">
|
||
<view class="title title_box">
|
||
<view class="title_price" v-if="selectGoodsData.isVipPrice==1&&selectGoodsData.vipPrice!=null&&selectGoodsData.vipPrice!=0">
|
||
￥{{selectGoodsData.vipPrice}}
|
||
<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx;">VIP到手价</text>
|
||
</view>
|
||
<view class="title_price" v-else-if="selectGoodsData.activityPrice&&selectGoodsData.activityPrice>0">
|
||
￥{{selectGoodsData.activityPrice}}
|
||
<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx; color: #999;">活动价</text>
|
||
</view>
|
||
<text class="title_price" v-else>
|
||
￥{{selectGoodsData.price}}
|
||
</text>
|
||
<u-icon
|
||
name="close"
|
||
color="#333"
|
||
size="18"
|
||
@click="close"
|
||
style="display: inline-block"
|
||
></u-icon>
|
||
</view>
|
||
<view class="title title_list">
|
||
<text>商品列表（{{ goodsList.length }}）</text>
|
||
</view>
|
||
|
||
<common-list
|
||
imgUrl="url"
|
||
isNoIcon
|
||
imgMode="aspectFit"
|
||
defaultUrl=""
|
||
:isCondition="true"
|
||
:dataList="goodsList"
|
||
@hancleClick="selectGoods"
|
||
label="title"
|
||
>
|
||
<template slot="labelSlot" slot-scope="slotProps">
|
||
<!-- isSelectGoods -->
|
||
<view
|
||
class="related_courses_name"
|
||
:class="`goods_item ${
|
||
selectGoodsData &&
|
||
selectGoodsData.productId == slotProps.row.productId
|
||
? 'isSelectGoods color_shandow'
|
||
: ''
|
||
}`"
|
||
>
|
||
<view class="image_box" style="margin-right: 10rpx">
|
||
<image
|
||
:src="slotProps.row.productImages"
|
||
mode="aspectFit"
|
||
class="goods_image"></image>
|
||
</view>
|
||
|
||
<view :class="`goods_info `">
|
||
<view class="name">{{ slotProps.row.productName }}</view>
|
||
<view class="price">
|
||
<view class="goods_price" v-if="slotProps.row.isVipPrice==1&&slotProps.row.vipPrice!=null&&slotProps.row.vipPrice!=0">
|
||
￥{{slotProps.row.vipPrice}}
|
||
<text class="line_text">￥{{slotProps.row.price}}</text>
|
||
</view>
|
||
<view class="goods_price" v-else-if="slotProps.row.activityPrice&&slotProps.row.activityPrice>0">
|
||
￥{{slotProps.row.activityPrice}}
|
||
<text class="line_text">￥{{slotProps.row.price}}</text>
|
||
</view>
|
||
<text v-else>
|
||
￥{{slotProps.row.price}}
|
||
</text>
|
||
<text class="goods_text" v-if="slotProps.row.isVipPrice==1&&slotProps.row.vipPrice!=null&&slotProps.row.vipPrice!=0">
|
||
VIP优惠
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</common-list>
|
||
|
||
<view class="goods_nav_box">
|
||
<uni-goods-nav
|
||
:fill="true"
|
||
:options="buyOptions"
|
||
:button-group="customButtonGroup1"
|
||
@click="onHandleClickBuy"
|
||
@buttonClick="onHandleClickBuy"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
props: [
|
||
"goodsList",
|
||
"label",
|
||
"isCondition",
|
||
"imgUrl",
|
||
"imgMode",
|
||
"className",
|
||
"col",
|
||
"defaultUrl",
|
||
"isScroll",
|
||
"selectGoodsData",
|
||
"customButtonGroup1",
|
||
"buyOptions",
|
||
],
|
||
data() {
|
||
return {
|
||
show: false,
|
||
};
|
||
},
|
||
onLoad() {},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
methods: {
|
||
// 放大图片
|
||
previewImage(url) {
|
||
console.log(url);
|
||
uni.previewImage({
|
||
urls: [url],
|
||
longPressActions: {
|
||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||
success: function (res) {
|
||
|
||
},
|
||
},
|
||
});
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
selectGoods(data) {
|
||
this.$emit("selectGoods", data);
|
||
},
|
||
open() {
|
||
this.show = true;
|
||
},
|
||
gotoDetail(v) {
|
||
this.$emit("hancleClick", v);
|
||
},
|
||
onHandleClickBuy() {
|
||
this.$emit("selectGoodsData", this.selectGoodsData);
|
||
this.$emit("onHandleClickBuy");
|
||
},
|
||
},
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
plus.key.hideSoftKeybord();
|
||
// #endif
|
||
},
|
||
|
||
components: {},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/static/mixin.scss';
|
||
.goods_item {
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 20rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 10rpx;
|
||
}
|
||
.title {
|
||
box-sizing: border-box;
|
||
margin-bottom: 40rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
.image_box {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
float: left;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.goods_image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.goods_info {
|
||
width: calc(100%);
|
||
box-sizing: border-box;
|
||
float: left;
|
||
.name {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
.price {
|
||
font-size: 26rpx;
|
||
color: #aaa;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.isSelectGoods {
|
||
color: $themeColor !important;
|
||
.name {
|
||
color: $themeColor !important;
|
||
}
|
||
.price {
|
||
color: $themeColor !important;
|
||
}
|
||
border: 2rpx solid $themeColor;
|
||
border-radius: 10rpx;
|
||
}
|
||
/deep/.list_item {
|
||
padding: 10rpx 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
.goods_image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.curriulum_box {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
|
||
.curriulum_title_box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.curriulum_title {
|
||
width: calc(100% - 80rpx);
|
||
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods_box {
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
|
||
.curriulum_title_box {
|
||
width: calc(100%) !important;
|
||
padding-bottom: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.curriulum_title {
|
||
width: calc(100%);
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
margin-top: 80rpx;
|
||
margin-bottom: 0rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.popup_box {
|
||
padding-top: 30rpx;
|
||
|
||
background-color: transparent;
|
||
.popup_top {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 20rpx;
|
||
.title {
|
||
margin-bottom: 0;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.popup_content {
|
||
padding-bottom: 140rpx;
|
||
}
|
||
/deep/.list_item {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.product_image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
/deep/.u-popup__content {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/.u-popup__content__close {
|
||
color: #fff !important;
|
||
}
|
||
.title_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 0;
|
||
.title_price {
|
||
color: #ef1224;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.line_text{
|
||
text-decoration: line-through;
|
||
font-size: 24rpx;
|
||
padding: 0 20rpx;
|
||
color: #999;
|
||
}
|
||
.goods_price{
|
||
color: #ff1f00;
|
||
font-weight: bold;
|
||
}
|
||
.goods_text{
|
||
font-size: 22rpx;
|
||
color: #ff1f00;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|