|
@@ -0,0 +1,1075 @@
|
|
|
+<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.time }}</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.duration }}个月</view>
|
|
|
+ <view class="text-2"> <text>¥</text>{{ pay.price }}</view>
|
|
|
+ <view class="text-3" v-if="index == 0 || index == 1">{{ pay.price / pay.duration }}元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-button" v-if="!popupShow">
|
|
|
+ <view class="pay-btn pay" @click="hanldWechatPay">查看客服二维码联系购买</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" v-if="productCouponList.length > 0">
|
|
|
+ <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 == 2 ? '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">仅限购买店铺【...】</text>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <template v-if="coupon.useStatus == 2">
|
|
|
+ <view class="icon-used-btn make">已使用</view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="icon-used-btn receive"
|
|
|
+ v-if="coupon.getFlag == 0"
|
|
|
+ @click="receiveCoupon(coupon)"
|
|
|
+ >立即领取</view
|
|
|
+ >
|
|
|
+ <view class="icon-used-btn make" v-if="coupon.getFlag == 1" @click="toUseCoupon(coupon)">
|
|
|
+ 去使用</view
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cm-member-main none" :style="{ paddingBottom: popupShow ? '260rpx' : '0rpx' }">
|
|
|
+ <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" v-if="pro.couponsLogo">优惠券</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-if="pro.svipProductFlag == 1">
|
|
|
+ <view class="svip-tags">
|
|
|
+ <view class="tags" :class="{ none: !isShowVipFlag }">SVIP</view>
|
|
|
+ <view class="price" v-if="isShowVipFlag(pro)">{{ pro.svipPriceTag }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-price">
|
|
|
+ <!-- 价格未公开 -->
|
|
|
+ <view class="list-none" v-if="pro.priceFlag == 1">¥未公开价格</view>
|
|
|
+ <!-- 价格公开 -->
|
|
|
+ <template v-else>
|
|
|
+ <!-- 个人机构且不是超级会员 -->
|
|
|
+ <template v-if="userIdentity == 4 && userVip.vipFlag != 1">
|
|
|
+ <!-- 价格仅会员可见 -->
|
|
|
+ <view class="list-none" v-if="pro.priceFlag == 2"
|
|
|
+ >¥价格仅会员可见</view
|
|
|
+ >
|
|
|
+ <!-- 价格仅医美机构可见 -->
|
|
|
+ <view class="list-none" v-else-if="pro.priceFlag == 3"
|
|
|
+ >¥仅医美机构可见</view
|
|
|
+ >
|
|
|
+ <view class="list-none-price" v-else>¥{{ pro.originalPrice | NumFormat }}</view>
|
|
|
+ </template>
|
|
|
+ <!-- 资质机构 || 个人机构且是超级会员 -->
|
|
|
+ <template v-else>
|
|
|
+ <!-- 价格仅医美机构可见 -->
|
|
|
+ <view class="list-none" v-if="pro.priceFlag == 3 && firstClubType!=1"
|
|
|
+ >¥仅医美机构可见</view
|
|
|
+ >
|
|
|
+ <view class="list-none-price" v-else>¥{{ pro.originalPrice | NumFormat }}</view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </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="handelCanelBeans"></text>
|
|
|
+ </view>
|
|
|
+ <view class="text-content">
|
|
|
+ <view class="text"
|
|
|
+ >确定使用<text class="text-p">{{ handelPayMsg.beans }}</text
|
|
|
+ >个采美豆抵扣{{ handelPayMsg.duration }}个月的采美超级会员吗?</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>
|
|
|
+ <!-- 悬浮按钮 -->
|
|
|
+ <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
|
|
|
+ <view class="tui-popup-box clearfix" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
+ <view class="cm-member-button">
|
|
|
+ <view class="pay-btn pay" @click="hanldWechatPay">查看客服二维码联系购买</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+import wxLogin from '@/common/config/wxLogin.js'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ modalLayer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl: this.$Static,
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ isRequest: false,
|
|
|
+ isModallayer: false,
|
|
|
+ isShowBeansModal: false,
|
|
|
+ popupShow: false,
|
|
|
+ memberType: 0,
|
|
|
+ tabCurrent: 0,
|
|
|
+ userIdentity: 0,
|
|
|
+ firstClubType:0,
|
|
|
+ userVip: {},
|
|
|
+ handelPayMsg: {
|
|
|
+ beans: 0,
|
|
|
+ price: 0,
|
|
|
+ month: '',
|
|
|
+ packageId: 0
|
|
|
+ },
|
|
|
+ payParam: {
|
|
|
+
|
|
|
+ userId: 0,
|
|
|
+ packageId: 0
|
|
|
+ },
|
|
|
+ payList: [
|
|
|
+ {duration:12,price:1800},
|
|
|
+ {duration:3,price:600}
|
|
|
+ ],
|
|
|
+ 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-prer8@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: '会员加速'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ listQuery: {
|
|
|
+ userId: 0,
|
|
|
+ source: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4
|
|
|
+ },
|
|
|
+ productCouponList: [],
|
|
|
+ productList: [],
|
|
|
+ isReceiveLoading: false,
|
|
|
+ previewUrls:['https://static.caimei365.com/app/img/icon/icon-vxkecode.png'],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ // this.getUserSuperPackage()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ TypeFormat(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 0:
|
|
|
+ return '活动券'
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ return '品类券'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ return '用户专享券'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ return '店铺券'
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ return '新用户券'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ NumFormat(value) {
|
|
|
+ //处理金额
|
|
|
+ return Number(value).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','clubType'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initGetStotage() {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.payParam.userId = this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
+ this.firstClubType = this.clubType
|
|
|
+ this.getUserSuperCenter()
|
|
|
+ this.getSvipProductPage()
|
|
|
+ },
|
|
|
+ getUserSuperCenter() {
|
|
|
+ // 获取会员中心数据
|
|
|
+ this.UserService.getUserSuperCenter({ userId: this.payParam.userId })
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.userVip = data.vip
|
|
|
+ this.productCouponList = data.coupon
|
|
|
+ console.log('this.productCouponList', this.productCouponList)
|
|
|
+ this.isRequest = true
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSvipProductPage() {
|
|
|
+ // 获取会员中心商品数据
|
|
|
+ this.ProductService.getSvipProductPage(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data.svipProductPage
|
|
|
+ this.productList = data.results
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserSuperPackage() {
|
|
|
+ //获取会员中心套餐
|
|
|
+ this.UserService.getUserSuperPackage()
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ data.forEach(el => {
|
|
|
+ el.beans = el.price * el.proportion
|
|
|
+ el.packageId = el.id
|
|
|
+ })
|
|
|
+ this.payList = data
|
|
|
+ this.handelPayMsg = data[0]
|
|
|
+ this.payParam.packageId = data[0].packageId
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取会员套餐异常~')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ receiveCoupon(coupon) {
|
|
|
+ // 点击优惠券领取按钮
|
|
|
+ if (this.isReceiveLoading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.userVip.vipFlag != 1) {
|
|
|
+ this.$util.msg('您还未开通超级会员,不能领取', 2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.ProductService.ReceiveCoupon({
|
|
|
+ userId: this.payParam.userId,
|
|
|
+ couponId: coupon.couponId,
|
|
|
+ source: 2
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.isReceiveLoading = true
|
|
|
+ this.$util.msg('领取成功', 1500, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ coupon.getFlag = 1
|
|
|
+ this.isReceiveLoading = false
|
|
|
+ }, 1500)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ this.isReceiveLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hanldeShowBeans() {
|
|
|
+ // 显示采美豆抵扣开通超级会员弹窗
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ // 友盟埋点收集采美豆抵扣会员
|
|
|
+ this.$uma.trackEvent('Um_Event_userClubMemberBeansConfirm', {
|
|
|
+ Um_Key_Month: `${this.handelPayMsg.duration}个月`,
|
|
|
+ Um_Key_SourcePage: '会员中心'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.isShowBeansModal = true
|
|
|
+ },
|
|
|
+ handelCanelBeans() {
|
|
|
+ // 取消采美豆抵扣超级会员
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ // 友盟埋点收集取消采抵扣会员
|
|
|
+ this.$uma.trackEvent('Um_Event_userClubMemberBeansCancel', {
|
|
|
+ Um_Key_Month: `${this.handelPayMsg.duration}个月`,
|
|
|
+ Um_Key_SourcePage: '会员中心'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.isShowBeansModal = false
|
|
|
+ },
|
|
|
+ handelConfirmBeans() {
|
|
|
+ // 确认采美豆抵扣开通超级会员
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ // 友盟埋点收集确定采抵扣会员
|
|
|
+ this.$uma.trackEvent('Um_Event_userClubMemberBeansConfirms', {
|
|
|
+ Um_Key_Month: `${this.handelPayMsg.duration}个月`,
|
|
|
+ Um_Key_SourcePage: '会员中心'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.PayService.getUserRegisterSuperBeans(this.payParam)
|
|
|
+ .then(response => {
|
|
|
+ this.isShowBeansModal = false
|
|
|
+ this.$util.msg('开通成功', 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getUserSuperCenter()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hanldWechatPay() {
|
|
|
+ let previewUrls = this.previewUrls
|
|
|
+ uni.previewImage({
|
|
|
+ current: 0, //图片索引
|
|
|
+ urls: previewUrls, //必须是http图片,本地图片无效
|
|
|
+ longPressActions:''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCheckedPay(index, pay) {
|
|
|
+ // 选择会员
|
|
|
+ this.tabCurrent = index
|
|
|
+ this.payParam.packageId = pay.packageId
|
|
|
+ this.handelPayMsg = pay
|
|
|
+ },
|
|
|
+ toUseCoupon(coupon) {
|
|
|
+ // 去使用跳转路径
|
|
|
+ switch (coupon.couponType) {
|
|
|
+ case 0: // 活动券:跳转到商城首页 / 或者活动页(看是否指定了商品)
|
|
|
+ if (coupon.productType == 1) {
|
|
|
+ // 1 全商城通用 2 指定商品
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/home/index')
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/user/coupon/coupon-product?couponId=' + coupon.couponId)
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case 1: // 品类券:跳转到产品 287 / 仪器页 286
|
|
|
+ this.$api.navigateTo(`/pages/goods/good-floor?linkId=${coupon.categoryType == 1 ? 287 : 286}`)
|
|
|
+ break
|
|
|
+ case 2: // 用户专享券:跳转到商城首页
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/home/index')
|
|
|
+ break
|
|
|
+ case 3: // 店铺券:跳转到店铺首页
|
|
|
+ this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + coupon.shopId)
|
|
|
+ break
|
|
|
+ case 4: // 新用户券:跳转到商城首页
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/home/index')
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hanldRenewPayUrl(url) {
|
|
|
+ // 监听续费跳转并做友盟埋点
|
|
|
+ if (process.env.NODE_ENV != 'development') {
|
|
|
+ // 友盟埋点收集续费按钮点击事件
|
|
|
+ this.$uma.trackEvent('Um_Event_userClubRenewMember', {
|
|
|
+ Um_Key_Time: this.getNowTime(),
|
|
|
+ Um_Key_SourcePage: '会员中心'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ isShowVipFlag(pros) {
|
|
|
+ /**
|
|
|
+ *显示SVIP和超级会员价格:
|
|
|
+ * 个人机构(不是超级会员,但价格所有机构可见),
|
|
|
+ * 资质机构(不是超级会员,但价格所有机构可见或仅会员可见),
|
|
|
+ * 超级会员(价格所有机构可见或仅会员可见),超级会员(是医美机构,价格仅医美可见)
|
|
|
+ *商品价格是否可见:priceFlag 0:所有机构可见 1:未公开价格 2:仅会员可见 3:仅医美机构可见
|
|
|
+ * 普通机构
|
|
|
+ * 超级会员 && priceFlag === 0
|
|
|
+ * 资质机构
|
|
|
+ * priceFlag !== 1 ||
|
|
|
+ * 超级会员
|
|
|
+ * 商品priceFlag === 3 && 是否是医美机构
|
|
|
+ */
|
|
|
+ // 未登录 || 非会员
|
|
|
+ if(!this.hasLogin || !this.vipFlag === 1) return false
|
|
|
+ // 商品所有机构可见
|
|
|
+ if(pros.priceFlag === 0 ) return true
|
|
|
+ // 商品价格仅资质机构可见
|
|
|
+ if(pros.priceFlag === 2 && this.userIdentity === 2) return true
|
|
|
+ // 商品价格仅医美机构可见
|
|
|
+ if(pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
|
|
|
+ // 其它
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ getNowTime() {
|
|
|
+ let dateTime
|
|
|
+ let yy = new Date().getFullYear()
|
|
|
+ let mm = new Date().getMonth() + 1
|
|
|
+ let dd = new Date().getDate()
|
|
|
+ let hh = new Date().getHours()
|
|
|
+ let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
|
|
+ let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
|
|
+ dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
|
|
|
+ console.log(dateTime)
|
|
|
+ return dateTime
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ if (this.userVip.vipFlag == 0) {
|
|
|
+ if (e.scrollTop > 400) {
|
|
|
+ this.popupShow = true
|
|
|
+ } else {
|
|
|
+ this.popupShow = 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: #55331d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ height: 72rpx;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 168rpx;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ .cm-member-button {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|