member-renew.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <template>
  2. <view class="container clearfix">
  3. <view class="cm-member-top">
  4. <view class="cm-member-head">
  5. <view class="cm-member-text" v-if="isRequest">
  6. <view class="cm-member-h1">
  7. <text v-if="userVip.vipFlag == 0">采美·超级会员</text>
  8. <text v-if="userVip.vipFlag == 1">已开通采美·超级会员</text>
  9. <text v-if="userVip.vipFlag == -1">采美·超级会员已过期</text>
  10. </view>
  11. <view class="cm-member-p">
  12. <text v-if="userVip.vipFlag == 0">享专属特权</text>
  13. <text v-else>有效期至:{{ userVip.endTime }}</text>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="cm-member-main">
  19. <view class="title">超级会员套餐</view>
  20. <view class="cm-member-pay">
  21. <view
  22. class="pay-item"
  23. v-for="(pay, index) in payList"
  24. :key="index"
  25. :class="{ current: tabCurrent === index }"
  26. @click="handleCheckedPay(index, pay)"
  27. >
  28. <view class="hot" v-if="index == 0">推荐</view> <view class="text-1">{{ pay.duration }}个月</view>
  29. <view class="text-2"> <text>¥</text>{{ pay.price }}</view>
  30. <view class="text-3" v-if="index == 0 || index == 1">{{ pay.price / pay.duration }}/月</view>
  31. </view>
  32. </view>
  33. <view class="cm-member-button">
  34. <view class="pay-btn pay" @click="hanldWechatPay">立即支付{{ handelPayMsg.price }}元开通</view>
  35. <view class="pay-btn none" @click="hanldeShowBeans">抵扣{{ handelPayMsg.beans }}个采美豆开通</view>
  36. </view>
  37. </view>
  38. <!-- 弹窗 -->
  39. <template>
  40. <view class="cm-model-alert" v-if="isShowBeansModal">
  41. <view class="content">
  42. <view class="title">
  43. <text>购买超级会员</text>
  44. <text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
  45. </view>
  46. <view class="text-content">
  47. <view class="text"
  48. >确定使用<text class="text-p">{{ handelPayMsg.beans }}</text
  49. >个采美豆抵扣{{ handelPayMsg.duration }}个月的采美超级会员吗?</view
  50. >
  51. </view>
  52. <view class="text-button">
  53. <view class="btn btn-cancel" @click="handelCanelBeans">取消</view>
  54. <view class="btn btn-confirm" @click="handelConfirmBeans">确定</view>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. </view>
  60. </template>
  61. <script>
  62. import { mapState, mapMutations } from 'vuex'
  63. export default {
  64. components: {},
  65. data() {
  66. return {
  67. StaticUrl: this.$Static,
  68. isRequest: false,
  69. isShowBeansModal: false,
  70. payList: [],
  71. userVip: {},
  72. handelPayMsg: {
  73. beans: 480000,
  74. price: 4800,
  75. month: '12个月',
  76. packageId: 1
  77. },
  78. payParam: {
  79. userId: 0,
  80. packageId: 1
  81. },
  82. tabCurrent: 0
  83. }
  84. },
  85. onLoad() {
  86. },
  87. filters: {
  88. TypeFormat(value) {
  89. switch (value) {
  90. case 0:
  91. return '活动券'
  92. break
  93. case 1:
  94. return '品类券'
  95. break
  96. case 2:
  97. return '用户专享券'
  98. break
  99. case 3:
  100. return '店铺券'
  101. break
  102. case 4:
  103. return '新用户券'
  104. break
  105. }
  106. }
  107. },
  108. computed: {
  109. ...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity'])
  110. },
  111. methods: {
  112. async initGetStotage() {
  113. const userInfo = await this.$api.getStorage()
  114. this.payParam.userId = userInfo.userId ? userInfo.userId : 0
  115. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  116. this.getUserSuperPackage()
  117. this.getUserSuperCenter()
  118. },
  119. getUserSuperPackage() {
  120. //获取会员中心套餐
  121. this.UserService.getUserSuperPackage()
  122. .then(response => {
  123. let data = response.data
  124. data.forEach(el => {
  125. el.beans = el.price * el.proportion
  126. el.packageId = el.id
  127. })
  128. this.payList = data
  129. })
  130. .catch(error => {
  131. console.log('获取会员套餐异常~')
  132. })
  133. },
  134. getUserSuperCenter() {
  135. // 获取会员中心数据
  136. this.UserService.getUserSuperCenter({ userId: this.payParam.userId })
  137. .then(response => {
  138. let data = response.data
  139. this.userVip = data.vip
  140. this.isRequest = true
  141. })
  142. .catch(error => {
  143. this.$util.msg(error.msg, 2000)
  144. })
  145. },
  146. hanldeShowBeans() {
  147. // 显示采美豆抵扣开通超级会员弹窗
  148. this.isShowBeansModal = true
  149. },
  150. handelCanelBeans() {
  151. // 取消采美豆抵扣超级会员
  152. this.isShowBeansModal = false
  153. },
  154. handelConfirmBeans() {
  155. // 确认采美豆抵扣开通超级会员
  156. this.PayService.getUserRegisterSuperBeans(this.payParam)
  157. .then(response => {
  158. this.isShowBeansModal = false
  159. this.$util.msg('续费成功', 2000, true, 'success')
  160. setTimeout(() => {
  161. this.$api.navigateTo('/pages/user/member/member')
  162. }, 2000)
  163. })
  164. .catch(error => {
  165. this.$util.msg(error.msg, 2000)
  166. })
  167. },
  168. hanldWechatPay() {
  169. // 跳转微信只开通超级会员
  170. this.$api.navigateTo(`/pages/user/member/member-pay?data=${JSON.stringify(this.handelPayMsg)}`)
  171. },
  172. handleCheckedPay(index, pay) {
  173. // 选择会员
  174. this.tabCurrent = index
  175. this.payParam.packageId = pay.packageId
  176. this.handelPayMsg = pay
  177. }
  178. },
  179. onShow() {
  180. this.initGetStotage()
  181. }
  182. }
  183. </script>
  184. <style lang="scss">
  185. .container {
  186. width: 100%;
  187. height: auto;
  188. }
  189. .cm-member-top {
  190. width: 100%;
  191. height: 242rpx;
  192. box-sizing: border-box;
  193. padding: 0 24rpx;
  194. background: url(https://static.caimei365.com/app/img/icon/icon-member-bg01@2x.png) no-repeat;
  195. background-size: cover;
  196. position: relative;
  197. .cm-member-head {
  198. width: 702rpx;
  199. height: 132rpx;
  200. box-sizing: border-box;
  201. padding: 30rpx 32rpx 0 109rpx;
  202. background: url(https://static.caimei365.com/app/img/icon/icon-member-bg02@2x.png) no-repeat;
  203. background-size: cover;
  204. position: absolute;
  205. bottom: 0;
  206. left: 24rpx;
  207. border-radius: 16rpx 16rpx 0 0;
  208. .cm-member-text {
  209. float: left;
  210. .cm-member-h1 {
  211. line-height: 42rpx;
  212. font-size: $font-size-30;
  213. color: #55331d;
  214. text-align: left;
  215. margin-bottom: 12rpx;
  216. font-weight: bold;
  217. }
  218. .cm-member-p {
  219. line-height: 30rpx;
  220. font-size: $font-size-22;
  221. color: #55331d;
  222. text-align: left;
  223. }
  224. }
  225. }
  226. }
  227. .cm-member-main {
  228. width: 100%;
  229. box-sizing: border-box;
  230. padding: 40rpx 24rpx;
  231. background-color: #ffffff;
  232. margin-bottom: 20rpx;
  233. .title {
  234. font-size: $font-size-32;
  235. line-height: 45rpx;
  236. text-align: left;
  237. color: #55331d;
  238. font-weight: bold;
  239. .small {
  240. font-size: $font-size-24;
  241. color: #e4aa43;
  242. font-weight: normal;
  243. margin-left: 15rpx;
  244. }
  245. }
  246. .cm-member-pay {
  247. width: 100%;
  248. height: 236rpx;
  249. margin: 40rpx 0;
  250. .pay-item {
  251. width: 218rpx;
  252. height: 100%;
  253. float: left;
  254. margin-right: 24rpx;
  255. border: 1px solid #f0f0f0;
  256. border-radius: 16rpx;
  257. box-sizing: border-box;
  258. text-align: center;
  259. padding: 40rpx 0;
  260. position: relative;
  261. .hot {
  262. width: 80rpx;
  263. height: 36rpx;
  264. text-align: center;
  265. line-height: 36rpx;
  266. font-size: $font-size-24;
  267. color: #ffffff;
  268. background-color: #ff2a2a;
  269. border-radius: 0 8rpx 8rpx 8rpx;
  270. position: absolute;
  271. left: 0;
  272. top: -10rpx;
  273. }
  274. &.current {
  275. background-color: #fdf8ee;
  276. border: 1px solid #f0cc8c;
  277. }
  278. &:last-child {
  279. margin-right: 0;
  280. }
  281. .text-1 {
  282. line-height: 40rpx;
  283. font-size: $font-size-28;
  284. margin-bottom: 10rpx;
  285. color: #55331d;
  286. }
  287. .text-2 {
  288. line-height: 59rpx;
  289. font-size: $font-size-40;
  290. margin-bottom: 10rpx;
  291. color: #ff2a2a;
  292. font-weight: bold;
  293. text {
  294. font-size: $font-size-26;
  295. }
  296. }
  297. .text-3 {
  298. line-height: 33rpx;
  299. font-size: $font-size-24;
  300. color: #666666;
  301. }
  302. }
  303. }
  304. .cm-member-button {
  305. width: 100%;
  306. box-sizing: border-box;
  307. padding: 0 51rpx;
  308. .pay-btn {
  309. width: 100%;
  310. height: 90rpx;
  311. line-height: 90rpx;
  312. border-radius: 50rpx;
  313. text-align: center;
  314. font-size: $font-size-30;
  315. color: #55331d;
  316. box-sizing: border-box;
  317. margin-bottom: $font-size-24;
  318. &.pay {
  319. background: linear-gradient(90deg, #fee9ba 0%, #f0cb72 100%);
  320. font-weight: bold;
  321. }
  322. &.none {
  323. border: 1px solid #f0cb72;
  324. margin-bottom: 0;
  325. }
  326. }
  327. }
  328. }
  329. .cm-model-alert {
  330. width: 100%;
  331. height: 100%;
  332. background: rgba(0, 0, 0, 0.5);
  333. position: fixed;
  334. top: 0;
  335. left: 0;
  336. z-index: 8888;
  337. transition: all 0.4s;
  338. .content {
  339. width: 580rpx;
  340. height: 390rpx;
  341. position: absolute;
  342. background: $bg-color;
  343. left: 0;
  344. right: 0;
  345. bottom: 0;
  346. top: 0;
  347. margin: auto;
  348. padding: 20rpx 32rpx;
  349. border-radius: 12rpx;
  350. .title {
  351. width: 100%;
  352. height: 68rpx;
  353. line-height: 68rpx;
  354. font-size: $font-size-28;
  355. color: $text-color;
  356. text-align: center;
  357. position: relative;
  358. .icon-iconfontguanbi {
  359. width: 68rpx;
  360. height: 68rpx;
  361. text-align: center;
  362. line-height: 68rpx;
  363. position: absolute;
  364. right: 0;
  365. top: 0;
  366. font-size: $font-size-36;
  367. color: #999999;
  368. }
  369. }
  370. .text-content {
  371. width: 100%;
  372. height: auto;
  373. margin-top: 20px;
  374. .text {
  375. padding: 20rpx 0 0 0;
  376. line-height: 44rpx;
  377. font-size: $font-size-26;
  378. color: #666666;
  379. text-align: justify;
  380. .text-p {
  381. color: #e15616;
  382. }
  383. }
  384. }
  385. .text-button {
  386. width: 100%;
  387. height: 72rpx;
  388. display: flex;
  389. box-sizing: border-box;
  390. padding: 0 50rpx;
  391. margin-top: 30px;
  392. .btn {
  393. width: 200rpx;
  394. height: 72rpx;
  395. line-height: 72rpx;
  396. color: #fff;
  397. display: flex;
  398. align-items: center;
  399. justify-content: center;
  400. font-size: $font-size-26;
  401. border-radius: 44rpx;
  402. box-sizing: border-box;
  403. &.btn-confirm {
  404. background: $btn-confirm;
  405. margin-left: 78rpx;
  406. }
  407. &.btn-cancel {
  408. border: 1px solid #b2b2b2;
  409. color: #333333;
  410. }
  411. }
  412. }
  413. }
  414. }
  415. </style>