Skip to content

G
groupPurchase-miniapp
Commit a236ca9b authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

header

parent 7b560fb4
Hide whitespace changes
Inline Side-by-side
Showing with 327 additions and 60 deletions
src/pages/assistingAgriculture/order/detail.vue
View file @ a236ca9b
<template>
<view class="container">
<Header title="商品详情页"></Header>
<!-- <Header title="商品详情页"></Header> -->
<Search title="商品详情页" backgroundBox="white" :showTitle="true"></Search>
<web-view
style="height: 600rpx"
:src="logisticsDetail.trailUrl"
v-if="logisticsDetail"
></web-view>
<!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
<view class="content" v-if="orderDetail">
<view class="content1" v-if="orderDetail">
<view class="info">
<view class="top" v-if="logisticsDetail">
<view class="left">
......@@ -26,7 +27,7 @@
<text @tap="callShopPhone(shopDetail.phone)">打电话</text>
</view>
</view>
<view class="steps" :style="{ 'padding-top': logisticsDetail ? '0' : '80rpx' }">
<view class="steps">
<view class="step-box">
<view class="header">
<view class="dot"></view>
......@@ -52,6 +53,12 @@
<text class="title">
{{ orderStatusList[orderDetail.orderLogistics.status] }}
</text>
<wd-count-down
:time="orderDetail.countDown"
:format="format"
@finish="onFinish(orderNumber)"
v-if="orderDetail.orderLogistics.status === '1'"
/>
<text class="text" v-if="orderDetail.orderLogistics.status === '2'">
{{ orderDetail.orderLogistics.createTime.slice(5, 16) }}
</text>
......@@ -192,10 +199,34 @@
<view style="height: 170rpx"></view>
</view>
<view class="footer" v-if="orderDetail">
<view
class="btn"
v-if="orderDetail.orderLogistics.status === '1'"
@tap="handleCancel(orderNumber)"
>
取消订单
</view>
<view class="btn" v-if="orderDetail.orderLogistics.status === '3'" @tap="openPop()">
查看物流
</view>
<view class="btn" v-if="orderDetail.orderLogistics.status === '5'" @tap="anotherOrder()">
再来一单
</view>
<view class="btn" @tap="callShopPhone(shopDetail.phone)">联系商家</view>
<view class="btn err" v-if="orderDetail.orderLogistics.status === '1'" @tap="openPayment()">
立即支付
</view>
<view
class="btn"
@tap="handleRefund()"
v-if="
orderDetail.orderLogistics.status === '2' ||
orderDetail.orderLogistics.status === '3' ||
orderDetail.orderLogistics.status === '4'
"
>
申请退款
</view>
<view class="btn err" v-if="orderDetail.orderLogistics.status === '3'" @click="receipt()">
确认收货
</view>
......@@ -206,6 +237,20 @@
>
评价订单
</view>
<view
class="btn err"
v-if="orderDetail.orderLogistics.status === '6'"
@click="handleDelete(orderNumber)"
>
删除订单
</view>
<view
class="btn err"
v-if="orderDetail.orderLogistics.status === '7'"
@tap="handleAfterSales()"
>
售后详情
</view>
</view>
</view>
<stepBar
......@@ -214,12 +259,22 @@
:orderInfo="orderDetail"
:phone="shopDetail.phone"
></stepBar>
<Payment ref="PaymentRef" @payment="payNow"></Payment>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';
import { getOrderDetail, getShopDetail, getLogisticsMap, confirmReceipt } from '@/api/order';
import Payment from '@/pages/order/components/Payment/index.vue';
import {
getOrderDetail,
getShopDetail,
getLogisticsMap,
confirmReceipt,
cancelOrderApi,
deleteOrderApi,
repaymentApi,
} from '@/api/order';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const iconUrl = ref('https://cdn.kuaidi100.com/images/all/56/');
......@@ -245,6 +300,38 @@ const payWayList = ref({
2: '微信',
});
onShow(() => {
if (pendingPaymentOrder.value) {
// 查询订单状态决定是否支付
getOrderDetail({ orderNumber: pendingPaymentOrder.value }).then((res) => {
console.log(res.data.baseOrder.subStatus);
switch (res.data.baseOrder.subStatus) {
case '1':
xma.showToast({
title: '支付失败',
icon: 'error',
duration: 2000,
});
break;
case '2':
pendingPaymentOrder.value = '';
setTimeout(() => {
xma.showToast({
title: '付款成功',
icon: 'success',
});
xma.redirectTo({
url: '/pages/order/order?status=not_use',
});
}, 1000);
break;
default:
break;
}
});
}
});
/**
* 获取订单详情 0-翼支付，1-支付宝，2-微信
*/
......@@ -266,6 +353,10 @@ const getDetail = async () => {
count += item.prodCount;
});
orderDetail.value.prodCount = count;
// 待付款倒计时计算
if (orderDetail.value.orderLogistics.status === '1') {
orderDetail.value.countDown = calculateCountdown(orderDetail.value.baseOrder.createTime);
}
xma.hideLoading();
};
......@@ -379,6 +470,157 @@ const handleRemark = () => {
url: `/pages/order/remark?orderNumber=${orderNumber.value}&shopName=${shopDetail.value.shopName}`,
});
};
/**
* 取消订单
* @param {*} orderNumber
*/
const handleCancel = (orderNumber) => {
xma.showModal({
title: '提示',
content: '确定要取消订单吗？',
success: async (res) => {
if (res.confirm) {
xma.showLoading({
title: '取消中...',
mask: true,
});
await cancelOrderApi({ orderNumber });
xma.hideLoading();
setTimeout(() => {
xma.showToast({
title: '取消成功',
icon: 'success',
});
xma.redirectTo({
url: '/pages/order/order',
});
}, 1000);
}
},
});
};
/**
* 删除订单
* @param {*} orderNumber
*/
const handleDelete = (orderNumber) => {
xma.showModal({
title: '提示',
content: '确定要删除订单吗？',
success: async (res) => {
if (res.confirm) {
xma.showLoading({
title: '删除中...',
mask: true,
});
await deleteOrderApi(orderNumber);
xma.hideLoading();
setTimeout(() => {
xma.showToast({
title: '删除成功',
icon: 'success',
});
xma.redirectTo({
url: '/pages/order/order',
});
}, 1000);
}
},
});
};
/**
* 再来一单 商品类型，0-普通商品，5-团购，6-套餐，7-预售，8-售券
*/
const anotherOrder = () => {
xma.redirectTo({
url: `/pages/assistingAgriculture/detail/detail?prodId=${orderDetail.value.orderItems[0].prodId}`,
});
};
/**
* 申请退款
*/
const handleRefund = () => {
xma.navigateTo({
url: `/pages/order/refund?orderNumber=${orderNumber.value}`,
});
};
/**
* 售后详情
*/
const handleAfterSales = () => {
xma.navigateTo({
url: `/pages/order/afterSales?orderNumber=${orderNumber.value}`,
});
};
/**
* 唤起支付组件
* @param {*} orderNumber
*/
const PaymentRef = ref(null);
const openPayment = () => {
PaymentRef.value.open(orderNumber.value);
};
/**
* 立即支付
* @param {*} orderNumber
*/
const pendingPaymentOrder = ref(null); // 待支付订单
const payNow = async (data) => {
const param = {
orderNumber: data.orderNumber,
tradeType: data.selectType,
};
const res = await repaymentApi(param);
const { paymentUrl, outTradeNo } = res.data.result;
// 修改列表待付款订单号
orderNumber.value = outTradeNo;
pendingPaymentOrder.value = outTradeNo;
window.location.href = paymentUrl;
// 设置一个延时器
const start = Date.now();
setTimeout(() => {
const end = Date.now();
if (end - start < 1200) {
// 如果 iframe 加载时间小于 1.2 秒，说明应用没有安装
xma.showToast({
title: '未安装App',
icon: 'error',
});
// 这里可以跳转到应用下载页面
}
}, 1000);
};
/**
* 计算倒计时
*/
const format = ref('mm:ss');
const calculateCountdown = (item) => {
const now = new Date().getTime();
const orderTime = new Date(item).getTime();
const countdown = orderTime + 30 * 60 * 1000 - now;
if (countdown <= 0) {
return 0;
}
return countdown;
};
/**
* 倒计时结束触发
*/
const onFinish = async (orderNumber) => {
await cancelOrderApi({ orderNumber });
xma.redirectTo({
url: '/pages/order/order',
});
};
</script>
<style lang="scss" scoped>
......@@ -394,7 +636,7 @@ page {
width: 375 * 2rpx;
margin: 0 auto;
.content {
.content1 {
position: relative;
top: -20rpx;
border-radius: 20rpx 20rpx 0 0;
......@@ -450,7 +692,7 @@ page {
.steps {
display: flex;
flex-direction: column;
margin-top: 40rpx;
// margin-top: 40rpx;
.step-box {
display: flex;
......@@ -469,7 +711,8 @@ page {
background: #f12a2a;
border-radius: 50%;
position: absolute;
top: -12rpx;
top: 6rpx;
z-index: 1;
}
.past-dot {
......@@ -478,13 +721,16 @@ page {
background: #ffd5d5;
border-radius: 50%;
position: absolute;
top: -12rpx;
top: 6rpx;
z-index: 1;
}
.line {
height: 100%;
width: 2rpx;
background-color: #ffd5d5;
position: absolute;
top: 6rpx;
}
}
......@@ -494,6 +740,10 @@ page {
gap: 22rpx;
width: 100%;
.wd-count-down {
color: #ff0909;
}
.title {
font-family:
PingFang SC,
......@@ -835,7 +1085,7 @@ page {
color: #333333;
border-radius: 32rpx;
border: 1rpx solid #cccccc;
padding: 12rpx 24rpx;
padding: 12rpx 20rpx;
}
.err {
......
src/pages/order/detail.vue
View file @ a236ca9b
<template>
<view class="container">
<Header title="订单详情"></Header>
<!-- <Header title="订单详情"></Header> -->
<Search title="订单详情" backgroundBox="white" :showTitle="true"></Search>
<view class="content" v-if="orderDetail">
<!-- 使用状态 -->
<view class="status">
......@@ -405,7 +406,6 @@ page {
margin: 0 auto;
.content {
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 20rpx;
......
src/pages/order/order.vue
View file @ a236ca9b
<template>
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<wd-icon
class="icon"
name="thin-arrow-left"
color="#000"
size="32rpx"
@click="handleBack"
></wd-icon>
<Search backgroundBox="#f3f3f3">
<view class="searchBox">
<view class="search">
<wd-icon name="search" size="30rpx" color="#999"></wd-icon>
......@@ -31,7 +24,8 @@
@tap="handleClear"
></wd-icon>
</view>
</view>
</Search>
<view class="tabs" v-if="orderDic">
<wd-tabs v-model="tab" animated :lineWidth="38" :lineHeight="3" @change="handleChange" sticky>
<block v-for="item in tabs" :key="item.value">
......@@ -549,14 +543,31 @@ function callShopPhone(phoneNumber) {
}
/**
* 再来一单
* 再来一单 商品类型，0-普通商品，5-团购，6-套餐，7-预售，8-售券
*/
const anotherOrder = (item) => {
// 清空查询待付款状态
pendingPaymentOrder.value = null;
xma.navigateTo({
url: `/pages/shop/confirmOrder?prodId=${item.orderItems[0].prodId}&skuId=${item.orderItems[0].skuId}`,
});
switch (item.prodType) {
case 5:
xma.navigateTo({
url: `/pages/packageDetails/packageDetails?prodId=${item.orderItems[0].prodId}`,
});
break;
case 7:
xma.redirectTo({
url: `/pages/assistingAgriculture/detail/detail?prodId=${item.orderItems[0].prodId}`,
});
break;
case 10:
xma.redirectTo({
url: `/pages/assistingAgriculture/RouteDetails/RouteDetails?prodId=${item.orderItems[0].prodId}&shopId=${item.shopId}`,
});
break;
default:
break;
}
};
/**
......@@ -566,7 +577,7 @@ const handleQrcode = (item) => {
// 清空查询待付款状态
pendingPaymentOrder.value = null;
xma.navigateTo({
url: `/pages/order/ticketCode?orderNumber=${item.orderNumber}`,
url: `/pages/order/ticketCode?orderNumber=${item.orderNumber}&shopName=${item.shopName}`,
});
};
......@@ -579,6 +590,9 @@ const handleRemark = (item) => {
});
};
/**
* 售后详情
*/
const handleAfterSales = (item) => {
xma.navigateTo({
url: `/pages/order/afterSales?orderNumber=${item.orderNumber}`,
......@@ -665,7 +679,7 @@ page {
margin: 0 auto;
.tabs {
padding-top: 108rpx;
// padding-top: 20rpx;
&:deep(.wd-tabs) {
background-color: #f5f5f5;
......@@ -693,32 +707,32 @@ page {
align-items: center;
padding: 0 30rpx;
gap: 14rpx;
}
.searchBox {
width: 492rpx;
height: 66rpx;
background: #f3f3f3;
border-radius: 33rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rpx 28rpx;
margin-left: 40rpx;
.searchBox {
width: 492rpx;
height: 66rpx;
background: #f3f3f3;
border-radius: 33rpx;
background-color: #fff;
.search {
gap: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rpx 28rpx;
background-color: #fff;
.search {
gap: 10rpx;
display: flex;
align-items: center;
.text {
margin-left: 10rpx;
font-family:
PingFang SC,
PingFang SC;
font-weight: 500;
font-size: 28rpx;
}
.text {
margin-left: 10rpx;
font-family:
PingFang SC,
PingFang SC;
font-weight: 500;
font-size: 28rpx;
}
}
}
......
src/pages/order/refund.vue
View file @ a236ca9b
<template>
<view class="container">
<Header title="售后/退款"></Header>
<!-- <Header title="售后/退款"></Header> -->
<Search title="售后/退款" backgroundBox="white" :type="2"></Search>
<view class="content" v-if="orderDetail">
<view class="content-box">
<view class="content-item">
......@@ -243,7 +244,7 @@ page {
margin: 0 auto;
.content {
padding: 108rpx 10rpx 0;
padding: 20rpx 10rpx 0;
display: flex;
flex-direction: column;
gap: 60rpx;
......
src/pages/order/ticketCode.vue
View file @ a236ca9b
<template>
<view class="container">
<Header title="查看券码"></Header>
<!-- <Header title="查看券码"></Header> -->
<Search title="查看券码" backgroundBox="white" :showTitle="true"></Search>
<view class="content" v-if="orderDetail">
<!-- 使用状态 -->
<view class="status">
<view class="status-text">{{ orderDetail.orderItems[0].prodName }}</view>
<view class="detail">有效期：{{ orderDetail.orderStore.receiverTime }}</view>
<view class="status-text">{{ shopName }}</view>
<view class="detail">有效期：{{ orderDetail.orderStore.writeOffEnd }}</view>
</view>
<!-- 券码信息 -->
......@@ -32,8 +33,9 @@ import Header from './components/Header/index.vue';
import { getOrderDetail } from '@/api/order';
import QRCode from 'qrcode';
const shopName = ref('商家名称');
onLoad((options) => {
console.log(options);
shopName.value = options.shopName;
getOrderDetailFn(options.orderNumber);
});
......@@ -76,7 +78,6 @@ page {
margin: 0 auto;
.content {
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 20rpx;
......
src/pages/ticket/detail.vue
View file @ a236ca9b
<template>
<view class="container">
<Header :title="shopDetail.shopName"></Header>
<!-- <Header :title="shopDetail.shopName"></Header> -->
<Search :title="shopDetail.shopName" backgroundBox="white" :showTitle="true"></Search>
<view class="content">
<view class="shop">
<image :src="fileDomain + shopDetail.shopLogo" class="logo" mode="aspectFill"></image>
......@@ -342,7 +342,7 @@ page {
.content {
display: flex;
flex-direction: column;
padding: 100rpx 26rpx 26rpx;
padding: 20rpx 26rpx 26rpx;
gap: 26rpx;
.shop {
......
src/pages/ticket/ticket.vue
View file @ a236ca9b
<template>
<view class="container">
<Header title="我的券"></Header>
<!-- <Header title="我的券"></Header> -->
<Search title="我的券" backgroundBox="white" :showTitle="true"></Search>
<view class="tab">
<view
:class="currentTab == index ? 'tab-select' : 'tab-item'"
......@@ -308,7 +309,7 @@ page {
.content {
display: flex;
flex-direction: column;
padding: 202rpx 26rpx 26rpx;
padding: 100rpx 26rpx 26rpx;
gap: 36rpx;
.card {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment