526 lines
15 KiB
Vue
526 lines
15 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="count_down" v-if="datas.paid==0&&countDown">
|
||
还剩<text>{{countDown}}</text>订单自动取消
|
||
</view>
|
||
<view class="m-card m-address" style="margin-top: 20rpx;">
|
||
<view class="address-info">
|
||
<view class="top" style="align-items: flex-start;">
|
||
<view style="color: #333;display: flex;align-items: center;">
|
||
<up-icon name="map"></up-icon>
|
||
<text style="margin: 0 10rpx;">自提点</text>
|
||
</view>
|
||
<view v-if="shopInfo.mer_id">
|
||
<view>{{shopInfo.mer_name}}</view>
|
||
<view>
|
||
<text>{{shopInfo.service_phone}}</text>
|
||
<text
|
||
style="color: #20b128;margin-left: 10rpx;font-size: 22rpx;">{{shopInfo.distance}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="address-btn">
|
||
<view style="width: 80px;"><up-button @click="shopListShow=true" size="small" shape="circle"
|
||
color="#f6f6f6" :customStyle="{color:'#666666'}">修改</up-button></view>
|
||
</view>
|
||
</view>
|
||
<view class="m-card m-address" style="margin-top: 20rpx;">
|
||
<view class="address-info">
|
||
<view class="top">
|
||
<up-icon name="account"></up-icon>
|
||
<view class="t-name">{{addressInfo.real_name}}</view>
|
||
<view>{{addressInfo.phone}}</view>
|
||
</view>
|
||
<view class="bottom u-line-2">
|
||
{{addressInfo.detail}}
|
||
</view>
|
||
</view>
|
||
<view class="address-btn" v-if="datas.paid==0">
|
||
<view style="width: 80px;"><up-button @click="showAddress = true" size="small" shape="circle" color="#f6f6f6"
|
||
:customStyle="{color:'#666666'}">修改</up-button></view>
|
||
</view>
|
||
</view>
|
||
<view class="m-card m-good" v-for="(item,index) in datas.goods_list" :key="index">
|
||
<view class="image">
|
||
<up-image :src="item.imgs" width="160rpx" height="160rpx"></up-image>
|
||
</view>
|
||
<view class="body-content">
|
||
<view>
|
||
<view class="title">
|
||
<view>{{item.class_name}}</view>
|
||
<view>¥{{item.sell}}</view>
|
||
</view>
|
||
<view class="tips">
|
||
<view>{{item.goods_unit}}</view>
|
||
<view>x{{item.nums}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="time">
|
||
{{item.msg}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="m-card good-info" v-if="datas.paid==0">
|
||
<view v-if="datas.goods_list" class="row">
|
||
<view>商品总价 <text>共计{{datas.goods_list.length}}款商品</text></view>
|
||
<view><text>¥</text>{{c_price(datas.total, 0)}}<text>.{{c_price(datas.total, 1)}}</text></view>
|
||
</view>
|
||
<view class="row">
|
||
<view>运费</view>
|
||
<view><text>¥</text>0<text>.00</text></view>
|
||
</view>
|
||
<view class="row-need">
|
||
<view style="margin-right: 10rpx;">需付款</view>
|
||
<view v-if="datas.total"><text>¥</text>{{c_price(datas.total, 0)}}<text>.{{c_price(datas.total, 1)}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="m-card good-info">
|
||
<view class="head-title">订单信息</view>
|
||
<block v-if="datas.paid==0">
|
||
<view class="row">
|
||
<view>订单编号</view>
|
||
<up-copy :content="datas.number">
|
||
<text>{{datas.number}} | 复制</text>
|
||
</up-copy>
|
||
</view>
|
||
<view class="row">
|
||
<view>下单时间</view>
|
||
<view>{{datas.create_time}}</view>
|
||
</view>
|
||
<view class="row" style="margin-bottom: 0;">
|
||
<view>支付状态</view>
|
||
<view v-if="datas.paid">已支付</view>
|
||
<view v-else class="red">待支付</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view v-if="datas.goods_list" class="row">
|
||
<view>实付款</view>
|
||
<view><text>¥</text>{{c_price(datas.total, 0)}}<text>.{{c_price(datas.total, 1)}}</text></view>
|
||
</view>
|
||
<view class="row">
|
||
<view>订单编号</view>
|
||
<up-copy :content="datas.number">
|
||
<text>{{datas.number}} | 复制</text>
|
||
</up-copy>
|
||
</view>
|
||
<view class="row">
|
||
<view>支付方式</view>
|
||
<view>{{datas.pay_type==3?'余额支付':'微信支付'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view>下单时间</view>
|
||
<view>{{datas.create_time}}</view>
|
||
</view>
|
||
<view class="row" style="margin-bottom: 0;">
|
||
<view>支付状态</view>
|
||
<view v-if="datas.paid">已支付</view>
|
||
<view v-else class="red">待支付</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view style="width: 100%;height: 200rpx;"></view>
|
||
|
||
<view class="fiexd-btn-box" v-if="datas.number">
|
||
<block v-if="!datas.paid">
|
||
<view style="color: #777777;" @click="showCancel=true">取消订单</view>
|
||
<view style="width: 450rpx;">
|
||
<up-button color="#20B128" shape="circle" @click="rePay" :throttleTime="1000">立即支付 ¥{{datas.total}}</up-button>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view></view>
|
||
<view style="width: 450rpx;">
|
||
<up-button v-if="datas.status==0||datas.status==1" color="#20B128" shape="circle" @click="showTake=true">确认收货</up-button>
|
||
<up-button v-else color="#20B128" plain shape="circle" @click="purchaseAgain">再次购买</up-button>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
|
||
<addressPopup ref="addressRef" :show="showAddress" :list="addressList" @close="showAddress=false" @change="changeAddress" />
|
||
<shopListPopupVue ref="shopRef" :show="shopListShow" :list="merchantList"
|
||
@close="shopListShow=false" @change="changeShop" @search="searchShop" />
|
||
<modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt"></modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onLoad, onBackPress } from "@dcloudio/uni-app";
|
||
import { nextTick, ref } from "vue";
|
||
import addressPopup from "@/components/addressPopup.vue";
|
||
import orderCanclePopup from "@/components/orderCanclePopup.vue";
|
||
import shopListPopupVue from "@/components/shopListPopup.vue";
|
||
import modal from "@/components/modal.vue";
|
||
import { orderDetailApi, cancelOrderApi, rePaymentApi, confirmReceiptApi, purchaseAgainApi } from "@/api/order.js"
|
||
import { addressListsApi, merchantListApi } from "@/api/user.js";
|
||
|
||
const showCancel = ref(false);
|
||
const showTake = ref(false);
|
||
|
||
const submitCancel = (e) => {
|
||
showCancel.value = false;
|
||
cancelOrderApi({
|
||
order_id: datas.value.id,
|
||
value: e.value
|
||
}).then(res=>{
|
||
uni.showToast({
|
||
title: '取消成功',
|
||
icon: 'none'
|
||
})
|
||
uni.navigateBack({
|
||
success: () => {
|
||
uni.$emit('reLoadOrderList')
|
||
}
|
||
});
|
||
})
|
||
}
|
||
|
||
const datas = ref({})
|
||
const getDetails = ()=>{
|
||
orderDetailApi({
|
||
order_id: datas.value.id
|
||
}).then(res=>{
|
||
datas.value = res.data;
|
||
shopInfo.value = res.data.merchant_info;
|
||
if(addressList.value.length>0 && res.data.paid){
|
||
addressInfo.value = addressList.value.find(item=>item.address_id == res.data.address_id);
|
||
}else {
|
||
addressInfo.value = {
|
||
address_id: res.data.address_id,
|
||
real_name: res.data.real_name,
|
||
phone: res.data.user_phone,
|
||
detail: res.data.user_address
|
||
}
|
||
}
|
||
nextTick(()=>{
|
||
shopRef.value.setCheck(shopInfo.value.mer_id);
|
||
addressRef.value.setCheck(addressInfo.value.address_id);
|
||
})
|
||
if(!res.data.paid){
|
||
targetDate = new Date(res.data.create_time).getTime() + 30*60*1000;
|
||
// 每秒更新一次倒计时
|
||
timer = setInterval(updateCountdown, 1000);
|
||
updateCountdown();
|
||
}
|
||
}).catch(err=>{
|
||
uni.navigateBack();
|
||
})
|
||
}
|
||
|
||
const c_price = (price, index=0)=>{
|
||
price = price + '';
|
||
return price.split('.')[index] || (index ? '00' : '0');
|
||
}
|
||
|
||
// 选择地址
|
||
const addressRef = ref(null);
|
||
const showAddress = ref(false);
|
||
const addressInfo = ref({});
|
||
const changeAddress = (e) => {
|
||
addressInfo.value = e;
|
||
showAddress.value = false;
|
||
}
|
||
const openAddress = ()=>{
|
||
if(addressList.length>0) showAddress.value=true;
|
||
else uni.navigateTo({
|
||
url: '/pagesOrder/addressEdit/addressEdit'
|
||
})
|
||
}
|
||
// 地址相关
|
||
const addressList = ref([]);
|
||
const getAddressList = ()=>{
|
||
addressListsApi().then(res=>{
|
||
addressList.value = res.data.lists;
|
||
addressList.value.forEach(item=>{
|
||
if(item.is_default) {
|
||
addressInfo.value = item;
|
||
}
|
||
})
|
||
if(addressList.value.length>0){
|
||
addressInfo.value = addressList.value[0];
|
||
}
|
||
if(addressInfo.value.address_id) nextTick(()=>{
|
||
addressRef.value.setCheck(addressInfo.value.address_id);
|
||
})
|
||
})
|
||
}
|
||
getAddressList();
|
||
|
||
const shopRef = ref(false);
|
||
const shopListShow = ref(false);
|
||
const merchantList = ref([]);
|
||
const myAddressInfo = ref({
|
||
long: "",
|
||
lat: ""
|
||
})
|
||
const shopInfo = ref({
|
||
mer_id: ''
|
||
});
|
||
const getMerchantList = (mer_name = null) => {
|
||
merchantListApi({
|
||
...myAddressInfo.value,
|
||
mer_name: mer_name ? mer_name : ''
|
||
}).then(res => {
|
||
merchantList.value = res.data.lists;
|
||
if (mer_name === null && myAddressInfo.value.long && merchantList.value.length > 0 && !shopInfo
|
||
.value.mer_id) {
|
||
shopInfo.value = merchantList.value[0];
|
||
nextTick(()=>{
|
||
shopRef.value.setCheck(shopInfo.value.mer_id);
|
||
})
|
||
}
|
||
})
|
||
}
|
||
getMerchantList();
|
||
// 定位
|
||
const LoadAddress = () => {
|
||
uni.getLocation({
|
||
success: (res) => {},
|
||
fail: (err) => {
|
||
uni.$u.toast('定位失败, 请手动选择提货点!')
|
||
},
|
||
complete: (res) => {
|
||
myAddressInfo.value.long = res.longitude || "";
|
||
myAddressInfo.value.lat = res.latitude || "";
|
||
getMerchantList();
|
||
}
|
||
})
|
||
}
|
||
const changeShop = (e) => {
|
||
LoadAddress();
|
||
shopInfo.value = e;
|
||
shopListShow.value = false;
|
||
}
|
||
const searchShop = (e) => {
|
||
getMerchantList(e)
|
||
}
|
||
|
||
const rePay = ()=>{
|
||
rePaymentApi({
|
||
order_id: datas.value.id,
|
||
mer_id: shopInfo.value.mer_id,
|
||
address_id: addressInfo.value.address_id,
|
||
pay_type: 1
|
||
}).then(res=>{
|
||
if(!res.data?.nonceStr) return uni.$u.toast('支付失败!');
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.package,
|
||
signType: res.data.signType,
|
||
paySign: res.data.paySign,
|
||
success: (e) => {
|
||
if(e.errMsg == 'requestPayment:ok'){
|
||
uni.showModal({
|
||
title: '订单支付成功',
|
||
confirmText: '确认',
|
||
success: (e) => {
|
||
uni.navigateBack({
|
||
success: () => {
|
||
uni.$emit('reLoadOrderList')
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}else uni.$u.toast('支付失败')
|
||
},
|
||
fail: (e) => {
|
||
uni.$u.toast('用户取消支付')
|
||
}
|
||
})
|
||
}).catch(err=>{
|
||
uni.$u.toast('网络错误')
|
||
})
|
||
}
|
||
|
||
// 再次购买
|
||
const purchaseAgain = ()=>{
|
||
purchaseAgainApi({
|
||
order_id: datas.value.id
|
||
}).then(res=>{
|
||
uni.$u.toast('已加入购物车');
|
||
})
|
||
}
|
||
|
||
// 设置目标日期
|
||
let targetDate = "";
|
||
let countDown = ref("");
|
||
let timer = null;
|
||
|
||
// 更新倒计时函数
|
||
function updateCountdown() {
|
||
const now = new Date().getTime();
|
||
const distance = targetDate - now;
|
||
if(distance<0) return clearInterval(timer);
|
||
|
||
// 计算剩余时间
|
||
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||
|
||
countDown.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
|
||
// 如果目标日期已过，显示提示信息
|
||
if (distance < 0) {
|
||
console.log('倒计时结束');
|
||
countDown.value = ""
|
||
}
|
||
}
|
||
|
||
// 确认收货
|
||
const confirmReceipt = ()=>{
|
||
confirmReceiptApi({
|
||
order_id: datas.value.id
|
||
}).then(res=>{
|
||
showTake.value = false;
|
||
uni.$u.toast('确认收货成功');
|
||
uni.navigateBack({
|
||
success: () => {
|
||
uni.$emit('reLoadOrderList');
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
onLoad((option) => {
|
||
uni.setNavigationBarTitle({
|
||
title: option.type == 0 ? '等待付款' : '订单详情'
|
||
})
|
||
if(option.id) {
|
||
datas.value.id = option.id;
|
||
getDetails()
|
||
}
|
||
})
|
||
|
||
onBackPress(()=>{
|
||
clearInterval(timer);
|
||
console.log("清除");
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.count_down {
|
||
padding-top: 20rpx;
|
||
text-align: center;
|
||
color: #444444;
|
||
|
||
text {
|
||
color: #F55726;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.m-card {
|
||
width: 710rpx;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
border-radius: 14rpx;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.m-address {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #999999;
|
||
|
||
.address-info {
|
||
width: 510rpx;
|
||
|
||
.top {
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
|
||
.t-name {
|
||
color: #444;
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.m-good {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 14rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.body-content {
|
||
width: 490rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
color: #989898;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #444;
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.time {
|
||
background-color: #F6F6F6;
|
||
padding: 5rpx 10rpx;
|
||
font-size: 26rpx;
|
||
color: #444;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.good-info {
|
||
margin-bottom: 20rpx;
|
||
|
||
.head-title {
|
||
margin-bottom: 18rpx;
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 18rpx;
|
||
|
||
.red {
|
||
color: #F55726;
|
||
}
|
||
}
|
||
|
||
.row-need {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
color: #F55726;
|
||
}
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
|
||
</style> |