IT评测·应用市场-qidao123.com

标题: uniapp+uView安卓与IOS微信与支付宝支付 [打印本页]

作者: 兜兜零元 时间: 2024-11-4 12:19
标题: uniapp+uView安卓与IOS微信与支付宝支付
页面仅供参考，记录支付流程处理方法：
<template>
<view class="pay-order-page">
<view class="content-box" style="padding-bottom: 14rpx;">
<view class="tip-box" v-if="detail.purchaseLimitNum>0">限购{{detail.purchaseLimitNum}}份</view>
<image :src="detail.coverAddress" mode="" class="img" />
<text class="text">{{detail.name}}</text>

<view class="price" v-if="detail.payType == 13">
<text class="priceText">{{detail.integral}}</text>
<text class="unit" style="margin-left: 9rpx;">积分</text>
<text class="discounts-price">+{{detail.price}}元</text>
</view>
<view class="price" v-else>
<text class="unit" v-if="detail.payType == 1 || detail.payType == 12">￥</text>
<text class="priceText">{{detail.price}}</text>
<text class="unit" style="margin-left: 9rpx;" v-if="detail.payType == 2">弈贝</text>
<text class="unit" style="margin-left: 9rpx;" v-if="detail.payType == 3">积分</text>
</view>
</view>

<view class="content-box" v-if="type==2">
<image src="@/static/images/adress.png" mode="" class="address-img">
<view class="address-text" v-if="address">
{{address.provinceName}}{{address.cityName}}{{address.address}}
</view>
<view class="address-text2" v-if="address">{{address.recipientName}} {{address.recipientPhone}}</view>
<view class="address-text2 mt26 mb20" v-else>请先去新增所在</view>
<view class="iconfont icon-xiangyou2 icon1"></view>
</view>

<view class="countBox">
<view class="countNumBox">
<text class="title">数目</text>
<u-number-box v-model="payNumber" :min="1" integer :max="userLimitNum" buttonSize="24" bgColor="#fff"
@change="changePayNum" @blur="changePayNum2" class="countNum">
</u-number-box>
</view>
</view>

<view class="discountBox">

<view class="isRebatesBox" v-if="detail.payType == 12">
<text class="title">弈贝抵现</text>
<view class="rightBox">
<text class="discountText">可用<text class="number">{{detail.quota}}</text>弈贝，抵扣<text class="number">{{detail.reductionOfQuota}}</text>元</text>
<u-switch v-model="isOpenSwitch" size="22" activeColor="#6C8FF8" @change="changeIsUseQuotaOrIntegral" :disabled="disabledSwitch"></u-switch>
</view>
</view>

<view class="isRebatesBox" v-if="detail.isRebates == 1">
<text class="title">返利弈贝</text>
<view class="isRebatesText">
+{{detail.totalRebateRatio}}
</view>
</view>
</view>
<view class="content-box1">

<view class="list-text" v-if="type==2">
<view class="text-name">运费</view>
<view class="price_">
<text class="unit">￥</text>
<text class="priceText">{{detail.postage}}</text>
</view>
</view>

<view class="list-text" v-if="detail.reductionOfFunds>0">
<view class="text-name">立减</view>
<view class="price_">
<text class="unit" v-if="detail.payType != 2 && detail.payType != 3">￥</text>
<text class="priceText">{{detail.reductionOfFunds}}</text>
<text class="unitText" v-if="detail.payType == 2">弈贝</text>
<text class="unitText" v-if="detail.payType == 3">积分</text>
</view>
</view>
</view>
<view class="payWay">
<view class="topBox">
<text class="payText">支付方式</text>
</view>

<view class="deductionBox" v-if="detail.payType == 13 || detail.payType == 3">
<text class="title">积分</text>
<view class="deductionVal">
-{{detail.totalUseIntegral}}
</view>
</view>

<view class="deductionBox" v-if="detail.payType == 2">
<text class="title">弈贝</text>
<view class="deductionVal">
-{{detail.orderAmount}}
</view>
</view>
<view class="pay-bottom-box" v-if="(detail.postage !=0) || (detail.payType != 2 && detail.payType != 3)">

<view class="zhifubaoBox">
<view class="icon" @click="selectAlipayWay"
:style="showAlipayIcon ? {'background-color':'#6C8FF8','border-color':'#6C8FF8'} : {}">
<i class="iconfont icon-gouxuan1" v-if="showAlipayIcon"></i>
</view>
<image src="@/static/images/zfb.png" mode="" class="img">
</image>
<text class="text">支付宝</text>
</view>
<view class="line"></view>

