emis-app/components/buns-way-sheet/buns-way-sheet.vue

<template>
	<tpx-dialog :show="show" title="选择线路" @onClose="handleCloseModal()">
		<view class="shet-cont">
			<tpx-scroll-view v-model:resObject="resObject" :searchParam="searchParam" :getListFun="getListFun"  size="sm" :showLoadedAll="false" @onListChange="onListChange">
				<!-- 关键字搜索框 -->
				<tpx-search placeholder="请输入" v-model:value="searchParam.keyword" bgColor="#FFF"></tpx-search>
				
				<view v-if="hisList.length > 0" class="mt-20 mb-10">
					<tpx-tags :list="hisList" :value="value" type="single" @onItemClick="handleHisItemClick"></tpx-tags>
				</view>
				
				<view class="">
					<tpx-checkitems :list="dataList" :value="value" v-slot="dlCurrent" min-checked="1" type="single" 
						@onChange="handleDataItemChange"
					>
						<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>
					</tpx-checkitems>
				</view>
				
			</tpx-scroll-view>
		</view>
	</tpx-dialog>
</template>

<script>
	import * as apiService from "@/common/api"
	import { transListKeyTitle } from "@/common/util"
	export default {
		computed: {
			dataList() {
				let list = transListKeyTitle({ valKey: 'id', titleKey: 'lineName', list: this.resObject.list })
				console.log("====list====", list)
				return list
			},
		},
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				resObject: {
					list: []
				},
				hisList: [
					
				],
				searchParam: {
					country: '', // 目的国家
					fromCountry: '',// 发货国家
					keyword: ''
				}
			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},

		methods: {
			getListFun: apiService.getTransLineList,
			handleCloseModal() {
				this.$emit('update:show', false)
			},
			handleHisItemClick(res) {
				this.updateValue(res.val)
			},
			handleDataItemChange(val) {
				this.updateValue(val)
			},
			updateValue(val) {
				this.$emit('onChange', val)
				this.$emit('update:value', val)
				this.handleCloseModal()
			},
			onListChange(val){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		height: calc(60vh);
	}
</style>