hs_hzl_uniapp_ml/pages/integral/index.vue

<template>
	<view>
		<u-sticky>
			<view>
				<scroll-view class="scroll-view_H_MY" :scroll-x="true" @scroll="scroll">
					<view :class="index=== oneTypeActive ? 'scroll-view-item_H_MY-active':''"
						@click="oneTypeClick(item,index)" v-for="(item,index) in giftTypeList"
						class="scroll-view-item_H_MY">
						{{item.giftTypeName}}
					</view>
				</scroll-view>
			</view>
		</u-sticky>
		<view style="display: flex;flex-flow: row wrap;">
			<view style="width: 20%; text-align: center;background-color: #f0f0f0;">
				<scroll-view scroll-y scroll-with-animation :scrollTop="scrollLeftTop"
					:style="[{height: containerHeight + 'px'}]">
					<view :class="index === twoTypeActive ? 'giftTypeItem-active':''" @click="twoTypeClick(item,index)"
						v-for="(item,index) in giftTypeList[oneTypeActive].children" class="giftTypeItem">
						{{item.giftTypeName}}
					</view>
				</scroll-view>
			</view>
			<view style="width: 80%;background-color: #ffffff;text-align:center;">
				<scroll-view scroll-y scroll-with-animation :scrollTop="scrollLeftTop" :lower-threshold="110"
					@scrolltolower="refreshGift" :style="[{height: containerHeight + 'px'}]">
					<view class="foodBody">
						<view style="width: 49%;">
							<view v-if="index %2 === 0" class="goodsItem" v-for="(item, index) in list" :key="index">
								<image @click="toMorePage(item)" class="cuisineImg" width="100%" height="100%"
									:src=" baseURL+item.giftPictrue" mode="widthFix" radius="5"></image>
								<view @click="toMorePage(item)" class="goodsName">{{item.giftName}}</view>
								<view class="goodsPrice" @click="toMorePage(item)">
									<u-row>
										<u-col span="6">
											<u-icon name="integral" :label="item.giftPrice"
												labelColor="rgb(10, 185, 156)" color="rgb(10, 185, 156)"
												labelSize="12.5"></u-icon>
										</u-col>
										<u-col span="6" textAlign="right">
											<view
												:style="{'font-size': '12px','color': item.amount === 0 ? '#ffac29':'rgb(0, 0, 0)'}">
												{{'库存：'+item.amount}}
											</view>
										</u-col>
									</u-row>
								</view>
								<view class="gwxx">
								</view>
								<view class="gwxx">
									<view style="display: flex;flex-wrap: wrap-reverse;padding: 0 20rpx;">
										<view style="border: 1rpx solid rgb(10, 185, 156);
													color: rgb(10, 185, 156);font-size: 22rpx; padding: 5rpx 15rpx;
													 border-radius: 10rpx;" @click="addGoods(item)">
											加入购物车
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="width: 49%;">
							<view v-if="index %2 !== 0" class="goodsItem" v-for="(item, index) in list" :key="index">
								<image @click="toMorePage(item)" class="cuisineImg" width="100%" height="100%"
									:src=" baseURL+item.giftPictrue" mode="widthFix" radius="5"></image>
								<view @click="toMorePage(item)" class="goodsName">{{item.giftName}}</view>
								<view class="goodsPrice" @click="toMorePage(item)">
									<u-row>
										<u-col span="6">
											<u-icon name="integral" :label="item.giftPrice"
												labelColor="rgb(10, 185, 156)" color="rgb(10, 185, 156)"
												labelSize="12.5"></u-icon>
										</u-col>
										<u-col span="6" textAlign="right">
											<view
												:style="{'font-size': '12px','color': item.amount === 0 ? '#ffac29':'rgb(0, 0, 0)'}">
												{{'库存：'+item.amount}}
											</view>
										</u-col>
									</u-row>
								</view>
								<view class="gwxx">
									<view style="display: flex;flex-wrap: wrap-reverse;padding: 0 20rpx;">
										<view style="border: 1rpx solid rgb(10, 185, 156);
													color: rgb(10, 185, 156);font-size: 22rpx; padding: 5rpx 15rpx;
													 border-radius: 10rpx;" @click="addGoods(item)">
											加入购物车
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</scroll-view>
			</view>
		</view>
		<view v-if="noticeStatus">
			<u-notice-bar :text="noticeText"></u-notice-bar>
		</view>
		<view class="content">
			<!-- @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd" -->
			<view :style="{'transform':'translate3d('+0+'px,'+-80+'px,0)'}" class="touch">
				<view @click="confirm1">
					<view :style="gwcNum === 0 ? 'background-color:#c5c5c5;':'background-color:#e93c45;'" style="position: absolute;top:-30rpx; right: 0;
					color: #ffffff;font-size: 30rpx;border-radius: 50%;width: 55rpx;height: 55rpx;">
						{{gwcNum}}
					</view>
					<u-icon name="shopping-cart" size="50" class="gwc" color="#ffffff">
					</u-icon>
				</view>
			</view>
		</view>
		<!-- <wp-tabbar pagePath="/pages/integral/index" :type="type"></wp-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				containerHeight: 0,
				stickyOffsetTop: 20,
				scrollLeftTop: 0,
				height: 0,
				option: {
					page: 1,
					size: 10,
					auto: true
				},
				noticeText: '',
				page: 1,
				oneTypeActive: 0,
				twoTypeActive: 0,
				list: [],
				giftTypeList: [],
				total: 0,
				from: {
					consumerType: uni.getStorageSync("userInfo").userType,
					jgid: uni.getStorageSync("orgInfo").organizationCode,
					organizationCode: uni.getStorageSync("orgInfo").organizationCode,
				},
				scrollTop: 0,
				gwcNum: 0,
				xMove: 0,
				yMove: -80,
				baseURL: this.$BASE_URL,
				loading: false,
				oName: uni.getStorageSync("orgInfo").organizationName,
				gwcNum: 0,
				maxNum: 0,
				timeStop: 0,
				goodsList: [],
				menuData: {},
				status: 'loadmore',
				//兑换物品下拉列表锁 避免多次下拉导致出错
				loadingLock: 0,
				noticeStatus: false
			}
		},
		mounted() {
			// this.load(this.option)
			this.getNoticeStatus()
			this.getSCN()
			this.giftType()
			this.getNotice()
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					const height = this.height
					const windowHeight = res.windowHeight // 可使用窗口高度
					if (height) {
						// 限制containerHeight的值，避免传入的height值过大而出现滚动条
						const remainHeight = windowHeight - this.stickyOffsetTop // 因设置了offsetTop后剩余的height值
						if (height > remainHeight) {
							this.containerHeight = remainHeight
						} else {
							this.containerHeight = height
						}
					} else {
						this.containerHeight = windowHeight
					}
				}
			})
		},
		onShow() {
			uni.reLaunch({
				url: '/pages/tabbar/wpTabbar'
			})
		},
		onPullDownRefresh() {},
		onReachBottom() {},
		methods: {
			imgLoad(img, callback) {
				var timer = setInterval(function() {
					if (img.complete) {
						callback(img)
						clearInterval(timer)
					}
				}, 50)
			},
			refreshGift() {
				if (this.total === this.list.length) {
					this.status = 'nomore'
					return
				}
				if (this.loadingLock === 0) {
					++this.option.page
					this.taskList(this.option)
				}
			},
			oneTypeClick(type, index) {
				this.list = []
				this.oneTypeActive = index
				this.twoTypeActive = index
				this.option.page = 1
				this.option.size = 10
				this.option.giftType = 2
				this.option.giftTypeCode = type.children[0].id
				this.taskList(this.option)
			},
			twoTypeClick(type, index) {
				this.list = []
				this.twoTypeActive = index
				this.option.page = 1
				this.option.size = 10
				this.option.giftType = 2
				this.option.giftTypeCode = type.id
				this.taskList(this.option)
			},
			myIsNaN(value) {
				return typeof value === 'number' && !isNaN(value)
			},
			changeNum(value) {
				this.setGwcNum()
			},
			toMorePage(item) {
				uni.setStorageSync("giftContent", item.giftContent)
				uni.navigateTo({
					url: "../../pages/integral/more"
				})
			},
			async giftType() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/giftType',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.giftTypeList = res.data;
					this.option.page = 1
					this.option.size = 10
					this.option.giftType = 2
					this.option.giftTypeCode = res.data[0].children[0].id
					this.taskList(this.option)
				}
			},
			async getNoticeStatus() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getNoticeStatus',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.noticeStatus = res.msg !== "false"
					if (this.noticeStatus) {
						this.containerHeight -= (uni.getStorageSync('mydomHeight') + 80)
					} else {
						this.containerHeight -= (uni.getStorageSync('mydomHeight') + 50)
					}
				}
			},
			async addGoods(data) {
				let form = {
					amount: data.amount,
					giftId: data.giftId,
					giftName: data.giftName,
					giftNumber: data.giftNumber,
					giftPictrue: data.giftPictrue,
					giftPrice: data.giftPrice,
					num: data.num,
					plusOrMinus: 0
				}
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/addShopCar',
					method: 'post',
					data: form,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					uni.showToast({
						duration: 1500,
						title: '添加成功'
					})
					this.getSCN()
				} else {
					this.$showModal(res.msg)
				}
			},
			async getNotice() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getNotice',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.noticeText = res.msg
				}
			},
			async getSCN() {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getSCN',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.gwcNum = res.data
				}
			},
			async taskList(paging) {
				this.getSCN()
				this.loadingLock = 1
				this.status = 'loading'
				this.from.giftType = paging.giftType
				this.from.giftTypeCode = paging.giftTypeCode
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getGift?pageNum=' + paging.page + '&pageSize=' + paging.size,
					method: 'post',
					data: this.from,
					isNotErrorMsg: true,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (paging.page === 1) {
						this.total = res.total
						this.list = res.rows
						this.list.forEach(item => {
							item.num = 0
						})
					} else if (paging.page > 1) {
						for (var i = 0; i < res.rows.length; i++) {
							res.rows[i].num = 0
							this.list.push(res.rows[i])
						}
					}
					this.loadingLock = 0
					this.status = 'loadmore'
				}
			},
			setGwcNum() {
				console.log("setGwcNum")
				let count = 0
				const goodsListInfo = this.list;
				for (var i = 0; i < goodsListInfo.length; i++) {
					if (goodsListInfo[i].num) {
						let num = parseInt(goodsListInfo[i].num)
						let amount = parseInt(goodsListInfo[i].amount)
						if (amount < num) {
							goodsListInfo[i].num = amount
							num = amount
						}
						count += num
					}
				}
				this.gwcNum = count
			},
			toShopListPage() {
				if (0 === this.gwcNum) {
					this.showToast({
						duration: 1500,
						message: "请选择商品"
					});
					return;
				}
				this.show1 = true;
			},
			addToCart(type, gift) {
				if (type === 0 && gift.num === 0) {
					return
				}
				if (gift.amount === 0) {
					this.showToast({
						duration: 500,
						message: "库存不足"
					});
					return
				}
				if (type === 1) {
					if (gift.num) {
						if (gift.amount <= gift.num) {
							this.showToast({
								duration: 500,
								message: "库存已达最大数量"
							});
							return
						}
						gift.num += 1
					} else {
						gift.num = 1
					}
				} else {
					gift.num -= 1
				}
				let that = this
				setTimeout(() => {
					that.setGwcNum()
				}, 100)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			confirm1(e) {
				console.log(1)
				wx.pageScrollTo({
					scrollTop: 0,
					success() {

					}
				})
				this.$goto('../../pages/integral/shopcar')
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {}
				})
			},
			handleStart(ev) {
				// console.log('start',ev);
				// 记录一开始手指按下的坐标
				var touch = ev.changedTouches[0];
				startPoint.x = touch.pageX;
				startPoint.y = touch.pageY;
			},
			handleMove(ev) {
				// console.log('move',ev);
				// 防止页面高度很大，出现滚动条，不能移动-默认拖动滚动条事件
				ev.preventDefault();

				isTouchMove = true;

				var touch = ev.changedTouches[0];
				var diffPonit = {}; // 存放差值
				var movePonit = {
					// 记录移动的距离
					x: 0,
					y: 0
				};
				diffPonit.x = touch.pageX - startPoint.x;
				diffPonit.y = touch.pageY - startPoint.y;
				// 移动的距离 = 差值 + 当前坐标点
				movePonit.x = diffPonit.x + curPoint.x;
				movePonit.y = diffPonit.y + curPoint.y;
				this.move(movePonit.x, movePonit.y);
			},
			handleEnd(ev) {
				// console.log('end', ev);
				if (!isTouchMove) return;
				//  更新坐标原点
				var touch = ev.changedTouches[0];
				curPoint.x += touch.pageX - startPoint.x;
				curPoint.y += touch.pageY - startPoint.y;
				// 重置
				isTouchMove = false;
			},
			move(x, y) {
				x = x || 0; // 没有传就是0
				y = y || 0;
				this.xMove = x;
				this.yMove = y;
				// translate3d	(tx,ty,tz)	在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px
			},
			// 刷新刷剧
			refresh() {
				this.option.page = 1
				this.option.size = 10
				this.option.giftType = 1
				this.taskList(this.option)
			},
			scrolltolower(e) {},
			load(paging) {
				this.taskList(paging)
			},
			loadSuccess(list) {
				this.list = list
			}
		}
	}
