demon.chen
/
app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modify

This commit is contained in:
chenweiqiang 2025-05-15 10:22:37 +08:00
parent 57090eb7f8
commit a33799032b
3 changed files with 307 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/component/order.vue
View File

@ -1,45 +1,47 @@
<template>
<view class="bg">
<view class="flex-s-between-m-8">
<view class="flex-c-m-8">
<view class="order-top">
<view class="header-name">
<image
:src="groupLeader.avatar"
mode="aspectFill"
class="avatar"
@error="handleAvatarError(groupLeader)"
/>
<text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
<view style="padding-left: 8px;">{{ groupLeader.nickname }}</view>
</view>
<view>{{ getStatus() }}</view>
</view>
<view class="flex-c-m-8">
<view class="flex-s-between-m-8">
<view>
<image
v-for="(item,idx) in itemList"
:key="idx"
class="item-img-h-50"
class="goods-img"
:src="item.img"
mode="aspectFill"
@error="handleImageError(item)"
/>
</view>
<view>共计：￥{{ total }}</view>
</view>
<view class="flex-s-between-m-8">
<view v-if="type==='pickup'">
<view class="flex-c-m-8">
<view v-if="type==='pickup'" class="flex-s-between-m-8-w-400">
<view class="flex-c-8">
<uni-icons type="location" size="30"></uni-icons>
<view class="text-ellipsis-w-120">{{ groupLeader.address }}</view>
</view>
<view>自行取货</view>
</view>
<view v-else class="flex-c-m-8">
<view v-else class="express-m-8">
<uni-icons type="paperplane-filled" size="30"></uni-icons>
<view>快递配送</view>
</view>
<view v-if="pay_status==='pending' && order_status==='open'">
<view v-if="payStatus==='pending' && orderStatus==='open'" class="flex-c-8">
<button @click="payHandler">支付</button>
<button @click="cancelHandler">取消</button>
<button class="btn-l-8" @click="cancelHandler">取消</button>
</view>
<view v-if="pay_status==='success' && express_status==='receiving' && order_status==='open'">
<view v-if="payStatus==='success' && expressStatus==='receiving' && orderStatus==='open'">
<button @click="getCodeHandler">获取取货码</button>
</view>
</view>
@ -63,11 +65,11 @@ interface Goods {
interface Props {
id: String
order_status: 'open' | 'cancel' | 'close' | 'finish'
orderStatus: 'open' | 'cancel' | 'close' | 'finish'
total:String
type:'express' | 'pickup'
pay_status: 'pending' | 'failure' | 'success' | 'refunding' | 'refunded'
express_status: 'init' | 'pending' | 'receiving' | 'received' | 'merchant_receiving' | 'merchant_received'
payStatus: 'pending' | 'failure' | 'success' | 'refunding' | 'refunded'
expressStatus: 'init' | 'pending' | 'receiving' | 'received' | 'merchant_receiving' | 'merchant_received'
groupLeader:GroupLeader
itemList:Goods[]
}
@ -100,17 +102,17 @@ function getCodeHandler(id) {
}
function getStatus() {
if (props.order_status === 'cancel') {
if (props.orderStatus === 'cancel') {
return '订单取消'
} else if (props.order_status === 'finish') {
} else if (props.orderStatus === 'finish') {
return '订单完成';
} else if (props.order_status === 'open') {
} else if (props.orderStatus === 'open') {
// 订单中间状态 判断支付状态
if (props.pay_status === 'pending') {
if (props.payStatus === 'pending') {
return '待支付'
} else if (props.pay_status === 'success') {
} else if (props.payStatus === 'success') {
// 支付完成判断物流状态
switch (props.express_status) {
switch (props.expressStatus) {
case 'init':
return '待发货';
case 'pending':
@ -120,13 +122,13 @@ function getStatus() {
case 'received':
return '已收货';
}
} else if (props.pay_status === 'refunding') {
} else if (props.payStatus === 'refunding') {
return '退款中'
}
} else if (props.order_status === 'close') {
if (props.pay_status === 'failure') {
} else if (props.orderStatus === 'close') {
if (props.payStatus === 'failure') {
return '支付失败'
} else if (props.pay_status === 'refunded') {
} else if (props.payStatus === 'refunded') {
return '已退款'
}
}
@ -149,13 +151,54 @@ function getStatus() {
margin: 8px;
}
.flex-c-m-8 {
.flex-s-between-m-8-w-400 {
display: flex;
justify-content: space-between;
align-items: center;
width:400rpx;
margin: 8px;
}
.flex-s-between-m-8-w-200 {
display: flex;
justify-content: space-between;
align-items: center;
width:260rpx;
margin: 8px;
}
.flex-c-8 {
display: flex;
align-items: center;
margin-left: 8rpx;
margin-right: 8rpx;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.header-name {
display: flex;
align-items: center;
width: 150rpx;
}
.order-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-top:20rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
.express-m-8 {
display: flex;
align-items: center;
width:160rpx;
margin-left: 8rpx;
margin-right: 8rpx;
}
.btn-l-8 {
margin-left: 8rpx;
}
.avatar {
@ -164,4 +207,10 @@ function getStatus() {
border-radius: 50%;
}
.goods-img {
margin: 8rpx;
width: 100rpx;
height: 100rpx;
}
</style>

6
src/main.js
View File

@ -2,12 +2,16 @@ import {
createSSRApp
} from "vue";
import App from "./App.vue";
import GroupOrderComponent from "./component/grouporder.vue";
import { setupInterceptors } from "@/utils/interceptors";
import GroupOrderComponent from "./component/grouporder.vue";
import OrderComponent from "@/component/order.vue";
export function createApp() {
const app = createSSRApp(App);
app.use(setupInterceptors)
app.component('GroupOrderComponent',GroupOrderComponent)
app.component('OrderComponent',OrderComponent)
return {
app,
};

220
src/pages/order/index.vue
View File

@ -8,11 +8,26 @@
{{item.name}}
</button>
</view>
<scroll-view class="scroll-V" scroll-y>
<OrderComponent v-for="item in data" :key="item.id"
:id="item.id"
:type="item.type"
:orderStatus="item.order_status"
:total="item.total"
:payStatus = "item.pay_status"
:itemList="item.item_list"
:groupLeader = "item.group_leader"
:expressStatus = "item.express_status"
@pay="paySubmit"
@cancel="cancelHandler"
@getClaimGoodsCode="getClaimGoodsCodeHandler"
></OrderComponent>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
@ -36,6 +51,194 @@ export default {
name:"售后"
}
],
data:[
{
id:1,
order_status:'open',
total:'64',
type:'express',
pay_status:'pending',
express_status:'init',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
{
id:2,
order_status:'open',
total:'64',
type:'pickup',
pay_status:'success',
express_status:'receiving',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
{
id:3,
order_status:'cancel',
total:'64',
type:'pickup',
pay_status:'pending',
express_status:'init',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
{
id:4,
order_status:'close',
total:'64',
type:'pickup',
pay_status:'refunding',
express_status:'init',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
{
id:5,
order_status:'close',
total:'64',
type:'express',
pay_status:'refunded',
express_status:'init',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
{
id:6,
order_status:'finish',
total:'64',
type:'express',
pay_status:'success',
express_status:'received',
group_leader:{
id:1,
avatar:"aaa",
nickname:'测试1',
address:'自提点地址1'
},
item_list:[
{
id:1,
img:"b",
price:"10"
},
{
id:2,
img:"b",
price:"30"
},
{
id:2,
img:"b",
price:"24"
}
]
},
]
}
},
onLoad() {
@ -46,6 +249,15 @@ export default {
methods: {
changeCategory(id) {
this.selectId = id
},
paySubmit(id) {
console.log('pay clicked',id)
},
cancelHandler(id) {
console.log('cancel clicked',id)
},
getClaimGoodsCodeHandler(id) {
console.log('getClaimGoodsCode clicked',id)
}
},
}
@ -75,4 +287,10 @@ export default {
line-height: 60rpx;
font-size: 24rpx;
}
.scroll-V {
position: fixed;
top:150rpx;
height:80vh;
}
</style>