cyzh-SoundOfMusic-H5/pages/activityList/mine/myGift.vue

<template>
	<view>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" active-color="#5c40e8" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view v-if="current == 0">
			<block v-if="!$u.test.isEmpty(giftList)">
				<block v-for="(item, index) in giftList" :key="index">
					<view class="card" @click="select(item)">
						<view class="flex">
							<view :class="item.selected==true ? 'theme-color cuIcon-roundcheckfill':'cuIcon-round'" class="padding-sm" style="font-size: 50upx;"></view>
							<view class="padding-tb-sm">
								<view class="flex margin-top-xs">
									<image :src="item.goods.goodsPic" style="width: 220upx;height: 220upx;border-radius: 10rpx;"></image>
									<view class="padding-left-sm">
										<view class="name text-cut" style="width: 350upx;">{{item.goods.goodsName}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-end padding" style="margin-top: -110upx;">
							<view class="count" style="border: #d9d9d9 1upx solid;" v-if="!item.selected">x{{item.exCount}}</view>
							<view class="justify-center flex align-center" v-else>
								<view class="" @click.stop="minus(item)"> <u-icon name="minus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
								<input type="number" class="text-center input" v-model="item.exCount" />
								<view class="" @click.stop="plus(item)"> <u-icon name="plus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
							</view>
						</view>
					</view>
				</block>
				<view style="height: 120upx;"></view>
				<view  style="z-index: 9;" class="footer-fixed flex align-center justify-between padding-sm bg-white">
					<view class="flex align-center" @click="selectAll">
						<view :class="selectAllShow ? 'theme-color cuIcon-roundcheckfill':'cuIcon-round'" class="padding-right-xs" style="font-size: 50upx;"></view>
						<view class="text-sm padding-right-xs">全选</view>
					</view>
					<view>
						<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;margin-right: 30upx;" @click="donate">捐赠</button>
						<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;" @click="navTap">领取</button>
					</view>
				</view>
			</block>
			<u-empty v-else margin-top="300" text="暂无礼物" mode="list"></u-empty>
		</view>
		<view v-if="current == 1 || current==2">
			<block v-for="(item, index) in doneList" :key="index">
				<view class="card" >
					<view class="padding">
						<view class="flex margin-top-xs">
							<image :src="item.goodsPic" style="width: 220upx;height: 220upx"></image>
							<view class="padding-left-sm">
								<view class="name text-cut" style="width: 350upx;">{{item.goodsName}}</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end padding" style="margin-top: -120upx;">
						<view class="count">x{{item.count}}</view>
					</view>
					<view v-if="current==1" class="flex justify-end" style="padding:0 20rpx 15rpx;">
						<view class="">
							<u-button size="mini" class="custom-style-sm" shape="circle" @click="gains(item)">确认收货</u-button>
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-popup v-model="dialogShow" mode="center" width="500" height="480" border-radius="30">
			<view class="bg-img text-center" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 80upx;"></view>
				<view style="font-size: 50upx;font-family: PingFang SC;font-weight: 600;color: #ffffff;">感谢你</view>
				<view class="text-bold text-black" style="padding: 80upx 0;">广发基金会已收到您的捐赠！</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="confirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				successList:[],
				
				list: [{
					name: '待领取'
				}, {
					name: '配送中'
				}, {
					name: '已完成'
				}],
				current: 0,
				selectAllShow: false,
				clickShow: false,
				giftList: [],
				doneList:[],
				dialogShow: false,
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync("userId");
			this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				if (!this.userId) {
					this.$u.toast('用户未登录')
					return
				}
				this.getMineGiftList()
			},
			getMineGiftList(){
				this.$u.api.goods.getMineGoods({userId:this.userId}).then(res=>{
					this.giftList=res.records
					this.giftList.forEach(item=>{
						item.selected=false
						item.exCount=item.count
					})
				})
			},
			getDoneGift(distributionStatus){
				this.$u.api.goods.doneList({userId:this.userId,distributionStatus}).then(res=>{
					this.doneList=res.records
				})
			},
			change(index) {
				this.current = index;
				if(index==1){
					this.getDoneGift(0)
				}
				if (index==2) {
					this.getDoneGift(1)
				}
			},
			select(item) {
				item.selected=!item.selected
				let flag = true;
				for (let item of this.giftList) {
					if (!item.selected) {
						flag = false;
					}
				}
				this.selectAllShow = flag;
				this.$forceUpdate()
			},
			selectAll() {
				this.selectAllShow = !this.selectAllShow;
				for (let item of this.giftList) {
					if (this.selectAllShow) {
						item.selected = true;
					} else {
					    item.selected = false;	
					}
				}
			},
			donate() {
				let flag=false
				this.giftList.forEach(item=>{
					if (item.selected) {
						flag=true
					}
				})
				if (!flag) {
					uni.showToast({
						title:"请至少选择一个礼物!",
						icon:"none"
					})
					return
				}
				let newList=this.getSelectGoods()
				this.$dialog.showModal("确认捐赠？").then(()=>{
					this.$u.api.goods.donate(newList).then(res=>{
						// this.successList=res.records
						this.dialogShow=true
					})
				})
			},
			getSelectGoods(){
				let newList=[]
				this.giftList.forEach(item=>{
					if (item.selected) {
						let obj={
							id:item.id,
							userId:item.userId,
							goodsId:item.goodsId,
							activityIds:item.activityIds,
							count:item.exCount
						}
						newList.push(obj)
					}
				})
				return newList
			},
			confirm(){
				this.dialogShow = false;
				this.getMineGiftList()
			},
			gains(item){
				this.$dialog.showModal("确认收货？").then(()=>{
					let data= this.$u.deepClone(item)
					data.distributionStatus=1
					this.$u.api.goods.done(data).then(res=>{
						this.getDoneGift(0)
					})
				})
			},
			navTap() {
				let newList=[]
				this.giftList.forEach(item=>{
					if (item.selected) {
						let obj={
							id:item.id,
							userId:item.userId,
							goodsId:item.goodsId,
							activityIds:item.activityIds,
							count:item.exCount,
							goodsPic:item.goods.goodsPic,
							goodsName:item.goods.goodsName,
						}
						newList.push(obj)
					}
				})
				if (this.$u.test.isEmpty(newList)) {
					this.$u.toast("请至少选择一个礼物")
					return
				}
				let params=JSON.stringify(newList)
				uni.navigateTo({
					url: '/pages/activityList/mine/order/orderConfirm?goods='+params
				})
			},
			//礼物＋
			plus(item) {
				if (item.exCount<item.count) {
					item.exCount++
				}
				this.$forceUpdate()
			}, 
			//礼物 -
			minus(item) {
				if (item.exCount>1) {
					item.exCount--
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		margin: 20upx;
		border-radius: 16upx;
		background-color: #FFFFFF;
		.title {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.name {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.specification {
			padding-top: 30upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #959595;
		}
		.count {
			width: 60upx;
			height: 60upx;
			border-radius: 16upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.input {
		width: 80upx;
		background-color: #ffffff;
		text-align: center;
		border: none;
		height: 60rpx;
		min-height: 1.8rem;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 250upx;
		color: #ffffff;
	}
	.custom-style-sm {
		background-color: #5b3ee7;
		color: #ffffff;
	}
</style>