|
|
@@ -1,24 +1,52 @@
|
|
|
<template>
|
|
|
<el-row class="pay-check">
|
|
|
- <el-col :span="6" :offset="9">
|
|
|
- <el-form :model="formData" :rules="rules" ref="myForm">
|
|
|
- <el-form-item label="支付方式" prop="payment">
|
|
|
- <el-radio-group v-model="formData.payment">
|
|
|
- <el-radio label="1">在线支付</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="支付金额" prop="amount">
|
|
|
- <el-select v-model="formData.amount" placeholder="请选择支付金额">
|
|
|
- <el-option label="50.00" value="50"></el-option>
|
|
|
- <el-option label="100.00" value="100"></el-option>
|
|
|
- <el-option label="300.00" value="300"></el-option>
|
|
|
- <el-option label="500.00" value="500"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submitForm('myForm')">立即支付</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <el-col :span="10" :offset="2">
|
|
|
+ <h3 class="TT-title">请打开支付扫一扫扫码充值</h3>
|
|
|
+ <div class="qrcode-wrap">
|
|
|
+ <img :src="payConfig.aliPayImg" alt="">
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <ul class="TT-steps">
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>第一步：扫码后直接输入你想要充值的金额</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>第二步：支付宝充值备注填写</span>
|
|
|
+ <span class="order-id">{{ payConfig.payRemark }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>未填写则不到账</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>第三步：扫码后等待30s后自动到账</span>
|
|
|
+ <span class="refresh-order" @click="$router.push({name: 'mineWallet'})">已充值，去查看余额</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>当前余额</span>
|
|
|
+ <span class="amount-order">{{ payConfig.userBlance }}</span>
|
|
|
+ <span>元</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="TT-help">
|
|
|
+ <h3 class="TT-title">联系客服</h3>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p class="label">QQ：112012666</p>
|
|
|
+ <img class="qrcode" src="../../../../static/img/kefu0000.png" alt="">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11" :offset="2">
|
|
|
+ <p class="label">微信二维码</p>
|
|
|
+ <img class="qrcode" src="../../../../static/img/kefu0001.jpeg" alt="">
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
@@ -28,24 +56,24 @@ export default {
|
|
|
name: 'mine-paycheck',
|
|
|
data () {
|
|
|
return {
|
|
|
- formData: {
|
|
|
- payment: '1',
|
|
|
- amount: '50'
|
|
|
- },
|
|
|
- rules: {
|
|
|
- amount: [
|
|
|
- { required: true, message: '请选择支付金额', trigger: 'change' }
|
|
|
- ]
|
|
|
- }
|
|
|
+ payConfig: {}
|
|
|
}
|
|
|
},
|
|
|
+ activated () {
|
|
|
+ this.funInit()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- submitForm (formName) {
|
|
|
- console.log(this.formData)
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (!valid) {
|
|
|
- alert('submit!')
|
|
|
+ funInit () {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/user/config'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams()
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (data.status) {
|
|
|
+ this.payConfig = data.data
|
|
|
+ return
|
|
|
}
|
|
|
+ this.$message.error(data.msg)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -56,4 +84,102 @@ export default {
|
|
|
.pay-check {
|
|
|
margin-top: 100px;
|
|
|
}
|
|
|
+
|
|
|
+.TT-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.qrcode-wrap {
|
|
|
+ width: 60%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.TT-steps {
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ padding-left: 13px;
|
|
|
+ padding-bottom: 60px;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 3px;
|
|
|
+ top: 6px;
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ height: 100%;
|
|
|
+ border-left: 1px solid #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 6px;
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: pink;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ &:before {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-id {
|
|
|
+ padding: 4px 10px;
|
|
|
+ margin-left: 6px;
|
|
|
+ background: pink;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refresh-order {
|
|
|
+ margin-left: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-order {
|
|
|
+ color: red;
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.TT-help {
|
|
|
+ padding-top: 20px;
|
|
|
+ border-top: 1px dashed #666;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
panyong
