xiongmao/pages/my-order/my-order.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-top">
					<text>限源预售</text>
					<text>交易成功</text>
				</view>
				<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-row-between">
							<view class="product-item-name">
								冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
							</view>
							<view class="row-end">
								<text class="product-item-price">￥394.00</text>
								<text class="product-item-num">x <text>1</text></text>
							</view>
						</view>
						<view class="product-item-tag">
							<text>一盒15g*20袋</text>
							<text class="status-msg">退款关闭</text>
						</view>
						<view class="product-item-msg">
							7天无理由退换货
						</view>
					</view>
				</view>
				<view class="msg-box">
					<view class="freight-insurance-row">
						<text class="font-1">运费险</text>
						<text class="font-2">退换货可自动理赔</text>
						<text class="font-3">￥0.00 x1</text>
					</view>
					<view class="price-row">
						<text class="margin">总价￥<text class="big-font">29.90</text></text>
						<text class="margin">优惠￥<text class="big-font">1.75</text></text>
						<text class="margin">实付款￥<text class="big-font-black">28.15</text></text>
					</view>
				</view>
				<view class="item-bottom">
					<button type="default">加入购物车</button>
					<button type="default">查看物流</button>
					
					<!-- 待付款显示 -->
					<!-- <button type="default" class="border-gray">取消订单</button>
					<button type="default" class="border-gray">取消订单</button>
					<button type="default" class="border-red">付款</button> -->

					<!-- 待发货显示 -->
					<!-- <button type="default">申请开票</button>
					<button type="default">修改地址</button> -->

					<!-- 待收货显示 -->
					<!-- <button type="default">申请开票</button>
					<button type="default">查看物流</button>
					<button type="default" class="border-red">确认收货</button> -->
					
					<!-- 待评价显示 -->
					<!-- <button type="default" class="border-red">评价</button> -->

					<!-- 已完成 -->
					<!-- <button type="default" class="border-gray">删除订单</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: "待收货",
				}, {
					index: 4,
					title: "待评价",
				}],
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

		}
	}
</script>

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