<view class="weixinBox">
<view class="icon" @click="selectWeChatWay"
:style="showWeChatIcon ? {'background-color':'#6C8FF8','border-color':'#6C8FF8'} : {}">
<i class="iconfont icon-gouxuan1" v-if="showWeChatIcon"></i>
</view>
<image src="@/static/images/wx.png" mode="" class="img">
</image>
<text class="text">微信</text>
</view>
</view>
</view>
<view class="bottom-box">
<view class="payBtnBox">
<view class="leftBox">
<view class="payNum">
<text>共{{totalPayNumber}}件</text>
<view class="totalText">总计</view>
</view>
<view class="totalBox">
<view v-if="detail.payType == 13 || detail.payType == 3 || detail.payType == 2">

<view class="presentBox" v-if="detail.payType == 13 || detail.payType == 3">
当前积分{{detail.integralYue}}
</view>

<view class="presentBox" v-if="detail.payType == 2">
当前弈贝{{detail.quotaYue}}
</view>
</view>

<view class="presentBox" style="height:32rpx;" v-else></view>

<view v-if="detail.payType == 1">
<view class="totalNum">
<text class="unit">￥</text>
<text class="priceText">{{totalPrice}}</text>
</view>
</view>
<view class="totalNum" v-if="detail.payType == 2">
<text class="priceText">{{detail.orderAmount}}</text>
<text class="unit" style="margin-left: 9rpx;">弈贝</text>
<view class="discounts-price" v-if="detail.postage != 0">+{{detail.postage}}元</view>
</view>
<view class="totalNum" v-if="detail.payType == 3">
<text class="priceText">{{detail.totalUseIntegral}}</text>
<text class="unit" style="margin-left: 9rpx;">积分</text>
<view class="discounts-price" v-if="detail.postage != 0">+{{detail.postage}}元</view>
</view>
<view class="totalNum" v-if="detail.payType == 12">
<view class="price">
<text class="unit">￥</text>
<text class="priceText">{{detail.orderAmount}}</text>
</view>
</view>
<view class="totalNum" v-if="detail.payType == 13">
<text class="priceText">{{detail.totalUseIntegral}}</text>
<text class="unit" style="margin-left: 9rpx;">积分</text>
<view class="discounts-price">+{{detail.orderAmount}}元</view>
</view>
</view>
</view>
<view class="rightBox">
<button class="btn-primary1" v-if="(detail.payType == 13 || detail.payType == 3) && (Number(detail.integralYue) < Number(detail.totalUseIntegral))">积分不足</button>
<button class="btn-primary1" v-else-if="detail.payType == 2 && (Number(detail.quotaYue) < Number(detail.orderAmount))">弈贝不足</button>
<button class="btn-primary" :disabled="disabledBtn" @click="orderConfirm" v-else>立即支付</button>
</view>
</view>
</view>
</view>
</template>

