hcp-admin/src/views/officialAccounts/pay/index.vue

<template>
  <div class="package-container">
    <van-cell
    title="设备押金 1200(元)"
    label="设备押金在服务到期后，若不再进行续费，设备完好情况下，联系工作人员退款。"
    >
    <!-- <van-stepper
        slot="right-icon"
        v-model="WxTencentForm.equipmentPledge"
        button-size="24px"
        input-width="58px"
        class="absolute right14"
        disabled  
    /> -->
    </van-cell>

    <van-loading
      v-if="loading"
      type="spinner"
      color="#1989fa"
      size="40px"
      vertical
    >
      加载中...
    </van-loading>

    <van-overlay v-if="loading" :show="loading" />

    <!-- 修改为单列布局 -->
    <div class="package-list">
      <div 
        v-for="(packageItem, index) in packages" 
        :key="index" 
        class="package-card"
      >
        <div class="image-wrapper" @click="showDialog(packageItem)">
          <van-image
            :src="packageItem.icon"
            fit="cover"
            class="package-image"
          />
          <div class="overlay-text">
            <h3 class="card-title">{{ packageItem.type }}</h3>
            <p class="card-price">{{ formatPrice(packageItem.price) }}元</p>
          </div>
        </div>
      </div>
    </div>


    <van-dialog v-model="payShow" title="支付确认" show-cancel-button :lazy-render="false" @confirm="handleWechatAuth" :before-close="beforeClose">
      <van-field
        v-model="payForm.phone"
        label="手机号"
        placeholder="请输入手机号"
        :error-message="errorMobile"
        @input="mobileError"
        @blur="mobileError"
      />

      <div style="margin: 1rem;">
        <van-checkbox v-model="payForm.checked" checked-color="#07c160">
          <div style="font-size:0.8rem;">阅读并同意
            <el-link type="primary" style="vertical-align: top;" @click.stop="agreementShow = true">《服务协议》</el-link>
            <!-- 和
            <el-link type="primary" style="vertical-align: top;">《隐私政策》</el-link> -->
          </div>
          </van-checkbox>
      </div>
    </van-dialog>


    <van-dialog v-model="agreementShow" title="未来蓝豚强脑系统认知训练服务协议" :lazy-render="false">
      <div style="height: 68vh; overflow-x: hidden;">
        <xy />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import xy from './xy.vue';
import {tencentLearnPackage} from '@/api/comboMeal/index'
import { symmetryDecryptWX,symmetryEncryptWX } from '@/utils/secret.js'
import {wXTencentSave,getWxConfig,wXTencentPhoneSave} from '@/api/patient/index'
import { Toast } from 'vant';

