商家首页

common/api/shop.js

@@ -114,6 +114,11 @@ export default {
 					id: id,
 					page:page
 				});
+			},
+			getStoreImgVideoList({id}){
+				return vm.$u.post('Store/getStoreImgVideoList', {
+					id: id
+				});
 			}
         }
     }

pageC/components/merchant/image-top.vue

@@ -0,0 +1,26 @@
+<template>
+    <view class="imageTop">
+        <image :src="url"></image>
+    </view>
+</template>
+<style lang="scss" scoped>
+.imageTop{
+    width: 100%;
+    height: 500rpx;
+    margin-bottom: 20rpx;
+    >image{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+<script>
+export default {
+    name:"imageTop",
+    data(){
+        return {
+        }
+    },
+    props:['url']
+}
+</script>

pageC/components/merchant/list-item.vue

@@ -0,0 +1,28 @@
+<template>
+    <view class="listItem">
+        <video v-if="type == '2'" :src="url" :show-fullscreen-btn="true"></video>
+        <image v-else :src="url"></image>
+    </view>
+</template>
+<style lang="scss" scoped>
+.listItem{
+    width: 365rpx;
+    height: 500rpx;
+    margin-bottom: 20rpx;
+    >image,video{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+<script>
+export default {
+    name:"listItem",
+    data(){
+        return {
+
+        }
+    },
+    props:['url','type']
+}
+</script>

pageC/components/merchant/video-top.vue

@@ -0,0 +1,26 @@
+<template>
+    <view class="videoTop">
+          <video :src="url" :show-fullscreen-btn="true"></video>
+    </view>
+</template>
+<style lang="scss" scoped>
+.videoTop{
+    width: 100%;
+    height: 284rpx;
+    margin-bottom: 20rpx;
+    >video{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+<script>
+export default {
+    name:"videoTop",
+    data(){
+        return {
+        }
+    },
+    props:['url']
+}
+</script>

pageC/merchant/index.vue

@@ -38,7 +38,14 @@
 		</view>
 		<view class="main">
 			<view class="classify" v-if="cur==0">
-				111
+				<view v-for="item in indextop" :key="item.id">
+					<videoTop :url="item.url" v-if="item.type == 2"></videoTop>
+					<imageTop v-else :url="item.url"></imageTop>
+				</view>
+				<view style="display: flex;flex-wrap: wrap;">
+					<listitem :style="{'margin-left': index%2 == 1 ? '20rpx':'0'}" v-for="(item,index) in indexlist" :key="item.id" :type="item.type" :url="item.url"></listitem>
+				</view>
+				
 			</view>
 			<!-- 商品筛选排序未完成 -->
 			<view class="item" v-if="cur==1">
@@ -67,16 +74,25 @@
 </template>
 <script>
 import item from "@/components/shop/list/item"
+import videoTop from "../components/merchant/video-top"
+import imageTop from "../components/merchant/image-top"
+import listitem from "../components/merchant/list-item"
+
 export default {
 	data() {
 		return {
 			show: false,
 			cur: 0,
-			list:[]
+			list:[],
+			indexlist:[],
+			indextop:[]
 		}
 	},
 	components:{
-		item
+		item,
+		videoTop,
+		imageTop,
+		listitem
 	},
 	methods: {
 		toDetailsPage() {
@@ -87,9 +103,14 @@ export default {
 	},
 	onLoad(){
 		this.$u.api.getStoreGoodsList({id:1}).then((res)=>{
-			console.log(res.data)
+			// console.log(res.data)
 			this.list= res.data.list
 		})
+		this.$u.api.getStoreImgVideoList({id:1}).then((res)=>{
+			console.log(res.data)
+			this.indextop = [res.data[0],res.data[1]] 
+			this.indexlist = res.data.slice(2,)
+		})
 	}
 };
 </script>
@@ -155,7 +176,7 @@ export default {
 		background-color: #ffffff;
 		width: 100%;
 		margin-bottom: 20rpx;
-		height: 140rpx;
+		// height: 140rpx;
 		display: flex;
 		align-items: center;
 		padding: 20rpx 30rpx;