front-end/hdApp/src/components/app-flower-sel.vue

<template>
	<div class="app-area-sel">
		<bottom-popup class="popup-wrap" :show="showPopup" @close="hidePopup">
			<div class="map-wrap">
				<div class="map-top-tit-wrap">
					<div class="map-top-tit">从平台库添加</div>
					<app-close icon="iconguanbi" @close="hidePopup" />
				</div>
				<!-- 搜索 -->
				<div class="map-search">
					<!-- :focus="false" -->
					<app-search-module
						ref="aaaaa"
						placeholder="请输入关键词"
						@input="searchFn"
					/>
				</div>
				<!-- 列表 -->
				<scroll-view class="customer-list" scroll-y @scrolltolower="loadMoreEvent">
					<block v-if="!$util.isEmpty(list.data)">
						<view
							v-for="(item, itemIndex) in list.data"
							:key="itemIndex"
							@click="switchFlower(item, itemIndex)"
							class="customer-item"
						>
							<view class="item-avatar">
								<image :src="item.cover" alt="商品图" />
							</view>
							<view class="item-info">
								<view class="item-name"> {{ item.name }}</view>
								<view class="item-weight">{{ item.weight }}斤/扎</view>
								<view class="item-price"> ¥{{ item.cost }}/扎</view></view
							>

							<view class="item-tag" v-if="hasSelect(item)">
								<text class="iconfont icondagou"> </text>
							</view>
						</view>
					</block>
					<block v-else>
						<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
					</block>
				</scroll-view>
			</div>
		</bottom-popup>
	</div>
</template>

<script>
import BottomPopup from "@/components/plugin/bottom-popup";
import AppClose from "@/components/module/app-close";
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";

// api
import { getPlatformFlowerListApi } from "@/api/storehouse/flower";
import { list } from "@/mixins";
export default {
	name: "app-customer-sel",
	components: {
		BottomPopup,
		AppClose,
		AppSearchModule,
		AppWrapperEmpty
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		selectList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	mixins: [list],
	data() {
		return {
			showPopup: false,
			keyword: ""
		};
	},
	mounted() {
		this.showPopup = this.show;
	},
	// onLoad(val) {
	// 	this.mapCtx = uni.createMapContext('myMap')
	// 	this.query = val
	// 	this.reload()
	// },

	watch: {
		show(val) {
			this.showPopup = val;

			// #ifdef H5
			this.$nextTick(function() {
				setTimeout(() => {
					this.$refs.aaaaa.$refs.searchInput._focusInput();
				}, 1000);
			});
			// #endif

			if (val) {
				console.log(11111111);
				this.initData();
			}
		}
	},
	methods: {
		initData() {
			let options = {
				keyword: this.keyword,
				page: this.list.page,
				pageSize: this.list.pageSize
			};
			return getPlatformFlowerListApi(options)
				.then(res => {
					this.completes(res);
				})
				.catch(err => {});
		},

		// 搜索
		searchFn(e) {
			this.keyword = e;
			this.getAreaList();
			// this.$emit('search', e)
		},
		hidePopup() {
			this.$emit("update:show", false);
			this.$emit("hide");
		},
		switchFlower(item, index) {
			this.$emit("select", item);
			this.hidePopup();
		},
		loadMoreEvent() {
			this.initData();
		},
		hasSelect(item) {
			let has = false;
			for (const selectItem of this.selectList) {
				if (selectItem.id == item.id) {
					has = true;
					break;
				}
			}
			return has;
		}
	}
};
</script>

<style lang="scss" scoped>
// 弹窗
/deep/.popup-wrap {
	.tui-popup-class {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
}
.map-wrap {
	.map-top-tit-wrap {
		padding: 30px 0;
		text-align: center;
		font-size: 34px;
	}
	.map-search {
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.map-box {
		.current-site-icon {
			width: 63px;
			height: 90px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	// 列表
	.customer-list {
		min-height: 500rpx;
		max-height: 820rpx;
		// padding-bottom: 110rpx;
		box-sizing: border-box;
		.customer-item {
			display: flex;
			width: 100%;
			align-items: center;
			line-height: 40rpx;
			padding: 18rpx 30px;
			text-align: left;
			border-bottom: 1px solid #eee;
			position: relative;
			.item-avatar {
				flex-shrink: 0;
				width: 66px;
				height: 66px;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item-info {
				margin: 0 20upx;
				flex: 1;
				display: flex;
				align-items: center;
			}
			.item-name {
				margin: 0 20upx;
				flex: 1;
			}
			.item-weight {
				flex-shrink: 0;
				margin: 0 20upx;
				flex: 1;
			}
			.item-price {
				margin: 0 20upx;
				flex: 1;
			}
			.item-tag {
				display: flex;
				color: #3385ff;
				.iconfont {
					font-size: 32upx;
				}
			}
		}
	}
	.add-customer-bar {
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3385ff;
		font-size: 26px;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
	}
}
</style>