386 lines
11 KiB
Vue
386 lines
11 KiB
Vue
|
<!-- 去取件详情页 -->
|
|||
|
|
<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>
|