exam_mp/pages/recharge/index.vue

<template>
  <Container title="VIP充值" bgColor="#f8f8f8" headerColor="#fff">
    <view class="recharge-main">
      <!-- 内容区 -->
      <view class="content">
        <!-- 套餐选择 -->
        <view class="plan-list">
          <view
            class="plan-card"
            v-for="(item, index) in data"
            :class="activeCurrent === index && 'active'"
            @click="activeCurrent = index"
          >
            <view class="plan-title">{{ item?.package_name }}</view>
            <view class="plan-price">
              <text class="price">{{ item?.package_preferential_price }}</text>
              <view class="plan-origin"
                >￥{{ item?.package_original_price }}</view
              >
            </view>
          </view>
        </view>

        <!-- 权益展示 -->
        <div class="title">权益展示</div>
        <view class="benefit">
          <view
            v-for="(item, i) in data[activeCurrent]?.binding_rights_info"
            :key="item.id"
            class="benefit-item"
          >
            <view class="t">权益{{ i + 1 }}</view>
            {{ 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
              @click="
                () => {
                  router.push({
                    url: '/pages/richpage/index',
                    params: {
                      title: '会员服务权益',
                      content_code: 'service_rights',
                    },
                  });
                }
              "
              >《会员服务权益》</text
            >
            <text
              @click="
                () => {
                  router.push({
                    url: '/pages/richpage/index',
                    params: {
                      title: '自动续费协议',
                      content_code: 'automatic_renewal_agreement',
                    },
                  });
                }
              "
              >(自动续费协议)</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(0);
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,
        }
      );

      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;
  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 {
    border-color: #e7c8ac;
  }
  .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;
      color: $error;
      ::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 {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.benefit-item {
  border-radius: 12rpx;
  padding: 32rpx 24rpx;
  font-weight: bold;
  background: #ffffff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;

  .t {
    width: 105rpx;
    height: 56rpx;
    background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  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: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
  color: #000;
  font-size: 32rpx;
  border-radius: 12rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-weight: bold;
  border: none;
  margin-top: 0;
  &:active {
    background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
  }
}
</style>