member-renew.vue 9.1 KB

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