xietaitai-shop-wx/packages/myorder/myorder.vue

<template>
	<view class='cotainer'>
		<view class="tabsnav">
			<!-- <u-tabs lineWidth="50" lineHeight="2" :scrollable="false" :list="tablist" lineColor="#dea166"
				:is-scroll="false" :current="current" @change="orderChange"></u-tabs> -->
			<u-subsection bg-color="#fff" button-color="#eeeeef" :list="tablist" :current="current" @change="orderChange"></u-subsection>
		</view>
		<view>
			<!-- <u-empty v-if="dataList.length==0" marginTop="250"></u-empty> -->
			<view class="orderlist">
				<view class="orderlist-item" v-for="item in dataList">
					<view>顺丰单号：SF233333333333</view>
					<view class="orderlist-item-img">
						<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
						<view>{{item.sku?item.sku.name:''}}{{item.sku?item.sku.specs:''}}</view>
					</view>
					<view class="orderlist-item-date">
						预计送达时间：{{item.send_date}}
					</view>
					<view class="orderlist-item-btn">
						<u-button @click="addRemark(item)" size="mini" shape="circle">添加备注</u-button>
						<u-button @click="" size="mini" shape="circle">通知收件人</u-button>
						<u-button @click="" size="mini" shape="circle">删除</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				tablist: [{
					name: '待收货',
					idx: 1
				}, {
					name: '已完成',
					idx: 0
				}],
				current: 0,
				dataList: []
			}
		},
		onLoad() {
			this.loadOrder()
		},
		methods: {
			orderChange(e) {
				console.log(e)
				this.current = e;
				// this.loadOrder(1);
			},
			todetail(id) {
				// uni.navigateTo({
				// 	url: "/pages/exhibit/detail?id=" + id
				// });
			},
			loadOrder(page) {
				var that = this;
				this.$u.api.getUserOrder().then(res=>{
					console.log(res)
					this.dataList = res
				}).then(res=>{
					
				})
			},
			addRemark(item){
				let _this = this
				uni.showModal({
					title: '添加备注',
					editable:true,
					success: function (res) {
						if (res.confirm) {
							item.remark = res.content
							_this.$u.api.saveUserOrder(item).then(res=>{
								
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.cotainer{
		
	}
	.tabsnav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
	.orderlist {
		padding: 0 30rpx;
		padding-top: 85rpx;
		padding-bottom: 150rpx;
		&-item{
			border:1px solid #ddd;
			border-radius: 20rpx;
			padding:30rpx;
			margin:20rpx 0;
			&-img{
				display: flex;
				align-items: center;
				margin: 30rpx 0;
				>view {
					margin: 20rpx;
					font-size: 36rpx;
				
					&:last-child {
						color: #ccc;
						font-size: 28rpx;
						text-align: center;
					}
				
				}
			}
			&-date{
				padding-bottom:10rpx;
				border-bottom:1px solid #ddd;
			}
			&-btn{
				display: flex;
				justify-content: space-between;
				margin-top:30rpx;
			}
		}
	}
</style>