瀏覽代碼

超级会员暂时修改

zhengjinyi 2 年之前
父節點
當前提交
5c9d7bd1bc
共有 3 個文件被更改,包括 1083 次插入1 次删除
  1. 7 0
      pages.json
  2. 1 1
      pages/tabBar/user/user.vue
  3. 1075 0
      pages/user/member/member-copy.vue

+ 7 - 0
pages.json

@@ -478,6 +478,13 @@
 						"enablePullDownRefresh": true
 					}
 				},
+				{
+					"path": "member/member-copy",
+					"style": {
+						"navigationBarTitleText": "采美超级会员",
+						"enablePullDownRefresh": true
+					}
+				},
 				{
 					"path": "member/member-renew",
 					"style": {

+ 1 - 1
pages/tabBar/user/user.vue

@@ -82,7 +82,7 @@
 							<view
 								class="main-member-none"
 								v-if="userVip.vipFlag == 0"
-								@click="navigatorUserMember('/pages/user/member/member')"
+								@click="navigatorUserMember('/pages/user/member/member-copy')"
 							>
 								<view class="main-member-none-text">开通采美·超级会员,享专属特权</view>
 								<view class="main-member-none-btn">立即开通</view>

+ 1075 - 0
pages/user/member/member-copy.vue

@@ -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>