tcwm-uniapp-shop/my/store/fenlei.vue

<template>
	<view>
		<view v-for="(item,index) in list" :key="index" class="flex padding justify-between">
			<view class="flex align-center">
				<view class="text-bold text-xl">{{index+1}}.</view>
				<view class="margin-left-xs">{{item.classifyName}}</view>
			</view>
			<view class="flex align-center">
				<view class="btn margin-right-sm" @click="addtype(2,item)">修改</view>
				<view class="btn" @click="bindupdata(item)">删除</view>
			</view>
		</view>
		<empty v-if="list.length == 0" content="暂无数据"></empty>
		<view class="addguige text-bold" @click="addtype(1)">添加</view>

		<!-- 添加规格弹框 -->
		<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" height="400rpx">
			<view>
				<view class="padding" style="margin-bottom: 20rpx;">
					<view>商品分类</view>
					<view class="flex align-center" style="margin-top: 15rpx;">
						<label  style="margin-right: 10rpx;">分类名称</label><u-input v-model="typeName" placeholder="请填写分类名称" clearable="false" />
					</view>
					<view class="flex align-center" style="margin-top: 15rpx;">
						<label style="margin-right: 10rpx;">分类排序</label><u-number-box v-model="sort" placeholder="请填写分类排序"></u-number-box>
					</view>
				</view>
				<view class="addguiges" @click="bindAdd()">确定</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				list: [{
					id: 1,
					name: '清爽夏日',
				}, {
					id: 2,
					name: '牛奶系列',
				}, {
					id: 3,
					name: '鲜榨果汁',
				}],
				show: false,
				typeName: '',
				sort:0,
				classifyId: '',
				shopId: '',
				shopName: '',
			}
		},
		onLoad() {
			uni.showLoading({
				title: '数据加载中...',
				mask: false
			})
			this.shopId = this.$queue.getData("shopId")
			this.shopName = this.$queue.getData("shopUserName")
			this.getlist()
		},
		methods: {
			addtype(index, item) {
				console.log(index, item)
				if (index == 1) {
					this.show = true
					this.typeName = ''
					this.classifyId = ''
					this.sort = 0
				} else if (index == 2) {
					this.show = true
					this.typeName = item.classifyName
					this.classifyId = item.classifyId
					if(item.sort){
						this.sort = item.sort
					}else{
						this.sort = 0
					}
				}
			},
			//添加商品类型
			bindAdd() {
				if (!this.typeName) {
					uni.showToast({
						title: '请填写商品类型',
						icon: 'none',
						duration: 1000
					})
					return
				}
				console.log(this.classifyId)
				if (this.classifyId) {
					let data = {
						classifyId: this.classifyId,
						classifyName: this.typeName,
						shopId: this.shopId,
						shopName: this.shopName,
						sort:this.sort,
					}
					this.$Request.postJson("/admin/goods/updateClassify", data).then(res => {
						if (res.code == 0) {
							// this.list = res.data
							this.show = false
							this.typeName = ''
							this.classifyId = ''
							this.sort = 0
							this.getlist()
						}
					})
				} else {
					let data = {
						classifyName: this.typeName,
						shopId: this.shopId,
						shopName: this.shopName,
						sort:this.sort
					}
					this.$Request.postJson("/admin/goods/insertClassify", data).then(res => {
						if (res.code == 0) {
							// this.list = res.data
							this.show = false
							this.typeName = ''
							this.classifyId = ''
							this.sort = 0
							this.getlist()
						}
					})
				}
			},
			//获取分类列表
			getlist() {
				let data = {
					shopId: this.shopId
				}
				this.$Request.getA("/admin/goods/selectAllClassify", data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.list = res.data
					}
				})
			},
			//删除商品类型
			bindupdata(e) {

				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要删除当前类型吗？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确定", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							let data = {
								classifyId: e.classifyId
							}
							this.$Request.getA("/admin/goods/deleteClassify", data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
									this.getlist();
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}

							});
						}
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.btn {
		border: 2upx solid #999999;
		border-radius: 24px;
		color: #333333;
		padding: 5rpx 30rpx;
	}

	.addguige {
		width: 90%;
		margin: 0 auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0;

	}

	.addguiges {
		width: 90%;
		margin: 0 auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		/* position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0; */
	}
</style>