From 4e0e928850c1d23a213033686182c792c59f8b15 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Mon, 7 Sep 2020 00:24:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/live.js                    |  17 ++
 components/ShoproLiveCard.vue  | 306 +++++++++++++++++++++++++++++++++
 manifest.json                  | 218 ++++++++++++-----------
 pages.json                     |   8 +-
 pages/home/components/Live.vue | 255 +++++++++++++++++++++++++++
 pages/home/index.vue           |  13 +-
 6 files changed, 705 insertions(+), 112 deletions(-)
 create mode 100644 api/live.js
 create mode 100644 components/ShoproLiveCard.vue
 create mode 100644 pages/home/components/Live.vue

diff --git a/api/live.js b/api/live.js
new file mode 100644
index 0000000..33c0d81
--- /dev/null
+++ b/api/live.js
@@ -0,0 +1,17 @@
+
+
+import request from "@/utils/request";
+
+/**
+ * 查询所有直播间
+ */
+export function yxWechatLive(data) {
+    return request.get("/yxWechatLive", data, { login: true });
+}
+
+/**
+ * 获取直播回放
+ */
+export function getLiveReplay(id, data) {
+    return request.get("/yxWechatLive/getLiveReplay/" + id, data, { login: false });
+}
diff --git a/components/ShoproLiveCard.vue b/components/ShoproLiveCard.vue
new file mode 100644
index 0000000..25b5b1d
--- /dev/null
+++ b/components/ShoproLiveCard.vue
@@ -0,0 +1,306 @@
+<template>
+	<view class="sp-live-card" :style="{ width: wh + 'rpx' }">
+		<view class="live-content" @tap="goRoom" :style="{ width: wh + 'rpx' }">
+			<image class="item-cover" :src="detail.share_img" mode="aspectFill"></image>
+			<view class="item-status">
+				<image class="status-img" :src="liveStatus[detail.live_status].img" mode=""></image>
+				<text class="status-text">{{ liveStatus[detail.live_status].title }}</text>
+			</view>
+			<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</view>
+			<!-- 	<image v-if="detail.live_status == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif" mode=""></image> -->
+		</view>
+		<view class="live-bottom" :style="{ width: wh + 'rpx' }">
+			<view class="live-info">
+				<view class="info-box">
+					<!-- 	<image class="info-avatar" :src="detail.anchor_img" mode=""></image> -->
+					<view class="info-name">{{ detail.anchor_name }}</view>
+				</view>
+				<!-- 	<text class="views">15W观看</text> -->
+			</view>
+			<slot name="liveGoods">
+				<view class="live-goods" v-if="detail.goods.length">
+					<view class="live-goods__item" v-for="(goods, index) in detail.goods" :key="goods.id"
+						v-if="index < 3">
+						<image class="live-goods__img" :src="goods.cover_img" mode=""></image>
+						<view class="live-goods__price" v-if="index < 2">￥{{ goods.price }}</view>
+						<view class="live-goods__mark" v-else>
+							<text>{{ detail.goods.length }}+</text>
+						</view>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	let HAS_LIVE = false
+	// #ifdef MP-WEIXIN
+	HAS_LIVE = true
+	let livePlayer = null;
+	if (HAS_LIVE) {
+		livePlayer = requirePlugin('live-player-plugin');
+	}
+	//  #endif
+	let timer = null;
+	export default {
+		name: 'shoproLiveCard',
+		components: {},
+		data() {
+			return {
+				liveStatus: {
+					'101': {
+						img: 'http://shopro.7wpp.com/imgs/live/live.png',
+						title: '直播中'
+					},
+					'102': {
+						img: 'http://shopro.7wpp.com/imgs/live/prevue.png',
+						title: '未开始'
+					},
+					'103': {
+						img: 'http://shopro.7wpp.com/imgs/live/playback.png',
+						title: '已结束'
+					},
+					'104': {
+						img: 'http://shopro.7wpp.com/imgs/live/104.png',
+						title: '禁播'
+					},
+					'105': {
+						img: 'http://shopro.7wpp.com/imgs/live/105.png',
+						title: '暂停中'
+					},
+					'106': {
+						img: 'http://shopro.7wpp.com/imgs/live/106.png',
+						title: '异常'
+					},
+					'107': {
+						img: 'http://shopro.7wpp.com/imgs/live/past.png',
+						title: '已过期'
+					}
+				}
+			};
+		},
+		props: {
+			detail: {
+				type: Object,
+				default: null
+			},
+			wh: {
+				type: Number,
+				default: 345
+			}
+		},
+
+		computed: {},
+		created() {
+			this.getLiveStatus();
+		},
+		mounted() {
+			let that = this;
+			timer = setInterval(() => {
+				that.getLiveStatus();
+			}, 60000);
+		},
+		beforeDestroy() {
+			timer = null;
+		},
+		methods: {
+			goRoom() {
+				let that = this;
+				wx.navigateTo({
+					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.room_id}`
+				});
+			},
+			// 轮询liveStatus
+			getLiveStatus() {
+				if (HAS_LIVE) {
+					let that = this;
+					let date = '';
+					if (that.detail.live_status == 102) {
+						date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
+							'/');
+						that.liveStatus['102'].title = '预告 ' + date;
+					}
+					livePlayer
+						.getLiveStatus({
+							room_id: that.detail.room_id
+						})
+						.then(res => {
+							// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
+							that.detail.live_status = res.liveStatus;
+						})
+						.catch(err => {
+							console.log('get live status', err);
+						});
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.sp-live-card {
+		width: 344rpx;
+		box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
+		border-radius: 20rpx;
+		height: 100%;
+		overflow: auto;
+		margin-bottom: 20rpx;
+	}
+
+	.live-content {
+		position: relative;
+		width: 344rpx;
+		height: 344rpx;
+		overflow: hidden;
+
+		.item-cover {
+			background-color: #eee;
+			width: 100%;
+			height: 100%;
+			border-radius: 20rpx 20rpx 0 0;
+		}
+
+		.item-status {
+			position: absolute;
+			top: 20rpx;
+			left: 10rpx;
+			height: 40rpx;
+			background: rgba(0, 0, 0, 0.4);
+			border-radius: 20rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.status-img {
+				width: 40rpx;
+				height: 40rpx;
+			}
+
+			.status-text {
+				font-size: 22rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 1);
+				padding: 0 10rpx;
+			}
+		}
+
+		.item-title {
+			width: 345rpx;
+			position: absolute;
+			bottom: 0;
+			line-height: 60rpx;
+			padding: 0 20rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: rgba(255, 255, 255, 1);
+			background: linear-gradient(transparent, rgba(#000, 0.5));
+			padding-right: 60rpx;
+		}
+
+		.like-img {
+			position: absolute;
+			bottom: 20rpx;
+			right: 10rpx;
+			width: 60rpx;
+			height: 130rpx;
+		}
+	}
+
+	.live-bottom {
+		background-color: #fff;
+		padding: 20rpx;
+		width: 345rpx;
+
+		.live-info {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+
+			.info-box {
+				display: flex;
+				align-items: center;
+			}
+
+			.info-avatar {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				margin-right: 10rpx;
+				background: #eee;
+			}
+
+			.info-name {
+				width: 150rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(51, 51, 51, 1);
+			}
+
+			.views {
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: rgba(153, 153, 153, 1);
+			}
+		}
+
+		.live-goods {
+			display: flex;
+			align-items: center;
+			margin-top: 20rpx;
+
+			&__item {
+				position: relative;
+				width: 96rpx;
+				height: 96rpx;
+				border: 1rpx solid rgba(238, 238, 238, 1);
+				border-radius: 10rpx;
+				overflow: hidden;
+				margin-right: 8rpx;
+
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+			}
+
+			&__img {
+				background: #eee;
+				width: 100%;
+				height: 100%;
+			}
+
+			&__price {
+				position: absolute;
+				bottom: 0;
+				line-height: 40rpx;
+				width: 100%;
+				background: linear-gradient(transparent, rgba(#000, 0.5));
+				font-size: 20rpx;
+				color: #fff;
+			}
+
+			&__mark {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				margin: auto;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				background: rgba(#000, 0.3);
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+	}
+</style>
diff --git a/manifest.json b/manifest.json
index 6724313..f286e6e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,32 +1,32 @@
 {
-    "name" : "yshopmall",
-    "appid" : "__UNI__C7A519E",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : 1,
-    "transformPx" : false,
+    "name": "yshopmall",
+    "appid": "__UNI__C7A519E",
+    "description": "",
+    "versionName": "1.0.0",
+    "versionCode": 1,
+    "transformPx": false,
     /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : false,
-            "autoclose" : true,
-            "delay" : 0
+    "app-plus": {
+        "usingComponents": true,
+        "nvueCompiler": "uni-app",
+        "compilerVersion": 3,
+        "splashscreen": {
+            "alwaysShowBeforeRender": true,
+            "waiting": false,
+            "autoclose": true,
+            "delay": 0
         },
         /* 模块配置 */
-        "modules" : {
-            "OAuth" : {},
-            "Payment" : {},
-            "Share" : {}
+        "modules": {
+            "OAuth": {},
+            "Payment": {},
+            "Share": {}
         },
         /* 应用发布信息 */
-        "distribute" : {
+        "distribute": {
             /* android打包配置 */
-            "android" : {
-                "permissions" : [
+            "android": {
+                "permissions": [
                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
@@ -52,119 +52,127 @@
                 ]
             },
             /* ios打包配置 */
-            "ios" : {},
+            "ios": {},
             /* SDK配置 */
-            "sdkConfigs" : {
-                "oauth" : {
-                    "weixin" : {
-                        "appid" : "wx7c84ede33062d1e4",
-                        "appsecret" : "c47ef66d3311194da44e60387d5c1abd",
-                        "UniversalLinks" : "https://yixiang.co/app/"
+            "sdkConfigs": {
+                "oauth": {
+                    "weixin": {
+                        "appid": "wx7c84ede33062d1e4",
+                        "appsecret": "c47ef66d3311194da44e60387d5c1abd",
+                        "UniversalLinks": "https://yixiang.co/app/"
                     }
                 },
-                "payment" : {
-                    "weixin" : {
-                        "appid" : "wx7c84ede33062d1e4",
-                        "UniversalLinks" : "https://yixiang.co/app/"
+                "payment": {
+                    "weixin": {
+                        "appid": "wx7c84ede33062d1e4",
+                        "UniversalLinks": "https://yixiang.co/app/"
                     }
                 },
-                "share" : {
-                    "weixin" : {
-                        "appid" : "wx7c84ede33062d1e4",
-                        "UniversalLinks" : "https://yixiang.co/app/"
+                "share": {
+                    "weixin": {
+                        "appid": "wx7c84ede33062d1e4",
+                        "UniversalLinks": "https://yixiang.co/app/"
                     }
                 },
-                "ad" : {}
+                "ad": {}
             },
-            "splashscreen" : {
-                "ios" : {
-                    "iphone" : {
-                        "portrait-896h@3x" : "unpackage/res/splash/1242+2688.png",
-                        "portrait-896h@2x" : "unpackage/res/splash/828+1792.png",
-                        "iphonex" : "unpackage/res/splash/1125+2436.png",
-                        "retina55" : "unpackage/res/splash/1142+2208.png",
-                        "retina47" : "unpackage/res/splash/750+1334.png",
-                        "retina40" : "unpackage/res/splash/640+1136.png",
-                        "retina35" : "unpackage/res/splash/640+960.png"
+            "splashscreen": {
+                "ios": {
+                    "iphone": {
+                        "portrait-896h@3x": "unpackage/res/splash/1242+2688.png",
+                        "portrait-896h@2x": "unpackage/res/splash/828+1792.png",
+                        "iphonex": "unpackage/res/splash/1125+2436.png",
+                        "retina55": "unpackage/res/splash/1142+2208.png",
+                        "retina47": "unpackage/res/splash/750+1334.png",
+                        "retina40": "unpackage/res/splash/640+1136.png",
+                        "retina35": "unpackage/res/splash/640+960.png"
                     }
                 },
-                "android" : {
-                    "hdpi" : "unpackage/res/splash/480+762.png",
-                    "xhdpi" : "unpackage/res/splash/720+1242.png",
-                    "xxhdpi" : "unpackage/res/splash/1080+1882.png"
+                "android": {
+                    "hdpi": "unpackage/res/splash/480+762.png",
+                    "xhdpi": "unpackage/res/splash/720+1242.png",
+                    "xxhdpi": "unpackage/res/splash/1080+1882.png"
                 }
             },
-            "icons" : {
-                "android" : {
-                    "hdpi" : "unpackage/res/icons/72x72.png",
-                    "xhdpi" : "unpackage/res/icons/96x96.png",
-                    "xxhdpi" : "unpackage/res/icons/144x144.png",
-                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+            "icons": {
+                "android": {
+                    "hdpi": "unpackage/res/icons/72x72.png",
+                    "xhdpi": "unpackage/res/icons/96x96.png",
+                    "xxhdpi": "unpackage/res/icons/144x144.png",
+                    "xxxhdpi": "unpackage/res/icons/192x192.png"
                 },
-                "ios" : {
-                    "appstore" : "unpackage/res/icons/1024x1024.png",
-                    "ipad" : {
-                        "app" : "unpackage/res/icons/76x76.png",
-                        "app@2x" : "unpackage/res/icons/152x152.png",
-                        "notification" : "unpackage/res/icons/20x20.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "proapp@2x" : "unpackage/res/icons/167x167.png",
-                        "settings" : "unpackage/res/icons/29x29.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "spotlight" : "unpackage/res/icons/40x40.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                "ios": {
+                    "appstore": "unpackage/res/icons/1024x1024.png",
+                    "ipad": {
+                        "app": "unpackage/res/icons/76x76.png",
+                        "app@2x": "unpackage/res/icons/152x152.png",
+                        "notification": "unpackage/res/icons/20x20.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
+                        "proapp@2x": "unpackage/res/icons/167x167.png",
+                        "settings": "unpackage/res/icons/29x29.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
+                        "spotlight": "unpackage/res/icons/40x40.png",
+                        "spotlight@2x": "unpackage/res/icons/80x80.png"
                     },
-                    "iphone" : {
-                        "app@2x" : "unpackage/res/icons/120x120.png",
-                        "app@3x" : "unpackage/res/icons/180x180.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "notification@3x" : "unpackage/res/icons/60x60.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "settings@3x" : "unpackage/res/icons/87x87.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
-                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    "iphone": {
+                        "app@2x": "unpackage/res/icons/120x120.png",
+                        "app@3x": "unpackage/res/icons/180x180.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
+                        "notification@3x": "unpackage/res/icons/60x60.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
+                        "settings@3x": "unpackage/res/icons/87x87.png",
+                        "spotlight@2x": "unpackage/res/icons/80x80.png",
+                        "spotlight@3x": "unpackage/res/icons/120x120.png"
                     }
                 }
             }
         }
     },
-    "quickapp" : {},
-    "mp-weixin" : {
-        "appid" : "wx604d2ea4702620d2",
-        "setting" : {
-            "urlCheck" : false
+    "quickapp": {},
+    "mp-weixin": {
+        "appid": "wx604d2ea4702620d2",
+        "setting": {
+            "urlCheck": false
         },
-        "usingComponents" : true,
-        "permission" : {
-            "scope.userLocation" : {
-                "desc" : "你的位置信息将用于小程序位置接口的效果展示"
+        "usingComponents": true,
+        "permission": {
+            "scope.userLocation": {
+                "desc": "你的位置信息将用于小程序位置接口的效果展示"
+            }
+        },
+        "plugins": {
+            "live-player-plugin": {
+                // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
+                "version": "1.0.15",
+                // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
+                "provider": "wx2b03c6e691cd7370"
             }
         }
     },
-    "mp-alipay" : {
-        "usingComponents" : true
+    "mp-alipay": {
+        "usingComponents": true
     },
-    "mp-baidu" : {
-        "usingComponents" : true
+    "mp-baidu": {
+        "usingComponents": true
     },
-    "mp-toutiao" : {
-        "usingComponents" : true
+    "mp-toutiao": {
+        "usingComponents": true
     },
-    "h5" : {
-        "title" : "yshop",
-        "devServer" : {
-            "disableHostCheck" : true
+    "h5": {
+        "title": "yshop",
+        "devServer": {
+            "disableHostCheck": true
         },
-        "router" : {
-            "mode" : "history"
+        "router": {
+            "mode": "history"
         },
-        "sdkConfigs" : {
-            "maps" : {
-                "qqmap" : {
-                    "key" : ""
+        "sdkConfigs": {
+            "maps": {
+                "qqmap": {
+                    "key": ""
                 }
             }
         },
-        "domain" : "h5.yixiang.co"
+        "domain": "h5.yixiang.co"
     }
 }
diff --git a/pages.json b/pages.json
index 4743ed6..ceea9ff 100644
--- a/pages.json
+++ b/pages.json
@@ -40,9 +40,9 @@
 			"path": "pages/home/index",
 			"style": {
 				"navigationBarTitleText": "yshop商城",
-					"navigationBarTextStyle": "white",
-					// "enablePullDownRefresh": true,
-					"navigationStyle": "custom"
+				"navigationBarTextStyle": "white",
+				// "enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -411,7 +411,7 @@
 		"navigationBarTitleText": "Yshop",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
-		"navigationStyle": "default" 
+		"navigationStyle": "default"
 	},
 	"tabBar": {
 		"color": "#282828",
diff --git a/pages/home/components/Live.vue b/pages/home/components/Live.vue
new file mode 100644
index 0000000..44f354f
--- /dev/null
+++ b/pages/home/components/Live.vue
@@ -0,0 +1,255 @@
+<template>
+	<view class="live-el mx20 mb10">
+		<view class="head">
+			<text class="head-title">热门直播</text>
+			<view class="head-more" @tap="$Router.push('/pages/app/live/list')">
+				<text>更多</text>
+				<text class="cuIcon-right"></text>
+			</view>
+		</view>
+		<view class="content-one" v-if="detail.style == 1">
+			<view class="content-one__item" v-for="live in liveList" :key="live.id" @tap="goRoom(live)">
+				<image class="item-cover" :src="live.share_img" mode="widthFix"></image>
+				<view class="item-status">
+					<image class="status-img" :src="liveStatus[live.live_status].img" mode=""></image>
+					<text class="status-text">{{ liveStatus[live.live_status].title }}</text>
+				</view>
+				<view class="item-title">{{ live.name }}</view>
+				<!-- <image v-if="live.live_status == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif" mode=""></image> -->
+			</view>
+		</view>
+		<view class="content-two" v-if="detail.style == 2">
+			<view class="content-two__item" v-for="live in detail" :key="live.id">
+				<ShoproLiveCard :detail="live" :wh="320">
+					<block slot="liveGoods"><text></text></block>
+				</ShoproLiveCard>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import ShoproLiveCard from '@/components/ShoproLiveCard.vue'
+
+	let HAS_LIVE = false
+	// #ifdef MP-WEIXIN
+	HAS_LIVE = true
+	let livePlayer = null;
+	if (HAS_LIVE) {
+		livePlayer = requirePlugin('live-player-plugin');
+	}
+	//  #endif
+	import {
+		yxWechatLive,
+		getLiveReplay
+	} from '@/api/live';
+
+	let timer = null;
+	export default {
+		components: {
+			ShoproLiveCard
+		},
+		data() {
+			return {
+				liveList: [],
+				liveStatus: {
+					'101': {
+						img: 'http://shopro.7wpp.com/imgs/live/live.png',
+						title: '直播中'
+					},
+					'102': {
+						img: 'http://shopro.7wpp.com/imgs/live/prevue.png',
+						title: '未开始'
+					},
+					'103': {
+						img: 'http://shopro.7wpp.com/imgs/live/playback.png',
+						title: '已结束'
+					},
+					'104': {
+						img: 'http://shopro.7wpp.com/imgs/live/104.png',
+						title: '禁播'
+					},
+					'105': {
+						img: 'http://shopro.7wpp.com/imgs/live/105.png',
+						title: '暂停中'
+					},
+					'106': {
+						img: 'http://shopro.7wpp.com/imgs/live/106.png',
+						title: '异常'
+					},
+					'107': {
+						img: 'http://shopro.7wpp.com/imgs/live/past.png',
+						title: '已过期'
+					}
+				}
+			};
+		},
+		props: {
+			detail: Array
+		},
+		created() {
+			this.getLiveList();
+		},
+		mounted() {
+			let that = this;
+			timer = setInterval(() => {
+				that.getLiveStatus();
+			}, 60000);
+		},
+		beforeDestroy() {
+			timer = null;
+		},
+		computed: {},
+		methods: {
+			// 直播列表
+			getLiveList() {
+				let that = this;
+				yxWechatLive({
+					page: 1,
+					size: 10,
+				}).then(res => {
+					console.log(res)
+				})
+			},
+			// 轮询liveStatus
+			getLiveStatus() {
+				if (HAS_LIVE) {
+					let that = this;
+					let date = '';
+					if (that.detail.live_status == 102) {
+						date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
+							'/');
+						that.liveStatus['102'].title = '预告 ' + date;
+					}
+					livePlayer
+						.getLiveStatus({
+							room_id: that.detail.room_id
+						})
+						.then(res => {
+							// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
+							that.detail.live_status = res.liveStatus;
+						})
+						.catch(err => {
+							console.log('get live status', err);
+						});
+				}
+			},
+			goRoom(live) {
+				wx.navigateTo({
+					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.room_id}`
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.live-el {
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx 20rpx 25rpx;
+
+		.head {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&-title {
+				font-size: 32rpx;
+				font-weight: bold;
+				font-family: PingFang SC;
+				color: rgba(51, 51, 51, 1);
+			}
+
+			&-more {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: rgba(51, 51, 51, 1);
+			}
+		}
+
+		// 单个大图直播
+		.content-one {
+			.content-one__item {
+				position: relative;
+				height: 280rpx;
+				border-radius: 20rpx;
+				margin-top: 25rpx;
+				overflow: hidden;
+
+				.item-cover {
+					background-color: #eee;
+					width: 100%;
+					height: 100%;
+				}
+
+				.item-status {
+					position: absolute;
+					top: 20rpx;
+					left: 10rpx;
+					height: 40rpx;
+					background: rgba(0, 0, 0, 0.4);
+					border-radius: 20rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					.status-img {
+						width: 38rpx;
+						height: 38rpx;
+					}
+
+					.status-text {
+						font-size: 22rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: rgba(255, 255, 255, 1);
+						padding: 0 10rpx;
+					}
+				}
+
+				.item-title {
+					width: 680rpx;
+					position: absolute;
+					bottom: 0;
+					line-height: 60rpx;
+					padding: 0 20rpx;
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: rgba(255, 255, 255, 1);
+					background: linear-gradient(transparent, rgba(#000, 0.5));
+				}
+
+				.like-img {
+					position: absolute;
+					bottom: 20rpx;
+					right: 10rpx;
+					width: 60rpx;
+					height: 130rpx;
+				}
+			}
+		}
+
+		// 双图直播
+		.content-two {
+			width: 100%;
+			// -moz-column-count: 2;
+			// -webkit-column-count: 2;
+			// column-count: 2;
+			// padding-top: 20rpx;
+			display: flex;
+			flex-wrap: wrap;
+
+			&__item {
+				margin-right: 30rpx;
+				margin-top: 20rpx;
+
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 3fd373c..46e5836 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -55,7 +55,9 @@
 			<ProductsRecommended :detail="bastList"></ProductsRecommended>
 			<!-- 促销单品
 			<PromoteProduct :detail="benefit"></PromoteProduct> -->
-			
+			<!-- 直播 -->
+			<Live :detail="live"></Live>
+
 			<!-- 为您推荐 -->
 			<PromotionGood :benefit="benefit"></PromotionGood>
 		</view>
@@ -82,6 +84,7 @@
 	import HotCommodity from './components/HotCommodity';
 	import FirstNewProduct from './components/FirstNewProduct';
 	import ProductsRecommended from './components/ProductsRecommended';
+	import Live from './components/Live';
 
 	import {
 		getHomeData,
@@ -109,7 +112,8 @@
 			Groupon,
 			HotCommodity,
 			FirstNewProduct,
-			ProductsRecommended
+			ProductsRecommended,
+			Live
 		},
 		props: {},
 		data: function () {
@@ -141,6 +145,7 @@
 					bastList: []
 				},
 				likeInfo: [],
+				live: [],
 				lovely: [],
 				benefit: [],
 				couponList: [],
@@ -230,6 +235,7 @@
 				that.$set(that, 'firstList', res.data.firstList);
 				that.$set(that, 'bastList', res.data.bastList);
 				that.$set(that, 'likeInfo', res.data.likeInfo);
+				that.$set(that, 'live', res.data.live);
 				that.$set(that, 'lovely', res.data.lovely);
 				that.$set(that, 'benefit', res.data.benefit);
 				that.$set(that, 'couponList', res.data.couponList);
@@ -531,7 +537,8 @@
 			font-size: 15px;
 		}
 	}
-	.home_content_box{
+
+	.home_content_box {
 		margin-top: -10rpx;
 	}
 </style>