maishidaSJ/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 class="">
				<text v-if="listData.length>0" @click="saveGG">{{$t('shangpin.baocun')}}</text>
				<text v-if="listData.length==0" @click="geuigeL">{{$t('shangpin.guigelb')}}</text>
			</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>
							<view class="contentInRowL">
								<text style="font-size: 24rpx;color:#006AFF;">{{fenlei.type==1?$t('comp.danxuan'):$t('comp.duoxuan')}}</text>
								<text style="font-size: 24rpx;margin-left: 20rpx;">{{fenlei.state!=1?$t('comp.kexuan'):$t('comp.bixuan')}}</text>
							</view>
							
						</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="popTitle" value=""
				:placeholder="placeholderA" :placeholder2="$t('comp.qianshurzjje')" :cancelText="$t('order.quxiao')" :confirmText="$t('comp.queren')" @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>
	<uni-popup ref="ggSave">
		<view class="contentColumnC" style="background-color: white;width:600rpx;border-radius: 10rpx;">
			<text style="margin-top: 20rpx;font-size: 30rpx;font-weight: bold;" >{{$t('comp.guige')}}</text>
			<input class="noinputV" type="text" v-model="guigezmc" :placeholder="$t('shangpin.guigezmc')" >
			<view class="contentInRowS" style="width: 90%;margin-top: 16rpx;">
				<text style="color: chocolate;" @click="quxiaobt">{{$t('order.quxiao')}}</text>
				<text style="color: #00A6FF;" @click="querenBZ">{{$t('comp.queren')}}</text>
			</view>
			<view style="height: 40rpx;"></view>
		</view>
	</uni-popup>
	<uni-popup ref="gglist">
		<view class="contentColumnC" style="background-color: white;width:750rpx;">
			<text style="margin-top: 20rpx;font-size: 30rpx;font-weight: bold;" >{{$t('comp.guige')}}</text>
			<view class="contentColumnC" v-for="(item,index) in guigeList">
				<view class="contentInRowS guigeItem">
					<text style="width: 70%;" @click="guigeSl(item,index)">{{item.name}}</text>
					<text style="color: crimson;" @click="delguige(index)">{{$t('index.sanchu')}}</text>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</view>
	</uni-popup>
</view>
</template>

<script>
	export default {
		props: {
			infolistD:'',
			isedit:'',
		},
		data() {
			return {
				listData:[],
				guigeList:[],
				guigezmc:'',
				guigeItem:'',
				guigeindex:-1,
				fenleilist:{
					title:'',
					type:1,//1单选，2多选
					state:1,//2可选，1必选
					objects:[]
				},
				object:{
					name:'',
					price:'',
					note:'',
					state:0
				},
				popmode:1,
				popTitle:'',
				placeholderA:'',
				editindex:-1
			}
		},
		watch: {
			infolistD(val){
				if(''==val||null==val||undefined==val){
					;
				}
				else{
					this.listData = val;
					this.infolistData();
				}
				
			}
		},
		methods: {
			saveGG(){
				this.$refs.ggSave.open();
			},
			geuigeL(){
				this.initGuigelist();
				this.$refs.gglist.open('bottom');
			},
			guigeSl(obj,index){
				console.log(index,obj)
				this.guigeindex=index;
				this.guigezmc=obj.name;
				this.listData=obj.listData;
				this.$refs.gglist.close();
				this.upDatalistData();
			},
			delguige(index){
				var that = this;
				uni.showModal({
					cancelText: that.$t('order.quxiao'), // 取消按钮的文字
					confirmText: that.$t('comp.queren'), // 确认按钮的文字 
				    title: that.$t('api.message'),
				    content: that.$t('index.sanchu')+'?',
				    success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							that.guigeList.splice(index,1);
							uni.setStorageSync('guigeLCList',that.guigeList);
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
				
				
			},
			sanchuzhyg(){
				console.log('sanchuzhyg');
				this.editindex = -1;
				this.$refs.alertDialog.open();
			},
			initGuigelist(){
				var temp = uni.getStorageSync('guigeLCList');
				console.log(temp)
				if(temp){
					this.guigeList=temp;
				}
		    },
			quxiaobt(){
				this.$refs.ggSave.close();
			},
			querenBZ(){
				console.log(this.guigezmc,this.guigeindex);
				var data = {
					name:this.guigezmc,
					listData:this.listData
				}
				if(this.guigeindex>=0){
					this.guigeList[this.guigeindex]=data;
				}
				else{
					this.guigeList.push(data);
				}
				this.$refs.ggSave.close();
				uni.setStorageSync('guigeLCList',this.guigeList);
			},
			zengjiaxz(){
				console.log('zengjiaxz');
				this.popmode=2;
				this.popTitle=this.$t('comp.Ftianjiaguige');
				this.placeholderA=this.$t('comp.Fqianshurggmc');
				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.popTitle=this.$t('comp.tianjiaguige');
				this.placeholderA=this.$t('comp.qianshurggmc');
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm(val,val2,radioV,radioV2){
				console.log('11点击确认',val,val2,radioV)
				
				if(!val2||val2==''){
					val2=0;
				}
				if(this.popmode==2){
					var fenlei = {
						title:val,
						type:radioV,
						state:radioV2,
						objects:[]
					};
					this.listData.push(fenlei);
				}
				else{
					var object={
						name:val,
						price: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){
				
				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();
					}
				}
				if(this.listData.length==0){
					this.guigeindex=-1;
					this.guigezmc='';
				}
				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;
	}
	.noinputV{
		margin-top: 30rpx;
		font-size: 30rpx;
		width: 60%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
		border: 2rpx solid darkgray;
	}
	
	.guigeItem{
		width: 650rpx;
		font-size: 30rpx;
		line-height: 100rpx;
		border: solid lavender;
		border-width: 0px 0px 2rpx 0px;
	}

</style>