jd_logistics/jd_logistics-app/pages/recharge/vip.vue

<template>
	<view class="vip">
    <view class="vip_top">
      <headerInfo title="会员中心" :isBack="true"></headerInfo>
      <view class="flex-center-between color_fff mg20">
        <u-avatar  @click="toUser"
					size="100rpx"
					shape="circle"
					:src="appStore?.userInfo?.avatar"
					mode="aspectFill"
				></u-avatar>
        <view class="flex_1 flex-center-between ml20">
          <view class="flex-column flex_1">
            <view>
              <text class="font_size32 nickName bold mr20">{{appStore.userInfo?.nickName}}</text>
              <text class="memberPlanName" v-if="appStore.userInfo?.memberStatus==1">{{appStore.userInfo?.memberPlanName}}</text>
            </view>
            <text class="font_size32 nickName mt10" v-if="appStore.userInfo?.memberStatus==1">
							<text class="vipTime">到期时间: {{appStore.userInfo?.memberExpire}}</text>
            </text>
            <text class="font_size32 nickName mt10" v-else>未开通VIP，无法享受会员</text>
          </view>
          <image src="/static/img/vip/vip.png" mode="" style="width:204rpx;height:204rpx;"/>
        </view>
      </view>
    </view>
    <view class="padding20 vip_content">
      <!-- 会员充值 -->
      <view class="flex-center mt10">
        <view class="flex-center-between">
          <view class="line_vip"></view>
            <text class="title_vip font_size32 bold">会员充值</text>
          <view class="line_vip reverse"></view>
        </view>
      </view>
      <view class="mt20 vip_pay">
        <view class="grid-container3 mt30">
          <view class="flex-column-center border_radius_20 paddingTB20 plan" 
          :class="{'active':planId==item.planId}"
          @click="planId=item.planId;orderAmt=item.price;"
          v-for="(item, index) in planList" :key="index">
            <view class="bold font_size28 planName">{{item.planName}}</view>
            <view class="font_size35 mt20 color_price"><text class="font_size20">￥</text>{{item.price}}</view>
            <view class="font_size20 mt20 gray line_through">￥{{item.originalPrice}}</view>
            <view class="bold font_size28 planName mt20">{{item.durationUnit=='lifetime'?'':item.duration}}{{item.durationUnitName}}</view>
            <view class="hot" v-if="item.durationUnit=='lifetime'">
              <image src="/static/img/vip/fire.png" mode="" style="width:20rpx;height:20rpx"/>
              <text class="font_size20 color_fff">推荐</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 会员专享4大权益 -->
      <view class="flex-center mt30">
        <view class="flex-center-between">
          <view class="line_vip"></view>
            <text class="title_vip font_size32 bold">会员专享4大权益</text>
          <view class="line_vip reverse"></view>
        </view>
      </view>
      <view class="grid-container mt30">
        <view class="flex-center-between border_radius_20 bg_color_fff padding20" v-for="(item, index) in quanyilList" :key="index">
          <image :src="item.icon" class="icon mr20" mode="" />
          <view class="flex_1">
            <view class="bold font_size28">{{item.title}}</view>
            <view class="font_size24 mt10 gray">{{item.content}}</view>
          </view>
        </view>
      </view>
     
      <!-- 付款方式 -->
      <view class="padding30 border_radius_20 bg_color_fff mt20"  v-if="isEdit!=1">
        <view class="font_size32 bold mb20">付款方式</view>
        <view class="flex-center-between mt20 paddingTB20" v-for="(item, index) in payments" :key="index" @click="payType=item.value">
          <view class="flex-center-between">
            <image :src="item.icon" mode="widthFix" class="weixin_img mr20"></image>
            <text>{{item.label}}</text>
            <text class="color_price ml20 font_size24" v-if="index==1"> 余额：{{appStore.userInfo?.rechargeBalance}} ({{appStore.moneyUnit}})</text>
          </view>
          <view class="payment-radio">
            <view
              class="radio-circle"
              :class="{ checked: payType === item.value }"
            ></view>
          </view>
        </view>
      </view>
      <agreeVip ref="agreeVip" @setAloneChecked="setAloneChecked"></agreeVip>
    </view>
    <!-- foot -->
    <view class="foot bg_color_fff">
			<view class="order_btn paddingTB20 flex_1 text_align_center" @click="submitForm">
        <text>{{appStore.userInfo?.memberStatus==1?'续费':'立即解锁'}}</text>
        <text>￥{{orderAmt}}</text>
      </view>
		</view>
	</view>
