442 lines
11 KiB
Vue
442 lines
11 KiB
Vue
|
<template>
|
|||
|
<view>
|
|||
|
<view style="width: 100%;height: 384upx;position: relative;">
|
|||
|
<image src="../../static/images/image-bg.png" style="width: 100%;height: 100%;"></image>
|
|||
|
<view class="box">
|
|||
|
<view class="margin-top padding-top">保证金(元)</view>
|
|||
|
<view class="margin-top-lg text-bold" style="font-size: 78upx;" v-if="isCashDeposit ==1">{{money}}</view>
|
|||
|
<view class="margin-top-lg text-bold" style="font-size: 78upx;"
|
|||
|
v-if="isCashDeposit==2 ||isCashDeposit==3">{{mymoney}}</view>
|
|||
|
|
|||
|
<view class="flex justify-between padding-lr" style="margin-top: 100upx;">
|
|||
|
<view class="btn1" @click="Tuiprice()" v-if="isCashDeposit==2 ||isCashDeposit==3">退保证金</view>
|
|||
|
<view style="background-image: linear-gradient(to right, #223845, #00a85b)" class="btn2" @click="submit()" v-if="isCashDeposit ==1">缴纳保证金</view>
|
|||
|
<view style="background-image: linear-gradient(to right, #223845, #00a85b)" class="btn2 margin-left" @click="goMoneylist()">保证金明细</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="padding" style="margin-top: 180upx;">
|
|||
|
<view style="color: #333333;font-size: 38upx;" class="text-bold">保证金规则</view>
|
|||
|
<view style="font-size: 32upx;margin-top: 58upx;" class="text-bold">保证金退款</view>
|
|||
|
<view style="color: #666666;margin-top: 29upx;font-size: 28upx;">
|
|||
|
48小时内无订单记录即可申请退保证金,保证金统一退款至账户余额,实时到账。
|
|||
|
</view>
|
|||
|
<view style="font-size: 32upx;margin-top: 58upx;" class="text-bold">保证金缴纳</view>
|
|||
|
<view style="color: #666666;margin-top: 29upx;font-size: 28upx;">
|
|||
|
所有按摩师服务接单需缴纳保证金{{money}}元,没有缴纳将无法接订单,建议您及时缴纳。
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<!-- 支付方式 -->
|
|||
|
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
|||
|
<view class="popup_pay">
|
|||
|
<view style="background-color: #fff;">
|
|||
|
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
|
|||
|
<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.text}}
|
|||
|
</view>
|
|||
|
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
|
|||
|
<label class="tui-radio">
|
|||
|
<radio color="#1777FF" :checked="openWay === item.id ? true : false" />
|
|||
|
</label>
|
|||
|
</radio-group>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="pay_btn" @click="pay()">确认支付</view>
|
|||
|
</view>
|
|||
|
</u-popup>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
mymoney: 0,
|
|||
|
money: 0,
|
|||
|
showpay: false,
|
|||
|
openLists: [],
|
|||
|
openWay: 1,
|
|||
|
closeable: true,
|
|||
|
renzheng: '',
|
|||
|
isCashDeposit: ''
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad() {
|
|||
|
this.isCashDeposit = uni.getStorageSync('isCashDeposit')
|
|||
|
this.renzheng = uni.getStorageSync("renzheng")
|
|||
|
// #ifdef APP
|
|||
|
this.openLists = [{
|
|||
|
image: '../../static/images/icon_weixin.png',
|
|||
|
text: '微信',
|
|||
|
id: 1
|
|||
|
}, {
|
|||
|
image: '../../static/images/zhifubao.png',
|
|||
|
text: '支付宝',
|
|||
|
id: 2
|
|||
|
}],
|
|||
|
this.openWay = 1;
|
|||
|
// #endif
|
|||
|
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
this.openLists = [{
|
|||
|
image: '../../static/images/icon_weixin.png',
|
|||
|
text: '微信',
|
|||
|
id: 1
|
|||
|
}],
|
|||
|
this.openWay = 1;
|
|||
|
// #endif
|
|||
|
|
|||
|
// #ifdef H5
|
|||
|
this.openLists = [{
|
|||
|
image: '../../static/images/zhifubao.png',
|
|||
|
text: '支付宝',
|
|||
|
id: 2
|
|||
|
}]
|
|||
|
this.openWay = 2;
|
|||
|
// #endif
|
|||
|
|
|||
|
|
|||
|
},
|
|||
|
onShow() {
|
|||
|
this.Getmoney()
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 我的余额
|
|||
|
getMoney() {
|
|||
|
this.$Request.get("/app/userMoney/selectMyMoney").then(res => {
|
|||
|
if (res.code == 0 && res.data) {
|
|||
|
this.mymoney = res.data.cashDeposit ? res.data.cashDeposit : 0;
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
selectWay: function(item) {
|
|||
|
this.openWay = item.id;
|
|||
|
},
|
|||
|
//保证金明细
|
|||
|
goMoneylist() {
|
|||
|
uni.navigateTo({
|
|||
|
url: '/my/publish/moneylist'
|
|||
|
})
|
|||
|
},
|
|||
|
// 保证金
|
|||
|
Getmoney() {
|
|||
|
this.getMoney();
|
|||
|
this.$Request.get("/app/common/type/241").then(res => {
|
|||
|
console.log(res)
|
|||
|
if (res.code == 0) {
|
|||
|
this.money = res.data.value
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
//缴纳保证金
|
|||
|
submit() {
|
|||
|
if (this.isCashDeposit == 3) {
|
|||
|
uni.showToast({
|
|||
|
title: '系统审核中,请耐心等待',
|
|||
|
icon: 'none',
|
|||
|
duration: 1000
|
|||
|
})
|
|||
|
} else if (this.isCashDeposit == 1) {
|
|||
|
this.showpay = true
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
//退保证金
|
|||
|
Tuiprice() {
|
|||
|
let that = this
|
|||
|
if (that.isCashDeposit == 3) {
|
|||
|
uni.showToast({
|
|||
|
title: '系统审核中,请耐心等待',
|
|||
|
icon: 'none',
|
|||
|
duration: 1000
|
|||
|
})
|
|||
|
} else if (that.isCashDeposit == 2) {
|
|||
|
uni.showModal({
|
|||
|
title: '提示',
|
|||
|
content: '是否确认退还保证金?退还后将无法接单',
|
|||
|
success: function(res) {
|
|||
|
if (res.confirm) {
|
|||
|
that.$Request.postT('/app/realname/retreatCashDeposit', {
|
|||
|
userId: uni.getStorageSync('userId')
|
|||
|
}).then(ret => {
|
|||
|
if (ret.code == 0) {
|
|||
|
uni.showToast({
|
|||
|
title: '已退还至账户余额',
|
|||
|
icon: 'none',
|
|||
|
duration: 1000
|
|||
|
})
|
|||
|
that.isCashDeposit = 1
|
|||
|
that.Getmoney()
|
|||
|
// uni.switchTab({
|
|||
|
// url: '/pages/my/index'
|
|||
|
// })
|
|||
|
} else {
|
|||
|
uni.showToast({
|
|||
|
title: ret.msg,
|
|||
|
icon: 'none',
|
|||
|
duration: 1000
|
|||
|
})
|
|||
|
}
|
|||
|
})
|
|||
|
} else if (res.cancel) {
|
|||
|
console.log('用户点击取消');
|
|||
|
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
pay() {
|
|||
|
let userId = uni.getStorageSync('userId')
|
|||
|
|
|||
|
this.showpay = false
|
|||
|
if (this.openWay == 1) { //微信支付
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
let data = {
|
|||
|
userId: userId,
|
|||
|
type: 3
|
|||
|
}
|
|||
|
this.$Request.post('/app/wxPay/submitRealName', data).then(res => {
|
|||
|
console.log(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.showLoading({
|
|||
|
title: '支付成功',
|
|||
|
icon: 'nones'
|
|||
|
});
|
|||
|
// this.$queue.showToast('支付成功');
|
|||
|
|
|||
|
uni.switchTab({
|
|||
|
url: '/pages/my/index'
|
|||
|
})
|
|||
|
},
|
|||
|
fail: function(err) {
|
|||
|
// this.$queue.showToast('支付失败');
|
|||
|
uni.showLoading({
|
|||
|
title: '支付失败',
|
|||
|
icon: 'nones'
|
|||
|
});
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
});
|
|||
|
// #endif
|
|||
|
|
|||
|
|
|||
|
// #ifdef H5
|
|||
|
let data = {
|
|||
|
userId: userId,
|
|||
|
type: 2
|
|||
|
}
|
|||
|
this.$Request.post('/app/wxPay/submitRealName', data).then(res => {
|
|||
|
this.showpay = false
|
|||
|
that.callPay(res);
|
|||
|
});
|
|||
|
// #endif
|
|||
|
|
|||
|
// #ifdef APP
|
|||
|
let data = {
|
|||
|
userId: userId,
|
|||
|
type: 1
|
|||
|
}
|
|||
|
this.$Request.post('/app/wxPay/submitRealName', data).then(res => {
|
|||
|
console.log(res)
|
|||
|
this.showpay = false
|
|||
|
if (res.code == 0) {
|
|||
|
this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
|
|||
|
}
|
|||
|
});
|
|||
|
// #endif
|
|||
|
|
|||
|
|
|||
|
} else if (this.openWay == 2) { //支付宝支付
|
|||
|
// #ifdef H5
|
|||
|
let data = {
|
|||
|
userId: userId,
|
|||
|
type: 2
|
|||
|
}
|
|||
|
this.$Request.post('/app/aliPay/payOrderCashDeposit', data).then(
|
|||
|
res => {
|
|||
|
this.showpay = false
|
|||
|
const div = document.createElement('div')
|
|||
|
div.innerHTML = res.data //此处form就是后台返回接收到的数据
|
|||
|
document.body.appendChild(div)
|
|||
|
document.forms[0].submit()
|
|||
|
});
|
|||
|
// #endif
|
|||
|
|
|||
|
// #ifdef APP-PLUS
|
|||
|
let data = {
|
|||
|
userId: userId,
|
|||
|
type: 1
|
|||
|
}
|
|||
|
this.$Request.post('/app/aliPay/payOrderCashDeposit', data).then(
|
|||
|
|
|||
|
res => {
|
|||
|
this.showpay = false
|
|||
|
this.setPayment('alipay', res.data);
|
|||
|
});
|
|||
|
// #endif
|
|||
|
|
|||
|
}
|
|||
|
},
|
|||
|
callPay: function(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;
|
|||
|
}
|
|||
|
WeixinJSBridge.invoke(
|
|||
|
'getBrandWCPayRequest', {
|
|||
|
"appId": response.appid, //公众号名称,由商户传入
|
|||
|
"timeStamp": response.timestamp, //时间戳,自1970年以来的秒数
|
|||
|
"nonceStr": response.noncestr, //随机串
|
|||
|
"package": response.package,
|
|||
|
"signType": response.signType, //微信签名方式:
|
|||
|
"paySign": response.sign //微信签名
|
|||
|
},
|
|||
|
function(res) {
|
|||
|
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
|||
|
// 使用以上方式判断前端返回,微信团队郑重提示:
|
|||
|
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
|
|||
|
uni.showLoading({
|
|||
|
title: '支付成功'
|
|||
|
});
|
|||
|
uni.hideLoading();
|
|||
|
|
|||
|
uni.navigateTo({
|
|||
|
url: '/pages/my/index'
|
|||
|
})
|
|||
|
} else {
|
|||
|
uni.hideLoading();
|
|||
|
}
|
|||
|
WeixinJSBridge.log(response.err_msg);
|
|||
|
}
|
|||
|
);
|
|||
|
},
|
|||
|
isCheckPay(code, name, order) {
|
|||
|
if (code == 0) {
|
|||
|
console.log('999999999999')
|
|||
|
this.setPayment(name, order);
|
|||
|
} else {
|
|||
|
uni.hideLoading();
|
|||
|
uni.showToast({
|
|||
|
title: '支付信息有误'
|
|||
|
});
|
|||
|
}
|
|||
|
},
|
|||
|
setPayment(name, order) {
|
|||
|
console.log(777777777, name, order)
|
|||
|
uni.requestPayment({
|
|||
|
provider: name,
|
|||
|
orderInfo: order, //微信、支付宝订单数据
|
|||
|
success: function(res) {
|
|||
|
uni.hideLoading();
|
|||
|
uni.showLoading({
|
|||
|
title: '支付成功'
|
|||
|
});
|
|||
|
uni.switchTab({
|
|||
|
url: '/pages/my/index'
|
|||
|
})
|
|||
|
},
|
|||
|
fail: function(err) {
|
|||
|
uni.hideLoading();
|
|||
|
},
|
|||
|
complete() {
|
|||
|
uni.hideLoading();
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style>
|
|||
|
.box {
|
|||
|
width: 690upx;
|
|||
|
height: 430upx;
|
|||
|
background: #FFFDFC;
|
|||
|
box-shadow: 0upx 15upx 43upx 0upx rgba(232, 215, 199, 0.29);
|
|||
|
border-radius: 24upx;
|
|||
|
margin: 0 auto;
|
|||
|
position: absolute;
|
|||
|
top: 80upx;
|
|||
|
left: 0;
|
|||
|
right: 0;
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
|
|||
|
.btn1 {
|
|||
|
/* width: 305upx; */
|
|||
|
width: 100%;
|
|||
|
height: 88upx;
|
|||
|
/* background: #096f4b; */
|
|||
|
border: 2rpx solid #CCCCCC;
|
|||
|
border-radius: 8upx;
|
|||
|
line-height: 88upx;
|
|||
|
color: #333333;
|
|||
|
font-size: 28upx;
|
|||
|
}
|
|||
|
|
|||
|
.btn2 {
|
|||
|
/* width: 305upx; */
|
|||
|
width: 100%;
|
|||
|
height: 88upx;
|
|||
|
background: #096f4b;
|
|||
|
border-radius: 8upx;
|
|||
|
line-height: 88upx;
|
|||
|
color: #FFFFFF;
|
|||
|
font-size: 28upx;
|
|||
|
}
|
|||
|
|
|||
|
.popup_pay {
|
|||
|
width: 100%;
|
|||
|
position: relative;
|
|||
|
padding-bottom: 45rpx;
|
|||
|
/* height: 160px; */
|
|||
|
/* #ifndef MP-WEIXIN */
|
|||
|
/* height: 130px; */
|
|||
|
/* #endif */
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.pay_btn {
|
|||
|
width: 90%;
|
|||
|
margin: 0 auto;
|
|||
|
text-align: center;
|
|||
|
background: #096f4b;
|
|||
|
height: 80rpx;
|
|||
|
border-radius: 16rpx;
|
|||
|
color: #ffffff;
|
|||
|
line-height: 80rpx;
|
|||
|
|
|||
|
}
|
|||
|
</style>
|