门店买单-提交订单
<template>
<!-- 点击门店买单---提交订单-->
<view class='store-room-submit'>
<!-- 店铺名称 -->
<view class='linee' >
<view class='line-title'>仲景酒业</view>
</view>
<!-- 金额-->
<input class='price' type='number' placeholder='输入金额' v-model='info.money' />
<pre><code><view class='line line1'>
<view class='line1-title'>使用ZJT</view>
<switch :checked='info.useQt != 0' color='#0E7519' style='transform:scale(0.7)' @change='onChangeQtCoupon' />
</view>
</code></pre>
<!-- 微信-->
<pre><code><view class='line' v-if='this.source === 'WeiXIN'' @click='() => onChoicePayWay('2')'>
<view class='line2-title'>微信</view>
<view v-if='info.payWay == 2' class='choiced'>已选择</view>
</view>
<!-- 支付宝-->
<view class='line' v-if='this.source === 'Alipay'' @click='() => onChoicePayWay('1')'>
<view class='line3-title'>支付宝</view>
<view v-if='info.payWay == 1' class='choiced'>已选择</view>
</view>
</code></pre>
<!-- 底部-->
<pre><code><view class='bottom'>
<span>待支付：<label class='price-red'>￥{{getToPayPrice()}}</label></span>
<span>抵扣：{{info.couponMoney}}</span>
<button class='btn-pay' @click='onPay'>去支付</button>
</view>
</code></pre>
</view>
</template>
<script>
import urlConfig from '../../common/config';
export default {
name: 'submit',
data() {
return {
info: {
useCoupon: 0,
// useQt: 0,
useQt: 1,
money: '',
payWay: 3,
storeId: '',
couponMoney: '',
endMoney: '',//使用现金券之后，最终传给后台的money
source: '' , // 添加一个名为sourse的属性
}
}
},
onLoad(option) {
this.info.storeId = option.storeId;
this.source = this.IsWeixinOrAlipay();
// this.info.sourse = this.IsWeixinOrAlipay();
// alert(this.source); // 输出用户来源：WeiXIN 或 Alipay 或 false
// console.log(source);
},
methods: {
//判断扫码来源
IsWeixinOrAlipay() {
var ua = window.navigator.userAgent.toLowerCase();
//判断是不是微信
if ( ua.match(/MicroMessenger/i) == 'micromessenger' ) {
//查百度找h5获取用户openid方法，无感静默
//
return 'WeiXIN';
}
//判断是不是支付宝
if (ua.match(/AlipayClient/i) == 'alipayclient') {
//查百度找h5获取用户openid方法，无感静默
return 'Alipay';
}
//哪个都不是
return '我是电脑上的浏览器';
// return 'WeiXIN';
},
//待支付
getToPayPrice() {
return this.info.money - this.info.couponMoney
},
//选择支付方式
onChoicePayWay(payWay) {
this.info.payWay = payWay;
},
onChangeQtCoupon() {
this.info.useQt = this.info.useQt == 0 ? 1 : 0;
let param = { money: this.info.money, useQt: this.info.useQt }
this.ajax.post(this.jk.mdPayCount, param).then(res => {
this.info.couponMoney = res.data.coupon;
this.info.endMoney = res.data.money;
})
},
//支付宝
onZfbPay(query) {
let endQuery = `${query}&payWay=1`;
// if(!this.common.isApp){
// let url = `${urlConfig}${this.jk.mdPay}${endQuery}`;
// location.href = url;
// }else{
// let wv = plus.webview.create('','custom-webview',{
// // plusrequire:'none', //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
// 'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
// },)
// wv.loadURL(`${urlConfig}${this.jk.mdPay}${endQuery}`)
// }
// #ifdef APP-PLUS
let wv = plus.webview.create('','custom-webview',{
// plusrequire:'none', //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
},)
wv.loadURL(`${urlConfig}${this.jk.mdPay}${endQuery}`)
//#endif
// #ifndef APP-PLUS
let url = `${urlConfig}${this.jk.mdPay}${endQuery}`;
location.href = url;
// #endif
},
//微信支付
onWxPay(query) {
let endQuery = `${query}&payWay=2`;
// if(!this.common.isApp){
// let url = `${urlConfig}${this.jk.mdPay}${endQuery}&payWay=1`;
// location.href = url;
// }else{
// let wv = plus.webview.create('','custom-webview',{
// // plusrequire:'none', //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
// 'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
// },)
// wv.loadURL(`${urlConfig}${this.jk.mdPay}${endQuery}`,{'Referer':this.common.remainName})
// }
// #ifdef APP-PLUS
let wv = plus.webview.create('','custom-webview',{
// plusrequire:'none', //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
},)
wv.loadURL(`${urlConfig}${this.jk.mdPay}${endQuery}`,{'Referer':this.common.remainName})
// #endif
// #ifndef APP-PLUS
let url = `${urlConfig}${this.jk.mdPay}${endQuery}&payWay=1`;
location.href = url;
// #endif
},
//支付
onPay() {
let token = uni.getStorageSync('token');
let query = `?token=${token}&money=${this.info.money}&useCoupon=${this.info.useCoupon}&useQt=${this.info.useQt}&payWay=${this.info.payWay}&storeId=${this.info.storeId}`;
if (this.info.useQt == 0) {//未使用现金券
if (!this.info.money) {
this.common.UshowToast('请输入金额');
} else if (this.info.payWay == 3) {
this.common.UshowToast('请选择支付宝或微信支付方式');
} else if (this.info.payWay == 1) {//支付宝
this.onZfbPay(query);
} else if (this.info.payWay == 2) {//微信
this.onWxPay(query);
} else {
this.common.UshowToast('支付有误');
}
} else {//使用优惠券
if (this.info.endMoney > 0) {
if (this.info.payWay == 3) {
this.common.UshowToast('请选择支付宝或微信支付方式');
} else if (this.info.payWay == 1) {//支付宝
this.onZfbPay(query);
} else if (this.info.payWay == 2) {//微信
this.onWxPay(query);
} else {
this.common.UshowToast('支付有误');
}
} else {//优惠券支付
this.ajax.get(this.jk.mdPay + query).then(res => {
this.common.UshowToast('支付成功');
})
}
}
}
}
}
</script>
<style lang='less'>
.store-room-submit {
background-color: #FFFFFF;
height: 100vh;
padding-top: 40rpx;
.price {
border: 1px solid #0E7519;
border-radius: 10rpx;
padding: 20rpx 20rpx;
text-align: center;
font-size: 32rpx;
margin: 0 30rpx 40rpx 30rpx;
}
.line1 {
padding: 8rpx 0 8rpx 20rpx !important;
}
.linee {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
padding: 32rpx 20rpx;
border-radius: 10rpx;
margin: 20rpx 30rpx 0 30rpx;
}
.line {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f6f6f6;
padding: 32rpx 20rpx;
border-radius: 10rpx;
margin: 20rpx 30rpx 0 30rpx;
.choiced {
background-color: red;
padding: 2rpx 10rpx;
border-radius: 5px;
color: #fff
}
.line1-title {
color: red;
font-size: 32rpx;
}
.line2-title {
color: #15801E;
font-size: 32rpx;
}
.line3-title {
color: #337AE8;
font-size: 32rpx;
}
}
.line-title {
color: #337AE8;
font-size: 50rpx;
font-weight: bold;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid #EEEEEE;
padding: 10rpx;
span {
margin-right: 20rpx;
.price-red {
color: red;
}
}
.btn-pay {
margin: 0 30rpx 0 0;
font-size: 24rpx;
background-color: #0E7519;
color: #FFFFFF;
}
}
}
</style>
<p>以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）有没有参考代码内容：你好！根据你的需求，以下是一个获取用户openid的示例代码，可以参考：</p>
<pre><code class="language-javascript">// 判断扫码来源
function IsWeixinOrAlipay() {
var ua = window.navigator.userAgent.toLowerCase();
// 判断是不是微信
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// 查百度找h5获取用户openid方法，无感静默
// ...
return 'WeiXIN';
}
// 判断是不是支付宝
if (ua.match(/AlipayClient/i) == 'alipayclient') {
// 查百度找h5获取用户openid方法，无感静默
// ...
return 'Alipay';
}
// 哪个都不是
return '我是电脑上的浏览器';
}
// 在onLoad方法中调用判断函数
onLoad(option) {
this.source = this.IsWeixinOrAlipay();
console.log(this.source); // 输出用户来源：WeiXIN 或 Alipay 或 false
}
</code></pre>
<p>请根据你的具体业务场景，替换掉判断函数中的注释部分，实现获取用户openid的逻辑。</p>
原文地址: https://www.cveoy.top/t/topic/c8WU 著作权归作者所有。请勿转载和采集!