1075 lines
27 KiB
Vue
1075 lines
27 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 页面顶部店铺信息头部 -->
|
||
<view class="head">
|
||
<b-shop-infor-head ref="b-shop-infor-head"></b-shop-infor-head>
|
||
</view>
|
||
|
||
<!-- 手机号 -->
|
||
<view class="input-number">
|
||
<view class="input-number-top">
|
||
<view class="input-number-top-title">联系方式</view>
|
||
<view class="input-number-top-Tips" :style="{color:Brand()['ThemeColor']}">用于接收订单进度，请正确填写</view>
|
||
</view>
|
||
<view class="input-number-region">
|
||
<input type="number" maxlength="11" placeholderStyle="fontSize:28rpx" style="height: 100%;" v-model="FormInfor['phone_number']" placeholder="请输入手机号">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box_4" v-if="BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
|
||
<text lines="1" class="text_18">就餐方式</text>
|
||
<view class="Way">
|
||
<!-- 在店 -->
|
||
<view class="Way-item" @tap="FormInfor['eat_type'] = 'EAT_IN'"
|
||
:class="[FormInfor['eat_type'] == 'EAT_IN'?'Way-item-activation':'']">
|
||
<view class="text">
|
||
<view class="Radio" :class="[FormInfor['eat_type'] == 'EAT_IN'?'activation-Radio':'']">
|
||
|
||
</view>
|
||
<image class="img1" :src="qnyurl('diannei.png','rx')" mode=""></image>
|
||
<text>店内就餐</text>
|
||
</view>
|
||
</view>
|
||
<!-- 打包 -->
|
||
<view class="Way-item" @tap="FormInfor['eat_type'] = 'TAKE_AWAY'"
|
||
:class="[FormInfor['eat_type'] == 'TAKE_AWAY'?'Way-item-activation':'']">
|
||
<view class="text">
|
||
<view class="Radio" :class="[FormInfor['eat_type'] == 'TAKE_AWAY'?'activation-Radio':'']">
|
||
|
||
</view>
|
||
<image class="img2" :src="qnyurl('dabao.png','rx')" mode=""></image>
|
||
<text>打包带走</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="box_3">
|
||
<text lines="1" class="text_5"> 订单详情</text>
|
||
<template v-for="(item,index) in FormInfor['products']">
|
||
<view class="Commodity-Item" @tap="ischoiceDiscount(item,index)">
|
||
<b-rx-commodity-item :item="item" :key='index'></b-rx-commodity-item>
|
||
<!-- 优惠 -->
|
||
<!-- <view class="discount" v-if="item['max_deduction'] && item['max_deduction'] > 0">
|
||
<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox':item['is_deduction']?true:false}"></view>
|
||
<view>
|
||
<view class="Deduction-amount">
|
||
可用消费补贴卡余额抵扣￥{{_amount((item['max_deduction'] != undefined?item['max_deduction']:0) * item['num'])}}
|
||
</view>
|
||
<view class="Insufficient" v-if="item['Discountarrcondition']">
|
||
您余额不足，实际可抵扣￥{{_amount(item['already_deduction_amount'])}}</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- <view class="Commodity">
|
||
<text lines="1" class="quantity">共{{shoptotalnum }}件</text>
|
||
<text lines="1" class="amount">余额：￥{{ _amount(amount)}}</text>
|
||
</view> -->
|
||
<view style="border: 120rpx; overflow: hidden">
|
||
<view class="Commodity">
|
||
<text lines="1" class="quantity">应付</text>
|
||
<text lines="1" class="amount">￥{{ YingPrice }}</text>
|
||
</view>
|
||
<!-- 新增计算抵扣逻辑 -->
|
||
<!-- <view class="Commodity Commodity-Item" style="margin-bottom: 0rpx; padding-bottom: 0rpx; padding-top: 0rpx" @click="isBroker()">
|
||
<view class="discount" style="width: 100%; display: flex; justify-content: space-between">
|
||
<view>
|
||
<text lines="1" class="quantity">余额：</text>
|
||
<text lines="1" class="amount">(￥{{ computedTotal.broker_balance }} )</text>
|
||
</view>
|
||
<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_broker? true : false}"></view>
|
||
</view>
|
||
</view> -->
|
||
<view class="Commodity Commodity-Item" style="padding-top: 0rpx;" @click="isCoin()">
|
||
<view class="discount" style="width: 100%; display: flex; justify-content: space-between">
|
||
<view>
|
||
<text lines="1" class="quantity">抵用券：</text>
|
||
<text lines="1" class="amount">(￥{{ Number(computedTotal.coin_balance) + Number(computedTotal.broker_balance)? Number(computedTotal.coin_balance) + Number(computedTotal.broker_balance) : '0.00' }} )</text>
|
||
</view>
|
||
<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_coin? true : false}"></view>
|
||
</view>
|
||
</view>
|
||
<view style="background-color: #fff; padding: 20rpx 40rpx; color: darkred; line-height: 50rpx">
|
||
<view>温馨提示</view>
|
||
<view>1、出餐后不支持退款，如需退款，请在出餐前联系客服；</view>
|
||
<view>2、 如遇点餐失败，1小时内自动退款；</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位元素 -->
|
||
<view style="height: 160px;width: 100%;"></view>
|
||
|
||
<!-- 结算 -->
|
||
<view class="block_2">
|
||
<view class="text-group_3">
|
||
<!-- <view class="text-wrapper_4 itemamount">
|
||
<text lines="1" class="text_24">原价</text>
|
||
<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">：￥{{_amount(calculationamount['prices'])}}</text>
|
||
<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">：￥{{calculationamount['prices']}}</text>
|
||
</view> -->
|
||
<view class="text-wrapper_4 itemamount">
|
||
<text lines="1" class="text_24">实际付款：</text>
|
||
<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">￥{{realPayment}}</text>
|
||
</view>
|
||
<view class="text-wrapper_4 itemamount">
|
||
<text lines="1" class="text_24">积分：</text>
|
||
<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">{{computedTotal.integral}}</text>
|
||
</view>
|
||
<!-- <view lines="1" class="text_26 itemamount">消费卡抵扣：￥{{_amount(calculationamount['Actualamounts'])}}</view> -->
|
||
<!-- <view lines="1" class="text_27 itemamount">获得佣金：￥{{_commission(commission)}}</view> -->
|
||
</view>
|
||
<text lines="1" class="text_28">提交订单</text>
|
||
<button class="button_1" :style="Brand()['customStyle']['BtnStyle'][0]" @tap="$u.debounce(settlement, 500)">
|
||
<text lines="1" class="text_29" >结算</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 确认门店信息 -->
|
||
<u-modal :show="show" title="请确认自取门店" closeOnClickOverlay @close="show = false" @confirm="confirmClick()" @cancel="show = false">
|
||
<template v-slot:default>
|
||
<view class="default-content">
|
||
<view class="location-Img">
|
||
<image class="img" :src="qnyurl('map.png','xbk')" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="shopInfor">
|
||
<view class="restaurant_name">
|
||
{{GetShopInfor['restaurant_name']}}
|
||
</view>
|
||
<view class="distance" :style="{color:Brand()['ThemeColor']}">
|
||
距离您{{GetShopInfor['distance']}}km
|
||
</view>
|
||
<view class="restaurant_address">
|
||
{{GetShopInfor['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:confirmButton>
|
||
<view class="confirmButton">
|
||
<view class="btn replace" @tap="navigateBack(2, true, 0)"
|
||
:style="{border:`2rpx solid ${Brand()['ThemeColor']}`,color:Brand()['ThemeColor']}">
|
||
更换门店
|
||
</view>
|
||
<view class="btn confirm" @tap="$u.throttle(confirmClick, 1000)" :style="Brand()['customStyle']['BtnStyle'][0]">
|
||
就是这家
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-modal>
|
||
|
||
<!-- 0元购提示信息 -->
|
||
<u-modal :show="zeroshow" title="确认订单" closeOnClickOverlay @close="zeroshow = false">
|
||
<template v-slot:default>
|
||
<view>
|
||
<view class="zero-content">
|
||
<view class="item flex">
|
||
<text>抵用券抵扣</text>
|
||
<text class="blod">
|
||
<text>-</text>
|
||
<text>{{Number(ZeroData.used_coin) + Number(ZeroData.used_broker)}}</text>
|
||
</text>
|
||
</view>
|
||
<!-- <view class="item flex">
|
||
<text>余额抵扣</text>
|
||
<text class="blod">
|
||
<text v-if="ZeroData.used_broker">-</text>
|
||
<text>{{ZeroData.used_broker}}</text>
|
||
</text>
|
||
</view> -->
|
||
<view class="know">
|
||
<view class="left">
|
||
<view class="blod">实付</view>
|
||
<view class="point" v-if="ZeroData.integral > 0">获得：{{ZeroData.integral}} 积分</view>
|
||
</view>
|
||
<view class="right blod">
|
||
￥{{realPayment}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:confirmButton>
|
||
<view class="confirmButton">
|
||
<view class="btn replace" @tap="zeroshow = false" :style="{border:`1rpx solid ${Brand()['ThemeColor']}`}">取消</view>
|
||
<view class="btn confirm" @tap="surePay" :style="Brand()['customStyle']['BtnStyle'][0]">确定</view>
|
||
</view>
|
||
</template>
|
||
</u-modal>
|
||
|
||
<view class="loading" v-show="loading"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { HTTP_REQUEST_URL } from '@/config/app.js';
|
||
// 混入
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
// 核心计算逻辑
|
||
import calculationamountmixin from '@/static/js/mixin/calculationamountmixin.js';
|
||
// 请求
|
||
import {
|
||
conWalletInfoAPI,
|
||
getPhoneAPI,
|
||
createFoodOrder
|
||
} from '@/request/restaurant/index.js';
|
||
import {
|
||
mapGetters,
|
||
} from 'vuex';
|
||
// 商品组件
|
||
import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
|
||
|
||
let self;
|
||
export default {
|
||
mixins: [mixin, restaurantmixins, calculationamountmixin],
|
||
components: {
|
||
bRxCommodityItem
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
show: false,
|
||
zeroshow: false,
|
||
FormInfor: {
|
||
// 品牌id
|
||
brand_id: 0,
|
||
// 店铺id
|
||
restaurant_id: 0,
|
||
// 店铺名
|
||
restaurant_name: '',
|
||
// 经度
|
||
lng: '',
|
||
// 纬度
|
||
lat: '',
|
||
// 店铺地址
|
||
restaurant_address: '',
|
||
// 手机号
|
||
phone_number: '',
|
||
// 是否抵扣
|
||
is_deduction: 1,
|
||
// 抵扣金额
|
||
deduction_amount_total: 0,
|
||
// 产品集合
|
||
products: [],
|
||
use_coin: 0,
|
||
use_broker: 0,
|
||
// products>product_id
|
||
// products>amount
|
||
// products>is_deduction
|
||
// products>deduction_amount
|
||
// 就餐类型
|
||
eat_type: 'EAT_IN'
|
||
},
|
||
// 账户余额
|
||
amount: 0,
|
||
// 用于先计算再赋值给amount
|
||
// amounts: 0,
|
||
// // 实际支付
|
||
// Actual_amount: 0,
|
||
// // 优惠金额
|
||
// Deduction: 0,
|
||
// 店铺信息
|
||
ShopInfor: {},
|
||
// 商品数量
|
||
shoptotalnum: 0,
|
||
|
||
computedTotal: {},
|
||
use_coin: false,
|
||
use_broker: false,
|
||
|
||
hasAssigned: false, // 标志变量
|
||
YingPrice: 0 ,// 应付
|
||
realPayment: 0, // 实际付款
|
||
ZeroData: {},
|
||
};
|
||
},
|
||
onLoad() {
|
||
self = this;
|
||
console.log(this['getPhone'],'手机号');
|
||
// 就餐类型
|
||
this['FormInfor']['eat_type'] = this['GetMODE'];
|
||
// 上次下单手机号
|
||
this['FormInfor']['phone_number'] = this['getPhone'];
|
||
},
|
||
onShow() {
|
||
this.init();
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
// 获取餐厅信息
|
||
GetShopInfor: 'shopping/GetShopInfor',
|
||
// 获取品牌Id
|
||
BrandInfor: 'shopping/BrandInfor',
|
||
}),
|
||
},
|
||
methods: {
|
||
init() {
|
||
let newobj = JSON.parse(JSON.stringify(this['GetCartList2']));
|
||
console.log(newobj);
|
||
|
||
// 获取当前品牌上次下单手机号
|
||
getPhoneAPI({
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
type:4
|
||
}).then(res=>{
|
||
this.SETPHONE(res['data'].phone)
|
||
this.getCart();
|
||
})
|
||
},
|
||
|
||
getCart() {
|
||
let products = [];
|
||
// 因为进入时暂时获取不到deepClone方法所以使用反转化
|
||
let newobj = JSON.parse(JSON.stringify(this['GetCartList2']));
|
||
for (let i = 0; i < newobj['length']; i++) {
|
||
let item = newobj[i];
|
||
// 是否抵扣
|
||
if (item['max_deduction'] > 0) {
|
||
item['is_deduction'] = 1;
|
||
} else {
|
||
item['is_deduction'] = 0;
|
||
}
|
||
// item['max_deduction'] = 300
|
||
// 抵扣金额(用于显示)
|
||
item['deduction_amount'] = 0;
|
||
// 已抵扣金额(用于逻辑计算)
|
||
item['already_deduction_amount'] = 0;
|
||
// 接口需要提交数量
|
||
item['amount'] = item['num'];
|
||
// 消费卡抵扣状态(抵扣条件)
|
||
item['Discountarrcondition'] = true;
|
||
|
||
// 修改数据格式
|
||
item['pay_price'] = item['product_price'];
|
||
|
||
// if (this['BrandInfor']['brand_id'] == 10) {
|
||
// // 星巴克计算补贴
|
||
// }
|
||
item['bt_price'] = Number(item['bt_price']);
|
||
|
||
products.push(item);
|
||
this['shoptotalnum'] += item['num'];
|
||
};
|
||
// 获取余额
|
||
console.log('初始化', newobj);
|
||
|
||
// 计算点餐金额
|
||
this['FormInfor']['use_coin'] = this.use_coin? 1 : 0;
|
||
this['FormInfor']['use_broker'] = this.use_broker? 1 : 0;
|
||
|
||
this['FormInfor']['brand_id'] = this['BrandInfor']['brand_id'];
|
||
this['FormInfor']['restaurant_id'] = this['GetShopInfor']['restaurant_id'];
|
||
this['FormInfor']['restaurant_name'] = this['GetShopInfor']['restaurant_name'];
|
||
this['FormInfor']['lat'] = this['GetShopInfor']['latitude'];
|
||
this['FormInfor']['lng'] = this['GetShopInfor']['longitude'];
|
||
this['FormInfor']['restaurant_address'] = this['GetShopInfor']['restaurant_address'];
|
||
this['FormInfor']['products'] = products;
|
||
|
||
// 佣金计算
|
||
this.computedOrder(this.FormInfor);
|
||
},
|
||
|
||
// 是否使用券
|
||
isCoin() {
|
||
this.use_coin = !this.use_coin;
|
||
this.use_broker = !this.use_broker;
|
||
this.getCart();
|
||
},
|
||
|
||
isBroker() {
|
||
this.use_broker = !this.use_broker;
|
||
this.getCart();
|
||
},
|
||
|
||
/**
|
||
* @结算
|
||
* */
|
||
settlement() {
|
||
if (!self['FormInfor']['phone_number'] || self['FormInfor']['phone_number']['length'] < 11 || !uni.$u.test.mobile(self['FormInfor']['phone_number'])) {
|
||
uni.showToast({
|
||
title: '请输入正确手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 判断如果是0元购提示弹窗
|
||
if (this.realPayment == 0) {
|
||
this['zeroshow'] = true
|
||
} else {
|
||
this['show'] = true;
|
||
}
|
||
},
|
||
|
||
// 0元确认
|
||
surePay() {
|
||
this['zeroshow'] = false;
|
||
this['show'] = true;
|
||
},
|
||
|
||
/**
|
||
* @确认
|
||
* */
|
||
confirmClick() {
|
||
this['show'] = false;
|
||
|
||
uni.showLoading({
|
||
title: '支付中...',
|
||
mask: true
|
||
});
|
||
|
||
let self = this;
|
||
let from = JSON.parse(JSON.stringify(self['FormInfor']))
|
||
if (typeof from['products'] == 'object') {
|
||
from['products'] = JSON.stringify(from['products'])
|
||
};
|
||
|
||
from.phone = from.phone_number;
|
||
from.products = JSON.parse(from.products);
|
||
|
||
// 创建订单
|
||
createFoodOrder(from).then(res => {
|
||
console.log(res.adta)
|
||
|
||
let redirect_url = '/pages/restaurant/order/order-details/details';
|
||
uni.hideLoading();
|
||
|
||
if (res.data.is_zero_pay) {
|
||
uni.showLoading({ title: '支付成功, 跳转订单页' });
|
||
setTimeout(() => {
|
||
wx.miniProgram.navigateTo({
|
||
url: `/pages/goods/order_list/index`
|
||
});
|
||
uni.hideLoading();
|
||
}, 1000)
|
||
} else {
|
||
wx.miniProgram.getEnv((wx) => {
|
||
if (wx.miniprogram) {
|
||
this.$Payment.H5TOWX_Payment({
|
||
datas: res['data'],
|
||
GetShopInfor: {
|
||
name: this.GetShopInfor.restaurant_name,
|
||
shop: this.BrandInfor.brand_name,
|
||
id: this.BrandInfor.brand_id,
|
||
},
|
||
amountInfo: {
|
||
actualpayment: this.YingPrice, // 支付总额
|
||
paymoney: this.realPayment, // 实际支付
|
||
coin_balance: this.ZeroData.used_coin, // 抵用券抵扣
|
||
broker_balance: this.ZeroData.used_broker // 余额抵扣
|
||
},
|
||
|
||
payData: from,
|
||
HeadersData: this.GetShopInfor,
|
||
shopInfo: from.products,
|
||
return_url:`/pages/restaurant/order/order-details/details?order_sn=${res.data.order_sn}`
|
||
});
|
||
}else {
|
||
//非小程序环境
|
||
const orderData = { price: this.realPayment };
|
||
window.location.href = `${HTTP_REQUEST_URL}/h5_pay/?token=${this.removeBearerPrefix(state['getters']['GetToken'])}&dat=${encodeURIComponent(JSON.stringify(res.data))}&orderData=${encodeURIComponent(JSON.stringify(orderData))}&from_type=food`;
|
||
}
|
||
})
|
||
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @商品是否优惠
|
||
* */
|
||
ischoiceDiscount(item, index) {
|
||
if (!item['max_deduction'] || item['max_deduction'] < 0) return;
|
||
uni.$u.debounce(() => {
|
||
let current = this['FormInfor']['products'][index];
|
||
// 当前余额为0并且用户准备勾选补贴选项则直接打断
|
||
if (this['amount'] == 0 && !current['is_deduction']) {
|
||
uni.showToast({
|
||
title: '余额不足',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
// 保存当前点击商品的指定数据,用于计算金额(旧值)
|
||
current['oldvalue'] = current['is_deduction'];
|
||
// 状态取反
|
||
current['is_deduction'] = current['is_deduction'] ? 0 : 1;
|
||
// 保存当前点击商品的指定数据,用于计算金额(新值)
|
||
current['newvalue'] = current['is_deduction'];
|
||
}, 500, true)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 以下代码均从代码生成平台复制
|
||
page {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
background-color: #F6F6F6;
|
||
|
||
.content {
|
||
padding: 32rpx;
|
||
|
||
// 头部
|
||
.head {
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// 手机号
|
||
.input-number {
|
||
border-radius: 15rpx 15rpx 0 0;
|
||
background-color: #ffffff;
|
||
padding: 32rpx;
|
||
|
||
&-top {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
|
||
&-title {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
&-Tips {
|
||
color: #DB9F5E;
|
||
font-size: 24rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
|
||
&-region {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.triangle {
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: 40rpx solid $THEMECOLOR2;
|
||
border-left: 40rpx solid transparent;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
|
||
&:before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 15rpx;
|
||
height: 8rpx;
|
||
background: transparent;
|
||
top: 20rpx;
|
||
right: 5rpx;
|
||
border: 2rpx solid white;
|
||
border-top: none;
|
||
border-right: none;
|
||
-webkit-transform: rotate(-50deg);
|
||
-ms-transform: rotate(-50deg);
|
||
transform: rotate(-50deg);
|
||
z-index: 9;
|
||
}
|
||
}
|
||
|
||
|
||
// 顶部地址
|
||
.box_1 {
|
||
background-color: white;
|
||
width: 100%;
|
||
height: 130rpx;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.box_2 {
|
||
width: 334rpx;
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $FONTSIZE28;
|
||
}
|
||
|
||
.tag_1 {
|
||
background-color: rgba(255, 255, 255, 1.000000);
|
||
height: $FONTSIZE28;
|
||
border: 1px solid rgba(198, 56, 54, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 102rpx;
|
||
}
|
||
|
||
.text_2 {
|
||
width: 87rpx;
|
||
height: 21rpx;
|
||
color: rgba(198, 56, 54, 1);
|
||
font-size: 22rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22rpx;
|
||
margin: 3rpx 0 0 8rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
width: 222rpx;
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFang-SC-Bold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
}
|
||
|
||
.text_4 {
|
||
width: 320rpx;
|
||
height: 23rpx;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
// 商品
|
||
.box_3 {
|
||
background-color: rgba(255, 255, 255, 1.000000);
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 32rpx;
|
||
flex-direction: column;
|
||
border-radius: 15rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.text_5 {
|
||
width: 100%;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
line-height: 86rpx;
|
||
}
|
||
|
||
.commodity-item {
|
||
padding: 25rpx 0;
|
||
border-bottom: 1rpx solid #cccccc;
|
||
}
|
||
|
||
.text-group_1 {
|
||
width: 363rpx;
|
||
height: 64rpx;
|
||
margin-top: 3rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// 就餐方式
|
||
.box_4 {
|
||
background-color: white;
|
||
width: 100%;
|
||
height: 237rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 0 0 15rpx 15rpx;
|
||
}
|
||
|
||
// 就餐方式
|
||
.Way {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
margin-top: 32rpx;
|
||
border-radius: 20rpx;
|
||
|
||
&-item {
|
||
background: #F7F8FA;
|
||
|
||
&-activation {
|
||
background: #83ACFF !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
width: 275rpx;
|
||
height: 90rpx;
|
||
border-radius: 6rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: #666666;
|
||
position: relative;
|
||
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.img1 {
|
||
width: 54rpx;
|
||
height: 46rpx;
|
||
margin: 0 15rpx;
|
||
}
|
||
|
||
.img2 {
|
||
width: 43rpx;
|
||
height: 54rpx;
|
||
margin: 0 15rpx;
|
||
}
|
||
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 50%;
|
||
// transform: translate(-50%, -50%);
|
||
.Radio {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
border: 1rpx solid #D3D6DB;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.activation-Radio {
|
||
background-color: #ffffff !important;
|
||
position: relative;
|
||
|
||
&:before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 15rpx;
|
||
height: 8rpx;
|
||
background: transparent;
|
||
border: 6rpx solid rgb(74, 111, 231);
|
||
border-top: none;
|
||
border-right: none;
|
||
-webkit-transform: rotate(-50deg);
|
||
-ms-transform: rotate(-50deg);
|
||
transform: rotate(-50deg);
|
||
z-index: 9;
|
||
top: 9rpx;
|
||
left: 7rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.text_18 {
|
||
width: 100%;
|
||
line-height: 86rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
}
|
||
|
||
// 商品样式
|
||
.Commodity-Item {
|
||
// margin-bottom: 20rpx;
|
||
padding: 32rpx 0;
|
||
// 抵扣区域样式
|
||
.discount {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 20rpx;
|
||
|
||
.Checkbox {
|
||
margin-right: 20rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border: 2rpx solid #D3D6DB;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.active-Checkbox {
|
||
border-color: var(--aftercolor) !important;
|
||
padding: 5rpx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
border-radius: 50%;
|
||
border: 3rpx solid #ffffff;
|
||
background-color: var(--aftercolor);
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
}
|
||
}
|
||
|
||
.Deduction-amount {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.Insufficient {
|
||
color: #00AF66;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品数量/余额
|
||
.Commodity {
|
||
color: #333333;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
// 结算
|
||
.block_2 {
|
||
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
|
||
background-color: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
width: 100%;
|
||
height: 210rpx;
|
||
flex-direction: row;
|
||
display: flex;
|
||
position: fixed;
|
||
bottom: 0;
|
||
font-size: 30rpx !important;
|
||
left: 0;
|
||
z-index: 10;
|
||
padding: 20rpx 10rpx;
|
||
|
||
.text-group_3 {
|
||
width: 216rpx;
|
||
// height: 81rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: space-between;
|
||
margin: 11rpx 0 0 31rpx;
|
||
}
|
||
|
||
.text-wrapper_4 {
|
||
width: 211rpx;
|
||
height: 40rpx;
|
||
overflow-wrap: break-word;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
}
|
||
.itemamount{
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.text_24 {
|
||
width: 211rpx;
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE30;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE30;
|
||
}
|
||
|
||
.text_25 {
|
||
width: 211rpx;
|
||
height: 27rpx;
|
||
color: #00AF66;
|
||
font-size: $FONTSIZE30;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE30;
|
||
}
|
||
|
||
.text_26 {
|
||
width: 216rpx;
|
||
height: 30rpx;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.text_27 {
|
||
width: 191rpx;
|
||
height: 23rpx;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
margin: 4rpx 0 0 1rpx;
|
||
}
|
||
|
||
.text_28 {
|
||
width: 110rpx;
|
||
height: 27rpx;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
margin: 65rpx 0 0 73rpx;
|
||
}
|
||
|
||
.button_1 {
|
||
width: 187rpx;
|
||
height: 80rpx;
|
||
background-color: #00AF66;
|
||
border-radius: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 14rpx 20rpx 0 113rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.text_29 {
|
||
color: #fefefe;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 确认店铺
|
||
/deep/ .u-modal__content,
|
||
/deep/ .u-modal__button-group--confirm-button {
|
||
padding: 40rpx !important;
|
||
}
|
||
|
||
.default-content {
|
||
display: flex;
|
||
|
||
.location-Img {
|
||
width: 70rpx;
|
||
height: 78rpx;
|
||
max-width: 70rpx;
|
||
max-height: 78rpx;
|
||
min-width: 70rpx;
|
||
min-height: 78rpx;
|
||
margin-right: 30rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.shopInfor {
|
||
line-height: 40rpx;
|
||
|
||
.restaurant_name {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.distance {
|
||
font-size: 26rpx;
|
||
color: #00AF66;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.restaurant_address {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.confirmButton {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.replace {
|
||
border: 1rpx solid #000;
|
||
color: #000;
|
||
}
|
||
|
||
.confirm {
|
||
background: #00AF66;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn {
|
||
width: 230rpx;
|
||
height: 86rpx;
|
||
font-size: 30rpx;
|
||
line-height: 86rpx;
|
||
text-align: center;
|
||
border-radius: 43rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.zero-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 500rpx;
|
||
font-size: 28rpx;
|
||
.item {
|
||
width: 500rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.know {
|
||
border-top: 1rpx solid gray;
|
||
padding-top: 40rpx;
|
||
width: 500rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.blod {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.loading {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #000;
|
||
opacity: .5;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
</style>
|