551 lines
15 KiB
Vue
551 lines
15 KiB
Vue
<template>
|
||
<view v-if="XCXIsSelect !='否'">
|
||
<view class="padding">
|
||
<view class=" padding-lr bg-white radius">
|
||
<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
|
||
<u-form-item label="真实姓名" :border-bottom='false'>
|
||
<u-input :disabled="disabled" placeholder="请输入真实姓名" v-model="form.userName" />
|
||
</u-form-item>
|
||
<u-form-item label="证件号码" :border-bottom='false'>
|
||
<u-input :disabled="disabled" placeholder="请输入身份证号码" v-model="form.identityCardNumber" />
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
<view class=" padding bg-white radius margin-top">
|
||
<view class="margin-top"
|
||
style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
|
||
<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(1)"
|
||
v-if="!form.identityCardFront">
|
||
<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
|
||
<view class="text-sm text-gray margin-top-sm">请拍摄身份证正面</view>
|
||
</view>
|
||
<image @click="disabled? '':addImages(1)" v-else :src="form.identityCardFront"
|
||
style="width: 100%;height: 320rpx;"></image>
|
||
</view>
|
||
<!-- <view class="text-lg">上传身份证反面</view> -->
|
||
<view class="margin-top"
|
||
style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
|
||
<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(2)"
|
||
v-if="!form.identityCardVerso">
|
||
<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
|
||
<view class="text-sm text-gray margin-top-sm">请拍摄身份证反面</view>
|
||
</view>
|
||
<image @click="disabled? '':addImages(2)" v-else :src="form.identityCardVerso"
|
||
style="width: 100%;height: 320rpx;"></image>
|
||
</view>
|
||
<view class="margin-top"
|
||
style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
|
||
<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(3)"
|
||
v-if="!form.selfIdentityCard">
|
||
<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
|
||
<view class="text-sm text-gray margin-top-sm">请拍摄手持身份证正面</view>
|
||
</view>
|
||
<image @click="disabled? '':addImages(3)" v-else :src="form.selfIdentityCard"
|
||
style="width: 100%;height: 320rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view class="padding bg-white radius margin-top">
|
||
<view class="text-bold">缴纳保证金</view>
|
||
<view class="flex justify-between margin-top-sm">
|
||
<view class="text-gray">满足订单量及好评率即可申请退还保证金</view>
|
||
<view class="text-bold" style="color: #FF6A04;">¥{{money}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding margin-top footer text-xxl">
|
||
<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意并接受</text>
|
||
<!-- 协议地址 -->
|
||
<navigator url="/pages/riderMy/paotuixieyi" open-type="navigate">《跑腿代购用户协议》</navigator>
|
||
</view>
|
||
<view style="height: 120rpx;"></view>
|
||
</view>
|
||
<view class="bg-white flex justify-between align-center padding-lr"
|
||
style="position: fixed;bottom: 0;width: 100%;height: 120rpx;">
|
||
<view class="">
|
||
<text class="text-lg text-bold text-black">支付：</text>
|
||
<text class="text-red">¥{{money}}</text>
|
||
</view>
|
||
<view>
|
||
<u-button v-if="!disabled" @click="submit" class="" :custom-style="customStyle" shape="circle"
|
||
:hair-line="false">提交认证</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<u-popup v-model="showpay" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
|
||
close-icon-color="#8f9298" close-icon-size="50">
|
||
<view class="popup_pay">
|
||
<view class="bg margin-top padding-lr radius">
|
||
<view style="padding: 0 20upx;margin-top: 36rpx;">
|
||
<view
|
||
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
|
||
v-for="(item,index) in openLists" :key='index'>
|
||
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
|
||
</image>
|
||
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
|
||
{{item.name}}
|
||
</view>
|
||
<radio-group name="openWay" style="margin-left: 45rpx;" @tap='selectWay(item)'>
|
||
<label class="tui-radio">
|
||
<radio color="#FF7F00" :checked="openWay == item.id ? true : false" />
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay_btns" @click="pay()">确认支付</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configdata from '@/common/config.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
userName: '',
|
||
// phone: '',
|
||
identityCardNumber: '',
|
||
identityCardFront: '',
|
||
identityCardVerso: '',
|
||
selfIdentityCard: '',
|
||
cashDeposit: ''
|
||
},
|
||
disabled: false,
|
||
lableStyle: {
|
||
color: '#000',
|
||
fontSize: '36upx',
|
||
fontWeight: 700
|
||
},
|
||
customStyle: {
|
||
backgroundColor: '#FF6A04',
|
||
color: '#FFFFFF',
|
||
border: 0,
|
||
width: '200rpx'
|
||
},
|
||
btnStyle: {
|
||
backgroundColor: '#FF6A04',
|
||
color: '#FFFFFF',
|
||
},
|
||
money: 0,
|
||
showAgree: false, //协议是否选择
|
||
sessionkey: '',
|
||
|
||
showpay: false,
|
||
openWay: 1,
|
||
openLists: [],
|
||
indentNumber: '',
|
||
XCXIsSelect:'否'
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
|
||
if(this.XCXIsSelect =='否'){
|
||
uni.setNavigationBarTitle({
|
||
title: '隐私政策'
|
||
});
|
||
}else{
|
||
uni.setNavigationBarTitle({
|
||
title: '实名认证'
|
||
});
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
this.openLists = [{
|
||
id: 1,
|
||
image: '../../../static/my/weixin.png',
|
||
name: '微信'
|
||
}]
|
||
this.openWay = 1
|
||
// #endif
|
||
// #ifdef H5
|
||
this.openLists = [
|
||
{
|
||
id: 1,
|
||
image: '../../../static/my/weixin.png',
|
||
name: '微信'
|
||
},
|
||
{
|
||
id: 2,
|
||
image: '../../../static/my/zhifubao.png',
|
||
name: '支付宝'
|
||
}
|
||
|
||
]
|
||
this.openWay = 1
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.openLists = [{
|
||
id: 1,
|
||
image: '../../../static/my/weixin.png',
|
||
name: '微信'
|
||
},
|
||
{
|
||
id: 2,
|
||
image: '../../../static/my/zhifubao.png',
|
||
name: '支付宝'
|
||
}
|
||
]
|
||
// #endif
|
||
|
||
this.getRZmoney()
|
||
this.sessionkey = this.$queue.getData("sessionkey");
|
||
},
|
||
methods: {
|
||
isShowAgree() {
|
||
this.showAgree = !this.showAgree
|
||
},
|
||
getRZmoney() {
|
||
this.$Request.get("/app/common/type/273").then(res => {
|
||
if (res.code == 0) {
|
||
this.money = res.data.value
|
||
this.form.cashDeposit = res.data.value
|
||
}
|
||
});
|
||
},
|
||
selectWay: function(item) {
|
||
this.openWay = item.id;
|
||
},
|
||
submit() {
|
||
let that = this
|
||
console.log(that.form)
|
||
if (!that.form.userName) {
|
||
uni.showToast({
|
||
title: '请输入真实姓名',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
if (!that.form.identityCardNumber) {
|
||
uni.showToast({
|
||
title: '请输入身份证号',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
if (!that.form.identityCardFront) {
|
||
uni.showToast({
|
||
title: '请上传身份证正面',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
if (!that.form.identityCardVerso) {
|
||
uni.showToast({
|
||
title: '请上传身份证反面',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
if (!that.form.selfIdentityCard) {
|
||
uni.showToast({
|
||
title: '请上传手持身份证正面',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
|
||
if (!this.showAgree) {
|
||
uni.showToast({
|
||
title: '请勾选跑腿代购用户协议',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
that.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/3", that.form).then(res => {
|
||
if (res.code == 0) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.timestamp,
|
||
nonceStr: res.data.noncestr,
|
||
package: res.data.package,
|
||
signType: res.data.signType,
|
||
paySign: res.data.sign,
|
||
success: function(res) {
|
||
console.log(res)
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '实名认证提交成功',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(function() {
|
||
uni.navigateBack(1)
|
||
}, 1000)
|
||
},
|
||
fail: function(err) {
|
||
console.log('fail:' + JSON.stringify(err));
|
||
uni.hideLoading();
|
||
that.$queue.showToast('支付失败');
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
this.showpay = true
|
||
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.showpay = true
|
||
// #endif
|
||
|
||
},
|
||
getUserInfo() {
|
||
this.$Request.get("/app/userinfo/findUserInfoById").then(res => {
|
||
if (res.code == 0) {
|
||
this.form.name = res.data.name ? res.data.name : ''
|
||
this.form.idNumber = res.data.idNumber ? res.data.idNumber : ''
|
||
this.form.front = res.data.front ? res.data.front : ''
|
||
this.form.back = res.data.back ? res.data.back : ''
|
||
|
||
if (res.data.status == 1) {
|
||
this.disabled = true
|
||
}
|
||
if (res.data.status == 2) {
|
||
this.form.remek = res.data.remek ? res.data.remek : ''
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addImages(e) {
|
||
let that = this
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['album', 'camera'],
|
||
success: res => {
|
||
for (let i = 0; i < 1; i++) {
|
||
that.$queue.showLoading("上传中...");
|
||
uni.uploadFile({ // 上传接口
|
||
url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
|
||
// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
|
||
filePath: res.tempFilePaths[i],
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
console.log(uploadFileRes)
|
||
if (e == 1) {
|
||
that.form.identityCardFront = JSON.parse(uploadFileRes
|
||
.data).data
|
||
} else if (e == 2) {
|
||
that.form.identityCardVerso = JSON.parse(uploadFileRes
|
||
.data).data
|
||
} else if (e == 3) {
|
||
that.form.selfIdentityCard = JSON.parse(uploadFileRes.data)
|
||
.data
|
||
}
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
config: function(name) {
|
||
var info = null;
|
||
if (name) {
|
||
var name2 = name.split("."); //字符分割
|
||
if (name2.length > 1) {
|
||
info = configdata[name2[0]][name2[1]] || null;
|
||
} else {
|
||
info = configdata[name] || null;
|
||
}
|
||
if (info == null) {
|
||
let web_config = cache.get("web_config");
|
||
if (web_config) {
|
||
if (name2.length > 1) {
|
||
info = web_config[name2[0]][name2[1]] || null;
|
||
} else {
|
||
info = web_config[name] || null;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return info;
|
||
},
|
||
pay() {
|
||
if (this.openWay == 0) {
|
||
this.$queue.showToast('请选择支付方式!')
|
||
return;
|
||
}
|
||
if (this.openWay == 1) {
|
||
// #ifdef H5
|
||
this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/2", this.form).then(
|
||
res => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
console.log()
|
||
this.callPay(res.data);
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败!'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// 微信APP支付 根据订单id获取支付信息
|
||
this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/1", this.form).then(
|
||
res => {
|
||
console.log(JSON.stringify(res), '微信支付信息')
|
||
this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
|
||
});
|
||
// #endif
|
||
|
||
} else if (this.openWay == 2) { //支付宝支付
|
||
// #ifdef H5
|
||
this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/5", this.form).then(
|
||
res => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
console.log()
|
||
const div = document.createElement('div')
|
||
div.innerHTML = res.data //此处form就是后台返回接收到的数据
|
||
document.body.appendChild(div)
|
||
document.forms[0].submit()
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败!'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
console.log('支付宝')
|
||
// APP支付宝支付
|
||
// #ifdef APP
|
||
this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/4", this.form).then(
|
||
res => {
|
||
console.log(JSON.stringify(res), '支付宝支付信息')
|
||
this.setPayment('alipay', res.data);
|
||
});
|
||
// #endif
|
||
}
|
||
},
|
||
callPay: function(response) {
|
||
console.log(response)
|
||
if (typeof WeixinJSBridge === "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
|
||
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
|
||
}
|
||
} else {
|
||
this.onBridgeReady(response);
|
||
}
|
||
},
|
||
onBridgeReady: function(response) {
|
||
let that = this;
|
||
// if (!response.package) {
|
||
// return;
|
||
// }
|
||
console.log(response, 111111)
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest', {
|
||
"appId": response.appid, //公众号名称，由商户传入
|
||
"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": response.noncestr, //随机串
|
||
"package": response.package,
|
||
"signType": response.signType, //微信签名方式：
|
||
"paySign": response.sign //微信签名
|
||
},
|
||
function(res) {
|
||
console.log(res, '/*-/*-/*-')
|
||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
uni.navigateBack()
|
||
}, 1000);
|
||
} else {
|
||
uni.hideLoading();
|
||
}
|
||
WeixinJSBridge.log(response.err_msg);
|
||
}
|
||
);
|
||
},
|
||
isCheckPay(status, name, order) {
|
||
if (status == 0) {
|
||
this.setPayment(name, order);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付信息有误',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
setPayment(name, order) {
|
||
console.log(name, '*-*-*', order)
|
||
uni.requestPayment({
|
||
provider: name,
|
||
orderInfo: order, //微信、支付宝订单数据
|
||
success: function(res) {
|
||
console.log(res)
|
||
uni.hideLoading();
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
setTimeout(function() {
|
||
uni.navigateBack()
|
||
}, 1000);
|
||
},
|
||
fail: function(err) {
|
||
console.log(err)
|
||
uni.hideLoading();
|
||
},
|
||
complete() {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.footer {
|
||
/* // padding-left: 140upx; */
|
||
/* justify-content: center; */
|
||
margin-top: 32upx;
|
||
font-size: 24upx;
|
||
color: #666666;
|
||
display: flex;
|
||
text-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 支付弹框 */
|
||
.popup_pay {
|
||
width: 100%;
|
||
}
|
||
|
||
.pay_btns {
|
||
width: 90%;
|
||
margin: 0 auto 40rpx;
|
||
text-align: center;
|
||
background: #FF7F00;
|
||
height: 80rpx;
|
||
border-radius: 16rpx;
|
||
color: #ffffff;
|
||
line-height: 80rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
</style>
|