|
@@ -0,0 +1,417 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="headers">
|
|
|
+ <div class="back" @click="goBack">
|
|
|
+ <img src="@/assets/back.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="invite-page">
|
|
|
+ <div class="fund-card">
|
|
|
+ <div class="title">助力修复【 {{item.title}} 】</div>
|
|
|
+ <div class="subtitle">
|
|
|
+ 修复成功每日分红将顺利打款到您的银行卡
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="label">请选择支付方式</div>
|
|
|
+ <div class="pay-list">
|
|
|
+ <div
|
|
|
+ class="pay-item"
|
|
|
+ v-for="(item, idx) in payList"
|
|
|
+ :key="item.id || idx"
|
|
|
+ @click="payType = item.title"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="pay-icon"
|
|
|
+ :src="item.title.includes('微信') ? require('@/assets/weixin.png') : require('@/assets/zhifubao.png')"
|
|
|
+ alt="icon"
|
|
|
+ />
|
|
|
+ <span class="pay-title">{{ item.title }}</span>
|
|
|
+ <input
|
|
|
+ type="radio"
|
|
|
+ name="pay"
|
|
|
+ :checked="payType === item.title"
|
|
|
+ @change="payType = item.title"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="label">修复是系统流程支付成功后费用将同步返回您的银行卡</div>
|
|
|
+ <div class="price-field">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="item.money"
|
|
|
+ readonly
|
|
|
+ class="price-input"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ class="submit-btn"
|
|
|
+ :disabled="!payType"
|
|
|
+ @click="handleSubmit"
|
|
|
+ >
|
|
|
+ 立即支付
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 实名认证提示弹窗 -->
|
|
|
+ <div v-if="showAuthDialog" class="custom-dialog-mask">
|
|
|
+ <div class="custom-dialog auth-dialog">
|
|
|
+ <div class="dialog-close" @click="showAuthDialog = false">
|
|
|
+ <i class="close-icon"></i>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-icon">
|
|
|
+ <svg t="1710401275044" class="auth-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6356">
|
|
|
+ <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1890FF" p-id="6357"></path>
|
|
|
+ <path d="M512 320c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32z" fill="#FFFFFF" p-id="6358"></path>
|
|
|
+ <path d="M512 720m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFFFFF" p-id="6359"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-title auth-title">温馨提示</div>
|
|
|
+ <div class="dialog-content">您还未完成实名认证<br/>请先进行实名认证</div>
|
|
|
+ <button class="dialog-btn auth-btn" @click="goToAuth">去认证</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {getTong,getChongXiufu,getUserInfo} from '@/api/home.js'
|
|
|
+import { Toast } from 'vant';
|
|
|
+export default {
|
|
|
+ name: 'PaymentNew',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ payType: '',
|
|
|
+ payList: [],
|
|
|
+ item:{},
|
|
|
+ userInfo: {},
|
|
|
+ showAuthDialog: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ async getPayType(){
|
|
|
+ const res = await getTong()
|
|
|
+ this.payList = res.data || []
|
|
|
+ },
|
|
|
+ async getUserInfo() {
|
|
|
+ try {
|
|
|
+ const res = await getUserInfo();
|
|
|
+ this.userInfo = res.data;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取用户信息失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ // 检查实名认证状态
|
|
|
+ if (this.userInfo.if_real === 0) {
|
|
|
+ this.showAuthDialog = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理提交逻辑
|
|
|
+ let params = {
|
|
|
+ type: this.payType,
|
|
|
+ money: this.item.money,
|
|
|
+ }
|
|
|
+ getChongXiufu(params).then(res => {
|
|
|
+ if(res.code === 1){
|
|
|
+ Toast.success('提交成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ window.location.href = res.data.payUrl
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goToAuth() {
|
|
|
+ this.$router.push('/user-center');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getPayType()
|
|
|
+ this.getUserInfo()
|
|
|
+ this.item = this.$route.query.item
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.invite-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: url('~@/assets/dabag.png') no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ padding: 70px 16px 32px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.headers {
|
|
|
+ position: relative;
|
|
|
+ height: 44px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .back {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ font-size: 20px;
|
|
|
+ img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fund-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
|
+ padding: 28px 18px 24px 18px;
|
|
|
+ max-width: 350px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.subtitle {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ .amount {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.label {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.pay-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 18px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+.pay-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,0.03);
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1.5px solid #eee;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+}
|
|
|
+.pay-item:hover, .pay-item input[type="radio"]:checked + .pay-title {
|
|
|
+ border-color: #4caf50;
|
|
|
+}
|
|
|
+.pay-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+.pay-title {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.pay-item input[type="radio"] {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.price-field {
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 12px;
|
|
|
+
|
|
|
+ .price-input {
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ color: #999;
|
|
|
+ border: none;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:not(:disabled) {
|
|
|
+ background: #4caf50;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 认证弹窗样式 */
|
|
|
+.custom-dialog-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-dialog {
|
|
|
+ position: relative;
|
|
|
+ width: 280px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ text-align: center;
|
|
|
+ animation: dialogFadeIn 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-title {
|
|
|
+ color: #1890FF;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin: 16px 0 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-btn {
|
|
|
+ background: #1890FF;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-btn:hover {
|
|
|
+ background: #40a9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-dialog {
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 12px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close:hover {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon {
|
|
|
+ position: relative;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::before,
|
|
|
+.dialog-close .close-icon::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #999;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::before {
|
|
|
+ transform: rotate(45deg);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::after {
|
|
|
+ transform: rotate(-45deg);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes dialogFadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|