296 lines
8.0 KiB
Vue
296 lines
8.0 KiB
Vue
<template>
|
||
<view class="box">
|
||
<view class="box-phone">
|
||
<u--form :model="form" :rules="rules" ref="uForm" labelWidth="100">
|
||
<u-form-item label="手机号" prop="phone">
|
||
<u--input v-model="form.phone" maxlength="11" placeholder="请输入您的手机号"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="手机号" prop="phone">
|
||
<u--input v-model="form.phone" maxlength="11" placeholder="请再次确认您的手机号"></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view class="box-member">
|
||
<view class="member-item" v-for="(item,index) in 3" :key="index">
|
||
<view class="member-image">
|
||
<image src='../../static/images/f.png'></image>
|
||
</view>
|
||
<view class="member-text">
|
||
<text class="text-title">办理240得<text style="color: red;">360元</text></text>
|
||
<text class="text-content">办理档次【240】元，可享连续12个月每个月返利30元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box-privilege">
|
||
<view class="privilege-item" v-for="(item,index) in 4" :key="index">
|
||
<image src='../../static/images/f.png'></image>
|
||
<text class="privilege-text">
|
||
开通立享大额话费返送。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
|
||
<button class="box-submit" @click="goPay">立即充值</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
memberGradeInfo
|
||
} from '@/api/member.js';
|
||
import payment from '@/components/payment';
|
||
export default {
|
||
name: "member_application",
|
||
components: {
|
||
payment
|
||
},
|
||
data() {
|
||
return {
|
||
total_fee: 1, // 支付金额，单位分 100 = 1元
|
||
order_no: "", // 业务系统订单号（即你自己业务系统的订单表的订单号）
|
||
out_trade_no: "", // 插件支付单号
|
||
description: "测试订单", // 支付描述
|
||
type: "test", // 支付回调类型 如 recharge 代表余额充值 goods 代表商品订单（可自定义，任意英文单词都可以，只要你在 uni-pay-co/notify/目录下创建对应的 xxx.js文件进行编写对应的回调逻辑即可）
|
||
custom:{
|
||
a: "a",
|
||
b: 1
|
||
},
|
||
form: {
|
||
phone:''
|
||
},
|
||
pay_order_id: '123123',
|
||
totalPrice: '123',
|
||
payMode: [{
|
||
name: "微信支付",
|
||
icon: "icon-weixinzhifu",
|
||
value: 'weixin',
|
||
title: '微信快捷支付'
|
||
},
|
||
{
|
||
name: "余额支付",
|
||
icon: "icon-yuezhifu",
|
||
value: 'yue',
|
||
title: '可用余额:',
|
||
number: 0
|
||
}
|
||
],
|
||
pay_close: false,
|
||
rules: {
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: '手机号不能为空',
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['change', 'blur']
|
||
},
|
||
{
|
||
pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g,
|
||
// 正则检验前先将值转为字符串
|
||
transform(value) {
|
||
return String(value);
|
||
},
|
||
message: '手机号不正确（190.193号段不可充值）',
|
||
trigger: ['change', 'blur']
|
||
},
|
||
]
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
async onLoad() {
|
||
const res = await memberGradeInfo()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 打开支付组件
|
||
*
|
||
*/
|
||
goPay(pay_price, order_id) {
|
||
this.$set(this, 'pay_close', true);
|
||
this.$set(this, 'pay_order_id', '4646');
|
||
this.$set(this, 'totalPrice', '4646');
|
||
},
|
||
/**
|
||
* 事件回调
|
||
*
|
||
*/
|
||
onChangeFun: function(e) {
|
||
let opt = e;
|
||
let action = opt.action || null;
|
||
let value = opt.value != undefined ? opt.value : null;
|
||
(action && this[action]) && this[action](value);
|
||
},
|
||
/**
|
||
* 关闭支付组件
|
||
*
|
||
*/
|
||
payClose: function() {
|
||
this.pay_close = false;
|
||
},
|
||
/**
|
||
* 支付成功回调
|
||
*
|
||
*/
|
||
pay_complete: function() {
|
||
this.status = false;
|
||
this.page = 1;
|
||
this.$set(this, 'bargain', []);
|
||
this.$set(this, 'pay_close', false);
|
||
this.getBargainUserList();
|
||
},
|
||
/**
|
||
* 支付失败回调
|
||
*
|
||
*/
|
||
pay_fail: function() {
|
||
this.pay_close = false;
|
||
},
|
||
onChangeFun: function(e) {
|
||
let opt = e;
|
||
let action = opt.action || null;
|
||
let value = opt.value != undefined ? opt.value : null;
|
||
(action && this[action]) && this[action](value);
|
||
},
|
||
submit() {
|
||
this.order_no = `test`+Date.now(); // 模拟生成订单号
|
||
this.out_trade_no = `${this.order_no}-1`; // 模拟生成插件支付单号
|
||
// 打开支付收银台
|
||
this.$refs.uniPay.open({
|
||
total_fee: this.total_fee, // 支付金额，单位分 100 = 1元
|
||
order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
|
||
out_trade_no: this.out_trade_no, // 插件支付单号
|
||
description: this.description, // 支付描述
|
||
type: this.type, // 支付回调类型
|
||
custom: this.custom, // 自定义数据
|
||
});
|
||
|
||
// this.$refs.uForm.validate().then(res => {
|
||
// uni.$u.toast('校验通过')
|
||
// }).catch(errors => {
|
||
// uni.$u.toast('校验失败')
|
||
// })
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
// position: relative;
|
||
padding: 0 24rpx;
|
||
|
||
.box-phone {
|
||
.u-form-item{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
::v-deep .u-form-item__body {
|
||
height: 100rpx;
|
||
border-radius: 20rpx;
|
||
padding: 0 30rpx;
|
||
background: #fff;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
|
||
.box-member {
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
margin-top: 40%;
|
||
padding: 100rpx 20rpx 30rpx 20rpx;
|
||
// position: absolute;
|
||
// top: 20%;
|
||
// left: 0;
|
||
background: rgb(255, 210, 91);
|
||
|
||
.member-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.member-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 34rpx;
|
||
background: red;
|
||
padding: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.member-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
flex: .9;
|
||
|
||
.text-title {
|
||
margin-top: -16rpx;
|
||
font-size: 40rpx;
|
||
font-weight: bolder;
|
||
transform: skew(-6deg, 0);
|
||
}
|
||
|
||
.text-content {
|
||
font-size: 24rpx;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-privilege {
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
margin-top: 10%;
|
||
padding: 100rpx 10rpx 30rpx 10rpx;
|
||
background: rgb(255, 210, 91);
|
||
display: flex;
|
||
flex: 1;
|
||
|
||
.privilege-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding: 30rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
margin: 10rpx;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.privilege-text {
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-submit {
|
||
margin-top: 10%;
|
||
margin-bottom: 6%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 90rpx;
|
||
border-radius: 60rpx;
|
||
background: royalblue;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|