jiangchengfeiyi-xiaochengxu/pages/my-order/myGeneralOrderDetail/myGeneralOrderDetail.vue
2025-03-19 20:54:41 +08:00

704 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
<view class="section" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }"></view>
<view class="flex-row section_2 pos">
<image
class="self-center image"
:src="orderStatusObj.img"
/>
<view class="ml-6 flex-col items-start flex-1 self-start group">
<text class="font text" :style="{ marginTop: offset }">{{ orderStatusObj.msg }}</text>
<text class="mt-6 font_2 text_2" v-if="isShowText">{{ orderStatusObj.tips }}</text>
</view>
</view>
<view class="flex-row items-center section_3 pos_2">
<image
class="shrink-0 image_2"
:src="myOrderUrl + '/myGeneralOrderDetail/dw.png'"
/>
<view class="ml-8 flex-col items-start flex-1">
<text class="font text_3">{{ addressObj.name }} {{ addressObj.phone }}</text>
<text class="font_2 text_4 mt-9">{{ addressObj.region }}{{ addressObj.detailAddress}}</text>
</view>
</view>
<view class="flex-col section_4 pos_3">
<view class="flex-col">
<view class="flex-row justify-between mt-8 list-item" v-for="(item, index) in order.orderItemList" :key="index">
<view class="flex-row">
<image
class="image_3" mode="aspectFill"
:src="publicPath + item.goodSnapshot.goodImg.split(';')[0]"
/>
<view class="flex-col items-start ml-11">
<text class="font text_5">{{ item.goodSnapshot.name }}</text>
<text class="mt-58 font_3 text_6">{{ item.goodSnapshot.price.toFixed(2) }}</text>
</view>
</view>
<text class="self-start font_4 text_7">×{{ item.quantity }}</text>
</view>
</view>
<view class="flex-col mt-25">
<view class="flex-row justify-between items-baseline">
<text class="font_5 text_8">商品金额</text>
<text class="font_6"> {{ allAmount.toFixed(2) }}</text>
</view>
<view class="flex-row justify-between items-baseline group_2">
<text class="font_5 text_9">优惠券</text>
<text class="font_6">{{ couponAmount.toFixed(2) }}</text>
</view>
<view class="flex-row justify-end items-baseline group_3">
<text class="font text_10">应付款</text>
<view class="group_4">
<text class="font_4 text_11"></text>
<text class="text_12">{{ order.totalAmount.toFixed(2) }}</text>
</view>
</view>
<view class="flex-col group_5">
<text class="self-start font_7 text_13">买家留言</text>
<view class="mt-2 flex-col justify-start self-stretch text-wrapper">
<text class="font_2 text_14" style="word-break: break-all; word-wrap: break-word;">
{{ order.note }}
</text>
</view>
</view>
<view class="flex-row justify-between items-baseline group_6">
<text class="font_7">创建时间</text>
<text class="font_4 text_15">{{ order.createTime }}</text>
</view>
<view class="flex-row justify-between group_7">
<text class="font_5 text_16">订单编号</text>
<view class="flex-row items-center">
<text class="font_4 text_17">{{ order.orderNumber }}</text>
<view class="ml-4 flex-col justify-start items-center shrink-0 text-wrapper_2" @click="copy(order.orderNumber)">
<text class="font_8">复制</text>
</view>
</view>
</view>
<view class="flex-row justify-between group_8" v-if="order.orderStatus === '待收货'">
<text class="font_5 text_18">物流单号:</text>
<view class="flex-row items-center">
<text class="font_4 text_19">{{ order.trackingNumber }}</text>
<view class="ml-4 flex-col justify-start items-center shrink-0 text-wrapper_2" @click="copy(order.orderNumber)">
<text class="font_8">复制</text>
</view>
</view>
</view>
<view class="flex-row justify-center items-center group_9">
<button style="display: flex; align-items: center; height: 60rpx;" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
<image
class="image_4"
:src="myOrderUrl + '/myGeneralOrderDetail/zxkf.png'"
/>
<text class="font text_20">在线客服</text>
</button>
</view>
</view>
</view>
<view class="flex-row justify-between items-center section_5 pos_4">
<view class="flex-row items-baseline">
<text class="font text_21">应付款:</text>
<view class="group_10">
<text class="font_9 text_22">¥</text>
<text class="font_9 text_23">{{ order.totalAmount.toFixed(2) }}</text>
</view>
</view>
<view v-if="order.operationList[0]" class="flex-col justify-start items-center text-wrapper_3" @click="wxPayFd(order)">
<text class="font text_24">去支付</text>
</view>
<view v-if="order.operationList[1]" class="flex-col justify-start items-center text-wrapper_3" @click="fd(order.id)">
<text class="font text_24">查看物流</text>
</view>
<view v-if="order.operationList[2]" class="flex-col justify-start items-center text-wrapper_3" @click="gotoDeleteOrder(order.id)">
<text class="font text_24">删除订单</text>
</view>
<view v-if="order.operationList[3]" style="background-color: #fff;" class="flex-col justify-start items-center text-wrapper_3">
<text class="font text_24"></text>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view v-if="isShow" class="overlay"></view>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import { stateList } from '../../../common/global.js'
import { onLoad } from "@dcloudio/uni-app";
import { baseUrl } from '../../../api/request';
import { JudgeIsNullity } from '../../../common/globalFunction';
import { getFonts } from '../../../common/globalFont';
import emitter from '../../../utils/emitter';
import { myOrderUrl } from '../../../common/globalImagesUrl.js';
import { publicPath } from '../../../common/globalImagesUrl.js';
import { onPullDownRefresh } from '@dcloudio/uni-app';
const bkgUrl = ref(myOrderUrl + '/myGeneralOrderDetail/bkg.png')
const order = ref({})
const cookie = wx.getStorageSync('cookie')
let orderId = ''
const couponAmount = ref(0)
const allAmount = ref(0)
const addressObj = ref({})
const orderStatusObj = ref({})
let debounceTimer = null;
let wxPayTimer = null;
let loading = false;
let isLoading = ref(false)
let isShow = ref(false)
const isShowText = ref(true)
const offset = ref('0')
onLoad((options) => {
getFonts()
orderId = options.id
})
onMounted(() => {
getOrderById(orderId)
})
onPullDownRefresh( async ()=>{ //下拉刷新
await getOrderById(orderId)
setTimeout(()=>{
uni.stopPullDownRefresh() //停止下拉刷新
},1000)
})
const getOrderById = async (val) => {
const res = await uni.request({
url: baseUrl + '/order/get/id',
method: 'POST',
header: {
cookie
},
data: {
id: val
}
})
console.log(res.data.data)
order.value = res.data.data
addressObj.value = order.value.addressSnapshot
couponAmount.value = JudgeIsNullity(order.value.couponSnapshot) ? 0 : order.value.couponSnapshot.conditionAmount
allAmount.value = order.value.totalAmount + couponAmount.value
if (order.value.orderStatus === '待支付') {
order.value.operationList = [true, false, false, false]
orderStatusObj.value = stateList[0]
} else if (order.value.orderStatus === '交易关闭') {
order.value.operationList = [false, false, true, false]
orderStatusObj.value = stateList[5]
} else if (order.value.orderStatus === '待发货') {
order.value.operationList = [false, false, false, true]
orderStatusObj.value = stateList[1]
} else if (order.value.orderStatus === '已退款') {
order.value.operationList = [false, false, false, true]
orderStatusObj.value = stateList[2]
} else if (order.value.orderStatus === '交易成功') {
order.value.operationList = [false, false, false, true]
orderStatusObj.value = stateList[4]
} else if (order.value.orderStatus === '待收货') {
order.value.operationList = [false, true, false, false]
orderStatusObj.value = stateList[3]
}
isShowText.value = order.value.orderStatus !== '已退款' && order.value.orderStatus !== '交易关闭'
offset.value = isShowText.value ? '0' : '18rpx'
}
const copy = ( orderNumber ) => {
console.log('订单编号为--->',orderNumber);
uni.setClipboardData({
data: orderNumber,
success: () => {
uni.showToast({
title: '成功复制到剪贴板'
})
}
})
}
const wxPayFd = (order) => { //微信支付按钮防抖
clearTimeout(wxPayTimer)
showLoading()
isShow.value = true //打开遮罩
wxPayTimer = setTimeout(async () => {
await wxPay(order.id)
}, 1000)
setTimeout(()=>{
hideLoading()
isShow.value = false //关闭遮罩
},2000)
}
function showLoading() { //加载弹窗
if (!loading) {
wx.showLoading({
title: '加载中...',
});
loading = true;
isLoading.value = true
}
}
function hideLoading() { //关闭弹窗
if (loading) {
wx.hideLoading();
loading = false;
isLoading.value = false
}
}
const wxPay = async( oid )=> { //传入订单id
try {
const res = await uni.request({
url: baseUrl + '/wechat/payment/create',
method: 'POST',
header: {
'cookie': wx.getStorageSync("cookie")
},
data: { id: oid }
})
const paymentData = res.data.data
wx.requestPayment({
appid: paymentData.appId,
nonceStr: paymentData.nonceStr,
package: paymentData.packageVal,
paySign: paymentData.paySign,
timeStamp: paymentData.timeStamp,
signType: paymentData.signType,
success(res) {
uni.showModal({
content: '支付成功',
showCancel: false
})
getOrderById(oid)
console.log('支付成功res--->',res);
},
fail(e) {
}
})
}catch(error) {
console.error('支付请求失败');
uni.showModal({
content: '支付请求失败,请重试。',
showCancel: false
})
}
}
const gotoDeleteOrder = (val) => {
uni.showModal({
title: '提示',
content: '您确定要删除订单吗?',
success: async (res) => {
if (res.confirm) {
await deleteOrder(val)
await emitter.emit('flushOrderList')
routerJump('pages/my-order/myGeneralOrderDetail/myGeneralOrderDetail')
}
}
})
}
const deleteOrder = async (val) => {
const res = await uni.request({
url: baseUrl + '/order/delete/id',
method: 'POST',
header: {
cookie
},
data: {
id: val
}
})
console.log(res.data.data)
}
const fd = (val) => { //防抖
clearTimeout(debounceTimer)
showLoading()
debounceTimer = setTimeout(async () => {
await gotoDelieverPage(val)
hideLoading()
}, 1000)
}
let waybillToken = ''
var plugin = requirePlugin('logisticsPlugin')
const gotoDelieverPage = (val) => {
uni.request({
url: baseUrl + '/logistics/get/info',
method: 'POST',
data: {
id: val
},
header: {
cookie
},
success: (res) => {
console.log(res.data.data)
waybillToken = res.data.data.waybill_token
plugin.openWaybillTracking({
waybillToken: waybillToken
})
}
})
}
const routerJump = (val) => {
let pages = getCurrentPages();
var num = pages.length
if (num == 1) return ;
console.log(pages)
//当前页面栈总数
var backnum = num
for( var i = 0; i < num; i ++ ) {
//循环找到指定页面路由所在的页数
if(pages[i].route == val){
//'pages/mypage/mypage'替换成A页面的路由地址
backnum = num - i - 1
//计算返回的层数,总数-指定页面页数-1
}
}
uni.navigateBack({
delta:backnum
//返回的页面数,如果 delta 大于现有页面数,则返回到首页。
})
}
</script>
<style scoped lang="scss">
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
z-index: 999;
}
button {
padding: 0;
margin: 0;
background-color: #fff;
}
button::after{
border: none;
}
.mt-9 {
margin-top: 16.88rpx;
}
.ml-11 {
margin-left: 20.63rpx;
}
.mt-25 {
margin-top: 46.88rpx;
}
.page {
background-color: #fff;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
// .section {
// background-image: url('https://ide.code.fun/api/image?token=67cf80c84ae84d001228feb1&name=24453f696e665b4a146abeed1b16ec7c.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
// width: 750rpx;
// }
.section_2 {
padding: 15rpx 16.88rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
}
.pos {
position: absolute;
left: 16.88rpx;
right: 15rpx;
top: 20.63rpx;
}
.image {
width: 75rpx;
height: 75rpx;
}
.group {
margin-top: 11.25rpx;
}
.font {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 29.18rpx;
color: #323232;
}
.text {
color: #323233;
line-height: 27.58rpx;
}
.font_2 {
font-size: 24.38rpx;
font-family: FangZhengFonts;
line-height: 29.18rpx;
color: #818181;
}
.text_2 {
color: #6b6e72;
line-height: 24rpx;
}
.section_3 {
padding: 26.25rpx 22.5rpx 22.5rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
}
.pos_2 {
// position: absolute;
// left: 16.88rpx;
// right: 15rpx;
// top: 144.38rpx;
margin: 144.38rpx 15rpx 0 16.88rpx;
}
.image_2 {
width: 43.13rpx;
height: 43.13rpx;
}
.text_3 {
line-height: 24.28rpx;
}
.text_4 {
line-height: 30rpx;
width: 571.88rpx;
}
.section_4 {
padding: 22.5rpx 15rpx 22.5rpx 24.38rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
}
.pos_3 {
// position: absolute;
// left: 15rpx;
// right: 16.88rpx;
// top: 287.5rpx;
margin: 25.5rpx 16.88rpx 150rpx 15rpx;
}
.list-item:first-child {
margin-top: 0;
}
.image_3 {
border-radius: 9.38rpx;
width: 146.25rpx;
height: 165rpx;
}
.text_5 {
font-size: 30rpx;
}
.font_3 {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 22.18rpx;
color: #323232;
}
.text_6 {
font-size: 30rpx;
}
.font_4 {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 18.73rpx;
color: #323232;
}
.text_7 {
margin-right: 15rpx;
margin-top: 136.88rpx;
font-size: 26.25rpx;
}
.font_5 {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 29.18rpx;
color: #818181;
}
.text_8 {
line-height: 26.04rpx;
}
.font_6 {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 20.79rpx;
color: #323232;
}
.group_2 {
margin-top: 18.75rpx;
}
.text_9 {
line-height: 27.36rpx;
}
.group_3 {
margin-top: 18.75rpx;
}
.text_10 {
line-height: 25.71rpx;
}
.group_4 {
line-height: 20.76rpx;
height: 20.76rpx;
}
.text_11 {
color: #ffaaa5;
line-height: 20.29rpx;
}
.text_12 {
color: #ffaaa5;
font-size: 28.13rpx;
font-family: FangZhengFonts;
font-weight: 700;
line-height: 20.76rpx;
}
.group_5 {
margin-top: 26.25rpx;
padding: 22.5rpx 0 18.75rpx;
border-top: solid 1.88rpx #dfdfdf;
border-bottom: solid 1.88rpx #dfdfdf;
}
.font_7 {
font-size: 28.13rpx;
font-family: FangZhengFonts;
line-height: 26.47rpx;
color: #818181;
}
.text_13 {
margin-left: 3.75rpx;
}
.text-wrapper {
margin-right: 11.25rpx;
padding: 3.75rpx 0;
border-radius: 9.38rpx;
border-left: solid 1.88rpx #ffffff;
border-right: solid 1.88rpx #ffffff;
border-top: solid 1.88rpx #ffffff;
border-bottom: solid 1.88rpx #ffffff;
}
.text_14 {
margin-right: 7.5rpx;
line-height: 30rpx;
text-shadow: 0 1.88rpx #ffffff, 0 -1.88rpx #ffffff, 1.88rpx 0 #ffffff, -1.88rpx 0 #ffffff;
}
.group_6 {
margin-top: 26.25rpx;
}
.text_15 {
font-size: 26.25rpx;
line-height: 19.41rpx;
}
.group_7 {
margin-top: 18.75rpx;
}
.text_16 {
line-height: 27.69rpx;
}
.text_17 {
font-size: 26.25rpx;
line-height: 19.29rpx;
}
.text-wrapper_2 {
background-color: #ffffff;
width: 65.63rpx;
height: 30rpx;
border-left: solid 0.94rpx #d1d1d1;
border-right: solid 0.94rpx #d1d1d1;
border-top: solid 0.94rpx #d1d1d1;
border-bottom: solid 0.94rpx #d1d1d1;
}
.font_8 {
font-size: 22.5rpx;
font-family: FangZhengFonts;
line-height: 20.83rpx;
color: #323232;
}
.group_8 {
margin-top: 15rpx;
}
.text_18 {
line-height: 27.69rpx;
}
.text_19 {
font-size: 26.25rpx;
line-height: 19.29rpx;
}
.group_9 {
margin-top: 28.13rpx;
}
.image_4 {
width: 45rpx;
height: 45rpx;
}
.text_20 {
font-size: 30rpx;
line-height: 28.48rpx;
}
.section_5 {
padding: 15rpx 26.25rpx;
background-color: #ffffff;
}
.pos_4 {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.text_21 {
color: #000000;
font-size: 30rpx;
line-height: 27.43rpx;
}
.group_10 {
margin-left: -7.5rpx;
line-height: 24.92rpx;
height: 24.92rpx;
}
.font_9 {
font-size: 33.75rpx;
font-family: FangZhengFonts;
color: #ffaaa5;
}
.text_22 {
line-height: 24.34rpx;
}
.text_23 {
font-weight: 700;
line-height: 24.92rpx;
}
.text-wrapper_3 {
padding: 22.5rpx 0;
background-color: #ffaaa5;
border-radius: 75rpx;
width: 204.38rpx;
height: 71.25rpx;
}
.text_24 {
color: #ffffff;
font-size: 30rpx;
line-height: 27.77rpx;
}
@import url(../../../common/css/global.css);
</style>