hs_hzl_uniapp_ml/pageA/integral/shopcarTemporary.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>
								<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(index,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()
		},
		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)
				}
			},
			getGWC() {
				this.shopDataNow = uni.getStorageSync('shopData')
				uni.removeStorageSync('shopData')
				uni.stopPullDownRefresh()
			},
			async minusGoods(index, data) {
				if (data.num === 1) {
					this.shopDataNow.splice(index, 1)
				} else {
					data.num -= 1
				}
			},
			async addGoods(data) {
				if (data.num < data.amount) {
					data.num += 1
				}
			},
			toOKPage() {
				let that = this
				let data = uni.getStorageSync('shopData')
				if (data && data.length > 0) {
					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>