<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>