cbz-sj/pages/good/spec.vue

<template>
	<view class="content">
		<view class="top" v-if="specList.length == 0">
			<view class="add hflex acenter jcenter" @click="open(-1)">添加规格分类</view>	
		</view>	
		<view class="top1" v-else>
			<block v-for="(item,index) in specList" :key="index">
				<view class="box">
					<view class="hflex acenter jbetween box-top">
						<view class="hflex acenter">
							<view class="name text_hide">{{item.name}}</view>
							<image src="/static/images/common/edit_icon.png" style="width: 28rpx;height: 28rpx;" @click="open(index)"></image>
						</view>
						<view class="hflex acenter" @click="delSpec(index)">
							<image src="/static/images/common/delete.png" style="width: 28rpx;height: 28rpx;"></image>
							<view class="right">删除</view>
						</view>
					</view>
					<view class="hflex acenter fwrap" style="padding: 32rpx 0;">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<view class="options hflex acenter">
								<view class="text text-right">{{item2.name}}</view>
								<image src="/static/images/common/close_icon.png" style="margin-left: 16rpx;width: 28rpx;height: 28rpx;" @click="delOptions(index,index2)"></image>
							</view>
						</block>
						<view class="options hflex acenter">
							<view class="text text_blue" @click="add(index,item.name)">+添加规格选项</view>
						</view>
					</view>
				</view>
			</block>
			<view class="add hflex acenter jcenter" @click="open(-1)">添加规格分类</view>
		</view>
		<view class="bottom">
			<view class="btn hflex acenter jcenter" @click="next">
				下一步
			</view>	
		</view>	
		<u-popup :show="show" round="10" mode="center" @close="close" :safeAreaInsetBottom="false">
			<view class="popu">
				<view class="popu_title">{{ editIndex == -1 ? '添加' : '修改'}}规格分类</view>	
				<u-input v-model="name" border="none" maxlength="15" shape="circle" placeholder="请输入"></u-input>
				<view class="hflex acenter jcenter btn_group">
					<view class="left_btn" @click="close">取消</view>	
					<view class="right_btn" @click="save">保存</view>
				</view>	
			</view>	
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				specList: [],
				options: [],
				show: false,
				name: '',
				edit: false,
				editIndex: -1,
				good_id: '',
			}
		},
		onLoad(options) {
			that = this
			if(options.good_id) {
				that.good_id = options.good_id
			}
			if(options.items) {
				that.getData(options.items)
			}
		},
		methods: {
			getData(data) {
				var data = JSON.parse(data)
				that.specList = data
			},
			open(index) {
				if(index == -1) {
					that.edit = false
				} else {
					that.edit = true
					that.editIndex = index
					that.name = that.specList[that.editIndex].name
				}
				that.show = true
			},
			close() {
				that.show = false
			},
			save() {
				if(that.name == '') {
					$api.info('请输入规格分类')
					return
				}
				var data = {
					name: that.name
				}
				if(that.edit) {
					that.$set(that.specList[that.editIndex],'name',that.name)
				} else {
					that.specList.push(data)
				}
				that.name = ''
				that.close()
			},
			delSpec(index) {
				that.specList.splice(index,1)
			},
			delOptions(index,index2) {
				console.log(that.specList);
				that.specList[index].list.splice(index2,1)
			},
			add(index,name) {
				var url = ''
				if(that.specList[index].list) {
					url = '/pages/good/options?index='+index+'&data='+JSON.stringify(that.specList[index].list) + '&group=' + name
				} else {
					url = '/pages/good/options?index='+index + '&group=' + name
				}
				$api.jump(url)
			},
			next() {
				if(that.specList.length <= 0) {
					$api.info('请先填写至少一个规格')
					return
				}
				$api.jump('/pages/good/setting?data=' + JSON.stringify(that.specList) + '&good_id=' + that.good_id,1)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.top {
			width: 100%;
			min-height: calc(100vh - 166rpx);
			
		}
		.top1 {
			width: 100%;
			min-height: calc(100vh - 166rpx);
			background: #F5F5F5;
			.box {
				width: 100%;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				background: #FFFFFF;
				.box-top {
					width: 100%;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F5F5F5;
					.name {
						max-width: 500rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #222222;
						line-height: 42rpx;
						padding-right: 12rpx;
					}
					.right {
						font-size: 24rpx;
						font-weight: 400;
						color: #8F8F8F;
						line-height: 34rpx;
						padding-left: 12rpx;
					}
				}
				.options {
					background: #F5F5F5;
					border-radius: 28px;
					padding: 10rpx 32rpx;
					margin: 0 20rpx 32rpx 0;
					.text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
					}
					.text-right {
						padding-right: 16rpx;
						border-right: 1rpx solid #D8D8D8;
					}
					.text_blue {
						color: #5471FF;
					}
				}
			}
		}
		.add {
			margin: 102rpx auto 186rpx;
			width: 390rpx;
			height: 84rpx;
			border-radius: 42rpx;
			border: 2rpx solid #5471FF;
			font-size: 30rpx;
			font-weight: 400;
			color: #5471FF;
			line-height: 42rpx;
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 0;
			position: fixed;
			bottom: 0;
			z-index: 99;
			.btn {
				width: 100%;
				height: 84rpx;
				background: #5471FF;
				border-radius: 46rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
			}
		}
		.popu {
			width: 590rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			box-sizing: border-box;
			padding: 0 10rpx;
			.popu_title {
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				line-height: 44rpx;
				text-align: center;
				padding: 48rpx 0;
			}
			.u-input {
				width: 490rpx;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 40rpx;
				margin: 0 auto;
				padding: 0 32rpx !important;
			}
			.btn_group {
				width: 100%;
				margin-top: 56rpx;
				border-top: 1rpx solid #F5F5F5;
				padding: 0 0;
				.left_btn {
					width: 50%;
					padding: 28rpx 108rpx;
					border-right: 1rpx solid #F5F5F5;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					line-height: 44rpx;
				}
				.right_btn {
					width: 50%;
					padding: 0 108rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #5471FF;
					line-height: 44rpx;
				}
			}
		}
	}
</style>