xuan-pay-cweb/subpackages/groupBuyingConfiguration/categorySetting/categorySetting.vue

<template>
	<view class="all-container  pd-main backcor6 font15">
		<view class="  width100 mart10">
			<button class="btns icon tianjia" @click.stop="clickToAdd()">新增</button>
		</view>
		<view class="mart20 backcorfff">
			<view class="dis-flex height40 bor-botm1">
				<view class="flex-1 fotct fontwig6 ">名称</view>
				<!-- <view class="flex-1 fotct fontwig6">排序<text class="icon xia font14 "></text></view> -->
				<view class="flex-1 fotct fontwig6">操作</view>
			</view>

			<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " @click="getCategory(item)" v-for="(item,index) in categoryList" :key="index">
				<view class="flex-1 fotct text1">
					{{item.name}}
				</view>
				<view class="flex-1 fotct dis-flex">
					<view class="marglerig fcorred" @click.stop="toDeleteCategory(item)"><text
							class="icon shanchu font14 fcorred"></text>删除</view>
					<view class="marglerig fcor41c" @click.stop="clickToAdd(item)"><text
							class="icon bianji font14 fcor41c"></text>编辑</view>
					<next-bubble-menu class="flex-1" :d-width="150" :dataList="item.status |filterDataList"
						bingEleId="moreType" @change="getItem($event,item)">
						<view class="marglerig font15 " id="moreType">更多<text class="icon xia font14"></text></view>
					</next-bubble-menu>
				</view>
			</view>


		</view>
		<!-- 弹窗编辑分类 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入分类名称" :before-close="true" :value="categoryName" placeholder="请输入分类名称"
				@confirm="dialogInputConfirm" @close="close"></uni-popup-dialog>
		</uni-popup>
		<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true"
			radius="6" :showCloseIcon="true">
			<view class="pop-contain pd-main">
				<view class="pop-title fontwig6"><text>详情</text></view>
				<view class="dis-flex flex-wrap" v-if="categoryDetail">
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">分类名称</view>
						<view class="flex-1 fotct ">{{categoryDetail.name}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view>
						<view class="flex-1 fotct ">{{categoryDetail.createTime | timeFormat}}</view>
					</view>
				</view>


			</view>
		</wybPopup>
	</view>
</template>

<script>
	import {
		editCategory,
		getALLCategory,
		delCategory,
		sortUp,
		sortDown,
		getCategory
	} from '@/Utils/groupBuying.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue";
	export default {
		data() {
			return {
				storeId: '', //门店id
				categoryName: '',
				categoryId: '',
				categoryList: [],
				categoryDetail: null, //分类详情
			}
		},
		components: {
			wybPopup,
			nextBubleMenu
		},
		filters: {
			filterDataList(type) {
				let arr;
				arr = [{
					id: 1,
					text: '详情',
				}, {
					id: 2,
					text: '上移',
				}, {
					id: 3,
					text: '下移',
				}];

				return arr
			}
		},
		onLoad(options) {
			this.storeId = options.storeId;
		},
		onShow() {
			this.getALLCategory(true); //查询所有的分类列表
		},
		methods: {
			clickToAdd(item) {
				this.formatCategory()

				if (item) {
					this.categoryId = item.id;
					this.categoryName = item.name;
				}

				this.$refs.inputDialog.open()
			},
			/* 确定修改，编辑分类 */
			dialogInputConfirm(e) {
				this.categoryName = e;
				this.editCategory()
				console.log(this.categoryName)
			},
			/* 点击取消按钮触发 */
			close() {
				this.formatCategory();
				this.$refs.inputDialog.close();
			},
			formatCategory() {
				this.categoryName = '';
				this.categoryId = '';
			},
			/* 得到点击更多的 菜单选项 ，1：详情 2：上移 3：下移*/
			getItem(data, item) {

				if (data.id == 1) { //详情

					this.getCategory(item); //查询分类详情
				} else if (data.id == 2) { //上移
					this.sortUp(item.id)
				} else if (data.id == 3) { //下移
					this.sortDown(item.id)
				}
				console.log(data, item)
			},
			/* 查询分类详情 */
			getCategory(item) {
				uni.showLoading({
					title: '加载中'
				})
				let params = {
					id: item.id
				}
				getCategory(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.categoryDetail = res.return_data;
						this.$refs.popup.show();
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(() => {
					uni.hideLoading();
				})

			},
			hide() {
				this.categoryDetail = null;
			},
			/* 删除分类 */
			toDeleteCategory(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: `确定删除‘${item.name}’这个分类吗?`,
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: item.id
							}
							uni.showLoading({
								title: '删除中'
							})
							delCategory(params).then(res => {
								
								uni.hideLoading();
								
								let title;
								if (res.return_code == '000000') {
									title = res.return_data;
									_this.getALLCategory();
								} else {
									title = res.return_msg;
								}
								uni.showToast({
									title: title,
									icon: 'none',
									duration: 2000
								})
							}).catch(()=>{
								uni.hideLoading();
							})
						} else if (res.cancel) {

							// console.log('用户点击取消');
						}
					}
				});
			},
			/* 编辑，新增分类 */
			editCategory() {
				
				if(this.categoryName ==''){
					uni.showToast({
						title: "请输入分类名称",
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				uni.showLoading({
					title: '加载中'
				})
				let params = {
					storeId: this.storeId,
					name: this.categoryName,
				}
				if (this.categoryId) {
					params.id = this.categoryId;
				}

				editCategory(params).then(res => {
					uni.hideLoading();
					this.formatCategory();
					this.$refs.inputDialog.close();
					if (res.return_code == '000000') {
						this.getALLCategory();
						uni.showToast({
							title: res.return_data,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(()=>{
					this.$refs.inputDialog.close();
				})

			},
			/* 获取分类列表 */
			getALLCategory(flag) {

				if (flag) {
					uni.showLoading({
						title: '加载中'
					})
				}

				let params = {
					storeId: this.storeId
				}
				getALLCategory(params).then(res => {
					if (flag) {
						uni.hideLoading()
					}
					if (res.return_code == '000000') {
						this.categoryList = res.return_data;
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/* 上移 */
			sortUp(id) {
				let params = {
					id: id
				}
				sortUp(params).then(res => {
					if (res.return_code == '000000') {
						this.getALLCategory()
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/* 下移 */
			sortDown(id) {
				let params = {
					id: id
				}
				sortDown(params).then(res => {
					if (res.return_code == '000000') {
						this.getALLCategory()

					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 21%;
		height: 35px;
		line-height: 35px;
		background-color: #0083f5;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 12px;
		padding: 0px;
		margin: 0 0 0 auto;
	}

	/* 弹窗 */
	.pop-contain {
		text-align: center;
		padding-top: 50px;
		background-color: #ffffff;

		.pop-title {
			text-align: center;
			height: 50px;
			line-height: 50px;
			font-size: 18px;
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			right: 0;
			background: #ffffff;

		}
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.titleWidth {
		min-width: 80px;
		text-align: center;
	}

	.minheight40 {
		padding: 15px 0;
	}
</style>