You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
7.2 KiB
252 lines
7.2 KiB
<template>
|
|
<view>
|
|
|
|
<view class="username">
|
|
<view class="namecont font15">设备类型</view>
|
|
<picker mode="selector" style="width: 70%;" :range="serviceType" range-key="codeName"
|
|
@change="bindUserCard">
|
|
<view class=" text1 fotrt marRight10 font14" v-if="serviceName">
|
|
{{serviceName}}
|
|
</view>
|
|
<view class=" text1 fotrt marRight10 fcor666 font14" v-else>
|
|
请选择设备类型
|
|
</view>
|
|
</picker>
|
|
<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png">
|
|
</image>
|
|
</view>
|
|
|
|
<view class="username">
|
|
<view class="namecont font15">购买方式</view>
|
|
<picker mode="selector" style="width: 70%;" :range="moneyType" range-key="codeName" @change="bindUserCard1">
|
|
<view class=" text1 fotrt marRight10 font14" v-if="payName">
|
|
{{payName}}
|
|
</view>
|
|
<view class=" text1 fotrt marRight10 fcor666 font14" v-else>
|
|
请选择购买方式
|
|
</view>
|
|
</picker>
|
|
<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png">
|
|
</image>
|
|
</view>
|
|
|
|
<view class="username">
|
|
<view class="namecont">设备单价</view>
|
|
<input placeholder="请输入设备单价" v-model="unitPrice" style="width: 70%;" disabled="true"
|
|
placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
|
|
</view>
|
|
|
|
<view class="username">
|
|
<view class="namecont">设备数量</view>
|
|
<input placeholder="请输入设备数量" v-model="servienum" style="width: 70%;" disabled="true"
|
|
placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
|
|
</view>
|
|
<view class="width80 font16 mart30 fotrt fcoreb5">
|
|
支付金额: <text class="font24 margle">¥{{payPrice}}</text>
|
|
</view>
|
|
|
|
<button class="btns" @click="createDeviceOrder">确认</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getDevicePrice,
|
|
createDeviceOrder,
|
|
payOrder
|
|
} from '../../../Utils/Api.js';
|
|
let app = getApp();
|
|
// #ifdef H5
|
|
var jweixin = require('jweixin-module');
|
|
// #endif
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: app.globalData.userInfo,
|
|
// storeid: '', // 门店id
|
|
servienum: 1, // 设备数量
|
|
serviceType: [], //设备类型
|
|
moneyType: [], // 购买方式
|
|
serviceid: '', //设备id
|
|
serviceName: '', //设备名字
|
|
payid: '', //购买id
|
|
payName: '', //购买方式名字
|
|
unitPrice: 0, //支付单价
|
|
payPrice: 0 //支付金额
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.serviceType = app.globalData.Dictionaries.DEVICE_TYPE;
|
|
this.moneyType = app.globalData.Dictionaries.DEVICE_ORDER_TYPE;
|
|
},
|
|
methods: {
|
|
//查询设备单价
|
|
getDevicePrice() {
|
|
if (!this.payid) {
|
|
return;
|
|
}
|
|
if (!this.serviceid) {
|
|
return;
|
|
}
|
|
let datas = {
|
|
priceType: this.payid,
|
|
deviceType: this.serviceid
|
|
}
|
|
getDevicePrice(datas).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.unitPrice = res.return_data;
|
|
this.payPrice = res.return_data;
|
|
}
|
|
})
|
|
},
|
|
//选择设备类型
|
|
bindUserCard(e) {
|
|
this.serviceid = this.serviceType[e.target.value].codeValue;
|
|
this.serviceName = this.serviceType[e.target.value].codeName;
|
|
this.getDevicePrice();
|
|
},
|
|
//选择购买方式
|
|
bindUserCard1(e) {
|
|
this.payid = this.moneyType[e.target.value].codeValue;
|
|
this.payName = this.moneyType[e.target.value].codeName;
|
|
this.getDevicePrice();
|
|
},
|
|
//支付
|
|
createDeviceOrder() {
|
|
if (!this.serviceid) {
|
|
uni.showToast({
|
|
duration: 2000,
|
|
title: '请选择设备类型',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!this.payid) {
|
|
uni.showToast({
|
|
duration: 2000,
|
|
title: '请选择购买方式',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
let datas = {
|
|
"orderType": this.payid,
|
|
"deviceType": this.serviceid,
|
|
"deviceNum": "1"
|
|
}
|
|
createDeviceOrder(datas).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.payOrder(res.return_data.orderNo);
|
|
} else {
|
|
uni.showToast({
|
|
duration: 2000,
|
|
title: res.return_msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//获取支付参数
|
|
payOrder(item) {
|
|
let datas = {
|
|
"orderNo": item,
|
|
"openId": app.globalData.openId
|
|
}
|
|
payOrder(datas).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.payRequest(res);
|
|
}
|
|
});
|
|
},
|
|
//H5支付
|
|
payRequest: function(self) {
|
|
uni.showLoading({
|
|
title: '支付中...'
|
|
})
|
|
jweixin.config({
|
|
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
appId: self.return_data.appId, // 必填，公众号的唯一标识
|
|
timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳
|
|
nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串
|
|
signature: self.return_data.sign, // 必填，签名，见附录1
|
|
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
|
});
|
|
uni.hideLoading();
|
|
jweixin.ready(function() {
|
|
jweixin.checkJsApi({
|
|
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
|
|
success: function(res) {},
|
|
fail: function(res) {}
|
|
});
|
|
jweixin.chooseWXPay({
|
|
appId: self.return_data.appId,
|
|
timestamp: self.return_data
|
|
.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
|
|
nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位
|
|
package: self.return_data
|
|
.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
|
|
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
|
|
paySign: self.return_data.sign, // 支付签名
|
|
success: function(res) {
|
|
// 支付成功后的回调函数
|
|
uni.showToast({
|
|
title: '支付成功'
|
|
})
|
|
uni.navigateBack({})
|
|
},
|
|
cancel: function(r) {},
|
|
fail: function(res) {}
|
|
});
|
|
});
|
|
|
|
jweixin.error(function(res) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败了',
|
|
duration: 4000
|
|
});
|
|
});
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.username {
|
|
width: calc(100% - 90upx);
|
|
height: 100upx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: rgba($color: #ffffff, $alpha: 0.1);
|
|
border-bottom: 1px solid #f6f6f6;
|
|
padding: 8upx 45upx;
|
|
|
|
input {
|
|
width: 50%;
|
|
height: 50upx;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
font-weight: blod;
|
|
text-align: right;
|
|
}
|
|
|
|
.namecont {
|
|
color: #666666;
|
|
width: 28%;
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
margin-top: 200rpx;
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background-color: #0083f5;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|