</template>
<script setup>
import { ref } from "vue";
import { wxPay,getUserInfo } from "@/utils/util.js";
import headerInfo from "@/components/headerInfo.vue";
import { createOrder } from "@/api/order";
import { useToast } from "@/hooks/useToast";
const { Toast } = useToast();
import { getPlanList } from "@/api/user";
import { agreeVip } from "@/components/agreeVip"
import { onLoad } from '@dcloudio/uni-app'
import { useAppStore } from "@/stores/app"
const appStore = useAppStore();
const aloneChecked = ref(false);
const planId = ref('');
const orderId = ref('');
const orderAmt = ref('');
const planList = ref([]);
const payType = ref(0);
const payments = ref([
  {
    value: 0,
    label: "微信支付",
		icon: "/static/img/weixin.png"
  },
  {
    value: 1,
    label: "钱包支付",
		icon: "/static/img/qianbao.png"
  },
]);
const quanyilList = ref([
  {
    title: "问答无限制",
    content: "最新AI聊天模型接口",
    icon: "/static/img/vip/question.png"
  },
  {
    title: "学习帮手",
    content: "帮您提高创作效率",
    icon: "/static/img/vip/xuexi.png"
  },
  {
    title: "疑问解答",
    content: "互动性聊天体验",
    icon: "/static/img/vip/yiwen.png"
  },
  {
    title: "私人助理",
    content: "提供最优解决方案",
    icon: "/static/img/vip/siren.png"
  },
]);
async function submitForm(){
  if(!aloneChecked.value){
		Toast({ title: "请先阅读并同意VIP会员开通协议", icon: 'none' });
		return;
	}
  const res = await createOrder({
		payMethod:payType.value,//支付方式 0微信 1余额
		productType:0,//商品类型 0购买会员 1充值
		productId:planId.value,
		orderNum:1,//订单数量
		orderAmt:orderAmt.value//订单金额
	});
  orderId.value = res.data.orderId;
  // 余额支付
  if(payType.value==1){
    //1成功 0失败；
    const paySuccess = res.data.paySuccess;
    to_success_pay({isSuccess:paySuccess?1:0});
  }else{ 
    const payInfo = res.data.payData.prepayWithRequestPaymentResponse
    wxPay({
      timeStamp:payInfo.timeStamp,
      nonceStr:payInfo.nonceStr,
      packageVal:payInfo.packageVal,
      signType:payInfo.signType,
      paySign:payInfo.paySign,
    },to_success_pay);
  }
}
function to_success_pay({isSuccess}){
	console.log('to_success_pay',isSuccess);
	uni.navigateTo({
    url: `/pages/recharge/success_pay?orderId=${orderId.value}&isSuccess=${isSuccess}&payMethod=${payType.value}`
  })
}
onLoad(() => {
	getPlanListFn();
});
function getPlanListFn(){
	getPlanList().then(res => {
		if(res.code == 200){
			planList.value = res.data || [];
      //默认单位是durationUnit=='lifetime'
      if(planList.value.length>0){
        let plan = planList.value.find(item=>item.durationUnit=='lifetime');
        planId.value = plan?.planId || planList.value[0].planId;
        orderAmt.value = plan?.price || planList.value[0].price;
      }
		}
	})
}
function setAloneChecked(value){
  aloneChecked.value = value;
}
async function toUser(){
	uni.navigateTo({
		url: '/pages/user/user'
	});
}
</script>
<style lang="less" scoped>
.vip{
  height: 100vh;
  background: #f5f5f5;
  
  .vip_top{
    //#51402E #2B2724 渐变色，从上向下
    background: linear-gradient(90deg, #51402E 0%, #2B2724 100%);
    padding: 0 0 50rpx 30rpx;
    .nickName{
      color: #DDD3D0;
    }
  }
  .vip_content{
    position: relative;
    top: -40rpx;
    border-radius: 48rpx 48rpx 0 0;
    background: #f5f5f5;
    padding-bottom: 100rpx;
    .title_vip{
      color: #333333 ;
      margin: 0 30rpx;
    }
    .line_vip{
      width: 92rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #D8D8D8  0%, #333333 100%);
      &.reverse{
        transform: rotate(180deg);
      }
    }
  }
  .gray{
    color: #999;
  }
  .grid-container{
    gap: 20rpx;
    .icon{
      width: 70rpx;
      height: 70rpx;
    }
  }
  .vip_pay{
    .plan{
      padding: 30rpx 20rpx 40rpx;
      border:1px solid #CCCCCC ;
      position: relative;
      background-color: #ffffff;
      &.active{
        background-color: #FEF7EA ;
        border-color: #874605 
      }
      .color_price{
        color: #874605;
      }
      .planName{
        color: #333333;
      }
      .hot{
        position: absolute;
        top: -20rpx;
        left: 0rpx;
        background: linear-gradient(90deg, #2B2724   0%, #503F2E  100%);
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 10rpx;
        border-radius: 10rpx 0 10rpx 0;
      }
    }
  }
  .weixin_img{
    width: 60rpx;
    height: 60rpx;
  }
  .order_btn ,.memberPlanName{
		background: linear-gradient(90deg, #FDE492    0%, #FDB85D  100%);
    color: #874605 ;
	}
  .memberPlanName{
    padding: 5rpx 10rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}
</style>