feiniao-youwei-uniapp/pages/tabBar/mine/components/shopList.vue

<template>
	<view class="shop-list">
		<view class="shop-item" v-for="(item,index) in 1" :key="index" @click="handleShop(item)">
			<view class="shop-head">
				<view class="shop-title">
					<text>从化荔博园店铺</text>
					<up-icon class="icon" name="arrow-right" size="12" color="rgba(137, 137, 137, 0.69)"></up-icon>
				</view>
				<text class="status">{{statusStr[active]}}</text>
			</view>
			<view class="shop-cont">
				<image class="shop-img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
				</image>
				<view class="shop-info">
					<view class="shop-name flex">
						<text>海南妃子笑荔枝新鲜采摘</text>
						<text class="shop-price">¥25</text>
					</view>
					<view class="shop-text flex">
						<text>3斤装规格</text>
						<text>x1</text>
					</view>
					<up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
					<view class="total">
						<view v-if="active==3 || active==4">共优惠 <text class="num">¥10</text></view>
						<view v-if="active!=0 || active!=1">实付款 <text class="num">¥25</text></view>
					</view>
				</view>
			</view>
			<view :class="['shop-foot','flex',{end:type === 'detail'}]">
				<view class="more" v-show="type !== 'detail'">更多</view>
				<view class="shop-button" v-if="active==0 || active==1">
					<view>取消订单</view>
					<view>付款</view>
				</view>
				<view class="shop-button" v-else-if="active==2">
					<view>删除订单</view>
					<view>提醒发货</view>
				</view>
				<view class="shop-button" v-else-if="active==3">
					<view>删除订单</view>
					<view>查看物流</view>
					<view class="confirm">确认收货</view>
				</view>
				<view class="shop-button" v-else="active==4">
					<view>申请售后</view>
					<view>去评价</view>
					<view class="confirm">再买一单</view>
				</view>
			</view>
			<view class="shop-detail-info" v-show="type === 'detail'">
				<view class="info-row">
					<view class="label">订单编号</view>
					<view class="value">69854885962524256653</view>
				</view>
				<!-- <view class="info-row">
					<view class="label">更多信息</view>
				</view> -->
				<up-collapse :border="false">
					<up-collapse-item title="更多信息" cellCustomClass="collapse-item" value="展开" :rightIconStyle="{color:'rgba(137, 137, 137, 0.69)',size:'10px'}">
						123145646
					</up-collapse-item>
				</up-collapse>
				<!-- <view class="btn-text">
					<up-icon name="chat-fill"></up-icon>
					<text>联系商家</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const props = defineProps({
		active: {
			type: [Number, String],
			default: 0
		},
		type: {
			type: String,
			default: ''
		}
	})

	const statusStr = {
		0: "待付款",
		1: "待付款",
		2: "待发货",
		3: "待收货",
		4: "交易成功",
		5: "退款/售后",
	}

	const handleShop = () => {
		if (props.active == 3 || props.active == 4) {
			uni.navigateTo({
				url: `/pages/tabBar/mine/subPages/orderDetail?status=${props.active}`
			});
		}
	}
</script>

<style lang="scss" scoped>
	.shop-list {
		font-size: 28rpx;

		.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.shop-item {
			background: #fff;
			padding: 20rpx 24rpx;

			.shop-head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.shop-title {
					font-weight: 500;
					display: flex;

					.icon {
						margin-left: 2rpx;
					}
				}

				.status {
					color: #F3C11D;
				}
			}

			.shop-cont {
				width: 100%;
				display: flex;
				margin: 20rpx 0;

				.shop-img {
					width: 182rpx;
					height: 182rpx;
					margin-right: 10rpx;
					border-radius: 10rpx;
				}

				.shop-info {
					width: calc(100% - 182rpx - 10rpx);

					.shop-name {
						font-size: 28rpx;
						font-weight: 500;

						.shop-price {
							font-weight: 400;
						}
					}

					.shop-text {
						color: #717070;
					}

					.total {
						margin-top: 20rpx;
						display: flex;
						justify-content: flex-end;

						.num {
							font-weight: 500;
							font-size: 34rpx;
						}

						view+view {
							margin-left: 20rpx;
						}
					}
				}
			}

			.shop-foot {
				&.end {
					justify-content: flex-end;
				}

				.more {
					color: rgba(0, 0, 0, 0.5);
				}

				.shop-button {
					display: flex;
					align-items: center;

					view {
						width: 164rpx;
						padding: 10rpx 0;
						text-align: center;
						border-radius: 50rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.3);
					}

					.confirm {
						background: #FFD95E;
						border: 2rpx solid transparent;
					}

					view+view {
						margin-left: 20rpx;
					}
				}
			}

			.shop-detail-info {
				.info-row {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						font-size: 26rpx;
					}
					.value{
						color: rgba(0, 0, 0, 0.5);
					}
				}
				.collapse-item{
					border: none;
				}
				.btn-text{
					display: flex;
					align-items: center;
				}
				::v-deep .u-cell > .u-cell__body {
				  padding: 0 !important;
				  font-size: 26rpx;
				  margin-top: 20rpx;
				  // color: rgba(0, 0, 0, 0.5);
				  .u-cell__left-icon-wrap{
					  margin-right: 0;
				  }
				}
			}
		}

		.shop-item+.shop-item {
			margin-top: 10rpx;
		}
	}
</style>