init
This commit is contained in:
shuhongfan
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<uni-popup
|
||||
ref="uppop"
|
||||
type="center"
|
||||
:animation="false"
|
||||
class="comPop"
|
||||
:mask-click="false"
|
||||
>
|
||||
<view class="con">用户已支付！</view>
|
||||
<view><button @click="goList">返回主页</button></view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
tipInfo: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
// ------定义变量------
|
||||
const emit = defineEmits(); //子组件向父组件事件传递
|
||||
const uppop = ref();
|
||||
// ------定义方法------
|
||||
// 打开弹层
|
||||
const dialogOpen = () => {
|
||||
uppop.value.open();
|
||||
};
|
||||
// 关闭弹层
|
||||
const dialogClose = () => {
|
||||
uppop.value.close();
|
||||
};
|
||||
// 返回任务列表页
|
||||
const goList = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/pickup/index",
|
||||
});
|
||||
};
|
||||
// 向父组件暴露方法
|
||||
defineExpose({
|
||||
dialogOpen,
|
||||
});
|
||||
</script>
|
||||
131
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/index.scss
Normal file
131
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/index.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
body,
|
||||
uni-page-body,
|
||||
uni-page-head,
|
||||
.uni-page-head {
|
||||
background-color: var(--neutral-color-background) !important;
|
||||
}
|
||||
.pickUp {
|
||||
padding: 200rpx 0 0;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
icon {
|
||||
background: url(@/static/chenggong@2x.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.btnBox {
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
::v-deep .navigator-wrap {
|
||||
width: 300rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
display: inline-block;
|
||||
background: var(--neutral-color-white) !important;
|
||||
border-radius: 20rpx;
|
||||
color: var(--neutral-color-main) !important;
|
||||
font-size: var(--font-size-16);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.scanPay {
|
||||
.boxBg {
|
||||
margin-top: 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
.srCan {
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
padding-bottom: 50rpx;
|
||||
image {
|
||||
width: 416rpx;
|
||||
height: 410rpx;
|
||||
}
|
||||
.text {
|
||||
color: var(--essential-color-red);
|
||||
font-size: 50rpx;
|
||||
font-weight: 6 00;
|
||||
line-height: 58rpx;
|
||||
text {
|
||||
font-size: var(--font-size-13);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
:deep(uni-canvas){
|
||||
width: 416rpx;
|
||||
height: 400rpx;
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.payBox {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-16);
|
||||
line-height: 52rpx;
|
||||
icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
& > view {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
icon {
|
||||
background: url(@/static/weChat.png) no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep .uni-radio-input {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.checkRadio {
|
||||
uni-radio {
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
& > view {
|
||||
&:first-child {
|
||||
icon {
|
||||
background: url(@/static/Alipay.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comPop {
|
||||
|
||||
::v-deep .uni-popup__wrapper {width: 70%;
|
||||
background: var(--neutral-color-white) !important;
|
||||
border-radius: 24rpx !important;
|
||||
font-size: var(--font-size-16);
|
||||
.con{
|
||||
padding: 68rpx;
|
||||
text-align: center;
|
||||
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
}
|
||||
uni-button{
|
||||
background: none;
|
||||
line-height: 94rpx;
|
||||
height: 100rpx;
|
||||
color: var(--neutral-color-font);
|
||||
font-size: var(--font-size-16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
96
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/index.vue
Normal file
96
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/index.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<!-- 取件成功页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav
|
||||
:title="users.isDelivery ? '签收成功' : '取件成功'"
|
||||
@goBack="goBack"
|
||||
></UniNav>
|
||||
<!-- end -->
|
||||
<view class="pickUp">
|
||||
<icon></icon>
|
||||
<view>{{ users.isDelivery ? "签收成功" : "取件成功" }}</view>
|
||||
<view class="btnBox" v-if="users.isDelivery">
|
||||
<navigator
|
||||
url="/pages/pay/scanPay?pay=true"
|
||||
open-type="redirect"
|
||||
v-if="type === '2'"
|
||||
>去收款</navigator
|
||||
>
|
||||
<view class="navigator-wrap" v-else @click="handleBack">返回主页</view>
|
||||
</view>
|
||||
<view class="btnBox" v-else>
|
||||
<navigator
|
||||
url="/pages/pay/scanPay?pay=true"
|
||||
open-type="redirect"
|
||||
v-if="type === '1'"
|
||||
>去收款</navigator
|
||||
>
|
||||
<view class="navigator-wrap" v-else @click="handleBack">返回主页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from "@/components/uni-nav/index.vue";
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
|
||||
const currentPage = pages[pages.length - 1].$page.options; //获取当前页面的对象
|
||||
const type = currentPage.type;
|
||||
// ------定义方法------
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
if (users.isDelivery) {
|
||||
if (users.taskStatus === 6 && users.detailType === 2) {
|
||||
store.commit("user/setTabIndex", 1);
|
||||
uni.redirectTo({
|
||||
url: "/pages/history/index",
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/delivery/index",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (users.taskStatus === 6) {
|
||||
uni.redirectTo({
|
||||
url: "/pages/history/index",
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/pickup/index",
|
||||
});
|
||||
}
|
||||
}
|
||||
store.commit("user/setIsPickUp", false);
|
||||
store.commit("user/setIsSign", false);
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
if (users.isDelivery) {
|
||||
if (users.paymentMethod === 2) {
|
||||
store.commit("user/setIsCollect", true);
|
||||
} else {
|
||||
store.commit("user/setIsSign", true);
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: "/pages/details/waybill",
|
||||
});
|
||||
} else {
|
||||
if (users.paymentMethod === 2) {
|
||||
store.commit("user/setIsCollect", true);
|
||||
}
|
||||
|
||||
uni.redirectTo({
|
||||
url: "/pages/details/index",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
227
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/scanPay.vue
Normal file
227
project-wl-kuaidiyuan-uniapp-vue3/pages/pay/scanPay.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<!-- 扫码支付页 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user