export default {
  components: {
    xy
  },
  data() {
    return {
      packages: [
      ],
      WxTencentForm: {},
      payShow: false,
      learningPackageId: "",
      loading: false,
      payForm:{
        phone: "",
        checked: false
      },
      agreementShow:false,
      errorMobile:""
    }
  },
  created() {
    this.getLearnPackage()
  },
  // async mounted() {
  //   try {
  //     await this.initWxConfig();
  //     console.log('微信 SDK 初始化成功');
  //   } catch (error) {
  //     console.error('微信 SDK 初始化失败:', error);
  //   }
  // },
  methods: {
    getLearnPackage(){
        tencentLearnPackage().then(resp=>{
            this.packages = resp.data.map(item => {
                const newItem = { ...item }; // 创建新对象
                switch (newItem.timeType) {
                    case "B":
                        newItem.icon = require('@/assets/images/packages3.png');
                        newItem.type = "季卡"
                        break;
                    case "C":
                        newItem.icon = require('@/assets/images/packages2.png');
                        newItem.type = "半年卡"
                        break;
                    case "D":
                        newItem.icon = require('@/assets/images/packages1.png');
                        newItem.type = "年卡"
                        break;
                }
                return newItem;
            });
            if(Object.keys(this.$route.query).length > 0){
                const query = this.$route.query;
                // this.WxTencentForm = JSON.parse(symmetryDecryptWX(decodeURIComponent(this.$route.query.userInfo)));
                if(query.code  && query.state && query.payUser){
                    const payUser = JSON.parse(symmetryDecryptWX(query.payUser))
                    console.log(payUser)
                    this.handleSubmit(query.code,payUser.packageId,query.state,payUser.doctorId,payUser.mobile);
                }
                this.WxTencentForm.equipmentPledge = 1
            }
        })
    },
    formatPrice(price) {
      return (price / 100).toFixed(2)
    },
    showDialog(row) {
        this.payShow = true
        this.learningPackageId= row.id
    },
    // 初始化微信配置
    // initWxConfig() {
    //   return getWxConfig(
    //       window.location.href.split('#')[0]
    //   ).then(response => {
    //     const { appId, timestamp, nonceStr, signature } = response.data;

    //     wx.config({
    //       debug: process.env.NODE_ENV === 'development',
    //       appId,
    //       timestamp,
    //       nonceStr,
    //       signature,
    //       jsApiList: ['chooseWXPay'] 
    //     });

    //     return new Promise((resolve, reject) => {
    //       wx.ready(() => resolve());
    //       wx.error((res) => reject(new Error(`SDK配置失败: ${JSON.stringify(res)}`)));
    //     });
    //   });
    // },
    handleSubmit(code,id,state,doctorId,mobile) {
        this.loading = true;
        console.log(this.WxTencentForm)
        if(this.WxTencentForm){
            const params = {
                state: state,
                code: code,
                packageId: id,
                equipmentPledge: '1',
                mobile: mobile,
                doctorId: doctorId,
            }
            console.log(params)
            wXTencentPhoneSave(params).then(resp => {
                if(resp.code == 201) {
                  console.log("重复调用")
                  this.$router.push({
                      path: '/officialAccounts/pay',
                      query: {
                          doctorId: doctorId
                      }
                  })
                  return
                }
                // 微信JSAPI调用参数
                const payParams = {
                    appId: resp.data.wxAppId,
                    timeStamp: resp.data.wxTimeStamp.toString(),
                    nonceStr: resp.data.wxNonceStr,
                    package: resp.data.wxPackage,
                    signType: resp.data.wxSignType, // 统一转换标准类型
                    paySign: resp.data.wxPaySign
                };
                // // 调用微信支付接口
                // wx.chooseWXPay({
                //     ...payParams,
                //     success: res => {
                //         this.$toast.success('支付成功');
                //         this.handlePaymentSuccess(res);
                //     },
                //     fail: err => {
                //         this.$toast.error(`支付失败: ${err.errMsg || '系统错误'}`);
                //         this.handlePaymentFailure(err);
                //     },
                //     complete: () => {
                //         this.loading = false;
                //     }
                // });
                this.invokeWechatPay(payParams)

            });
        }
    },
    invokeWechatPay(payParams) {
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        ...payParams
      }, (res) => {
        this.loading = false;
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          this.handlePaymentSuccess();
        } else {
          this.handlePaymentFailure(res);
        }
      });
    },
    // 支付成功处理
    handlePaymentSuccess() {
      console.log("成功")
      this.$router.push({
            path: '/officialAccounts/payStatus',
            query: {
                payStatus: '0'
            }
        })
    },
    mobileError() {
      const mobile = this.payForm.phone.trim()
      const mobilePattern = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      if(!mobile) {
        this.errorMobile = "手机号不能为空";
        return false;
      }
      if(!mobilePattern.test(mobile)) {
        this.errorMobile = "请输入正确的手机号码"
        return false;
      }
      this.errorMobile = ''
      return true;
    },
    // 支付失败处理
    handlePaymentFailure(error) {
      console.log("失败")
      this.$router.push({
            path: '/officialAccounts/payStatus',
            query: {
                payStatus: '1'
            }
        })
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        if(this.mobileError() && this.payForm.checked) {
          done();
        } else {
          done(false)
        }
      } else {
        done();
      }
    },
    handleWechatAuth() {
      if(this.errorMobile != "") {
        return;

      }

      if(!this.payForm.checked) {
          Toast("请仔细阅读服务协议，并勾选")
          return;
      }

      const currentPath = window.location.pathname;
      const query = {
        doctorId: this.$route.query.doctorId,
        packageId: this.learningPackageId,
        mobile: this.payForm.phone
      }
      let redirectPath = currentPath+"?payUser="+symmetryEncryptWX(JSON.stringify(query));
      console.log(redirectPath)
      const redirectUri = encodeURIComponent(
        window.location.origin + redirectPath
      );
      const params = {
        appId: 'wxe6dbe98e8c6d1a4b',
        redirectUri: redirectUri,
        scope: 'snsapi_base',
        state: this.generateState()
      }
      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${params.appId}&redirect_uri=${params.redirectUri}&response_type=code&scope=${params.scope}&state=${params.state}#wechat_redirect`;
      window.location.href = authUrl
    },
    generateState() {
      return Math.random().toString(36).substr(2) + Date.now().toString(36)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 修改图片容器为流式布局 */
.image-wrapper {
  position: relative;
  width: 80%;
  display: flex;
  background: #f0f2f5;
  margin: 2rem auto;
  border-radius: 12px;
  overflow: hidden;

  .package-image {
    width: 100%;
    height: auto;
    min-height: 150px;
    object-fit: cover;
    transition: height 0.3s ease;
  }

  .overlay-text {
    position: absolute;
    top: 0; // 定位到顶部
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: transparent !important; // 透明背景
    
    .card-title {
      font-size: clamp(16px, 4vw, 18px);
      color: #fff;
      margin-left: 7%;
      margin-top: 5%;
    }
    
    .card-price {
      font-size: clamp(24px, 6vw, 32px);
      color: #fff;
      font-weight: 400;
      margin-top: 2%;
      margin-left: 7%;
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .image-wrapper {
    width: 85%;
    margin: 1.5rem auto;
    border-radius: 8px;
    
    .overlay-text {
      padding: 8px 12px;
    }
  }
}

// 极端小屏适配
@media (max-width: 320px) {
  .image-wrapper {
    width: 90%;
    margin: 1rem auto;
    
    .overlay-text {
      padding: 6px 8px;
    }
  }
}
</style>