Ci2Order.vue/App/pages/component/wantHouse/wantHouse.vue

<template>
	<view>
		<z-text style="min-width: 300rpx;" arrow v-model="chooseContent" :placeholder="placeholder" @click="visible=true"></z-text>
		<z-slide-card :title="title" :visible.sync="visible" @beforeClose="beforeClose" rightBtnText="确定" @rightClick="submit">
			<z-cell :label="item.houseName" v-for="(item,index) in dataList" :key="item.id" @click.native="changeChecked(item.id)">
				<view class="iconfont iconicon-test" v-if="item.checked"></view>
			</z-cell>
		</z-slide-card>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		props: {
			multiple: Boolean,
			value: String | Array,
			placeholder: String,
			title: {
				type: String,
				default: '选择场地'
			}
		},
		model: {
			prop: 'value',
		},
		data() {
			return {
				visible: false,
				dataList: [],
				checkedList: [],
				oldcheckedList: [],
				chooseContent: '',
			}
		},
		onBackPress() {
		  if(this.visible) {  
		    this.visible = false;  
		    return true;  
		  }  
		},
		watch: {
			value(newval, oldval) {
				console.log(newval)
				this.oldcheckedList = newval;
				this.checkedList = newval; //选中的数据
				// this.getData();

			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				// this.$root.getStorage('storeId')
				this.$axios.get("/house/houseListByStoreId/"+uni.getStorageSync('storeId')).then(res => {
					// console.log(res.data.list)
					this.dataList = res.data.list;
					this.getChecked();
				}).catch(err => {
					console.log(err.msg);
				})
			},
			//获取已经被选中的
			getChecked() {
				var num = 0, //匹配个数
					slength = this.checkedList.length, //选中数
					chooseContent = '',
					checkedVal = [],
					checkedDetail = this.multiple ? [] : {};
				if (this.multiple) {
					for (var i in this.dataList) {
						for (var j in this.checkedList) {
							if (this.dataList[i].id == this.checkedList[j]) {
								chooseContent += this.dataList[i].houseName + '、';
								this.dataList[i].checked = true;
								checkedVal.push(this.dataList[i].id);
								checkedDetail.push(this.dataList[i]);
								num++;
								break;
							}
						}
					}
				} else {
					slength = 1;
					for (var i in this.dataList) {
						if (this.dataList[i].id == this.checkedList) {
							this.dataList[i].checked = true;
							chooseContent += this.dataList[i].houseName + '、';
							checkedVal = this.dataList[i].id;
							checkedDetail = this.dataList[i];
							break;
						}
					}
				}

				if (chooseContent.length > 0) {
					chooseContent = chooseContent.substring(0, chooseContent.length - 1);
				}
				this.chooseContent = chooseContent;
				this.$emit('input', checkedVal);
				this.$emit('checkedDetail', checkedDetail);
			},
			beforeClose() {
				var checkedDetail = this.multiple ? [] : {};
				for (var i in this.dataList) {
					this.dataList[i].checked = false;
					if (this.multiple) {
						for (var j in this.oldcheckedList) {
							console.log(this.oldcheckedList[j])
							if (this.oldcheckedList[j] == this.dataList[i].id) {
								this.dataList[i].checked = true;
								checkedDetail.push(this.dataList[i]);

								break;
							}
						}
					} else {
						if (this.dataList[i].id == this.oldcheckedList) {
							this.dataList[i].checked = true;
							checkedDetail = this.dataList[i];
						}
					}
				}
				this.checkedList = this.oldcheckedList;
				this.$emit('input', this.oldcheckedList);
				this.$emit('checkedDetail', checkedDetail);
			},
			changeChecked(id) {
				if (this.multiple) {
					for (var i = 0, len = this.dataList.length; i < len; i++) {
						if (this.dataList[i].id == id) {
							this.dataList[i].checked = this.dataList[i].checked ? false : true;
							this.$set(this.dataList, i, this.dataList[i]);
						}
					}
				} else {
					for (var i = 0, len = this.dataList.length; i < len; i++) {
						if (this.dataList[i].id == id) {
							this.dataList[i].checked = this.dataList[i].checked ? false : true;
							this.$set(this.dataList, i, this.dataList[i]);
						} else {
							this.dataList[i].checked = false;
							this.$set(this.dataList, i, this.dataList[i]);
						}
					}
				}

			},
			submit() {
				var checkedList = this.dataList.filter((item) => item.checked);
				var chooseContent = '',
					checkedVal = [],
					checkedDetail = this.multiple ? [] : {};
				for (var i = 0, len = checkedList.length; i < len; i++) {
					chooseContent += checkedList[i].houseName + '、';
					if (this.multiple) {
						checkedVal.push(checkedList[i].id);
						checkedDetail.push(checkedList[i]);
					} else {
						checkedVal = checkedList[i].id;
						checkedDetail = checkedList[i];
					}
				}
				if (chooseContent.length > 0) {
					chooseContent = chooseContent.substring(0, chooseContent.length - 1);
				}
				this.chooseContent = chooseContent;

				this.$emit('input', checkedVal);
				this.$emit('checkedDetail', checkedDetail);
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iconfont {
		color: #2481EE;
	}
</style>