H5_QiCaiYao/page_goods/often/index.vue

<template>
	<view class="often_wrapper">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="true" :auto-show-back-to-top="true"
			:hide-empty-view="true">
			<view slot="top">
				<u-navbar title="常购清单" :autoBack="true" placeholder>
					<!-- <view slot="right" class="right" @click="isManage = !isManage">
						<text v-if="isManage">完成</text>
						<text v-else>管理</text>
					</view> -->
				</u-navbar>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="title">{{item.create_date}}</view>
					<view class="order_goods">
						<goodsItem :orderGoods="v" v-for="(v,i) in item.order_goods" :key="i" :item="v"
							:activeColor="activeColor">
						</goodsItem>
					</view>
				</view>
			</view>
			<view class="" slot="bottom">
				<view class="bottomBox">
					<view class="allCheck" @click="allCheckBtn">
						<uni-icons type="checkbox-filled" size="28" :color="activeColor" v-if="allCheck"></uni-icons>
						<uni-icons type="circle" size="28" color="#aaa" v-else></uni-icons>
						<text v-if="!allCheck">全选</text>
						<text v-else>取消全选</text>
					</view>
					<view class="btnBox">
						<view class="joinCart" :style="{'background':activeColor}" style="color: #fff;"
							@click="joinCart">
							加入购物车
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import goodsItem from './components/goods_item.vue';
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				isManage: false,
				dataList: [],
				allCheck: false,
				color: '',
				activeColor: ''
			};
		},
		onShow() {
			this.color = uni.getStorageSync('theme_style').main_color_shallow
			this.activeColor = uni.getStorageSync('theme_style').main_color
		},
		watch: {
			dataList: {
				handler(newVal) {
					if (newVal.length > 0) {
						this.allCheck = newVal.every(item => {
							return item.order_goods.every(v => {
								return v.is_check
							})
						})
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			async queryList(page, page_size) {
				let url = '/api/order/buylists';
				let obj = {
					page,
					page_size
				}
				const res = await this.$api.sendRequest({
					url,
					data: obj,
					async: false
				})
				let arr
				arr = res.data.list
				arr.forEach(item => {
					item.order_goods.forEach(v => {
						v.is_check = false
					})
				})
				this.$refs.paging.complete(arr);
			},
			allCheckBtn() {
				if (this.allCheck) {
					this.dataList.forEach(item => {
						item.order_goods.forEach(v => {
							v.is_check = false
						})
					})
				} else {
					this.dataList.forEach(item => {
						item.order_goods.forEach(v => {
							v.is_check = true
						})
					})
				}
			},
			async joinCart() {
				let arr = []
				await this.dataList.forEach(item => {
					item.order_goods.forEach(v => {
						if (v.is_check) {
							arr.push(v)
						}
					})
				})
				await arr.forEach(item => {
					this.$api.sendRequest({
						url: '/api/cart/add',
						data: {
							sku_id: item.sku_id,
							num: item.min_buy ? item.min_buy : 1
						},
						success: res => {
							this.$util.showToast({
								title: '加入购物车成功'
							});
						}
					});
				});
				this.$store.dispatch('getCartNumber');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.often_wrapper {
		.list {
			.title {
				margin: 10rpx 30rpx;
			}

			.order_goods {
				width: calc(100% - 60rpx);
				margin: 0rpx 30rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}

		.bottomBox {
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			height: 120rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
			background: #fff;
			display: flex;
			justify-content: space-between;

			.allCheck,
			.btnBox {
				display: flex;
				align-items: center;
			}

			.joinCart {
				padding: 5rpx 20rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>