228 lines
7.0 KiB
Vue
228 lines
7.0 KiB
Vue
|
<!-- 扫码支付页 -->
|
|||
|
|
<template>
|
|||
|
|
<!-- 自定义头部 -->
|
|||
|
|
<UniNav :title="title" @goBack="goBack"></UniNav>
|
|||
|
|
<!-- end -->
|
|||
|
|
<view class="pageBox scanPay">
|
|||
|
|
<view class="boxBg srCan">
|
|||
|
|
<view class="qr-box" v-if="qrShow"><canvas canvas-id="qrcode" /></view>
|
|||
|
|
<image :src="qrCodeImg" v-else></image>
|
|||
|
|
<view class="text">
|
|||
|
|
<text>¥</text>
|
|||
|
|
{{ detailsData.freight }}
|
|||
|
|
</view>
|
|||
|
|
<view>支付运费</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="boxBg payBox" v-for="(item, index) in PayWayData" :key="index">
|
|||
|
|
<view class="item">
|
|||
|
|
<view>
|
|||
|
|
<icon></icon>
|
|||
|
|
{{ item.label }}
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="checkRadio"
|
|||
|
|
><radio
|
|||
|
|
:value="String(index)"
|
|||
|
|
:class="index === current ? 'active' : ''"
|
|||
|
|
:checked="index === current"
|
|||
|
|
@click="checkbox(index)"
|
|||
|
|
/></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 支付成功弹层 -->
|
|||
|
|
<Uppop ref="uppop"></Uppop>
|
|||
|
|
<!-- end -->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from "vue";
|
|||
|
|
import { useStore } from "vuex";
|
|||
|
|
import uQRCode from "@/utils/uqrcode.js"; //引入uqrcode.js
|
|||
|
|
// 获取数据
|
|||
|
|
import { PayWayData } from "@/utils/commonData.js";
|
|||
|
|
// 接口
|
|||
|
|
import { getQrCode, paySucceed, getDetail } from "@/pages/api/index.js";
|
|||
|
|
// 导入组件
|
|||
|
|
// 导航组件
|
|||
|
|
import UniNav from "@/components/uni-nav/index.vue";
|
|||
|
|
import Uppop from "./components/uppop.vue";
|
|||
|
|
// ------定义变量------
|
|||
|
|
const store = useStore(); //vuex获取、储存数据
|
|||
|
|
const users = store.state.user;
|
|||
|
|
const uppop = ref();
|
|||
|
|
const title = ref("扫码支付"); //nav标题
|
|||
|
|
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
|
|||
|
|
const currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|||
|
|
const type = currentPage.$page.options.type;
|
|||
|
|
const pay = currentPage.$page.options.pay;
|
|||
|
|
let isLeftText = true; //是否显示左侧文字
|
|||
|
|
let current = ref(0); //当前触发付款方式的值
|
|||
|
|
let qrCodeImg = ref("");
|
|||
|
|
let times = ref(null);
|
|||
|
|
let detailsData = ref({}); //详情数据
|
|||
|
|
let qrShow = ref(false); //二维码支付有两种情况：一种是后端返回的base64图片，另一种是后端返回的二维码地址，需要前端来做处理
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getDetails();
|
|||
|
|
// 10秒钟监听一下付款状态是否付款
|
|||
|
|
times.value = setInterval(() => {
|
|||
|
|
getPaySucceed();
|
|||
|
|
}, 10000);
|
|||
|
|
});
|
|||
|
|
// ------定义方法------
|
|||
|
|
const getPaySucceed = async () => {
|
|||
|
|
await paySucceed(users.detailsData.orderId).then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
// 如果付款成功，弹出付款成功弹层
|
|||
|
|
if (res.data) {
|
|||
|
|
// 清除定时器
|
|||
|
|
clearInterval(times.value);
|
|||
|
|
uppop.value.dialogOpen();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 获取订单详情
|
|||
|
|
const getDetails = async () => {
|
|||
|
|
await getDetail(users.taskId).then((res) => {
|
|||
|
|
detailsData.value = res.data;
|
|||
|
|
store.commit("user/setDetailsData", detailsData.value);
|
|||
|
|
getCode(res.data);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 获取支付二维码
|
|||
|
|
const getCode = async (obj) => {
|
|||
|
|
let data = users.payData;
|
|||
|
|
let params = {};
|
|||
|
|
if (data.tradingAmount) {
|
|||
|
|
params = {
|
|||
|
|
memo: data.memo ? data.memo : "备注",
|
|||
|
|
payMethod: current.value === 0 ? 2 : 1,
|
|||
|
|
productOrderNo: data.productOrderNo,
|
|||
|
|
tradingAmount: data.tradingAmount,
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
params = {
|
|||
|
|
memo: obj.remark ? obj.remark : "备注",
|
|||
|
|
payMethod: current.value === 0 ? 2 : 1,
|
|||
|
|
productOrderNo: obj.orderId,
|
|||
|
|
tradingAmount: obj.freight,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
// 网络慢的时候添加按钮loading
|
|||
|
|
let times =
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: 'loading',
|
|||
|
|
});
|
|||
|
|
},500)
|
|||
|
|
// 调用接口
|
|||
|
|
await getQrCode(params).then((res) => {
|
|||
|
|
// 操作成功后清除loading
|
|||
|
|
uni.hideLoading();
|
|||
|
|
clearTimeout(times)
|
|||
|
|
const data = res.data;
|
|||
|
|
const str = data.qrCode.slice(0, 10);
|
|||
|
|
// 以base图片显示二维码
|
|||
|
|
if (str === "data:image") {
|
|||
|
|
qrCodeImg.value = data.qrCode.replace(/[\r\n]/g, "");
|
|||
|
|
} else {
|
|||
|
|
// 后端直接返回的二维码地址，需要前端处理一下返回的二维码地址
|
|||
|
|
qrCodeFun(data.qrCode);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 处理后端返回的地址生成二维码
|
|||
|
|
const qrCodeFun = (valUrl) => {
|
|||
|
|
qrShow.value = true;
|
|||
|
|
uQRCode.make({
|
|||
|
|
canvasId: "qrcode", //放置在哪个标签中，将ID设置为相同
|
|||
|
|
componentInstance: this,
|
|||
|
|
text: valUrl, //valUrl为存放要传输的数据的变量
|
|||
|
|
size: 200, //大小左右都为200 ！注意要和容器大小一致
|
|||
|
|
margin: 0, //不改变大小添加白色边框
|
|||
|
|
backgroundColor: "#ffffff",
|
|||
|
|
foregroundColor: "#000000",
|
|||
|
|
fileType: "jpg",
|
|||
|
|
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
|||
|
|
success: (res) => {},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 选项框点击事件，参数是数据的下标
|
|||
|
|
const checkbox = (index) => {
|
|||
|
|
current.value = index;
|
|||
|
|
getCode(detailsData.value);
|
|||
|
|
};
|
|||
|
|
// 返回上一页
|
|||
|
|
const goBack = () => {
|
|||
|
|
// 清除定时器
|
|||
|
|
clearInterval(times.value);
|
|||
|
|
// 返回派件详情
|
|||
|
|
// 派件返回
|
|||
|
|
if (users.isDelivery) {
|
|||
|
|
if (users.detailType === 2 && users.taskStatus === 6) {
|
|||
|
|
// 如果时从历史取派的取件列表进入的，返回的时候进入到历史取派列表
|
|||
|
|
store.commit("user/setTabIndex", 1);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/history/index",
|
|||
|
|
});
|
|||
|
|
} else if (users.detailType === 0 && users.taskStatus === 5) {
|
|||
|
|
// 如果是派件列表进入的，返回的时候进入到派件列表
|
|||
|
|
store.commit("user/setTabIndex", 1);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/delivery/index",
|
|||
|
|
});
|
|||
|
|
} else if (users.isPickUp && users.paymentMethod === 2 && !pay) {
|
|||
|
|
// 如果时从派件列表进入的，返回的时候进入到派件列表
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/waybill",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/pay/index?type=" + users.paymentMethod,
|
|||
|
|
});
|
|||
|
|
pay = false;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 取件返回
|
|||
|
|
if (users.detailType === 1 && users.taskStatus === 6) {
|
|||
|
|
// 如果是从历史取派的取件列表进入的，返回的时候进入到历史取派列表取件
|
|||
|
|
store.commit("user/setTabIndex", 0);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/history/index",
|
|||
|
|
});
|
|||
|
|
} else if (
|
|||
|
|
users.detailType === 2 &&
|
|||
|
|
users.taskStatus === 3 &&
|
|||
|
|
!users.isSearch
|
|||
|
|
) {
|
|||
|
|
// 如果是从取件列表进入的，返回的时候进入到取件列表的已取件
|
|||
|
|
store.commit("user/setTabIndex", 1);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/pickup/index",
|
|||
|
|
});
|
|||
|
|
} else if (users.isPickUp && users.paymentMethod === 1 && !pay) {
|
|||
|
|
// 如果时从取件列表进入的，返回的时候进入到取件列表
|
|||
|
|
// 返回详情
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/index",
|
|||
|
|
});
|
|||
|
|
} else if (users.isSearch) {
|
|||
|
|
store.commit("user/setIsSearch", false);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/search/index",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/pay/index?type=" + users.paymentMethod,
|
|||
|
|
});
|
|||
|
|
pay = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style src="./index.scss" lang="scss" scoped></style>
|