cbz-sj/pages/good/options.vue

<template>
	<view class="content">
		<view class="vflex box">
			<block v-for="(item,index) in options" :key="index">
				<view class="hflex acenter jbetween" style="padding: 26rpx 0;">
					<view class="left">型号</view>
					<u-input v-model="item.name" border="none" placeholder="请输入"></u-input>
					<image src="/static/images/common/delete.png" style="width: 40rpx;height: 40rpx;" @click="delOptions(index)"></image>
				</view>
			</block>
			<view class="add hflex acenter jcenter" @click="add">添加型号</view>
		</view>
		<view class="bottom">
			<view class="btn hflex acenter jcenter" @click="save">
				保存
			</view>	
		</view>	
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				index: '',
				options: [
					{
						check: true,
						show: true,
						name: '',
						group: ''
					}
				],
				group: '',
			}
		},
		onLoad(options) {
			that = this
			that.index = options.index
			if(options.data) {
				that.options = JSON.parse(options.data)
			}
			that.options[0].group = options.group
			that.group = options.group
			console.log(options);
		},
		methods: {
			add() {
				var data = {
					name: '',
					check: true,
					show: true,
					group: that.group
				}
				that.options.push(data)
			},
			save() {
				for(var i=0;i<that.options.length;i++) {
					if(that.options[i].name == '') {
						$api.info('型号不能为空')
						return
					}
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				that.$set(prevPage.$vm._data.specList[that.index],'list',that.options)
				// prevPage.$vm._data.specList[that.index].options = that.options
				$api.jump(-1)
			},
			delOptions(index) {
				that.options.splice(index,1)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.box {
			box-sizing: border-box;
			padding: 0 30rpx;
			.left {
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
			.u-input {
				width: 530rpx;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 0 20rpx !important;
				margin: 0 14rpx 0 20rpx;
			}
			.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;
			}
		}
	}
</style>