exam_mp/pages/recharge/index.vue

<template>
  <Container title="VIP充值">
    <view class="recharge-main">
      <!-- 内容区 -->
      <view class="content">
        <!-- 套餐选择 -->
        <view class="plan-list">
          <view class="p"
            ><view
              class="plan-card"
              :class="activeCurrent === 1 && 'active'"
              @click="activeCurrent = 1"
            >
              <view class="plan-title">
                {{ data[1]?.package_name }}
                <text class="plan-tag" v-if="data[1]?.is_automatic_renewal">首月</text>
              </view>
              <view class="plan-price">
                <text class="price">{{
                  data[1]?.automatic_renewal_first_price
                }}</text>
                <view class="plan-origin"
                  >￥{{ data[1]?.package_original_price }}</view
                >
              </view>
            </view>
            <view
              class="plan-tip"
              v-if="data[1]?.is_automatic_renewal"
              :style="{
                opacity: activeCurrent === 1 ? 1 : 0,
              }"
              >每期自动续费{{
                data[1]?.automatic_renewal_price
              }}元，可取消</view
            ></view
          >

          <view
            class="plan-card"
            :class="activeCurrent === 0 && 'active'"
            @click="activeCurrent = 0"
          >
            <view class="plan-title">{{ data[0]?.package_name }}</view>
            <view class="plan-price">
              <text class="price">{{
                data[0]?.package_preferential_price
              }}</text>
              <view class="plan-origin"
                >￥{{ data[0]?.package_original_price }}</view
              >
            </view>
          </view>
        </view>

        <!-- 权益展示 -->
        <div class="title">权益展示</div>
        <view class="benefit" v-show="activeCurrent === 1">
          <view v-for="item in data[1]?.binding_rights_info" :key="item.id">{{
            item.authority_title
          }}</view>
        </view>
        <view class="benefit" v-show="activeCurrent === 0">
          <view v-for="item in data[0]?.binding_rights_info" :key="item.id">{{
            item.authority_title
          }}</view>
        </view>
      </view>
      <!-- 底部按钮 -->
    </view>
    <template #footer>
      <!-- 协议勾选 -->
      <view class="agreement">
        <uni-data-checkbox
          v-model="isSelected"
          multiple
          :localdata="[
            {
              text: '阅读并确认',
              value: 1,
            },
          ]"
        >
          <template #label="{ item }">
            <text
              :style="{
                paddingLeft: '10rpx',
              }"
              >{{ item.text }}</text
            >
            <text>《会员服务权益》</text>
            <text>(自动续费协议)</text>
          </template>
        </uni-data-checkbox>
      </view>
      <button class="open-btn" @click="onSubmit">立即开通</button>
    </template>
    <!-- 客服 -->
    <view class="service">
      <CustomerService>联系客服</CustomerService>
    </view>
  </Container>
</template>

<script setup name="recharge">
import Container from "@/components/Container/Container.vue";
import CustomerService from "@/components/CustomerService/CustomerService.vue";

import { ref, onMounted, getCurrentInstance } from "vue";
import { request } from "../../utils/request";
import ext from "../../ext.json";

const instance = getCurrentInstance();

const activeCurrent = ref(1);
const isSelected = ref([0]);
const data = ref([]);

const onSubmit = () => {
  // if (!isSelected.value[0])
  //   return uni.showToast({
  //     icon: "none",
  //     title: "请阅读并确认",
  //   });
  uni.login({
    provider: instance.proxy.$mpPlatform.substring(3),
    success: async ({ code }) => {
      const package_id = data.value[activeCurrent.value]?.id;
      // 先调用新增订单再支付
      const order = await request(
        "api/question_bank/question_reception/orders/add",
        {
          package_id,
        }
      );
      const e = await request(
        "api/question_bank/question_reception/orders/wechat_pay",
        {
          code,
          order_id: order.data.order_id,
          app_id: ext.extAppid,
        }
      );

      console.log(e.data);

      uni.requestPayment({
        provider: "wxpay",
        timeStamp: e.data.timeStamp, //时间戳
        nonceStr: e.data.nonceStr, //随机字符串
        package: e.data.package, //prepay_id
        signType: e.data.signType, //签名算法MD5
        paySign: e.data.paySign, //签名,
        success(res) {
          console.log(res);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
  });
};

onMounted(async () => {
  const res = await request(
    "api/question_bank/question_reception/recharge_package/list"
  );
  data.value = res.data.data;
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.recharge-main {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  padding-bottom: 120rpx; // 预留底部按钮高度
}

.content {
  flex: 1;
  padding: 32rpx 24rpx 0 24rpx;
}

.plan-list {
  display: flex;
  gap: 24rpx;
  margin-bottom: 12rpx;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #000000;
  margin-bottom: 10rpx;
}

.p {
  flex: 1;
}

.plan-card {
  flex: 1;
  border: 2rpx solid $default;
  border-radius: 16rpx;
  height: 332rpx;
  background: #fff;
  transition: border-color 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52rpx;
  color: #666666;
  &.active {
    color: $uni-primary;
    border-color: $uni-primary;
  }
  .plan-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
    .plan-tag {
      color: $error;
      font-size: 20rpx;
      margin-left: 8rpx;
      border: 1rpx solid $error;
      border-radius: 6rpx;
      padding: 0 8rpx;
      height: 28rpx;
      line-height: 28rpx;
      background: #fff;
      vertical-align: middle;
    }
  }
  .plan-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    .price {
      font-size: 60rpx;
      font-weight: bold;
      ::before {
        content: "￥";
        font-size: 32rpx;
      }
    }
  }
  .plan-origin {
    font-size: 22rpx;
    text-decoration: line-through;
    margin-top: 4rpx;
  }
}

.plan-tip {
  font-size: 22rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  margin-left: 8rpx;
  margin-top: 15rpx;
}

.benefit {
  border: 2rpx solid $default;
  border-radius: 12rpx;
  padding: 24rpx;
  font-weight: bold;
  view {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.service {
  color: $uni-primary;
  font-size: 28rpx;
  margin-bottom: 40rpx;
  text-align: right;
  position: absolute;
  bottom: 10%;
  right: 5%;
}

.agreement {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #666;
  margin-bottom: 32rpx;
  .radio {
    margin-right: 12rpx;
  }
}

.footer-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  padding: 24rpx;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.open-btn {
  width: 100%;
  background: $uni-primary;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-weight: bold;
  border: none;
  margin-top: 0;
  &:active {
    background: $uni-primary-disable;
  }
}
</style>