1745 lines
51 KiB
Vue
1745 lines
51 KiB
Vue
<template>
|
||
<div class="settlement" :style="{ overflow: isShow ? 'hidden' : 'auto' }">
|
||
<div class="settlement-title">
|
||
<div class="settlement-yy" @click="getYy" :class="{ 'settlement-color': active === 0 }">
|
||
<i class="yy-img" :class="{ 'yy-img-active': active === 0 }"></i>
|
||
外带
|
||
</div>
|
||
<div class="settlement-ts" @click="getTs" :class="{ 'settlement-color': active === 1 }">
|
||
<i class="ts-img" :class="{ 'ts-img-active': active === 1 }"></i>
|
||
堂食
|
||
</div>
|
||
</div>
|
||
<div class="sellement-apponit-box">
|
||
<!-- v-if="active === 0" -->
|
||
<div class="sellement-apponit-unit">
|
||
<!-- class="link-type" -->
|
||
<div class="time-title">联系方式</div>
|
||
<view class="radio-box bb1">
|
||
<input style="font-size: 28rpx" type="number" placeholder="请输入联系号码" @input="bindKeyInput"
|
||
:value="phoneNumber" />
|
||
</view>
|
||
</div>
|
||
<div class="sellement-apponit-unit" v-if="active === 1 && tableNum != ''">
|
||
<!-- class="link-type" -->
|
||
<div class="time-title">就餐桌号</div>
|
||
<view class="radio-box" style="font-size: 28rpx">
|
||
{{ tableNum }}号
|
||
</view>
|
||
</div>
|
||
<!-- v-if="active === 0" -->
|
||
<div class="sellement-apponit-unit">
|
||
<div class="time-title">就餐时间</div>
|
||
<radio-group :value="radio" @change="onChangeRadio" class="radio-box bb1">
|
||
<radio style="width: 60%" class="radio-list" color="#CAA97F" :name="beExpectedTo" checked-color="#CAA97F"
|
||
@click="getRadio({ value: beExpectedTo })">
|
||
<view class="section">
|
||
<view class="picker">
|
||
预计(
|
||
<span style="color: red; font-size: 28rpx">{{
|
||
beExpectedTo ? ` ${beExpectedTo}` : "-"
|
||
}}</span>
|
||
)到达
|
||
|
||
<div style="padding-top: 10rpx">
|
||
<van-icon name="arrow" size="28rpx" color="#333" />
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</radio>
|
||
|
||
<radio style="width: 40%" class="radio-list radioCustomize" color="#CAA97F" :name="showTime"
|
||
checked-color="#CAA97F" @click="getRadio({ value: showTime })">
|
||
|
||
<picker class="customizeRef" mode="selector" :range="timeRange" :value="time" @change="bindTimeChange">
|
||
<view class="section">
|
||
<view class="picker">
|
||
{{ showTime }}
|
||
<div style="padding-top: 10rpx">
|
||
<van-icon name="arrow" size="28rpx" color="#333" />
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</radio>
|
||
</radio-group>
|
||
</div>
|
||
<div class="sellement-apponit-unit" style="position: relative">
|
||
<div class="time-title">行驶方向</div>
|
||
<radio-group :value="storeId" class="radio-box bb1">
|
||
<!-- @change="onChangeStore" -->
|
||
<label class="radio-list" v-for="(item, index) in nowStore.ShopList" :key="index">
|
||
<radio color="#CAA97F" :value="item.SERVERPARTSHOP_ID" :checked="storeId === item.SERVERPARTSHOP_ID"
|
||
@click="getFx(item)" />
|
||
<span class="radio-unit">{{ item.SHOPDIRECTION }}</span>
|
||
</label>
|
||
</radio-group>
|
||
|
||
<view class="repositioning" @click="handleAgainPosition" v-if="hideAgainIcon">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/repositioning.svg" />
|
||
</view>
|
||
</div>
|
||
<div class="sellement-apponit-unit" v-if="active === 1">
|
||
<div class="time-title">预约餐桌</div>
|
||
<radio-group :value="board" @change="onChangeIsPackage" class="radio-box bb1">
|
||
<view class="radio-list" v-for="(item, index) in boardList" :key="index">
|
||
<radio :value="item.value" color="#CAA97F" @click="getBoard(item)" />
|
||
<text class="radio-unit">{{ item.label }}</text>
|
||
</view>
|
||
</radio-group>
|
||
</div>
|
||
|
||
<div class="sellement-apponit-unit" v-if="board === 1">
|
||
<div class="time-title">就餐人数</div>
|
||
<radio-group class="radio-box bb1">
|
||
<picker mode="selector" :value="people" :range="peopleList" range-key="label" @change="handleChangePeople">
|
||
<view class="section">
|
||
<view class="picker">
|
||
{{ peopleList[people].label }}
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</radio-group>
|
||
</div>
|
||
|
||
<div class="sellement-apponit-unit" v-if="false">
|
||
<div class="time-title">是否打包</div>
|
||
<radio-group :value="isPackage" @change="onChangeIsPackage" class="radio-box bb1">
|
||
<view class="radio-list" v-for="(item, index) in packageList" :key="index">
|
||
<radio :value="item.value" color="#CAA97F" @click="getPackge(item)" />
|
||
<text class="radio-unit">{{ item.name }}</text>
|
||
</view>
|
||
</radio-group>
|
||
</div>
|
||
<div class="sellement-apponit-unit">
|
||
<span class="time-title">订单备注</span>
|
||
<view class="radio-box coupon-right" @click="goRemark">
|
||
<div class="coupon-remark">{{ remark || "口味、偏好" }}</div>
|
||
<van-icon name="arrow" size="28rpx" custom-style="margin-left:12rpx;" color="#999" />
|
||
</view>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sellement-apponit-box">
|
||
<div class="time-title bb1">订单信息</div>
|
||
<!-- <div class="order-title">订单信息</div> -->
|
||
<div class="order-list" v-for="(item, i) in shopOrder" :key="i">
|
||
<div class="order-name">
|
||
{{
|
||
item.COMMODITY_RULE
|
||
? item.COMMODITY_NAME + "(" + item.COMMODITY_RULE + ")"
|
||
: item.COMMODITY_NAME
|
||
}}
|
||
</div>
|
||
<div class="order-num">x{{ item.ORDER_COUNT }}</div>
|
||
<div class="order-price">￥{{ item.AVERAGE_PRICE }}</div>
|
||
</div>
|
||
<div style="width: 100%; height: 1px; background: #ededed"></div>
|
||
<!-- <hr /> -->
|
||
<div class="price-sum">
|
||
<div class="coupon" @click="goCoupon" v-if="couponCout > 0">
|
||
<span class="coupon-title">优惠券</span>
|
||
<div class="coupon-right">
|
||
<div :class="{
|
||
priceColor: couponAmount,
|
||
'icon-coupon': couponAmount === 0,
|
||
}">
|
||
{{ couponAmount > 0 ? "-￥" + couponAmount : "" }}
|
||
</div>
|
||
<van-icon name="arrow" size="28rpx" custom-style="margin-left:12rpx;" color="#999" />
|
||
</div>
|
||
</div>
|
||
<div class="coupon" v-if="packageAmount > 0">
|
||
<span class="coupon-title">打包费</span>
|
||
<span class="pay-price">￥{{ packageAmount }}</span>
|
||
</div>
|
||
<div class="coupon">
|
||
<span class="coupon-title">合计</span>
|
||
<span class="pay-price">￥{{ orderAmount }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="coupon sellement-apponit-box" @click="goRemark" >
|
||
<span class="coupon-title">备注</span>
|
||
<div class="coupon-right">
|
||
<div class="coupon-remark">{{remark||'口味、偏好'}}</div>
|
||
<van-icon name="arrow" size="28rpx" custom-style="padding-top:16rpx;margin-left:12rpx;" color="#999"/>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="go-pay">
|
||
<div class="pay-left">
|
||
还需支付<span class="pay-price"><span style="font-size: 28rpx">￥</span>{{ orderAmount }}</span>
|
||
</div>
|
||
<div class="pay-right" @click="goPayMent">去支付</div>
|
||
</div>
|
||
<UniPopup :show="isShow" position="bottom" overlay="false" @close="onClose">
|
||
<div class="bottom-box">
|
||
<div class="bottom-pop-title">确认支付方式</div>
|
||
<div class="bottom-content">
|
||
<van-radio-group :value="cardPay.payType" @change="changePayType">
|
||
<van-radio name="余额支付" checked-color="#CAA97F" class="bottom-radio" :disabled="!cardPay.canCardPay">
|
||
<span :class="{ disable: !cardPay.canCardPay }">余额支付<span style="font-size: 24rpx">{{
|
||
" (剩余:￥" +
|
||
cardPay.amount +
|
||
") " +
|
||
(!cardPay.canCardPay ? cardPay.reason : "")
|
||
}}</span></span>
|
||
</van-radio>
|
||
<van-radio name="微信支付" checked-color="#CAA97F" class="bottom-radio">
|
||
<span class="">微信支付</span>
|
||
</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
|
||
<div class="bottom-btn" @click="createOrder">立即付款</div>
|
||
</div>
|
||
</UniPopup>
|
||
|
||
<UniPopup :show="payShow" position="bottom" overlay="false" ref="payPopup" @close="handlePayClose"
|
||
:safe-area="false">
|
||
<div class="payShowBox">
|
||
<div class="payBoxTitle">支付方式</div>
|
||
|
||
<div class="payList">
|
||
<radio-group :value="payType" class="radio-group">
|
||
<!-- <div
|
||
class="bottom-radio"
|
||
color="#CAA97F"
|
||
@click="handleChangePayType(1)"
|
||
>
|
||
<div class="radioLeft">
|
||
<div class="logoBox">
|
||
<image
|
||
class="logoIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/alipayIcon.png"
|
||
/>
|
||
</div>
|
||
<text>支付宝支付</text>
|
||
</div>
|
||
<radio
|
||
value="支付宝支付"
|
||
color="#CAA97F"
|
||
:checked="payType === 1"
|
||
/>
|
||
</div> -->
|
||
<div class="bottom-radio" color="#CAA97F" @click="handleChangePayType(2)">
|
||
<div class="radioLeft">
|
||
<div class="logoBox">
|
||
<image class="logoIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/wxPay.png" />
|
||
</div>
|
||
<text>微信支付</text>
|
||
</div>
|
||
<radio value="微信支付" color="#CAA97F" :checked="payType === 2" />
|
||
</div>
|
||
</radio-group>
|
||
</div>
|
||
|
||
<div class="goPayBox" @click="handleRealGoPay">
|
||
<div class="goPay">确认支付</div>
|
||
</div>
|
||
</div>
|
||
</UniPopup>
|
||
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
||
import CustomLoading from "../../../components/customLoading.vue";
|
||
import timeList from './timeRangeList'
|
||
export default {
|
||
data() {
|
||
let newM = new Date().getTime();
|
||
let startT = newM + 1000 * 60 * 15;
|
||
return {
|
||
start: this.$utils.getLocalTime(startT, "hh:mm"),
|
||
end: "23:59",
|
||
// time: this.$utils.getLocalTime(startT, "hh:mm"),
|
||
time: 0,
|
||
startT: this.$utils.getLocalTime(new Date(), "hh:mm"),
|
||
timeRange: timeList,
|
||
remark: "", // 备注
|
||
doorId: "",
|
||
storeId: "", // 门店id
|
||
active: 0,
|
||
radio: 0,
|
||
radio2: "",
|
||
radioType: 10,
|
||
type: 2000, // 判断预约还是堂食
|
||
showTime: "自定义",
|
||
beExpectedTo: "-", // 预计时间
|
||
phoneNumber: "",
|
||
// tableNum: "",
|
||
deteTime: [
|
||
// {
|
||
// name: '10分钟后到店',
|
||
// value: 10
|
||
// },
|
||
// {
|
||
// name: '20分钟后到店',
|
||
// value: 20
|
||
// },
|
||
{
|
||
name: "30分钟后到店",
|
||
value: 30,
|
||
},
|
||
],
|
||
packageList: [
|
||
{
|
||
name: "是",
|
||
value: 2000,
|
||
},
|
||
{
|
||
name: "否",
|
||
value: 1000,
|
||
},
|
||
],
|
||
isShow: false,
|
||
isPackage: 1000,
|
||
cardPay: {
|
||
payType: "余额支付", // 用户支付方式
|
||
reason: "",
|
||
canCardPay: true, // 是否可以余额支付
|
||
amount: "", // 实业饭卡余额
|
||
},
|
||
shopOrder: [],
|
||
shopList: [], // 方向列表
|
||
selectShop: 0, // 造死的假数据 默认拿一个方向 它点个定位就让它选择到死的数据上
|
||
yyTime: "",
|
||
provinceCode: "",
|
||
couponCout: 0, // 可用优惠券数量
|
||
orderNumber: "", // 订单号
|
||
orderInternal: "", // 订单内码
|
||
payShow: false, // 支付方式的悬浮框
|
||
payType: 2, // 1 支付宝 2 微信
|
||
loginType: "", //
|
||
currentOrderDetail: {}, // 当前订单的数据
|
||
SERVERPART_ID: "", // 当前的服务区id
|
||
seat: {}, // 当前经纬度数据
|
||
board: "", // 是否预约餐桌
|
||
boardList: [
|
||
{ label: "是", value: 1 },
|
||
{ label: "否", value: 2 },
|
||
],
|
||
peopleList: [
|
||
{ label: "1人", value: "1人" },
|
||
{ label: "2人", value: "2人" },
|
||
{ label: "3人", value: "3人" },
|
||
{ label: "4人", value: "4人" },
|
||
{ label: "5人及以上", value: "5人及以上" },
|
||
],
|
||
people: 0,
|
||
peopleStr: "", // 人数的具体
|
||
hideAgainIcon: true, // 是否显示重新定位
|
||
isLoading: false,
|
||
};
|
||
},
|
||
components: {
|
||
UniPopup,
|
||
CustomLoading,
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
tableNum: "orderTable",
|
||
orderRemark: "orderRemark",
|
||
// provinceCode: 'provinceCode',
|
||
couponPrice: "couponPrice",
|
||
nowStore: "nowStore",
|
||
}),
|
||
packageAmount() {
|
||
// 打包费
|
||
let amount = 0;
|
||
if (this.isPackage === 2000) {
|
||
this.shopOrder.map((n) => {
|
||
amount += n.ORDER_COUNT;
|
||
});
|
||
return amount;
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
couponAmount() {
|
||
// 优惠金额
|
||
if (this.couponPrice) {
|
||
if (this.couponPrice.CouponType === 2000) {
|
||
// 折扣券
|
||
return (1 - this.couponPrice.UseAmount) * this.couponOrder;
|
||
} else {
|
||
// 满减券
|
||
return this.couponPrice.UseAmount;
|
||
}
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
couponOrder() {
|
||
// 商品金额
|
||
let amount = 0;
|
||
this.shopOrder.map((v) => {
|
||
amount += v.ORDER_AMOUNT;
|
||
});
|
||
return amount;
|
||
},
|
||
orderAmount() {
|
||
// 支付金额
|
||
let _this = this;
|
||
this.remark = this.orderRemark;
|
||
let coast =
|
||
_this.couponOrder - Number(this.couponAmount) + this.packageAmount;
|
||
return coast > 0 ? Math.round(coast * 100) / 100 : 0;
|
||
},
|
||
},
|
||
methods: {
|
||
// 显示默认时间
|
||
getDefaultTime() {
|
||
let nowTime = new Date().getTime()
|
||
let date = new Date()
|
||
let y = new Date().getFullYear()
|
||
let m = new Date().getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let d = new Date().getDate()
|
||
if (d < 10) {
|
||
d = '0' + d
|
||
}
|
||
|
||
let now = 0
|
||
timeList.forEach((item, index) => {
|
||
let thisTime = new Date(`${y}-${m}-${d} ${item}`).getTime()
|
||
if (nowTime > thisTime) {
|
||
now = index + 1
|
||
}
|
||
})
|
||
console.log('nownownow', now);
|
||
this.time = now
|
||
},
|
||
// 修改人数
|
||
handleChangePeople(e) {
|
||
console.log("e", e);
|
||
this.people = Number(e.detail.value);
|
||
this.peopleStr = this.packageList[this.people].label;
|
||
},
|
||
async handleAgainPosition() {
|
||
// uni.showLoading({
|
||
// title: "更新位置信息...",
|
||
// });
|
||
this.isLoading = true;
|
||
let _this = this;
|
||
await new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
console.log("handleAgainPosition", _this.nowStore);
|
||
|
||
_this.storeId = _this.nowStore.ShopList && _this.nowStore.ShopList.length > 1 ? _this.nowStore.ShopList[1].SERVERPARTSHOP_ID : _this.nowStore.ShopList[0].SERVERPARTSHOP_ID
|
||
console.log("_this.storeId ", _this.storeId);
|
||
_this.hideAgainIcon = false;
|
||
_this.isLoading = false;
|
||
_this.$forceUpdate();
|
||
// uni.hideLoading();
|
||
}, 2000);
|
||
});
|
||
|
||
// await this.handleGetRealPosition();
|
||
},
|
||
// 拿到当前的服务区信息 去 计算一下 当前位置距离 服务区还有多远
|
||
async handleGetServerPart() {
|
||
// uni.showLoading({
|
||
// title: "查询当前服务区信息...",
|
||
// });
|
||
this.isLoading = true;
|
||
const req = {
|
||
ServerpartId: this.SERVERPART_ID,
|
||
};
|
||
|
||
const detail = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartInfo",
|
||
req
|
||
);
|
||
console.log("detail", detail);
|
||
let detailObj = detail.Result_Data;
|
||
this.handleGetDistance(detailObj);
|
||
|
||
// uni.hideLoading();
|
||
this.isLoading = false;
|
||
},
|
||
// 用高德api去算 当前位置距离 服务区还有多远 要多长时间
|
||
async handleGetDistance(obj) {
|
||
// uni.showLoading({
|
||
// title: "计算预计时间...",
|
||
// });
|
||
this.isLoading = true;
|
||
let _this = this;
|
||
const key = "6e96a801bcea5290d3dcbf100358a6b3"; // 在高德开发者平台申请
|
||
// 出发点
|
||
let origin = `${this.seat.longitude},${this.seat.latitude}`;
|
||
// 目的地
|
||
let destination = `${obj.SERVERPART_X},${obj.SERVERPART_Y}`;
|
||
|
||
const url = `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${origin}&destination=${destination}&strategy=20&extensions=all`;
|
||
await uni.request({
|
||
url,
|
||
success: (res) => {
|
||
console.log("handleGetDistance", res);
|
||
let obj = res.data;
|
||
// 秒为结果
|
||
let arriveTime =
|
||
obj.route.paths && obj.route.paths.length > 0
|
||
? obj.route.paths[0].duration
|
||
: "";
|
||
console.log("arriveTime", arriveTime);
|
||
if (arriveTime) {
|
||
let nowTime = Date.now();
|
||
|
||
let arriveDate = new Date(nowTime + arriveTime * 1000);
|
||
let hour = arriveDate.getHours();
|
||
let min = arriveDate.getMinutes();
|
||
console.log("hour", hour);
|
||
console.log("min", min);
|
||
_this.beExpectedTo = `${hour < 10 ? "0" + hour : hour}:${min < 10 ? "0" + min : min
|
||
}`;
|
||
_this.$forceUpdate()
|
||
}
|
||
},
|
||
fail: (error) => { },
|
||
});
|
||
// uni.hideLoading();
|
||
this.isLoading = false;
|
||
},
|
||
// 获取用户当前位置
|
||
handleGetRealPosition() {
|
||
let _this = this;
|
||
// uni.showLoading({
|
||
// title: "更新位置...",
|
||
// });
|
||
this.isLoading = true;
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
altitude: true,
|
||
isHighAccuracy: true,
|
||
success: async (res) => {
|
||
console.log("rewrwqerwq", res);
|
||
let seatInfo = {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
};
|
||
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
|
||
// _this.seat = seatInfo;
|
||
_this.seat = seatInfo;
|
||
|
||
// let latitude = res.latitude;
|
||
// let longitude = res.longitude;
|
||
// await _this.handleGetNearService(latitude, longitude);
|
||
|
||
_this.handleGetServerPart();
|
||
_this.isLoading = false;
|
||
// uni.hideLoading();
|
||
},
|
||
fail: async (err) => {
|
||
console.log("err", err);
|
||
_this.isLoading = false;
|
||
},
|
||
});
|
||
},
|
||
// 陀螺仪数据
|
||
handleGetGyroscope() {
|
||
uni.onGyroscopeChange((res) => {
|
||
console.log("gyroData.rotationRate.x = " + res.x);
|
||
console.log("gyroData.rotationRate.y = " + res.y);
|
||
console.log("gyroData.rotationRate.z = " + res.z);
|
||
});
|
||
uni.startGyroscope({
|
||
interval: "normal",
|
||
success(res) {
|
||
console.log("success", res);
|
||
},
|
||
fail(error) {
|
||
console.log("fail", error);
|
||
},
|
||
});
|
||
},
|
||
// 确认支付
|
||
async handleRealGoPay() {
|
||
if (this.loginType === "android") {
|
||
uni.showToast({
|
||
title: "备案上架后，才可使用...",
|
||
icon: "none",
|
||
});
|
||
|
||
if (this.payType === 1) {
|
||
// uni.showModal({
|
||
// title: "确认跳转支付宝？",
|
||
// content: "点击确认将自动跳转到支付宝付款码页面",
|
||
// confirmText: "确认",
|
||
// cancelText: "取消",
|
||
// success: function (res) {
|
||
// plus.runtime.openURL(
|
||
// `alipayqr://platformapi/startapp?saId=20000056`
|
||
// );
|
||
// },
|
||
// });
|
||
} else if (this.payType === 2) {
|
||
// uni.showModal({
|
||
// title: "确认跳转微信？",
|
||
// content: "跳转后点击首页右上角-->首付款",
|
||
// confirmText: "确认",
|
||
// cancelText: "取消",
|
||
// success: function (res) {
|
||
// plus.runtime.openURL(`weixin://`);
|
||
// },
|
||
// });
|
||
let _this = this;
|
||
let detailObj = _this.currentOrderDetail;
|
||
|
||
// 拿到签名
|
||
let mchid = "1707624624"; // 商户号
|
||
let timeStamp = Math.ceil(new Date().getTime() / 1000); // 随机的时间戳 秒为单位
|
||
let nonceStr = Math.random().toString(36).substring(2, 8); // 随机字符串
|
||
let serial_no = "5904E3BF9EDC8B2AA3F99E51440B34FB7FFA6EDA"; // 证书序列号
|
||
let out_trade_no = detailObj.SALEBILL_CODE; // 本地生成的订单编码
|
||
|
||
let req = {
|
||
appid: "wx4c497eddcec4a0e7", // 小程序的id
|
||
mchid: mchid, // 商户号
|
||
description: "安徽省驿达高速公路服务区经营管理有限公司", // 微信支付上面会显示付款给谁的名称
|
||
out_trade_no: out_trade_no, // 商户订单号
|
||
notify_url:
|
||
"https://mp.eshangtech.com/Coop.Merchant/Handler/Handler_Trade.ashx", // 商户回调地址
|
||
amount: {
|
||
total: Number(_this.orderAmount) * 100 || 1, // 多少钱 分为单位所以乘了100
|
||
currency: "CNY", // 人民币的标识
|
||
}, // 订单金额
|
||
payer: {
|
||
openid: _this.user.WECHATAPP_OPENID,
|
||
}, // 支付者信息
|
||
};
|
||
// 生成请求头签名的参数
|
||
let reqSign = {
|
||
parameters:
|
||
"POST\n/v3/pay/transactions/jsapi\n" +
|
||
timeStamp +
|
||
"\n" +
|
||
nonceStr +
|
||
"\n" +
|
||
JSON.stringify(req) +
|
||
"\n",
|
||
provinceCode: _this.provinceCode || "340000",
|
||
};
|
||
|
||
const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
|
||
let Authorization = `mchid="${mchid}",nonce_str="${nonceStr}",signature="${data.Result_Data}",timestamp="${timeStamp}",serial_no="${serial_no}"`;
|
||
let AuthorizationStr = `WECHATPAY2-SHA256-RSA2048 ${Authorization}`; // 请求头中的一个参数
|
||
|
||
uni.request({
|
||
url: "https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
Authorization: AuthorizationStr,
|
||
Accept: "application/json", //自定义请求头信息
|
||
"Content-Type": "application/json",
|
||
},
|
||
success: async (res) => {
|
||
let paySign = "";
|
||
let reqSign = {
|
||
parameters:
|
||
"wx4c497eddcec4a0e7\n" +
|
||
timeStamp +
|
||
"\n" +
|
||
nonceStr +
|
||
"\nprepay_id=" +
|
||
res.data.prepay_id +
|
||
"\n",
|
||
provinceCode: _this.provinceCode || "340000",
|
||
};
|
||
// 支付的签名
|
||
const data = await _this.$api.$get(
|
||
"/WeChat/GenerateSign",
|
||
reqSign
|
||
);
|
||
paySign = data.Result_Data;
|
||
|
||
console.log("dsadas", paySign);
|
||
|
||
uni.requestPayment({
|
||
provider: "wxpay",
|
||
orderInfo: {
|
||
appid: "wx4c497eddcec4a0e7", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
|
||
noncestr: nonceStr, // 随机字符串
|
||
package: `Sign=WXPay`, // 固定值
|
||
partnerid: mchid, // 微信支付商户号
|
||
prepayid: res.data.prepay_id, // 统一下单订单号
|
||
timestamp: timeStamp, // 时间戳（单位：秒）
|
||
sign: paySign, // 签名，这里用的 MD5/RSA 签名
|
||
},
|
||
success(Payres) {
|
||
console.log("Payres", Payres);
|
||
},
|
||
fail(e) {
|
||
console.log("e", e);
|
||
},
|
||
complete(payres) {
|
||
// _this.isMakeOrdering = false;
|
||
// uni.redirectTo({
|
||
// url: `/pages/orders/orderdetail/index?orderInternal=${detailObj.SALEBILL_ID}`,
|
||
// });
|
||
},
|
||
});
|
||
},
|
||
});
|
||
}
|
||
} else if (this.loginType === "min") {
|
||
}
|
||
},
|
||
// 改变支付方式
|
||
handleChangePayType(value) {
|
||
this.payType = value;
|
||
},
|
||
|
||
// 是否打包
|
||
onChangeIsPackage(event) {
|
||
this.isPackage = event.detail.value; //
|
||
},
|
||
// 就餐时间
|
||
onChangeRadio(event) {
|
||
this.radio = event.detail.value; //
|
||
},
|
||
// 去预约
|
||
changePayType(data) {
|
||
this.cardPay.payType = data.mp.detail;
|
||
},
|
||
onClose() {
|
||
this.isShow = false;
|
||
},
|
||
getYy() {
|
||
// eslint-disable-next-line eqeqeq
|
||
if (this.tableNum == 0) {
|
||
this.active = 0;
|
||
this.type = 2000;
|
||
}
|
||
},
|
||
getCardAmount() {
|
||
let _this = this;
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "GetIndustryMemberInfo",
|
||
serverpartShopId: _this.radio2,
|
||
})
|
||
.then((rs) => {
|
||
if (rs.ResultCode === "100") {
|
||
_this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE;
|
||
|
||
if (_this.cardPay.amount < _this.orderAmount) {
|
||
_this.cardPay.payType = "微信支付";
|
||
_this.cardPay.canCardPay = false;
|
||
_this.cardPay.reason = "余额不足";
|
||
} else {
|
||
_this.cardPay.payType = "余额支付";
|
||
_this.cardPay.canCardPay = true;
|
||
_this.cardPay.reason = "";
|
||
}
|
||
} else {
|
||
_this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE;
|
||
_this.cardPay.payType = "微信支付";
|
||
_this.cardPay.canCardPay = false;
|
||
_this.cardPay.reason = rs.ResultDesc;
|
||
}
|
||
_this.isShow = true;
|
||
_this.$forceUpdate();
|
||
});
|
||
},
|
||
getcoup() {
|
||
// 获取可使用的优惠券
|
||
let _this = this;
|
||
|
||
let arr = {
|
||
CouponStatus: 0,
|
||
provinceCode: this.provinceCode || "340000",
|
||
orderAmount: this.couponOrder,
|
||
serverpartShopId: this.storeId,
|
||
};
|
||
console.log("arr", arr);
|
||
|
||
_this.$api.$get("/WeChat/GetMemberCouponList", arr).then(function (data) {
|
||
console.log("dataGetMemberCouponList", data);
|
||
if (data.Result_Code === 100) {
|
||
_this.couponCout = data.Result_Data.List.length;
|
||
}
|
||
});
|
||
},
|
||
getTs() {
|
||
this.active = 1;
|
||
this.type = 1000;
|
||
},
|
||
getRadio(item) {
|
||
// 就餐时间
|
||
// if (this.radio === item.value) {
|
||
// this.radio = ''
|
||
// } else {
|
||
this.radio = item.value;
|
||
this.radioType = this.radio;
|
||
console.log('this.$refs.customizeRef', this.$refs.customizeRef);
|
||
|
||
// this.$refs.customizeRef.show()
|
||
// console.log(this.radioType)
|
||
// }
|
||
},
|
||
getFx(item) {
|
||
console.log("方向", item);
|
||
// 方向
|
||
this.storeId = item.SERVERPARTSHOP_ID;
|
||
// this.getcoup();
|
||
},
|
||
getPackge(item) {
|
||
// 是否打包
|
||
this.isPackage = item.value;
|
||
},
|
||
getBoard(item) {
|
||
// 是否预约餐桌
|
||
this.board = item.value;
|
||
},
|
||
bindKeyInput(event) {
|
||
this.phoneNumber = event.mp.detail.value;
|
||
},
|
||
bindTimeChange(event) {
|
||
let index = Number(event.detail.value)
|
||
let time = timeList[index]
|
||
|
||
if (time.indexOf('次日') === -1) {
|
||
this.radio = time
|
||
this.showTime = time
|
||
} else {
|
||
let day = this.$moment.now().format("YYYY-MM-DD")
|
||
this.radio = `${day} ${time.split('次日')[1]}`
|
||
this.showTime = time
|
||
}
|
||
|
||
// this.showTime = event.mp.detail.value;
|
||
// let stime1 = this.showTime.split(":");
|
||
// let stime2 = this.startT.split(":");
|
||
// let st1 =
|
||
// 60 * Number(stime1[1]) +
|
||
// Number(stime1[0]) * 3600 -
|
||
// (60 * Number(stime2[1]) + Number(stime2[0]) * 3600);
|
||
// this.radio = this.showTime;
|
||
// this.radioType = st1 / 60;
|
||
|
||
// console.log('this.radio', this.radio)
|
||
},
|
||
goCoupon() {
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/shopPages/coupon/index?storeId=" +
|
||
this.storeId +
|
||
"&couponOrder=" +
|
||
this.couponOrder,
|
||
});
|
||
},
|
||
goRemark() {
|
||
uni.navigateTo({ url: "/pages/shopPages/orderRemark/index" });
|
||
},
|
||
createOrder() {
|
||
// 生成订单
|
||
let _this = this;
|
||
// _this.orderInternal
|
||
// eslint-disable-next-line no-constant-condition
|
||
if (0 === 1) {
|
||
if (
|
||
this.user.MEMBERSHIP_TYPE === 3000 &&
|
||
this.cardPay.payType === "余额支付"
|
||
) {
|
||
_this.payByCard();
|
||
} else {
|
||
_this.getOrderInfo(); // 微信支付
|
||
}
|
||
} else {
|
||
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "ScanOrder",
|
||
salebillType: 6000,
|
||
provinceCode: _this.provinceCode,
|
||
serverpartShopId: _this.storeId, // 门店内码
|
||
salebillDesc: _this.remark || "",
|
||
wechatOpenId: _this.user.WECHATAPP_OPENID || "",
|
||
wechatUnionId: _this.user.USER_UNIONID || "",
|
||
tableNumber: _this.tableNum || "",
|
||
takeType: _this.type,
|
||
packType: _this.isPackage,
|
||
reservationDate: _this.type === 2000 ? _this.radio : "",
|
||
orderPersonTel: _this.phoneNumber ? _this.phoneNumber : "",
|
||
couponCode: _this.couponAmount ? _this.couponPrice.CouponCode : "",
|
||
t_saleorderdetail: JSON.stringify(_this.shopOrder),
|
||
requestType: "application/x-www-form-urlencoded",
|
||
})
|
||
.then((res) => {
|
||
console.log("res", res);
|
||
if (res.ResultCode === "100") {
|
||
console.log("_this.loginType", _this.loginType);
|
||
_this.currentOrderDetail = res.Data;
|
||
// 如果是微信小程序的话 直接调用支付
|
||
// APP端的话 弹出支付宝和微信支付的选择 并调用对应的方法
|
||
if (_this.loginType === "min") {
|
||
_this.handleWxPay(res.Data);
|
||
} else {
|
||
// 调起支付方式的悬浮框;
|
||
// _this.$refs.payPopup.open("bottom");
|
||
// _this.payShow = true;
|
||
|
||
uni.showToast({
|
||
title: "APP支付申请中...",
|
||
icon: "none",
|
||
});
|
||
}
|
||
|
||
// 调起支付方式的悬浮框
|
||
// _this.$refs.payPopup.open("bottom");
|
||
// _this.payShow = true;
|
||
// return;
|
||
} else {
|
||
// uni.showModal({
|
||
// title: "温馨提示",
|
||
// content: res.ResultDesc,
|
||
// showCancel: false,
|
||
// });
|
||
}
|
||
});
|
||
}
|
||
// this.onClose();
|
||
},
|
||
// 实际的微信支付方法
|
||
async handleWxPay(obj) {
|
||
// obj 为生成好的本地订单信息
|
||
let _this = this;
|
||
// 拿到签名
|
||
let mchid = "1707624624"; // 商户号
|
||
let timeStamp = Math.ceil(new Date().getTime() / 1000); // 随机的时间戳 秒为单位
|
||
let nonceStr = Math.random().toString(36).substring(2, 8); // 随机字符串
|
||
let serial_no = "5904E3BF9EDC8B2AA3F99E51440B34FB7FFA6EDA"; // 证书序列号
|
||
let out_trade_no = obj.SALEBILL_CODE; // 本地生成的订单编码
|
||
|
||
let req = {
|
||
appid: "wx4c497eddcec4a0e7", // 小程序的id
|
||
mchid: mchid, // 商户号
|
||
description: "安徽省驿达高速公路服务区经营管理有限公司", // 微信支付上面会显示付款给谁的名称
|
||
out_trade_no: out_trade_no, // 商户订单号
|
||
notify_url:
|
||
"https://mp.eshangtech.com/Coop.Merchant/Handler/Handler_Trade.ashx", // 商户回调地址
|
||
amount: {
|
||
total: Number(_this.orderAmount) * 100 || 1, // 多少钱 分为单位所以乘了100
|
||
currency: "CNY", // 人民币的标识
|
||
}, // 订单金额
|
||
payer: {
|
||
openid: _this.user.WECHATAPP_OPENID,
|
||
}, // 支付者信息
|
||
};
|
||
|
||
// 生成请求头签名的参数
|
||
let reqSign = {
|
||
parameters:
|
||
"POST\n/v3/pay/transactions/jsapi\n" +
|
||
timeStamp +
|
||
"\n" +
|
||
nonceStr +
|
||
"\n" +
|
||
JSON.stringify(req) +
|
||
"\n",
|
||
provinceCode: _this.provinceCode || "340000",
|
||
};
|
||
console.log("reqSign", reqSign);
|
||
console.log("mchid", mchid);
|
||
console.log("nonceStr", nonceStr);
|
||
console.log("timeStamp", timeStamp);
|
||
console.log("serial_no", serial_no);
|
||
// 生成签名的接口
|
||
const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
|
||
console.log("data.Result_Data", data.Result_Data);
|
||
|
||
let Authorization = `mchid="${mchid}",nonce_str="${nonceStr}",signature="${data.Result_Data}",timestamp="${timeStamp}",serial_no="${serial_no}"`;
|
||
let AuthorizationStr = `WECHATPAY2-SHA256-RSA2048 ${Authorization}`; // 请求头中的一个参数
|
||
|
||
// 微信支付的下单接口
|
||
uni.request({
|
||
url: "https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
Authorization: AuthorizationStr,
|
||
Accept: "application/json", //自定义请求头信息
|
||
"Content-Type": "application/json",
|
||
},
|
||
success: async (res) => {
|
||
let paySign = "";
|
||
let reqSign = {
|
||
parameters:
|
||
"wx4c497eddcec4a0e7\n" +
|
||
timeStamp +
|
||
"\n" +
|
||
nonceStr +
|
||
"\nprepay_id=" +
|
||
res.data.prepay_id +
|
||
"\n",
|
||
provinceCode: _this.provinceCode || "340000",
|
||
};
|
||
// 支付的签名
|
||
const data = await _this.$api.$get("/WeChat/GenerateSign", reqSign);
|
||
paySign = data.Result_Data;
|
||
// 调起微信支付
|
||
wx.requestPayment({
|
||
timeStamp: timeStamp.toString(),
|
||
nonceStr: nonceStr,
|
||
package: `prepay_id=${res.data.prepay_id}`,
|
||
signType: "RSA",
|
||
paySign: paySign,
|
||
total_fee: Number(_this.orderAmount) * 100 || 1,
|
||
success(res) {
|
||
console.log("res", res);
|
||
},
|
||
fail(res) {
|
||
console.log("fail", res);
|
||
},
|
||
complete(res) {
|
||
// 不管支付成功还是支付失败 都会调用的内容
|
||
// _this.isMakeOrdering = true;
|
||
// uni.redirectTo({
|
||
// url: `/pages/order/orderFoodDetail/index?orderInternal=${obj.SALEBILL_ID}`,
|
||
// });
|
||
|
||
_this.isMakeOrdering = false;
|
||
uni.redirectTo({
|
||
url: `/pages/orders/orderdetail/index?orderInternal=${obj.SALEBILL_ID}`,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
});
|
||
},
|
||
// 去支付
|
||
goPayMent() {
|
||
let _this = this;
|
||
|
||
if (!this.radio) {
|
||
uni.showToast({
|
||
title: "请选择就餐时间",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// if (this.type === 2000) {
|
||
// if (this.radio === "自定义") {
|
||
// uni.showToast({
|
||
// title: "请选择预约时间",
|
||
// icon: "none",
|
||
// });
|
||
// return false;
|
||
// }
|
||
// if (
|
||
// !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phoneNumber) &&
|
||
// !this.user.MEMBERSHIP_MOBILEPHONE
|
||
// ) {
|
||
// uni.showToast({
|
||
// title: "请输入联系号码，确保你的订单预约成功",
|
||
// icon: "none",
|
||
// });
|
||
// return false;
|
||
// }
|
||
// this.phoneNumber = this.phoneNumber
|
||
// ? this.phoneNumber
|
||
// : this.user.MEMBERSHIP_MOBILEPHONE;
|
||
// }
|
||
|
||
_this.createOrder();
|
||
},
|
||
// 关闭支付方式悬浮框
|
||
handlePayClose() {
|
||
this.$refs.payPopup.close();
|
||
this.payShow = false;
|
||
},
|
||
payByCard() {
|
||
// 实业饭卡支付
|
||
let _this = this;
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "ECodeConsume",
|
||
industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
|
||
saleBill: _this.orderInternal,
|
||
})
|
||
.then((rs) => {
|
||
if (rs.ResultCode === "100") {
|
||
// uni.showToast({
|
||
// title: '支付成功',
|
||
// icon: 'success',
|
||
// duration: 1000
|
||
// })
|
||
// _this.isShow = false
|
||
// setTimeout(() => {
|
||
_this.$store.commit("orderRemark", "");
|
||
_this.$store.commit("couponPrice", "");
|
||
_this.$store.commit("shopcartOrder", "");
|
||
_this.$store.commit("orderTable", "");
|
||
uni.redirectTo({
|
||
url:
|
||
"/pages/orders/orderdetail/index?type=1&orderNumber=" +
|
||
_this.orderNumber +
|
||
"&orderInternal=" +
|
||
_this.orderInternal,
|
||
});
|
||
// }, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: rs.ResultDesc,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 获取后台信息调取微信支付
|
||
getOrderInfo() {
|
||
let _this = this;
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "JsApiPay",
|
||
action_data: 1,
|
||
action_record: _this.user.WECHATAPP_OPENID,
|
||
// action_record: 'ortWV5OP2g9P81cxxJYIIhrAezS4',
|
||
TOTAL_FEE: _this.orderAmount,
|
||
// TOTAL_FEE: 0.01,
|
||
OFFPRICE: 0,
|
||
payType: 2,
|
||
SALEBILL_ID: _this.orderInternal,
|
||
SALEBILL_CODE: _this.orderNumber,
|
||
})
|
||
.then((res) => {
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "EndPay",
|
||
action_data: _this.orderNumber,
|
||
action_record: 1,
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res === 1) {
|
||
_this.$store.commit("orderRemark", "");
|
||
_this.$store.commit("couponPrice", "");
|
||
_this.$store.commit("shopcartOrder", "");
|
||
_this.$store.commit("orderTable", "");
|
||
uni.redirectTo({
|
||
url:
|
||
"/pages/orders/orderdetail/index?type=1&orderNumber=" +
|
||
_this.orderNumber +
|
||
"&orderInternal=" +
|
||
_this.orderInternal,
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
content: "请确认是否支付成功",
|
||
cancelText: "未支付",
|
||
confirmText: "我已支付",
|
||
success: function (back) {
|
||
if (back.confirm) {
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "EndPay",
|
||
action_data: _this.orderNumber,
|
||
action_record: 1,
|
||
})
|
||
.then((_data) => {
|
||
_this.$store.commit("orderRemark", "");
|
||
_this.$store.commit("couponPrice", "");
|
||
_this.$store.commit("shopcartOrder", "");
|
||
_this.$store.commit("orderTable", "");
|
||
console.log("_data", _data);
|
||
uni.redirectTo({
|
||
url:
|
||
"/pages/orders/orderdetail/index?type=1&orderNumber=" +
|
||
_this.orderNumber +
|
||
"&orderInternal=" +
|
||
_this.orderInternal,
|
||
});
|
||
});
|
||
} else {
|
||
uni.redirectTo({
|
||
url:
|
||
"/pages/orders/orderdetail/index?type=1&orderNumber=" +
|
||
_this.orderNumber +
|
||
"&orderInternal=" +
|
||
_this.orderInternal,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
getDicretion(op) {
|
||
let _this = this;
|
||
|
||
let arr = {
|
||
action_type: "GetSacnShopDetail",
|
||
provinceCode: op.province,
|
||
serverpartShopId: op.sid,
|
||
showCoupon: 1,
|
||
};
|
||
|
||
this.$api.getCoop(arr).then(function (res) {
|
||
if (res.ResultCode === "100") {
|
||
let _data = res.Data;
|
||
|
||
_this.shopList = _data.ShopList;
|
||
_this.radio2 = _data.ShopList[0].SERVERPARTSHOP_ID;
|
||
_this.selectShop = _data.ShopList[1].SERVERPARTSHOP_ID;
|
||
console.log("_this.selectShop", _this.selectShop);
|
||
|
||
_this.getcoup();
|
||
_this.$forceUpdate();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
onShow() {
|
||
// this.getOrderAmount()
|
||
let id = this.doorId;
|
||
let yuyue = this.$store.getters.appointmentOrder[id];
|
||
this.yyTime = yuyue ? yuyue.showTime : "";
|
||
this.handleGetRealPosition();
|
||
},
|
||
onUnload() {
|
||
this.$store.commit("orderRemark", "");
|
||
this.$store.commit("couponPrice", "");
|
||
this.orderInternal = "";
|
||
this.orderNumber = "";
|
||
this.phoneNumber = "";
|
||
this.isPackage = 1000;
|
||
this.isShow = false;
|
||
},
|
||
onLoad(option) {
|
||
console.log("option", option);
|
||
console.log("nowStore", this.nowStore);
|
||
this.SERVERPART_ID = option.SERVERPART_ID;
|
||
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
|
||
this.doorId = option.id;
|
||
this.storeId = Number(option.sid); // 门店id
|
||
// this.tableNum = option.tableNum || 0;
|
||
this.provinceCode = option.province;
|
||
// eslint-disable-next-line eqeqeq
|
||
if (this.tableNum != 0) {
|
||
this.active = 1;
|
||
this.type = 1000;
|
||
} else {
|
||
// 预约
|
||
this.active = 0;
|
||
this.type = 2000;
|
||
}
|
||
this.phoneNumber = this.user.MEMBERSHIP_MOBILEPHONE || "";
|
||
this.shopOrder = this.$store.getters.shopcartOrder[option.id];
|
||
this.getcoup();
|
||
|
||
console.log("this.shopOrder", this.shopOrder);
|
||
|
||
this.handleGetGyroscope();
|
||
// this.getDicretion(option)
|
||
this.getDefaultTime()
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
bodyColor = #CAA97F;
|
||
|
||
.disable {
|
||
color: #999;
|
||
}
|
||
|
||
.bb1 {
|
||
border-bottom: 1rpx solid #EDEDED;
|
||
}
|
||
|
||
.mt24 {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.sellement-apponit-box {
|
||
margin: 24rpx 24rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.sellement-apponit-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.settlement {
|
||
padding-bottom: 180rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f5f5f5;
|
||
|
||
.settlement-title {
|
||
background: #ffffff;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 48rpx 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
margin: 24rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.settlement-yy, .settlement-ts {
|
||
flex: 0.4;
|
||
border: 6rpx solid #dddddd;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 30rpx;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.yy-img, .ts-img {
|
||
display: inline-block;
|
||
width: 61rpx;
|
||
height: 53rpx;
|
||
margin-right: 20rpx;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
.yy-img {
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/yy.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.yy-img-active {
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/yy-a.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.ts-img {
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/md.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.ts-img-active {
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/md-a.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
}
|
||
|
||
.settlement-color {
|
||
color: bodyColor;
|
||
border: 6rpx solid bodyColor;
|
||
}
|
||
}
|
||
|
||
.link-type {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 32rpx;
|
||
background-color: #fff;
|
||
border-bottom: 1rpx solid #ddd;
|
||
}
|
||
|
||
input {
|
||
font-size: 32rpx;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
width: 98%;
|
||
}
|
||
|
||
.time-title {
|
||
font-family: 'PingFangSC';
|
||
// padding 0 24rpx
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: bolder;
|
||
flex: 2;
|
||
}
|
||
|
||
.radio-box {
|
||
padding: 0rpx 10rpx;
|
||
background: #fff;
|
||
font-size: 26rpx;
|
||
flex: 8;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
|
||
|
||
.radio-list {
|
||
width: 50%;
|
||
display: inline-block;
|
||
|
||
.radio-unit {
|
||
font-size: 24rpx;
|
||
line-height: 96rpx;
|
||
}
|
||
|
||
.picker {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
padding-right: 16rpx;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
}
|
||
|
||
.custom-radio:checked::before {
|
||
background-color: #caa97f; /* 金黄色背景 */
|
||
}
|
||
}
|
||
|
||
.radioCustomize{
|
||
position: relative;
|
||
|
||
.customizeRef{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.section{
|
||
margin-left: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.repositioning {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 9;
|
||
|
||
.icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.order-fx {
|
||
margin-top: 20rpx;
|
||
border-bottom: 2rpx dashed #dddddd;
|
||
}
|
||
|
||
.order-yy, .order-fx {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-size: 30rpx;
|
||
background: #ffffff;
|
||
padding: 0 30rpx;
|
||
|
||
.order-yy-time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.span-time {
|
||
color: bodyColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.door-box {
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.settlement-door {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 900;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.door-addr {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.order-title {
|
||
background: #ffffff;
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
hr {
|
||
background-color: #ededed;
|
||
height: 2rpx;
|
||
}
|
||
|
||
.order-list {
|
||
padding: 24rpx 12rpx 24rpx 12rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #333;
|
||
|
||
.order-name {
|
||
font-size: 24rpx;
|
||
// font-weight bolder
|
||
flex: 0.7;
|
||
}
|
||
|
||
.order-num {
|
||
font-size: 24rpx;
|
||
flex: 0.1;
|
||
}
|
||
|
||
.order-price {
|
||
font-size: 24rpx;
|
||
flex: 0.2;
|
||
color: #333;
|
||
text-align: right;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.coupon {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
line-height: 60rpx;
|
||
color: bodyColor;
|
||
|
||
.coupon-title {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.coupon-right {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
|
||
.coupon-remark {
|
||
width: 364rpx;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
height: 42rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.priceColor {
|
||
color: bodyColor;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-sum {
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
padding: 22rpx 16rpx;
|
||
|
||
.pay-price {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.go-pay {
|
||
border-top: 1rpx solid #eee;
|
||
line-height: 100rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// z-index 2
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx 0;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background-color: #fff;
|
||
|
||
.pay-left {
|
||
font-size: 26rpx;
|
||
background-color: #fff;
|
||
padding-left: 20rpx;
|
||
|
||
.pay-price {
|
||
color: #333;
|
||
margin-left: 10rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.pay-right {
|
||
width: 210rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
background: #ba922f;
|
||
border-radius: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon.sellement-apponit-box {
|
||
padding: 12rpx 24rpx;
|
||
}
|
||
|
||
.bottom-box {
|
||
height: 450rpx;
|
||
width: 100%;
|
||
box-sizing: content-box;
|
||
|
||
.bottom-pop-title {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f9f9f9;
|
||
}
|
||
|
||
.bottom-content {
|
||
box-sizing: content-box;
|
||
padding: 0 0 0 80rpx;
|
||
}
|
||
|
||
.bottom-btn {
|
||
width: 600rpx;
|
||
margin: 20rpx auto;
|
||
border-radius: 8rpx;
|
||
background: #444;
|
||
color: #caa97f;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.payShowBox {
|
||
width: 100%;
|
||
height: 380px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
|
||
.payBoxTitle {
|
||
width: 100%;
|
||
font-Weight: bold;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.payList {
|
||
width: 100%;
|
||
height: 250px;
|
||
overflow-y: auto;
|
||
|
||
.radio-group {
|
||
.bottom-radio {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
border-bottom: 1px solid #ededed;
|
||
padding: 12px 0;
|
||
|
||
.radioLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.logoBox {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 8px;
|
||
|
||
.logoIcon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goPayBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24px;
|
||
|
||
.goPay {
|
||
width: 100%;
|
||
padding: 8px;
|
||
box-sizing: border-box;
|
||
border-radius: 20px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #CAA97F;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon-coupon {
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/settlement-coupon.png') no-repeat center;
|
||
background-size: contain;
|
||
width: 33rpx;
|
||
height: 55rpx;
|
||
}
|
||
|
||
.radio-box.coupon-right {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
color: #666;
|
||
align-items: center;
|
||
|
||
.coupon-remark {
|
||
width: 444rpx;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
}
|
||
}
|
||
</style>
|