1293 lines
26 KiB
Vue
1293 lines
26 KiB
Vue
<template>
|
||
|
||
<view class="h5Container">
|
||
<view class="cashier_logo">
|
||
<img class="cashier_logoImg" src="../../static/sft_logo.png" alt="Logo" title="Logo" />
|
||
</view>
|
||
<view class="cashier_price">
|
||
<span>¥</span>
|
||
<span class="cashier_priceNumber" id="cashier_priceNumber">{{price}}</span>
|
||
</view>
|
||
<view class="cashier_order_store" v-if="payOrderInfo.storeName">
|
||
<span class="cashier_orderTxt">{{payOrderInfo.storeName}}</span>
|
||
</view>
|
||
<view class="cashier_order">
|
||
<span class="cashier_orderTxt">订单编号:</span>
|
||
<span class="cashier_orderNumber" id="cashier_orderNumber">{{order_no}}</span>
|
||
</view>
|
||
<view class="cashier_cashierviewider"></view>
|
||
<view class="cashier_payType">
|
||
<view class="cashier_payTypeTitle">选择支付方式</view>
|
||
<ul class="checkout-list">
|
||
<view class="uni-list">
|
||
<radio-group @change="radioChange" >
|
||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in list" :key="item.value">
|
||
<view style="width: 50%;">
|
||
<image class="checkout-payIcon" :src="item.img" mode="aspectFill" > </image>
|
||
<span class="checkout-pay-title">
|
||
{{item.name}}
|
||
</span>
|
||
</view>
|
||
<view style="width: 50%;text-align: right;">
|
||
<!-- <image src="../../static/sft_logo.png" style="width:50rpx;height: 50rpx;"> -->
|
||
<radio color="#1965FF" :value="item.value" :checked="item.value == current" />
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</ul>
|
||
</view>
|
||
<view class="cashier_footer" @click="getLogin" >
|
||
<view class="cashier_payBtn" id="pay-button" style="background: #1965FF">
|
||
支付<span id="pay_amount">¥{{price}}</span>
|
||
</view>
|
||
<view class="cashier_brand">
|
||
<img class="cashier_brandImg" src="/static/sft_logo1.png" alt="" />
|
||
<span class="cashier_brandtxt">提供技术支持</span>
|
||
</view>
|
||
</view><!-- 超时提醒 -->
|
||
<!-- 取消支付 -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { $getApiPay,$getPayOrderInfo } from '@/http/apiManager.js'
|
||
import appConfig from '../../config/appConfig';
|
||
import storageManage from '@/util/storageManage.js'
|
||
import paywayCallFunc from '@/pages/payway/payway.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list:[],
|
||
itemsList: [
|
||
{
|
||
value: 0,
|
||
name: '微信',
|
||
img: 'https://pay.rscygroup.com/cashier/static/wxpay.png'
|
||
},{
|
||
value: 1,
|
||
name: '支付宝',
|
||
img: 'https://pay.rscygroup.com/cashier/static/alipay.png'
|
||
},
|
||
],
|
||
tk:'',
|
||
current: 0,
|
||
price:0,
|
||
order_no: '',
|
||
env:'h5',//app h5
|
||
pay_type: 0, //0微信1支付宝
|
||
appid:"",//支付宝数据
|
||
aliCode:"",
|
||
payOrderInfo:{}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let that = this;
|
||
uni.setNavigationBarColor({
|
||
backgroundColor: '#ffffff',
|
||
frontColor: '#000000',
|
||
})
|
||
console.log(JSON.stringify(options),'optionsoptions')
|
||
|
||
|
||
|
||
if(appConfig.currentPageType == 'alipayLite' && options.env !='scan'){
|
||
// options = uni.getLaunchOptionsSync().query
|
||
}
|
||
if(appConfig.currentPageType == 'alipayLite'){
|
||
options = JSON.parse(uni.getStorageSync('alipayLiteRoute'))
|
||
// return uni.showToast({title: JSON.stringify(options),icon:'none',duration:60000})
|
||
}
|
||
uni.setStorageSync('payH5', JSON.stringify(options)) // 改变存储
|
||
// uni.showToast({title: "授权"+JSON.stringify(options),icon:'none',duration:3000})
|
||
console.log(options,'optionsoptionsoptions')
|
||
appConfig.payH5 = options
|
||
appConfig.itoken = options.tk
|
||
storageManage.iToken(options.tk)
|
||
appConfig.tk = options.tk
|
||
appConfig.tokenValue = options.tk
|
||
|
||
console.log(appConfig,'appConfig')
|
||
// var pages = getCurrentPages();
|
||
// var page = pages[pages.length - 1];
|
||
// const options = page.options;
|
||
that.price = options.price;
|
||
that.order_no = options.order_no;
|
||
if(options.ap){
|
||
that.appid = options.ap;
|
||
}
|
||
if(options.env){
|
||
that.env = options.env;
|
||
if(that.env =='scan'){
|
||
if((appConfig.currentPageType == 'wechatH5' || appConfig.currentPageType == 'alipayH5') && options.env == 'scan' && !appConfig.channelUserId){
|
||
location.href = appConfig.env.JEEPAY_PAY_BASE_URL+"/pages/hub/h5?tk="+options.tk+"&env="+options.env
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
that.tk = options.tk;
|
||
that.pay_type = 1
|
||
|
||
if(appConfig.currentPageType == 'alipayLite' && options.env =='scanXcx'){
|
||
this.$forceUpdate()
|
||
// return uni.showToast({title: options,icon:'none',duration:60000})
|
||
}
|
||
that.getOrderInfo()
|
||
|
||
},
|
||
mounted() {
|
||
if(appConfig.currentPageType == 'alipayH5' && that.env =='H5'){
|
||
this.loadScriptAndCallFunction();
|
||
}
|
||
},
|
||
methods: {
|
||
setPayinfo(){
|
||
let that = this;
|
||
that.list = [];
|
||
let list = [];
|
||
if(appConfig.currentPageType == 'alipayLite' || appConfig.currentPageType == 'alipayH5'){
|
||
that.pay_type = 1
|
||
list.push(that.itemsList[1]);
|
||
that.current = 1
|
||
}
|
||
|
||
if(appConfig.currentPageType == 'wechatLite' || appConfig.currentPageType == 'wechatH5'){
|
||
that.pay_type = 0
|
||
list.push(that.itemsList[0]);
|
||
that.current = 0
|
||
}
|
||
if(appConfig.currentPageType == 'otherH5'){
|
||
that.pay_type = 0
|
||
list = that.itemsList;
|
||
that.current = 0
|
||
}
|
||
for(let i =0;i<list.length;i++){
|
||
that.list.push(list[i])
|
||
}
|
||
|
||
// uni.showToast({title:JSON.stringify(that.list),duration:3000,icon:'none'})
|
||
if(appConfig.currentPageType == 'wechatH5' || appConfig.currentPageType == 'wechatLite' || appConfig.currentPageType == 'alipayLite'){
|
||
that.getLogin();
|
||
}
|
||
if(appConfig.currentPageType == 'alipayH5' && that.env == "scan"){
|
||
that.getLogin();
|
||
}
|
||
|
||
if(appConfig.currentPageType == 'alipayH5' && that.env == "h5"){
|
||
that.loadScriptAndCallFunction();
|
||
}
|
||
|
||
// if(appConfig.currentPageType == 'alipayH5'){
|
||
// that.loadScriptAndCallFunction();
|
||
// }
|
||
},
|
||
loadScriptAndCallFunction() {
|
||
console.log(1111111111111111111111)
|
||
// 动态加载外部 JavaScript 文件
|
||
const script = document.createElement('script');
|
||
script.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js'; // 假设alipayjsapi.min.js在static文件夹中
|
||
script.onload = () => {
|
||
|
||
// 脚本加载完成后调用函数
|
||
this.callApFunction();
|
||
};
|
||
document.head.appendChild(script);
|
||
},
|
||
callApFunction() {
|
||
// 调用 ap.getAuthCode() 函数
|
||
ap.getAuthCode({
|
||
appId:this.appid,
|
||
// appId:'2021002175627786',
|
||
scopes: ['auth_user']
|
||
}, (res) => {
|
||
// setPay(res.authCode)
|
||
// uni.showToast({title: "授权"+JSON.stringify(res),icon:'none'})
|
||
this.aliCode = res.authCode
|
||
this.setPay(res.authCode)
|
||
});
|
||
},
|
||
setPay(code){
|
||
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true,
|
||
duration:2000
|
||
})
|
||
// uni.showToast({title:"金额"+this.price+"请求参数"+code,duration:3000,icon:'none'})
|
||
$getApiPay(this.price,code).then( ({bizData}) => {
|
||
uni.hideLoading()
|
||
console.log(bizData,'bizDatabizDatabizDatabizData')
|
||
// uni.showToast({title:"请求"+bizData.code,duration:3000,icon:'none'})
|
||
//订单创建异常
|
||
if(bizData.code != '0') {
|
||
let msg = bizData.msg;
|
||
if(bizData.msg =='系统：Success'){
|
||
msg = '订单异常'
|
||
}
|
||
return uni.showToast({title: msg,icon:'none'})
|
||
// return toErrPageFunc(bizData.msg);
|
||
}
|
||
|
||
// 订单响应结果
|
||
let orderRes = bizData.data;
|
||
// uni.showToast({title:JSON.stringify(bizData),duration:3000,icon:'none'})
|
||
|
||
if(orderRes.orderState != 1 ) { //订单不是支付中，说明订单异常
|
||
if(orderRes.msg){
|
||
return uni.showToast({title: orderRes.msg,icon:'none'})
|
||
}else if(orderRes.errMsg){
|
||
return uni.showToast({title: orderRes.errMsg,icon:'none'})
|
||
}else{
|
||
return uni.showToast({title: '订单异常',icon:'none'})
|
||
}
|
||
// return toErrPageFunc(orderRes.errMsg);
|
||
}
|
||
if(orderRes.payUrl){
|
||
location.href = orderRes.payUrl;
|
||
return false;
|
||
}
|
||
|
||
// uni.showToast({title: JSON.stringify(this.payOrderInfo),icon:'none'})
|
||
// 以下为调起 jsapi的函数： 分为： H5 和 各端小程序
|
||
// this.getRequestPayment(orderRes)
|
||
let thisPaywayCallFunc = paywayCallFunc()[appConfig.currentPageType];
|
||
|
||
orderRes.payInfo = orderRes.payData
|
||
console.log(JSON.parse(orderRes.payInfo),'orderResorderResorderResorderRes')
|
||
thisPaywayCallFunc(orderRes, this.payOrderInfo);
|
||
}).catch( (e) => {
|
||
// uni.showToast({title:'测试',icon:'none',duration:3000})
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
getRequestPayment(data){
|
||
console.log(data,'datadata')
|
||
let that = this;
|
||
let provider = that.pay_type==1?'alipay':'wxpay'
|
||
let payData = {}
|
||
if(provider == 'wxpay'){
|
||
payData = JSON.parse(data.payData)
|
||
console.log(payData,'payDatapayDatapayData')
|
||
}
|
||
uni.requestPayment({
|
||
provider: provider, //支付类型-固定值
|
||
// #ifdef MP-WEIXIN
|
||
timeStamp: payData.payTimeStamp, // 时间戳（单位：秒）
|
||
nonceStr: payData.payNonceStr, // 随机字符串
|
||
package: payData.payPackage, // 固定值
|
||
signType: payData.paySignType, //固定值
|
||
paySign: payData.paySign, //签名
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
orderInfo: data.tradeNo,
|
||
// #endif
|
||
success: function (res) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title:res.memo
|
||
})
|
||
let showModal = this.env == 'app'?true:false;
|
||
uni.navigateTo({
|
||
url:"/pages/pay/result?pay_state=success&show_modal="+this.env
|
||
})
|
||
},
|
||
fail: function (err) {
|
||
console.log("支付失败");
|
||
// uni.navigateTo({
|
||
// url:"/pages/pay/result?payState=fail"
|
||
// })
|
||
}
|
||
});
|
||
},
|
||
getUrlParam(){
|
||
// 获取参数
|
||
var url = window.location.search;
|
||
console.log(url,'url')
|
||
// 正则筛选地址栏
|
||
// var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
|
||
// // 匹配目标参数
|
||
// var result = url.substr(1).match(reg);
|
||
// //返回参数值
|
||
// return result ? decodeURIComponent(result[2]) : null;
|
||
},
|
||
// 获取订单信息
|
||
getOrderInfo() {
|
||
let that = this
|
||
$getPayOrderInfo().then(({bizData}) => {
|
||
that.payOrderInfo = bizData
|
||
// uni.showToast({title: JSON.stringify(bizData)+"111111",icon:'none',duration:3000})
|
||
// 如果订单已支付，则转到提示页面
|
||
// if(bizData.state && bizData.state === 2) {
|
||
// return toErrPageFunc("订单已支付");
|
||
// }
|
||
|
||
// uni.showToast({title:"金额"+that.price,duration:3000,icon:'none'})
|
||
that.setPayinfo()
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
},
|
||
getLogin(){
|
||
var that = this;
|
||
// if(appConfig.currentPageType == 'alipayH5'){
|
||
// // that.setPay(that.aliCode);
|
||
// that.loadScriptAndCallFunction()
|
||
// return false;
|
||
// }
|
||
|
||
if(appConfig.currentPageType == 'wechatH5' || appConfig.currentPageType == 'alipayH5'){
|
||
// that.setPay(that.aliCode);
|
||
that.setPay(null)
|
||
return false;
|
||
}
|
||
|
||
|
||
// 获取服务供应商
|
||
uni.getProvider({
|
||
service: 'oauth',
|
||
success: function (res) {
|
||
// 获取用户登录凭证code
|
||
let provider = res.provider[0];
|
||
console.log(provider,'res.provider')
|
||
uni.login({
|
||
provider: res.provider,
|
||
success: function (loginRes) {
|
||
console.log('uniapp登录凭证登录凭证登录凭证登录凭证',loginRes);
|
||
|
||
// #ifdef MP-ALIPAY
|
||
that.setPay(loginRes.code)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
that.setPay(loginRes.code)
|
||
// #endif
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
|
||
onBackPress(){
|
||
let that = this;
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
})
|
||
},
|
||
onUnload(){
|
||
uni.switchTab({
|
||
url: '/pages/route/index?tk='+appConfig.payH5.opTk,
|
||
})
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@media only screen and (min-width: 800rpx) {
|
||
body {
|
||
font-size: 42.66666666rpx !important;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 828rpx) {
|
||
body {
|
||
font-size: 42rpx !important;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 960rpx) {
|
||
body {
|
||
font-size: 51.2rpx !important;
|
||
}
|
||
}
|
||
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
body,
|
||
html {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
}
|
||
|
||
.uni-list-cell {
|
||
justify-content: flex-start;
|
||
border-bottom:2rpx solid #e9eaeb;
|
||
}
|
||
.uni-list-cell-pd {
|
||
padding: 22rpx 30rpx;
|
||
}
|
||
.uni-list-cell {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.h5Container {
|
||
/* width: 18.75rpx; */
|
||
/* max-width: 18.75rpx; */
|
||
background: #fff;
|
||
padding-top: 100rpx;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 独立页面样式 */
|
||
.cashier_headerTitle {
|
||
color: #050505;
|
||
font-size: 10rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.cashier_cashierviewider {
|
||
height: 15rpx;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.cashier_logo {
|
||
padding-top: 40rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.cashier_logoImg {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.cashier_price {
|
||
margin-bottom: 10rpx;
|
||
color: #333;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.cashier_priceNumber {
|
||
margin-left: 20rpx;
|
||
font-family: DIN_Alternate_Bold;
|
||
font-size: 60rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cashier_payTimerpxaining {
|
||
margin-bottom: 0.3rpx;
|
||
}
|
||
|
||
.cashier_payTxt {
|
||
margin-right: 20rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.cashier_time {
|
||
color: #999;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cashier_timeItem {
|
||
padding: 10rpx;
|
||
background: rgba(0, 0, 0, 0.04);
|
||
border-radius: 10rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.cashier_timeSplit {
|
||
margin: 0 20rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.cashier_order {
|
||
font-size: 30rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #999;
|
||
}
|
||
.cashier_order_store {
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.cashier_orderTxt {
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.cashier_payType {
|
||
box-sizing: border-box;
|
||
text-align: left;
|
||
}
|
||
.checkout-list{
|
||
// width: 100%;
|
||
// margin-left: 5%;
|
||
}
|
||
|
||
.checkout-list-item {
|
||
display: none;
|
||
overflow: hidden;
|
||
padding: 20rpx 0;
|
||
border-bottom: 2rpx solid #e9eaeb;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.checkout-list-item-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
float: left;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.checkout-payIcon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
/* margin-right: 0.5rpx; */
|
||
border-radius: 50%;
|
||
margin-bottom:-6rpx ;
|
||
}
|
||
|
||
.checkout-pay-title {
|
||
// margin-left: -370rpx;
|
||
padding-left: 12rpx;
|
||
font-size: 45rpx;
|
||
}
|
||
.cashier_payTypeTitle {
|
||
padding: 20rpx 0 20rpx 0;
|
||
font-weight: 500;
|
||
margin-left: 5%;
|
||
}
|
||
|
||
.cashier_footer {
|
||
position: absolute;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 15rpx;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
.cashier_payBtn {
|
||
width: 600rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 10rpx;
|
||
background: rgb(133, 133, 133);
|
||
border-radius: 30rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: 36rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.cashier_brand {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.cashier_brandImg {
|
||
width: 142rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.cashier_brandtxt {
|
||
color: rgba(0, 0, 0, 0.45);
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
/* 底部弹出样式 */
|
||
.dialogMask {
|
||
position: absolute;
|
||
z-index: 999;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.confirmDialog {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
width: 15rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 0.2rpx;
|
||
text-align: center;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.confirmHeader {
|
||
padding: 1.55rpx 0.6rpx 0;
|
||
color: #22242e;
|
||
font-size: 0.9rpx;
|
||
line-height: 1.2rpx;
|
||
}
|
||
|
||
.confimContent {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 0.55rpx 1rpx 1.55rpx;
|
||
color: #6c6e75;
|
||
font-size: 0.7rpx;
|
||
font-weight: 400;
|
||
text-align: justify;
|
||
}
|
||
|
||
.contentTxt {
|
||
line-height: 1.05rpx;
|
||
}
|
||
|
||
.confimFooter {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 2.5rpx;
|
||
align-items: center;
|
||
border-top: 2rpx solid #eee;
|
||
}
|
||
|
||
/* .confimFooter::after {
|
||
position: absolute;
|
||
content: '';
|
||
height: 100%;
|
||
width: 2rpx;
|
||
background: #eeeeee;
|
||
left: 50%;
|
||
top: 0;
|
||
} */
|
||
|
||
.confimBtn {
|
||
display: flex;
|
||
height: 100%;
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #22242e;
|
||
font-size: 0.7rpx;
|
||
line-height: 0.95rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.leaveBtn {
|
||
position: relative;
|
||
}
|
||
|
||
.leaveBtn::after {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 2rpx;
|
||
height: 100%;
|
||
background: #eee;
|
||
content: '';
|
||
}
|
||
|
||
.payBtn {
|
||
color: #5568d5;
|
||
}
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
.show {
|
||
display: block;
|
||
}
|
||
|
||
/* 取消支付 */
|
||
.cancelMask {
|
||
position: absolute;
|
||
z-index: 9999;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.cancelMask .confirmDialog {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
width: 15rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 0.2rpx;
|
||
text-align: center;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.cancelMask .confirmHeader {
|
||
padding: 1.55rpx 0.6rpx 0;
|
||
color: #22242e;
|
||
font-size: 0.9rpx;
|
||
line-height: 1.2rpx;
|
||
}
|
||
|
||
.cancelMask .confimContent {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 0.55rpx 1rpx 1.55rpx;
|
||
color: #6c6e75;
|
||
font-size: 0.7rpx;
|
||
font-weight: 400;
|
||
text-align: justify;
|
||
}
|
||
|
||
.cancelMask .contentTxt {
|
||
line-height: 1.05rpx;
|
||
}
|
||
|
||
.cancelMask .confimFooter {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 2.5rpx;
|
||
align-items: center;
|
||
border-top: 2rpx solid #eee;
|
||
}
|
||
|
||
.cancelMask .confimFooter::after {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 2rpx;
|
||
height: 100%;
|
||
background: #eee;
|
||
content: '';
|
||
}
|
||
|
||
.cancelMask .confimBtn {
|
||
display: flex;
|
||
height: 100%;
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #22242e;
|
||
font-size: 0.7rpx;
|
||
line-height: 0.95rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.cancelMask .payBtn {
|
||
color: #5568d5;
|
||
}
|
||
|
||
/* loading */
|
||
.loadingMask {
|
||
position: absolute;
|
||
z-index: 99;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
max-width: 18.75rpx;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
border-radius: 0 0 0.2rpx 0.2rpx;
|
||
}
|
||
|
||
.loadingMask .content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
width: 15rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 0.2rpx;
|
||
box-shadow:
|
||
0 24rpx 96rpx 32rpx rgba(0, 0, 0, 0.03),
|
||
0 18rpx 56rpx 0 rgba(0, 0, 0, 0.05),
|
||
0 12rpx 32rpx -16rpx rgba(0, 0, 0, 0.08);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.loadingMask .loadingImg {
|
||
width: 1.6rpx;
|
||
height: 1.6rpx;
|
||
margin-top: 2rpx;
|
||
animation: 1.6s linear ratate infinite;
|
||
}
|
||
|
||
@keyframes ratate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(144deg);
|
||
}
|
||
|
||
80% {
|
||
transform: rotate(288deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.loadingMask .loadingTxt {
|
||
margin-top: 1.2rpx;
|
||
margin-bottom: 2rpx;
|
||
color: #22242e;
|
||
font-size: 0.7rpx;
|
||
}
|
||
|
||
/* 底部弹出收银台 */
|
||
.cashier_mask_mb16 {
|
||
margin-bottom: 0.8rpx;
|
||
}
|
||
|
||
.cashier_mask_headerTitle {
|
||
position: relative;
|
||
margin-top: 0.8rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
font-size: 0.8rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.cashier_mask_cancel {
|
||
position: absolute;
|
||
left: 0.8rpx;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
font-size: 0.7rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.cashier_mask_viewider {
|
||
height: 2rpx;
|
||
background: #eee;
|
||
}
|
||
|
||
.cashier_mask_logo {
|
||
padding-top: 1.6rpx;
|
||
margin-bottom: 0.75rpx;
|
||
}
|
||
|
||
.cashier_mask_logoImg {
|
||
max-width: 2rpx;
|
||
max-width: 10rpx;
|
||
min-height: 1.2rpx;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.cashier_mask_price {
|
||
margin-bottom: 1rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
.cashier_mask_priceNumber {
|
||
margin-left: 0.2rpx;
|
||
font-size: 1.2rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cashier_mask_payTxt {
|
||
margin-right: 0.4rpx;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.cashier_mask_time {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cashier_mask_order {
|
||
margin-bottom: 2rpx;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.cashier_mask_orderTxt {
|
||
margin-right: 0.2rpx;
|
||
}
|
||
|
||
.cashier_mask_payType {
|
||
box-sizing: border-box;
|
||
margin-bottom: 1rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.cashier_mask_payTypeTitle {
|
||
padding: 1rpx 0 1rpx 1rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cashier_mask_payTxt {
|
||
margin: 0 1rpx;
|
||
}
|
||
|
||
.cashier_mask_footer {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 1.2rpx;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
.cashier_mask_payBtn {
|
||
width: 17.15rpx;
|
||
height: 2.2rpx;
|
||
background: #0b5afe;
|
||
border-radius: 0.2rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
line-height: 2.2rpx;
|
||
}
|
||
|
||
.cashier_mask_brand {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cashier_mask_brandImg {
|
||
height: 1rpx;
|
||
margin-right: 0.2rpx;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.cashier_mask_brandtxt {
|
||
color: rgba(0, 0, 0, 0.45);
|
||
font-size: 0.6rpx;
|
||
}
|
||
|
||
.cashier_mask_content {
|
||
position: absolute;
|
||
z-index: 99;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 0.4rpx 0.4rpx 0 0;
|
||
box-shadow:
|
||
0 24rpx 96rpx 32rpx rgba(0, 0, 0, 0.03),
|
||
0 18rpx 56rpx 0 rgba(0, 0, 0, 0.05),
|
||
0 12rpx 32rpx -16rpx rgba(0, 0, 0, 0.08);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.cashier_mask_mask {
|
||
position: absolute;
|
||
z-index: 10;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
max-width: 18.75rpx;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
border-radius: 0 0 0.2rpx 0.2rpx;
|
||
}
|
||
|
||
/* page loading */
|
||
.pageLoadingMask {
|
||
position: absolute;
|
||
z-index: 99;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
width: 18.75rpx;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
}
|
||
|
||
.pageLoadingImg {
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 46%;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
animation: 1.6s linear ratate infinite;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.pageLoadingText {
|
||
position: absolute;
|
||
top: 37%;
|
||
width: 100%;
|
||
text-align: center;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 弹出层-订单页面 */
|
||
.content {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
margin-bottom: 258rpx;
|
||
}
|
||
|
||
.itemContent {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.actImg {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.address {
|
||
width: 100%;
|
||
margin-top: 40rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.contact {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
color: #818489;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.cashier_priceNumber-order {
|
||
margin-left: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.dliver {
|
||
width: 100%;
|
||
height: 20rpx;
|
||
background-color: #ecf1f4;
|
||
}
|
||
|
||
.goodsTitle {
|
||
margin-left: 40rpx;
|
||
color: #595a5b;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.orderContent {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.orderImg {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.orderLeft {
|
||
margin-left: 40rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.orderRight {
|
||
margin-right: 40rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 30rpx;
|
||
margin-right: 40rpx;
|
||
margin-bottom: 30rpx;
|
||
margin-left: 40rpx;
|
||
color: #818489;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.orderDetail {
|
||
display: flex;
|
||
height: 170rpx;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-right: 30rpx;
|
||
margin-left: 30rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.pTitle {
|
||
color: #595a5b;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.colorType {
|
||
color: #818489;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.payView {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.payPrice {
|
||
color: red;
|
||
font-size: 32rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.stepper {
|
||
display: flex;
|
||
width: 200rpx;
|
||
height: 40rpx;
|
||
flex-direction: row;
|
||
background: white;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
/* 加号和减号 */
|
||
.stepper .sign {
|
||
width: 80rpx;
|
||
float: left;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 数值 */
|
||
.stepper .number {
|
||
width: 90rpx;
|
||
height: 40rpx;
|
||
margin: 0 auto;
|
||
background-color: #ecf1f4;
|
||
color: #000;
|
||
float: left;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 普通样式 */
|
||
.sign_normal {
|
||
width: 60rpx;
|
||
color: black;
|
||
float: left;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 禁用样式 */
|
||
.sign_disabled {
|
||
width: 60rpx;
|
||
color: #ccc;
|
||
float: left;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-top: 200rpx;
|
||
margin-right: auto;
|
||
margin-bottom: 50rpx;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
color: #8f8f94;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.btnView {
|
||
display: flex;
|
||
width: 80%;
|
||
height: 66rpx;
|
||
justify-content: center;
|
||
border: #1296db solid 2rpx;
|
||
margin-top: 60rpx;
|
||
border-radius: 20rpx;
|
||
color: #366092;
|
||
line-height: 66rpx;
|
||
}
|
||
|
||
.cashier_footer {
|
||
position: fixed;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 10rpx;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.cashier_payBtn-order {
|
||
width: 226rpx;
|
||
height: 88rpx;
|
||
background: rgb(133, 133, 133);
|
||
color: rgba(255, 255, 255, 0.85);
|
||
cursor: pointer;
|
||
font-size: 32rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.footerPay {
|
||
display: flex;
|
||
width: calc(100vw - 80rpx);
|
||
height: 88rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.payPrice {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
color: red;
|
||
font-size: 24rpx;
|
||
}
|
||
#pay_amount{
|
||
padding-left: 20px;
|
||
}
|
||
</style>
|