对接购买会员相关接口

src/pageB/record/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="px-30rpx pt-20rpx">
+    <view class="sticky top-0 z-1500 bg-hex-F5F5F5 rounded-full grid grid-cols-3 text-28rpx text-hex-333 leading-40rpx py-10rpx">
+      <view class="text-center">会员类型</view>
+      <view class="text-center">购买金额</view>
+      <view class="text-center">购买时间</view>
+    </view>
+    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+      :up="upOption">
+      <block v-for="(item,index) in dataList" :key="index">
+        <view  class="grid grid-cols-3 text-28rpx text-h666 py-18rpx mt-16rpx ">
+          <view class="text-center line-1 ">{{item.name}}</view>
+          <view class="text-center price-text">{{item.price}}</view>
+          <view class="text-center " v-if="item.success_time">{{item.success_time.substring(0,10)}}</view>
+        </view>
+        <u-line></u-line>
+      </block>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+  export default {
+    mixins: [MescrollMixin], // 使用mixin
+    data() {
+      return {
+        downOption: {
+          auto: false,
+        },
+        upOption: {
+          page: {
+            size: 20
+          },
+          noMoreSize: 1,
+        },
+        dataList: [], //获取到的数据
+      };
+    },
+    computed:{
+      height() {
+        const {
+          windowHeight,
+          statusBarHeight
+        } = this.$u.sys();
+        return windowHeight - statusBarHeight - 44 + 'px';
+      },
+    },
+    methods: {
+      downCallback() {
+        this.mescroll.resetUpScroll();
+      },
+      async upCallback(page) {
+        this.loadData(page);
+      },
+      loadData(page) {
+        this.$api.get(`/v1/vip/buy`, {
+          params: {
+            page: page.num,
+            per_page: page.size
+          }
+        }).then(res => {
+          this.mescroll.endSuccess(res.data.length)
+          if (page.num == 1) this.dataList = [];
+           this.dataList = this.dataList.concat(res.data,);
+        }).catch(err => {
+          this.mescroll.endErr()
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss">
+page{
+  background: #ffffff;
+}
+</style>

src/pageB/svip/index.vue

@@ -1,75 +1,152 @@
 <template>
-  <view >
+  <view>
-    <view class="bg-hex-303133 flex  p-30rpx ">
+     <loading-view v-if="isFirstLoading"></loading-view>
-      <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
+    <view class="bg-hex-303133 flex items-center justify-between  p-30rpx ">
-      <view class="ml-20rpx mt-10rpx">
+      <view class="flex">
-        <image src="@/static/images/svip/no_svip.png" class="w-48rpx h-48rpx" mode=""></image>
+        <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
-        <view class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
+        <view class="ml-20rpx mt-10rpx">
+          <image :src="!user.is_vip?'/static/images/svip/vip_failure.png':'/static/images/svip/vip.png'" class="w-48rpx h-48rpx" mode=""></image>
+          <view v-if="!user.is_vip" class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
+          <view v-else class="text-hex-f5f5f5 text-22rpx mt-10rpx">vip到期日期：{{time}}</view>
+        </view>
+      </view> 
+      <view class="text-white flex items-center text-26rpx" @click="$u.route('/pageB/record/index')">
+        <view class="mr-8rpx">购买记录</view>
+         <u-icon color="#ffffff" name="arrow-right" size="26"></u-icon>
       </view>
     </view>
     <!--  -->
     <view class="bg-white pb-40rpx">
       <view class="p-30rpx text-32rpx ">尊享特权</view>
       <view class="grid grid-cols-4  gap-30rpx">
-        <view class="flex items-center justify-center flex-col" v-for="(item,index) in 8 " :key="index">
+        <view class="flex items-center justify-center flex-col ">
-          <image src="@/static/images/user/share_friends.png" class="w-64rpx h-64rpx" mode=""></image>
+          <view class="item">
+            <image src="@/static/images/svip/vip_icon02.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
+          </view>
           <view class="mt-20rpx text-24rpx">会员折扣</view>
         </view>
+        <view class="flex items-center justify-center flex-col">
+          <view class="item">
+            <image src="@/static/images/svip/vip_icon03.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
+          </view>
+          <view class="mt-20rpx text-24rpx">会员礼卷</view>
+        </view>
+        <view class="flex items-center justify-center flex-col">
+         <view class="item">
+            <image src="@/static/images/svip/vip_icon01.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
+         </view>
+          <view class="mt-20rpx text-24rpx">会员特权</view>
+        </view>
+        <view class="flex items-center justify-center flex-col">
+         <view class="item">
+            <image src="@/static/images/svip/vip_icon04.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
+         </view>
+          <view class="mt-20rpx text-24rpx">尊贵标识</view>
+        </view>
       </view>
     </view>
     <!--  -->
     <view class="bg-white mt-20rpx p-30rpx">
       <!--  -->
       <view class="grid grid-cols-3  gap-30rpx">
-        <view @click="choose(index)" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'" class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid " v-for="(item,index) in list" :key="index">
+        <view @click="Index=index" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'"
-         <view class="text-26rpx">{{item.name}}</view>
+          class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid "
-         <view class="price-text text-34rpx font-medium mt-15rpx">{{item.money}}</view>
+          v-for="(item,index) in list" :key="index">
-         <view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.time}}</view>
+          <view class="text-26rpx">{{item.name}}</view>
+          <view class="price-text text-34rpx font-medium mt-15rpx">{{item.price}}</view>
+          <view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.times.text}}
+          </view>
         </view>
       </view>
       <!--  -->
       <view class="mt-30rpx text-28rpx">
-        <view class="leading-40rpx">瞭男书店季卡</view>
+       <text class="leading-40rpx">
-        <view class="leading-40rpx">咖啡饮品9折，书籍9折，免费咖啡饮品12杯</view>
+          {{chooseVip.description}}
-        <view class="leading-40rpx">通用现金卷100元 （有限期90天）</view>
+       </text>
       </view>
       <!--  -->
       <view class="flex items-center mt-20rpx">
         <u-checkbox v-model="checked" shape="circle" active-color="#f59e0b" size="28" icon-size="18"></u-checkbox>
-        <view class="text-22rpx -ml-15rpx mt-8rpx " >
+        <view class="text-22rpx -ml-15rpx mt-8rpx ">
           已同意并阅读
           <text class="text-hex-f59e0b">《平台协议》、</text>
           <text class="text-hex-f59e0b">《价格说明》</text>
         </view>
       </view>
       <!--  -->
-      <view class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx">立即开通</view>
+      <view
+        class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx" @click="onSumbit">
+        {{user.is_vip?'续费':'立即开通'}}</view>
     </view>
   </view>
 </template>
 
 <script>
+  import { wxpay, alipay } from '@/utils/pay.js';
   export default {
     data() {
       return {
-        user: {},
+        isFirstLoading:false,
-        list:[
+        list: [],
-          {name:'年卡',money:'1288',time:'1年'},
+        Index: 0,
-          {name:'季卡',money:'1288',time:'3月'},
+        checked: true
-          {name:'月卡',money:'1288',time:'30天'}
-        ],
-        Index:0,
-        checked:true
       };
     },
-    methods:{
+    computed:{
-      choose(e){
+      user() {
-        this.Index=e
+        return this.$store.getters.user ?? {};
+      },
+      chooseVip(){
+        return this.list[this.Index]
+      },
+      time(){
+        return this.$u.timeFormat(this.user.vip_expired, 'yyyy-mm-dd');
+      }
+    },
+    onLoad() {
+      this.getDate()
+    },
+    methods: {
+      async getDate(){
+        try{
+          const resData=await this.$api.get('/v1/vip')
+          this.list=resData
+        }catch(err){}finally{
+          this.isFirstLoading=false
+        }
+      },
+     async onSumbit(){
+       if(!this.checked) return this.$u.toast('请勾选协议')
+       try{
+         const resData=await this.$api.post('/v1/vip/buy',{vip_id:this.chooseVip.id})
+         const res=await wxpay(resData.data)
+         if(res=='success'){
+           this.$u.toast('充值成功');
+           this.$store.dispatch('user/getUserInfo');
+           setTimeout(()=>{
+             uni.navigateBack({})
+           },300)
+         }else{
+           this.$u.toast('支付失败');
+         }
+       }catch(err){
+       }
       }
     }
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-
+  .item {
+    background-image: linear-gradient(-90deg,
+        #e3a96d 0%,
+        #f8cfb4 100%), linear-gradient(#c59f6d,
+        #c59f6d);
+        border-radius: 50%;
+        width: 64rpx;
+        height: 64rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+  }
 </style>

src/pages.json

@@ -577,6 +577,14 @@
           "enablePullDownRefresh": false,
           "navigationStyle": "default"
         }
+      },
+      {
+        "path": "record/index",
+        "style": {
+          "navigationBarTitleText": "会员购买记录",
+          "enablePullDownRefresh": false,
+          "navigationStyle": "default"
+        }
       }
       ]
     }

src/pages/me/me.vue

@@ -36,7 +36,7 @@
               </view>
             </view>
             <view class="flex items-center justify-between mt-20rpx text-txBase text-lg">
-              <view @tap="$u.routeAuth('/pageB/svip/index')" class="flex-1" v-if="walletShow"
+              <view  class="flex-1" v-if="walletShow"
                 >余额: <text class="font-medium">{{ balance.balance }}</text></view
               >
               <view class="w-200rpx flex-none">
@@ -66,7 +66,7 @@
     <block v-if="!isVerify">
       <block v-if="show_vip_banner && user.is_vip == true">
         <view
-          @tap="$u.route('/pageA/membership_interests/index')"
+         @tap="$u.routeAuth('/pageB/svip/index')"
           :style="[{ backgroundImage: 'url(' + show_vip_banner + ')' }]"
           class="bg_advertisement mt flex items-center justify-end px-30rpx"
         >
@@ -75,11 +75,10 @@
       <!-- 还未成为会员 -->
       <block v-if="become_vip_banner && user.is_vip == false">
         <view
-          @tap="$u.route('/pageA/membership_interests/index')"
+          @tap="$u.routeAuth('/pageB/svip/index')"
           :style="[{ backgroundImage: 'url(' + become_vip_banner + ')' }]"
           class="bg_advertisements mt px-30rpx"
         >
-          <view class="text-white pt-base pl-140rpx">当前成长值：{{ user.growth_value ? user.growth_value : '0' }} / 650</view>
         </view>
       </block>
     </block>

src/store/modules/user.js

@@ -158,12 +158,13 @@ const actions = {
         custom: {
           silence: true
         }
-      }).then(({ phone, user_info, is_vip, wallet, balance }) => {
+      }).then(({ phone, user_info, is_vip, wallet, balance,vip_expired }) => {
         let user = user_info
         user.phone = phone
         user.is_vip = is_vip
         user.wallet = wallet
         user.balance = balance
+        user.vip_expired=vip_expired
         commit('SET_USERINFO', user)
         dispatch('bindCid')
         dispatch('getAccounts', { info: { ...user, token: state.token }, switchAllaccounts })