hs_hzl_uniapp_ml/pageA/integral/list.vue

<template>
	<view>
		<view class="view">
			<view class="hand">
				<uni-row>
					<uni-col :span="6">
						<u--text text="所属机构" size="16" bold color="#619f8a"></u--text>
					</uni-col>
					<uni-col :span="18">
						<u--text :text="data.organizationName" size="16" color="#757575">
						</u--text>
					</uni-col>
				</uni-row>
				<view style="color: #696969;margin-top: 20rpx;">
					<uni-row>
						<uni-col :span="7">
							<u--text text="领取地点" size="16" bold color="#619f8a"></u--text>
						</uni-col>
						<uni-col :span="12">
							<view>
								<view style="padding: 0 20rpx;">
									<picker @change="bindPickerChange" :value="index" :range="placeData"
										range-key="placeName">
										<view style="font-size: 40rpx;color: #848484;"
											v-if="placeData[index].placeName">
											<u--text :iconStyle="{color: '#757575',fontSize:'40rpx'}"
												suffixIcon="arrow-down" :text="placeData[index].placeName"
												color="#757575" size="16"></u--text>
										</view>
									</picker>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="uni-list" style="margin-top: 30rpx;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-input" style="color: #535353;font-size: 25rpx;">
								下单备注：
							</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<u--textarea v-model="remark"></u--textarea>
						</view>
					</view>
				</view>
			</view>
			<u-list @scrolltolower="scrolltolower">
				<view v-if="!shopDataNow">
					<image style="margin: 0 auto; width: 100%;" src="../../static/img/page/empty_view.png"></image>
				</view>
				<u-list-item v-for="(item, index) in shopDataNow" :key="index">
					<view v-if="item.num !== 0 && item.num" class="listItemStyle">
						<u-row>
							<u-col span="3">
								<u--image :showLoading="true" shape="circle" :src="baseURL+item.giftPictrue"
									width="70px" height="70px" style="margin: 10px;"></u--image>
							</u-col>
							<u-col span="9" class="">
								<view>
									{{item.giftName}}
								</view>
								<view v-if="item.eventTime"
									style="text-align: left;color: #ffaf25;font-size: 22rpx;margin-top: 10rpx;">
									{{item.eventTime+" 可领取"}}
								</view>
								<u-row>
									<u-col span="10">
										<view style="margin-top: 3px;">
											<u-icon name="integral" :label="item.giftPrice"></u-icon>
										</view>
									</u-col>
									<u-col span="2">
										<view style="margin-top: 3px;">
											x {{parseInt(item.num)}}
										</view>
									</u-col>
								</u-row>
							</u-col>
							<!-- <u-col span="1" class="numberStyler">
								<view style="padding: 15rpx;">
									<u-button icon="minus" size="mini" color="#e93c45" @click="addToCart(0,item)">
									</u-button>
								</view>
								<view style="padding: 15rpx;">
									<u-button icon="plus" size="mini" color="rgb(10, 185, 156)"
										@click="addToCart(1,item)">
									</u-button>
								</view>
							</u-col> -->
							<!-- <u-col span="1">
								<u-button @click="addToCart(0,item)" icon="trash" size="30" color="#d23226">
								</u-button>
							</u-col> -->
						</u-row>
					</view>
				</u-list-item>
			</u-list>
			<view style="margin-bottom: 220rpx;"></view>
		</view>
		<view class="bottim_view">
			<view>
				<u-row>
					<u-col span="7">
						<view class="sum_price_view">
							<span>合计</span>
							<u-row>
								<u-col span="3">
									<u-icon name="integral" color="#aa0000" size="30"></u-icon>
								</u-col>
								<u-col span="9">
									<view style="margin-left: 20rpx;color:#aa0000;font-size: 40rpx;">
										{{priceSum}}
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="sum_price_view">
							<span>可用余额</span>
							<u-row>
								<u-col span="2">
									<u-icon name="integral" color="#000000" size="20"></u-icon>
								</u-col>
								<u-col span="10">
									<view style="margin-left: 5rpx;color:#000000;font-size: 35rpx;">
										{{dqye}}
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="5">
						<u-button class="btnDoPay" shape="circle" @click="toOKPage" :disabled="isDisabled"
							color="linear-gradient(to bottom right, #79a7a4, #88d8a1)" text="确认支付"></u-button>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ghAddrSrc: '',
				index: 0,
				baseURL: this.$BASE_URL,
				priceSum: 0.0,
				dateShow: false,
				data: {
					organizationName: "",
				},
				dqye: uni.getStorageSync('userInfo').integral,
				jcd: [],
				from: {
					userNumber: '',
					phone: '',
					jgid: '',
					paytime: '',
					orderTotal: 0,
					hsGifts: [],
					remark: '',
					placeNumber: ''
				},
				isDisabled: false,
				placeData: [],
				shopData: [],
				shopDataNow: [],
				addressData: uni.getStorageSync("addressData"),
				remark: ''
			}
		},
		onBackPress() {
			uni.removeStorageSync('shopData')
			this.priceSum = 0.0
		},
		onShow() {
			this.shopDataNow = []
			this.data.organizationName = uni.getStorageSync("orgInfo").organizationName
			//清空价格总数
			this.priceSum = 0;
			//获取瀑布流中所有菜品数据
			const data = uni.getStorageSync('shopData')
			for (var i = 0; i < data.length; i++) {
				if (data[i].num) {
					//计算单个菜品的总价格
					const total = data[i].num * data[i].giftPrice
					data[i].total = total
					//传入 购物数据当前集合 
					this.shopDataNow.push(data[i])
					//计算页面显示的总价格
					this.priceSum = parseFloat(this.priceSum) + (data[i].num * parseFloat(data[i].giftPrice)) + ''
				}
			}
			//获取菜品查询数据
			const cuisinesData = uni.getStorageSync("cuisinesData")
			//获取用户信息
			const user = uni.getStorageSync('userInfo');
		},
		onLoad() {
			this.getGiftReceivePlace()
			// this.getAddress()
		},
		onshow() {
			this.getAddress()
		},
		methods: {
			toAddressListPage() {
				uni.redirectTo({
					url: '../../pageA/card/addressList',
					success() {
						uni.setStorageSync("clickType", 1)
					}
				})
			},
			async getGiftReceivePlace() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getGiftReceivePlace',
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.placeData = res.data
				} else {
					uni.showModal({
						title: "系统提醒",
						showCancel: false,
						content: res.msg,
					});
				}
			},
			async getAddress() {
				if (uni.getStorageSync("addressData")) {
					this.addressData = uni.getStorageSync("addressData")
					return
				}
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/uadsList?userCode=' + uni.getStorageSync('userInfo').userName,
					method: 'get',
					urlType: 2
				});
				if (res.code === 200) {
					this.addressData = res.rows[0]
				} else {
					uni.showToast({
						duration: 2500,
						title: res.msg,
						icon: 'error',
					});
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			addToCartOLD(type, food) {
				food.num -= 1
				this.priceSum = parseFloat(this.priceSum) - parseFloat(food.giftPrice)
				let coyp = []
				this.shopDataNow.forEach(item => {
					if (item.num != 0) {
						coyp.push(item)
					}
				})
				this.shopDataNow = coyp
			},
			addToCart(type, gift) {
				if (type === 0 && gift.num === 0) {
					return
				}
				if (gift.amount === 0) {
					uni.showToast({
						duration: 500,
						title: "库存不足",
						icon: 'error'
					});
					return
				}
				if (type === 1) {
					if (gift.num) {
						if (gift.amount <= gift.num) {
							uni.showToast({
								duration: 500,
								title: "库存已达最大数量",
								icon: 'error'
							});
							return
						}
						gift.num += 1
					} else {
						gift.num = 1
					}
					this.priceSum = parseFloat(this.priceSum) + gift.giftPrice + ''
				} else {
					gift.num -= 1
					this.priceSum = parseFloat(this.priceSum) - gift.giftPrice + ''
				}
				// let that = this
				// setTimeout(() => {
				// 	that.setGwcNum()
				// }, 100)
			},
			toOKPage() {
				this.isDisabled = true
				let that = this
				that.submitOrder()
			},
			async submitOrder() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const data = this.shopDataNow
				for (var i = 0; i < data.length; i++) {
					if (data[i].num) {
						data[i].amount = data[i].num
					}
				}
				let userInfo = uni.getStorageSync('userInfo')
				this.from = {
					userNumber: userInfo.userName,
					userName: userInfo.nickName,
					phone: userInfo.phonenumber,
					jgid: uni.getStorageSync("orgInfo").organizationCode,
					paytime: '',
					orderType: uni.getStorageSync('orderType'),
					orderTotal: this.priceSum,
					hsGifts: this.shopDataNow,
					remark: this.remark,
					placeNumber: this.placeData[this.index].placeName
				}
				if (this.priceSum === 0) {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: "没有需要兑换的物品"
					});
					return
				}
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/giftOrder',
					method: 'post',
					data: this.from,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.priceSum = 0.0;
					setTimeout(() => {
						uni.hideLoading()
						this.isDisabled = false
						uni.navigateTo({
							url: 'ok'
						})
					}, 1000)
				} else {
					uni.hideLoading()
					this.isDisabled = false
					this.$showModal(res.msg)
				}
			},
			submitDate() {},
			scrolltolower() {
				//this.getRechargeHistoryList()
			},
			loadmore(data) {
				for (var i = 0; i < data.length; i++) {
					this.indexList.push(data[i])
				}
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		background-color: #ebebeb;
		padding-top: 10px;
	}

	.hand {
		padding: 5%;
		margin: 0 5px 5px 5px;
		border-radius: 15px;
		background: linear-gradient(to bottom right, #97dad8, #f1fef9);
	}

	.orgTop {
		margin-bottom: 5px;
	}

	.sxButton {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.listTermDate {
		padding: 10px 0;
	}

	.listItemStyle {
		margin: 5px 12px;
		padding: 5px;
		border-radius: 15px;
		background-color: #fafafa;
	}

	.minus {
		width: 22px;
		height: 22px;
		background-color: #efefef;
		border-width: 1px;
		border-color: #c6c6c6;
		border-radius: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0;
	}

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

	.numberStyler {
		position: relative;
		left: -10px;
	}

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

	.sum_price_num_style {
		font-size: 30px;
		color: #d83024;
	}

	.sum_price_view {
		margin-left: 10px;
		// display: flex;
		justify-content: unset;
		align-items: baseline;
	}

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