449 lines
11 KiB
Vue
449 lines
11 KiB
Vue
<template>
|
||
|
||
<view
|
||
class="container 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">
|
||
<!-- @click="previewImage(selectGoodsData.productImages)" -->
|
||
<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">
|
||
<text
|
||
v-if="
|
||
selectGoodsData.isVipPrice == 1 &&
|
||
selectGoodsData.vipPrice != 0 &&
|
||
selectGoodsData.vipPrice != null
|
||
"
|
||
>
|
||
<text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
|
||
>￥{{ selectGoodsData.vipPrice.toFixed(2) }}</text
|
||
>
|
||
<text style="color: #fa2d12; font-size:22rpx !important; margin-left: 4px"
|
||
>VIP到手价</text
|
||
>
|
||
<!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
|
||
</text>
|
||
|
||
<text
|
||
v-else-if="
|
||
selectGoodsData.activityPrice && selectGoodsData.activityPrice > 0
|
||
"
|
||
>
|
||
<text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
|
||
>￥{{ selectGoodsData.activityPrice.toFixed(2) }}</text
|
||
>
|
||
<text style="color: #613804; font-size: 22rpx !important; margin-left: 4px;"
|
||
>活动价</text
|
||
>
|
||
<!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
|
||
</text>
|
||
|
||
<text v-else style="color: #e97512;font-size: 28rpx !important; font-weight: bold">
|
||
￥{{ Number(selectGoodsData.price).toFixed(2) }}</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
|
||
style="width: 100%;"
|
||
class="related_courses_name"
|
||
:class="`goods_item ${
|
||
(!isFudu &&
|
||
selectGoodsData &&
|
||
selectGoodsData.productId == slotProps.row.productId) ||
|
||
(isFudu &&
|
||
selectGoodsData.productName == slotProps.row.productName)
|
||
? '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="" style="align-items: center">
|
||
<!-- <text style="color: #999; text-decoration: line-through; margin-right: 20rpx;"
|
||
v-if="slotProps.row.activityPrice > 0 && slotProps.row.activityPrice < slotProps.row.price" >￥{{slotProps.row.price}}</text>
|
||
<view class="price" style="color: #3AB3AE "
|
||
>￥{{ slotProps.row.activityPrice?slotProps.row.activityPrice:slotProps.row.price }}</view
|
||
></view
|
||
> -->
|
||
<text v-html="getPrice(slotProps)"></text>
|
||
|
||
<text
|
||
v-if="
|
||
slotProps.row.isVipPrice == 1 &&
|
||
slotProps.row.vipPrice != 0 &&
|
||
slotProps.row.vipPrice != null
|
||
"
|
||
style="
|
||
z-index: 10;
|
||
|
||
margin-left: 10rpx;
|
||
|
||
font-size: 24rpx;
|
||
color: #f94f04;
|
||
|
||
font-weight: bold;
|
||
"
|
||
>VIP优惠</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||
</template>
|
||
</common-list>
|
||
|
||
<view class="goods_nav_box">
|
||
<uni-goods-nav
|
||
:fill="true"
|
||
:options="buyOptions"
|
||
:button-group="customButtonGroup1"
|
||
@click="onHandleClickBuy"
|
||
@buttonClick="onHandleClickBuy"
|
||
/>
|
||
</view>
|
||
<!-- <view>
|
||
<text @click="handleClickClose">取消</text>
|
||
<text @click="handleClickGoBuy">立即购买</text>
|
||
</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", "isFudu", // 是否复读
|
||
"type", // 页面类型
|
||
],
|
||
data() {
|
||
return {
|
||
show: false,
|
||
};
|
||
},
|
||
onLoad() {},
|
||
onHide() {
|
||
// this.showSearchList = false
|
||
// this.searchList = []
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
methods: {
|
||
getPrice(slotProps) {
|
||
if (
|
||
Number(slotProps.row.isVipPrice) === 1 &&
|
||
Number(slotProps.row.vipPrice) > 0
|
||
) {
|
||
return `
|
||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||
￥${Number(slotProps.row.vipPrice).toFixed(2)}
|
||
</text>
|
||
<text
|
||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||
>
|
||
￥${Number(slotProps.row.price).toFixed(2)}
|
||
</text>
|
||
`;
|
||
} else if (Number(slotProps.row.activityPrice) > 0) {
|
||
return `
|
||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||
￥${Number(slotProps.row.activityPrice).toFixed(2)}
|
||
</text>
|
||
<text
|
||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||
>
|
||
￥${Number(slotProps.row.price).toFixed(2)}
|
||
</text>
|
||
`;
|
||
} else {
|
||
return `<span style="color: #e97512;font-size: 28rpx;font-weight: bold;">
|
||
￥${Number(slotProps.row.price).toFixed(2)}</span>
|
||
`;
|
||
}
|
||
},
|
||
|
||
// 放大图片
|
||
previewImage(url) {
|
||
console.log(url);
|
||
uni.previewImage({
|
||
urls: [url],
|
||
longPressActions: {
|
||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||
success: function (res) {
|
||
// console.log(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 "@/style/mixin.scss";
|
||
|
||
.goods_item {
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// margin-bottom: 20rpx;
|
||
padding: 10rpx 20rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.title {
|
||
box-sizing: border-box;
|
||
// font-weight: bold;
|
||
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%);
|
||
// padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
// height: 100rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
float: left;
|
||
|
||
.name {
|
||
font-size: 26rpx;
|
||
// font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.price {
|
||
font-size: 26rpx;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
|
||
.isSelectGoods {
|
||
color: $themeColor !important;
|
||
|
||
.name {
|
||
color: $themeColor !important;
|
||
}
|
||
|
||
.price {
|
||
color: $themeColor !important;
|
||
}
|
||
|
||
border: 2rpx solid $themeColor;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
::v-deep.list_item {
|
||
// border-bottom: none;
|
||
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;
|
||
// margin-top: 20rpx;
|
||
// padding: 40rpx 30rpx;
|
||
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;
|
||
// line-height: 40rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
margin-top: 80rpx;
|
||
margin-bottom: 0rpx;
|
||
// padding: 20rpx;
|
||
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;
|
||
}
|
||
|
||
::v-deep.list_item {
|
||
// border-bottom: none;
|
||
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.product_image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f5f5f5;
|
||
// margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
::v-deep.u-popup__content {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
::v-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;
|
||
}
|
||
}
|
||
</style>
|