ledehui-B/src/packages/goods/goods-manage.vue

<template>
	<view class="business-detail-box">
		<Navbar navType='customLeft' title=' ' :leftWidth='500' color="#666">
			<view class="nav-left">
				<view class="tabs">
					<view class="tab" v-for="(item, index) in tab" :key="index" :class="{active: type === item.type}"
						@click="changeTab(item.type)">{{item.name}}</view>
				</view>
			</view>
		</Navbar>
		<view class="content">
			<view class="top"></view>
			<view class="good-box">
				<view class="left">
					<view class="category-box">
						<view class="category-item" v-for="item in categoryList" :key="item.id"
							:class="{active: categoryId === item.id}" @click="changeCategory(item)">
							{{item.name}}
							<view class="bar"></view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="list">
						<view class="list-item" v-for="item in secCategoryList" :key="item.id" v-if="goodsObj[item.name]">
							<view class="name">{{item.name}}</view>
							<view class="goods">
								<view class="good" :class="{active: good.id === id}" v-for="good in goodsObj[item.name]" @click="handleEditModal(good)">
									<image class="pic" :src="good.masterPic" mode=""></image>
									<view class="good-right">
										<view class="name">{{good.name}}</view>
										<view class="bottom">
											<view>￥:<text>{{good.minPrice | moneyFormat}}</text></view>
											<view>库存：<text>{{good.totalStock}}</text></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="editPopup" type="bottom" :safe-area="false" @change="changePopup">
			<view class="options">
				<view class="option" @click="toDetail">
					<IconText :code="`\ue88e`" color="#1D9BF0" class="icon" size="30"></IconText>
					编辑商品
				</view>
				<view class="option" @click="updateStatusModal">
					<IconText :code="`\ue87e`" color="#FF8D1A" class="icon" size="30"></IconText>
					{{ type === 3 ? '商品下架' : '商品开售' }}
				</view>
				<view class="option" @click="updateTwigModal">
					<IconText :code="`\ue880`" color="#00BAAD" class="icon" size="30"></IconText>
					商品排序
				</view>
				<view class="option" @click="deleteGoodModal">
					<IconText :code="`\ue881`" color="#FF4A74" class="icon" size="30"></IconText>
					删除
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="updateTwig" type="center" :safe-area="false">
			<view class="twig-box">
				<view class="title">商品排序</view>
				<view class="input-box">
					<view class="label">排序：</view>
					<input class="input" type="text" v-model="twig" placeholder=" " />
				</view>
				<view class="tip">数值越大,商品越靠前</view>
				<view class="btn" @click="updateTwig">确认</view>
			</view>
		</uni-popup>
		<ShowModal ref="updateStatus" title="提示" @submit="updateStatus" leftBtnText="取消" :content="`是否确认将该商品移动至“${type === 3 ? '仓库中' : '出售中'}”？`"
			btnText="确认" />
		<ShowModal ref="deleteGood" title="提示" @submit="deleteGood" leftBtnText="取消" content="是否确定删除该商品"
			btnText="确认" />
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	@Component({
		filters: {
			juliFormat(val: any) {
				if (!val) return '0m';
				if (val < 1000) {
					return val + 'm'
				} else {
					return (val / 1000).toFixed(2) + 'km'
				};
			},
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			}
		}
	})

	export default class BusinessDetail extends Vue {
		id: any = null;
		gid: any = null;
		cur: number = 0 // 当前滑块的index
		type: any = 3;
		tab: any = [{
				name: '出售中',
				type: 3,
			},
			{
				name: '仓库',
				type: 1,
			}
		];
		categoryList: any = [];
		categoryId: any = null;
		secCategoryList: any = [];
		goodsObj: any = {};
		twig: any = null;

		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff', //文字颜色
				backgroundColor: '#ffffff' //底部背景色
			});
			this.getCategoryList();
		}

		changeTab(type: any) {
			this.type = type;
			this.getGoodsList();
		}

		changeCategory(item: any) {
			this.categoryId = item.id;
			this.secCategoryList = item.second;
			this.getGoodsList();
		}
		
		handleEditModal(good: any){
			this.id = good.id;
			this.gid = good.gid;
			this.twig = good.twig;
			(this.$refs.editPopup as any).open();
		}
		
		changePopup(e: any){
			if(e.show === false) this.id = null;
		}

		getCategoryList() {
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.get({
					url: this.$api.getCategoryListB,
					data: {}
				})
				.then((res: any) => {
					this.categoryList = res.list;
					if (res.list.length) {
						this.categoryId = res.list[0].id;
						this.secCategoryList = res.list[0].second;
					}
					uni.hideLoading();
					this.getGoodsList();
				}, (err: any) => {
					uni.hideLoading();
				});
		}

		getGoodsList() {
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.get({
					url: this.$api.getGoodsListB,
					data: {
						status: this.type,
						firstSortId: this.categoryId,
						page: 1,
						size: 999
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					let obj: any = {};
					res.list.forEach((item: any) => {
						if (obj[item.secondSortName]) {
							obj[item.secondSortName].push(item);
						} else {
							obj[item.secondSortName] = [item]
						}
					});
					this.goodsObj = obj;
				}, (err: any) => {
					uni.hideLoading();
				});
		}
		
		toDetail(){
			this.$Router.push({
				path: '/packages/goods/add-good',
				query: {
					gid: this.gid,
					id: this.id
				}
			})
		}
		
		updateStatusModal(){
			(this.$refs.updateStatus as any).open();
		}
		
		updateStatus(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.put({
					url: this.$api.updateGoodStatus,
					data: {
						id: this.id,
						status: this.type === 3 ? 1 : 3
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					this.getGoodsList();
				}, (err: any) => {
					uni.hideLoading();
				});
		}
		
		updateTwigModal(){
			(this.$refs.updateTwig as any).open();
		}
		
		updateTwig(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.put({
					url: this.$api.updateGoodTwig,
					data: {
						id: this.id,
						twig: +this.twig
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					this.getGoodsList();
					(this.$refs.updateTwig as any).close();
				}, (err: any) => {
					uni.hideLoading();
				});
		}
		
		deleteGoodModal(){
			(this.$refs.deleteGood as any).open();
		}
		
		deleteGood(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.delete({
					url: this.$api.deleteGoodB,
					data: {
						gid: this.gid
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					this.getGoodsList();
				}, (err: any) => {
					uni.hideLoading();
				});
		}
	}
</script>

<style lang="scss" scoped>
	.business-detail-box {
		height: 100vh;
		@include flex-y(flex-start);

		.top {
			width: 100%;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
		}

		.nav-left {
			.tabs {
				@include flex-x(flex-start);

				.tab {
					@include word-vw(20, #999);
					font-weight: bold;
					@include flex-x(flex-start);
					padding: 0 vw(10);

					&.active {
						color: #333;
					}
				}
			}
		}

		.content {
			width: 100%;
			flex: 1;

			.good-box {
				width: 100%;
				height: 100%;
				@include flex-x();

				.left {
					width: vw(80);
					height: 100%;
					background: #fff;
					flex-shrink: 0;

					.category-box {
						.category-item {
							height: vw(40);
							@include flex-x(center);
							@include word-vw(15, #999);
							position: relative;

							&.active {
								background: #F8F8F8;
								@include word-vw(15, #333);

								.bar {
									width: vw(4);
									height: 100%;
									background: #F75E24;
									position: absolute;
									left: 0;
									top: 0;
								}
							}
						}
					}
				}

				.right {
					flex: 1;
					height: 100%;
					background: #F7F7F7;
					@include flex-y(flex-start);

					.list {
						width: 100%;
						padding: vw(3) vw(15) 0;
						@include flex-y(flex-start);
						box-sizing: border-box;

						.list-item {
							width: 100%;
							margin-top: vw(12);

							.name {
								line-height: vw(25);
								height: vw(25);
								@include word-vw(12, #333);
								@include flex-x(flex-start);
							}

							.goods {
								width: 100%;
								margin-top: vw(3);

								.good {
									width: 100%;
									background: #fff;
									border-radius: vw(5);
									@include flex-x();
									padding: vw(8);
									box-sizing: border-box;
									border: vw(1) solid #fff;
									margin-bottom: vw(10);
									&.active{
										border-color: $btn-color;
									}

									.pic {
										width: vw(60);
										height: vw(60);
										margin-right: vw(5);
										flex-shrink: 0;
									}

									.good-right {
										flex: 1;
										padding: vw(1) 0;
										height: vw(60);
										box-sizing: border-box;
										@include flex-y(space-between, flex-start);

										.name {
											@include word-vw(12, #333);
											font-weight: 550;
										}

										.bottom {
											@include word-vw(10, #333);
											@include flex-x(flex-start);

											view {
												margin-right: vw(15);

												text {
													color: #FF4F50;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		
		.twig-box{
			width: vw(300);
			background: #fff;
			border-radius: vw(10);
			padding: 0 vw(20);
			box-sizing: border-box;
			padding-bottom: vw(20);
			.title{
				height: vw(75);
				@include flex-x(center);
				@include word-vw(18, #333);
			}
			.input-box{
				@include flex-x();
				height: vw(45);
				margin-top: vw(25);
				.label{
					width: vw(60);
				}
				.input{
					flex: 1;
					height: vw(45);
					border-radius: vw(5);
					background: #EFEFEF;
					padding: 0 vw(16);
				}
			}
			.tip{
				padding-left: vw(60);
				margin-top: vw(8);
				@include word-vw(15, #999);
			}
			.btn{
				width: vw(200);
				height: vw(50);
				border-radius: vw(25);
				background: $btn-color;
				@include word-vw(16, #fff);
				margin: vw(30) auto 0;
				@include flex-x(center);
			}
		}
		
		.options{
			@include flex-x();
			background: #fff;
			flex-wrap: wrap;
			padding: vw(20) vw(20);
			border-top-left-radius: vw(10);
			border-top-right-radius: vw(10);
			.option{
				width: vw(105);
				height: vw(105);
				border-radius: vw(10);
				box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.05);
				margin-bottom: vw(10);
				@include flex-y(center);
				@include word-vw(12, #333);
				.icon{
					margin-bottom: vw(12);
				}
			}
		}
	}
</style>