<script>
import {
orderCalculate,
getDefault,
addOrder,
queryOrderState
} from "@/api/api.js"; // 后端接口
export default {
data() {
return {
productId: "", // 产品ID
payNumber: 1, //下单数目
detail: {}, //详情
totalPayNumber: 1, // 总计购买数目
totalPrice: 0, // 总计价格
address: {}, //默认所在
showAlipayIcon: true, // 是否显示支付宝勾选图标
showWeChatIcon: false, // 是否显示微信勾选图标
disabledBtn: false, // 设置禁止点击，防止重复支付
userLimitNum: 999, //允许下单最大值
type: 2, //商品类型【1、假造商品 2、实物商品】
addressId: "", //下单所在id
payWay: "0", // 支付方式 0支付宝，1微信
orderId: "", // 订单id
isopentax: false, //是否开发票
taxInfo: {}, //发票信息
isFirstEnter: true, //标记安卓支付宝返回，标记第一次
selectAddres: 0,
isOpenSwitch: false, // 是否打开抵扣开关
isUseQuotaOrIntegral: 0, // 是否使用弈贝或积分【0不使用，1使用，默认不使用】
quotaPassword: "", // 弈贝支付密码
disabledSwitch: false, // 是否禁止点击开关
isCalculate: false, // 是否执行开关判断
isFirstEnterPage: 2, // 是否第一次进入页面
};
},
onLoad(option) {
// 安卓，iOS回调获取弈贝支付密码
window.yibeiPayCallback = (data) => {
this.quotaPassword = data;
this.orderConfirm(this.quotaPassword);
};
// 获取商品id
if (option.id) {
this.productId = option.id;
}
this.isFirstEnterPage = 1 // 设置非第一次进入页面
this.getOrderNumber(1); //下单价格计算
},
onShow() {
let that = this;
that.isCalculate = false; // 防止手机息屏不执行开关按钮判断
if (!that.isFirstEnter) {
//安卓支付宝支付乐成后，不哀求，第二次进去页面再哀求更新订单情况
that.isFirstEnter = true;
return;
}
if (that.orderId != "") {
//订单详情打开状态返回，为支付返回
uni.showLoading({
title: "正在更新订单状态",
});
//调用回调前就关闭，回调内关闭的话，用户5s内操作再次打开弹窗，会造成额外关闭情况。。
queryOrderState(that.orderId)
.then((res) => {
uni.hideLoading();
uni.showToast({
title: res.message,
icon: "none",
});
that.getOrderNumber(); //下单价格计算
that.orderId = "";
that.disabledBtn = false;
that.isFirstEnter = true;
that.isCalculate = false;
this.disabledSwitch = false;
if (res.code == 200) {
//支付乐成返回商品首页
setTimeout(() => {
uni.redirectTo({
url: "/pages/index/index",
});
}, 1500);
}
})
.catch(() => {
uni.hideLoading();
});
} else {
if (this.isFirstEnterPage === 2) {
that.getOrderNumber(); //下单价格计算
}
}
},
methods: {
//获取默认所在
getAddress() {
this.disabledBtn = true;
getDefault().then((res) => {
if (res.code == 200) {
this.address = res.data;
this.addressId = this.address.id;
this.disabledBtn = false;
} else {
this.address = "";
this.addressId = "";
this.disabledBtn = false;
}
});
},
// 是否使用弈贝抵扣
changeIsUseQuotaOrIntegral(e) {
this.isOpenSwitch = e;
if (this.isOpenSwitch) {
this.isUseQuotaOrIntegral = 1;
} else {
this.isUseQuotaOrIntegral = 0;
}
this.isCalculate = true;
this.getOrderNumber("", this.isUseQuotaOrIntegral);
},
//购买一件的显示数据
getOrderNumber(num, isUseQuotaOrIntegral) {
if (this.orderId == "") {
uni.showLoading({
title: "加载中",
});
}
let params = {
isUseQuotaOrIntegral: isUseQuotaOrIntegral,
};
this.disabledBtn = true;
orderCalculate(this.productId, this.payNumber, params).then((res) => {
if (res.code == 200) {
if (this.orderId == "") {
uni.hideLoading();
}
this.disabledBtn = false;
this.detail = res.data;
if (this.isFirstEnterPage === 1) {
// 埋点
let obj = {
action: `进入订单确认页面-${this.detail.name}`, //事件
serviceName: '商城', //模块名称
}
this.onEventClick(obj)
}
this.totalPrice = res.data.orderAmount;
this.type = res.data.type;
if (!this.isCalculate) {
this.isUseQuotaOrIntegral = this.detail.isUseQuotaOrIntegral;
if (this.detail.isUseQuotaOrIntegral == 0) {
this.disabledSwitch = true;
this.isOpenSwitch = false;
} else {
this.disabledSwitch = false;
this.isOpenSwitch = true;
}
}
if (this.type == 2 && num == 1) {
//第一次哀求和是实物商品，哀求默认所在
this.getAddress(); //获取默认所在
}
this.userLimitNum = res.data.userLimitNum; //用户允许下单的数目(不管限不限购都是取这个参数)
} else {
if (this.orderId == "") {
uni.hideLoading();
}
uni.showToast({
title: res.message,
icon: "none",
});
this.disabledBtn = false;
if (res.data.isCallBackIndex == 1) {
//无库存时间返回商品首页
let timer = null;
clearTimeout(timer);
timer = setTimeout(() => {
uni.redirectTo({
url: "/pages/index/index",
});
}, 3000);
}
}
});
},
// 改变购买数目
changePayNum(e) {
this.payNumber = e.value;
this.totalPayNumber = this.payNumber;
this.isCalculate = false;
this.getOrderNumber(); //及时计算总价
},
// 输入框失去焦点改变购买数目
changePayNum2(value) {
if (value.value == "") {
this.$nextTick(() => {
value.value = "1";
this.payNumber = value.value;
// this.totalPrice = this.listData.price
this.totalPayNumber = this.payNumber;
});
}
},
// 支付方式切换支付宝
selectAlipayWay() {
this.showAlipayIcon = true;
this.showWeChatIcon = false;
this.payWay = "0";
this.disabledBtn = false;
},
// 支付方式切换微信
selectWeChatWay() {
this.showAlipayIcon = false;
this.showWeChatIcon = true;
this.payWay = "1";
this.disabledBtn = false;
},
// 购买
orderConfirm(password) {
// 埋点
let obj = {
action: `立即支付按钮点击-${this.detail.name}`, //事件
serviceName: '商城', //模块名称
}
this.onEventClick(obj)
if (this.addressId == "" && this.type == 2) {
//实物商品要选择所在
uni.showToast({
title: "请先去新增所在",
icon: "none",
});
return;
}
this.disabledBtn = true;
let param = {
orderAmount: this.totalPrice, // 订单金额
payMethod: this.payWay, // 支付方式：0支付宝，1微信
payType: this.detail.payType, // 支付方式【1、人民币 2、弈贝 3、积分 12、人民币+弈贝 13、人民币+积分】
placeNum: Number(this.payNumber), // 下单数目
productId: this.productId, // 产品id
addressId: this.addressId, // 所在
isUseQuotaOrIntegral: this.isUseQuotaOrIntegral, // 是否使用弈贝或积分【0不使用，1使用，默认不使用】
postage: this.detail.postage, // 邮费，为0时阐明包邮
quota: this.detail.quota, // 使用的弈贝数目
reductionOfFunds: this.detail.reductionOfFunds, // 立减金额
reductionOfQuota: this.detail.reductionOfQuota, // 弈贝立减金额
totalRebateRatio: this.detail.totalRebateRatio, // 返利总弈贝
totalUseIntegral: this.detail.totalUseIntegral, // 总耗费积分
};
if (this.isopentax) {
//开发票
param.taxInfo = this.taxInfo;
}
if (
this.quotaPassword != "" &&
this.detail.payType == 2 &&
this.detail.postage == 0
) {
// 有弈贝密码赋值
param.csmarCoinPass = password;
}
if (
this.quotaPassword == "" &&
this.detail.payType == 2 &&
this.detail.postage == 0
) {
// 没有弈贝密码克制下单
let obj = {
// 纯弈贝无邮费时，购买时输入的弈贝钱包账户密码
name: "商品购买",
yibei: this.detail.orderAmount,
};
this.disabledBtn = false;
let isIOS = sessionStorage.getItem("isIOS");
let isAndroid = sessionStorage.getItem("isAndroid");
if (isAndroid) {
window.ytyJsApi.onYibeiPay(JSON.stringify(obj));
}
if (isIOS) {
window.webkit.messageHandlers.onYibeiPay.postMessage(
JSON.stringify(obj)
);
}
return;
} else {
addOrder(param).then((res) => {
if (res.code == 200) {
if (
(this.detail.payType == 3 || this.detail.payType == 2) &&
this.detail.postage == 0
) {
// 纯弈贝或纯积分且无邮费直接更新订单状态
this.orderId = res.data.orderId;
uni.showLoading({
title: "正在更新订单状态",
});
//调用回调前就关闭，回调内关闭的话，用户5s内操作再次打开弹窗，会造成额外关闭情况。。
queryOrderState(this.orderId)
.then((res) => {
uni.hideLoading();
uni.showToast({
title: res.message,
icon: "none",
});
this.orderId = "";
this.disabledBtn = false;
this.isFirstEnter = true;
if (res.code == 200) {
//支付乐成返回商品首页
setTimeout(() => {
uni.redirectTo({
url: "/pages/index/index",
});
}, 1500);
}
})
.catch(() => {
uni.hideLoading();
});
} else {
this.callApp(res.data);
}
} else {
uni.showToast({
title: res.message,
icon: "none",
});
this.disabledBtn = false;
if (res.data.isCallBackIndex == 1) {
//无库存时间返回商品首页
let timer = null;
clearTimeout(timer);
timer = setTimeout(() => {
uni.redirectTo({
url: "/pages/index/index",
});
}, 3000);
}
}
});
}
},
//调起支付
callApp(payParams) {
this.orderId = payParams.orderId;
this.disabledSwitch = true;
if (this.payWay === "1") {
let params = {
package: payParams.package, // 固定值
partnerId: "1557236512", // 微信支付商户号
orderId: payParams.orderId, // 订单id
nonceStr: payParams.nonceStr, // 签名
timeStamp: payParams.timeStamp, // 时间戳
out_trade_no: payParams.out_trade_no, // 订单号
paySign: payParams.paySign,
code_url: payParams.code_url,
appid: payParams.appid,
signType: payParams.signType,
prepayid: payParams.prepayid,
};
this.text = params;
params = JSON.stringify(params);
if (sessionStorage.getItem("isIOS")) {
window.webkit.messageHandlers.goBuyWx.postMessage(params);
} else {
if (window.ytyJsApi) {
window.ytyJsApi.goBuyWx(params);
} else {
uni.showToast({
title: "window.ytyJsApi.goBuyWx() is null",
icon: "none",
});
this.disabledBtn = false;
}
}
} else {
let params2 = {
orderId: payParams.orderId,
body: payParams.body,
out_trade_no: payParams.out_trade_no,
appid: payParams.appid,
};
this.text = params2;
params2 = JSON.stringify(params2);
if (sessionStorage.getItem("isIOS")) {
window.webkit.messageHandlers.goBuyAlipay.postMessage(params2);
} else {
if (window.ytyJsApi) {
this.isFirstEnter = false;
window.ytyJsApi.goBuyAlipay(params2);
} else {
uni.showToast({
title: "window.ytyJsApi.goBuyAlipay() is null",
icon: "none",
});
this.disabledBtn = false;
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
page {
background-color: #F1F2F4;
overflow: scroll;
}

.pay-order-page {
padding-bottom: 240rpx;
.content-box1 {
background: #FFFFFF;
border-radius: 14rpx;
padding: 0 25rpx;
margin: 16rpx 15rpx 0 15rpx;
position: relative;
.list-text {
width: 100%;
height: 76rpx;
line-height: 76rpx;
clear: both;
&:first-child {
padding-top: 25rpx;
}
&:last-child {
padding-bottom: 25rpx;
}

.text-name {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: inline-block;
}

.price_ {
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
display: inline-block;
float: right;

.priceText {
font-size: 28rpx;
}

.unit {
font-size: 20rpx;
}
.unitText {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
margin-left: 8rpx;
}
}

.bill-name {
font-size: 28rpx;
color: #999999;
display: inline-block;
float: right;
margin-top: 10rpx;
margin-right: -8rpx;

.icon2 {
display: inline-block;
}
}
}
}
.content-box {
background: #FFFFFF;
border-radius: 14rpx;
padding: 25rpx;
margin: 16rpx 15rpx 0 15rpx;
position: relative;

.img {
width: 170rpx;
height: 150rpx;
border-radius: 10rpx;
}

.text {
width: 480rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
position: absolute;
left: 220rpx;
top: 50rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
white-space:nowrap;
}

.price {
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
display: inline-block;
position: absolute;
left: 220rpx;
top: 110rpx;

.priceText {
font-size: 40rpx;
}

.unit {
font-size: 24rpx;
}
.discounts-price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
margin-left: 6rpx;
}
}

.tip-box {
height: 34rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
background: linear-gradient(0deg, #F05F4B, #FD945E);
border-radius: 0rpx 14rpx 0rpx 14rpx;
text-align: center;
padding: 0 13rpx;
position: absolute;
right: 0;
top: 0;
}

.address-img {
width: 60rpx;
height: 60rpx;
display: inline-block;
position: absolute;
top: calc(50% - 30rpx);
}

.address-text {
width: calc(100% - 150rpx);
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
display: inline-block;
margin-left: 80rpx;
word-wrap: break-word;
}

.address-text2 {
width: calc(100% - 150rpx);
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-left: 80rpx;
word-wrap: break-word;
}

.icon1 {
color: #BEC0C7;
position: absolute;
right: 30rpx;
top: calc(50% - 16rpx);
}
}
.countBox {
background: #FFFFFF;
border-radius: 14rpx;
padding: 24rpx 30rpx 24rpx 23rpx;
margin: 16rpx 15rpx;
.uForm {
/deep/ .u-form-item__body__left__content__label {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
/deep/ .u-form-item__body {
height: 76rpx;
}
}
.accountBox {
margin-bottom: 24rpx;
}
.countNumBox,
.accountBox {
display: flex;
justify-content: space-between;
align-items: center;
height: 76rpx;
.title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.ipt {
margin-left: 34rpx;
}
}
}
.discountBox {
background: #FFFFFF;
border-radius: 14rpx;
padding: 0 30rpx 0 23rpx;
margin: 16rpx 15rpx;
.isRebatesBox {
height: 110rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.rightBox {
display: flex;
align-items: center;
.discountText {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-right: 30rpx;
}
.number {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E93A40;
}
}
.isRebatesText {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
}
}
}
.payWay {
background: #FFFFFF;
border-radius: 14rpx;
padding: 0 24rpx;
margin: 16rpx 15rpx 0 15rpx;

.topBox {
height: 110rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #EDEEF1;

.payText {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333;
}
}
.deductionBox {
height: 110rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #EDEEF1;
font-size: 28rpx;
font-family: PingFang SC;
.title {
color: #333333;
font-weight: 500;
}
.deductionVal {
font-weight: bold;
color: #E93A40;
}
}
.pay-bottom-box {
height: 130rpx;
display: flex;
align-items: center;
justify-content: center;

.zhifubaoBox {
width: 50%;
display: flex;
align-items: center;
justify-content: center;

.icon {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #DFDFDF;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;

.icon-gouxuan1 {
font-size: 36rpx;
color: #fff;
}
}

.img {
width: 48rpx;
height: 48rpx;
display: inline-block;
margin-left: 40rpx;
margin-right: 18rpx;
}

.text {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}

.line {
width: 2rpx;
height: 60rpx;
background: #EDEEF1;
}

.weixinBox {
width: 50%;
display: flex;
align-items: center;
justify-content: center;

.icon {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 2rpx solid #DFDFDF;
display: flex;
justify-content: center;
align-items: center;

.icon-gouxuan1 {
font-size: 36rpx;
color: #fff;
}
}

.img {
width: 48rpx;
height: 48rpx;
display: inline-block;
margin-left: 40rpx;
margin-right: 18rpx;
}

.text {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}

}
}

.bottom-box {
width: 100%;
height: 180rpx;
background-color: #fff;
position: fixed;
bottom: 0;

.payBtnBox {
width: 100%;
background: #FFFFFF;
box-shadow: 0rpx -2rpx 26rpx 0rpx rgba(99, 106, 113, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom:80rpx;

.leftBox {
margin-top: 30rpx;
margin-left: 39rpx;
display: flex;

.payNum {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
display: flex;
flex-direction: column;
.totalText {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
margin-top: 20rpx;
}
}

.totalBox {
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
display: flex;
flex-direction: column;
.presentBox {
background: #FFFFFF;
border-radius: 8rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-left: 14rpx;
}
.totalNum {
margin-top: 10rpx;
margin-left: 14rpx;
.priceText {
font-size: 40rpx;
}

.unit {
font-size: 24rpx;
}
}
.discounts-price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #E93A40;
margin-top: -8rpx;
}
}
}

.rightBox {
.btn-primary {
width: 260rpx;
height: 80rpx;
background: linear-gradient(0deg, #6C8FF8, #BBCBFD);
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-top: 22rpx;
margin-right: 30rpx;
line-height: 80rpx;
text-align: center;
}
.btn-primary1 {
width: 260rpx;
height: 80rpx;
background: linear-gradient(0deg, #D8DAE0, #E6E7ED);
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFEFE;
margin-top: 22rpx;
margin-right: 30rpx;
line-height: 80rpx;
text-align: center;
}

/deep/ uni-button:after {
border: none;
}
}
}
}
}
// 步进器样式
.countNum {
width: 180rpx;
// height: 52rpx;
background: #FFFFFF !important;
border: 2rpx solid #DFDFDF;
display: flex;
border-radius: 6rpx;

/deep/ .u-number-box__minus {
width: 52rpx;
background: #FFFFFF !important;
display: flex;
justify-content: center;
align-items: center;
border-right: 2rpx solid #DFDFDF;
}

/deep/ .u-number-box__input {
width: 76rpx !important;
margin: 0;
}

/deep/ .u-number-box__plus {
width: 52rpx;
background: #FFFFFF !important;
display: flex;
justify-content: center;
align-items: center;
border-left: 2rpx solid #DFDFDF;
}

/deep/.u-icon__icon {
font-size: 24rpx !important;
}
}
</style>
页面用到的图片：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)