瀏覽代碼

直播样式修改

zhaoxw 4 年之前
父節點
當前提交
549b766490
共有 4 個文件被更改,包括 295 次插入97 次删除
  1. 3 2
      jhim/jhimlive.vue
  2. 2 2
      jhlive/jhlive.nvue
  3. 279 82
      pagesGood/liveDetail.nvue
  4. 11 11
      pagesGood/videoList.vue

+ 3 - 2
jhim/jhimlive.vue

@@ -87,10 +87,11 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-bottom: 5px;
 }
 .jhim-message-avatar {
-  width: 24rpx;
-  height: 24rpx;
+  width: 28rpx;
+  height: 28rpx;
   margin-left: 5px;
 }
 .jhim-message-text {

+ 2 - 2
jhlive/jhlive.nvue

@@ -27,11 +27,11 @@
       </view>
     </view>
 
-    <view class="bottom-right-box">
+    <!-- <view class="bottom-right-box">
       <view class="bottom-right-box-btn" @click="btnLike">
         <text class="bottom-right-box-btn-text">点赞</text>
       </view>
-    </view>
+    </view> -->
 	</view>
 </template>
 

+ 279 - 82
pagesGood/liveDetail.nvue

@@ -1,46 +1,73 @@
 <template>
 	<view class="container" :style="'height: '+windowHeight+'px;'">
-    <jhlive 
-			ref="jhlive" 
-			class="jhlive"
-			:sdkAppID="sdkAppID" 
-			:secretKey="secretKey"
-			:userId="userId"
-			:roomId="roomId"
-			:isAuthor="isAuthor"
-			:linkMic="linkMic" 
-			:avatar="avatar"
-			:num="num"
-			:likes="likes"
-      :name="name" />
-    <jhimlive 
-			ref="jhimlive" 
-			class="jhimlive"
-			:sdkAppID="sdkAppID" 
-			:secretKey="secretKey"
-			:userId="userId"
-			:roomId="roomId"
-			:isAuthor="isAuthor"
-			:avatar="avatar"
-      :name="name" 
-			@onMemberCount="num=$event"/>
+		<jhlive ref="jhlive" class="jhlive" :sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
+		 :isAuthor="isAuthor" :linkMic="linkMic" :avatar="avatar" :num="num" :likes="likes" :name="name" />
+		<jhimlive ref="jhimlive" class="jhimlive" :sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
+		 :isAuthor="isAuthor" :avatar="avatar" :name="name" @onMemberCount="num=$event" />
+		 <view class="popup-open" @click="openPop()">
+			<!-- #ifdef APP-PLUS -->
+		 	<text class="nvue-iconfont">&#xe63f;</text>
+			<!-- #endif -->
+			<!-- #ifdef MP-WEIXIN -->
+			<text class="iconfont iconzhibo-shangpin"></text>
+			<!-- #endif -->
+		 </view>
+		<uni-popup ref="popup" animation type="bottom" >
+			<view class="popup-box">
+				<view @click="closePop()" class="popup-close">
+					<text class="popup-close-text">收起</text>
+				</view>
+				<scroll-view scroll-y="true" class="good-box">
+					<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
+						<view class="goods-img-box">
+							<image class="goods-img" :src="item.imgPath" mode="aspectFill"></image>
+						</view>
+						<view class="goods-info">
+							<view>
+							  <text class="goods-name">{{item.productName}}</text>
+							</view>
+							<text class="goods-sales">{{item.sellCount}}人付款</text>
+							<text class="price">原价:{{item.originalPrice}}</text>
+							<view class="goods-number-bottom">
+								<view class="goods-number">
+									<!-- <text class="goods-number-left">惊爆价:</text> -->
+									<text class="goods-icon">¥</text>
+									<text class="goods-spec">{{item.bizPrice}}</text>
+								</view>
+								<view class="more-button">
+									<!-- #ifdef APP-PLUS -->
+									<text class="nvue-iconfont more-button-iconfont">&#xe623;</text>
+									<!-- #endif -->
+									<!-- #ifdef MP-WEIXIN -->
+									<text class="iconfont more-button-iconfont"></text>
+									<!-- #endif -->
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-  import jhlive from "@/jhlive/jhlive";
-  import jhimlive from "@/jhim/jhimlive";
+	import jhlive from "@/jhlive/jhlive";
+	import jhimlive from "@/jhim/jhimlive";
 	const NET = require('@/utils/request')
 	const API = require('@/config/api')
-	
+
 	export default {
-		components: { jhlive, jhimlive },
+		components: {
+			jhlive,
+			jhimlive
+		},
 		data() {
 			return {
-        isAuthor: false,
-        linkMic: false,
-        sdkAppID:API.sdkAppID,
-			  secretKey:API.secretKey,
+				isAuthor: false,
+				linkMic: false,
+				sdkAppID: API.sdkAppID,
+				secretKey: API.secretKey,
 				windowWidth: 0,
 				windowHeight: 0,
 				userId: '',
@@ -48,77 +75,247 @@
 				liveId: '',
 				num: 0,
 				likes: 0,
-				name:"",
-				avatar:"../static/images/loginLogo.png",
-        userData: {},
-        enabledIM: false,
+				name: "",
+				avatar: "../static/images/loginLogo.png",
+				userData: {},
+				enabledIM: false,
 				imReady: false,
-        imMsgs: [],
+				imMsgs: [],
+				videoUrl: '',
+				goodsList: [],
 			}
 		},
+		beforeCreate() {
+			
+			uni.showToast({
+				title: '222',
+				duration: 2000
+			})
+			const domModule = uni.requireNativePlugin('dom')
+			console.log(111111111111111111,domModule)
+			domModule.addRule('fontFace', {
+				'fontFamily': "nvueIconfont",
+				'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
+			});
+			console.log(222222222222222)
+		},
 		onLoad(options) {
-      this.roomId = options.roomId;
-      this.liveId = options.liveId
-      this.userData = uni.getStorageSync("userData");
-      this.userId = this.userData.userId;
+			this.roomId = options.roomId;
+			this.liveId = options.liveId
+			this.userData = uni.getStorageSync("userData");
+			this.userId = this.userData.userId;
 			let info = uni.getSystemInfoSync();
 			this.windowWidth = info.windowWidth;
-      this.windowHeight = info.windowHeight;
+			this.windowHeight = info.windowHeight;
+
+			this.videoUrl = uni.getStorageSync("videoUrl").replace("http://","https://")
+			NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
+				this.goodsList = res.data
+			}).catch(res => {
+				this.$refs.uTips.show({
+					title: '获取商品列表失败',
+					type: 'warning',
+				})
+			})
 		},
 		onReady() {
 			this.isAuthor = false;
-      // this.linkMic = true;
-      // this.userId = "123";
-      // this.name = 'test';
-      // this.roomId = '1';
-      this.$nextTick(() => this.enterRoom());
-      return;
+			// this.linkMic = true;
+			// this.userId = "123";
+			// this.name = 'test';
+			// this.roomId = '1';
+			this.$nextTick(() => this.enterRoom());
+			return;
 
-      this.init();	
-    },
-    onUnload() {
-      this.exitRoom();
-    },
+			this.init();
+		},
+		onUnload() {
+			this.exitRoom();
+		},
 		methods: {
 			init() {
-        this.avatar = uni.getStorageSync("liveImgUrl");
-        this.name = uni.getStorageSync("liveName");
-        this.$nextTick(() => this.enterRoom());
-      },
+				this.avatar = uni.getStorageSync("liveImgUrl");
+				this.name = uni.getStorageSync("liveName");
+				this.$nextTick(() => this.enterRoom());
+			},
 			enterRoom() {
-        this.$refs.jhimlive&&this.$refs.jhimlive.enterRoom();
-				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
+				this.$refs.jhimlive && this.$refs.jhimlive.enterRoom();
+				this.$refs.jhlive && this.$refs.jhlive.enterRoom();
 			},
 			exitRoom() {
-        this.$refs.jhimlive&&this.$refs.jhimlive.exitRoom();
-        this.$refs.jhlive&&this.$refs.jhlive.exitRoom();
+				this.$refs.jhimlive && this.$refs.jhimlive.exitRoom();
+				this.$refs.jhlive && this.$refs.jhlive.exitRoom();
 			},
