QianNiaoShop/pagesT/goods/AddGoodsclassification.vue

<template>
	<view class="detail-view">
		<u-form label-width="140" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="分类名称">
					<u-input type="text" v-model="form.title" placeholder="分类名称" />
				</u-form-item>
				<u-form-item label="上级分类">
					<view class="float_right" @click="this.$refs.tkitree._show();">
						<text v-if="category_name">{{ category_name }}</text>
						<text class="input-pl" v-else>请选择上级分类</text>
					</view>
					<view slot="right">
						<u-icon name="arrow-down-fill" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="分类图片" label-position="top">
					<upload :images="form.images" @handleRemove="imgRemove" @uploadSuccess="uploadSuccess" />
				</u-form-item>
				<u-form-item label="一级分类广告图片" label-position="top">
					<upload :images="form.adImage" @handleRemove="uploadAdRemove" @uploadSuccess="uploadAdSuccess" />
				</u-form-item>
				<u-form-item label="分类排序" prop="name">
					<u-input type="text" v-model="form.sort" placeholder="请输入分类排序" />
				</u-form-item>
				<u-form-item label="是否显示">
					<view class="form-value">
						<u-switch style="transform: translateY(14rpx);" @change="switchChange" v-model="enableStatus"
							:active-value="5" :inactive-value="4" size="40"></u-switch>
					</view>
				</u-form-item>
			</view>
		</u-form>
		<view class="detail-bottom">
			<u-button :loading='loading' class="handel-btn" type="primary" @click="addCategory">提交</u-button>
		</view>
		<tki-tree ref="tkitree" :selectParent="true" :range="cate_list" rangeKey="title" @confirm="cateConfirm">
		</tki-tree>
	</view>
</template>

<script>
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	import upload from '@/components/qiniu/QiniuUpload.vue';
	export default {
		components: {
			tkiTree,
			upload
		},
		data() {
			return {
				form: {
					code: "",
					images: '',
					sort: "",
					title: "",
					pid: "",
					enableStatus: 5,
					link: "",
					adImage: '',
				},
				cate_list: [],
				category_name: '', //分类名称
				enableStatus: true,
				id: '',
				loading: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id,
					uni.setNavigationBarTitle({
						title: '编辑分类'
					})
				this.getCategoryInfoById()
			}
			this.getAllCategory();
		},
		methods: {
			//  获取所有商品分类
			getAllCategory() {
				this.$u.api.getAllCategory({
					enableStatus: 5
				}).then(res => {
					this.cate_list = res.data;
				});
			},
			cateConfirm(arr) {
				this.category_name = arr[0].title;
				this.form.pid = arr[0].id;
				this.form.link = arr[0].parents.map(item => item.id).join(',') + ',' + arr[0].id;
			},
			// 分类图片上传成功
			uploadSuccess(imgUrl) {
				if (this.form.images.length > 0) {
					this.$u.toast('图片只能添加一张')
					return
				}
				this.form.images = []
				this.form.images.push(imgUrl);
			},
			//移除分类图片
			imgRemove(arr) {
				this.form.images = '';
			},
			// 一级分类图片上传成功
			uploadAdSuccess(imgUrl) {
				if (this.form.adImage.length > 0) {
					this.$u.toast('图片只能添加一张')
					return
				}
				this.form.adImage = []
				this.form.adImage.push(imgUrl);
			},
			//移除一级分类图片
			uploadAdRemove(arr) {
				this.form.adImage = '';
			},
			switchChange(val) {
				this.form.enableStatus = val;
				console.log(this.form.enableStatus);
			},
			addCategory() {
				if (!this.form.title.trim()) {
					this.$u.toast('分类名称不能为空')
					return
				}
				this.loading = true
				try {
					if (this.id) {
						if (this.form.images) {
							this.form.images = this.form.images[0]
						}
						if (this.form.adImage) {
							this.form.adImage = this.form.adImage[0]
						}
						this.$u.api.editCategory(this.id, {
							...this.form
						}).then(res => {
							this.$u.toast('编辑成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						})
					} else {
						this.$u.api.addCategory({
							...this.form
						}).then(res => {
							this.$u.toast('新增成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						})
					}
					this.loading = false
				} catch {
					this.loading = false
				}
			},
			getCategoryInfoById() {
				this.$u.api.getCategoryInfoById(this.id).then(res => {
					this.form = res.data
					if (this.form.images) {
						let images = []
						images.push(res.data.images)
						this.form.images = images
					} else {
						this.form.images = []
					}
					if (this.form.adImage) {
						let adImage = []
						adImage.push(res.data.adImage)
						this.form.adImage = adImage
					}
					if (this.form.enableStatus === 4) {
						this.enableStatus = false
					}
					this.category_name = res.data.ptitle
				})
			}
		}
	}
</script>

<style lang="scss">

</style>