366 lines
8.1 KiB
Vue
366 lines
8.1 KiB
Vue
<template>
|
||
<view
|
||
class="container commonPageBox commonDetailPage"
|
||
style="height: auto !important; padding-bottom: 0 !important"
|
||
>
|
||
<u-popup
|
||
:show="show"
|
||
v-if="show"
|
||
mode="bottom"
|
||
@close="close"
|
||
class="popup_box"
|
||
>
|
||
<view class="popup_top">
|
||
<view class="product_image">
|
||
<image
|
||
src="@/static/icon/vip.png"
|
||
mode="aspectFit"
|
||
class="goods_image"
|
||
></image>
|
||
</view>
|
||
<view class="title">已选：{{ selectGoodsData.title }} {{ selectGoodsData.year }}年</view>
|
||
</view>
|
||
|
||
<view :class="`common_radius_box goods_box popup_content`">
|
||
<view class="title title_box">
|
||
<text style="color: #e97512; font-weight: bold;font-size: 30rpx;">
|
||
￥{{ Number(selectGoodsData.rebateFee).toFixed(2) }}
|
||
</text>
|
||
</text>
|
||
<u-icon
|
||
name="close"
|
||
color="#333"
|
||
size="18"
|
||
@click="close"
|
||
style="display: inline-block"
|
||
></u-icon
|
||
></view>
|
||
<view class="title title_list"
|
||
><text>VIP商品列表（{{ 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">
|
||
<view
|
||
class="related_courses_name"
|
||
:class="`goods_item ${
|
||
(
|
||
selectGoodsData &&
|
||
selectGoodsData.id == slotProps.row.id)
|
||
? 'isSelectGoods color_shandow'
|
||
: ''
|
||
}`"
|
||
>
|
||
<view class="image_box" style="margin-right: 10rpx">
|
||
<image
|
||
src="@/static/icon/vip.png"
|
||
mode="aspectFit"
|
||
class="goods_image"
|
||
></image>
|
||
</view>
|
||
|
||
<view :class="`goods_info just`" style="">
|
||
<view class="name">{{ slotProps.row.title }}<text style="color: #ff2e4d;margin-left: 10rpx;">{{ slotProps.row.year }}年</text></view>
|
||
<view class="flex_box" style="align-items: center">
|
||
<text ><span style="color: #e97512;">￥{{Number(slotProps.row.rebateFee).toFixed(2)}}</span></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",
|
||
"isFudu", // 是否复读
|
||
"type", // 页面类型
|
||
],
|
||
data() {
|
||
return {
|
||
show: false,
|
||
};
|
||
},
|
||
onLoad() {},
|
||
onHide() {
|
||
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
methods: {
|
||
getPrice(slotProps) {
|
||
if (
|
||
Number(slotProps.row.isVipPrice) === 1 &&
|
||
Number(slotProps.row.vipPrice) > 0
|
||
) {
|
||
return `
|
||
<text style="color: #e97512; font-size: 12px; font-weight: bold;">
|
||
￥${Number(slotProps.row.vipPrice).toFixed(2)}
|
||
</text>
|
||
<text
|
||
style="color: #8a8a8a; font-size: 10px; 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: 12px; font-weight: bold;">
|
||
￥${Number(slotProps.row.activityPrice).toFixed(2)}
|
||
</text>
|
||
<text
|
||
style="color: #8a8a8a; font-size: 10px; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||
>
|
||
￥${Number(slotProps.row.price).toFixed(2)}
|
||
</text>
|
||
`;
|
||
} else {
|
||
return `<span style="color: #e97512;">
|
||
￥${Number(slotProps.row.price).toFixed(2)}</span>
|
||
`;
|
||
}
|
||
},
|
||
// 放大图片
|
||
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() {
|
||
setTimeout(() => {
|
||
this.$emit("onHandleClickBuy");
|
||
}, 200);
|
||
|
||
},
|
||
},
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
plus.key.hideSoftKeybord();
|
||
// #endif
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/static/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;
|
||
}
|
||
/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: 38rpx;
|
||
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;
|
||
}
|
||
/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;
|
||
}
|
||
}
|
||
/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;
|
||
}
|
||
}
|
||
</style>
|