Ci2Order.vue/App/pages/component/package/package.vue

<template>
	<view>
		<z-text style="min-width: 300rpx;" arrow v-model="chooseContent" :placeholder="placeholder" @click="visible=true"></z-text>
		<z-slide-card title="选择套餐" :visible.sync="visible" @beforeClose="beforeClose" rightBtnText="确定" @rightClick="submit">
			<z-cell :label="item.packageName" v-for="(item,index) in list" :key="item.packageTypeCode" @click.native="changeChecked(item.packageTypeCode)">
				<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: {
			value: String | Array,
			placeholder: String,
			//wedding就是婚庆
			type: {
				type: String,
				default: ''
			}
		},
		model: {
			prop: 'value',
		},
		data() {
			return {
				visible: false,
				list: [],
				checkedList: '',
				oldcheckedList: '',
				chooseContent: '',
			}
		},
		onBackPress() {
		  if(this.visible) {  
		    this.visible = false;  
		    return true;  
		  }  
		},
		watch: {
			value(newval, oldval) {
				this.oldcheckedList=newval;
				this.checkedList=newval;
				// var code = this.type == 'object' ? newval.dicCode : newval;
				var list = this.list.filter((item) => item.packageTypeCode == newval);
				//数据不存在时
				if (list.length == 0) {
					// this.$store.state.dicChange = true;
					if(this.type!='wedding')
					this.getData();
					else{
						this.getWedData();
					}
				}
			}
		},
		mounted() {
			if(this.type!='wedding')
			this.getData();
			else{
				this.getWedData();
			}
		},
		methods: {
			getData() {
				this.$axios.get("app/foodPackage/foodPackageListGeneralByStoreId/" + uni.getStorageSync('storeId')).then(res => {
					console.log('普通套餐类型', res)
					this.list = res.data.list;
					console.log(this.checkedList)
					var list = this.list.filter((item) => item.packageTypeCode == this.checkedList);
					if (list.length > 0) {
						this.changeChecked(list[0].packageTypeCode);
						this.chooseContent=list[0].packageName;
					}
				}).catch(err => {
					this.$message.error(err.msg);
				})
			},
			getWedData(){
				this.$axios.get("app/foodPackage/foodPackageListNoGeneralByStoreId/" + uni.getStorageSync('storeId')).then(res => {
					console.log('婚庆套餐类型', res)
					this.list = res.data.list;
					console.log(this.checkedList)
					var list = this.list.filter((item) => item.packageTypeCode == this.checkedList);
					if (list.length > 0) {
						this.changeChecked(list[0].packageTypeCode);
						this.chooseContent=list[0].packageName;
					}
				}).catch(err => {
					this.$message.error(err.msg);
				})
			},
			beforeClose() {
				console.log(this.oldcheckedList)
				this.checkedList=this.oldcheckedList;
				var checkedVal = '',checkedDetail='';
				this.chooseContent = '';
				for (var i = 0, len = this.list.length; i < len; i++) {
					
					this.list[i].checked = false;
					if (this.list[i].packageTypeCode==this.oldcheckedList) {
						this.chooseContent = this.list[i].packageName;
						checkedVal = this.list[i].packageTypeCode;
						checkedDetail=this.list[i];
						this.list[i].checked = true;
					} 
				}
				
				this.$emit('change',checkedDetail);
				this.$emit('input', this.oldcheckedList);
				
			},
			changeChecked(id) {
				for (var i = 0, len = this.list.length; i < len; i++) {
					if (this.list[i].packageTypeCode == id) {
						this.list[i].checked = this.list[i].checked ? false : true;
						this.$set(this.list, i, this.list[i]);
					} else {
						this.list[i].checked = false;
						this.$set(this.list, i, this.list[i]);
					}
				}
			},
			submit(){
				var checkedVal = '',checkedDetail='';
				for (var i = 0, len = this.list.length; i < len; i++) {
					if (this.list[i].checked) {
						this.chooseContent = this.list[i].packageName;
						checkedVal = this.list[i].packageTypeCode;
						checkedDetail=this.list[i];
						break;
					} else {
						this.chooseContent = '';
					}
				}
				this.checkedList=checkedVal;
				this.$emit('input', checkedVal);
				this.$emit('change',checkedDetail);
				this.visible = false;
			}
		}
	}
</script>

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