939 lines
23 KiB
Vue
939 lines
23 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 地址 -->
|
||
<div class="box_1 flex-col">
|
||
<div class="box_2 flex-row justify-between">
|
||
<div class="tag_1 flex-col" :class="`theme-Union-Class-${BrandInfor['brand_id']}-2`">
|
||
<span class="text_2" :class="`themeColor-${BrandInfor['brand_id']}`">取餐地址</span>
|
||
</div>
|
||
<span class="text_3">{{GetShopInfor['restaurant_name']}}</span>
|
||
</div>
|
||
<span class="text_4">{{GetShopInfor['restaurant_address']}}</span>
|
||
</div>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="box_3">
|
||
<text lines="1" class="text_5">餐品详情</text>
|
||
<template v-for="(item,index) in FormInfor['products']">
|
||
<view class="commodity-item" :key="index" @tap="ischoiceDiscount(index)">
|
||
<!-- 商品 -->
|
||
<view class="section_2">
|
||
<text lines="1" class="text_6">{{item['product_name']}}</text>
|
||
<view class="text-wrapper_1">
|
||
<text lines="1" class="text_7">¥</text>
|
||
<!-- <text lines="1" class="text_8">{{_amount(item['adj_pay'] * item['num'])}}</text> -->
|
||
<text lines="1" class="text_8">{{item['adj_pay'] * item['num']}}</text>
|
||
</view>
|
||
<text lines="1" class="text_9">×{{item['num']}}</text>
|
||
</view>
|
||
|
||
<view class="section_5">
|
||
<!-- <view class="text-group_1">
|
||
<text lines="1" class="text_14">可用消费补贴卡余额抵扣￥{{_amount(item['max_deduction'] * item['num'])}}</text>
|
||
<text lines="1" class="text_15" v-if="item['Discountarrcondition']" :class="`themeColor-${BrandInfor['brand_id']}`">您余额不足，实际可抵扣￥{{_amount(item['already_deduction_amount'])}}</text>
|
||
</view> -->
|
||
<!-- 肯德基 -->
|
||
<view class="triangle" v-if="BrandInfor['brand_id'] == 1" :style="{'--color':'#C63836'}"
|
||
v-show="item['is_deduction']">
|
||
</view>
|
||
<!-- 麦当劳 -->
|
||
<view class="triangle" v-if="BrandInfor['brand_id'] == 5" :style="{'--color':'#FFBC0D'}"
|
||
v-show="item['is_deduction']">
|
||
</view>
|
||
</view>
|
||
<view class="text-group_2" v-if="index == FormInfor['products']['length']-1">
|
||
<text lines="1" class="text_16">余额：￥{{ _amount(amount)}}</text>
|
||
<text lines="1" class="text_17">共{{shoptotalnum}}件</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 肯德基就餐方式 -->
|
||
<view class="box_4">
|
||
<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'?`theme-Union-Class-${BrandInfor['brand_id']}-3`:'']"
|
||
style="margin-right: 55rpx;">
|
||
<view class="text">
|
||
店内就餐
|
||
</view>
|
||
<view class="triangle" :style="{'--color':BrandInfor['brand_id'] == 1?'#C63836':'#FFBC0D'}"
|
||
v-if="FormInfor['eat_type'] == 'EAT_IN'">
|
||
</view>
|
||
</view>
|
||
<!-- 打包 -->
|
||
<view class="Way-item" @tap="FormInfor['eat_type'] = 'TAKE_AWAY'"
|
||
:class="[FormInfor['eat_type'] == 'TAKE_AWAY'?`theme-Union-Class-${BrandInfor['brand_id']}-3`:'']">
|
||
<view class="text">
|
||
打包带走
|
||
</view>
|
||
<view class="triangle" :style="{'--color':BrandInfor['brand_id'] == 1?'#C63836':'#FFBC0D'}"
|
||
v-if="FormInfor['eat_type'] == 'TAKE_AWAY'">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 手机号 -->
|
||
<view class="input-number_1">
|
||
<view class="text-wrapper_3">
|
||
<text lines="1" class="text_20">*</text>
|
||
<text lines="1" class="text_21">联系方式</text>
|
||
</view>
|
||
<view lines="1" class="text_22">
|
||
<input maxlength="11" v-model="FormInfor['phone_number']" type="text" placeholder="请填写您的手机号码">
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新增计算抵扣逻辑 -->
|
||
<view class="Commodity Commodity-Item" style="margin-bottom: 0rpx; padding-bottom: 0rpx; 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">( 余额：￥{{ computedTotal.broker_balance }} )</text>
|
||
</view>
|
||
<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_coin? true : false}"></view>
|
||
</view>
|
||
</view>
|
||
<view class="Commodity Commodity-Item" @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.coin_balance }} )</text>
|
||
</view>
|
||
<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_broker? true : false}"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view lines="1" class="text_23">*温馨提示：如遇点餐失败，1小时内自动退款</view>
|
||
|
||
<!-- 占位元素 -->
|
||
<view style="height: 158rpx;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']}">￥{{computedTotal.real_pay_price}}</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>
|
||
<text lines="1" class="text_28"></text>
|
||
<button class="button_1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap="settlement">
|
||
<text lines="1" class="text_29">结算</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 混入
|
||
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 {
|
||
createOrderNewAPI,
|
||
conWalletInfoAPI,
|
||
getPhoneAPI,
|
||
computedOfflineOrder,
|
||
createFoodOrder
|
||
} from '@/request/restaurant/index.js';
|
||
let self;
|
||
export default {
|
||
mixins: [mixin, restaurantmixins, calculationamountmixin],
|
||
data() {
|
||
return {
|
||
show: true,
|
||
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,
|
||
shoptotalnum: 0,
|
||
|
||
computedTotal: {},
|
||
use_coin: 0,
|
||
use_broker: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
self = this;
|
||
this['FormInfor']['eat_type'] = this['GetMODE'];
|
||
// 上次下单手机号
|
||
this['FormInfor']['phone_number'] = this['getPhone'];
|
||
this.init();
|
||
},
|
||
onShow() {
|
||
const value = uni.getStorageSync('isWechatStorage');
|
||
console.log(value, '微信支付完成之后的标识');
|
||
},
|
||
methods: {
|
||
init() {
|
||
// 获取当前品牌上次下单手机号
|
||
getPhoneAPI({
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
type: 4
|
||
}).then(res => {
|
||
this.SETPHONE(res['data'])
|
||
this.getCart();
|
||
}).catch(e => {
|
||
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 (this['amount'] == 0) {
|
||
// item['is_deduction'] = 0;
|
||
// } else {
|
||
// item['is_deduction'] = 1;
|
||
// }
|
||
item['is_deduction'] = 1;
|
||
// item['max_deduction'] = 300
|
||
// 抵扣金额(用于显示)
|
||
item['deduction_amount'] = 0;
|
||
// 已抵扣金额(用于逻辑计算)
|
||
item['already_deduction_amount'] = 0;
|
||
// 接口需要提交数量
|
||
item['amount'] = item['num'];
|
||
// 消费卡抵扣状态(抵扣条件)
|
||
item['Discountarrcondition'] = true;
|
||
products.push(item);
|
||
this['shoptotalnum'] += item['num'];
|
||
};
|
||
// 获取余额
|
||
console.log('初始化');
|
||
this['FormInfor']['products'] = products;
|
||
console.log(products)
|
||
// 好像是查询补贴卡的
|
||
// conWalletInfoAPI().then(res => {
|
||
// this['amount'] = res['data']['amount'];
|
||
// // this['amount'] = 76;
|
||
// 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['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.getCart()
|
||
},
|
||
|
||
isBroker() {
|
||
this.use_broker = !this.use_broker;
|
||
this.getCart()
|
||
},
|
||
|
||
/**
|
||
* @结算
|
||
* */
|
||
settlement() {
|
||
let FormInfor = JSON.parse(JSON.stringify(self['FormInfor']))
|
||
if (!FormInfor['phone_number'] || FormInfor['phone_number']['length'] < 11 || !uni.$u.test
|
||
.mobile(FormInfor['phone_number'])) {
|
||
uni.showToast({
|
||
title: '请输入正确手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
};
|
||
console.log(FormInfor['products'], 'products');
|
||
if (typeof FormInfor['products'] == 'object') {
|
||
FormInfor['products'] = JSON.stringify(FormInfor['products'])
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
console.log(FormInfor, 'FormInfor');
|
||
// return
|
||
// createOrderNewAPI(FormInfor).then(res => {
|
||
// uni.hideLoading();
|
||
// this.$Payment.H5_Payment({
|
||
// pay_price: res['data']['pay_price'],
|
||
// order_sn: res['data']['order_sn'],
|
||
// type: res['data']['type'],
|
||
// openid: res['data']['openid'],
|
||
// return_url: `/pages/restaurant/order/order-status/order-status?order_sn=${res['data']['order_sn']}`
|
||
// });
|
||
// // 支付
|
||
// // this.payment({
|
||
// // order_sn:res['data']['order_sn'],
|
||
// // type:res['data']['type'],
|
||
// // // 仅微信环境下存在参数
|
||
// // money:res['data']['money'],
|
||
// // redirect_url:`/pages/restaurant/order/order-status/order-status`
|
||
// // });
|
||
// })
|
||
|
||
FormInfor.phone = FormInfor.phone_number;
|
||
|
||
createFoodOrder(FormInfor).then(res => {
|
||
uni.hideLoading();
|
||
this.$Payment.H5_Payment({
|
||
pay_price: res['data']['pay_price'],
|
||
order_sn: res['data']['order_sn'],
|
||
type: res['data']['type'],
|
||
openid: res['data']['openid'],
|
||
return_url: `/pages/restaurant/order/order-status/order-status?order_sn=${res['data']['order_sn']}`
|
||
});
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @商品是否优惠
|
||
* */
|
||
ischoiceDiscount(index) {
|
||
let current = this['FormInfor']['products'][index];
|
||
// 当前余额为0并且用户准备勾选补贴选项则直接打断
|
||
if (this['amount'] == 0 && !current['is_deduction']) {
|
||
uni.showToast({
|
||
title: '余额不足',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
// 状态取反
|
||
current['is_deduction'] = current['is_deduction'] ? 0 : 1;
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 以下代码均从代码生成平台复制
|
||
page {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
background-color: #F6F6F6;
|
||
}
|
||
|
||
.Way-item-activation {
|
||
border: 1rpx solid $THEMECOLOR2 !important;
|
||
|
||
}
|
||
|
||
;
|
||
|
||
.triangle {
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: 40rpx solid var(--color);
|
||
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 {
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $FONTSIZE28;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.tag_1 {
|
||
background-color: rgba(255, 255, 255, 1.000000);
|
||
border: 1px solid rgba(198, 56, 54, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10rpx 6rpx;
|
||
}
|
||
|
||
.text_2 {
|
||
color: rgba(198, 56, 54, 1);
|
||
font-size: 22rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFang-SC-Bold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
padding-left: 15rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.section_2 {
|
||
width: 100%;
|
||
line-height: 40rpx;
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.section_5 {
|
||
width: 100%;
|
||
position: relative;
|
||
// height: 67rpx;
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 30rpx 0;
|
||
}
|
||
|
||
.text-group_1 {
|
||
width: 363rpx;
|
||
height: 64rpx;
|
||
margin-top: 3rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.text_14 {
|
||
width: 362rpx;
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
margin-left: 1rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
width: 301rpx;
|
||
height: 25rpx;
|
||
color: rgba(198, 56, 54, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.text-group_2 {
|
||
height: 65rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.text_16 {
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
}
|
||
|
||
.text_17 {
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.text_6 {
|
||
width: 420rpx;
|
||
min-height: 30rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFang-SC-Bold;
|
||
text-align: left;
|
||
line-height: 43rpx;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
height: 23rpx;
|
||
overflow-wrap: break-word;
|
||
font-size: 0rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
.text_7 {
|
||
width: 74rpx;
|
||
height: 23rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 22rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
.text_8 {
|
||
width: 74rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 30rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.text_9 {
|
||
color: #999999;
|
||
font-size: 30rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: justifyLeft;
|
||
white-space: nowrap;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
// 就餐方式
|
||
.box_4 {
|
||
background-color: white;
|
||
width: 750rpx;
|
||
height: 237rpx;
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 方式
|
||
.Way {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
margin-top: 32rpx;
|
||
|
||
&-item {
|
||
width: 315rpx;
|
||
height: 90rpx;
|
||
border: 1rpx solid #E3E3E3;
|
||
border-radius: 6rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: #666666;
|
||
position: relative;
|
||
|
||
.text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.text_18 {
|
||
width: 100%;
|
||
line-height: 86rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
border-bottom: 1rpx solid #E3E3E3;
|
||
}
|
||
|
||
.block_1 {
|
||
background-color: rgba(227, 227, 227, 1.000000);
|
||
width: 710rpx;
|
||
height: 1rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 29rpx 0 0 20rpx;
|
||
}
|
||
|
||
.text_19 {
|
||
width: 102rpx;
|
||
height: 25rpx;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 26rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 26rpx;
|
||
margin: 63rpx 0 62rpx 509rpx;
|
||
}
|
||
|
||
|
||
// 手机号
|
||
.input-number_1 {
|
||
background-color: white;
|
||
width: 100%;
|
||
height: 87rpx;
|
||
margin-top: 10rpx;
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
animation-fill-mode: backwards;
|
||
align-items: center;
|
||
}
|
||
|
||
.text-wrapper_3 {
|
||
width: 124rpx;
|
||
height: 27rpx;
|
||
overflow-wrap: break-word;
|
||
font-size: 0rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.text_20 {
|
||
width: 124rpx;
|
||
height: 27rpx;
|
||
color: rgba(198, 56, 54, 1);
|
||
font-size: 28rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.text_21 {
|
||
width: 124rpx;
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 28rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.text_22 {
|
||
width: 214rpx;
|
||
height: auto;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.text_23 {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
color: #999999;
|
||
font-size: $FONTSIZE24;
|
||
font-family: PingFang-SC-Medium;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
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;
|
||
left: 0;
|
||
z-index: 10;
|
||
padding: 20rpx 0rpx
|
||
}
|
||
|
||
.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-size: 0rpx;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
margin-left: 1rpx;
|
||
}
|
||
|
||
.text_24 {
|
||
width: 211rpx;
|
||
height: 27rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
}
|
||
|
||
.text_25 {
|
||
width: 211rpx;
|
||
height: 27rpx;
|
||
color: rgba(198, 56, 54, 1);
|
||
font-size: $FONTSIZE28;
|
||
font-family: PingFangSC-Semibold;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: $FONTSIZE28;
|
||
}
|
||
|
||
.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 {
|
||
background-color: rgba(198, 56, 54, 1.000000);
|
||
border-radius: 20rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 187rpx;
|
||
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;
|
||
}
|
||
|
||
|
||
|
||
|
||
// 抵扣区域样式
|
||
.discount {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 20rpx;
|
||
|
||
.Checkbox {
|
||
margin-right: 20rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border: 1rpx solid #D3D6DB;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.active-Checkbox {
|
||
border-color: var(--Checkboxborder) !important;
|
||
padding: 5rpx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
border: 3rpx solid #ffffff;
|
||
background-color: var(--Checkboxborder);
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.Deduction-amount {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.Insufficient {
|
||
color: #3672EC;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
// 商品数量/余额
|
||
.Commodity {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
padding: 32rpx;
|
||
}
|
||
</style>
|