material_applet/pagesMy/goods/add.vue

<template>
	<view class="content">
		<view class="one">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="form" labelWidth="80px">
				<uni-forms-item label="名称" required name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label="类型" required name="type">
					<uni-data-select v-model="form.type" :localdata="typeList" @change="typechange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="简介" required name="brief">
					<uni-easyinput type="textarea" autoHeight v-model="form.brief" placeholder="请输入简介"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="图片" required name="file">
					<upload class='upload' :list="form.file" name="file" :count="6" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="submit('valiForm')">修改</button>
		</view>
	</view>
</template>

<script>
	import upload from '../../components/upload/index.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				id: '',
				form: {},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '类型不能为空'
						}]
					},
					brief: {
						rules: [{
							required: true,
							errorMessage: '简介不能为空'
						}]
					},
					file: {
						rules: [{
							required: true,
							errorMessage: '图片不能为空'
						}]
					},
				},
				// 字典表
				typeList: [],
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			await that.searchToken();
			await that.searchOther();
		},

		methods: {
			async searchToken() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						that.$set(that.form, `supplier_id`, res.data._id);
					},
					fail: function(err) {
						uni.showToast({
							title: err.errmsg,
							icon: 'error',
							duration: 2000
						});
					}
				})
			},
			// 类型选择
			typechange(type) {
				const that = this;
				that.$set(that.form, `type`, type);
			},
			// 图片上传
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr)
			},
			// 提交
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async params => {
					let res;
					if (that.id) res = await that.$api(`/goods/${that.id}`, 'POST', that.form);
					else res = await that.$api(`/goods`, 'POST', that.form);
					if (res.errcode == '0') {
						uni.showToast({
							title: '维护信息成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			async searchOther() {
				const that = this;
				let res;
				//类型
				res = await that.$api('/DictData', 'GET', {
					type: 'goods_type',
					is_use: '0'
				})
				if (res.errcode == '0') {
					let typeList = []
					for (let val of res.data) {
						typeList.push({
							text: val.label,
							value: val.value
						})
					}
					that.$set(that, `typeList`, typeList);
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;

		.one {
			padding: 3vw;

			.button {
				margin: 2vw 0 0 0;
				background-color: var(--f3CColor);
				color: var(--mainColor);
			}
		}
	}
</style>