hs_hzl_uniapp_ml/pageA/integral/shopcar.vue

<template>
	<view>
		<view style="padding: 10rpx 20rpx;">
			<view v-if="!shopDataNow">
				<image style="margin: 0 auto; width: 100%;" src="../../static/img/page/empty_view.png"></image>
			</view>
			<u-checkbox-group v-model="checkgroup" placement="column" @change="checkChange">
				<view v-for="(item, index) in shopDataNow" :key="index">
					<view v-if="item.num !== 0 && item.num" class="listItemStyle">
						<u-row>
							<u-col span="2">
								<view style="margin: 15rpx 10rpx 0 10rpx;">
									<u-checkbox activeColor="#53a591" :customStyle="{marginBottom: '8px'}" :name="item">
									</u-checkbox>
								</view>
							</u-col>
							<u-col span="3">
								<u--image :showLoading="true" shape="circle" :src="baseURL+item.giftPictrue"
									width="80px" height="80px" style="margin: 10rpx "></u--image>
							</u-col>
							<u-col span="7">
								<view style="">
									{{item.giftName}}
								</view>
								<view style="text-align: left;color: #ffaf25;font-size: 22rpx;margin-top: 10rpx;">
									{{item.eventTime+" 可领取"}}
								</view>
								<u-row>
									<u-col span="6">
										<view style="margin-top: 10rpx;">
											<u-icon name="integral" :label="item.giftPrice"></u-icon>
										</view>
									</u-col>
									<u-col span="6">
										<view style="margin-top: 30rpx;">
											<u-row>
												<u-col span="4">
													<view style="padding: 5rpx;">
														<u-button icon="minus" size="mini" plain="ture"
															:disabled="buttonIsUse" @click="minusGoods(item)">
														</u-button>
													</view>
												</u-col>
												<u-col span="4">
													<view style="text-align: center;">
														{{parseInt(item.num)}}
													</view>
												</u-col>
												<u-col span="4">
													<view style="padding: 5rpx;">
														<u-button icon="plus" size="mini" plain="ture"
															:disabled="buttonIsUse" @click="addGoods(item)">
														</u-button>
													</view>
												</u-col>
											</u-row>
										</view>
									</u-col>
								</u-row>
							</u-col>
						</u-row>
					</view>
				</view>

			</u-checkbox-group>
		</view>
		<view style="margin-bottom: 150rpx;"></view>
		<view class="bottim_view">
			<view>
				<u-row>
					<u-col span="11">
						<u-button class="btnDoPay" shape="circle" @click="toOKPage"
							color="linear-gradient(to bottom right, #79a7a4, #88d8a1)" text="确认下单"></u-button>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				baseURL: this.$BASE_URL,
				list: 15,
				page: 0,
				shopDataNow: [],
				gwcId: '',
				buttonIsUse: false,
				checkgroup: ''
			}
		},
		onLoad() {
			this.getGWC()
			uni.removeStorageSync('shopData')
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			checkChange(detail) {
				if (detail.length === 0) {
					this.buttonIsUse = false
				} else {
					this.buttonIsUse = true
					uni.setStorageSync('shopData', detail)
				}
			},
			async getGWC() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getUsc',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.shopDataNow = res.data
				} else {
					uni.showToast({
						duration: 1000,
						title: res.msg,
						icon: 'none'
					})
				}
				uni.stopPullDownRefresh()
			},
			async minusGoods(data) {
				data.plusOrMinus = 1
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/addShopCar',
					method: 'post',
					data: data,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.getGWC()
				} else {
					this.$showModal(res.msg)
				}
			},
			async addGoods(data) {
				data.plusOrMinus = 0
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/addShopCar',
					method: 'post',
					data: data,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.getGWC()
				} else {
					this.$showModal(res.msg)
				}
			},
			toOKPage() {
				let that = this
				let data = uni.getStorageSync('shopData')
				if (data && data.length > 0) {
					for (var i = 0; i < data.length; i++) {
						for (var j = 0; j < data.length - 1; j++) {
							if (data[i].eventId !== data[j + 1].eventId) {
								that.$showModal("不同活动商品不能同时下单")
								return;
							}
						}
					}
					uni.navigateTo({
						url: 'list'
					})
				} else {
					uni.showToast({
						duration: 1500,
						title: '请选择至少一个物品',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listItemStyle {
		height: 100%;
		margin: 10rpx 0;
		padding: 20rpx 15rpx;
		border-radius: 15px;
		background-color: #ffffff;
		border: 1rpx solid #eeeeee;
	}

	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}

	.bottim_view {
		padding: 5px 20px 30px;
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 40px;
		background-color: #ffffff;
		z-index: 9999;
	}

	.btnDoPay {
		width: 100%;
	}
</style>