modify
This commit is contained in:
chenweiqiang
parent
57090eb7f8
commit
a33799032b
|
|
@ -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">
|
||||
<image
|
||||
v-for="(item,idx) in itemList"
|
||||
:key="idx"
|
||||
class="item-img-h-50"
|
||||
:src="item.img"
|
||||
mode="aspectFill"
|
||||
@error="handleImageError(item)"
|
||||
/>
|
||||
<view class="flex-s-between-m-8">
|
||||
<view>
|
||||
<image
|
||||
v-for="(item,idx) in itemList"
|
||||
:key="idx"
|
||||
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>
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue