init
This commit is contained in:
shuhongfan
@@ -0,0 +1,46 @@
|
||||
<!--取派地址-->
|
||||
<template>
|
||||
<view class="boxBg">
|
||||
<view class="addressCon">
|
||||
<view class="item">
|
||||
<view class="sendIcon">{{ taskType === 1 ? "取" : "派" }}</view>
|
||||
<view class="addressInfo">
|
||||
<view
|
||||
><text class="name">{{ detailsData.senderName }}</text
|
||||
>{{ detailsData.senderPhone }}</view
|
||||
>
|
||||
<view>{{ detailsData.senderAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="receiveIcon">{{ taskType === 1 ? "派" : "收" }}</view>
|
||||
<view class="addressInfo">
|
||||
<view
|
||||
><text class="name">{{ detailsData.receiverName }}</text
|
||||
>{{ detailsData.receiverPhone }}</view
|
||||
>
|
||||
<view>{{ detailsData.receiverAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useStore } from "vuex";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user; //vuex获取、储存数据
|
||||
let taskType = users.taskType;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!--身份证验证-->
|
||||
<template>
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text v-if="detailsData.idCardNoVerify === 0 && !flag">
|
||||
身份验证（未验证）
|
||||
<icon class="iconTip"></icon>
|
||||
</text>
|
||||
<text v-else-if="detailsData.idCardNoVerify === 1 || flag">
|
||||
身份验证（验证通过）
|
||||
<!-- TODO 先保留-->
|
||||
<!-- <icon class="iconTip"></icon> -->
|
||||
</text>
|
||||
<text v-else>
|
||||
身份验证（验证未通过）
|
||||
<icon class="iconTip"></icon>
|
||||
</text>
|
||||
</view>
|
||||
<view class="identityBox" v-if="detailsData.idCardNoVerify !== 1 && !flag">
|
||||
<view>
|
||||
<uni-forms ref="customForm">
|
||||
<uni-forms-item name="name"
|
||||
><uni-easyinput
|
||||
class="item"
|
||||
v-model="name"
|
||||
placeholder="请输入真实姓名"
|
||||
/></uni-forms-item>
|
||||
<uni-forms-item name="idCard"
|
||||
><uni-easyinput
|
||||
class="item"
|
||||
v-model="idCard"
|
||||
placeholder="请输入身份证号码"
|
||||
@blur="handleIdcard"
|
||||
/></uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="uni-btn concelBtn" @click="handleCheck">验证</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="identitySuccee" v-else>
|
||||
<view class="text" v-if="name !== ''">{{ name }}</view>
|
||||
<view class="text">{{
|
||||
idCard !== "" ? idCard : detailsData.idCardNo
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
// 验证
|
||||
import { validateIdentityCard } from "@/utils/validate";
|
||||
// 接口
|
||||
import { idCardCheck } from "@/pages/api/index.js";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
// ------定义变量------
|
||||
const customForm = ref();
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
// 表单数据
|
||||
let idCard = ref(""); //身份证号
|
||||
let name = ref(""); //身份证号
|
||||
let isValidate = ref(false); //输入身份证是否验证成功
|
||||
let flag = ref(null); //是否校验成功
|
||||
// ------定义方法------
|
||||
onMounted(() => {
|
||||
if (users.cardData) {
|
||||
name.value = users.cardData.name;
|
||||
name.idCard = users.cardData.idCard;
|
||||
flag.value = true;
|
||||
}
|
||||
});
|
||||
// 身份校验
|
||||
const handleIdcard = () => {
|
||||
const validate = validateIdentityCard(idCard.value);
|
||||
if (validate) {
|
||||
isValidate.value = true;
|
||||
} else {
|
||||
return uni.showToast({
|
||||
title: validate,
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
// 验证身份号
|
||||
const handleCheck = async () => {
|
||||
const params = {
|
||||
name: name.value,
|
||||
idCard: idCard.value,
|
||||
};
|
||||
store.commit("user/setCardData", params);
|
||||
await idCardCheck(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
flag.value = res.data.flag;
|
||||
return uni.showToast({
|
||||
title: "验证成功",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
customForm,
|
||||
idCard,
|
||||
name,
|
||||
isValidate,
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view class="uniPopup detailPopup">
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view class="tit">
|
||||
<text>{{
|
||||
type === 1
|
||||
? "物品名称"
|
||||
: type === 2
|
||||
? "付款方式"
|
||||
: type === 3
|
||||
? "备注"
|
||||
: "签收人"
|
||||
}}</text>
|
||||
<icon @click="dialogClose">关闭</icon>
|
||||
</view>
|
||||
<view class="popupContent">
|
||||
<!-- 物品名称 -->
|
||||
<view v-if="type === 1">
|
||||
<view class="goodBox">
|
||||
<view
|
||||
v-for="(item, index) in GoodsData"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="index === isActive ? 'active' : ''"
|
||||
@click="handleActive(index, item)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isShowGoodInfo" class="other">
|
||||
<textarea
|
||||
v-model="otherData"
|
||||
placeholder="请输入物品信息"
|
||||
@input="monitorInput"
|
||||
:maxlength="goodMaxLength"
|
||||
></textarea>
|
||||
<text class="numText" :class="goodNumVal === 0 ? 'tip' : ''"
|
||||
>{{ goodNumVal }}/10</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 付款方式 -->
|
||||
<view v-else-if="type === 2">
|
||||
<view
|
||||
class="typeItem"
|
||||
v-for="(item, index) in PayMethodData"
|
||||
:key="index"
|
||||
@click="checkbox(index)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<view class="checkRadio"
|
||||
><radio
|
||||
:value="String(index)"
|
||||
:class="index === current ? 'active' : ''"
|
||||
:checked="index === current"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 备注 -->
|
||||
<view v-else-if="type === 3" class="remark">
|
||||
<textarea
|
||||
v-model="remark"
|
||||
placeholder="补充说明"
|
||||
@input="textInput"
|
||||
:maxlength="remarkMaxLength"
|
||||
></textarea>
|
||||
<text class="numText" :class="remarkNumVal === 0 ? 'tip' : ''"
|
||||
>{{ remarkNumVal }}/30</text
|
||||
>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 签收人 -->
|
||||
<view v-else>
|
||||
<view
|
||||
class="typeItem"
|
||||
v-for="(item, index) in SignData"
|
||||
:key="index"
|
||||
@click="checkbox(index)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<view class="checkRadio"
|
||||
><radio
|
||||
:value="String(index)"
|
||||
:class="index === current ? 'active' : ''"
|
||||
:checked="index === current"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<view class="btnBox"
|
||||
><button class="btn-default uni-mini" @click="handleSubmit">
|
||||
确定
|
||||
</button></view
|
||||
>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, watch } from "vue";
|
||||
import { validateTextLength } from "@/utils/index.js";
|
||||
// 基本数据
|
||||
import { PayMethodData, GoodsData, SignData } from "@/utils/commonData.js";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
watch(props, (newValue, olcValue) => {
|
||||
if (newValue !== undefined) {
|
||||
remark.value = newValue.detailsData.remark;
|
||||
if (newValue.type === 2) {
|
||||
if (newValue.detailsData.paymentMethod === 1) {
|
||||
current.value = 0;
|
||||
} else {
|
||||
current.value = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
// 定义ref 获取子组件方法或者值
|
||||
const popup = ref();
|
||||
const emit = defineEmits(); //子组件向父组件事件传递
|
||||
let current = ref(0); //当前触发付款方式的值
|
||||
let isActive = ref(0); //当前触发物品名称的值
|
||||
let otherData = ref(""); //自定义其他物品信息
|
||||
let goodNumVal = ref(0); //其他自定义的字节数控制值
|
||||
let remarkNumVal = ref(0); //备注字节数控制值
|
||||
let remark = ref(""); //备注
|
||||
let goodMaxLength = ref(10);
|
||||
let remarkMaxLength = ref(30);
|
||||
let isShowGoodInfo = ref(false); //控制其他文本域的显示/隐藏
|
||||
// ------定义方法------
|
||||
// 确定
|
||||
const handleSubmit = () => {
|
||||
// type=1 物品名称 type=2 付款方式 type=3 备注
|
||||
if (props.type === 1) {
|
||||
let val = null;
|
||||
if (isShowGoodInfo.value) {
|
||||
if (otherData.value === "") {
|
||||
return uni.showToast({
|
||||
title: "请输入物品信息",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
val = otherData.value;
|
||||
} else {
|
||||
val = GoodsData[isActive.value].label;
|
||||
}
|
||||
emit("getGoodType", val);
|
||||
} else if (props.type === 2) {
|
||||
emit("getPayMethod", PayMethodData[current.value].label);
|
||||
} else if (props.type === 3) {
|
||||
emit("getRemark", remark.value);
|
||||
} else {
|
||||
emit("getSignType", SignData[current.value].value);
|
||||
}
|
||||
dialogClose();
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = (index) => {
|
||||
current.value = index;
|
||||
};
|
||||
// 选择物品
|
||||
const handleActive = (index, item) => {
|
||||
if (item.label === "其他") {
|
||||
isShowGoodInfo.value = true;
|
||||
} else {
|
||||
isShowGoodInfo.value = false;
|
||||
}
|
||||
isActive.value = index;
|
||||
};
|
||||
// 打开弹层
|
||||
const dialogOpen = () => {
|
||||
popup.value.open();
|
||||
};
|
||||
// 关闭弹层
|
||||
const dialogClose = () => {
|
||||
popup.value.close();
|
||||
};
|
||||
// 其他自定义的名称控制10个字符
|
||||
const monitorInput = () => {
|
||||
nextTick(() => {
|
||||
let leng = validateTextLength(otherData.value);
|
||||
if (leng >= 10) {
|
||||
goodMaxLength.value = leng;
|
||||
} else {
|
||||
goodMaxLength.value = 20;
|
||||
}
|
||||
goodNumVal.value = Math.floor(leng);
|
||||
});
|
||||
};
|
||||
// 备注控制50个字符
|
||||
const textInput = () => {
|
||||
nextTick(() => {
|
||||
let leng = validateTextLength(remark.value);
|
||||
if (leng >= 30) {
|
||||
remarkMaxLength.value = leng;
|
||||
} else {
|
||||
remarkMaxLength.value = 60;
|
||||
}
|
||||
remarkNumVal.value = Math.floor(leng);
|
||||
});
|
||||
};
|
||||
// 向父组件暴露方法
|
||||
defineExpose({
|
||||
dialogOpen,
|
||||
current,
|
||||
});
|
||||
</script>
|
||||
667
project-wl-kuaidiyuan-uniapp-vue3/pages/details/index.scss
Normal file
667
project-wl-kuaidiyuan-uniapp-vue3/pages/details/index.scss
Normal file
@@ -0,0 +1,667 @@
|
||||
body,
|
||||
uni-page-body,
|
||||
uni-page-head,
|
||||
.uni-page-head {
|
||||
background-color: var(--neutral-color-background) !important;
|
||||
}
|
||||
.detailBox {
|
||||
padding-bottom: 186rpx;
|
||||
.boxBg {
|
||||
margin-top: 32rpx;
|
||||
padding: 28rpx 26rpx;
|
||||
|
||||
}
|
||||
::v-deep .tit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > text {
|
||||
flex: 1;
|
||||
color: var(--neutral-color-font);
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.copy {
|
||||
background: url(@/static/icon20.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 24rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
.goodsSelect {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.iconTip {
|
||||
background: var(--essential-color-red);
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.textInfo {
|
||||
color: var(--neutral-color-main);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
width: 400rpx;
|
||||
// padding-right: 20rpx;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.freight {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--neutral-color-background);
|
||||
padding: 36rpx 0 12rpx;
|
||||
margin-top: 16rpx;
|
||||
view {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
text {
|
||||
font-size: var(--font-size-12);
|
||||
color: var(--neutral-color-font);
|
||||
padding-left: 10rpx;
|
||||
text {
|
||||
color: var(--essential-color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep uni-input {
|
||||
width: 120rpx;
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--neutral-color-main);
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
min-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnBox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 10rpx;
|
||||
.btn-default {
|
||||
box-shadow: 0 7px 12px 0 rgba(239, 79, 63, 0.41);
|
||||
}
|
||||
}
|
||||
::v-deep .identityBox {
|
||||
padding: 8rpx 0 0;
|
||||
margin-top: 28rpx;
|
||||
border-top: 1px solid var(--neutral-color-background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > view {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.concelBtn {
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 40rpx !important;
|
||||
}
|
||||
.uni-forms {
|
||||
flex: 1;
|
||||
.is-input-border {
|
||||
border: 0 none !important;
|
||||
}
|
||||
.uni-easyinput__content-input {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
.uni-forms-item__inner {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
}
|
||||
::v-deep .identitySuccee {
|
||||
padding: 20rpx 0;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
:deep(.pickupBox){
|
||||
padding-bottom: 0;
|
||||
.addressCon{
|
||||
.item{
|
||||
padding: 10rpx 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .addressCon {
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 16rpx 0;
|
||||
.name {
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .goodsCon {
|
||||
.item {
|
||||
&:first-child {
|
||||
padding-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 弹层
|
||||
::v-deep .detailPopup {
|
||||
.uni-popup__wrapper {
|
||||
background: var(--neutral-color-white) !important;
|
||||
border-radius: 32rpx 32rpx 0 0 !important;
|
||||
.btn-default {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.tit {
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
display: flex;
|
||||
padding: 0 44rpx;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
icon {
|
||||
text-align: right;
|
||||
background: url(@/static/icon21.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.typeItem {
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
display: flex;
|
||||
padding: 0 44rpx;
|
||||
align-items: center;
|
||||
height: 116rpx;
|
||||
line-height: 116rpx;
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.goodBox {
|
||||
padding: 0 32rpx 0 4rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-content: flex-start;
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
|
||||
flex: 0 0 29.3%;
|
||||
margin-top: 40rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background: var(--neutral-color-background);
|
||||
border-radius: 20rpx;
|
||||
margin-left: 28rpx;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid #ef4f3f;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: var(--neutral-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.other {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
margin: 40rpx 30rpx 0;
|
||||
background: var(--neutral-color-background);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.uni-textarea-textarea {
|
||||
height: 40rpx;
|
||||
}
|
||||
.numText {
|
||||
position: absolute;
|
||||
top: 28rpx;
|
||||
right: 24rpx;
|
||||
color: var(--neutral-color-font);
|
||||
.tip {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.remark {
|
||||
// height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
margin: 40rpx 30rpx 0;
|
||||
background: var(--neutral-color-background);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
// .uni-textarea-textarea{
|
||||
// height: 40rpx;
|
||||
// }
|
||||
.numText {
|
||||
position: absolute;
|
||||
bottom: 28rpx;
|
||||
right: 24rpx;
|
||||
color: var(--neutral-color-font);
|
||||
.tip {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 运单详情
|
||||
.wayCon {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
color: var(--neutral-color-font);
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: var(--neutral-color-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
.remark {
|
||||
border-top: 1px solid var(--neutral-color-background);
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
padding: 30rpx 0;
|
||||
margin: 20rpx 0;
|
||||
.item {
|
||||
text-align: left;
|
||||
display: inherit;
|
||||
height: auto;
|
||||
line-height: 40rpx;
|
||||
&:last-child {
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .content {
|
||||
uni-cover-view {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
.bottmBox {
|
||||
background: var(--neutral-color-white);
|
||||
border-radius: 10px;
|
||||
position: fixed;
|
||||
top: 190rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding-top: 40rpx;
|
||||
.orderList {
|
||||
padding: 0 32rpx 40rpx;
|
||||
margin: 0 30rpx;
|
||||
height: calc(82vh - 20rpx);
|
||||
// height: 400px;
|
||||
overflow-y: scroll;
|
||||
.fontPostion {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
}
|
||||
& > .uni-cover-view {
|
||||
|
||||
uni-cover-view {
|
||||
// &:nth-child(1) {
|
||||
// .logistics-orderInfo-right {
|
||||
// margin-left: 12rpx;
|
||||
// }
|
||||
// }
|
||||
// &:nth-child(2) {
|
||||
// .logistics-orderInfo-right {
|
||||
// margin-left: 10rpx;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
padding-bottom: 60rpx;
|
||||
border-left: 1px dotted #ccc;
|
||||
&:last-child {
|
||||
border: 0 none;
|
||||
padding: 0;
|
||||
}
|
||||
.iconBg {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: var(--neutral-color-font);
|
||||
line-height: 52rpx;
|
||||
color: var(--neutral-color-white);
|
||||
text-align: center;
|
||||
padding: 10rpx 0 0 0rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -26rpx;
|
||||
icon {
|
||||
width: 30rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
&.harvest {
|
||||
background: var(--essential-color-red);
|
||||
}
|
||||
.pickUp {
|
||||
background: url(@/static/icon24.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.transport {
|
||||
background: url(@/static/icon25.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 37rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
.rtext {
|
||||
padding-left: 48rpx;
|
||||
line-height: 34rpx;
|
||||
font-size: var(--font-size-12);
|
||||
.tit {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-16);
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.time {
|
||||
color: var(--neutral-color-font);
|
||||
padding: 2rpx 0 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ::v-deep .logistics-orderInfo {
|
||||
// &.logistics-orderInfo-item.active {
|
||||
// .logistics-orderInfo-left {
|
||||
// .iconBg {
|
||||
// background-color: #e63e32 !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.logistics-orderInfo-item {
|
||||
// & > .uni-cover-view {
|
||||
// // display: flex;
|
||||
// // padding-bottom: 60rpx;
|
||||
// }
|
||||
|
||||
// .logistics-orderInfo-left {
|
||||
// float: left;
|
||||
// // text-align: center;
|
||||
// // .gray.circle {
|
||||
// // background-color: #818181;
|
||||
// // }
|
||||
// .logistics-orderInfo-item.active {
|
||||
// .logistics-orderInfo-left {
|
||||
// .circle {
|
||||
// background-color: #e63e32 !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .circle {
|
||||
// position: relative;
|
||||
// // background-color: #818181;
|
||||
// right: 20rpx;
|
||||
// width: 52rpx;
|
||||
// height: 52rpx;
|
||||
// line-height: 52rpx;
|
||||
// font-size: 24rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// color: #818181;
|
||||
// image {
|
||||
// width: 40rpx;
|
||||
// height: 40rpx;
|
||||
// }
|
||||
// .uni-cover-view {
|
||||
// width: 52rpx;
|
||||
// // height: 52rpx;
|
||||
// // line-height: 52rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
// .point {
|
||||
// width: 10rpx;
|
||||
// height: 10rpx;
|
||||
// border-radius: 5rpx;
|
||||
// background-color: #818181;
|
||||
// margin-right: 40rpx;
|
||||
// }
|
||||
// .line {
|
||||
// min-height:11vh;
|
||||
// width: 2rpx;
|
||||
// background: #dfdfdf;
|
||||
// border-left: 0.5rpx dashed #dfdfdf;
|
||||
// position: relative;
|
||||
// left: 4rpx;
|
||||
// }
|
||||
// .line.short {
|
||||
// height: 120rpx;
|
||||
// }
|
||||
// .iconBg {
|
||||
// width: 52rpx;
|
||||
// height: 52rpx;
|
||||
// background: var(--neutral-color-font);
|
||||
// line-height: 52rpx;
|
||||
// color: var(--neutral-color-white);
|
||||
// text-align: center;
|
||||
// box-sizing: border-box;
|
||||
// border-radius: 50%;
|
||||
// // display: flex;
|
||||
// // align-items: center;
|
||||
// // justify-content: center;
|
||||
// uni-cover-image {
|
||||
// width: 26rpx;
|
||||
// height: 26rpx;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// display: flex;
|
||||
// padding-left: 12rpx;
|
||||
// margin-left: 6rpx;
|
||||
// img{
|
||||
// width: 30rpx;
|
||||
// height: 20rpx;
|
||||
// }
|
||||
// }
|
||||
// &.harvest {
|
||||
// background: var(--essential-color-red);
|
||||
// }
|
||||
// .pickUp {
|
||||
// background: url(@/static/icon24.png) no-repeat;
|
||||
// background-size: contain;
|
||||
// }
|
||||
// .transport {
|
||||
// background: url(@/static/icon25.png) no-repeat;
|
||||
// background-size: contain;
|
||||
// width: 37rpx;
|
||||
// height: 28rpx;
|
||||
// }
|
||||
// .delivery {
|
||||
// background: url(@/static/paisong.png) no-repeat;
|
||||
// background-size: contain;
|
||||
// width: 37rpx;
|
||||
// height: 28rpx;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .logistics-orderInfo-right {
|
||||
// .status {
|
||||
// font-size: 32rpx;
|
||||
// color: #2a2929;
|
||||
// font-weight: bold;
|
||||
// margin-bottom: 6rpx;
|
||||
// }
|
||||
// .time {
|
||||
// margin-bottom: 6rpx;
|
||||
// }
|
||||
// .time,
|
||||
// .desc {
|
||||
// font-size: 24rpx;
|
||||
// color: #818181;
|
||||
// }
|
||||
// .desc {
|
||||
// float: left;
|
||||
// white-space: normal;
|
||||
// line-height: normal;
|
||||
// line-height: 34rpx;
|
||||
// min-height: 120rpx;
|
||||
// }
|
||||
// .desc.active {
|
||||
// // font-weight: bold;
|
||||
// color: #2a2929;
|
||||
// min-height: 160rpx;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .up {
|
||||
// animation: upAmimat 500ms infinite;
|
||||
// }
|
||||
// .down {
|
||||
// animation: downAmimat 500ms infinite;
|
||||
// }
|
||||
// @keyframes upAmimat {
|
||||
// from {
|
||||
// top: 200px;
|
||||
// }
|
||||
// to {
|
||||
// top: 200px;
|
||||
// }
|
||||
// }
|
||||
// @keyframes downAmimat {
|
||||
// from {
|
||||
// bottom: 0px;
|
||||
// }
|
||||
// to {
|
||||
// bottom: 0px;
|
||||
// }
|
||||
// }
|
||||
|
||||
::v-deep .logistics-orderInfo{
|
||||
&.logistics-orderInfo-item.active{
|
||||
.red{
|
||||
// font-weight: bold;
|
||||
color:#E63E32!important;
|
||||
|
||||
}
|
||||
.logistics-orderInfo-left{
|
||||
.circle{
|
||||
background-color:#E63E32!important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.logistics-orderInfo-item{
|
||||
|
||||
display: flex;
|
||||
.logistics-orderInfo-left{
|
||||
// text-align: center;
|
||||
.circle{
|
||||
background-color:#818181 ;
|
||||
}
|
||||
.circle{
|
||||
position: relative;
|
||||
right: 20rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
text-align: center;
|
||||
line-height: 52rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
image{
|
||||
// width:30rpx ;
|
||||
// height:20rpx ;
|
||||
}
|
||||
.ys{
|
||||
background: url(@/static/yunshuzhong.png) no-repeat;
|
||||
background-size: contain;
|
||||
width:36rpx ;
|
||||
height:28rpx ;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
.ps{
|
||||
background: url(@/static/paisong.png) no-repeat;
|
||||
background-size: contain;
|
||||
width:34rpx ;
|
||||
height:32rpx ;
|
||||
margin-left:2rpx;
|
||||
}
|
||||
}
|
||||
.point{
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background-color:#818181 ;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
.line{
|
||||
height: 154rpx;
|
||||
width: 2rpx;
|
||||
border-left: 2rpx dashed #DFDFDF;
|
||||
position: relative;
|
||||
left: 4rpx;
|
||||
}
|
||||
.line.short{
|
||||
height:120rpx ;
|
||||
}
|
||||
|
||||
}
|
||||
.logistics-orderInfo-right{
|
||||
.status{
|
||||
font-size: 32rpx;
|
||||
color:#2A2929 ;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.time{
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.time,.desc{
|
||||
font-size: 24rpx;
|
||||
color:#818181 ;
|
||||
}
|
||||
// .desc .red{
|
||||
// // font-weight: bold;
|
||||
// color:#E63E32!important;
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
385
project-wl-kuaidiyuan-uniapp-vue3/pages/details/index.vue
Normal file
385
project-wl-kuaidiyuan-uniapp-vue3/pages/details/index.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<!-- 去取件详情页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||||
<!-- end -->
|
||||
<view class="detailBox">
|
||||
<!-- 订单号 -->
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text>
|
||||
<text>订单号：SD{{ detailsData.orderId }}</text>
|
||||
|
||||
<icon @click="handleCopy" class="copy"></icon>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 取件信息 -->
|
||||
<Address :detailsData="detailsData" class="pickupBox"></Address>
|
||||
<!-- end -->
|
||||
<!-- 物品信息 -->
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text>物品名称</text>
|
||||
<view class="goodsSelect" @click="handleGoods" v-if="!isPickUp || (users.paymentMethod === 2 && !isCollect)">
|
||||
<text class="textInfo">{{ detailsData.goodsType }}</text>
|
||||
<icon class="nextIcon"></icon>
|
||||
</view>
|
||||
<view class="goodsSelect" v-else>
|
||||
<text class="textInfo">{{ detailsData.goodsType }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 计算物品快递费 -->
|
||||
<view class="boxBg">
|
||||
<GoodsInfo ref="goods" :detailsData="detailsData" @getFreight="getFreight"></GoodsInfo>
|
||||
<view class="freight">
|
||||
<view>
|
||||
总计金额
|
||||
<text>
|
||||
<text>*</text>
|
||||
基础运费+增值服务费
|
||||
</text>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="!isPickUp || (users.paymentMethod === 2 && !isCollect)">
|
||||
<input v-if="isFreigthEdit" type="number" v-model="freight" @blur="handleAmount" />
|
||||
<text @click="handleFreight" v-else>{{ detailsData.freight }}</text>
|
||||
<text>元</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<text>{{ users.payData.tradingAmount }}</text>
|
||||
<text>元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 付款方式 -->
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text>付款方式</text>
|
||||
<view class="goodsSelect" @click="handlePayMethod" v-if="!isPickUp || (users.paymentMethod === 2 && !isCollect)">
|
||||
<text class="textInfo">{{ detailsData.paymentMethod === 1 ? '寄付' : '到付' }}</text>
|
||||
<icon class="nextIcon"></icon>
|
||||
</view>
|
||||
<view class="goodsSelect" v-else>
|
||||
<text class="textInfo">{{ detailsData.paymentMethod === 1 ? '寄付' : '到付' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 备注 -->
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text>备注</text>
|
||||
<view class="goodsSelect" @click="handleRemark" v-if="!isPickUp || (users.paymentMethod === 2 && !isCollect)">
|
||||
<text class="textInfo">{{ detailsData.remark }}</text>
|
||||
<icon class="nextIcon"></icon>
|
||||
</view>
|
||||
<view class="goodsSelect" v-else>
|
||||
<text class="textInfo">{{ detailsData.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 身份验证（未验证） -->
|
||||
<Authentication ref="card" :detailsData="detailsData"></Authentication>
|
||||
<!-- end -->
|
||||
<view class="btnBox">
|
||||
<button v-if="isPickUp && users.paymentMethod === 1" class="btn-default uni-mini" @click="handleReceipt">去收款</button>
|
||||
<button v-if="isCollect && isPickUp && users.paymentMethod === 2" class="btn-default uni-mini btn-forbid">已取件</button>
|
||||
<button v-if="!isPickUp || (users.paymentMethod === 2 && !isCollect)" class="btn-default uni-mini" @click="handleSubmit">去取件</button>
|
||||
</view>
|
||||
<!-- 物品名称、付款选择、备注弹层 -->
|
||||
<Uppop ref="method" @getGoodType="getGoodType" @getPayMethod="getPayMethod" @getRemark="getRemark" :detailsData="detailsData" :type="type"></Uppop>
|
||||
<!-- end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
// 接口
|
||||
import { getDetail, getPickup } from '@/pages/api/index.js';
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from '@/components/uni-nav/index.vue';
|
||||
// 地址
|
||||
import Address from './components/address.vue';
|
||||
// 物品信息
|
||||
import GoodsInfo from '@/components/uni-goods/index.vue';
|
||||
// 身份认证
|
||||
import Authentication from './components/authentication.vue';
|
||||
// 付款方式先择、物品名称弹层
|
||||
import Uppop from './components/uppop.vue';
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
// 定义ref 获取子组件方法或者值
|
||||
const goods = ref(); //
|
||||
const card = ref(); //
|
||||
const method = ref(); //
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
// 获取列表页传过来的id 有两种方法
|
||||
// 第一种
|
||||
// const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
|
||||
// const currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
||||
// 第二种 用vuexs
|
||||
const taskId = store.state.user.taskId; //用vuex获取列表页传过来的任务id
|
||||
const title = ref('去取件'); //nav标题
|
||||
let type = ref(1); //物品名称和付款方式公用一个弹层，根据不同type值来做判断 物品:1,付款方式:2,备注:3
|
||||
const detailsData = ref({}); //详情数据
|
||||
let isFreigthEdit = ref(false);
|
||||
let freight = ref(0); //金额
|
||||
let isPickUp = ref(false); //是否去取件
|
||||
let isCollect = ref(false); //到付的情况下，是否触发去取件后到，显示按钮为已取件
|
||||
const stopClick = ref(true); //防止连续提交
|
||||
// 监听修改金额数值，小数点后保留一位
|
||||
watch(freight, (newValue, oldValue) => {
|
||||
const val = Number(newValue);
|
||||
// 最大输入99999，最小输入1
|
||||
nextTick(() => {
|
||||
if (val < 99999 && val > 1) {
|
||||
freight.value = parseInt(val * 100) / 100;
|
||||
}
|
||||
if (val > 99999) {
|
||||
freight.value = 99999;
|
||||
}
|
||||
});
|
||||
});
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
getDetails(taskId);
|
||||
//
|
||||
if (users.isPickUp) {
|
||||
isPickUp.value = true;
|
||||
} else {
|
||||
isPickUp.value = false;
|
||||
}
|
||||
//
|
||||
if (users.isCollect) {
|
||||
isCollect.value = true;
|
||||
} else {
|
||||
isCollect.value = false;
|
||||
}
|
||||
});
|
||||
// ------定义方法------
|
||||
// 获取详情
|
||||
const getDetails = async id => {
|
||||
await getDetail(id).then(res => {
|
||||
detailsData.value = res.data;
|
||||
freight.value = detailsData.value.freight;
|
||||
if (users.paymentMethod) {
|
||||
if (users.paymentMethod === 1) {
|
||||
detailsData.value.paymentMethod = 1;
|
||||
} else {
|
||||
detailsData.value.paymentMethod = 2;
|
||||
}
|
||||
}
|
||||
goods.value.weight = Number(detailsData.value.weight);
|
||||
goods.value.volume = Number(detailsData.value.volume);
|
||||
// 设置当前是到付还是寄付
|
||||
store.commit('user/setPaymentMethod', detailsData.value.paymentMethod);
|
||||
store.commit('user/setDetailsData', res.data);
|
||||
});
|
||||
};
|
||||
|
||||
// 去取件
|
||||
const handleSubmit = async () => {
|
||||
if (stopClick.value) {
|
||||
stopClick.value = false;
|
||||
// 表单校验
|
||||
const cards = card.value;
|
||||
const good = goods.value;
|
||||
// 未验证的身份证需要做校验
|
||||
if (!cards.isValidate && detailsData.value.idCardNoVerify !== 1) {
|
||||
stopClick.value = true;
|
||||
return uni.showToast({
|
||||
title: '请输入正确的身份证',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
return false;
|
||||
} else {
|
||||
// 网络慢的时候添加按钮loading
|
||||
let times =
|
||||
setTimeout(()=>{
|
||||
uni.showLoading({
|
||||
title: 'loading',
|
||||
});
|
||||
},500)
|
||||
const details = detailsData.value;
|
||||
|
||||
// 要提交给后端的参数
|
||||
if (freight.value !== 0) {
|
||||
details.freight = freight.value;
|
||||
}
|
||||
const params = {
|
||||
amount: good.freightData ? good.freightData : Number(details.freight), //总额
|
||||
id: taskId, //任务id
|
||||
goodName: details.goodsType, //物品名称
|
||||
idCard: details.idCardNoVerify === 1 ? null : cards.idCard, //身份证号
|
||||
name: details.idCardNoVerify === 1 ? null : cards.name, //真实姓名
|
||||
payMethod: details.paymentMethod, //付款方式
|
||||
remark: details.remark, //备注
|
||||
volume: Number(good.volume), //体积
|
||||
weight: good.weight //重量
|
||||
};
|
||||
// 存储信息，二维码支付页面要用
|
||||
const payData = {
|
||||
memo: details.remark,
|
||||
productOrderNo: details.orderId,
|
||||
tradingAmount: params.amount
|
||||
};
|
||||
store.commit('user/setPayData', payData);
|
||||
|
||||
await getPickup(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
// 操作成功后清除loading
|
||||
setTimeout(function () {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
clearTimeout(times)
|
||||
// TODO先保留次代码，后期需求可能有变更
|
||||
// // const type = details.paymentMethod;
|
||||
// // 跳转到取件成功页
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/pay/index?type=' + type
|
||||
// });
|
||||
// store.commit('user/setIsPickUp', true);
|
||||
}
|
||||
setTimeout(()=>{
|
||||
stopClick.value = true;
|
||||
},3000)
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
return uni.showToast({
|
||||
title: err.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
const type = details.paymentMethod;
|
||||
|
||||
// // 跳转到取件成功页
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/index?type=' + type
|
||||
});
|
||||
store.commit('user/setIsPickUp', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 复制订单号
|
||||
const handleCopy = () => {
|
||||
uni.setClipboardData({
|
||||
data: detailsData.value.orderId, // 要保存的内容
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 是否修改总计金额
|
||||
const handleFreight = () => {
|
||||
isFreigthEdit.value = true;
|
||||
};
|
||||
// 获取运费金额
|
||||
const getFreight = val => {
|
||||
detailsData.value.freight = val;
|
||||
freight.value = detailsData.value.freight;
|
||||
};
|
||||
// 输入金额是否小于1
|
||||
const handleAmount = () => {
|
||||
nextTick(() => {
|
||||
if (freight.value < 1) {
|
||||
freight.value = 1;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 物品
|
||||
// 获取物品名称，获取子组件传的值
|
||||
const getGoodType = val => {
|
||||
detailsData.value.goodsType = val;
|
||||
};
|
||||
// 物品名称
|
||||
const handleGoods = () => {
|
||||
type.value = 1;
|
||||
handleOpen();
|
||||
};
|
||||
// 付款方式
|
||||
// 获取付款方式，获取子组件传的值
|
||||
const getPayMethod = val => {
|
||||
if (val === '寄付') {
|
||||
detailsData.value.paymentMethod = 1;
|
||||
} else {
|
||||
detailsData.value.paymentMethod = 2;
|
||||
}
|
||||
store.commit('user/setPaymentMethod', detailsData.value.paymentMethod);
|
||||
};
|
||||
// 付款方式选择
|
||||
const handlePayMethod = () => {
|
||||
type.value = 2;
|
||||
handleOpen();
|
||||
};
|
||||
// 备注
|
||||
// 获取备注内容，获取子组件传的值
|
||||
const getRemark = val => {
|
||||
detailsData.value.remark = val;
|
||||
};
|
||||
// 打开弹层写备注
|
||||
const handleRemark = () => {
|
||||
if (users.isBack !== 'collect') {
|
||||
type.value = 3;
|
||||
handleOpen();
|
||||
}
|
||||
};
|
||||
// 打开弹层
|
||||
const handleOpen = () => {
|
||||
method.value.dialogOpen();
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
store.commit('user/setPaymentMethod', null);
|
||||
store.commit('user/setCardData', null);
|
||||
store.commit('user/setIsPickUp', false);
|
||||
store.commit('user/setIsCollect', false);
|
||||
if (users.newType === 301) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/system?title=取件相关&type=301'
|
||||
});
|
||||
} else if (users.detailType === 1) {
|
||||
// 如果是从历史取派的取件列表进入的，返回的时候进入到历史取派列表
|
||||
store.commit('user/setTabIndex', 0);
|
||||
uni.redirectTo({
|
||||
url: '/pages/history/index'
|
||||
});
|
||||
} else if (users.isSearch) {
|
||||
store.commit('user/setIsSearch', false);
|
||||
uni.redirectTo({
|
||||
url: '/pages/search/index'
|
||||
});
|
||||
} else {
|
||||
store.commit('user/setTabIndex', 0);
|
||||
uni.redirectTo({
|
||||
url: '/pages/pickup/index'
|
||||
});
|
||||
}
|
||||
};
|
||||
// 去收款
|
||||
const handleReceipt = () => {
|
||||
store.commit('user/setPayData', {});
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/scanPay'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
183
project-wl-kuaidiyuan-uniapp-vue3/pages/details/orderMap.vue
Normal file
183
project-wl-kuaidiyuan-uniapp-vue3/pages/details/orderMap.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- 订单跟踪详情页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||||
<!-- end -->
|
||||
<view class="content">
|
||||
<view class="bottmBox">
|
||||
<view class="orderList">
|
||||
<view
|
||||
class="logistics-orderInfo logistics-orderInfo-item"
|
||||
:class="[index === 0 ? 'active' : '']"
|
||||
:key="index"
|
||||
v-for="(item, index) in markers.value"
|
||||
>
|
||||
<view class="logistics-orderInfo-left">
|
||||
<view
|
||||
class="circle gray"
|
||||
v-if="['已拒收', '已签收', '已取件'].includes(item.status)"
|
||||
>
|
||||
{{
|
||||
item.status === "已拒收"
|
||||
? "拒"
|
||||
: item.status === "已签收"
|
||||
? "签"
|
||||
: "取"
|
||||
}}
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="circle gray"
|
||||
v-else-if="
|
||||
(index === 0 && ['运送中', '派送中'].includes(item.status)) ||
|
||||
(index > 0 && markers.value[index - 1].status !== '运送中')
|
||||
"
|
||||
>
|
||||
<image :class="item.status === '派送中' ? 'ys' : 'ps'"></image>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="point"
|
||||
v-else-if="
|
||||
index > 0 && markers.value[index - 1].status === '运送中'
|
||||
"
|
||||
></view>
|
||||
|
||||
<view
|
||||
class="line"
|
||||
v-if="!(index === markers.value.length - 1)"
|
||||
:class="item.status === '运送中' ? 'short' : ''"
|
||||
></view>
|
||||
</view>
|
||||
<view class="logistics-orderInfo-right">
|
||||
<view
|
||||
class="status"
|
||||
v-if="
|
||||
!(
|
||||
index > 0 &&
|
||||
markers.value[index - 1].status === '运送中' &&
|
||||
item.status === '运送中'
|
||||
)
|
||||
"
|
||||
>{{ item.status }}</view
|
||||
>
|
||||
<view class="time">{{ item.created }}</view>
|
||||
<view class="desc" v-html="strInit(item.info)"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- TODO此处代码保留 -->
|
||||
<!-- <map class="mapBox" :latitude="latitude" :longitude="longitude" scale="6">
|
||||
<cover-view class="bottmBox" v-if="markers.value">
|
||||
<cover-view class="orderList" scroll-top='0'>
|
||||
<cover-view class="logistics-orderInfo logistics-orderInfo-item" :class="[index===0?'active':'']" :key="index"
|
||||
v-for='(item,index) in markers.value'>
|
||||
<cover-view class="logistics-orderInfo-left">
|
||||
<cover-view class="circle" v-if="['已拒收','已签收','已取件'].includes(item.status)">
|
||||
<cover-view class="iconBg" ><cover-view class="fontPostion">{{item.status==='已拒收'?'拒':item.status==='已签收'?'签':'取'}}</cover-view></cover-view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="circle"
|
||||
v-else-if="index ===0 &&['运送中','派送中'].includes(item.status) || index>0 && markers.value[index-1].status !=='运送中'">
|
||||
<cover-view class="iconBg" ><cover-image :src="item.status==='派送中'?'../../static/yunshuzhong.png':'../../static/paisong.png'"></cover-image></cover-view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="point" v-else-if="index>0 && markers.value[index-1].status==='运送中'"></cover-view>
|
||||
|
||||
<cover-view class="line" v-if='!(index === markers.value.length - 1)'
|
||||
:class="item.status==='运送中'?'short':''"></cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="logistics-orderInfo-right">
|
||||
<cover-view class="status"
|
||||
v-if='!(index>0 && markers.value[index-1].status==="运送中" &&item.status==="运送中")'>
|
||||
{{item.status}}
|
||||
</cover-view>
|
||||
<cover-view class="time">{{item.created}}</cover-view>
|
||||
<cover-view class="desc"
|
||||
:class="index === 0|| item.status === 23010?'active':''"
|
||||
>{{item.info}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</map> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from "@/components/uni-nav/index.vue";
|
||||
// 导入接口
|
||||
import { getTracks } from "@/pages/api/index.js";
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user; //vuex获取、储存数据
|
||||
const title = ref("订单跟踪"); //nav标题
|
||||
const latitude = ref(39.91667); //维度
|
||||
const longitude = ref(116.41667); //经度
|
||||
// 起始位置
|
||||
const markers = reactive([]);
|
||||
// 路线点
|
||||
const polyline = reactive([
|
||||
// 第一条线
|
||||
{
|
||||
// 每个点的经纬度
|
||||
points: [
|
||||
{ longitude: 116.41667, latitude: 39.91667 },
|
||||
{ longitude: 118.78333, latitude: 32.05 },
|
||||
],
|
||||
// 路线颜色
|
||||
color: "#EF4F3F",
|
||||
// 线条宽度
|
||||
width: 12,
|
||||
},
|
||||
]);
|
||||
// ------生命周期------
|
||||
// ------定义方法------
|
||||
onMounted(() => {
|
||||
getTrack();
|
||||
});
|
||||
|
||||
//将后端传来的字符串中的数字变为红色
|
||||
const strInit = (value) => {
|
||||
let strText = value;
|
||||
let replaceText = [];
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
replaceText.push("" + i);
|
||||
}
|
||||
// 后面
|
||||
const str = value.split("【")[1];
|
||||
// 转换成html形式解析
|
||||
for (let i = 0; i < replaceText.length; i++) {
|
||||
var replaceString = `<span class='red'>` + replaceText[i] + `</span>`;
|
||||
strText = strText.replace(RegExp(replaceText[i], "g"), replaceString);
|
||||
}
|
||||
|
||||
// 这里再把这个红色替换成你想要的颜色
|
||||
// 由于在循环体里面数字会被替换，所以用了一个单词（red）来当成初始色
|
||||
strText = strText.replace(RegExp("red", "g"), "red");
|
||||
return strText;
|
||||
};
|
||||
// 获取运单轨迹
|
||||
const getTrack = async () => {
|
||||
await getTracks(users.detailsData.transportOrderId).then((res) => {
|
||||
if (res.code === 200) {
|
||||
markers.value = res.data.reverse();
|
||||
polyline[0].points = res.data.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/details/waybill",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
<style></style>
|
||||
450
project-wl-kuaidiyuan-uniapp-vue3/pages/details/waybill.vue
Normal file
450
project-wl-kuaidiyuan-uniapp-vue3/pages/details/waybill.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<!-- 已取件、已签收、已取消详情页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||||
<!-- end -->
|
||||
<view class="detailBox">
|
||||
<!-- 运单号 -->
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text>
|
||||
<!-- 当状态是去派送4\签收5的时候显示运单号 -->
|
||||
<text v-if="taskStatus === 4 || taskStatus === 5">运单号：{{ detailsData.transportOrderId }}</text>
|
||||
<text v-else>订单号：SD{{ detailsData.orderId }}</text>
|
||||
<!-- end -->
|
||||
<icon @click="handleCopy" class="copy"></icon>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 取件信息 -->
|
||||
<Address :detailsData="detailsData" class="pickupBox"></Address>
|
||||
<!-- end -->
|
||||
<!-- 物品信息 -->
|
||||
<view class="boxBg">
|
||||
<view class="wayCon">
|
||||
<view class="item">
|
||||
物品名称
|
||||
<text>{{ detailsData.goodsType }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
物品重量
|
||||
<text>{{ detailsData.weight }}kg</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
物品体积
|
||||
<text>{{ detailsData.volume }}m³</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
总计金额
|
||||
<text>{{ detailsData.freight }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wayCon remark">
|
||||
<view class="item">备注</view>
|
||||
<view class="item">
|
||||
<text>{{ detailsData.remark ? detailsData.remark : '暂无' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wayCon">
|
||||
<view class="item">
|
||||
付款方式
|
||||
<text>{{ detailsData.paymentMethod === 1 ? '寄付' : '到付' }}</text>
|
||||
</view>
|
||||
<!-- 当状态是已签收5,显示签收人 -->
|
||||
<view class="item" v-if="taskStatus === 5">
|
||||
签收人
|
||||
<text>{{ detailsData.paymentMethod === 1 ? '本人' : '代收' }}</text>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 当状态是去派件4的时候显示签收人选择、拒收、签收按钮 -->
|
||||
<view class="boxBg" v-if="detailsData.taskType === 2 && detailsData.status === 1">
|
||||
<view class="tit">
|
||||
<text>签收人</text>
|
||||
<view class="goodsSelect" v-if="(isSign && detailsData.paymentMethod == 1) || (isPickUp && detailsData.paymentMethod === 2)">
|
||||
<text class="textInfo">{{ detailsData.signRecipient === 1 ? '本人' : '代收' }}</text>
|
||||
</view>
|
||||
<view class="goodsSelect" @click="handleSignOpen" v-else>
|
||||
<text class="textInfo">{{ detailsData.signRecipient === 1 ? '本人' : '代收' }}</text>
|
||||
<icon class="nextIcon"></icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- {{detailsData.status}}--{{users.isNew}}--{{taskStatus}} -->
|
||||
<!-- <view
|
||||
class="btnBox subBtnBox"
|
||||
v-if="(detailsData.status===1&&!users.isNew)||(taskStatus === 4&&!users.isNew) || (taskStatus === 0 && users.taskType === 2) || (users.detailType === 2 && taskStatus === 4) || (detailsData.status===1&&users.detailType === 2 && taskStatus === 6)"
|
||||
>
|
||||
<button v-if="(!isSign && !isPickUp) || (isSign && !isPickUp && detailsData.paymentMethod === 2)" class="btn-default uni-sub-btn" @click="handleRejection(detailsData.id)">
|
||||
拒收
|
||||
</button>
|
||||
<button v-if="!isPickUp" class="btn-default" @click="handleSign(detailsData.id)">签收</button>
|
||||
<button v-if="isPickUp && detailsData.paymentMethod === 2" class="btn-default uni-mini" @click="handleReceipt">去收款</button>
|
||||
<button v-if="isSign && detailsData.paymentMethod == 1" class="btn-default uni-mini btn-forbid">已签收</button>
|
||||
</view> -->
|
||||
<!-- end -->
|
||||
<!-- 当状态是已取件2或者已签收5显示跟踪按钮 ||(taskStatus === 6&&users.taskType===2)-->
|
||||
<!-- <view class="btnBox" v-if="(detailsData.status===2&&users.isNew)||(taskStatus === 2&&users.isNew) || taskStatus === 5 || (users.detailType === 2 && taskStatus === 6 &&users.isNew) || (users.detailType === 1 && taskStatus === 6)">
|
||||
<button class="btn-default uni-mini" @click="handleOrder">订单跟踪</button>
|
||||
</view> -->
|
||||
<!-- end -->
|
||||
<!-- 付款方式paymentMethod：1寄付，2到付 -->
|
||||
<!-- 付款状态paymentStatus：1未付，2已付 -->
|
||||
<!-- 签收状态signStatus：1为已签收，2为拒收 -->
|
||||
<!-- 任务类型taskType：1为取件任务，2为派件任务 -->
|
||||
<!-- 任务状态status：1未取派，2完成，3取消 未派件的情况下显示的按钮 -->
|
||||
<!-- 派件 -->
|
||||
<view v-if="detailsData.taskType === 2">
|
||||
<!-- 未派件未签收-->
|
||||
<view class="btnBox subBtnBox" v-if="detailsData.status === 1">
|
||||
<button class="btn-default uni-sub-btn" v-if="detailsData.signStatus !== 1" @click="handleRejection(detailsData.id)">拒收</button>
|
||||
<button class="btn-default" v-if="detailsData.signStatus !== 1" @click="handleSign(detailsData.id)">签收</button>
|
||||
</view>
|
||||
<!-- end -->
|
||||
|
||||
<!-- 已经派件未付款或者已经签收 -->
|
||||
|
||||
<view class="btnBox subBtnBox" v-else>
|
||||
<!-- 签收后未付款，isPickUp代表未收款进入收款页，返回时候的显示去收款按钮 -->
|
||||
<!-- 已签收到的订单付但是未付款 应该显示去收款-->
|
||||
<button
|
||||
v-if="isPickUp && detailsData.paymentStatus === 1 && detailsData.paymentMethod === 2 && detailsData.signStatus === 1"
|
||||
class="btn-default uni-mini"
|
||||
@click="handleReceipt"
|
||||
>
|
||||
去收款
|
||||
</button>
|
||||
<!-- 签收状态是已签收，显示已签收按钮 -->
|
||||
<!-- isSign代表已经点击了签收，进入到了派件成功页，返回的时候要显示已经签收 -->
|
||||
<button v-if="isSign && detailsData.signStatus === 1" class="btn-default uni-mini btn-forbid">已签收</button>
|
||||
<!-- 当状态是已签收显示跟踪按钮-->
|
||||
<!-- 已派件 -->
|
||||
|
||||
<view v-if="detailsData.status === 2" class="btnBox">
|
||||
<!-- 未付款、从消息签收提醒 -->
|
||||
<button
|
||||
v-if="
|
||||
(!isPickUp && !isSign && detailsData.paymentMethod === 1) ||
|
||||
users.isNew ||
|
||||
(!isPickUp && !isSign && detailsData.paymentMethod === 2 && detailsData.paymentStatus === 1) ||
|
||||
(!isPickUp && !isSign && detailsData.paymentMethod === 2 && detailsData.paymentStatus === 2 && detailsData.signStatus == 1)
|
||||
"
|
||||
class="btn-default uni-mini"
|
||||
@click="handleOrder"
|
||||
>
|
||||
订单跟踪
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- end -->
|
||||
</view>
|
||||
|
||||
<!-- 取件 -->
|
||||
<view v-else>
|
||||
<!-- 当状态是已取件显示跟踪按钮-->
|
||||
|
||||
<view class="btnBox" v-if="detailsData.status === 2"><button class="btn-default uni-mini" @click="handleOrder">订单跟踪</button></view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<!-- 物品名称、付款选择、备注弹层 -->
|
||||
<Uppop ref="sign" @getSignType="getSignType" :type="type"></Uppop>
|
||||
<!-- end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
// 接口
|
||||
import { getDetail, rejection, tasksSign, PositionUpload } from '@/pages/api/index.js';
|
||||
import { positionUploadHandle } from '@/utils/index.js';
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from '@/components/uni-nav/index.vue';
|
||||
// 地址
|
||||
import Address from './components/address.vue';
|
||||
// 付款方式先择、物品名称弹层
|
||||
import Uppop from './components/uppop.vue';
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user; //vuex获取、储存数据
|
||||
const taskStatus = users.taskStatus; //获取列表页传过来的取件类型 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const sign = ref(); // 定义ref 获取子组件方法或者值
|
||||
const taskId = users.taskId;
|
||||
const title = users.taskStatus === 4 || (taskStatus === 0 && users.taskType === 2) ? '去派件' : '运单详情'; //nav标题
|
||||
let detailsData = ref({}); //详情数据
|
||||
let type = ref(0); //物品名称、付款方式、签收人公用一个弹层，根据不同type值来做判断 物品:1,付款方式:2,备注:3,签收人:4
|
||||
|
||||
let isPickUp = ref(false); //是否去签收
|
||||
let isCollect = ref(false); //到付的情况下，是否触发去取件后到，显示按钮为已取件
|
||||
let isSign = ref(false); //是否已签收
|
||||
const stopClick = ref(false); //防止连续提交
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
getDetails(taskId);
|
||||
if (users.isPickUp) {
|
||||
isPickUp.value = true;
|
||||
} else {
|
||||
isPickUp.value = false;
|
||||
}
|
||||
//
|
||||
if (users.isSign) {
|
||||
isSign.value = true;
|
||||
} else {
|
||||
isSign.value = false;
|
||||
}
|
||||
});
|
||||
// ------定义方法------
|
||||
// 获取详情
|
||||
const getDetails = async id => {
|
||||
await getDetail(id).then(res => {
|
||||
detailsData.value = res.data;
|
||||
// 设置当前是到付还是寄付
|
||||
store.commit('user/setPaymentMethod', detailsData.value.paymentMethod);
|
||||
store.commit('user/setDetailsData', res.data);
|
||||
});
|
||||
};
|
||||
// 拒收
|
||||
const handleRejection = async id => {
|
||||
if (stopClick.value) {
|
||||
return;
|
||||
}
|
||||
stopClick.value = true;
|
||||
// 网络慢的时候添加按钮loading
|
||||
let times =
|
||||
setTimeout(()=>{
|
||||
uni.showLoading({
|
||||
title: 'loading',
|
||||
});
|
||||
},500)
|
||||
await rejection(id)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
// 拒收之后上报位置
|
||||
positionUploadHandle(true);
|
||||
// 操作成功后清除loading
|
||||
setTimeout(function () {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
clearTimeout(times)
|
||||
let timeId = setTimeout(() => {
|
||||
// 如果是从全部派送进入到详情，拒收后要跳转到全部取派的 全部派件tab值为1
|
||||
if (taskStatus === 6 && users.detailType === 2) {
|
||||
store.commit('user/setTabIndex', 1);
|
||||
uni.redirectTo({
|
||||
url: '/pages/history/index'
|
||||
});
|
||||
} else {
|
||||
// 如果是派件列表tab是0
|
||||
store.commit('user/setTabIndex', 0);
|
||||
uni.redirectTo({
|
||||
url: '/pages/delivery/index'
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
uni.showToast({
|
||||
title: '用户拒收',
|
||||
icon: 'none',
|
||||
duration: '1000'
|
||||
});
|
||||
}
|
||||
stopClick.value = false;
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg,
|
||||
icon: 'none',
|
||||
duration: '1000'
|
||||
});
|
||||
});
|
||||
};
|
||||
// 签收
|
||||
const handleSign = async id => {
|
||||
if (stopClick.value) {
|
||||
return;
|
||||
}
|
||||
stopClick.value = true;
|
||||
// 网络慢的时候添加按钮loading
|
||||
let times =
|
||||
setTimeout(()=>{
|
||||
uni.showLoading({
|
||||
title: 'loading',
|
||||
});
|
||||
},500)
|
||||
const params = {
|
||||
id: id,
|
||||
signRecipient: detailsData.value.signRecipient
|
||||
};
|
||||
// 跳转到签收成功页
|
||||
await tasksSign(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
// 签收之后上报位置
|
||||
positionUploadHandle(true);
|
||||
// 操作成功后清除loading
|
||||
setTimeout(function () {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
clearTimeout(times)
|
||||
const type = detailsData.value.paymentMethod; //获取付款类型，根据付款类型来判断是否要进入付款页面
|
||||
|
||||
// 跳转到签收成功页
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/index?type=' + type
|
||||
});
|
||||
store.commit('user/setIsPickUp', true);
|
||||
store.commit('user/setIsDelivery', true); //因为取件和派件用的是一个公用页面，所以用isDelivery来判断是不是从派件进到签收成功页面的
|
||||
}
|
||||
stopClick.value = false;
|
||||
});
|
||||
};
|
||||
// 复制订单号
|
||||
const handleCopy = () => {
|
||||
uni.setClipboardData({
|
||||
data: detailsData.value.orderId, // 要保存的内容
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取签收人名称，获取子组件传的值
|
||||
const getSignType = val => {
|
||||
detailsData.value.signRecipient = val;
|
||||
};
|
||||
// 签收人
|
||||
const handleSignOpen = () => {
|
||||
type.value = 4;
|
||||
sign.value.dialogOpen();
|
||||
};
|
||||
// 订单追踪
|
||||
const handleOrder = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/orderMap'
|
||||
});
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
store.commit('user/setIsPickUp', false);
|
||||
store.commit('user/setIsSign', false);
|
||||
store.commit('user/setIsDelivery', false);
|
||||
// 根据不同的状态跳转到不同的页面
|
||||
// 待取件、已取件、已取消
|
||||
if (taskStatus === 1 || taskStatus === 2 || taskStatus === 3) {
|
||||
if (taskStatus === 1) {
|
||||
// 待取件
|
||||
store.commit('user/setTabIndex', 0);
|
||||
} else if (taskStatus === 2) {
|
||||
// 已取件
|
||||
store.commit('user/setTabIndex', 1);
|
||||
} else {
|
||||
// 已取消
|
||||
store.commit('user/setTabIndex', 2);
|
||||
}
|
||||
// 如果是从搜索列表进来的，返回的时候要返回到搜索列表
|
||||
if (users.isSearch) {
|
||||
store.commit('user/setIsSearch', false);
|
||||
uni.redirectTo({
|
||||
url: '/pages/search/index'
|
||||
});
|
||||
} else {
|
||||
// 如果是从待取件、已取件、已取消列表进来的，返回的时候要返回相对应的tab页
|
||||
uni.redirectTo({
|
||||
url: '/pages/pickup/index'
|
||||
});
|
||||
}
|
||||
} else if ((taskStatus === 5 && users.newType !== 302 && !users.isNew) || (taskStatus === 4 && users.detailType !== 2 && users.newType !== 304)) {
|
||||
if (taskStatus === 4) {
|
||||
store.commit('user/setTabIndex', 0);
|
||||
} else {
|
||||
store.commit('user/setTabIndex', 1);
|
||||
}
|
||||
if (users.isSearch) {
|
||||
store.commit('user/setIsSearch', false);
|
||||
uni.redirectTo({
|
||||
url: '/pages/search/index'
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/delivery/index'
|
||||
});
|
||||
}
|
||||
} else if (
|
||||
((taskStatus === 6 || taskStatus === 4) && users.detailType === 2) ||
|
||||
(users.detailType === 1 && users.newType !== 302) ||
|
||||
(taskStatus === 6 && users.detailType === 1)
|
||||
) {
|
||||
// 从历史记录派件进入到详情，返回的时候返回历史记录
|
||||
if (taskStatus === 6 && users.detailType === 1) {
|
||||
store.commit('user/setTabIndex', 0);
|
||||
}
|
||||
if (taskStatus === 6 && users.detailType === 2) {
|
||||
store.commit('user/setTabIndex', 1);
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages/history/index'
|
||||
});
|
||||
// 从派件列表进入详情页
|
||||
if (taskStatus === 4 && users.detailType === 2) {
|
||||
store.commit('user/setTabIndex', 1);
|
||||
if (users.isSearch) {
|
||||
store.commit('user/setIsSearch', false);
|
||||
uni.redirectTo({
|
||||
url: '/pages/search/index'
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/history/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
if (taskStatus === 4 && users.detailType === 1) {
|
||||
store.commit('user/setTabIndex', 0);
|
||||
uni.redirectTo({
|
||||
url: '/pages/delivery/index'
|
||||
});
|
||||
}
|
||||
} else if (users.newType === 301) {
|
||||
// 跳转到消息寄件相关
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/system?title=取件相关&type=301'
|
||||
});
|
||||
} else if (users.newType === 302) {
|
||||
// 跳转到消息寄件相关
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/system?title=签收提醒&type=302'
|
||||
});
|
||||
} else if (users.newType === 303) {
|
||||
// 跳转到消息快件取消
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/system?title=快件取消&type=303'
|
||||
});
|
||||
} else if (users.newType === 304) {
|
||||
// 跳转到消息派件相关
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/system?title=派件相关&type=304'
|
||||
});
|
||||
} else {
|
||||
store.commit('user/setTabIndex', 0);
|
||||
uni.redirectTo({
|
||||
url: '/pages/delivery/index'
|
||||
});
|
||||
}
|
||||
store.commit('user/setIsNew', false);
|
||||
};
|
||||
// 去收款
|
||||
const handleReceipt = () => {
|
||||
store.commit('user/setPayData', {});
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/scanPay'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user