</script>
<style lang="scss" scoped>
	.foodBody {
		padding-top: 10rpx;
		padding-left: 10rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		border-radius: 30rpx;
	}

	.gwxx {
		padding-top: 10rpx;
	}

	.scroll-view_H_MY {
		white-space: nowrap;
		width: 100%;
		letter-spacing: 10rpx;
		// padding: 20rpx;
		background-color: rgb(255, 255, 255);
		// background: linear-gradient(to bottom right, rgb(47, 203, 198), rgb(127, 241, 209));
	}

	.scroll-view-item_H_MY {
		color: #8c8c8c;
		height: 35px;
		width: 33.4%;
		font-size: 30rpx;
		display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
		flex-direction: column;
		align-items: center;
		border-right: 1rpx #f3f3f3 solid;
	}

	.scroll-view-item_H_MY-active {
		// background-color: rgb(153, 241, 224);
		border-bottom: 5rpx rgb(96, 182, 158) solid;
	}

	.giftTypeItem {
		color: #8c8c8c;
		padding: 20rpx 10rpx;
		font-size: 25rpx;
		letter-spacing: 5rpx;
		background-color: #f0f0f0;
		border-bottom: 1rpx #f3f3f3 solid;
	}

	.giftTypeItem-active {
		background-color: #ffffff;
	}

	.isNumNull {
		color: #FF0000;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.addGwc:active {
		color: #ffffff;
	}

	.touch {
		position: fixed;
		right: 40rpx;
		bottom: 60rpx;
		width: 95rpx;
		height: 95rpx;
		/* 知识点
		line-height是行高，针对的对象是文字，height针对的是容器，
		也就是高度，当height和line-height值相同时会居中，
		当line-height值小于height时文字向上移动，反之向下移动。
		 */
		line-height: 95rpx;
		/* 文字垂直居中 */
		text-align: center;
		/* 水平居中 */
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		color: #fff;
		font-size: 60rpx;
		/* 去除标签点击事件高亮效果 */
		-webkit-tap-highlight-color: transparent;
		/* 使用transform: translate3d 处理性能高 GUP */
	}


	#button_div {
		position: fixed;
		bottom: var(--window-bottom);
	}

	.mybackColor {
		background-color: #8c8c8c;
	}



	.shopHand {
		font-weight: bold;
		font-size: 20px;
		height: 20%;
		padding: 10% 0 10px 10px;
		margin-bottom: 5px;
		//background: linear-gradient(to bottom right, #85c1bf, #f1fef9);
		//background: rgb(55,186,189);
		background: #9ED6CF;
	}

	.cuisineImg {
		border-radius: 10px;
		max-height: 600rpx;
		height: auto;
		width: auto;
		padding: 0rpx 5rpx 2rpx;
	}

	.doFoodConfigView {
		width: 93%;
		margin: 0 auto;
		margin-top: 5px;
		padding: 2% 5px;
		background-color: #ffffff;
		border-radius: 10px;
		border: 1px solid #d3d3d3;
	}


	.gwcNum {
		width: 15px;
		top: 17px;
		left: 21px;
		position: relative;
	}

	/* 商品列表 */
	.goodsContent {
		width: 100%;
		margin: 0 auto;
		flex-direction: column;
		background: #f3f3f3;
		display: flex;
		justify-content: center;
	}

	.goodsItem {
		width: 280rpx;
		background: #FFFFFF;
		// border-radius: 10px;
		padding: 10rpx 0;
		// margin: 5rpx;
		// border: 1px solid #ebebeb;
	}

	.goodsName {
		font-size: 24rpx;
		color: #2e2e2e;
		padding: 10rpx 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsPrice {
		color: #ffac29;
		font-size: 24rpx;
		padding: 0 15rpx;
	}


	.addFood {
		margin-left: 20rpx;
		color: #8c8c8c;
	}

	.minus {
		width: 26px;
		height: 26px;
		background-color: #efefef;
		border-width: 1px;
		border-color: #c6c6c6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0;
	}

	.plus {
		width: 20px;
		height: 20px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>