xiongmao/pages/index/my-custom/my-custom.vue

<!-- 我的定制 -->
<template>
	<view class="wrap">

		<view class="tab-list">
			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
				@click="checked(index)">
				{{item.title}}
			</view>
		</view>

		<view class="list">
			<view class="item">
				<view class="item-content">
					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
					<view class="item-content-sidebar">
						<view class="product-item-name">
							冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
						</view>
						<view class="product-item-tag">
							<text>一盒15g*20袋</text>
							<text class="product-item-price">￥394.00</text>
						</view>
						<view class="row-between">
							<view class="color-box">
								<text>颜色:</text>
								<view class="fangkuai"></view>
							</view>
							<text class="num">x4</text>
						</view>
						<view class="product-item-remark">
							备注:需要大量定制，用于元旦送给VIP客户
						</view>
					</view>
				</view>
				
				<view class="item-bottom">
					<text class="date-time">2021-11-16</text>
					<text class="express-information">中通快递:ZT456789415213</text>
					<!-- 待确认显示 -->
					<button type="default">确认</button>
					<!-- 待付款显示 -->
					<!-- <button type="default">去支付</button> -->
					<!-- 待发货显示 -->
					<!-- <button type="default">催发货</button> -->
					<!-- 待收货显示 -->
					<!-- <button type="default">确认收货</button> -->
				</view>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-3.png" mode="widthFix"></image>
				<text>暂无订单</text>
				<button type="default">去逛逛</button>
			</view> -->

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '待确认',
				}, {
					index: 1,
					title: "待付款",
				}, {
					index: 2,
					title: "待发货",
				}, {
					index: 3,
					title: "待收货",
				}],
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

		}
	}
</script>


<style scoped lang="scss">
	@import "./my-custom.css";
</style>