web-africa-h5/pages/pickup-area/index.vue

<template>
	<view>
		<u-navbar placeholder :title="$t('N_I_248')" :bgColor="'#ffffff'" leftIcon="arrow-left" @leftClick="goBack">
			<button class="nav-right-btn" slot="right"
				@click="gotoPage('/pages/pickup-area/list')">{{$t("MY_TH_1")}}</button>
		</u-navbar>
		<view class="pickup-list">
			<view class="pickup-item" v-for="(item, index) in listData" :key="index">
				<image class="pickup-pic" :src="item.pickCover" mode=""></image>
				<view class="f24 gray9">{{$t("MN_F_T_256")}}：{{ item.usableQuantity }}</view>
				<view class="f24 gray9" v-if="item.receiveTime">
					{{$t("w_0205")}}+{{$t("MY_TH_3")}}：{{ item.receiveTime }}
				</view>
				<button class="pickup-btn" @click="openInput(item)" v-if="item.pickFlag == 0">{{$t("MY_TH_4")}}</button>
			</view>
		</view>
		<view v-if="showPop">
			<view class="pop-bg" @click="closeFunc(null)"></view>
			<view class="pop-input d-c d-c-c">
				<view class="ww100 flex-1 pop-top">
					<text class="icon iconfont icon-guanbi" @click="closeFunc(null)"></text>
					<view class="pop-title">{{$t("CK_KS_17")}}</view>
					<view class="d-c-c">
						<view @click.stop="Reducenumber()"><u-icon name="minus-circle-fill" color="#ff9999"
								size="40rpx"></u-icon></view>
						<view class="flex-1 input-box d-c-c"><input class="input-pop" type="number" disabled
								v-model="values" /></view>
						<view @click.stop="Addnumber()"><u-icon name="plus-circle-fill" color="#FF0000"
								size="40rpx"></u-icon></view>
					</view>
				</view>
				<view class="border-t ww100 d-b-c" style="height: 89rpx;">
					<view class="border-r-e d-c-c flex-1 f28 gray3 hh100" @click="closeFunc(null)">{{$t("ENU_P_TYPE0")}}
					</view>
					<view class=" d-c-c flex-1 f28 domation hh100" @click="closeFunc(true)">{{$t("ENU_P_TYPE4")}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				listData: [],
				values: '',
				baseQuantity: 0,
				module: {
					pkId: 0,
					usableQuantity: 0,
					baseQuantity: 0
				},
				isWhole: 0
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			openInput(e) {
				this.module = e;
				this.isWhole = e.isWhole;
				this.baseQuantity = e.baseQuantity;
				if (this.isWhole == 0) {
					this.values = e.usableQuantity;
				} else {
					this.values = e.baseQuantity;
				}
				this.showPop = true;
			},
			Addnumber() {
				if(this.isWhole == 0){
					return
				}
				if (this.values >= this.module.usableQuantity) {
					return
				}
				this.values += this.baseQuantity;
			},
			Reducenumber() {
				if(this.isWhole == 0){
					return
				}
				if (this.values > this.baseQuantity) {
					this.values -= this.baseQuantity;
				}
			},
			goBack() {
				uni.navigateBack();
			},
			getData() {
				let self = this;
				self._get('activity/api/pick/list', {}, res => {
					self.listData = res.data;
				});
			},
			closeFunc(e) {
				if (e) {
					this.gotoPage('/pages/pickup-area/order?pkId=' + this.module.pkId + '&quantity=' + this.values)
				}
				this.showPop = false;
			}
		}
	};
</script>

<style lang="scss">
	.nav-right-btn {
		background: none;
		color: #999;
		font-size: 26rpx;
	}

	.pickup-list {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 24rpx 25rpx 0 21rpx;
	}

	.pickup-item {
		flex-shrink: 0;
		width: 342rpx;
		// height: 363rpx;
		background: #ffffff;
		box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 22rpx 22rpx 30rpx 18rpx;
		box-sizing: border-box;
		margin-bottom: 23rpx;
	}

	.pickup-pic {
		width: 302rpx;
		height: 187rpx;
		border-radius: 25rpx;
		margin-bottom: 20rpx;
	}

	.pickup-btn {
		width: 182rpx;
		height: 52rpx;
		line-height: 52rpx;
		align-items: 52rpx;
		background: #fb3024;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		margin: 0 auto;
		margin-top: 26rpx;
	}

	.pop-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 98;
		background-color: rgba(0, 0, 0, 0.65);
	}

	.icon.icon-guanbi {
		font-size: 32rpx;
		color: #999;
		position: absolute;
		right: 25rpx;
		top: 22rpx;
		z-index: 101;
	}

	.pop-input {
		width: 665rpx;
		height: 290rpx;
		background: #ffffff;
		border-radius: 25rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 100;
	}

	.pop-top {
		padding: 40rpx 60rpx 0 60rpx;
		box-sizing: border-box;
	}

	.pop-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 22rpx;
	}

	.input-box {
		// width: 80%;
		height: 64rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx;
	}

	.input-pop {
		box-sizing: border-box;
		border-radius: 32rpx;
		line-height: 1.5;
		font-size: 28rpx;
		color: #333;
		padding: 0 25rpx;
		border: none;
		flex: 1;
		outline-offset: 0;
	}
</style>