purchase-let/pagesOrder/order/component/good.vue

<template>
	<view class="shop-item">
		<view class="item-title" @click="navTo">
			<view>{{order_id}}</view>
			<view v-if="datas.paid==0">
				<text>待付款</text>
			</view>
			<view v-else>
				<text v-if="datas.status==0">待收货</text>
				<text v-if="datas.status==1">待收货</text>
				<text v-if="datas.status==2||datas.status==3">已完成</text>
			</view>
		</view>
		<view class="item-body" @click="navTo">
			<view class="body-content">
				<view style="display: flex;flex: 1;flex-shrink: 0;">
					<view v-for="(item,index) in datas.goods_list" :key="index" style="display: flex;">
						<image class="image" :src="item.image"></image>
						<view class="">
							<view class="" style="display: flex;position: relative;">
								<view>
									{{item.store_name}}
								</view>
								<view style="position: absolute;right: -440rpx;font-size: 32rpx;">
									￥{{item.price}}
								</view>
							</view>
							<view class="" style="display: flex;margin-top: 20rpx;position: relative;">
								<view style="translateX:-100rpx;">
									{{item.unit}}
								</view>
								<view style="position: absolute;right: -440rpx;font-size: 32rpx;">
									x{{item.cart_num}}
								</view>
							</view>
						</view>


					</view>
				</view>


				<!-- <view
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100rpx;">
					<up-icon name="arrow-right-double" color="#20B128"></up-icon>
				</view> -->
			</view>
			<view class="all">共 {{datas.goods_count}} 件商品, 总金额 <text>¥{{datas.total_price}}</text> </view>
		</view>
		<view v-if="datas.paid==0" class="item-btn">
			<view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle"
					@click="cancleOrder">取消订单</up-button></view>
			<view style="width: 80px;"><up-button size="small" color="#20B128" shape="circle"
					@click="rePay">立即支付</up-button></view>
		</view>
		<view v-else class="item-btn">
			<!-- <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">申请售后</up-button></view> -->
			<!-- <view @click="takeOrder" v-if="datas.status==1" style="width: 80px;"><up-button size="small" color="#20B128"
					shape="circle">确认收货</up-button></view> -->
			<view @click="purchaseAgain" v-if="datas.status==2||datas.status==3" style="width: 80px;"><up-button
					size="small" plain color="#20B128" shape="circle">再次购买</up-button></view>
			<view @click="navTo" style="width: 80px;"><up-button size="small" plain color="#20B128"
					shape="circle">查看详情</up-button></view>
			<view @click="applySh" style="width: 80px;" v-if="datas.status == 1 || datas.status == 2"><up-button
					size="small" plain color="#ccc" shape="circle">申请售后</up-button></view>
		</view>
		<!-- <view v-if="type==3" class="item-close">
      <view class="title">
        <view class="type">退款申请中</view>
        <view>等待商家处理</view>
      </view>
      <up-icon name="arrow-right"></up-icon>
    </view> -->
	</view>
</template>

<script setup>
	// 订单状态（0：待发货；1：待收货；2：已完成；3：已完成)
	const props = defineProps({
		type: {
			type: Number,
			default: 0
		},
		datas: {
			type: Object,
			default: () => {}
		},
		status: {
			type: String,
			default: ''
		},
		order_id: {
			type: String,
			default: '0'
		}
	})

	const navTo = () => {
		if (props.status == 4) {
			uni.navigateTo({
				url: "/pages/afterSales/afterSalesOrderDetail?id=" + props.datas.id
			})
		} else {
			uni.navigateTo({
				url: `/pagesOrder/detail/detail?type=${props.datas.paid}&id=${props.datas.id}`
			})
		}
	}

	const emit = defineEmits(['cancleOrder', 'rePay', 'takeOrder', 'purchaseAgain']);
	const cancleOrder = () => {
		emit('cancleOrder', props.datas)
	}

	const takeOrder = () => {
		emit('takeOrder', props.datas)
	}

	const purchaseAgain = () => {
		emit('purchaseAgain', props.datas)
	}

	const rePay = () => {
		emit('rePay', props.datas)
	}

	const applySh = () => {
		emit('applyAfterSales', props.datas)
	}
</script>

<style lang="scss">
	.shop-item {
		width: 710rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 14rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.item-title {
			display: flex;
			justify-content: space-between;
		}

		.item-body {
			margin: 20rpx 0;

			.body-content {
				display: flex;
				justify-content: space-between;
				color: #989898;

				.image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 14rpx;
				}

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #444;
				}

				.tips {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

			}

			.all {
				text-align: right;
				font-size: 26rpx;

				text {
					color: #F55726;
				}
			}
		}

		.item-btn {
			display: flex;
			justify-content: flex-end;

			view {
				width: 80rpx;
				margin-left: 20rpx;
			}
		}

		.item-close {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F6F6F6;
			padding: 15rpx;
			border-radius: 14rpx;

			.title {
				display: flex;

				.type {
					font-weight: 600;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>