fix

virgo.wzfrontend/workark/src/components/website/productItem.vue

@@ -1,10 +1,21 @@
 <template>
 	<div class="product-item-box">
 		<div class="product-item" @click="clickItem">
-			<div class="product-item-image" :style="'background-image: url('+imageUrl(item.showPictures)+');'"></div>
+			<div class="product-item-image" :style="'background-image: url('+imageUrl(item.listDisplayImage)+');'">
+			</div>
 			<div class="product-content">
 				<div class="product-item-title hui-ellipsis">{{item.name}}</div>
-				<div class="space hui-ellipsis" v-if="item.remark">{{item.remark}}</div>
+				<div class="space" v-if="item.subtitle">{{item.subtitle}}</div>
+				<div class="bottom">
+					<div class="organization">
+						<i class="el-icon-user-solid"></i>
+						<span>{{item.organizationName}}</span>
+					</div>
+					<div class="pirce">
+						<span class="number">{{item.price}}</span>
+						<span class="unit">元/次</span>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -13,17 +24,15 @@
 <script>
 	import Crypto from '@/uitls/crypto'
 	export default {
-		props: ['item', 'parent'],
+		props: ['item'],
 		methods: {
 			imageUrl(data) {
-				let itemData = this.parent.showPictures;
-				if (itemData && JSON.parse(itemData)[0]) return JSON.parse(itemData)[0].url;
 				if (data && JSON.parse(data)[0]) return JSON.parse(data)[0].url;
 				return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
 			},
 			clickItem() {
 				let id = Crypto.AES.encrypt(String(this.item.id), 'bosshand');
-				this.$router.push('/website/serveDetail?type=' + encodeURIComponent(id) + '&sign=' + this.item.sign);
+				this.$router.push('/website/serveDetail?sign=' + encodeURIComponent(id));
 			}
 		}
 	}
@@ -67,11 +76,28 @@
 			font-weight: 600;
 		}
 
