modify
This commit is contained in:
chenweiqiang
parent
03d981283e
commit
57090eb7f8
|
|
@ -0,0 +1,167 @@
|
||||||
|
<template>
|
||||||
|
<view class="bg">
|
||||||
|
<view class="flex-s-between-m-8">
|
||||||
|
<view class="flex-c-m-8">
|
||||||
|
<image
|
||||||
|
:src="groupLeader.avatar"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="avatar"
|
||||||
|
@error="handleAvatarError(groupLeader)"
|
||||||
|
/>
|
||||||
|
<text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
|
||||||
|
</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>共计：￥{{ total }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-s-between-m-8">
|
||||||
|
<view v-if="type==='pickup'">
|
||||||
|
<view class="flex-c-m-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">
|
||||||
|
<uni-icons type="paperplane-filled" size="30"></uni-icons>
|
||||||
|
<view>快递配送</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="pay_status==='pending' && order_status==='open'">
|
||||||
|
<button @click="payHandler">支付</button>
|
||||||
|
<button @click="cancelHandler">取消</button>
|
||||||
|
</view>
|
||||||
|
<view v-if="pay_status==='success' && express_status==='receiving' && order_status==='open'">
|
||||||
|
<button @click="getCodeHandler">获取取货码</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
interface GroupLeader {
|
||||||
|
id:String
|
||||||
|
avatar:String
|
||||||
|
nickname:String
|
||||||
|
address:String
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Goods {
|
||||||
|
id:String
|
||||||
|
img:String
|
||||||
|
price:String
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: String
|
||||||
|
order_status: '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'
|
||||||
|
groupLeader:GroupLeader
|
||||||
|
itemList:Goods[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 声明对外属性
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
// 加载图片信息
|
||||||
|
function handleAvatarError(leader: GroupLeader) {
|
||||||
|
leader.avatar = '/static/default_avatar.png'; // 加载失败时显示默认头像
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImageError(item: Goods) {
|
||||||
|
item.img = '/static/logo.png'; // 加载失败时显示默认头像
|
||||||
|
}
|
||||||
|
|
||||||
|
// 事件
|
||||||
|
const emit = defineEmits(['pay','cancel',"getClaimGoodsCode"])
|
||||||
|
|
||||||
|
function payHandler(id) {
|
||||||
|
emit('pay',props.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelHandler(id) {
|
||||||
|
emit('cancel',props.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCodeHandler(id) {
|
||||||
|
emit('getClaimGoodsCode',props.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatus() {
|
||||||
|
if (props.order_status === 'cancel') {
|
||||||
|
return '订单取消'
|
||||||
|
} else if (props.order_status === 'finish') {
|
||||||
|
return '订单完成';
|
||||||
|
} else if (props.order_status === 'open') {
|
||||||
|
// 订单中间状态 判断支付状态
|
||||||
|
if (props.pay_status === 'pending') {
|
||||||
|
return '待支付'
|
||||||
|
} else if (props.pay_status === 'success') {
|
||||||
|
// 支付完成判断物流状态
|
||||||
|
switch (props.express_status) {
|
||||||
|
case 'init':
|
||||||
|
return '待发货';
|
||||||
|
case 'pending':
|
||||||
|
return '待发货';
|
||||||
|
case 'receiving':
|
||||||
|
return '待收货';
|
||||||
|
case 'received':
|
||||||
|
return '已收货';
|
||||||
|
}
|
||||||
|
} else if (props.pay_status === 'refunding') {
|
||||||
|
return '退款中'
|
||||||
|
}
|
||||||
|
} else if (props.order_status === 'close') {
|
||||||
|
if (props.pay_status === 'failure') {
|
||||||
|
return '支付失败'
|
||||||
|
} else if (props.pay_status === 'refunded') {
|
||||||
|
return '已退款'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.bg {
|
||||||
|
background-color: rgb(251, 251, 251);
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-s-between-m-8 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-c-m-8 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<view>{{title}}</view>
|
<view class="top-fixed">
|
||||||
|
<view class="top-flex">
|
||||||
|
<button class="category-btn" v-for="item in categoryList"
|
||||||
|
:type="item.id ===selectId?'primary':'default'"
|
||||||
|
:key="item.id"
|
||||||
|
@click="changeCategory(item.id)">
|
||||||
|
{{item.name}}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,37 +17,62 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '订单首页',
|
title: '订单首页',
|
||||||
|
selectId:1,
|
||||||
|
categoryList:[
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
name:"全部"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
name:"待付款"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:3,
|
||||||
|
name:"待收货"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
name:"售后"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
if (this.categoryList.length > 0) {
|
||||||
|
this.selectId = this.categoryList[0].id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeCategory(id) {
|
||||||
|
this.selectId = id
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {},
|
|
||||||
methods: {},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.content {
|
.top-fixed {
|
||||||
|
background: #f0f0f0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999; /* 确保悬浮层级最高 */
|
||||||
|
width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
position: relative;
|
||||||
|
top:20rpx;
|
||||||
|
width: 90%;
|
||||||
|
left: 30rpx;
|
||||||
}
|
}
|
||||||
|
.category-btn {
|
||||||
.logo {
|
width: 200rpx;
|
||||||
height: 200rpx;
|
height: 60rpx;
|
||||||
width: 200rpx;
|
line-height: 60rpx;
|
||||||
margin-top: 200rpx;
|
font-size: 24rpx;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #8f8f94;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue