1513 lines
42 KiB
Vue
1513 lines
42 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">
|
||
<div class="sellement-apponit-unit" v-if="active === 0">
|
||
<!-- class="link-type" -->
|
||
<div class="time-title">联系方式</div>
|
||
<view class="radio-box bb1">
|
||
<input
|
||
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>
|
||
<div class="sellement-apponit-unit" v-if="active === 0">
|
||
<div class="time-title">就餐时间</div>
|
||
<radio-group
|
||
:value="radio"
|
||
@change="onChangeRadio"
|
||
class="radio-box bb1"
|
||
>
|
||
<radio
|
||
color="#CAA97F"
|
||
class="radio-list"
|
||
:name="deteTime[0].value"
|
||
@click="getRadio(deteTime[0])"
|
||
>
|
||
<!-- checked-color="#CAA97F" -->
|
||
|
||
<span class="radio-unit">{{ deteTime[0].name }}</span>
|
||
</radio>
|
||
<radio
|
||
class="radio-list"
|
||
color="#CAA97F"
|
||
:name="showTime"
|
||
checked-color="#CAA97F"
|
||
@click="getRadio({ value: showTime })"
|
||
>
|
||
<picker
|
||
ref="timePicker"
|
||
mode="time"
|
||
id="timePicker"
|
||
:value="time"
|
||
:start="start"
|
||
:end="end"
|
||
@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">
|
||
<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"
|
||
@click="getFx(item)"
|
||
/>
|
||
<span class="radio-unit">{{ item.SHOPDIRECTION }}</span>
|
||
</label>
|
||
</radio-group>
|
||
</div>
|
||
<div class="sellement-apponit-unit">
|
||
<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">￥{{ 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="/static/images/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="/static/images/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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
||
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"),
|
||
startT: this.$utils.getLocalTime(new Date(), "hh:mm"),
|
||
remark: "", // 备注
|
||
doorId: "",
|
||
storeId: "", // 门店id
|
||
active: 0,
|
||
radio: 30,
|
||
radio2: "",
|
||
radioType: 10,
|
||
type: 2000, // 判断预约还是堂食
|
||
showTime: "自定义",
|
||
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: [], // 方向列表
|
||
yyTime: "",
|
||
provinceCode: "",
|
||
couponCout: 0, // 可用优惠券数量
|
||
orderNumber: "", // 订单号
|
||
orderInternal: "", // 订单内码
|
||
payShow: false, // 支付方式的悬浮框
|
||
payType: 2, // 1 支付宝 2 微信
|
||
loginType: "", //
|
||
currentOrderDetail: {}, // 当前订单的数据
|
||
};
|
||
},
|
||
components: {
|
||
UniPopup,
|
||
},
|
||
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: {
|
||
// 确认支付
|
||
async handleRealGoPay() {
|
||
if (this.loginType === "android") {
|
||
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;
|
||
},
|
||
// 就餐方向
|
||
onChangeStore(event) {
|
||
this.storeId = event.detail.value; // 更新 storeId 的值
|
||
},
|
||
// 是否打包
|
||
onChangeIsPackage(event) {
|
||
this.isPackage = event.detail.value; // 更新 storeId 的值
|
||
},
|
||
// 就餐时间
|
||
onChangeRadio(event) {
|
||
this.radio = event.detail.value; // 更新 storeId 的值
|
||
},
|
||
// 去预约
|
||
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("data", 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.radioType)
|
||
// }
|
||
},
|
||
getFx(item) {
|
||
console.log("方向", item);
|
||
// 方向
|
||
this.storeId = item.SERVERPARTSHOP_ID;
|
||
this.getcoup();
|
||
},
|
||
getPackge(item) {
|
||
// 是否打包
|
||
this.isPackage = item.value;
|
||
},
|
||
bindKeyInput(event) {
|
||
this.phoneNumber = event.mp.detail.value;
|
||
},
|
||
bindTimeChange(event) {
|
||
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;
|
||
},
|
||
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) => {
|
||
if (res.ResultCode === "100") {
|
||
console.log("res", res);
|
||
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;
|
||
}
|
||
|
||
// 调起支付方式的悬浮框
|
||
// _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.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.getcoup();
|
||
_this.$forceUpdate();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
onShow() {
|
||
// this.getOrderAmount()
|
||
let id = this.doorId;
|
||
let yuyue = this.$store.getters.appointmentOrder[id];
|
||
this.yyTime = yuyue ? yuyue.showTime : "";
|
||
},
|
||
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("nowStore", this.nowStore);
|
||
|
||
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.getDicretion(option)
|
||
},
|
||
};
|
||
</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: 160rpx;
|
||
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('/static/images/yy.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.yy-img-active {
|
||
background: url('/static/images/yy-a.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.ts-img {
|
||
background: url('/static/images/md.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.ts-img-active {
|
||
background: url('/static/images/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 {
|
||
// 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: 26rpx;
|
||
line-height: 96rpx;
|
||
}
|
||
|
||
.picker {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
padding-right: 16rpx;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
}
|
||
|
||
.custom-radio:checked::before {
|
||
background-color: #caa97f; /* 金黄色背景 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 26rpx;
|
||
// font-weight bolder
|
||
flex: 0.7;
|
||
}
|
||
|
||
.order-num {
|
||
font-size: 26rpx;
|
||
flex: 0.1;
|
||
}
|
||
|
||
.order-price {
|
||
font-size: 26rpx;
|
||
flex: 0.2;
|
||
color: #333;
|
||
text-align: right;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.coupon {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
box-sizing: border-box;
|
||
line-height: 60rpx;
|
||
color: bodyColor;
|
||
|
||
.coupon-title {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.priceColor {
|
||
color: bodyColor;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-sum {
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
padding: 22rpx 16rpx;
|
||
|
||
.pay-price {
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.go-pay {
|
||
border-top: 1rpx solid #eee;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// z-index 2
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
|
||
.pay-left {
|
||
font-size: 26rpx;
|
||
flex: 7;
|
||
background-color: #fff;
|
||
padding-left: 20rpx;
|
||
|
||
.pay-price {
|
||
color: #333;
|
||
margin-left: 10rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.pay-right {
|
||
font-size: 28rpx;
|
||
flex: 3;
|
||
text-align: center;
|
||
background-color: #333;
|
||
color: bodyColor;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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('/static/images/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>
|
||
|