MeiMeiZhuan/pages/recommen/order.vue

<template>
	<view >
		<view class="container">
			<!-- 空白页 -->
			<empty v-if="cartList.length < 1"></empty>
			<view class="header flex1" v-if="cartList.length >= 1">
				<view class="header-1">累计推广<text>{{cartList.length}}</text>件商品</view>
			</view>
			<scroll-view v-if="cartList.length >= 1">
				<!-- 列表 -->
				<view class="cart-list"  v-for="(item, index) in cartList" :key="index">
					<view class="header-select flex1" @click="check('all')">
						<view class="flex-upDown-center">
							<view><image :src="item.avatar"></image></view>
							<view class="word-1">{{item.nickname}}</view>
						</view>
					</view>
					<view class="cart" >
						<scroll-view v-if="item.cart_info.length > 1" class="goods-box" scroll-x>
							<view v-for="(goodsItem, goodsIndex) in item.cart_info" :key="goodsIndex" class="goods-item">
								<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
							</view>
						</scroll-view>
						<view v-if="item.cart_info.length == 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cart_info" :key="goodsIndex">
							<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
							<view class="right">
								<view class="flex1">
									<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
									<text class="price">{{ item.pay_price|moneyNum }}</text>
								</view>
								<text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
							</view>
						</view>
					</view>
					<!-- <view class="time">一级订单：2019545845554548</view> -->
					<view class="time">下单时间：{{item.time}}</view>
					<view class="money" v-if="item.type == 'brokerage'">返佣：{{item.number}}</view>
					<view class="money" v-if="item.type == 'pay_money'">支付金额：{{item.number}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { recommen  } from '@/api/order.js';
import { mapState } from 'vuex';
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
import empty from '@/components/empty';
export default {
	components: {
		uniSwipeAction,
		uniSwipeActionItem,
		empty
	},
	data() {
		return {
			page: 1,
			limit: 10,
			ischeck:false,//
			total: 0, //总价格
			allChecked: false, //全选状态  true|false
			empty: false, //空白页现实  true|false
			cartList: [],
			options:[
				{
					text: '删除',
					style: {
						backgroundColor: '#FC4141'
					}
				}
			]
		};
	},
	onShow() {
		// 只有登录时才加载数据
		if (this.hasLogin) {
			this.loadData();
		}
		console.log(this.empty,102)
	},
	// watch: {
	// 	//显示空白页
	// 	cartList(e) {
	// 		let empty = e.length === 0 ? true : false;
	// 		if (this.empty !== empty) {
	// 			this.empty = empty;
	// 		}
	// 	}
	// },
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		//请求数据
		loadData() {
			let that = this;
			let page = that.page;
			let limit = that.limit;
			// let data = {
			// 	page: page,
			// 	limit: limit
			// };
			recommen({}).then(({data}) => {
				
				that.cartList = data.list[0].child;
				console.log(that.cartList.length,'that.cartList')
			});
		},
		
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
}


.container {
	padding-bottom: 134rpx;
	background-color: $page-color-base;
	height: 100%;
	position: relative;
	line-height: 1;
	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
		.emptyImg {
			width: 300rpx;
			height: 250rpx;
			margin-bottom: 30rpx;
		}
		.empty-tips {
			display: flex;
			font-size: $font-sm + 2rpx;
			color: $font-color-disabled;
			.navigator {
				color: $uni-color-primary;
				margin-left: 16rpx;
			}
		}
	}
	.header{
		padding: 30rpx 33rpx;
		background:#FFFFFF;
		.header-1{
			font-size:28rpx;
			font-weight:600;
			color:#222222;
			text{
				color:#FC4141;
			}
		}
		.header-2{
			font-size:28rpx;
			font-weight:400;
			color:#333333;
		}
	}
	
	
	/* 列表 */
	.cart-list{
		padding: 25rpx 33rpx;
		background-color: #FFFFFF;
		margin:20rpx 25rpx 0 25rpx;
		border-radius: 10rpx;
		.header-select {
			padding-top: 20rpx;
			width: 100%;
			background-color: #FFFFFF;
			image{
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}
			text{
				font-size:28rpx;
				font-weight:400;
				color:#fd5b23;
			}
			.checked-img{
				font-size: 28rpx;
				margin-right: 10rpx;
				color: $font-color-disabled;
			}
			.checked-img.checked {
				color: $background-color;
			}
			.word-1{
				font-size:26rpx;
				font-weight:600;
				color:#222222;
			}
			.word-1{
				font-size:30rpx;
				font-weight:400;
				color:#1d2023;
			}
		}
		
		.cart{
			width: 100%;
			background-color: #FFFFFF;
			padding-top: 20rpx;
			/* 多条商品 */
			.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: 120rpx;
					height: 120rpx;
				}
			}
			/* 单条商品 */
			.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 0rpx 0 24rpx;
					overflow: hidden;
					.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;
							
						}
					}
				}
			}
		}
		.time{
			font-size:24rpx;
			font-weight:400;
			color:#999999;
			padding-bottom: 20rpx;
			&:nth-last-of-type(2)
			{
				border-bottom: 1px solid #F0F0F0;
			}
		}
		
		.money{
			font-size:28rpx;
			font-weight:500;
			color:#1d2023;
			margin-top: 30rpx;
			text-align: right;
		}
		
	}
	/* 底部栏 */
	.action-section {
		width: 100%;
		background:#ffffff;
		box-shadow:0px -3px 7px 0px #e6e6e6;
		padding:21rpx 36rpx;
		display: flex;
		justify-content:space-between;
		position: fixed;
		bottom: 50px;
		.checkbox {
			display: flex;
			justify-content:space-between;
			align-items: center;
			.checked-img{
				font-size: 28rpx;
				margin-right: 10rpx;
				color: $font-color-disabled;
			}
			.checked-img.checked {
				color: $background-color;
			}
			.checked-word{
				font-size:30rpx;
				font-weight:400;
				color:#1d2023;
			}
		}
		.total-box {
			display: flex;
			justify-content:space-between;
			.word {
				font-size:26rpx;
				font-weight:500;
				color:#333333;
				margin-right: 16rpx;
			}
			.price {
				font-size:26rpx;
				font-weight:550;
				color:#FA2740;
				margin-right: 34rpx;
				
			}
			.confirm-btn{
				width:160rpx;
				height:64rpx;
				background:$base-color;
				border-radius:32rpx;
				display: flex;
				justify-content:center;
				align-items: center;
			}
		}
	}
}

</style>