123123

pt/src/cool/request/index.js

@@ -29,6 +29,7 @@ import shop from '@/service/shop/index';
 import chat from '@/service/chat/index';
 import sj from '@/service/sj/index';
 import itemClass from '@/service/item-class/index';
+import ptItemClass from '@/service/pt-item-class/index';
 import item from '@/service/item/index';
 import unit from '@/service/unit/index';
 import merchant from '@/service/merchant/index';
@@ -73,6 +74,7 @@ export function SET_SERVICE({ store }) {
 		chat,
 		sj,
 		itemClass,
+		ptItemClass,
 		item,
 		unit,
 		merchant,

pt/src/mock/userInfo.js

@@ -179,9 +179,11 @@ let menu = {
 		{id: '8',parentId: null,name: '花材',type: 0,icon: 'icongongzuotai',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '810',parentId: '8',name: '花材列表',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '805',parentId: '8',name: '花材分类',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item-class/list',viewPath: 'views/item-class/list.vue',keepAlive: 1},
+		{id: '809',parentId: '8',name: '花材导入',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item-class/add',viewPath: 'views/item-class/add.vue',keepAlive: 1},
 		{id: '7',parentId: null,name: '套餐',type: 0,icon: 'icongongzuotai',orderNum: 7,router: '/saas/manage/list',viewPath: 'saas/manage/list',keepAlive: 1},
 		{id: '701',parentId: '7',name: '套餐列表',type: 1,icon: 'icongongzuotai',orderNum: 7,router: '/saas/manage/package',viewPath: 'saas/manage/package',keepAlive: 1},
-		{id: '701',parentId: '7',name: '权限',type: 1,icon: 'icongongzuotai',orderNum: 7,router: '/saas/manage/auth',viewPath: 'saas/manage/auth',keepAlive: 1}
+		{id: '701',parentId: '7',name: '权限',type: 1,icon: 'icongongzuotai',orderNum: 7,router: '/saas/manage/auth',viewPath: 'saas/manage/auth',keepAlive: 1},
+
 	]
 };
 

pt/src/service/pt-item-class/index.js

@@ -0,0 +1,14 @@
+import { BaseService, Service } from '@/cool';
+
+@Service('pt-item-class')
+export class ItemClassService extends BaseService {
+
+	getAllClass(data) {
+		return this.request({
+			url: '/get-all-class',
+			params: data
+		});
+	}
+
+}
+export default new ItemClassService();

pt/src/views/item-class/add.vue

@@ -0,0 +1,220 @@
+<style lang="scss" scoped>
+	.app-list-content{
+		min-width: 1000px;
+	}
+	.left-box{
+		width: 30%;
+		height: 100%;
+	}
+	.content-box{
+		width: 5%;
+		height: 100%;
+		.switchover-box{
+			div{
+				width: 50px;
+				height: 50px;
+				margin-top: 20px;
+				color: #797979;
+				border: 1px solid #dadada;
+				font-weight: 700;
+				font-size: 36px;
+				cursor:pointer;  //小手
+			}
+		}
+	}
+	.right-box{
+		width: 65%;
+		height: 100%;
+	}
+	.title{
+		width: calc(100% - 2px);
+		height: 40px;
+		/*border: 1px solid #eee;*/
+		border: 1px solid #dadada;
+	}
+	.center-box{
+		margin-top: 20px;
+		height: calc(100% - 64px);
+		.class-list{
+			width: 30%;
+			height: 100%;
+			border: 1px solid #dadada;
+			overflow: scroll;
+			div{
+				height: 40px;
+				cursor:pointer;  //小手
+				&.active{
+					color: #ffffff;
+					background: #00ccff;
+				}
+			}
+		}
+		.item-box{
+			position: relative;
+			width: 65%;
+			height: 100%;
+			border: 1px solid #dadada;
+			padding: 0 10px;
+			.item-seek-box{
+				height: 80px;
+				border-bottom: 1px solid #dadada;
+				input{
+					width: calc(100% - 60px);
+					padding: 0 10px;
+					height: 40px;
+					border: none;
+					background: #f1f2f6;
+				}
+				.item-seek-btn{
+					width: 100px;
+					height: 40px;
+					color: #ffffff;
+					background: #169bd5;
+					cursor:pointer;  //小手
+				}
+			}
+			.infinite-list-title{
+				height: 40px;
+			}
+			.infinite-list{
+				height: calc(100% - 40px - 80px);
+				.infinite-list-item{
+					height: 60px;
+					cursor:pointer;  //小手
+					span{
+						margin: 0 10px;
+					}
+					img{
+						width: 50px;
+						height: 50px;
+					}
+				}
+			}
+			.item-menu-box{
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: calc(100% - 20px);
+				height: 40px;
+				padding: 0 10px;
+				background: #f7f7f7;
+				border-top: 1px solid #dadada;
+			}
+		}
+	}
+</style>
+<template>
+	<div class="flex-center-between app-list-content">
+		<div class="left-box">
+			<div class="flex-center-center title">平台花材</div>
+			<div class="flex-center-between center-box">
+				<div class="class-list">
+					<div class="flex-center-center " v-for="res in 30">分类</div>
+				</div>
+				<div class="item-box">
+					<div class="flex-center item-seek-box">
+						<input type="text" placeholder="请输入花材名称，支持拼音首字母搜索">
+						<div class="flex-center-center item-seek-btn">搜索</div>
+					</div>
+					<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+						<li v-for="i in count" class="flex-center infinite-list-item">
+							<spam class="el-icon-success" style="color: #b3b3b3"></spam>
+							<span>{{ i }}</span>
+							<img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
+							<span>粉色家人</span>
+						</li>
+					</ul>
+					<div class="flex-center item-menu-box">
+						<el-checkbox @change="allSelectItem" v-model="checkedAll">全选</el-checkbox>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="flex-center-center content-box">
+			<div class="switchover-box">
+				<div class="flex-center-center">→</div>
+				<div class="flex-center-center">←</div>
+			</div>
+		</div>
+		<div class="right-box">
+			<div class="flex-center-center title">我的花材</div>
+			<div class="flex-center-between center-box">
+				<div class="item-box">
+					<div class="flex-center infinite-list-title">
+						<div style="width: 70px;text-align: center">选择</div>
+						<div style="width: 70px;text-align: center">图片</div>
+						<div style="width: 100px;text-align: center">名称</div>
+						<div style="width: 100px;text-align: center">售价</div>
+						<div style="width: 100px;text-align: center">初始库存</div>
+						<div style="width: 100px;text-align: center">库存预警</div>
+					</div>
+					<ul class="infinite-list" v-infinite-scroll="load" style="height: calc(100% - 80px);overflow:auto">
+						<li v-for="i in count" class="flex-center infinite-list-item">
+							<div style="width: 70px;text-align: center" >
+								<spam class="el-icon-success" style="color: #b3b3b3"></spam>
+							</div>
+							<div style="width: 70px;text-align: center">
+								<img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
+							</div>
+							<div style="width: 100px;text-align: center">
+								<el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+							</div>
+							<div style="width: 100px;text-align: center">
+								<el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+							</div>
+							<div style="width: 100px;text-align: center">
+								<el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+							</div>
+							<div style="width: 100px;text-align: center">
+								<el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+							</div>
+						</li>
+					</ul>
+					<div class="flex-center item-menu-box">
+						<div class="flex-center-center" style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px">保存</div>
+					</div>
+				</div>
+				<div class="class-list">
+					<div class="flex-center-center " v-for="res in 30">分类</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+	name: 'item_add',
+	components: {},
+	data() {
+		return {
+			count: 0,
+			input: 0,
+			checked:false,
+			checkedAll:false,
+		};
+	},
+	computed: {},
+	mounted(){
+		this.getList();
+	},
+	methods: {
+		getList(){
+			this.$service.ptItemClass.getAllClass().then(res => {
+				console.log(res)
+			})
+		},
+		allSelectItem(e){
+			console.log(e)
+		},
+		load () {
+			this.count += 2
+		}
+	},
+};
+</script>
+