uniapp+uView安卓与IOS微信与支付宝支付

标签：uniapp false color 微信安卓 detail font margin size

页面仅供参考，记录支付流程处理方法：

<view class="tip-box" v-if="detail.purchaseLimitNum>0">限购{{detail.purchaseLimitNum}}份</view>

<text class="text">{{detail.name}}</text>

<text class="priceText">{{detail.integral}}</text>

<text class="discounts-price">+{{detail.price}}元</text>

</view>

<text class="priceText">{{detail.price}}</text>

</view>

</view>

<view class="address-text2" v-if="address">{{address.recipientName}} {{address.recipientPhone}}</view>

<view class="address-text2 mt26 mb20" v-else>请先去新增地址</view>

</view>

<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>

<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>

+{{detail.totalRebateRatio}}

</view>

<text class="priceText">{{detail.postage}}</text>

</view>

<text class="priceText">{{detail.reductionOfFunds}}</text>

</view>

</view>

-{{detail.totalUseIntegral}}

</view>

-{{detail.orderAmount}}

</view>

<view class="icon" @click="selectAlipayWay"

:style="showAlipayIcon ? {'background-color':'#6C8FF8','border-color':'#6C8FF8'} : {}">

</view>

</image>

</view>

<view class="icon" @click="selectWeChatWay"

:style="showWeChatIcon ? {'background-color':'#6C8FF8','border-color':'#6C8FF8'} : {}">

</view>

</image>

</view>

<text>共{{totalPayNumber}}件</text>

</view>

当前积分{{detail.integralYue}}

</view>

当前弈贝{{detail.quotaYue}}

</view>

<text class="priceText">{{totalPrice}}</text>

</view>

<text class="priceText">{{detail.orderAmount}}</text>

<view class="discounts-price" v-if="detail.postage != 0">+{{detail.postage}}元</view>

</view>

<text class="priceText">{{detail.totalUseIntegral}}</text>

<view class="discounts-price" v-if="detail.postage != 0">+{{detail.postage}}元</view>

</view>

<text class="priceText">{{detail.orderAmount}}</text>

</view>

<text class="priceText">{{detail.totalUseIntegral}}</text>

<view class="discounts-price">+{{detail.orderAmount}}元</view>

</view>

</view>

</template>

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, // 是否第一次进入页面

};

onl oad(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>

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>

页面用到的图片：

标签：uniapp,false,color,微信,安卓,detail,font,margin,size
From： https://blog.csdn.net/Mirs_Zhu/article/details/141188513

uniapp+uView安卓与IOS微信与支付宝支付

相关文章

赞助商

阅读排行