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="link-box" @tap="orderDetails">
					<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>
				<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" @tap="addCart">加入购物车</button>
					<button type="default" @tap="logisticsDetails">查看物流</button>

					<!-- 待付款显示 -->
					<!-- <button type="default" class="border-gray" @tap="cancel">取消订单</button>
					<button type="default" class="border-red" >付款</button> -->

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

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

					<!-- 待评价显示 -->
					<!-- <button type="default" class="border-red" @tap="evaluation">评价</button> -->

					<!-- 已完成 -->
					<!-- <button type="default" class="border-gray" @tap="del">删除订单</button> -->
				</view>
			</view>
			
			<!-- 无内容时显示 -->
			<view class="normal-box">
				<image src="../../static/normal-3.png" mode="widthFix"></image>
				<text>暂无订单</text>
				<button type="default" @tap="go">去逛逛</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
			},
			//跳转订单详情
			orderDetails() {
				uni.navigateTo({
					url: 'order-details/order-details'
				})
			},
			//跳转物流详情
			logisticsDetails()  {
				uni.navigateTo({
					url: 'logistics-details/logistics-details'
				})
			},
			//跳转评价
			evaluation()  {
				uni.navigateTo({
					url: 'evaluation/evaluation'
				})
			},
			//跳转申请开票
			applyForInvoice()  {
				uni.navigateTo({
					url: 'apply-for-invoice/apply-for-invoice'
				})
			},
			//跳转修改地址
			addAddress()  {
				uni.navigateTo({
					url: '../my/add-address/add-address'
				})
			},
			// 取消订单确认弹窗
			cancel(){
				uni.showModal({
					title: '提示',
					content: '确认取消订单？',
					confirmColor: '#F2501A',
					cancelColor: '#202020',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除订单确认弹窗
			del(){
				uni.showModal({
					title: '提示',
					content: '确认删除订单？',
					confirmColor: '#F2501A',
					cancelColor: '#202020',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//确认收货确认弹窗
			confirmReceipt(){
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					confirmColor: '#F2501A',
					cancelColor: '#202020',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//加入购物车提示弹窗
			addCart(){
				uni.showToast({
					title: '加入购物车成功',
					duration: 2000
				});
			},
			//跳转首页
			go(){
				uni.navigateTo({
					url:'../index/index'
				})
			}
		}
	}
</script>

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