cte-share/components/danxuanlist/danxuanlist.vue

<template>
<view>
	<view class="contentV">
		<view class="viewinbetween">
			<view v-if="isedit" class="viewInrow">
				<image style="width: 50rpx;height: 50rpx; margin-left: auto;" src="/static/images/jian@3x.png" mode="scaleToFill" @click="sanchuzhyg"></image>
				<image style="width: 50rpx;height: 50rpx;padding-left: 20rpx;" src="/static/images/plus-circle-fill@3x.png" mode="scaleToFill" @click="zengjiaxz"></image>
			</view>
		</view>
		<view>
			<view v-for="(fenlei,i) in listData">
				<view class="fenleiContent">
					<view class="viewinbetween" >
						<view class="viewIncolumn">
							<view class="">
								<text style="font-size: 28rpx;font-weight: bold;">{{fenlei.title}}</text>
							</view>
							<text style="font-size: 24rpx;color:#E02F73;">{{fenlei.type==1?$t('comp.danxuan'):$t('comp.duoxuan')}}</text>
						</view>
						<view v-if="!isedit" class="">
							<text style="font-size: 28rpx;">{{fenlei.state!=1?$t('comp.kexuan'):$t('comp.bixuan')}}</text>
						</view>
						<view v-if="isedit" class="viewInrow">
							<image style="width: 50rpx;height: 50rpx; margin-left: auto;" src="/static/images/jian@3x.png" mode="scaleToFill" @click="sanchuxx(i)"></image>
							<image style="width: 50rpx;height: 50rpx;padding-left: 20rpx;" src="/static/images/plus-circle-fill@3x.png" mode="scaleToFill" @click="zengjiaxx(i)"></image>
						</view>
					</view>
					<view v-for="(obj,j) in fenlei.objects">
						<view class="viewinbetween" >
							<view class="viewInrow" @click="objSelect(i,j)">
								<image v-if="obj.state==0" style="width: 36rpx;" src="/static/images/tuoyuank@3x.png" mode="widthFix"></image>
								<image v-if="obj.state==1" style="width: 36rpx;" src="/static/images/tuoyuan@3x.png" mode="widthFix"></image>
								<text style="font-size: 28rpx;">{{obj.name}}</text>
							</view>
							<view class="">
								<text v-if="obj.price==0" style="font-size: 28rpx;">{{$t('comp.mianfei')}}</text>
								<text v-if="obj.price>0" style="font-size: 28rpx;">{{'+'+$formPr(obj.price)+$t('locale.huobidw')}}</text>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	<view>
	<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<my-popup-dialog ref="inputClose"  mode="input" :popmode="popmode" :title="$t('comp.tianjiaguige')" value=""
				:placeholder="$t('comp.qianshurggmc')" :placeholder2="$t('comp.qianshurzjje')" @confirm="dialogInputConfirm"></my-popup-dialog>
		</uni-popup>
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" :cancelText="$t('comp.guanbi')" :confirmText="$t('comp.queren')" :title="$t('comp.tongzhi')" :content="$t('comp.qrscgg')" @confirm="dialogConfirm"
				></uni-popup-dialog>
		</uni-popup>
	</view>
</view>
</template>

<script>
	export default {
		props: {
			infolistD:'',
			isedit:'',
		},
		data() {
			return {
				listData:[],
				fenleilist:{
					title:'',
					type:1,//1单选，2多选
					state:1,//2可选，1必选
					objects:[]
				},
				object:{
					name:'',
					price:'',
					note:'',
					state:0
				},
				popmode:1,
				editindex:-1
			}
		},
		watch: {
			infolistD(val){
				if(''==val||null==val||undefined==val){
					this.listData=[];
				}
				else{
					this.listData = val;
					this.infolistData();
				}
				
			}
		},
		methods: {
			sanchuzhyg(){
				console.log('sanchuzhyg');
				this.editindex = -1;
				this.$refs.alertDialog.open();
			},
			zengjiaxz(){
				console.log('zengjiaxz');
				this.popmode=2;
				this.$refs.inputDialog.open();
			},
			sanchuxx(index){
				console.log('sanchuxx');
				this.editindex = index;
				this.$refs.alertDialog.open();
			},
			zengjiaxx(index){
				console.log('zengjiaxx');
				this.editindex = index;
				this.popmode=1;
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm(val,val2,radioV,radioV2){
				console.log('11点击确认',val,val2,radioV)
				if(this.popmode==2){
					var fenlei = {
						title:val,
						type:radioV,
						state:radioV2,
						objects:[]
					};
					this.listData.push(fenlei);
				}
				else{
					var object={
						name:val,
						price:parseInt(val2),
						note:'',
						state:0
					};
					this.listData[this.editindex].objects.push(object);
				}
				this.infolistData();
			},
			objSelect(i,j){
				var obj = this.listData[i].objects[j];
				if(obj.state==0){
					this.listData[i].objects[j].state=1;
				}
				else{
					this.listData[i].objects[j].state=0;
				}
				
				if(this.listData[i].type==1){//单选
					for(var k=0;k<this.listData[i].objects.length;k++){
						if(k!=j){
							this.listData[i].objects[k].state=0;
						}
					}
				}
				if(this.listData[i].state==1){//必选
					var mark = -1;
					for(var k=0;k<this.listData[i].objects.length;k++){
						if(this.listData[i].objects[k].state==1){
							mark=k;
							break;
						}
					}
					if(mark<0){
						this.listData[i].objects[0].state=1;
					}
				}
				this.upDatalistData();
			},
			dialogConfirm(val){
				console.log('点击确认删除',val)
				if(this.editindex<0){
					if(this.listData.length>0){
						this.listData.pop();
					}
				}
				else{
					if(this.listData[this.editindex].objects.length>0){
						this.listData[this.editindex].objects.pop();
					}
				}
				this.upDatalistData();
			},
			infolistData(){
				for(var i=0;i<this.listData.length;i++){
					if(this.listData[i].state==1){
						if(this.listData[i].objects.length>0){
							var mark = -1;
							for(var j=0;j<this.listData[i].objects.length;j++){
								if(this.listData[i].objects[j].state==1){
									mark = j;
									break;
								}
							}
							if(mark<0){
								this.listData[i].objects[0].state=1;
							}
						}
					}
				}
				this.upDatalistData();
			},
			upDatalistData(){
				this.$emit('ElistDatachange',this.listData);
			},
		}
	}
</script>

<style>
	.contentV{
		display: flex;
		flex-direction: column;
		width: 90%;
		margin-left: 5%;
		margin-top: 10rpx;
	}
	.fenleiContent{
		display: flex;
		flex-direction: column;
		border-radius: 16rpx;
		border: 2rpx solid #DCD7DB;
		background-color: #FDF2F8;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.viewInrow{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.viewIncolumn{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.viewinbetween{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx;
	}

</style>