|
|
@@ -1,770 +1,932 @@
|
|
|
-<template>
|
|
|
- <view class="container clearfix">
|
|
|
- <view class="cm-member-top">
|
|
|
- <view class="cm-member-cel" @click="hanldPayUrl('/pages/user/member/member-record')">购买记录</view>
|
|
|
- <view class="cm-member-head">
|
|
|
- <view class="cm-member-text">
|
|
|
- <view class="cm-member-h1">
|
|
|
- <text v-if="memberType == 0">采美·超级会员</text>
|
|
|
- <text v-if="memberType == 1">已开通采美·超级会员</text>
|
|
|
- <text v-if="memberType == 2">采美·超级会员已过期</text>
|
|
|
- </view>
|
|
|
- <view class="cm-member-p">
|
|
|
- <text v-if="memberType == 0">享专属特权</text>
|
|
|
- <text v-else>有效期至：2021-10-01</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-btn">
|
|
|
- <view class="btn" @click="hanldPayUrl('/pages/user/member/member-renew')">续费</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-main">
|
|
|
- <view class="title">超级会员套餐</view>
|
|
|
- <view class="cm-member-pay">
|
|
|
- <view class="pay-item"
|
|
|
- v-for="(pay,index) in payList"
|
|
|
- :key="index"
|
|
|
- :class="{current: tabCurrent === index}"
|
|
|
- @click="handleCheckedPay(index,pay)"
|
|
|
- >
|
|
|
- <view class="hot" v-if="index == 0">推荐</view>
|
|
|
- <view class="text-1">{{ pay.month }}</view>
|
|
|
- <view class="text-2"> <text>￥</text>{{ pay.money }}</view>
|
|
|
- <view class="text-3">{{ pay.text }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-button">
|
|
|
- <view class="pay-btn pay" @click="hanldPayUrl('/pages/user/member/member-pay')">立即支付{{ payAmount }}元开通</view>
|
|
|
- <view class="pay-btn none">抵扣{{ payBeans }}个采美豆开通</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-main">
|
|
|
- <view class="title">专属特权</view>
|
|
|
- <view class="cm-member-privilege clearfix">
|
|
|
- <view class="privilege-item" v-for="(priv,index) in privilegeList" :key="index">
|
|
|
- <image class="image" :src="priv.icon" mode=""></image>
|
|
|
- <view class="text-2">{{ priv.privText }}</view>
|
|
|
- <view class="text-3">{{ priv.privName }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-main">
|
|
|
- <view class="title">专属优惠券<text class="small">每月可领4个</text></view>
|
|
|
- <view class="cm-member-coupon clearfix">
|
|
|
- <view v-for="(coupon,index) in productCouponList"
|
|
|
- :key="index"
|
|
|
- :id="coupon.couponId"
|
|
|
- class="coupon-list"
|
|
|
- :class="coupon.useStatus == 1 ? 'none' : ''"
|
|
|
- >
|
|
|
- <view class="list-cell-tags">{{ coupon.couponType | TypeFormat }}</view>
|
|
|
- <view class="list-cell-le">
|
|
|
- <view class="coupon-maxMoney"><text class="small">￥</text>{{ coupon.couponAmount }}</view>
|
|
|
- <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
|
|
|
- <view class="coupon-texts">
|
|
|
- <text v-if="coupon.couponType == 0">
|
|
|
- {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 1">
|
|
|
- {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
|
|
|
- </text>
|
|
|
- <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
- <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-ri">
|
|
|
- <view class="icon-used-btn receive" v-if="coupon.useStatus == 0" @click="receiveCoupon(coupon)">立即领取</view>
|
|
|
- <view class="icon-used-btn make" v-if="coupon.useStatus == 1">已领取</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-main none">
|
|
|
- <view class="title">
|
|
|
- 优惠商品
|
|
|
- <view class="more" @click="hanldPayUrl('/pages/user/member/member-product')">更多<text class="iconfont icon-xiayibu"></text></view>
|
|
|
- </view>
|
|
|
- <view class="cm-member-product clearfix">
|
|
|
- <view v-for="(pro,index) in productList"
|
|
|
- :key="index"
|
|
|
- :id="pro.productId"
|
|
|
- class="product-list"
|
|
|
- @click="productDetail(pro.productId)"
|
|
|
- >
|
|
|
- <view class="product-image">
|
|
|
- <image :src="pro.image" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="product-mains">
|
|
|
- <view class="product-name">
|
|
|
- {{ pro.name }}
|
|
|
- </view>
|
|
|
- <view class="product-tags">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags">优惠券</view>
|
|
|
- <template v-if="pro.actStatus== 1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(pro.promotions)">
|
|
|
- {{pro.promotions.name}}
|
|
|
- <text v-if="pro.priceFlag != 1">:￥{{ pro.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{pro.promotions.name}}</view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="svip-tags" v-if='pro.proType == 0'>
|
|
|
- <view class="tags none">SVIP</view>
|
|
|
- </view>
|
|
|
- <view class="svip-tags" v-if='pro.proType == 1'>
|
|
|
- <view class="tags">SVIP</view>
|
|
|
- <view class="price">{{ pro.discount }}</view>
|
|
|
- </view>
|
|
|
- <view class="svip-tags" v-if='pro.proType == 2'>
|
|
|
- <view class="tags">SVIP</view>
|
|
|
- <view class="price">￥{{ pro.discountPrice | NumFormat }}</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-price">
|
|
|
- <view class="list-none" v-if="pro.priceFlag == 1">￥未公开价格</view>
|
|
|
- <view class="list-none" v-else-if="pro.priceFlag == 2">￥价格仅会员可见</view>
|
|
|
- <view class="list-none-price" v-else>￥{{ pro.price | NumFormat }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { mapState,mapMutations} from 'vuex'
|
|
|
- import modalLayer from '@/components/modal-layer'
|
|
|
- export default {
|
|
|
- components:{
|
|
|
- modalLayer
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- StaticUrl:this.$Static,
|
|
|
- isModallayer:false,
|
|
|
- memberType:0,
|
|
|
- tabCurrent:0,
|
|
|
- params:{
|
|
|
- userId:0,
|
|
|
- redemptionCode:'',
|
|
|
- source:2,
|
|
|
- },
|
|
|
- payList:[
|
|
|
- {month:'12个月',money:4800,type:1,text:'400元/月',beans:480000},
|
|
|
- {month:'3个月',money:1500,type:2,text:'500元/月',beans:150000},
|
|
|
- {month:'1个月',money:600,type:3,text:'',beans:60000},
|
|
|
- ],
|
|
|
- payAmount:4800,
|
|
|
- payBeans:480000,
|
|
|
- privilegeList:[
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer1@2x.png',
|
|
|
- privText:'优惠商品',
|
|
|
- privName:'超级会员专享'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer2@2x.png',
|
|
|
- privText:'专属优惠券',
|
|
|
- privName:'超级会员专享'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer3@2x.png',
|
|
|
- privText:'采美豆翻倍',
|
|
|
- privName:'下单返采美豆'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer4@2x.png',
|
|
|
- privText:'专属客服',
|
|
|
- privName:'一对一'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer5@2x.png',
|
|
|
- privText:'专属销售顾问',
|
|
|
- privName:'一对一'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer6@2x.png',
|
|
|
- privText:'快速发货',
|
|
|
- privName:'会员加速'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer7@2x.png',
|
|
|
- privText:'售后服务',
|
|
|
- privName:'会员加速'
|
|
|
- },
|
|
|
- {
|
|
|
- icon:'https://static.caimei365.com/app/img/icon/icon-member-prer8@2x.png',
|
|
|
- privText:'敬请期待',
|
|
|
- privName:'更多特权'
|
|
|
- }
|
|
|
- ],
|
|
|
- productCouponList:[
|
|
|
- {
|
|
|
- couponAmount:5000,
|
|
|
- touchPrice:2000,
|
|
|
- couponType:0,
|
|
|
- productType:1,
|
|
|
- categoryType:1,
|
|
|
- shopName:null,
|
|
|
- useStatus:0,
|
|
|
- },
|
|
|
- {
|
|
|
- couponAmount:5000,
|
|
|
- touchPrice:2000,
|
|
|
- couponType:1,
|
|
|
- productType:1,
|
|
|
- categoryType:1,
|
|
|
- shopName:null,
|
|
|
- useStatus:0,
|
|
|
- },
|
|
|
- {
|
|
|
- couponAmount:5000,
|
|
|
- touchPrice:2000,
|
|
|
- couponType:2,
|
|
|
- productType:1,
|
|
|
- categoryType:1,
|
|
|
- shopName:null,
|
|
|
- useStatus:1,
|
|
|
- },
|
|
|
- {
|
|
|
- couponAmount:5000,
|
|
|
- touchPrice:2000,
|
|
|
- couponType:3,
|
|
|
- productType:1,
|
|
|
- categoryType:1,
|
|
|
- shopName:null,
|
|
|
- useStatus:1,
|
|
|
- },
|
|
|
- ],
|
|
|
- productList:[
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
- name:'ET-SPACE全身热疗系统生物热能太空舱',
|
|
|
- unit:'台',
|
|
|
- ladderPriceFlag:0,
|
|
|
- priceFlag:1,
|
|
|
- originalPrice:100,
|
|
|
- price:500,
|
|
|
- actStatus:1,
|
|
|
- promotions:null,
|
|
|
- isChecked:false,
|
|
|
- productIds:1000,
|
|
|
- proType:1,
|
|
|
- discount:'8.8折'
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
- name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
- unit:'台',
|
|
|
- ladderPriceFlag:1,
|
|
|
- priceFlag:2,
|
|
|
- originalPrice:100,
|
|
|
- price:500,
|
|
|
- actStatus:1,
|
|
|
- promotions:{
|
|
|
- type:1,
|
|
|
- mode:1,
|
|
|
- name:'优惠价'
|
|
|
- },
|
|
|
- isChecked:false,
|
|
|
- productIds:1001,
|
|
|
- proType:2,
|
|
|
- discountPrice:5000000,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
- name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
- unit:'台',
|
|
|
- ladderPriceFlag:1,
|
|
|
- priceFlag:0,
|
|
|
- originalPrice:100,
|
|
|
- price:5000000,
|
|
|
- actStatus:1,
|
|
|
- promotions:{
|
|
|
- type:0,
|
|
|
- mode:0,
|
|
|
- name:'单品满减'
|
|
|
- },
|
|
|
- isChecked:false,
|
|
|
- productIds:1002,
|
|
|
- proType:0,
|
|
|
- discountPrice:5000000,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
- name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
- unit:'台',
|
|
|
- ladderPriceFlag:1,
|
|
|
- priceFlag:0,
|
|
|
- originalPrice:100,
|
|
|
- price:50000000,
|
|
|
- actStatus:1,
|
|
|
- promotions:null,
|
|
|
- isChecked:false,
|
|
|
- productIds:1003,
|
|
|
- proType:0,
|
|
|
- discountPrice:50000,
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- filters: {
|
|
|
- TypeFormat:function(value) {
|
|
|
- switch (value) {
|
|
|
- case 0:
|
|
|
- return '活动券'
|
|
|
- break
|
|
|
- case 1:
|
|
|
- return '品类券'
|
|
|
- break
|
|
|
- case 2:
|
|
|
- return '用户专享券'
|
|
|
- break
|
|
|
- case 3:
|
|
|
- return '店铺券'
|
|
|
- break
|
|
|
- case 4:
|
|
|
- return '新用户券'
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- NumFormat:function(text) {//处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo','identity','isActivity'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- hanldPayUrl(url){
|
|
|
- this.$api.navigateTo(url)
|
|
|
- },
|
|
|
- handleCheckedPay(index,pay){// 选择会员
|
|
|
- this.tabCurrent = index
|
|
|
- this.payAmount = pay.money
|
|
|
- this.payBeans = pay.beans
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- productDetail(productId) {
|
|
|
- this.isModallayer = true
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
|
|
|
- this.isModallayer = false
|
|
|
- },
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- setTimeout(() => {
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- }, 200)
|
|
|
- },
|
|
|
- onShow(){
|
|
|
- this.$api.getComStorage('userInfo').then((resolve) =>{
|
|
|
- this.params.userId = resolve.userId ? resolve.userId : 0
|
|
|
- }).catch(error =>{
|
|
|
- console.log('暂无用户信息~')
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- page{
|
|
|
- background-color: #F7F7F7;
|
|
|
- }
|
|
|
- .container{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .cm-member-top{
|
|
|
- width: 100%;
|
|
|
- height: 242rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-member-bg01@2x.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- position: relative;
|
|
|
- .cm-member-cel{
|
|
|
- float: right;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- margin-top: 40rpx;
|
|
|
- color: #F0CB72;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .cm-member-head{
|
|
|
- width: 702rpx;
|
|
|
- height: 132rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 30rpx 32rpx 0 109rpx;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-member-bg02@2x.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 24rpx;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- .cm-member-text{
|
|
|
- float: left;
|
|
|
- .cm-member-h1{
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- color: #55331D;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .cm-member-p{
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #55331D;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-btn{
|
|
|
- float: right;
|
|
|
- padding-top: 12rpx;
|
|
|
- .btn{
|
|
|
- width: 118rpx;
|
|
|
- height: 48rpx;
|
|
|
- background: linear-gradient(270deg, #585658 0%, #323031 100%);
|
|
|
- border-radius: 24rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #F0CB72;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-main{
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 24rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- &.none{
|
|
|
- background-color: #F7F7F7;
|
|
|
- padding: 20rpx 24rpx 0 24rpx;
|
|
|
- }
|
|
|
- .title{
|
|
|
- font-size: $font-size-32;
|
|
|
- line-height: 45rpx;
|
|
|
- text-align: left;
|
|
|
- color:#55331D;
|
|
|
- font-weight: bold;
|
|
|
- .small{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #E4AA43;
|
|
|
- font-weight: normal;
|
|
|
- margin-left: 15rpx;
|
|
|
- }
|
|
|
- .more{
|
|
|
- float: right;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 45rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- .iconfont{
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-pay{
|
|
|
- width: 100%;
|
|
|
- height:236rpx;
|
|
|
- margin: 40rpx 0;
|
|
|
- .pay-item{
|
|
|
- width: 218rpx;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- margin-right: 24rpx;
|
|
|
- border: 1px solid #F0F0F0;
|
|
|
- border-radius: 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- padding: 40rpx 0;
|
|
|
- position: relative;
|
|
|
- .hot{
|
|
|
- width: 80rpx;
|
|
|
- height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #FFFFFF;
|
|
|
- background-color: #FF2A2A;
|
|
|
- border-radius: 0 8rpx 8rpx 8rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: -10rpx;
|
|
|
- }
|
|
|
- &.current{
|
|
|
- background-color: #FDF8EE;
|
|
|
- border: 1px solid #F0CC8C;
|
|
|
- }
|
|
|
- &:last-child{
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .text-1{
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- color: #55331D;
|
|
|
- }
|
|
|
- .text-2{
|
|
|
- line-height: 59rpx;
|
|
|
- font-size: $font-size-40;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- font-weight: bold;
|
|
|
- text{
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- }
|
|
|
- .text-3{
|
|
|
- line-height: 33rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-button{
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 51rpx;
|
|
|
- .pay-btn{
|
|
|
- width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-30;
|
|
|
- color: #55331D;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: $font-size-24;
|
|
|
- &.pay{
|
|
|
- background: linear-gradient(90deg, #FEE9BA 0%, #F0CB72 100%);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- border: 1px solid #F0CB72;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-privilege{
|
|
|
- width: 100%;
|
|
|
- margin: 24rpx 0 16rpx 0;
|
|
|
- background-color: #FFFFFF;
|
|
|
- .privilege-item{
|
|
|
- width: 25%;
|
|
|
- height: 196rpx;
|
|
|
- margin: 16rpx 0;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .image{
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .text-2{
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
- .text-3{
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #999999;
|
|
|
- line-height: 30rpx;
|
|
|
- margin-top: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-coupon{
|
|
|
- width: 100%;
margin: 24rpx 0 0 0;
|
|
|
- .coupon-list{
|
|
|
- width: 338rpx;
|
|
|
- height: 148rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon@2x.png);
|
|
|
- background-size: cover;
|
|
|
- margin-right: 24rpx;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- &:nth-child(2n){
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon-none@2x.png);
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .list-cell-tags{
|
|
|
- display: inline-block;
|
|
|
- padding: 0 10rpx;
|
|
|
- height: 27rpx;
|
|
|
- line-height: 27rpx;
|
|
|
- background-color: #E4AA43;
|
|
|
- color: #55331D;
|
|
|
- font-size: $font-size-20;
|
|
|
- border-radius: 8rpx 0 8rpx 0;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- .list-cell-le{
|
|
|
- width: 258rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 27rpx 24rpx 0 26rpx;
|
|
|
- float: left;
|
|
|
- .coupon-maxMoney{
|
|
|
- width: 100%;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #55331D;
|
|
|
- text-align: left;
|
|
|
- .small{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-minMoney{
|
|
|
- width: 100%;
|
|
|
- height: 30rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #55331D;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .coupon-texts{
|
|
|
- width: 100%;
|
|
|
- height: 30rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #55331D;
|
|
|
- text-align: left;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-ri{
|
|
|
- width: 80rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- .icon-used-btn{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-22;
|
|
|
- text-align: center;
|
|
|
- &.receive{
|
|
|
- color: #55331D;
|
|
|
- padding: 15rpx 28rpx;
|
|
|
- }
|
|
|
- &.make{
|
|
|
- padding: 30rpx 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cm-member-product{
|
|
|
- width: 100%;
|
|
|
- margin-top: 16rpx;
|
|
|
- .product-list{
|
|
|
- width: 339rpx;
|
|
|
- height: 516rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- float: left;
|
|
|
- margin-right: 24rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- &:nth-child(2n){
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .product-image{
|
|
|
- width: 339rpx;
|
|
|
- height: 339rpx;
|
|
|
- image{
|
|
|
- width: 339rpx;
|
|
|
- height: 339rpx;
|
|
|
- display: block;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-mains{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- .product-name{
|
|
|
- line-height: 36rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- .product-tags{
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- margin-top: 6rpx;
|
|
|
- .floor-item-act{
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-price{
|
|
|
- width: 100%;
|
|
|
- line-height: 37rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #F94B4B;
|
|
|
- margin-top: 8rpx;
|
|
|
- .list-none-price{
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="container clearfix">
|
|
|
+ <view class="cm-member-top">
|
|
|
+ <view
|
|
|
+ class="cm-member-cel"
|
|
|
+ v-if="userVip.vipFlag == 1 || userVip.vipFlag == -1"
|
|
|
+ @click="hanldPayUrl('/pages/user/member/member-record')"
|
|
|
+ >购买记录</view
|
|
|
+ >
|
|
|
+ <view class="cm-member-head">
|
|
|
+ <view class="cm-member-text" v-if="isRequest">
|
|
|
+ <view class="cm-member-h1">
|
|
|
+ <text v-if="userVip.vipFlag == 0">采美·超级会员</text>
|
|
|
+ <text v-if="userVip.vipFlag == 1">已开通采美·超级会员</text>
|
|
|
+ <text v-if="userVip.vipFlag == -1">采美·超级会员已过期</text>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-p">
|
|
|
+ <text v-if="userVip.vipFlag == 0">享专属特权</text>
|
|
|
+ <text v-else>有效期至：{{ userVip.endTime }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-btn" v-if="userVip.vipFlag == 1 || userVip.vipFlag == -1">
|
|
|
+ <view class="btn" @click="hanldPayUrl('/pages/user/member/member-renew')">续费</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-main" v-if="userVip.vipFlag == 0 || userVip.vipFlag == -1">
|
|
|
+ <view class="title">超级会员套餐</view>
|
|
|
+ <view class="cm-member-pay">
|
|
|
+ <view
|
|
|
+ class="pay-item"
|
|
|
+ v-for="(pay, index) in payList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ current: tabCurrent === index }"
|
|
|
+ @click="handleCheckedPay(index, pay)"
|
|
|
+ >
|
|
|
+ <view class="hot" v-if="index == 0">推荐</view> <view class="text-1">{{ pay.month }}</view>
|
|
|
+ <view class="text-2"> <text>￥</text>{{ pay.money }}</view>
|
|
|
+ <view class="text-3">{{ pay.text }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-button">
|
|
|
+ <view class="pay-btn pay" @click="hanldWechatPay">立即支付{{ handelPayMsg.money }}元开通</view>
|
|
|
+ <view class="pay-btn none" @click="hanldeShowBeans">抵扣{{ handelPayMsg.beans }}个采美豆开通</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-main">
|
|
|
+ <view class="title">专属特权</view>
|
|
|
+ <view class="cm-member-privilege clearfix">
|
|
|
+ <view class="privilege-item" v-for="(priv, index) in privilegeList" :key="index">
|
|
|
+ <image class="image" :src="priv.icon" mode=""></image>
|
|
|
+ <view class="text-2">{{ priv.privText }}</view> <view class="text-3">{{ priv.privName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-main">
|
|
|
+ <view class="title">专属优惠券<text class="small">每月可领4个</text></view>
|
|
|
+ <view class="cm-member-coupon clearfix">
|
|
|
+ <view
|
|
|
+ v-for="(coupon, index) in productCouponList"
|
|
|
+ :key="index"
|
|
|
+ :id="coupon.couponId"
|
|
|
+ class="coupon-list"
|
|
|
+ :class="coupon.useStatus == 1 ? 'none' : ''"
|
|
|
+ >
|
|
|
+ <view class="list-cell-tags">{{ coupon.couponType | TypeFormat }}</view>
|
|
|
+ <view class="list-cell-le">
|
|
|
+ <view class="coupon-maxMoney"><text class="small">￥</text>{{ coupon.couponAmount }}</view>
|
|
|
+ <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
|
|
|
+ <view class="coupon-texts">
|
|
|
+ <text v-if="coupon.couponType == 0">
|
|
|
+ {{
|
|
|
+ coupon.productType && coupon.productType == 1
|
|
|
+ ? '全商城商品通用'
|
|
|
+ : '仅可购买指定商品'
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 1">
|
|
|
+ {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <view class="icon-used-btn receive" v-if="coupon.useStatus == 0" @click="receiveCoupon(coupon)"
|
|
|
+ >立即领取</view
|
|
|
+ >
|
|
|
+ <view class="icon-used-btn make" v-if="coupon.useStatus == 1">已领取</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-main none">
|
|
|
+ <view class="title">
|
|
|
+ 优惠商品
|
|
|
+ <view class="more" @click="hanldPayUrl('/pages/user/member/member-product')"
|
|
|
+ >更多<text class="iconfont icon-xiayibu"></text
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-product clearfix">
|
|
|
+ <view
|
|
|
+ v-for="(pro, index) in productList"
|
|
|
+ :key="index"
|
|
|
+ :id="pro.productId"
|
|
|
+ class="product-list"
|
|
|
+ @click="productDetail(pro.productId)"
|
|
|
+ >
|
|
|
+ <view class="product-image"> <image :src="pro.image" mode=""></image> </view>
|
|
|
+ <view class="product-mains">
|
|
|
+ <view class="product-name"> {{ pro.name }} </view>
|
|
|
+ <view class="product-tags">
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="coupon-tags">优惠券</view>
|
|
|
+ <template v-if="pro.actStatus == 1">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(pro.promotions)">
|
|
|
+ {{ pro.promotions.name }}
|
|
|
+ <text v-if="pro.priceFlag != 1">:￥{{ pro.price | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pro.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="svip-tags" v-if="pro.proType == 0">
|
|
|
+ <view class="tags none">SVIP</view>
|
|
|
+ </view>
|
|
|
+ <view class="svip-tags" v-if="pro.proType == 1">
|
|
|
+ <view class="tags">SVIP</view> <view class="price">{{ pro.discount }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="svip-tags" v-if="pro.proType == 2">
|
|
|
+ <view class="tags">SVIP</view>
|
|
|
+ <view class="price">￥{{ pro.discountPrice | NumFormat }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-price">
|
|
|
+ <view class="list-none" v-if="pro.priceFlag == 1">￥未公开价格</view>
|
|
|
+ <view class="list-none" v-else-if="pro.priceFlag == 2">￥价格仅会员可见</view>
|
|
|
+ <view class="list-none-price" v-else>￥{{ pro.price | NumFormat }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if="isModallayer"></modal-layer>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <template>
|
|
|
+ <view class="cm-model-alert" v-if="isShowBeansModal">
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ <text>购买超级会员</text>
|
|
|
+ <text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
|
|
|
+ </view>
|
|
|
+ <view class="text-content">
|
|
|
+ <view class="text"
|
|
|
+ >确定使用<text class="text-p">{{ handelPayMsg.beans }}</text
|
|
|
+ >个采美豆抵扣{{ handelPayMsg.month }}的采美超级会员吗？</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="text-button">
|
|
|
+ <view class="btn btn-cancel" @click="handelCanelBeans">取消</view>
|
|
|
+ <view class="btn btn-confirm" @click="handelConfirmBeans">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ modalLayer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl: this.$Static,
|
|
|
+ isRequest:false,
|
|
|
+ isModallayer: false,
|
|
|
+ isShowBeansModal: false,
|
|
|
+ memberType: 0,
|
|
|
+ tabCurrent: 0,
|
|
|
+ userVip: {},
|
|
|
+ handelPayMsg: {
|
|
|
+ beans: 480000,
|
|
|
+ money: 4800,
|
|
|
+ month: '12个月',
|
|
|
+ packageId: 1
|
|
|
+ },
|
|
|
+ userIdentity: 0,
|
|
|
+ payParam: {
|
|
|
+ userId: 0,
|
|
|
+ packageId: 1
|
|
|
+ },
|
|
|
+ payList: [
|
|
|
+ { month: '12个月', money: 4800, packageId: 1, text: '400元/月', beans: 480000 },
|
|
|
+ { month: '3个月', money: 1500, packageId: 2, text: '500元/月', beans: 150000 },
|
|
|
+ { month: '1个月', money: 600, packageId: 3, text: '', beans: 60000 }
|
|
|
+ ],
|
|
|
+ privilegeList: [
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer1@2x.png',
|
|
|
+ privText: '优惠商品',
|
|
|
+ privName: '超级会员专享'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer2@2x.png',
|
|
|
+ privText: '专属优惠券',
|
|
|
+ privName: '超级会员专享'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer3@2x.png',
|
|
|
+ privText: '采美豆翻倍',
|
|
|
+ privName: '下单返采美豆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer4@2x.png',
|
|
|
+ privText: '专属客服',
|
|
|
+ privName: '一对一'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer5@2x.png',
|
|
|
+ privText: '专属销售顾问',
|
|
|
+ privName: '一对一'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer6@2x.png',
|
|
|
+ privText: '快速发货',
|
|
|
+ privName: '会员加速'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer7@2x.png',
|
|
|
+ privText: '售后服务',
|
|
|
+ privName: '会员加速'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon-member-prer8@2x.png',
|
|
|
+ privText: '敬请期待',
|
|
|
+ privName: '更多特权'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ productCouponList: [
|
|
|
+ {
|
|
|
+ couponAmount: 5000,
|
|
|
+ touchPrice: 2000,
|
|
|
+ couponType: 0,
|
|
|
+ productType: 1,
|
|
|
+ categoryType: 1,
|
|
|
+ shopName: null,
|
|
|
+ useStatus: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ couponAmount: 5000,
|
|
|
+ touchPrice: 2000,
|
|
|
+ couponType: 1,
|
|
|
+ productType: 1,
|
|
|
+ categoryType: 1,
|
|
|
+ shopName: null,
|
|
|
+ useStatus: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ couponAmount: 5000,
|
|
|
+ touchPrice: 2000,
|
|
|
+ couponType: 2,
|
|
|
+ productType: 1,
|
|
|
+ categoryType: 1,
|
|
|
+ shopName: null,
|
|
|
+ useStatus: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ couponAmount: 5000,
|
|
|
+ touchPrice: 2000,
|
|
|
+ couponType: 3,
|
|
|
+ productType: 1,
|
|
|
+ categoryType: 1,
|
|
|
+ shopName: null,
|
|
|
+ useStatus: 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ productList: [
|
|
|
+ {
|
|
|
+ image: 'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
+ name: 'ET-SPACE全身热疗系统生物热能太空舱',
|
|
|
+ unit: '台',
|
|
|
+ ladderPriceFlag: 0,
|
|
|
+ priceFlag: 1,
|
|
|
+ originalPrice: 100,
|
|
|
+ price: 500,
|
|
|
+ actStatus: 1,
|
|
|
+ promotions: null,
|
|
|
+ isChecked: false,
|
|
|
+ productIds: 1000,
|
|
|
+ proType: 1,
|
|
|
+ discount: '8.8折'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
+ name: 'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
+ unit: '台',
|
|
|
+ ladderPriceFlag: 1,
|
|
|
+ priceFlag: 2,
|
|
|
+ originalPrice: 100,
|
|
|
+ price: 500,
|
|
|
+ actStatus: 1,
|
|
|
+ promotions: {
|
|
|
+ type: 1,
|
|
|
+ mode: 1,
|
|
|
+ name: '优惠价'
|
|
|
+ },
|
|
|
+ isChecked: false,
|
|
|
+ productIds: 1001,
|
|
|
+ proType: 2,
|
|
|
+ discountPrice: 5000000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
+ name: 'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
+ unit: '台',
|
|
|
+ ladderPriceFlag: 1,
|
|
|
+ priceFlag: 0,
|
|
|
+ originalPrice: 100,
|
|
|
+ price: 5000000,
|
|
|
+ actStatus: 1,
|
|
|
+ promotions: {
|
|
|
+ type: 0,
|
|
|
+ mode: 0,
|
|
|
+ name: '单品满减'
|
|
|
+ },
|
|
|
+ isChecked: false,
|
|
|
+ productIds: 1002,
|
|
|
+ proType: 0,
|
|
|
+ discountPrice: 5000000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
|
|
|
+ name: 'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
|
|
|
+ unit: '台',
|
|
|
+ ladderPriceFlag: 1,
|
|
|
+ priceFlag: 0,
|
|
|
+ originalPrice: 100,
|
|
|
+ price: 50000000,
|
|
|
+ actStatus: 1,
|
|
|
+ promotions: null,
|
|
|
+ isChecked: false,
|
|
|
+ productIds: 1003,
|
|
|
+ proType: 0,
|
|
|
+ discountPrice: 50000
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ filters: {
|
|
|
+ TypeFormat: function(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 0:
|
|
|
+ return '活动券'
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ return '品类券'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ return '用户专享券'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ return '店铺券'
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ return '新用户券'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initGetStotage() {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.payParam.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
+ this.getUserSuperCenter()
|
|
|
+ },
|
|
|
+ getUserSuperCenter() {
|
|
|
+ // 获取会员中心数据
|
|
|
+ this.UserService.getUserSuperCenter({ userId: this.payParam.userId })
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.userVip = data.vip
|
|
|
+ this.isRequest = true
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hanldeShowBeans() {
|
|
|
+ // 显示采美豆抵扣开通超级会员弹窗
|
|
|
+ this.isShowBeansModal = true
|
|
|
+ },
|
|
|
+ handelCanelBeans() {
|
|
|
+ // 取消采美豆抵扣超级会员
|
|
|
+ this.isShowBeansModal = false
|
|
|
+ },
|
|
|
+ handelConfirmBeans() {
|
|
|
+ // 确认采美豆抵扣开通超级会员
|
|
|
+ this.PayService.getUserRegisterSuperBeans(this.payParam)
|
|
|
+ .then(response => {
|
|
|
+ this.isShowBeansModal = false
|
|
|
+ this.$util.msg('开通成功', 2000, true, 'success')
|
|
|
+ this.getUserSuperCenter()
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hanldWechatPay() {
|
|
|
+ // 跳转微信只开通超级会员
|
|
|
+ this.$api.navigateTo(`/pages/user/member/member-pay?data=${JSON.stringify(this.handelPayMsg)}`)
|
|
|
+ },
|
|
|
+ handleCheckedPay(index, pay) {
|
|
|
+ // 选择会员
|
|
|
+ this.tabCurrent = index
|
|
|
+ this.payParam.packageId = pay.packageId
|
|
|
+ this.handelPayMsg = pay
|
|
|
+ },
|
|
|
+ hanldPayUrl(url) {
|
|
|
+ // 跳转
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ productDetail(productId) {
|
|
|
+ this.isModallayer = true
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
|
|
|
+ this.isModallayer = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.initGetStotage()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.cm-member-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 242rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-member-bg01@2x.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+ .cm-member-cel {
|
|
|
+ float: right;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ color: #f0cb72;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .cm-member-head {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 132rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 32rpx 0 109rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-member-bg02@2x.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 24rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ .cm-member-text {
|
|
|
+ float: left;
|
|
|
+ .cm-member-h1 {
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #55331d;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .cm-member-p {
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #55331d;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-btn {
|
|
|
+ float: right;
|
|
|
+ padding-top: 12rpx;
|
|
|
+ .btn {
|
|
|
+ width: 118rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: linear-gradient(270deg, #585658 0%, #323031 100%);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #f0cb72;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.cm-member-main {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ &.none {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ padding: 20rpx 24rpx 0 24rpx;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ line-height: 45rpx;
|
|
|
+ text-align: left;
|
|
|
+ color: #55331d;
|
|
|
+ font-weight: bold;
|
|
|
+ .small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #e4aa43;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ float: right;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 45rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ .iconfont {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-pay {
|
|
|
+ width: 100%;
|
|
|
+ height: 236rpx;
|
|
|
+ margin: 40rpx 0;
|
|
|
+ .pay-item {
|
|
|
+ width: 218rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 40rpx 0;
|
|
|
+ position: relative;
|
|
|
+ .hot {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #ff2a2a;
|
|
|
+ border-radius: 0 8rpx 8rpx 8rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -10rpx;
|
|
|
+ }
|
|
|
+ &.current {
|
|
|
+ background-color: #fdf8ee;
|
|
|
+ border: 1px solid #f0cc8c;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .text-1 {
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ color: #55331d;
|
|
|
+ }
|
|
|
+ .text-2 {
|
|
|
+ line-height: 59rpx;
|
|
|
+ font-size: $font-size-40;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-weight: bold;
|
|
|
+ text {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-3 {
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-button {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 51rpx;
|
|
|
+ .pay-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #55331d;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: $font-size-24;
|
|
|
+ &.pay {
|
|
|
+ background: linear-gradient(90deg, #fee9ba 0%, #f0cb72 100%);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ border: 1px solid #f0cb72;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-privilege {
|
|
|
+ width: 100%;
|
|
|
+ margin: 24rpx 0 16rpx 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .privilege-item {
|
|
|
+ width: 25%;
|
|
|
+ height: 196rpx;
|
|
|
+ margin: 16rpx 0;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .image {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .text-2 {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ .text-3 {
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-coupon {
|
|
|
+ width: 100%;
|
|
|
+ margin: 24rpx 0 0 0;
|
|
|
+ .coupon-list {
|
|
|
+ width: 338rpx;
|
|
|
+ height: 148rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon-none@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .list-cell-tags {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ height: 27rpx;
|
|
|
+ line-height: 27rpx;
|
|
|
+ background-color: #e4aa43;
|
|
|
+ color: #55331d;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 8rpx 0 8rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .list-cell-le {
|
|
|
+ width: 258rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 27rpx 24rpx 0 26rpx;
|
|
|
+ float: left;
|
|
|
+ .coupon-maxMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #55331d;
|
|
|
+ text-align: left;
|
|
|
+ .small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-minMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #55331d;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .coupon-texts {
|
|
|
+ width: 100%;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #55331d;
|
|
|
+ text-align: left;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-ri {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ .icon-used-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ &.receive {
|
|
|
+ color: #55331d;
|
|
|
+ padding: 15rpx 28rpx;
|
|
|
+ }
|
|
|
+ &.make {
|
|
|
+ padding: 30rpx 28rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cm-member-product {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ .product-list {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 516rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ float: left;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .product-image {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 339rpx;
|
|
|
+ image {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 339rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-mains {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .product-name {
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .product-tags {
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ .floor-item-act {
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-price {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 37rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #f94b4b;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .list-none-price {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.cm-model-alert {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 8888;
|
|
|
+ transition: all 0.4s;
|
|
|
+ .content {
|
|
|
+ width: 580rpx;
|
|
|
+ height: 390rpx;
|
|
|
+ position: absolute;
|
|
|
+ background: $bg-color;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .icon-iconfontguanbi {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 68rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ .text {
|
|
|
+ padding: 20rpx 0 0 0;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #666666;
|
|
|
+ text-align: justify;
|
|
|
+ .text-p {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-button {
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 50rpx;
|
|
|
+ margin-top: 30px;
|
|
|
+ .btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.btn-confirm {
|
|
|
+ background: $btn-confirm;
|
|
|
+ margin-left: 78rpx;
|
|
|
+ }
|
|
|
+ &.btn-cancel {
|
|
|
+ border: 1px solid #b2b2b2;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
