tijiao
This commit is contained in:
2311
pages/component/commonComponents/orderSubmit.vue
Normal file
2311
pages/component/commonComponents/orderSubmit.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -176,6 +176,7 @@ export default {
|
||||
"customButtonGroup1",
|
||||
"buyOptions",
|
||||
"isFudu", // 是否复读
|
||||
"type", // 页面类型
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
|
||||
393
pages/component/commonComponents/selectVip.vue
Normal file
393
pages/component/commonComponents/selectVip.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<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">
|
||||
<!-- @click="previewImage(selectGoodsData.productImages)" -->
|
||||
<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">
|
||||
|
||||
<!-- isSelectGoods -->
|
||||
<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 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: #258feb"
|
||||
>￥{{ slotProps.row.activityPrice?slotProps.row.activityPrice:slotProps.row.price }}</view
|
||||
></view
|
||||
> -->
|
||||
<text ><span style="color: #e97512;">
|
||||
￥{{Number(slotProps.row.rebateFee).toFixed(2)}}</span>
|
||||
</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: 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) {
|
||||
// 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);
|
||||
setTimeout(() => {
|
||||
this.$emit("onHandleClickBuy");
|
||||
}, 200);
|
||||
|
||||
},
|
||||
},
|
||||
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;
|
||||
}
|
||||
/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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -21,7 +21,7 @@
|
||||
color: #258feb !important;
|
||||
font-weight: bold;
|
||||
"
|
||||
>{{ slotProps.row.score }}</text
|
||||
>{{ slotProps.row.score }}<text style="font-size: 30rpx;margin-left: 4rpx;">湖分</text></text
|
||||
>
|
||||
</template>
|
||||
</common-list>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,289 +1,402 @@
|
||||
<template>
|
||||
<view class="commonPageBox">
|
||||
<z-nav-bar title="VIP"></z-nav-bar>
|
||||
<view class="vip_block">
|
||||
<view class="vip_item"
|
||||
:class="[item.type==1||item.type==2?'vip_item_special':'',
|
||||
item.state==1?'vip_item_overdue':'',
|
||||
item.type==1&&item.state==0||item.type==2&&item.state==0?'vip_item_bg_1':'',
|
||||
item.type!=1&&item.type!=2&&item.state==0?'vip_item_bg_2':'']"
|
||||
v-for="(item, index) in list" :key="index">
|
||||
<view>
|
||||
<text class="vip_item_title">{{item.title}}</text>
|
||||
<text class="vip_item_tip" v-if="item.tip&&item.tip<100"><uni-icons type="info" size="17" color="#ff1f00"></uni-icons>还有{{item.tip}}天到期</text>
|
||||
<text class="vip_item_flag" v-if="item.state==1">
|
||||
<uni-icons type="info" size="17" color="#999"></uni-icons>已过期
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="vip_price" style=" padding-top: 10rpx;">
|
||||
<text class="font_bold">课程价格：</text>
|
||||
<view class="vip_qx_v">一年<text class="vip_fee line">{{item.originalPrice||0}}</text>元</view>
|
||||
</view>
|
||||
<view v-if="$platform!='ios'">
|
||||
|
||||
<text class="vip_item_btn" v-if="item.state==null" @click="openorderModal(item,0)">去办理</text>
|
||||
<text class="vip_item_btn" v-else @click="openorderModal(item,0)">去续费</text>
|
||||
</view>
|
||||
|
||||
<view class="vip_price" v-if="item.vcbList&&item.vcbList.length>0">
|
||||
<text class="font_bold" v-if="item.type==1||item.type==2">超级VIP价格：</text>
|
||||
<text class="font_bold" v-else>VIP价格：</text>
|
||||
<text class="vip_price_v" v-for="(item_price, index_price) in item.vcbList" :key="index_price" @click="openorderModal(item_price)">
|
||||
{{item_price.year}}年<text>{{item_price.rebateFee}}</text>元
|
||||
</text>
|
||||
</view>
|
||||
<view class="vip_price" v-if="item.yanqiList&&item.yanqiList.length>0">
|
||||
<text class="font_bold">延期价格：</text>
|
||||
<text class="vip_price_v" v-for="(item_yq, index_yq) in item.yanqiList" :key="index_yq" @click="openorderModal({state:item.state,...item_yq},1)">
|
||||
{{item_yq.year}}年<text>{{item_yq.rebateFee}}</text>元
|
||||
</text>
|
||||
</view>
|
||||
<view class="vip_qx">
|
||||
<text class="font_bold" style=" display: block;" v-if="item.type==1||item.type==2">超级VIP权限：</text>
|
||||
<text class="font_bold" style=" display: block;" v-else>VIP权限：</text>
|
||||
<view class="vip_qx_v" v-if="item.type==1">无限制观看吴门医述APP中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</view>
|
||||
<view class="vip_qx_v" v-else-if="item.type==2">无限制观看众妙之门APP与吴门医述APP心理学板块任意课程；</view>
|
||||
<view class="vip_qx_v" v-else-if="item.type==7">无限制观看众妙之门APP任意课程；</view>
|
||||
<view class="vip_qx_v" v-else>无限制观看吴门医述APP{{item.title.replace(/VIP/g, '')}}板块任意课程；</view>
|
||||
|
||||
<view class="vip_qx_v">
|
||||
<text v-if="item.type==1||item.type==2">{{item.title.replace(/超级VIP/g, '')}}</text>
|
||||
<text v-else>{{item.title.replace(/VIP/g, '')}}</text>
|
||||
培训班报名享受<text class="vip_fee" v-if="item.type==1||item.type==2">8折</text><text class="vip_fee" v-else>9折</text>优惠；
|
||||
</view>
|
||||
<view class="vip_qx_v">疯子读书APP购书享受<text class="vip_fee" v-if="item.type==1||item.type==2">8折</text><text class="vip_fee" v-else>9折</text>优惠。</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-popup :show="orderModalShow" mode="bottom" :round="20">
|
||||
<view class="orderModalShow popup_box">
|
||||
<u-icon name="close" color="#333" size="18" @click="closeOrderModalShow" style="
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
"></u-icon>
|
||||
<orderPay ref="orderPay" :dataInfo="selectVipData"></orderPay>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
<view class="commonPageBox">
|
||||
<z-nav-bar title="VIP"></z-nav-bar>
|
||||
<view class="vip_block">
|
||||
<view
|
||||
class="vip_item"
|
||||
:class="[
|
||||
item.type == 1 || item.type == 2 ? 'vip_item_special' : '',
|
||||
item.state == 1 ? 'vip_item_overdue' : '',
|
||||
(item.type == 1 && item.state == 0) ||
|
||||
(item.type == 2 && item.state == 0)
|
||||
? 'vip_item_bg_1'
|
||||
: '',
|
||||
item.type != 1 && item.type != 2 && item.state == 0
|
||||
? 'vip_item_bg_2'
|
||||
: '',
|
||||
]"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<view>
|
||||
<text class="vip_item_title">{{ item.title }}</text>
|
||||
<text class="vip_item_tip" v-if="item.tip && item.tip < 100"
|
||||
><uni-icons type="info" size="17" color="#ff1f00"></uni-icons>还有{{
|
||||
item.tip
|
||||
}}天到期</text
|
||||
>
|
||||
<text class="vip_item_flag" v-if="item.state == 1">
|
||||
<uni-icons type="info" size="17" color="#999"></uni-icons>已过期
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="vip_price" style="padding-top: 10rpx">
|
||||
<text class="font_bold">课程价格：</text>
|
||||
<view class="vip_qx_v"
|
||||
>一年<text class="vip_fee line">{{ item.originalPrice || 0 }}</text
|
||||
>元</view
|
||||
>
|
||||
</view>
|
||||
<view v-if="$platform != 'ios'">
|
||||
<text
|
||||
class="vip_item_btn"
|
||||
v-if="item.state == null"
|
||||
@click="openorderModal(item)"
|
||||
>去办理</text
|
||||
>
|
||||
<text class="vip_item_btn" v-else @click="openorderModal(item)"
|
||||
>去续费</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="vip_price" v-if="item.vcbList && item.vcbList.length > 0">
|
||||
<text class="font_bold" v-if="item.type == 1 || item.type == 2"
|
||||
>超级VIP价格：</text
|
||||
>
|
||||
<text class="font_bold" v-else>VIP价格：</text>
|
||||
<text
|
||||
class="vip_price_v"
|
||||
v-for="(item_price, index_price) in item.vcbList"
|
||||
:key="index_price"
|
||||
@click="openorderModal(item, index_price)"
|
||||
>
|
||||
{{ item_price.year }}年<text>{{ item_price.rebateFee }}</text
|
||||
>元
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="vip_price"
|
||||
v-if="item.yanqiList && item.yanqiList.length > 0"
|
||||
>
|
||||
<text class="font_bold">延期价格：</text>
|
||||
<text
|
||||
class="vip_price_v"
|
||||
v-for="(item_yq, index_yq) in item.yanqiList"
|
||||
:key="index_yq"
|
||||
@click="openorderModal({ state: item.state, ...item }, index_yq)"
|
||||
>
|
||||
{{ item_yq.year }}年<text>{{ item_yq.rebateFee }}</text
|
||||
>元
|
||||
</text>
|
||||
</view>
|
||||
<view class="vip_qx">
|
||||
<text
|
||||
class="font_bold"
|
||||
style="display: block"
|
||||
v-if="item.type == 1 || item.type == 2"
|
||||
>超级VIP权限：</text
|
||||
>
|
||||
<text class="font_bold" style="display: block" v-else>VIP权限：</text>
|
||||
<view class="vip_qx_v" v-if="item.type == 1"
|
||||
>无限制观看吴门医述APP中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</view
|
||||
>
|
||||
<view class="vip_qx_v" v-else-if="item.type == 2"
|
||||
>无限制观看众妙之门APP与吴门医述APP心理学板块任意课程；</view
|
||||
>
|
||||
<view class="vip_qx_v" v-else-if="item.type == 7"
|
||||
>无限制观看众妙之门APP任意课程；</view
|
||||
>
|
||||
<view class="vip_qx_v" v-else
|
||||
>无限制观看吴门医述APP{{
|
||||
item.title.replace(/VIP/g, "")
|
||||
}}板块任意课程；</view
|
||||
>
|
||||
|
||||
<view class="vip_qx_v">
|
||||
<text v-if="item.type == 1 || item.type == 2">{{
|
||||
item.title.replace(/超级VIP/g, "")
|
||||
}}</text>
|
||||
<text v-else>{{ item.title.replace(/VIP/g, "") }}</text>
|
||||
培训班报名享受<text
|
||||
class="vip_fee"
|
||||
v-if="item.type == 1 || item.type == 2"
|
||||
>8折</text
|
||||
><text class="vip_fee" v-else>9折</text>优惠；
|
||||
</view>
|
||||
<view class="vip_qx_v"
|
||||
>疯子读书APP购书享受<text
|
||||
class="vip_fee"
|
||||
v-if="item.type == 1 || item.type == 2"
|
||||
>8折</text
|
||||
><text class="vip_fee" v-else>9折</text>优惠。</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<common-select-vip
|
||||
type="vip"
|
||||
:isCondition="true"
|
||||
ref="commonSelectGoods"
|
||||
:selectGoodsData="selectGoodsData"
|
||||
:goodsList="goodsList"
|
||||
:buyOptions="buyOptions"
|
||||
:customButtonGroup1="customButtonGroup1"
|
||||
@selectGoods="handleClickSelectGoods"
|
||||
@onHandleClickBuy="goBuy()"
|
||||
>
|
||||
</common-select-vip>
|
||||
<u-popup :show="orderModalShow" mode="bottom" :round="20">
|
||||
<view class="orderModalShow popup_box">
|
||||
<!-- <u-icon name="close" color="#333" size="18" @click="closeOrderModalShow" style="
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
"></u-icon> -->
|
||||
<orderPay ref="orderPay" :dataInfo="selectVipData"></orderPay>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import orderPay from "./order.vue";
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
type: 0,
|
||||
text: '', //针对不同type展示文案
|
||||
list: [],
|
||||
orderModalShow: false,
|
||||
selectVipData: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
orderPay
|
||||
},
|
||||
onLoad(){
|
||||
this.getData();
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
$http.request({
|
||||
url: "common/userVip/getVipBuyConfigList",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
uni.hideLoading();
|
||||
if (res.code == 0) {
|
||||
this.list = res.res;
|
||||
}
|
||||
}).catch(e => {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 0,
|
||||
text: "", //针对不同type展示文案
|
||||
list: [],
|
||||
buyOptions: [],
|
||||
customButtonGroup1: [
|
||||
{
|
||||
with: 200,
|
||||
text: "立即购买",
|
||||
backgroundColor: "linear-gradient(90deg, #3C77BE 0%,#258feb 100%)",
|
||||
color: "#fff",
|
||||
},
|
||||
],
|
||||
goodsList: [],
|
||||
selectGoodsData: {},
|
||||
orderModalShow: false,
|
||||
selectVipData: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
orderPay,
|
||||
},
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
handleClickSelectGoods(data) {
|
||||
this.selectGoodsData = data;
|
||||
console.log('this.selectGoodsData at line 186:', this.selectGoodsData)
|
||||
this.$forceUpdate();
|
||||
},
|
||||
goBuy() {
|
||||
// this.$refs.commonSelectGoods.close();
|
||||
var mynavData = JSON.stringify({
|
||||
|
||||
goods:[this.selectGoodsData],
|
||||
typeId: 0,
|
||||
navTitle: "",
|
||||
title: "",
|
||||
isVip: true,
|
||||
|
||||
});
|
||||
},
|
||||
//点击购买
|
||||
openorderModal(item,type) {
|
||||
console.log('item at line 120:', item)
|
||||
if(this.$platform=='ios'){
|
||||
return false
|
||||
}
|
||||
let text = '';
|
||||
//如果是右侧按钮点击展示
|
||||
//判断点击类型是vip价格还是延期价格
|
||||
if(type==0){
|
||||
if(item.state==null){ //没有vip
|
||||
this.selectVipData.list = item.vcbList;
|
||||
this.selectVipData.id = item.vcbList[0].id;
|
||||
}else{
|
||||
this.selectVipData.list = item.yanqiList;
|
||||
this.selectVipData.id = item.yanqiList[0].id;
|
||||
}
|
||||
}else{
|
||||
this.selectVipData.id = item.id;
|
||||
}
|
||||
|
||||
if(type){
|
||||
this.selectVipData.type = type;
|
||||
}
|
||||
|
||||
this.selectVipData.title = item.title + '-' + item.year + '年';
|
||||
this.selectVipData.lastFee = item.rebateFee;
|
||||
this.selectVipData.state=item.state;
|
||||
this.orderModalShow = true;
|
||||
console.log('-----selectVipData-----',this.selectVipData)
|
||||
this.$nextTick(() => {
|
||||
this.$refs.orderPay.initPrepareOrder();
|
||||
});
|
||||
},
|
||||
//关闭
|
||||
closeOrderModalShow() {
|
||||
this.orderModalShow = false;
|
||||
this.selectVipData = {};
|
||||
},
|
||||
}
|
||||
}
|
||||
}); // 这里转换成 字符串
|
||||
console.log('mynavData at line 192:', mynavData)
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/order/index?data=${mynavData}`,
|
||||
});
|
||||
},
|
||||
//获取数据
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
$http
|
||||
.request({
|
||||
url: "common/userVip/getVipBuyConfigList",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
uni.hideLoading();
|
||||
if (res.code == 0) {
|
||||
this.list = res.res;
|
||||
}
|
||||
})
|
||||
.catch((e) => {});
|
||||
},
|
||||
//点击购买
|
||||
openorderModal(item, type) {
|
||||
console.log("item at line 120:", item);
|
||||
if (this.$platform == "ios") {
|
||||
return false;
|
||||
}
|
||||
let text = "";
|
||||
//如果是右侧按钮点击展示
|
||||
//判断点击类型是vip价格还是延期价格
|
||||
|
||||
if (item.state == null) {
|
||||
//没有vip
|
||||
this.selectVipData.list = item.vcbList;
|
||||
// this.selectVipData.id = item.vcbList[0].id;
|
||||
} else {
|
||||
this.selectVipData.list = item.yanqiList;
|
||||
// this.selectVipData.id = item.yanqiList[0].id;
|
||||
}
|
||||
|
||||
this.selectVipData.title = item.title + "-" + item.year + "年";
|
||||
this.selectVipData.lastFee = item.rebateFee;
|
||||
this.selectVipData.state = item.state;
|
||||
|
||||
this.goodsList = this.selectVipData.list.map((e) => {
|
||||
return { ...e };
|
||||
});
|
||||
this.selectGoodsData = this.selectVipData.list[type ? type : 0];
|
||||
this.$refs.commonSelectGoods.open();
|
||||
this.show = true;
|
||||
|
||||
// this.orderModalShow = true;
|
||||
// console.log("-----selectVipData-----", this.selectVipData);
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.orderPay.initPrepareOrder();
|
||||
// });
|
||||
},
|
||||
//关闭
|
||||
closeOrderModalShow() {
|
||||
this.orderModalShow = false;
|
||||
this.selectVipData = {};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.commonPageBox {
|
||||
height: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.vip_block{
|
||||
padding: 20rpx;
|
||||
.vip_block {
|
||||
padding: 20rpx;
|
||||
}
|
||||
.vip_item{
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px 0px #a7bbe4;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
.vip_item {
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px 0px #a7bbe4;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
.vip_item_title{
|
||||
display: inline-block;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 15rpx;
|
||||
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
|
||||
.vip_item_title {
|
||||
display: inline-block;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 15rpx;
|
||||
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
|
||||
}
|
||||
.vip_item_special .vip_item_title{
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 26rpx;
|
||||
background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
|
||||
.vip_item_special .vip_item_title {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 26rpx;
|
||||
background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
|
||||
}
|
||||
.vip_price{
|
||||
margin-top: 5rpx;
|
||||
.vip_price {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.vip_price text,.vip_qx text,.vip_qx_v{
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
.vip_price text,
|
||||
.vip_qx text,
|
||||
.vip_qx_v {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.vip_item_used{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #427ec5;
|
||||
font-weight: bold;
|
||||
.vip_item_used {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #427ec5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.vip_item_btn{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 30rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 40rpx;
|
||||
border: 1rpx solid #ff1f00;
|
||||
color: #ff1f00;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 15rpx;
|
||||
opacity: 0.8;
|
||||
.vip_item_btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 30rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 40rpx;
|
||||
border: 1rpx solid #ff1f00;
|
||||
color: #ff1f00;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 15rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.font_bold{
|
||||
font-weight: bold;
|
||||
.font_bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.vip_fee{
|
||||
font-size: 34rpx !important;
|
||||
color: #ff1f00;
|
||||
font-weight: bold;
|
||||
padding: 0 5rpx;
|
||||
.vip_fee {
|
||||
font-size: 34rpx !important;
|
||||
color: #ff1f00;
|
||||
font-weight: bold;
|
||||
padding: 0 5rpx;
|
||||
}
|
||||
.vip_price_v{
|
||||
font-size: 26rpx !important;
|
||||
color: #ff1f00;
|
||||
border: 1rpx solid #ff1f00;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
.vip_price_v {
|
||||
font-size: 26rpx !important;
|
||||
color: #ff1f00;
|
||||
border: 1rpx solid #ff1f00;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.vip_price_yq{
|
||||
font-size: 26rpx !important;
|
||||
color: #427ec5;
|
||||
border: 1rpx solid #427ec5;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
.vip_price_yq {
|
||||
font-size: 26rpx !important;
|
||||
color: #427ec5;
|
||||
border: 1rpx solid #427ec5;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.line{
|
||||
text-decoration: line-through;
|
||||
color: #258feb;
|
||||
font-style: italic;
|
||||
.line {
|
||||
text-decoration: line-through;
|
||||
color: #258feb;
|
||||
font-style: italic;
|
||||
}
|
||||
.vip_item_flag{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding-left: 20rpx;
|
||||
.vip_item_flag {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.vip_item_flag text{
|
||||
vertical-align: bottom;
|
||||
.vip_item_flag text {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
.vip_item_overdue{
|
||||
background: rgba(220, 223, 225, 0.9) !important;
|
||||
opacity: 0.75;
|
||||
.vip_item_overdue {
|
||||
background: rgba(220, 223, 225, 0.9) !important;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.vip_item_overdue .vip_item_title{
|
||||
background-image: none;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
.vip_item_overdue .vip_item_title {
|
||||
background-image: none;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
}
|
||||
.vip_item_bg_1{
|
||||
background: rgba(227, 120, 125, 0.3) !important;
|
||||
.vip_item_bg_1 {
|
||||
background: rgba(227, 120, 125, 0.3) !important;
|
||||
}
|
||||
.vip_item_bg_2{
|
||||
background: rgba(64, 148, 222, 0.3) !important;
|
||||
.vip_item_bg_2 {
|
||||
background: rgba(64, 148, 222, 0.3) !important;
|
||||
}
|
||||
.vip_item_tip{
|
||||
color: #ff1f00;
|
||||
font-size: 26rpx;
|
||||
padding-left: 20rpx;
|
||||
.vip_item_tip {
|
||||
color: #ff1f00;
|
||||
font-size: 26rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.vip_item_tip text{
|
||||
vertical-align: bottom;
|
||||
.vip_item_tip text {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user