|
@@ -29,37 +29,40 @@
|
|
|
<div class="left-box" :class="isPC ? 'row1' : 'row2'" v-html="svipTips"></div>
|
|
|
<div class="right-box">
|
|
|
<template v-if="vipInfo.vipFlag !== 0">
|
|
|
- <a href="" class="link">购买记录</a>
|
|
|
- <a href="" class="btn">续费</a>
|
|
|
+ <a href="/user/member-record.html" class="link">购买记录</a>
|
|
|
+ <a href="javascript:void(0)" @click="handleShowRenewPopup" class="btn" onclick="_czc.push(['_trackEvent','续费超级会员','超级会员','续费按钮','','Um_Event_RenewButton'])">续费</a>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--套餐价格 仅未开通和到期显示-->
|
|
|
- <div class="section" v-if="vipInfo.vipFlag === 0">
|
|
|
+ <div class="section" v-if="vipInfo.vipFlag !== 1" id="vipPackage">
|
|
|
<div class="section-title">超级会员套餐</div>
|
|
|
<div class="content combo-list">
|
|
|
- <div>
|
|
|
- <template v-for="(item, index) in comboInfo">
|
|
|
- <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
|
|
|
- :key="index" @click="chooseCombo(index)">
|
|
|
- <div class="how-mounts">{{ item.durationTime }}个月</div>
|
|
|
- <div class="price"><i>¥</i>{{ item.price }}</div>
|
|
|
- <div class="average">{{ item.price / item.durationTime }}元/月</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="pay-btn">
|
|
|
- <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
- 立即支付{{ comboInfo[currentIndex].price }}元开通
|
|
|
- </a>
|
|
|
+ <template v-if="comboInfo.length > 0">
|
|
|
+ <div>
|
|
|
+ <template v-for="(item, index) in comboInfo">
|
|
|
+ <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
|
|
|
+ :key="index" @click="chooseCombo(index)">
|
|
|
+ <div class="how-mounts">{{ item.duration }}个月</div>
|
|
|
+ <div class="price"><i>¥</i>{{ item.price }}</div>
|
|
|
+ <div class="average">{{ item.price / item.duration }}元/月</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- <div class="pay-btn plain">
|
|
|
- <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
- 抵扣{{ comboInfo[currentIndex].price * 100 }}个采美豆开通
|
|
|
- </a>
|
|
|
+ <div>
|
|
|
+ <div class="pay-btn" onclick="_czc.push(['_trackEvent','开通超级会员','超级会员','支付1','','Um_Event_RegisterSuperPayOne'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
+ 立即支付{{ comboInfo[currentIndex].price }}元开通
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="pay-btn plain" onclick="_czc.push(['_trackEvent','开通超级会员','超级会员','采美豆抵扣1','','Um_Event_RegisterSuperByBeansOne'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
+ 抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <span v-else>暂无可选套餐~</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--服务列表-->
|
|
@@ -67,9 +70,9 @@
|
|
|
<div class="section-title">专属特权</div>
|
|
|
<div class="content service-list">
|
|
|
<div v-for="(item, index) in serviceList" :key="index">
|
|
|
- <img :src="'https://static.caimei365.com/app/img/svip/pc-cm-svip-icon' + (index + 1) + '.png'"
|
|
|
+ <img :src="'/img/member/pc-cm-svip-icon' + (index + 1) + '.png'"
|
|
|
v-if="isPC"/>
|
|
|
- <img :src="'https://static.caimei365.com/app/img/svip/h5-cm-svip-icon' + (index + 1) + '.png'"
|
|
|
+ <img :src="'/img/member/h5-cm-svip-icon' + (index + 1) + '.png'"
|
|
|
v-else/>
|
|
|
<span class="tit" v-html="item.name"></span>
|
|
|
<span class="sub-tit" v-html="item.subTitle"></span>
|
|
@@ -80,98 +83,41 @@
|
|
|
<div class="section">
|
|
|
<div class="section-title">专属特权<span>每月可领4个</span></div>
|
|
|
<div class="content coupon-list">
|
|
|
- <template v-for="(item, index) in couponList">
|
|
|
- <div :key="index" :class="{'un-received': !item.received}">
|
|
|
- <span class="type">{{ item.type === 1 ? '新人券' : '活动券'}}</span>
|
|
|
- <div class="amount"><i>¥</i>{{ item.amount }}</div>
|
|
|
- <div class="condition" v-html="item.condition1"></div>
|
|
|
- <div class="condition" v-html="item.condition2"></div>
|
|
|
- <div class="receive-btn" v-if="!item.received">立即领取</div>
|
|
|
- <div class="receive-btn" v-else>已领取</div>
|
|
|
+ <template v-if="couponList.length > 0">
|
|
|
+ <div v-for="(item, index) in couponList" :key="index" class="un-received">
|
|
|
+ <span class="type" v-html="item.typeText"></span>
|
|
|
+ <div class="amount"><i>¥</i>{{ item.couponAmount }}</div>
|
|
|
+ <div class="condition">满{{ item.touchPrice }}可用</div>
|
|
|
+ <div class="condition" v-html="item.productType === 1 ? '全商城商品通用' : '指定商品可用'"></div>
|
|
|
+ <div class="receive-btn" v-if="!item.getFlag" @click="receiveCoupon(item.couponId)">立即领取</div>
|
|
|
+ <div class="receive-btn" v-else @click="toUseCoupon(item)">去使用</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <span v-else>暂无可领取优惠券~</span>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
<!--优惠商品-->
|
|
|
- <div class="section">
|
|
|
+ <div class="section" v-if="productList.length > 0">
|
|
|
<div class="section-title clear">优惠商品<a href="/user/member-product.html">查看更多></a></div>
|
|
|
<div class="content goods-list">
|
|
|
- <div class="goods" v-for="i in 5">
|
|
|
- <a href="">
|
|
|
- <img src="/img/base/placeholder.png"/>
|
|
|
- <div class="goods-title cm-text-ellipsis-2">华熙生物润百颜液体华熙生物润百颜</div>
|
|
|
+ <div class="goods" v-for="(product, index) in productList" :key="index">
|
|
|
+ <a :href="'/product-' + product.productId + '.html'">
|
|
|
+ <img src="/img/base/placeholder.png" :data-original="product.image"/>
|
|
|
+ <div class="goods-title cm-text-ellipsis-2" v-html="product.name"></div>
|
|
|
<div class="goods-tag">
|
|
|
- <span class="tag styl1">优惠券</span>
|
|
|
- <span class="tag styl2">单品满赠</span>
|
|
|
- </div>
|
|
|
- <!-- v-if="pros.listType == 1" -->
|
|
|
- <div class="page_main_price" v-if="false">
|
|
|
- <!-- 商品价格 -->
|
|
|
- <div class="main_price_text">
|
|
|
- <!-- 正常商品 -->
|
|
|
- <template v-if="pros.product.productCategory == 1">
|
|
|
- <div class="price_text_tag">
|
|
|
- <!-- <p class="couponTag" v-if="pros.product.couponsLogo">优惠券</p>-->
|
|
|
- <p class="listTag"
|
|
|
- v-if="pros.product.actStatus ==1 && pros.product.promotions">
|
|
|
- <span v-text="pros.product.promotions.name"></span>
|
|
|
- <template v-if="PromotionsFormat(pros.product.promotions)">
|
|
|
- <!--单品优惠:优惠价-->
|
|
|
- <span class="price_unit">:¥</span><span class="price_num">{{ pros.product.price | NumFormat }}</span>
|
|
|
- </template>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="main_price_login">
|
|
|
- <!--0公开价格 1不公开价格 2仅对会员机构公开-->
|
|
|
- <template v-if="pros.product.priceFlag == 1">
|
|
|
- <em class="price_grade"><span>¥</span>价格未公开</em>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <template v-if="PromotionsFormat(pros.product.promotions)">
|
|
|
- <!--单品优惠时的划线价-->
|
|
|
- <div class="main_price_show none">
|
|
|
- ¥<span class="price_o_num">{{ pros.product.originalPrice | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template
|
|
|
- v-else-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
|
|
|
- <!--机构价-->
|
|
|
- <div class="main_price_show">¥<span class="price_num">{{ pros.product.price | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template
|
|
|
- v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4">
|
|
|
- <em class="price_grade_club">
|
|
|
- <span>¥</span>会员可见
|
|
|
- </em>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <!--供应商除自己的商品外,也显示价格等级-->
|
|
|
- <em class="price_grade_shop">
|
|
|
- <span class="bold">¥</span><i
|
|
|
- :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
|
|
|
- </em>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 二手商品 -->
|
|
|
- <template v-else>
|
|
|
- <div class="main_price_login">
|
|
|
- <div class="price_text_tag"></div>
|
|
|
- <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">¥价格祥聊
|
|
|
- </div>
|
|
|
- <div v-else class="main_price_show">
|
|
|
- ¥<span class="price_num">{{ pros.product.price | NumFormat }}</span>
|
|
|
- </div>
|
|
|
+ <span class="tag styl1" v-if="product.couponsLogo">优惠券</span>
|
|
|
+ <div class="svip-tag" v-if="product.svipProductFlag === 1">
|
|
|
+ <div class="svip-icon ">SVIP</div>
|
|
|
+ <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
|
|
|
+ <template v-if="showVipPriceTag(product)">
|
|
|
+ <div class="svip-price">
|
|
|
+ <span v-html="product.svipPriceTag"></span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="svip-price">
|
|
|
- <span class="svip-icon">SVIP</span>
|
|
|
- <span class="amount">¥99999</span>
|
|
|
- </div>
|
|
|
+ <div class="goods-price" v-html="makePrice(product)"></div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -180,15 +126,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--底部支付按钮 仅未开通和到期显示-->
|
|
|
- <div class="pay-amount-bottom">
|
|
|
+ <div class="pay-amount-bottom" id="pay-amount-bottom" v-if="comboInfo.length > 0 && vipInfo.vipFlag !== 1 && showBottomBtns">
|
|
|
<div>
|
|
|
- <div class="pay-btn plain">
|
|
|
- <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
- 抵扣{{ comboInfo[currentIndex].price * 100 }}个采美豆开通
|
|
|
+ <div class="pay-btn plain" onclick="_czc.push(['_trackEvent','开通超级会员','超级会员','采美豆抵扣2','','Um_Event_RegisterSuperByBeansTwo'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
+ 抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
|
|
|
</a>
|
|
|
</div>
|
|
|
- <div class="pay-btn">
|
|
|
- <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
+ <div class="pay-btn" onclick="_czc.push(['_trackEvent','开通超级会员','超级会员','支付2','','Um_Event_RegisterSuperPayTwo'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
立即支付{{ comboInfo[currentIndex].price }}元开通
|
|
|
</a>
|
|
|
</div>
|
|
@@ -198,32 +144,33 @@
|
|
|
<div class="mask" v-if="showMask"></div>
|
|
|
<!--续费弹窗-->
|
|
|
<div class="renew-popup" v-if="showRenewPopup">
|
|
|
- <div class="popup-title">超级会员套餐<span class="close">×</span></div>
|
|
|
+ <div class="popup-title">续费超级会员套餐<span class="close" @click="handleCloseRenewPopup">×</span></div>
|
|
|
<div class="content combo-list">
|
|
|
- <div>
|
|
|
+ <template v-if="comboInfo.length > 0">
|
|
|
<div>
|
|
|
<template v-for="(item, index) in comboInfo">
|
|
|
<div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
|
|
|
:key="index" @click="chooseCombo(index)">
|
|
|
- <div class="how-mounts">{{ item.durationTime }}个月</div>
|
|
|
+ <div class="how-mounts">{{ item.duration }}个月</div>
|
|
|
<div class="price"><i>¥</i>{{ item.price }}</div>
|
|
|
- <div class="average">{{ item.price / item.durationTime }}元/月</div>
|
|
|
+ <div class="average">{{ item.price / item.duration }}元/月</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="pay-btn">
|
|
|
- <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
- 立即支付{{ comboInfo[currentIndex].price }}元开通
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="pay-btn plain">
|
|
|
- <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
- 抵扣{{ comboInfo[currentIndex].price * 100 }}个采美豆开通
|
|
|
- </a>
|
|
|
+ <div>
|
|
|
+ <div class="pay-btn" onclick="_czc.push(['_trackEvent','续费超级会员','超级会员','支付','','Um_Event_RenewSuperPay'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(1)">
|
|
|
+ 立即支付{{ comboInfo[currentIndex].price }}元开通
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="pay-btn plain" onclick="_czc.push(['_trackEvent','续费超级会员','超级会员','采美豆抵扣1','','Um_Event_RenewSuperPayByBeans'])">
|
|
|
+ <a href="javascript:void(0);" @click="payAction(2)">
|
|
|
+ 抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <span v-else>暂无可选套餐~</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--立即支付弹窗-->
|
|
@@ -240,6 +187,7 @@
|
|
|
<script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
|
|
|
<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
|
|
|
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
|
|
|
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/member/memberPage.js(v=${version})}"></script>
|
|
|
</body>
|
|
|
</html>
|