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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,37 +17,62 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
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>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
.top-fixed {
|
||||
background: #f0f0f0;
|
||||
position: fixed;
|
||||
z-index: 999; /* 确保悬浮层级最高 */
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
top: 60rpx;
|
||||
}
|
||||
|
||||
.top-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top:20rpx;
|
||||
width: 90%;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
.category-btn {
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue