|
@@ -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"></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"></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>
|