wj/pages/order/jforder.vue

<template>
	<view class="">
		<view  v-for="(item, index) in list" :key="index" class="order-item">
			<view class="i-top b-b">
				<text class="time">{{ item.pay_time |showTime }}</text>
				<!-- <text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text> -->
				<!-- <text v-if="item.status === 4" class="del-btn iconfont icondelete" @click="deleteOrder(index)"></text> -->
			</view>
			<view class="goods-box-single">
				<image class="goods-img" :src="item.goods_image" mode="scaleToFill"></image>
				<view class="right">
					<view class="flex-start">
						<text class="title clamp">{{ item.goods_name }}</text>
						<!-- <text class="price">{{ item.pay_price|moneyNum }}</text> -->
					</view>
					<view class="row flex">
						<!-- <text class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text> -->
						<text class="attr-box"> x {{ item.goods_num }}</text>
					</view>
				</view>
			</view>
			<view class="price-box">
				<!-- 共
				<text class="num">{{ item.cartInfo.length }}</text>
				件商品 邮费
				<text class="price">{{ moneyNum(item.pay_postage)}}</text> -->
				实付款
				<text class="price">{{ moneyNum(item.pay_price)}}</text>
			</view>
			<view class="action-box b-t" v-if="item.sn">
				<button  class="action-btn" @click.stop="lookWl(item.sn)">查看物流</button>
			</view>
			
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<uni-popup ref="popup" type="center">
			<view class="express">
				<view class="">
					快递公司：<text style="font-weight: bold;">{{express.express_name}}</text>
				</view>
				<view class="">
					快递单号：<text style="font-weight: bold;">{{express.express_no}}</text>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	
	import { getJfOrder, getWl } from '@/api/order.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				list: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				express:{express_name:'暂无',express_no:'暂无'},
			}
		},
		onLoad() {
			this.getDate()
		},
		filters: {
			showTime(val) {
				let date = new Date(val * 1000);
				let Y = date.getFullYear();
				let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
				return Y + '年' + M + '月' + D + '日';
			},
		},
		onReachBottom() {
			this.getDate()
		},
		methods: {
			// 转换金额为数字
			moneyNum(value){
					return +value;
			},
			getDate() {
				let obj = this
				
				if (obj.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (obj.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.loadingType = 'loading';
				getJfOrder({
					page: obj.page,
					limit: obj.limit
				}).then(({data}) => {
					// console.log(res)
					obj.list = obj.list.concat(data.data)
					obj.page++
					if (obj.limit == data.data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.loadingType = 'more';
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.loadingType = 'noMore';
					}
				})
			},
			//查看物流
			lookWl(item) {
				console.log(item)
				let obj = this
				uni.showLoading({
					title:'查询中...'
				})
				getWl({
					sn:item
				}).then(({data}) => {
					uni.hideLoading()
					console.log(data)
					if(data.status_code == 404) {
						this.$api.msg('暂无该商品的物流信息')
					}
					obj.express = data.express_list[0]
					obj.$refs.popup.open()
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		background: #fff;
		margin-top: 16rpx;
		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
			.time {
				flex: 1;
			}
			.state {
				color: $base-color;
			}
			.del-btn {
				padding: 10rpx 0 10rpx 36rpx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;
				&:after {
					content: '';
					width: 0;
					height: 30rpx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		/* 多条商品 */
		.goods-box {
			height: 160rpx;
			padding: 20rpx 0;
			white-space: nowrap;
			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}
			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx 0;
			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.row{
					margin-top: 10rpx;
				}
				.row_title{
					padding:5rpx 10rpx;
					background-color: #dddddd;
					border-radius: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
				}
				.title {
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					line-height: 1;
					width: 80%;
				}
				.attr-box {
					display: flex;
					justify-content: flex-end;
					font-size: $font-sm + 2rpx;
					color: $font-color-light;
				}
				.price {
					display: inline;
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					&:before {
						content: '积分';
						font-size: $font-sm;
						
					}
				}
			}
		}
		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 30rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;
			.num {
				margin: 0 8rpx;
				color: $font-color-dark;
			}
			.price {
				font-size: $font-lg;
				color: $font-color-dark;
				&::after {
					content: '积分';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
				&::before {
					content: ' ';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}
		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			padding-right: 30rpx;
		}
		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			&:after {
				border-radius: 100px;
			}
			&.recom {
				color: $base-color;
				&:after {
					border-color: $base-color;
				}
			}
			&.evaluate {
				color: $color-yellow;
				&:after {
					border-color: $color-yellow;
				}
			}
		}
	}
	.express {
		width: 600rpx;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
	}
</style>