821 lines
22 KiB
Vue
821 lines
22 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-skeleton rows="1" :title="false" rowsHeight="120" :loading="loading">
|
||
<view class="Order-State radius">
|
||
<!-- 已出餐（包含已出餐部分退款） -->
|
||
<view class="content-code-Infor"
|
||
v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4">
|
||
<!-- 麦当劳/肯德基已出餐状态样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 5">
|
||
<view class="content-code-Infor-title" :style="{'color':Brand['ThemeColor']}">
|
||
请至柜台凭取餐码取餐
|
||
</view>
|
||
<view class="content-code-Infor-text" v-if="InforData['status'] == OrderStatus4">
|
||
您的退款项目将在2-4个工作日退回
|
||
</view>
|
||
<view class="content-code-Infor-text">
|
||
您的取餐码为
|
||
</view>
|
||
<view class="content-code-Infor-codelist">
|
||
<view v-for="(item,index) in InforData['codes']" class="code" :key="index">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
<view class="content-code-Infor-number">
|
||
<view class="number" :style="{'--color':Brand['ThemeColor']}">取餐手机尾号</view>
|
||
<view>{{InforData['phone_number']}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 星巴克已出餐状态 -->
|
||
<template v-if=" BrandInfor['brand_id'] == 10">
|
||
<view class="xbk-Order-status style" >
|
||
<!-- 订单状态 -->
|
||
<view class="xbk-Order-status-Title">
|
||
{{InforData['status'] | OrderState}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已经出餐 -->
|
||
<view class="xbk-Order-status-take style">
|
||
<view class="codes" v-for="(item,index) in InforData['codes']">
|
||
<view class="codes-img">
|
||
<image class="img" :src="qnyurl('Password.png','xbk')" mode=""></image>
|
||
</view>
|
||
<view class="codes-Password">
|
||
口令{{index+1}}：{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<!-- 瑞幸/奈雪已出餐 -->
|
||
<template v-if="BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
|
||
<view class="rx-Order-status-take style">
|
||
<view class="rx-Order-status-take-code">
|
||
<text class="text1">取餐码</text>
|
||
<text class="text2">{{InforData['codes'].join('')}}</text>
|
||
</view>
|
||
<view class="rx-Order-status-take-codeimg">
|
||
<img class="img" :src="InforData['qrcode']" alt="">
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
|
||
<!-- 正在出餐 -->
|
||
<view class="content-conduct" v-if="InforData['status'] == OrderStatus1">
|
||
|
||
<!-- 麦当劳/肯德基待餐状态样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 5">
|
||
<view class="content-conduct-img">
|
||
<image class="img" v-if="BrandInfor['brand_id'] == 1" :src="qnyurl('wait.png')" mode="">
|
||
</image>
|
||
<image class="img" v-if="BrandInfor['brand_id'] == 5" :src="qnyurl('wait.png','mdl')"
|
||
mode="">
|
||
</image>
|
||
<!-- <image class="img" :src="Brand['ThemeColor']" mode=""></image> -->
|
||
<view style="line-height: 80rpx;" :class="`themeColor-${BrandInfor['brand_id']}`">正在为您排队下单
|
||
请耐心等待...
|
||
</view>
|
||
<view>请您注意查收取餐码短信</view>
|
||
</view>
|
||
<view class="content-conduct-wait-text">
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
预计等待时间为2~5分钟,五分钟不出取餐码，请立即联系客服
|
||
</view>
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
请凭取餐码到店取餐
|
||
</view>
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
订单可能包含多个取餐码，请留意数量
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 星巴克/瑞幸待餐状态样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 10 || BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
|
||
<!-- 待出餐 -->
|
||
<view style="display: flex;flex-direction: column;align-items: center;"
|
||
v-if="InforData['status'] == OrderStatus1">
|
||
<image class="xbk-Order-status-Img"
|
||
:src="qnyurl(Brand()['customStyle']['OrderStatus'][`OrderStatus${InforData['status']}`],Brand()['customStyle']['OrderStatus']['http'])"
|
||
mode=""></image>
|
||
<view class="xbk-Order-status-wait">
|
||
排队下单中，请耐心等待
|
||
</view>
|
||
<view class="xbk-Order-status-Tips">
|
||
本页面可关闭，将短信通知取单号，或稍后查询我的订单
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 待支付 -->
|
||
<view class="xbk-Order-status" v-if="InforData['status'] == OrderStatus0">
|
||
<!-- 星巴克/瑞幸待餐状态样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 10 || BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
|
||
<!-- 未支付 -->
|
||
<view style="display: flex;flex-direction: column;align-items: center;">
|
||
<image class="xbk-Order-status-Img"
|
||
:src="qnyurl(Brand()['customStyle']['OrderStatus'][`OrderStatus${InforData['status']}`],Brand()['customStyle']['OrderStatus']['http'])"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="xbk-Order-status style">
|
||
<view class="xbk-Order-status-time">
|
||
剩余付款时间 {{wait_for}}
|
||
</view>
|
||
<!-- <view class="xbk-Order-status-pay" @tap="payments">
|
||
立即支付
|
||
</view> -->
|
||
<view class="xbk-Order-status-wait">
|
||
若您已支付请耐心等待商家结算
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 订单关闭 -->
|
||
<view class="close" v-if="InforData['status'] == OrderStatus5">
|
||
<view class="close-img">
|
||
<!-- 麦当劳/肯德基 -->
|
||
<template v-if="BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 5">
|
||
<image class="img" v-if="BrandInfor['brand_id'] == 1" :src="qnyurl('close.png')" mode="">
|
||
</image>
|
||
<image class="img" v-if="BrandInfor['brand_id'] == 5" :src="qnyurl('close.png','mdl')"
|
||
mode="">
|
||
</image>
|
||
<view style="line-height: 80rpx;" :class="`themeColor-${BrandInfor['brand_id']}`">订单已关闭
|
||
</view>
|
||
</template>
|
||
<!-- 星巴克/瑞幸 -->
|
||
<template v-if="BrandInfor['brand_id'] == 10 || BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
|
||
<image class="xbk-Order-status-Img"
|
||
:src="qnyurl(Brand()['customStyle']['OrderStatus'][`OrderStatus${InforData['status']}`],Brand()['customStyle']['OrderStatus']['http'])"
|
||
mode=""></image>
|
||
<view class="">
|
||
订单已关闭
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款 -->
|
||
<view class="close" v-if="InforData['status'] == OrderStatus3">
|
||
<view class="close-img">
|
||
<template>
|
||
<view style="line-height: 80rpx;" :class="`themeColor-${BrandInfor['brand_id']}`">已退款</view>
|
||
<view class="close-text" style="font-size: 28rpx;color: #999999;">订单退款将在1-3个工作日给您原路退回</view>
|
||
<view class="close-text" style="font-size: 28rpx;color: #999999;"> 给您带来的不便敬请谅解</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
<!-- 订单地址 -->
|
||
<!-- v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1" -->
|
||
<u-skeleton rows="1" :title="false" rowsHeight="80" :loading="loading">
|
||
<view class="orders radius">
|
||
<view class="title">
|
||
{{InforData['restaurant_name']}}
|
||
</view>
|
||
<view style="font-size: 22rpx;color: #777777;">
|
||
{{InforData['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
<!-- 取餐方式 -->
|
||
<!-- v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1" -->
|
||
<u-skeleton rows="1" :title="false" rowsHeight="70" :loading="loading">
|
||
<view class="orders radius">
|
||
<view class="title">
|
||
取餐方式：{{InforData['eat_type'] == 'EAT_IN'?'堂食':'外带'}}
|
||
</view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
<!-- 餐品详情 -->
|
||
<!-- v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1" -->
|
||
<u-skeleton rows="1" :title="false" rowsHeight="180" :loading="loading">
|
||
<view class="orders radius">
|
||
<view class="title">
|
||
餐品详情
|
||
</view>
|
||
<view class="orders-list">
|
||
|
||
<!-- 麦当劳/肯德基商品样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 5">
|
||
<view class="orders-list-item" :key="index" v-for="(item,index) in InforData['goods']">
|
||
<view class="orders-list-item-name">
|
||
{{item['product_name']}}
|
||
</view>
|
||
<view class="orders-list-item-pay">
|
||
￥{{RetainDecimalPoint(item['pay_price'])}}
|
||
</view>
|
||
<view class="orders-list-item-num">
|
||
x{{item['amount']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 星巴克/瑞星类型品牌商品样式 -->
|
||
<template v-if="BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 10 || BrandInfor['brand_id'] == 2">
|
||
<b-rx-commodity-item v-for="(item,index) in InforData['goods']" :item="item" :key='index'>
|
||
</b-rx-commodity-item>
|
||
</template>
|
||
|
||
</view>
|
||
<!-- 商品数量 -->
|
||
<view class="orders-list-num">
|
||
共{{length}}件
|
||
</view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
|
||
<!-- 订单详情 -->
|
||
<!-- v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1" -->
|
||
<u-skeleton rows="1" :title="false" rowsHeight="500" :loading="loading">
|
||
<view class="Infor radius">
|
||
<view class="title">
|
||
订单详情
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
下单时间
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['create_time']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
订单号
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['order_no'] || InforData['order_sn']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
联系方式
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['phone_number']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
原价
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{_amount(InforData['pay_price'] + InforData['deduction_amount_total'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
补贴卡抵扣
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{_amount(InforData['deduction_amount_total'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
实际付款
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{_amount(InforData['pay_price'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
预估佣金
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{_commission(InforData['self_commission'])}}
|
||
</view>
|
||
</view>
|
||
<view></view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
<u-skeleton rows="1" :title="false" rowsHeight="100" :loading="loading">
|
||
<!-- 友情提示 -->
|
||
<view class="Tips radius">
|
||
<view class="title">
|
||
友情提示
|
||
</view>
|
||
<view class="Tips-text">
|
||
<view class="">
|
||
1.如遇门店售罄，订单会自动为您取消并原路退款，给您带来不便敬请谅解。
|
||
</view>
|
||
<view class="">
|
||
2.如订单取消，退款将会在1个工作日内退回至您的账户；
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-skeleton>
|
||
|
||
<!-- 此处是底部按钮区域,当星巴克类型样式品牌进入订单详情之后如果当前订单没有支付会出现取消订单和立即支付按钮,会遮挡住联系客服按钮,不需要处理, -->
|
||
<view class="btn" @tap="location" :style="Brand()['customStyle']['BtnStyle'][0]">
|
||
联系客服
|
||
</view>
|
||
<view class="Unpaid" v-if="InforData['status'] == OrderStatus0">
|
||
<button class="btn btn2" @tap="cancel"
|
||
:style="Brand()['customStyle']['OrderBtnStyle']['orderbtn_0'][0]['style']">取消订单</button>
|
||
<!-- <button class="btn btn2" @tap="againpayment(InforData['order_sn'],InforData['pay_price'])" -->
|
||
<button class="btn btn2" @tap="againpaymentNew"
|
||
:style="Brand()['customStyle']['OrderBtnStyle']['orderbtn_0'][1]['style']">立即支付</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let tiem = null;
|
||
// 混入
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
// 接口请求
|
||
import {
|
||
getOrderDetail
|
||
} from '@/request/restaurant/index.js';
|
||
// 客服链接
|
||
import {
|
||
KFCSERVICE
|
||
} from '@/static/js/serviceurl.js'
|
||
export default {
|
||
mixins: [mixin, restaurantmixins],
|
||
data() {
|
||
return {
|
||
InforData: {},
|
||
order_sn: 0,
|
||
loading: true,
|
||
InitData:false
|
||
}
|
||
},
|
||
onLoad(parameter) {
|
||
if (parameter?.order) {
|
||
this['order_sn'] = parameter['order'];
|
||
}
|
||
if (parameter?.order_sn) {
|
||
this['order_sn'] = parameter['order_sn'];
|
||
}
|
||
this.GetorderInfo();
|
||
},
|
||
onShow() {
|
||
this['InitData'] && this.GetorderInfo();
|
||
this['InitData'] = true;
|
||
},
|
||
computed: {
|
||
length() {
|
||
try {
|
||
return this['InforData']['goods'].map(item => {
|
||
return item['amount'];
|
||
}).reduce((total, currentValue) => {
|
||
return total + currentValue
|
||
})
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
GetorderInfo() {
|
||
getOrderDetail({
|
||
id: this['order_sn']
|
||
}).then(data => {
|
||
if (data['data']['status'] == this['OrderStatus0']) {
|
||
this.tiem(data['data']['status'], data['data']['createtime'])
|
||
};
|
||
this['loading'] = false;
|
||
this['InforData'] = data['data'];
|
||
console.log('要对比的状态', this['OrderStatus1'])
|
||
console.log('当前订单状态', data['data']['status'])
|
||
if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this[
|
||
'OrderStatus1']) {
|
||
// tiem不等于null说明已经执行过一次了
|
||
this.GetStatus(false);
|
||
} else {
|
||
this.GetStatus(true);
|
||
console.log(tiem, '状态变更停止倒计时');
|
||
}
|
||
})
|
||
},
|
||
|
||
// 跳转客服
|
||
service() {
|
||
uni.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: KFCSERVICE,
|
||
},
|
||
corpId: 'ww4f46b491a045158c',
|
||
|
||
success(e) {
|
||
console.log(e)
|
||
},
|
||
fail(e) {
|
||
console.log(e)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 定时获取订单状态
|
||
GetStatus(clear) {
|
||
console.log('进入倒计时方法');
|
||
clearInterval(tiem);
|
||
tiem = null;
|
||
if (!clear) {
|
||
tiem = setInterval(() => {
|
||
console.log('进入倒计时')
|
||
this.GetorderInfo();
|
||
}, 10000)
|
||
}
|
||
},
|
||
|
||
// 取消订单
|
||
cancel() {
|
||
// 重新下单,再次支付均放在mixin/restaurantmixins中,唯独取消支付放在组件中是因为当用户取消订单之后需要改变列表中订单状态
|
||
cancelOrderAPI({
|
||
order_sn: this['InforData']['order_sn']
|
||
}).then(data => {
|
||
this['InforData']['status'] = 5;
|
||
})
|
||
},
|
||
|
||
// 立即支付
|
||
againpaymentNew(){
|
||
this.$Payment.Repayment({
|
||
order_sn:this['InforData']['order_sn'],
|
||
type:4,
|
||
return_url:`/pages/restaurant/order/order-details/details?order_sn=${this['InforData']['order_sn']}`,
|
||
redirect:true
|
||
});
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 页面卸载之后将定时器取消
|
||
this.GetStatus(true);
|
||
console.log(tiem, '离开页面停止倒计时');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #F6F6F6 !important;
|
||
}
|
||
|
||
|
||
|
||
.content {
|
||
padding: 32rpx;
|
||
|
||
/deep/ .u-skeleton {
|
||
margin-bottom: 20rpx;
|
||
|
||
.radius {
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.title {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
line-height: 80rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.Order-State {
|
||
padding: 32rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.content-code-Infor {
|
||
|
||
&-title {
|
||
color: #C63836;
|
||
font-size: 34rpx;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
&-text {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
text-align: center;
|
||
}
|
||
|
||
&-codelist {
|
||
font-size: 50rpx;
|
||
color: #C63836;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
// justify-content: flex-start;
|
||
font-weight: 700;
|
||
|
||
.code {
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
width: 223rpx;
|
||
}
|
||
}
|
||
|
||
&-number {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.number {
|
||
$b-color: var(--color);
|
||
line-height: 70rpx;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30%;
|
||
left: -28rpx;
|
||
// transform: translateY(-30%);
|
||
width: 230rpx;
|
||
height: 1rpx;
|
||
background-color: $b-color;
|
||
}
|
||
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30%;
|
||
right: -28rpx;
|
||
// transform: translateY(-30%);
|
||
width: 230rpx;
|
||
height: 1rpx;
|
||
background-color: $b-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.close {
|
||
&-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 89rpx;
|
||
height: 89rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
&-text {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-conduct {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 66rpx;
|
||
height: 79rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
&-wait-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
|
||
.orders-list-num {
|
||
width: 100%;
|
||
line-height: 80rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.orders {
|
||
padding: 32rpx;
|
||
background-color: #ffffff;
|
||
|
||
&-list {
|
||
overflow: hidden;
|
||
transition: all 0.5s;
|
||
border-bottom: 1rpx solid rgba(204, 204, 204, 0.3);
|
||
|
||
&-item {
|
||
line-height: 70rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $FONTSIZE28;
|
||
|
||
&-pay {
|
||
width: 200rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
&-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Infor {
|
||
padding: 0 32rpx 32rpx 32rpx;
|
||
background-color: #ffffff;
|
||
|
||
&-item {
|
||
height: 80rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&-label {
|
||
max-width: 150rpx;
|
||
min-width: 150rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Tips {
|
||
padding: 32rpx;
|
||
background-color: #ffffff;
|
||
|
||
&-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
|
||
// 星巴克订单状态头部样式
|
||
.xbk-Order-status {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&-Img {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
&-Title {
|
||
font-size: 36rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
&-time {
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
&-pay {
|
||
width: 220rpx;
|
||
height: 60rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
&-wait {
|
||
background: #F7F8FA;
|
||
border-radius: 28rpx;
|
||
padding: 15rpx 30rpx;
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
// 星巴克
|
||
&-Tips {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
// 星巴克订单完成状态
|
||
.xbk-Order-status-take {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.codes {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15rpx 0;
|
||
|
||
&-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-right: 15rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-Password {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 瑞幸订单完成状态
|
||
.rx-Order-status-take {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 15rpx 0;
|
||
|
||
&-code {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text1 {
|
||
color: #000000;
|
||
font-size: 26rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.text2 {
|
||
color: #4B6FE7;
|
||
font-size: 52rpx;
|
||
}
|
||
}
|
||
|
||
|
||
&-codeimg {
|
||
width: 234rpx;
|
||
height: 235rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Unpaid {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
|
||
.btn2 {
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin: 60rpx auto;
|
||
width: 310rpx;
|
||
height: 80rpx;
|
||
border: 1rpx solid #666666;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
border: none;
|
||
border-radius: 15rpx;
|
||
}
|
||
</style>
|