emis-sapp/components/buns-stockroom-sheet/buns-stockroom-sheet.vue

<template>
	<tpx-dialog :show="show" title="选择仓库" @onClose="handleCloseModal()">
		<view style="position: relative;height: calc(60vh);">
			<tpx-layout>
				<template v-slot:body>
					<view class="shet-cont">
						<!-- 关键字搜索框 -->
						<tpx-search placeholder="请输入" v-model:value="keyword" bgColor="#FFF"></tpx-search>
						
						<view class="mt-20 mb-10">
							<tpx-tags :list="hisList" v-model:value="model.value" type="single" @onItemClick="handleHisItemClick"></tpx-tags>
						</view>
						
						<view class="">
							<tpx-checkitems :list="dataList.filter(v=> !keyword || (v.title.indexOf(keyword) > -1))" 
								v-model:value="model.value" v-slot="dlCurrent" min-checked="1" type="single" 
							>
								<view slot class="mt-20" :style="`background-color: #F6F6F6;padding: 12rpx;border-radius: 8rpx;border: 1rpx solid ${dlCurrent.checked?'#B12D29':'transparent'};`">
									<u-row justify="between">
										<u-col span="10">
											<u-text size="28" :text="dlCurrent.item.title"></u-text>
										</u-col>
										<view span="2" class="com-chk-icon">
											<u-checkbox-group>
												<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
											</u-checkbox-group>
										</view>
									</u-row>
									<view v-if="dlCurrent.checked" class="w-tem" @click="handleCopy(dlCurrent.item)">
										<view style="position: absolute;right: 20rpx;right: 20rpx;">
											<!-- <u-icon name="file-text" size="34" color="#999"></u-icon> -->
										</view>
										<u-row>
											<view class="pr-20">
												<u-text :text="'李先生'" size="28" :bold="true"></u-text>
											</view>
											<view>
												<u-text :text="'18627068352'" size="28" mode="phone" color="#999"></u-text>
											</view>
										</u-row>
										<u-text :text="'上海市大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界大世界'" 
											size="24" margin="12rpx 0 0 0" color="#999" 
										></u-text>
									</view>
								</view>
							</tpx-checkitems>
						</view>
						
					</view>	
				</template>
				
				<template v-slot:footer>
					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
						<u-button @click="handleEditItem()" type="primary" size="large" shape="circle" 
							custom-style="height:80rpx;font-size: 30rpx;"
						>确认</u-button>
					</view>
				</template>
			</tpx-layout>
		</view>
	</tpx-dialog>
</template>

<script>
	import { setClipboardData } from "@/common/untool"
	export default {
		// computed: {
		// 	filDataList() {
		// 		return []
		// 	},
		// },
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				model: {
					value: this.value,
				},
				hisList: [
					{ title: '柬-铁运', val: 1 },
					{ title: '越-铁运', val: 2 },
				],
				dataList: [
					{ title: '柬埔寨-铁卡联运', val: 1 },
					{ title: '越南-铁卡联运', val: 2 },
					{ title: '泰国-铁卡联运', val: 3 },
					{ title: '巴厘岛-铁卡联运', val: 4 },
				],
				keyword: ''
			}
		},
		created() {

		},
		onHide() {

		},
		destroyed() {},

		methods: {
			handleCloseModal() {
				this.$emit('update:show', false)
				
			},
			handleHisItemClick(res) {
				
			},
			updateValue(val) {
				this.model.value = val
			},
			handleEditItem() {
				const { value } = this.model
				this.$emit('onChange', this.model)
				this.$emit('update:value', value)
				this.handleCloseModal()
			},
			handleCopy(item) {
				// setClipboardData(item.title)
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		padding: 10rpx 0 30rpx 0;
	}
	.w-tem {
		margin-top: 20rpx;
		position: relative;
		padding: 16rpx;
		background: #fff;
		border-radius: 10rpx;
		border: 2rpx solid transparent;
		&.active {
			border-color: $uni-color-primary;
		}
	}
</style>