-			handleShop(msg) {			
-			}
+			handleShop(msg) {},
+			openPop() {
+				this.$refs.popup.open()
+			},
+			closePop() {
+				this.$refs.popup.close()
+			},
+			goToGoodDetails(item) {
+				uni.navigateTo({
+					url: '/pagesGood/goodDetails?goodId=' + item.productId
+				});
+			},
+			
 		},
 	}
 </script>
 
-<style lang="less" scoped>
-	
-  .container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 750rpx;
-}
+<style>
+	.nvue-iconfont {
+	  font-family: "nvueIconfont";
+	  font-size: 16px;
+	  font-style: normal;
+	  -webkit-font-smoothing: antialiased;
+	  -moz-osx-font-smoothing: grayscale;
+	}
+</style>
 
-.jhlive {
-  width: 750rpx;
-  flex: 1;
-}
+<style lang="less" scoped>
+	.container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		width: 750rpx;
+	}
 
-.jhimlive {
-  width: 400rpx;
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-}
+	.jhlive {
+		width: 750rpx;
+		flex: 1;
+	}
 
+	.jhimlive {
+		width: 400rpx;
+		position: absolute;
+		bottom: 10px;
+		left: 10px;
+	}
+	.popup-open {
+		width: 50px;
+		height: 50px;
+		position: fixed;
+		bottom: 15px;
+		right: 15px;
+		background-color: #52A63A;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 50px;
+	}
+	.iconzhibo-shangpin {
+		color: #FFFFFF;
+		font-size: 34px;
+	}
+	.popup-box {
+		background-color: #FFFFFF;
+		width: 750rpx;
+		height: 265px;
+		// border-radius: 10px 10px 0 0;
+		border-top-left-radius:10px;
+		border-top-right-radius: 10px;
+	}
+	.popup-close {
+		padding: 10px;
+		line-height: 16px;
+	}
+	.popup-close-text{
+		color: #52A63A;
+		font-size: 15px;
+		font-family: PingFang SC;
+	}
+	.good-box {
+		width: 750rpx;
+		height: 230px;
+		padding: 0 0 10px 0;
+		overflow: visible;
+	}
+	.goods-row:first-child {
+		margin-top: 12px;
+	}
+		
+	.goods-row {
+		width: 700rpx;
+		height: 104px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		background-color: #FFFFFF;
+		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+		border-radius: 5px;
+		margin: 0 15px 10px 15px;
+	}
+	.goods-img-box {
+		margin-right: 15px;
+	}
+	.goods-img {
+		width: 104px;
+		height: 104px;
+		object-fit: cover;
+	}
+	
+	.goods-info {
+		flex: 1;
+		padding-top: 10px;
+	}
+	.goods-name {
+		line-height: 15px;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		word-wrap: break-word;
+		text-overflow: ellipsis;
+		font-size: 15px;
+		font-family: PingFang SC;
+		color: #333333;
+	}	
+	.goods-sales {
+		font-size: 12px;
+		font-family: PingFang SC;
+		color: #666666;
+		line-height: 15px;
+		margin: 8px 0 8px 0;
+	}
+	.price {
+		font-size: 12px;
+		text-decoration: line-through;
+		color: #A67954;
+	}
+	.goods-number-bottom {
+		display: flex;
+		flex-direction: row;
+	}
+	.goods-number {
+		display: flex;
+		flex-direction: row;
+		white-space: nowrap;
+		line-height: 24px;
+	}
+	.goods-number-left {
+		font-size: 12px;
+		color: #666666;
+	}	
+	.goods-icon {
+		font-size: 14px;
+		font-family: PingFang SC;
+		color: #52A63A;
+	}
+		
+	.goods-spec {
+		font-size: 24px;
+		font-family: PingFang SC;
+		color: #52A63A;
+	}
+	.more-button {
+		width: 24px;
+		height: 24px;
+		position: absolute;
+		right: 16px;
+	}
+	.more-button-iconfont {
+		font-size: 36px;
+		color: #999999;
+	}
 </style>

+ 11 - 11
pagesGood/videoList.vue

@@ -159,21 +159,21 @@
 								('videoDetail?videoId=' + item.videoId))
 						});
 					}else{
-						wx.getSetting({
-						  success(res) {
-							/*if (!res.authSetting['scope.camera']){
-							  that.show_qx=false;
-							}else*/ 
-							if (!res.authSetting['scope.record']){
-							  that.show_qx=false;
-							}else{
+						// wx.getSetting({
+						//   success(res) {
+						// 	/*if (!res.authSetting['scope.camera']){
+						// 	  that.show_qx=false;
+						// 	}else*/ 
+						// 	if (!res.authSetting['scope.record']){
+						// 	  that.show_qx=false;
+						// 	}else{
 								uni.navigateTo({
 									url: '/pagesGood/' + (that.videoType == 1 ? ('liveDetail?liveId=' + item.liveId + '&roomId=' + item.roomId) :
 										('videoDetail?videoId=' + item.videoId))
 								});
-							}
-						  }
-						})
+						// 	}
+						//   }
+						// })
 					}
 				}else{
 					uni.navigateTo({