'1'

pay.vue

+<template>
+    <view class="container">
+      <view class="pop">
+        <view class="top">
+          <text class="title">支付金额</text>
+          <text class="money">¥ {{ mony }}</text>
+        </view>
+        
+        <view class="product-name">
+          商品名称：{{ title }}
+        </view>
+  
+        <view class="pays">
+          <u-radio-group v-model="radiovalue" placement="column">
+            <uni-card class="payment-card">
+              <uv-cell class="item" v-for="(item, index) in paymentMethods" v-if="item.visible" :key="index">
+                <template v-slot:title>
+                  <view class="leftbox">
+                    <image :src="item.icon" mode="" class="payment-icon"></image>
+                    <view class="text">{{ item.label }}</view>
+                  </view>
+                </template>
+                <template v-slot:right-icon>
+                  <u-radio :name="item.name" activeColor="#07c160"></u-radio>
+                </template>
+              </uv-cell>
+            </uni-card>
+          </u-radio-group>
+        </view>
+      </view>
+  
+      <button class="btn-submit" @click="submit">立即支付</button>
+    </view>
+  </template>
+  
+  <script>
+  import wx from '@/static/payup/wx.svg'
+  import zfb from '@/static/payup/zfb.svg'
+  import yinlian from '@/static/payup/yinlian.svg'
+  import jlj from '@/static/payup/jlj.svg'
+  import fh from '@/static/payup/fh.svg'
+  import yj from '@/static/payup/yj.svg'
+  
+  function generateUniqueValue() {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 99; i++) {
+      const randomIndex = Math.floor(Math.random() * chars.length);
+      result += chars[randomIndex];
+    }
+    return result;
+  }
+  const generateUniqueKey = generateUniqueValue()
+  
+  export default {
+    props: {
+      isBindpay: { default: false },
+      isBindc: { default: false },
+      dw: { default: '元' },
+      notifyData: { default: '' },
+      zfsm: { default: '' },
+      withdrawType: { default: null },
+      bankId: { default: null },
+      productId: { default: null },
+      password: { default: false },
+      payway: { default: null },
+      type: { default: null },
+      wechat: { default: 0 },
+      zfb: { default: 0 },
+      ysf: { default: 0 },
+      tzj: { default: 0 },
+      jtqb: { default: 0 },
+      dtqb: { default: 0 },
+      title: { default: '你好' },
+      subjoin: { default: '' },
+      show: { default: false },
+      mony: { default: 0 },
+      btn: { default: '确认支付' },
+      needCheck: { default: false },
+      url: { default: '' },
+    },
+    data() {
+      return {
+        paymentMethods: [
+          { name: 'wechat', label: '微信支付', icon: wx, visible: this.wechat == 1 },
+          { name: 'ali', label: '支付宝支付', icon: zfb, visible: this.zfb == 1 },
+          { name: 'yl', label: '云闪付', icon: yinlian, visible: this.ysf == 1 },
+          { name: 'tzj', label: '保额', icon: jlj, visible: this.tzj == 1 },
+          { name: 'jtqb', label: '体验金', icon: fh, visible: this.jtqb == 1 },
+          { name: 'dtqb', label: '动态钱包', icon: yj, visible: this.dtqb == 1 }
+        ],
+        mm: null,
+        seconds: 6,
+        iscould: false,
+        passshow: false,
+        pass: '',
+        radiovalue: 'ali',
+        zhifulist: [],
+        text1: '该笔费用为开通国际银行卡跨国转账至中国境内银行卡手续费，该费用由中国银保监会收取',
+        text2: '该笔款项是一带一路银行卡绑定第三方支付手续费，费用由第三方收取',
+      }
+    },
+    methods: {
+      countDown() {
+        if (this.seconds > 0) {
+          this.seconds--;
+          setTimeout(this.countDown, 1000);
+        } else {
+          this.iscould = ""
+          this.seconds = 6;
+        }
+      },
+      close() {
+        this.$emit('close', false)
+      },
+      passclose() {
+        this.pass = ''
+        this.passshow = false
+      },
+      finish(e) {
+        if (this.pass == this.mm) {
+          this.pay()
+        } else {
+          uni.showToast({
+            title: '密码输入错误',
+            icon: 'none'
+          })
+        }
+        this.passclose()
+        this.close()
+      },
+      submit() {
+        if (this.password) {
+          this.$request("/system/user/", {}, "get").then((res) => {
+            this.mm = res.data.email
+            this.passshow = true
+          })
+          this.passshow = true
+          this.close()
+        } else {
+          this.needCheck ? this.$emit('beforeClick', generateUniqueKey) : ''
+          this.pay()
+        }
+      },
+      pay() {
+        this.iscould = "false"
+        let timer1 = setTimeout(() => {
+          this.countDown()
+          clearTimeout(timer1);
+        }, 1000);
+        if (!this.radiovalue) {
+          uni.showToast({
+            title: "请选择支付方式",
+            icon: "none"
+          })
+          return
+        }
+        let data = {
+          productId: this.productId,
+          remark: this.radiovalue,
+          balance: this.mony,
+          type: this.type,
+        }
+        this.needCheck ? data.bakCol3 = generateUniqueKey : ''
+        this.$request(`${this.url}`, data, 'post', true).then((res) => {
+          if (res.data.code == 200) {
+            let script = res.data.msg
+            location.href = script
+            this.close()
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: "none"
+            })
+          }
+        })
+      }
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .container {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+  }
+  
+  .pop {
+    background: #ffffff;
+    
+    .top {
+      text-align: center;
+      padding: 30rpx 20rpx;
+      background: #fff;
+      border-bottom: 1px solid #eee;
+  
+      .title {
+        font-size: 28rpx;
+        color: #333;
+        margin-bottom: 16rpx;
+      }
+  
+      .money {
+        font-size: 40rpx;
+        color: #333;
+        font-weight: 500;
+      }
+    }
+  }
+  
+  .payment-card {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+  }
+  
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+  
+    .leftbox {
+      display: flex;
+      align-items: center;
+      gap: 20rpx;
+  
+      .payment-icon {
+        width: 44rpx;
+        height: 44rpx;
+      }
+  
+      .text {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+  }
+  
+  // 右侧单选框样式
+  :deep(.u-radio) {
+    .u-radio__icon {
+      color: #07c160;
+      font-size: 36rpx;
+    }
+  }
+  
+  .btn-submit {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    height: 90rpx;
+    background-color: #07c160;
+    color: white;
+    font-size: 32rpx;
+    border: none;
+    border-radius: 0;
+  
+    &:active {
+      opacity: 0.9;
+    }
+  }
+  
+  // 商品名称样式
+  .product-name {
+    font-size: 26rpx;
+    color: #999;
+    padding: 20rpx 32rpx;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+  }
+  </style>
\ No newline at end of file