shop-applet/components/realselist/realselist.vue

<template>
	<view class="containers" :style="viewColor">
		<view class="header">

			<view class="search">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" placeholder="请输入商品名称" v-model="searchVal" @input="setValue" confirm-type="search"
					@confirm="searchBut()" placeholder-class='placeholder'>
			</view>

			<view class="iconclose" @click="close">
				<image src="@/static/images/wt_close.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" @touchmove.stop>
				<block>
					<view v-if="bought.length" @touchmove="onTouchmove" id="goods" class="goods">
						<view class="picTxt acea-row" v-for="(item, i) in bought" :key="i">
							<view class="checkbox">
								<text @click.stop="goodsCheck(item)" v-if="item.check"
									class="iconfont icon-xuanzhong1"></text>
								<text @click.stop="goodsCheck(item)" v-else
									:class="checkedArr.length >=5 ? 'disabled': ''"
									class="iconfont icon-weixuanzhong"></text>
							</view>
							<view class='pictrue'>
								<image :src='item.image'></image>
							</view>

							<view class='text'>
								<view class='line2 name'>{{item.store_name}}</view>


								<view class="picTxt_one" v-if="item.attrValue.length>0">
									<picker class="slecte" v-if="item.attrValue.length>1"
										@change="bindPickerChange($event,item.attrValue,i)" :value="index"
										:range="item.attrValue" :range-key="'sku'">
										<view class="uni-input">{{item.attrValue[index].sku}}</view>
									</picker>

									<view class="" style="margin-top: 10rpx;">
										库存:{{item.attrValue[index].stock}}
									</view>
								</view>





							</view>


							<view class="picTxt_price">
								<view class="price">
									<span>委托价格</span>
									<input type="text" :value="item.price" placeholder="输入出售价格"
										@input="producrprice($event,i,item)" adjust-position=""
										placeholder-style="color: #CCCCCC;" />
								</view>
								<view class="price_num">
									<span>委托数量</span>
									<subtractive v-if='item.number==0' style="margin-top: 10rpx;margin-left: 20rpx;"
										class="step" :min="0" :max="item.attrValue[index].stock" :value="peicenumber"
										:isMax="true" :isMin="true" index="11" @eventChange="numberChange($event,i)">
									</subtractive>

									<subtractive v-else style="margin-top: 10rpx;margin-left: 20rpx;" class="step"
										:min="0" :max="item.attrValue[index].stock" :value="item.number" :isMax="true"
										:isMin="true" index="11" @increment="incrementTotal($event,i,item)"
										@eventChange="numberChange($event,i)"></subtractive>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="empty">
						<image src="/static/images/no_thing.png"></image>
						<text>暂无内容哦~</text>
					</view>
				</block>
			</scroll-view>
			<view class="foot_bar">
				<button class="confirm_btn" @click="submit">确定({{checkedArr.length}})</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Loading from '@/components/Loading/index.vue';
	import subtractive from '@/components/subtractive/subtractive.vue';

	import {
		getCommunitygetOrderList
	} from "@/api/trading-floor";
	import {
		mapGetters
	} from "vuex";
	export default {
		props: {
			checkedObj: {
				type: Array,
				default: []
			}
		},
		computed: mapGetters(['viewColor']),
		components: {
			Loading,
			subtractive
		},
		data() {
			return {
				isActive: 0,
				loadedb: false,
				loadingb: false,
				loadedc: false,
				loadingc: false,
				loadeds: false,
				loadings: false,
				whereb: {
					page: 1,
					limit: 10,
					keyword: '',
				},
				peicenumber: 0,

				searchVal: "",
				checked: [],
				list: [],

				bought: [],

				checkedArr: [],
				aryys: [],
				// picker下拉数据源
				storageCustomList: [{
					CustGoodsCode: "TEST001",
					CustGoodsName: "测试货主001",
					IfBoxId: 0,
					IfProductId: 0,
				}, {
					CustGoodsCode: "TEST002",
					CustGoodsName: "测试货主002",
					IfBoxId: 0,
					IfProductId: 0,
				}, {
					CustGoodsCode: "TEST003",
					CustGoodsName: "测试货主003",
					IfBoxId: 0,
					IfProductId: 0,
				}],
				index: 0,
				pickerData: '请选择',
				itstock: '',

			};
		},
		watch: {
			checkedObj: {
				handler(n) {

					this.checkedArr = JSON.parse(JSON.stringify(n || {}))
				},
				deep: true
			}
		},
		mounted() {
			this.checkedArr = JSON.parse(JSON.stringify(this.checkedObj || {}))
			this.aryys = JSON.parse(JSON.stringify(this.checkedObj || {}))
			this.getBounht();
		},
		methods: {
			//价格
			producrprice(e, i, item) {
				this.bought[i].price = e.detail.value
				// 处理数据回显时, 调整数量, 选中的数据不改变的问题
				let obj = this.checkedArr.find((item) => item.product_id == this.bought[i].product_id);
				obj ? obj.price = e.detail.value : null;
				// this.$set(item, 'check', false);
				// for (let i in this.checkedArr) {
				// 	if (this.checkedArr[i].product_id == item.product_id) {
				// 		this.checkedArr.splice(i, 1)
				// 	}
				// }



			},
			incrementTotal(e, i, item) {
				// this.$set(item, 'check', false);
				// for (let i in this.checkedArr) {
				// 	if (this.checkedArr[i].product_id == item.product_id) {
				// 		this.checkedArr.splice(i, 1)
				// 	}
				// }

			},
			// picker修改事件
			bindPickerChange: function(e, storage, num) {
				this.bought[num].attrValue[this.index].sku = storage[e.detail.value].sku
				this.bought[num].attrValue[this.index].stock = storage[e.detail.value].stock
				this.bought[num].product_attr_unique = storage[e.detail.value].unique
				this.pickerData = storage[this.index] // 这里就是选中的对象

				if (this.bought[num].attrValue[this.index].stock == 0) {
					this.$util.Tips({
						title: '库存不足'
					});
				}
			},

			// 点击关闭按钮
			close() {
				this.$emit('close');
			},
			numberChange(data, i) {
				this.peicenumber = data.number;
				this.bought[i].number = data.number;
				// 处理数据回显时, 调整数量, 选中的数据不改变的问题
				let obj = this.checkedArr.find((item) => item.product_id == this.bought[i].product_id);
				obj ? obj.number = data.number : null;
			},

			tabs(index) {
				this.isActive = index
				this.$set(this.whereb, 'keyword', '');
				this.searchVal = ''
				this.searchBut()
			},
			onTouchmove(e) {
				if (this.loadendb) return;
				if (this.loadingb) return;
				const query = uni.createSelectorQuery().in(this);
				query.select('#goods').boundingClientRect(data => {
					if (data.bottom < 1500 && data.top < 0) {
						this.getBounht();
					}
				}).exec();

				// 模拟触底刷新
			},


			setValue: function(event) {
				this.$set(this.whereb, 'keyword', event.detail.value);
				if (!event.detail.value) {
					this.whereb.page = 1
					this.loadedb = false
					this.getBounht()
				}

			},
			searchBut() {
				this.bought = []
				this.whereb.page = 1
				this.loadedb = false
				this.getBounht()
			},
			getBounht() {
				var that = this;
				// console.log('1111111', that.loadingb, that.loadedb)
				if (that.loadingb || that.loadedb) return;
				that.loadingb = true;

				getCommunitygetOrderList(that.whereb).then(
					res => {
						that.loadingb = false;
						that.loadedb = res.data.list.length < that.whereb.limit;
						that.bought.push.apply(that.bought, res.data.list);
						that.whereb.page = that.whereb.page + 1;
						that.getInitchecked(that.bought);
					},
					error => {
						that.$util.Tips({
							title: error.msg
						})
					}
				);
			},


			/*获取初始化选中的数据*/
			getInitchecked(arr) {
				let that = this;
				arr.forEach((item, index) => {
					that.$set(item, 'check', false);
					that.checkedArr.forEach((val, i) => {
						if (item.product_id == val.product_id) {
							that.$set(item, 'check', true);
							that.$set(item, 'number', val.number);
							that.$set(item, 'price', val.price);
							that.peicenumber = val.number
						}
					})
				})

			},
			/*已选中的商品打钩*/
			getCheckedGoods() {
				this.checked = []
				this.checkedArr.forEach((item, index) => {
					this.checkedArr.push(item)

				})
			},
			/*点击选中与否*/
			goodsCheck(item) {
				this.$set(item, 'check', !item.check);
				if (item.check) {
					if (this.peicenumber == 0) {
						item.number = 1
					}
					if (!item.product_attr_unique) {
						item.product_attr_unique = item.attrValue[0].unique
					}
					this.checkedArr.push(item)
					this.arrayUnique(this.checkedArr, 'product_id')
				} else {
					this.checkedArr.splice(this.checkedArr.findIndex(itemn => ((itemn.product_id == item.product_id))), 1)

				}
			},
			//去重
			arrayUnique(arr, name) {
				let hash = {}
				const result = arr.reduce((acc, cru, index) => {
					if (!hash[cru[name]]) {
						hash[cru[name]] = {
							index: acc.length
						}
						acc.push(cru)
					} else {
						// console.log(acc, hash[cru[name]])
						acc.splice(hash[cru[name]]['index'], 1, cru)
					}


					return acc;

				}, [])
				this.checkedArr = result


			},
			/*确定提交*/
			submit() {
				console.log(this.checkedArr);
				this.$emit('getProduct', this.checkedArr);

			},
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		background: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 40rpx 0;
		position: relative;

		.header {
			position: relative;
			padding: 0 30rpx;

			.title {
				width: 100%;
				text-align: center;

				text {
					position: relative;
					margin: 0 50rpx;
					color: #999999;
					font-size: 30rpx;

					&.on {
						color: #333333;
						font-weight: bold;
						font-size: 34rpx;

						&::after {
							content: "";
							display: inline-block;
							width: 40rpx;
							height: 5rpx;
							background: var(--view-theme);
							position: absolute;
							bottom: -10rpx;
							left: 10rpx;
						}
					}
				}
			}

			.iconclose {
				width: 44rpx;
				height: 44rpx;
				line-height: 44rpx;

				border-radius: 50%;
				text-align: center;

				position: absolute;
				top: -150rpx;
				right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.search {
				margin-top: 44rpx;
				background: #F5F5F5;
				border-radius: 30rpx;
				padding: 12rpx 30rpx 12rpx 66rpx;
				position: relative;

				.iconfont {
					font-size: 24rpx;
					color: #939393;
					position: absolute;
					top: 20rpx;
					left: 30rpx;
				}

				.placeholder {
					color: #999999;
					font-size: 26rpx;
				}
			}

			.sub_title {
				color: #282828;
				font-size: 26rpx;
				margin-top: 30rpx;
			}

			.iconfont {
				color: #8A8A8A;
				font-size: 28rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
			}
		}

		scroll-view {
			height: 650rpx;
		}

		.main {
			height: 650rpx;
			margin: 40rpx 0 80rpx;
			padding: 0 30rpx;
		}
	}

	.picTxt {
		width: 100%;
		padding: 25rpx 0;
		position: relative;
		align-items: center;
		justify-content: space-between;

		border-top: 2rpx solid #E7E6E4;

		.picTxt_one {
			white-space: nowrap;
			overflow: hidden;
		}

		.picTxt_one {
			display: flex;
			margin-top: 20rpx;


			.slecte {
				margin-right: 30rpx;
				width: 280rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #959595;
				background-color: #E7E6E4;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				white-space: nowrap;
				overflow: hidden;

			}
		}


		.picTxt_price {
			display: flex;
			margin-top: 37rpx;
			height: 70rpx;
			line-height: 70rpx;

			.price {
				display: flex;
				margin-right: 15rpx;

				input {
					width: 210rpx;
					text-align: center;
					height: 70rpx;
					background: #F5F5F5;
					border-radius: 7rpx 7rpx 7rpx 7rpx;
					font-size: 28rpx;
					font-weight: 400;
					margin-left: 20rpx;


				}
			}

			.price_num {
				display: flex;


			}
		}

		.checkbox {
			margin-right: 30rpx;

			.iconfont {
				font-size: 38rpx;
				color: #CCCCCC;
			}

			.icon-xuanzhong1 {
				color: var(--view-theme);
			}

			.disabled {
				pointer-events: none;
				cursor: default;
				opacity: 0.3;
			}
		}

		.pictrue {
			width: 160rpx;
			height: 160rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.text {
			width: 430rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #282828;
			position: relative;
			height: 160rpx;

			.name {
				color: #282828;
				font-size: 28rpx;
			}

			.money {
				position: absolute;
				bottom: 0;
				left: 0;
				color: var(--view-priceColor);
				font-size: 22rpx;
				font-weight: bold;

				text {
					font-size: 26rpx;
				}
			}
		}
	}

	.foot_bar {
		width: 100%;
		position: fixed;
		// bottom: 54px;
		left: 0;
		padding: 20rpx 0;
		z-index: 5;

		.confirm_btn {
			width: 710rpx;
			height: 86rpx;
			line-height: 86rpx;
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			background: var(--view-theme);
			border-radius: 43rpx;
			margin: 0 auto;
		}
	}

	.empty {
		margin: 130rpx 0 150rpx;
		text-align: center;

		image,
		uni-image {
			display: inline-block;
			width: 414rpx;
			height: 305rpx;
		}

		text {
			display: block;
			color: #999999;
			font-size: 26rpx;
		}
	}
</style>