+		.bottom {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-end;
+		}
+
 		.space {
 			color: $--color-text-regular;
 			font-size: $--font-size-small;
-			margin-bottom: 3px;
-			margin-top: 7px;
+			margin: 7px 0;
+			-webkit-line-clamp: 2;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.organization {
+			color: $--color-text-regular;
+			font-size: $--font-size-small;
+			opacity: 0.7;
+			line-height: 14px;
 		}
 
 		.pirce {

virgo.wzfrontend/workark/src/components/website/serveItem.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="product-item-box">
+		<div class="product-item" @click="clickItem">
+			<div class="product-item-image" :style="'background-image: url('+imageUrl(item.showPictures)+');'"></div>
+			<div class="product-content">
+				<div class="product-item-title hui-ellipsis">{{item.name}}</div>
+				<div class="space hui-ellipsis" v-if="item.remark">{{item.remark}}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import Crypto from '@/uitls/crypto'
+	export default {
+		props: ['item', 'parent'],
+		methods: {
+			imageUrl(data) {
+				let itemData = this.parent.showPictures;
+				if (itemData && JSON.parse(itemData)[0]) return JSON.parse(itemData)[0].url;
+				if (data && JSON.parse(data)[0]) return JSON.parse(data)[0].url;
+				return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
+			},
+			clickItem() {
+				let id = Crypto.AES.encrypt(String(this.item.id), 'bosshand');
+				this.$router.push('/website/serveList?type=' + encodeURIComponent(id) + '&sign=' + this.item.sign);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.product-item-box {
+		width: 25%;
+		padding: 10px;
+	}
+
+	.product-item {
+		width: 100%;
+		background: $--color-white;
+		border-radius: 8px;
+		box-sizing: border-box;
+		position: relative;
+		cursor: pointer;
+		box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.1);
+		overflow: hidden;
+		padding: 15px;
+		box-sizing: border-box;
+
+
+		.product-item-image {
+			width: 100%;
+			height: 160px;
+			overflow: hidden;
+			border-radius: 8px;
+			background-repeat: no-repeat;
+			background-size: cover;
+			background-position: center center;
+		}
+
+		.product-content {
+			padding-top: 15px;
+		}
+
+		.product-item-title {
+			font-size: 16px;
+			font-weight: 600;
+		}
+
+		.space {
+			color: $--color-text-regular;
+			font-size: $--font-size-small;
+			margin-bottom: 3px;
+			margin-top: 7px;
+		}
+
+		.pirce {
+			color: $--color-danger;
+			display: flex;
+			align-items: end;
+
+			.number {
+				font-size: 20px;
+				font-weight: 600;
+				height: 20px;
+			}
+
+			.unit {
+				height: 15px;
+				font-size: 12px;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/workark/src/components/work/serve/content/detail.vue

@@ -19,7 +19,14 @@
 		</div>
 		<div class="hui-detail-box">
 			<div class="hui-detail-title">商品附件</div>
-			<div class="hui-detail-content">
+			<div class="hui-detail-content">
+				<div class="hui-detail-item">
+					<div class="hui-detail-label">列表展示图</div>
+					<div class="hui-detail-value">
+						<upload :list="detail.listDisplayImage ? JSON.parse(detail.listDisplayImage) : []" type="preview">
+						</upload>
+					</div>
+				</div>
 				<div class="hui-detail-item">
 					<div class="hui-detail-label">商品配图</div>
 					<div class="hui-detail-value">

virgo.wzfrontend/workark/src/components/work/serve/content/edit.vue

@@ -22,6 +22,9 @@
 				<el-form-item label="商品介绍" class="hui-textarea">
 					<custom-data ref="customData" :list="customList" :option="option"></custom-data>
 				</el-form-item>
+				<el-form-item label="列表展示图" class="hui-textarea">
+					<upload ref="listDisplayImage" :list="listDisplayImage" type="insert" :maxLen="15"></upload>
+				</el-form-item>
 				<el-form-item label="商品配图" class="hui-textarea">
 					<upload ref="rotatingImages" :list="rotatingImages" type="insert" :maxLen="15"></upload>
 				</el-form-item>
@@ -67,6 +70,7 @@
 					customerId: ''
 				},
 				loading: false,
+				listDisplayImage: [],
 				rotatingImages: [],
 				detailedImage: [],
 				customList: [],
@@ -96,6 +100,8 @@
 				getServeById(this.detailId).then(res => {
 					if (res.state) {
 						this.form = res.data;
+						if (this.form.listDisplayImage) this.listDisplayImage = JSON.parse(this.form
+							.listDisplayImage);
 						if (this.form.rotatingImages) this.rotatingImages = JSON.parse(this.form.rotatingImages);
 						if (this.form.detailedImage) this.detailedImage = JSON.parse(this.form.detailedImage);
 						if (this.form.contract) this.contract = JSON.parse(this.form.contract);
@@ -123,6 +129,7 @@
 			submit() {
 				this.loading = true;
 				let postData = JSON.parse(JSON.stringify(this.form));
+				postData['listDisplayImage'] = JSON.stringify(this.$refs.listDisplayImage.fileList);
 				postData['rotatingImages'] = JSON.stringify(this.$refs.rotatingImages.fileList);
 				postData['detailedImage'] = JSON.stringify(this.$refs.detailedImage.fileList);
 				postData['contract'] = JSON.stringify(this.$refs.contract.fileList);

virgo.wzfrontend/workark/src/layout/loginLayout.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="login-register">
-		<div class="title">
+		<div class="title" @click="$router.push('/')">
 			<div class="title-logo">
 				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
 					alt="logo.png">
@@ -70,6 +70,7 @@
 			padding-left: 46px;
 			display: flex;
 			align-items: center;
+			cursor: pointer;
 
 			.title-logo {
 				width: 245px;

virgo.wzfrontend/workark/src/router/index.js

@@ -21,6 +21,13 @@ export default new Router({
 			meta: {
 				title: '首页'
 			}
+		}, {
+			path: '/website/serveList',
+			component: () => import('@/views/website/serveList'),
+			name: '服务商品列表',
+			meta: {
+				title: '服务商品列表'
+			}
 		}, {
 			path: '/website/serveDetail',
 			component: () => import('@/views/website/serveDetail'),

virgo.wzfrontend/workark/src/router/permission.js

@@ -17,7 +17,7 @@ NProgress.configure({
 })
 
 const baseUrl = ['/work', '/work/message', '/work/notice', '/work/discount/userCoupon'];
-const noTokenUrl = ['/', '/401', '/404', '/loginRegister/login', '/website/serveDetail'];
+const noTokenUrl = ['/', '/401', '/404', '/loginRegister/login', '/website/serveDetail', '/website/serveList'];
 
 const testBaseUrl = path => { //判断公共路由
 	return baseUrl.filter((item) => {

virgo.wzfrontend/workark/src/views/index.vue

@@ -56,8 +56,8 @@
 				<div class="product-iview" v-for="item in list" :key="item.id" :id="`list${item.id}`">
 					<div class="title">{{item.name}}</div>
 					<div class="product-list">
-						<product-item v-for="(node,index) in item.children" :key="index" :item="node" :parent="item">
-						</product-item>
+						<serve-item v-for="(node,index) in item.children" :key="index" :item="node" :parent="item">
+						</serve-item>
 					</div>
 				</div>
 			</div>
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-	const productItem = () => import('@/components/website/productItem');
+	const serveItem = () => import('@/components/website/serveItem');
 	import {
 		getServeProductList
 	} from '@/api/system'
@@ -124,7 +124,7 @@
 			}
 		},
 		components: {
-			productItem
+			serveItem
 		}
 	}
 </script>

virgo.wzfrontend/workark/src/views/website/serveDetail.vue

@@ -17,17 +17,6 @@
 					<div class="home-detail-information">
 						<div class="house-name">{{detail.name}}</div>
 						<div class="sub-title">{{detail.subtitle}}</div>
-						<div class="product-list">
-							<div class="coupon-card" v-for="(item,index) in list" :key="index"
-								@click="checkProduct(item)">
-								<div class="coupon-card-box" :class="{active:detail.id === item.id}">
-									<div>{{item.name}}</div>
-									<div class="icon-check">
-										<i class="el-icon-check"></i>
-									</div>
-								</div>
-							</div>
-						</div>
 						<div class="house-price">
 							<div class="color-danger price">
 								<span class="average alibaba">{{detail.price}}</span><span class="unit">元/次</span>
@@ -81,7 +70,7 @@
 
 <script>
 	import {
-		getServeListByQuery
+		getServeById
 	} from '@/api/serve'
 	import {
 		getCustomerServeDetail
@@ -94,7 +83,7 @@
 		data() {
 			return {
 				loading: false,
-				type: '',
+				productId: '',
 				detail: {},
 				list: [],
 				rotatingImages: [],
@@ -113,35 +102,25 @@
 		methods: {
 			init() {
 				this.loading = true;
-				this.type = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.type), 'bosshand');
-				if (!this.type) return this.loading = false;
+				this.productId = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.sign), 'bosshand');
 				this.getDetail();
 			},
 			getDetail() {
-				getServeListByQuery({
-					productLevelId: this.type,
-					state: 1
-				}).then(res => {
+				getServeById(this.productId).then(res => {
 					if (res.state) {
-						if (res.data.length === 0) return this.loading = false;
-						this.list = res.data;
-						this.initDetail(this.list.length - 1);
-					} else {
-						this.loading = false;
+						this.detail = res.data;
+						if (this.detail.rotatingImages) {
+							this.rotatingImages = JSON.parse(this.detail.rotatingImages);
+							this.initSwiper();
+						}
+						if (this.detail.detailedImage) {
+							this.detailedImage = JSON.parse(this.detail.detailedImage);
+						}
 					}
 					this.loading = false;
 				})
 			},
-			initDetail(val) {
-				this.detail = this.list[val];
-				if (this.detail.rotatingImages) {
-					this.rotatingImages = JSON.parse(this.detail.rotatingImages);
-					this.initSwiper();
-				}
-				if (this.detail.detailedImage) {
-					this.detailedImage = JSON.parse(this.detail.detailedImage);
-				}
-			},
+			initDetail(val) {},
 			initSwiper() {
 				this.$nextTick(() => {
 					this.swiper = new Swiper(".swiper-container", {
@@ -153,10 +132,6 @@
 					})
 				})
 			},
-			checkProduct(item) {
-				let index = this.list.findIndex(node => node.id === item.id);
-				this.initDetail(index);
-			},
 			payItem() {
 				if (!this.$store.getters.user.userId) {
 					let index = this.$store.getters.loginVisible;

virgo.wzfrontend/workark/src/views/website/serveList.vue

@@ -0,0 +1,73 @@
+<template>
+	<div class="serve-list" v-loading="loading">
+		<div class="skeleton-box" v-if="list.length === 0"><el-empty description="暂无商品"></el-empty></div>
+		<div class="serve-list-view" v-else>
+			<product-item v-for="(node,index) in list" :key="index" :item="node"></product-item>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		getServeListByQuery
+	} from '@/api/serve'
+	import Crypto from '@/uitls/crypto'
+	const productItem = () => import('@/components/website/productItem');
+	export default {
+		data() {
+			return {
+				loading: false,
+				list: [],
+				type: ''
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		components: {
+			productItem
+		},
+		methods: {
+			init() {
+				this.loading = true;
+				this.type = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.type), 'bosshand');
+				if (!this.type) return this.loading = false;
+				this.getDetail();
+			},
+			getDetail() {
+				getServeListByQuery({
+					productLevelId: this.type,
+					state: 1
+				}).then(res => {
+					if (res.state) this.list = res.data;
+					this.loading = false;
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.serve-list {
+		width: 1200px;
+		margin: 0 auto;
+		min-height: calc(100vh - 117px);
+		position: relative;
+
+		.skeleton-box {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.serve-list-view {
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
+</style>