1120 lines
20 KiB
Vue
1120 lines
20 KiB
Vue
<template>
|
|
|
|
<view class="h5Container">
|
|
<view class="cashier_logo">
|
|
<img class="cashier_logoImg" src="../../static/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">
|
|
<span class="cashier_orderTxt">订单编号:</span>
|
|
<span class="cashier_orderNumber" id="cashier_orderNumber">{{order_no}}</span>
|
|
</view>
|
|
<view class="cashier_footer" @click="getLogin" >
|
|
<view class="cashier_payBtn" id="pay-button" style="background: #e74e4e">
|
|
支付¥<span id="pay_amount">{{price}}</span>
|
|
</view>
|
|
<view class="cashier_brand">
|
|
<img class="cashier_brandImg" src="../../static/logo3.png" alt="" />
|
|
<span class="cashier_brandtxt">提供技术支持</span>
|
|
</view>
|
|
</view><!-- 超时提醒 -->
|
|
<!-- 取消支付 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list:[],
|
|
items: [{
|
|
value: '0',
|
|
name: '微信',
|
|
img: '/static/wxpay.png'
|
|
},
|
|
],
|
|
items2: [{
|
|
value: '1',
|
|
name: '支付宝',
|
|
img: '/static/alipay.png'
|
|
},
|
|
],
|
|
tk:'',
|
|
current: 0,
|
|
price:0,
|
|
order_no: '',
|
|
env:'h5',//app h5
|
|
pay_type: 0, //0微信1支付宝
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
let that = this;
|
|
var pages = getCurrentPages();
|
|
var page = pages[pages.length - 1];
|
|
const options = page.options;
|
|
// that.price = uni.getStorageSync('amt')
|
|
// that.order_no = uni.getStorageSync('no')
|
|
// that.tk = uni.getStorageSync('tk')
|
|
that.price = options.amt;
|
|
that.order_no = options.no;
|
|
if(options.env){
|
|
that.env = options.env;
|
|
}
|
|
that.tk = options.tk;
|
|
that.pay_type = 1
|
|
that.list = that.items2;
|
|
// #ifdef MP-ALIPAY
|
|
that.pay_type = 1
|
|
that.list = that.items2;
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
that.pay_type = 0
|
|
that.list = that.items;
|
|
// #endif
|
|
// #ifdef MP-H5
|
|
that.pay_type = 0
|
|
that.list = that.items;
|
|
// #endif
|
|
that.getLogin();
|
|
},
|
|
// onPullDownRefresh(opt) {
|
|
// console.log(opt,'otpssss')
|
|
// let that = this;
|
|
// that.price = opt.amt
|
|
// that.order_no = opt.no
|
|
// that.tk = opt.tk
|
|
// that.pay_type = 1
|
|
// that.list = that.items2;
|
|
// // #ifdef MP-ALIPAY
|
|
// that.pay_type = 1
|
|
// that.list = that.items2;
|
|
// // #endif
|
|
// // #ifdef MP-WEIXIN
|
|
// that.pay_type = 0
|
|
// that.list = that.items;
|
|
// // #endif
|
|
// // #ifdef MP-H5
|
|
// that.pay_type = 0
|
|
// that.list = that.items;
|
|
// // #endif
|
|
// that.getLogin();
|
|
// },
|
|
methods: {
|
|
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;
|
|
},
|
|
getPay(code) {
|
|
var appid = uni.getAccountInfoSync().miniProgram.appId;
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
});
|
|
let that = this;
|
|
uni.request({
|
|
url: 'https://store.shouyinbei.com/index.php/syt/pay/pay',
|
|
// url: 'http://sybmd.cc/index.php/channelApi/order/order-set',
|
|
method: 'POST',
|
|
data: {
|
|
price: that.price,
|
|
order_no: that.order_no,
|
|
tk:that.tk,
|
|
pay_type: that.pay_type,
|
|
code: code,
|
|
appid: appid,
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
success: (res) => {
|
|
uni.hideLoading();
|
|
if (res.data.code != 200) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: res.data.msg,
|
|
|
|
})
|
|
return false;
|
|
}
|
|
let provider = that.pay_type==1?'alipay':'wxpay'
|
|
uni.requestPayment({
|
|
provider: provider, //支付类型-固定值
|
|
// #ifdef MP-WEIXIN
|
|
timeStamp: res.data.data.payTimeStamp, // 时间戳（单位：秒）
|
|
nonceStr: res.data.data.paynonceStr, // 随机字符串
|
|
package: res.data.data.payPackage, // 固定值
|
|
signType: res.data.data.paySignType, //固定值
|
|
paySign: res.data.data.paySign, //签名
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
orderInfo: res.data.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=xcx"
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
console.log("支付失败");
|
|
// uni.navigateTo({
|
|
// url:"/pages/pay/result?payState=fail"
|
|
// })
|
|
}
|
|
});
|
|
},fail() {
|
|
uni.hideLoading();
|
|
}
|
|
})
|
|
},
|
|
getLogin(){
|
|
var that = this;
|
|
// 获取服务供应商
|
|
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.getPay(loginRes.authCode)
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
that.getPay(loginRes.code)
|
|
// #endif
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
},
|
|
|
|
|
|
onBackPress(){
|
|
let that = this;
|
|
uni.switchTab({
|
|
url: '/pages/index/index?type=1&tk='+that.tk+'&amt=' + that.price + '&no='+that.order_no,
|
|
})
|
|
},
|
|
|
|
}
|
|
</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: 50rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.cashier_logoImg {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
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_orderTxt {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.cashier_payType {
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
}
|
|
.checkout-list{
|
|
width: 90%;
|
|
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: 60rpx;
|
|
height: 60rpx;
|
|
/* margin-right: 0.5rpx; */
|
|
}
|
|
|
|
.checkout-pay-title {
|
|
margin-left: -370rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
.cashier_payTypeTitle {
|
|
padding: 20rpx 0 20rpx 20rpx;
|
|
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: 120rpx;
|
|
height: 35rpx;
|
|
margin-right: 5rpx;
|
|
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;
|
|
}
|
|
</style>
|