|
|
@@ -1,29 +1,55 @@
|
|
|
<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" :style="{fontFamily:'nvueIconfont'}"></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 class="popup-close">
|
|
|
+ <text class="popup-close-text" @click="closePop()">收起</text>
|
|
|
+ <text class="popup-close-text">绑定</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view v-if="true" scroll-y="true" class="good-box2">
|
|
|
+ <view class="goods-row2" v-for="(item, index) in goodsList" :key="index">
|
|
|
+ <view class="good-check">
|
|
|
+ <view @click="checkGoods(item)">
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <text class="iconfont good-check-iconfont" :class="item.check ? 'iconqueding' : 'iconfeigouxuan'" ></text>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <text class="nvue-iconfont good-check-iconfont" :style="{fontFamily:'nvueIconfont'}">{{item.check ? '' : ''}}</text>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ <view class="good-card2">
|
|
|
+ <view class="goods-img-box2">
|
|
|
+ <image class="goods-img2" :src="item.imgPath" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="goods-info2">
|
|
|
+ <view>
|
|
|
+ <text class="goods-name2">{{item.productName}}</text>
|
|
|
+ </view>
|
|
|
+ <text class="goods-sales2">销量：{{item.sellCount}}</text>
|
|
|
+ <text class="price2">原价:{{item.originalPrice}}</text>
|
|
|
+ <view class="goods-number2">
|
|
|
+ <text class="goods-icon2">￥</text>
|
|
|
+ <text class="goods-icon2">{{item.bizPrice}}/{{item.unit}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -32,15 +58,18 @@
|
|
|
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: true,
|
|
|
- linkMic: false,
|
|
|
- sdkAppID:API.sdkAppID,
|
|
|
- secretKey:API.secretKey,
|
|
|
+ isAuthor: true,
|
|
|
+ linkMic: false,
|
|
|
+ sdkAppID: API.sdkAppID,
|
|
|
+ secretKey: API.secretKey,
|
|
|
windowWidth: 0,
|
|
|
windowHeight: 0,
|
|
|
userId: '',
|
|
|
@@ -48,88 +77,298 @@
|
|
|
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: [],
|
|
|
+ videoUrl: '',
|
|
|
+ goodsList: [],
|
|
|
+ goodsIds:[]
|
|
|
}
|
|
|
},
|
|
|
+ beforeCreate() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '222',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ const domModule = uni.requireNativePlugin('dom')
|
|
|
+ domModule.addRule('fontFace', {
|
|
|
+ 'fontFamily': "nvueIconfont",
|
|
|
+ 'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
|
|
|
+ });
|
|
|
+ },
|
|
|
onLoad(options) {
|
|
|
this.liveId = options.liveId
|
|
|
- this.userData = uni.getStorageSync("userData");
|
|
|
- this.userId = this.userData.userId;
|
|
|
+ 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.goodsList.push({
|
|
|
+ productId: 1336146105292816384,
|
|
|
+ tenantCode: null,
|
|
|
+ imgPath: 'https: //www.qianjiadi.com:443/file/2020/12/2af4eb48-35c4-4aa7-80c9-ab7a7cb49984.jpg',
|
|
|
+ productName: '测试拍卖商品zxw111',
|
|
|
+ sellCount: 0,
|
|
|
+ owner: 1,
|
|
|
+ productType: 2,
|
|
|
+ originalPrice: 1.00,
|
|
|
+ bizPrice: 0.01,
|
|
|
+ unit: '个'
|
|
|
+ },{
|
|
|
+ productId: 1336146105292816386,
|
|
|
+ tenantCode: null,
|
|
|
+ imgPath: 'https: //www.qianjiadi.com:443/file/2020/12/2af4eb48-35c4-4aa7-80c9-ab7a7cb49984.jpg',
|
|
|
+ productName: '测试拍卖商品zxw222',
|
|
|
+ sellCount: 0,
|
|
|
+ owner: 1,
|
|
|
+ productType: 2,
|
|
|
+ originalPrice: 1.00,
|
|
|
+ bizPrice: 0.01,
|
|
|
+ unit: '个'
|
|
|
+ })
|
|
|
+ this.goodsIds = this.goodsList.map(site => {
|
|
|
+ return site.productId
|
|
|
+ }).join(',')
|
|
|
+ this.goodsList.forEach(site => {
|
|
|
+ site.check = this.goodsIds.indexOf(site.productId) != -1
|
|
|
+ })
|
|
|
},
|
|
|
onReady() {
|
|
|
- // this.isAuthor = false;
|
|
|
- // this.linkMic = true;
|
|
|
- // this.userId = "123";
|
|
|
- // this.name = 'test';
|
|
|
- // this.roomId = '1';
|
|
|
- // this.$nextTick(() => this.enterRoom());
|
|
|
- // return;
|
|
|
+ // this.isAuthor = false;
|
|
|
+ // this.linkMic = true;
|
|
|
+ // this.userId = "123";
|
|
|
+ // this.name = 'test';
|
|
|
+ // this.roomId = '1';
|
|
|
+ // this.$nextTick(() => this.enterRoom());
|
|
|
+ // return;
|
|
|
|
|
|
- this.init();
|
|
|
+ this.init();
|
|
|
},
|
|
|
onUnload() {
|
|
|
- this.exitRoom();
|
|
|
+ this.exitRoom();
|
|
|
},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
- NET.request(API.startStream+2, 'GET').then(res => {
|
|
|
- this.avatar = res.data.imgUrl;
|
|
|
- this.name = res.data.liveName;
|
|
|
- this.roomId = Number(res.data.roomId);
|
|
|
- this.$nextTick(() => this.enterRoom());
|
|
|
- }).catch(res => {
|
|
|
- uni.showToast({
|
|
|
- title: error.data.msg,
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
+ init() {
|
|
|
+ NET.request(API.startStream + 2, 'GET').then(res => {
|
|
|
+ this.avatar = res.data.imgUrl;
|
|
|
+ this.name = res.data.liveName;
|
|
|
+ this.roomId = Number(res.data.roomId);
|
|
|
+ this.$nextTick(() => this.enterRoom());
|
|
|
+ }).catch(res => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error.data.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
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();
|
|
|
-
|
|
|
- NET.request(API.creatLive, {
|
|
|
- liveId: this.liveId,
|
|
|
- liveStatus: 2
|
|
|
- }, 'GET');
|
|
|
+ this.$refs.jhimlive && this.$refs.jhimlive.exitRoom();
|
|
|
+ this.$refs.jhlive && this.$refs.jhlive.exitRoom();
|
|
|
+
|
|
|
+ NET.request(API.creatLive, {
|
|
|
+ liveId: this.liveId,
|
|
|
+ liveStatus: 2
|
|
|
+ }, 'GET');
|
|
|
+ },
|
|
|
+ handleShop(msg) {},
|
|
|
+ openPop() {
|
|
|
+ this.$refs.popup.open()
|
|
|
},
|
|
|
- handleShop(msg) {
|
|
|
+ closePop() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ // 勾选商品
|
|
|
+ checkGoods(site) {
|
|
|
+ site.check = !site.check
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style>
|
|
|
+ .nvue-iconfont {
|
|
|
+ font-family: "nvueIconfont";
|
|
|
+ font-size: 16px;
|
|
|
+ font-style: normal;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
-.container {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: stretch;
|
|
|
- width: 750rpx;
|
|
|
-}
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
|
|
|
-.jhlive {
|
|
|
- width: 750rpx;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
+ .jhlive {
|
|
|
+ width: 750rpx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
|
|
|
-.jhimlive {
|
|
|
- width: 400rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- left: 10px;
|
|
|
- // background-color: blue;
|
|
|
-}
|
|
|
+ .jhimlive {
|
|
|
+ width: 400rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 10px;
|
|
|
+ // background-color: blue;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .popup-close-text{
|
|
|
+ color: #52A63A;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ }
|
|
|
+ // 商户端直播样式，暂时在用户端里调试
|
|
|
+ .good-check {
|
|
|
+ width: 30px;
|
|
|
+ height: 104px;
|
|
|
+ line-height: 104px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .good-check-iconfont {
|
|
|
+ font-size: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #51A539;
|
|
|
+ line-height: 104px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-box2 {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 230px;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-row2:first-child {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-row2 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .good-card2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ }
|
|
|
+ .goods-img-box2 {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-img2 {
|
|
|
+ width: 104px;
|
|
|
+ height: 104px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info2 {
|
|
|
+ width: 180px;
|
|
|
+ flex: 1;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-name2 {
|
|
|
+ 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-sales2 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 15px;
|
|
|
+ margin: 8px 0 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price2 {
|
|
|
+ font-size: 12px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #A67954;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-number-bottom2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-number2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-number-left2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-icon2 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #52A63A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-spec2 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #52A63A;
|
|
|
+ }
|
|
|
</style>
|
zhaoxw