You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
977 lines
31 KiB
977 lines
31 KiB
<!--
|
|
版本声明：
|
|
* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
|
|
* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考借鉴
|
|
* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
|
|
* 深圳前海万联科技有限公司 @www.i36k.com
|
|
-->
|
|
<template>
|
|
<view class="wanl-live-control">
|
|
<!-- 底部菜单 -->
|
|
<view class="wanl-live-control-main">
|
|
<view class="wanl-live-control-left">
|
|
<view v-if="state == 1" class="wanl-btn" @tap="handlePopup('goods','open')">
|
|
<text class="wanl-btn-text"></text>
|
|
</view>
|
|
<view class="wanl-btn" @tap="handleLive('snapshot')">
|
|
<text class="wanl-btn-text"></text>
|
|
</view>
|
|
<view class="wanl-btn" @tap="handleLive('switch')">
|
|
<text class="wanl-btn-text"></text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-live-control-right">
|
|
<view class="wanl-live-control-right-start" v-if="state == 0" @tap="handlePopup('start','open')">
|
|
<text class="wanl-live-control-right-start-text">准备直播</text>
|
|
</view>
|
|
<view class="wanl-live-control-right-list" v-if="state == 1">
|
|
<view class="wanl-live-control-right-list-btn" @tap="handlePopup('livegoods','open')">
|
|
<view class="wanl-btn wanl-btn-transpare">
|
|
<!-- <text class="wanl-btn-text wanl-live-control-right-list-btn-text"></text> -->
|
|
<image class="wanl-btn-image" src="/static/images/live/shop.png"/>
|
|
<view class="wanl-btn-tag" v-if="goodsSelected.length > 0">
|
|
<text class="wanl-btn-tag-text">{{numFormat(goodsSelected.length)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 发送点赞 -->
|
|
<view class="wanl-live-control-right-list-btn" @tap="send('like')">
|
|
<view class="wanl-btn">
|
|
<text class="wanl-btn-text"></text>
|
|
<view class="wanl-btn-tag" v-if="like > 0">
|
|
<text class="wanl-btn-tag-text">{{numFormat(like)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 准备直播 :maskClick='false' -->
|
|
<view class="live-popup">
|
|
<uni-popup ref="start" type="bottom">
|
|
<view class="wanl-live-popup">
|
|
<view class="wanl-live-popup-title">
|
|
<text class="wanl-live-popup-title-text">准备直播</text>
|
|
<text class="wanl-live-popup-title-close-text" @tap="handlePopup('start','close')"></text>
|
|
</view>
|
|
<scroll-view :show-scrollbar="false" scroll-y="true" class="wanl-live-popup-list" :style="{height: screenHeight * 0.72 +'px'}">
|
|
<view class="wanl-start-list">
|
|
<!-- 直播店铺 -->
|
|
<view class="wanl-start-list-item">
|
|
<view class="wanl-start-list-item-name">
|
|
<view class="wanl-start-list-item-name-left">
|
|
<text class="wanl-start-list-item-name-left-icon-text"></text>
|
|
<text class="wanl-start-list-item-name-text">店铺</text>
|
|
</view>
|
|
<view class="wanl-start-list-item-name-right" v-if="shopSelected" @tap="handlePopup('shop','open')">
|
|
<text class="wanl-start-list-item-name-right-text">重选</text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-start-list-item-content">
|
|
<view class="wanl-live-shop-list-item" v-if="shopSelected" @tap="handlePopup('shop','open')">
|
|
<view class="wanl-live-shop-list-item-img">
|
|
<image :src="stcOss(shopSelected.avatar)" class="wanl-live-shop-list-item-image"></image>
|
|
</view>
|
|
<view class="wanl-live-shop-list-title">
|
|
<text class="wanl-live-shop-list-item-title-text">{{shopSelected.shopname}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="wanl-start-list-item-content-select" @tap="handlePopup('shop','open')">
|
|
<text class="wanl-start-list-item-content-select-text"></text>
|
|
<text class="wanl-start-list-item-content-select-text">选择直播店铺</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 直播商品 -->
|
|
<view class="wanl-start-list-item">
|
|
<view class="wanl-start-list-item-name">
|
|
<view class="wanl-start-list-item-name-left">
|
|
<text class="wanl-start-list-item-name-left-icon-text"></text>
|
|
<text class="wanl-start-list-item-name-text">带货</text>
|
|
</view>
|
|
<view class="wanl-start-list-item-name-right" v-if="goodsSelected.length > 0" @tap="handlePopup('goods','open')">
|
|
<text class="wanl-start-list-item-name-right-text">重选</text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-start-list-item-content">
|
|
<view class="wanl-start-list-item-goods">
|
|
<view v-if="goodsSelected.length == 0" class="wanl-start-list-item-content-select" @tap="handlePopup('goods','open')">
|
|
<text class="wanl-start-list-item-content-select-text"></text>
|
|
<text class="wanl-start-list-item-content-select-text">选择带货商品</text>
|
|
</view>
|
|
<view class="wanl-start-list-item-goods-item" v-for="(item, index) in goodsSelected" :key="item.id">
|
|
<view class="wanl-start-list-item-goods-item-img">
|
|
<image class="wanl-start-list-item-goods-item-img-image" :src="stcOss(item.image)"></image>
|
|
</view>
|
|
<view class="wanl-start-list-item-goods-item-title">
|
|
<text class="wanl-start-list-item-goods-item-title-text">{{formatEllipsis(item.title, 28)}}</text>
|
|
</view>
|
|
<view class="wanl-live-operation-button" @tap="handleGoodsSelected(item.id)">
|
|
<text class="wanl-live-operation-button-text"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 直播封面 -->
|
|
<view class="wanl-start-list-item">
|
|
<view class="wanl-start-list-item-name">
|
|
<view class="wanl-start-list-item-name-left">
|
|
<text class="wanl-start-list-item-name-left-icon-text"></text>
|
|
<text class="wanl-start-list-item-name-text">直播封面</text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-start-list-item-content">
|
|
<view class="wanl-start-list-item-content-img">
|
|
<image class="wanl-start-list-item-content-image" :src="stcOss(start.image)" mode="aspectFill" @tap="uploadCover()"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 直播主题 -->
|
|
<view class="wanl-start-list-item">
|
|
<view class="wanl-start-list-item-name">
|
|
<view class="wanl-start-list-item-name-left">
|
|
<text class="wanl-start-list-item-name-left-icon-text"></text>
|
|
<text class="wanl-start-list-item-name-text">直播主题</text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-start-list-item-content">
|
|
<textarea
|
|
class="wanl-start-list-item-content-textarea"
|
|
placeholder-class="wanl-start-list-item-content-placeholder"
|
|
:adjust-position="false"
|
|
confirm-type="search"
|
|
:style="{width: screenWidth - 18 + 'px'}"
|
|
v-model="start.content" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="wanl-live-popup-start wanl-live-control-right-start" :style="{bottom: statusFootHeight + 9 + 'px'}" @tap="goLive()">
|
|
<text class="wanl-live-control-right-start-text">马上开启直播之旅</text>
|
|
</view>
|
|
<!-- 多终端兼容性 -->
|
|
<view :style="{height: statusFootHeight + 'px'}"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="live-popup">
|
|
<uni-popup ref="goods" type="bottom">
|
|
<view class="wanl-live-popup">
|
|
<view class="wanl-live-popup-title">
|
|
<text class="wanl-live-popup-title-text">店铺商品</text>
|
|
<text class="wanl-live-popup-title-close-text" @tap="handlePopup('goods','close')"></text>
|
|
</view>
|
|
<!-- 搜索条件-->
|
|
<view class="wanl-live-search">
|
|
<picker mode="selector" class="wanl-live-search-picker" :range='shopSelected.categoryList' range-key="name" selector-type="select" @change="searchPicker">
|
|
<text class="wanl-live-search-picker-text">{{search.category_name !== null ? search.category_name : '全部类目'}}</text>
|
|
<text class="wanl-live-search-picker-icon"></text>
|
|
</picker>
|
|
<input
|
|
class="wanl-live-search-input"
|
|
type="text"
|
|
:adjust-position="false"
|
|
confirm-type="search"
|
|
v-model="search.q"
|
|
>
|
|
<view class="wanl-live-search-input-icon" @tap="searchGoods()">
|
|
<text class="wanl-live-search-input-icon-text"></text>
|
|
</view>
|
|
</view>
|
|
<view class="wanl-live-search-title">
|
|
<!-- <text class="wanl-live-search-title-icon-text"></text> -->
|
|
<text class="wanl-live-search-title-text">- 已选择 {{goodsSelected.length}} 件 -</text>
|
|
</view>
|
|
<scroll-view :show-scrollbar="false" scroll-y="true" class="wanl-live-popup-list" :style="{height: screenHeight * 0.57 +'px'}">
|
|
<view class="wanl-live-goods-list-item" :class="[item.choose ? 'wanl-live-goods-list-item-active':'']" v-for="(item, index) in goodsData" :key="item.id" @tap="handleGoods(index)">
|
|
<view class="wanl-live-goods-list-item-img">
|
|
<image :src="stcOss(item.image)" class="wanl-live-goods-list-item-image"></image>
|
|
</view>
|
|
<view class="wanl-live-goods-list-item-subject">
|
|
<view class="wanl-live-goods-list-item-subject-title">
|
|
<text class="wanl-live-goods-list-item-subject-title-text">{{formatEllipsis(item.title, 28)}}</text>
|
|
</view>
|
|
<view class="wanl-live-goods-list-item-subject-operation">
|
|
<view class="wanl-live-goods-list-item-subject-operation-price">
|
|
<text class="wanl-live-goods-list-item-subject-operation-price-text">￥{{item.price}}</text>
|
|
</view>
|
|
<view class="wanl-live-operation-button">
|
|
<text v-if="item.choose" class="wanl-live-operation-button-text"></text>
|
|
<text v-else class="wanl-live-operation-button-text"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="goodsData.length == 0" class="wanl-live-goods-list-empty">
|
|
<text class="wanl-live-goods-list-empty-icon"></text>
|
|
<text class="wanl-live-goods-list-empty-text">还未搜索 或 还没有找到商品</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="wanl-live-popup-start wanl-live-control-right-start" :style="{bottom: statusFootHeight + 9 + 'px'}" @tap="handlePopup('goods','close')">
|
|
<text class="wanl-live-control-right-start-text">完成</text>
|
|
</view>
|
|
<!-- 多终端兼容性 -->
|
|
<view :style="{height: statusFootHeight + 'px'}"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<!-- 直播购物袋 -->
|
|
<view class="live-popup">
|
|
<uni-popup ref="livegoods" type="bottom">
|
|
<view class="wanl-live-popup">
|
|
<view class="wanl-live-popup-title">
|
|
<text class="wanl-live-popup-title-text">直播购物袋</text>
|
|
<text class="wanl-live-popup-title-close-text" @tap="handlePopup('livegoods','close')"></text>
|
|
</view>
|
|
<scroll-view :show-scrollbar="false" scroll-y="true" class="wanl-live-popup-list" :style="{height: screenHeight * 0.6 +'px'}">
|
|
<view class="wanl-live-goods-list-item" v-for="(item, index) in goodsSelected" :key="item.id">
|
|
<view class="wanl-live-goods-list-item-img">
|
|
<image :src="stcOss(item.image)" class="wanl-live-goods-list-item-image"></image>
|
|
</view>
|
|
<view class="wanl-list-tag" :class="['tagbg_' + (index + 1)]">
|
|
<text class="wanl-list-tag-text">{{index + 1}}</text>
|
|
</view>
|
|
<view class="wanl-live-goods-list-item-subject">
|
|
<view class="wanl-live-goods-list-item-subject-title">
|
|
<text class="wanl-live-goods-list-item-subject-title-text">{{formatEllipsis(item.title, 28)}}</text>
|
|
</view>
|
|
<view class="wanl-live-goods-list-item-subject-operation">
|
|
<view class="wanl-live-goods-list-item-subject-operation-price">
|
|
<text class="wanl-live-goods-list-item-subject-operation-price-text">￥{{item.price}}</text>
|
|
</view>
|
|
<view class="wanl-live-operation-button" @tap="handleGoodsSelected(item.id)">
|
|
<text class="wanl-live-operation-button-text"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="wanl-live-popup-start wanl-live-control-right-start" :style="{bottom: statusFootHeight + 9 + 'px'}" @tap="handlePopup('livegoods','close')">
|
|
<text class="wanl-live-control-right-start-text">完成</text>
|
|
</view>
|
|
<!-- 多终端兼容性 -->
|
|
<view :style="{height: statusFootHeight + 'px'}"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
<!-- 店铺列表 -->
|
|
<view class="live-popup">
|
|
<uni-popup ref="shop" type="bottom">
|
|
<view class="wanl-live-popup">
|
|
<view class="wanl-live-popup-title">
|
|
<text class="wanl-live-popup-title-text">店铺列表</text>
|
|
<text class="wanl-live-popup-title-close-text" @tap="handlePopup('shop','close')"></text>
|
|
</view>
|
|
<scroll-view :show-scrollbar="false" scroll-y="true" class="wanl-live-popup-list" :style="{height: screenHeight * 0.6 +'px'}">
|
|
<view class="wanl-live-shop-list-item" :class="[item.choose ? 'wanl-live-shop-list-item-active':'']" v-for="(item, index) in shopList" :key="item.id" @tap="handleShop(index)">
|
|
<view class="wanl-live-shop-list-item-img">
|
|
<image :src="stcOss(item.avatar)" class="wanl-live-shop-list-item-image"></image>
|
|
</view>
|
|
<view class="wanl-live-shop-list-item-title">
|
|
<text class="wanl-live-shop-list-item-title-text">{{item.shopname}}</text>
|
|
</view>
|
|
<view class="wanl-live-operation-button wanl-live-shop-list-item-button">
|
|
<text v-if="item.choose" class="wanl-live-operation-button-text"></text>
|
|
<text v-else class="wanl-live-operation-button-text"></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="shopList.length == 0" class="wanl-live-goods-list-empty">
|
|
<text class="wanl-live-goods-list-empty-icon"></text>
|
|
<text class="wanl-live-goods-list-empty-text">没有直播权限或还未创建店铺</text>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 多终端兼容性 -->
|
|
<view :style="{height: statusFootHeight + 'px'}"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "wanlLiveControl",
|
|
props: {
|
|
screenHeight: {
|
|
default: 0
|
|
},
|
|
screenWidth: {
|
|
default: 0
|
|
},
|
|
statusFootHeight: {
|
|
default: 0
|
|
},
|
|
liveId: {
|
|
default: 0
|
|
},
|
|
like: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
state: {
|
|
default: 0
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
// #ifdef APP-NVUE
|
|
var domModule = weex.requireModule('dom');
|
|
domModule.addRule('fontFace', {
|
|
fontFamily: 'iconfont',
|
|
src: "url('/static/style/iconfont.ttf')"
|
|
});
|
|
// #endif
|
|
},
|
|
data() {
|
|
return {
|
|
search: {
|
|
q: null,
|
|
shop_category_id: null,
|
|
category_name: null
|
|
},
|
|
start: {
|
|
content: '哇~直播间上新啦~',
|
|
image: null,
|
|
goods_ids: null
|
|
},
|
|
message: null,
|
|
shopList: [],
|
|
shopSelected: {
|
|
id: null,
|
|
categoryList: []
|
|
},
|
|
goodsData: [],
|
|
goodsSelected: []
|
|
};
|
|
},
|
|
methods: {
|
|
// 开始直播
|
|
goLive(){
|
|
if (!this.shopSelected.id) {
|
|
uni.showToast({title: '请选择直播店铺', icon: 'error'});
|
|
this.handlePopup('shop','open');
|
|
}else if(!this.start.image){
|
|
uni.showToast({title: '直播封面不能为空', icon: 'error'});
|
|
}else if(this.goodsSelected.length < 2){
|
|
uni.showToast({title: '商品至少选择2件', icon: 'error'});
|
|
this.handlePopup('goods','open');
|
|
}else if(!this.start.content){
|
|
uni.showToast({title: '直播标题不能为空', icon: 'error'});
|
|
}else{
|
|
this.start.goods_ids = this.goodsSelected.map(item => { return item.id });
|
|
this.handleLive('start', this.start);
|
|
}
|
|
},
|
|
// 操作弹出框
|
|
async handlePopup(name, method) {
|
|
// 关闭商品列表同步云端
|
|
if(name == 'goods' && method == 'close' && this.state == 1){
|
|
if(this.goodsSelected.length < 2){
|
|
uni.showToast({title: '商品至少选择2件', icon: 'error'});
|
|
}else{
|
|
await uni.request({
|
|
url: '/wanlshop/live/cloud',
|
|
data: {
|
|
id: this.liveId,
|
|
goods_ids: this.goodsSelected.map(item => { return item.id })
|
|
}
|
|
});
|
|
this.$refs.goods.close();
|
|
}
|
|
// 请选择直播店铺
|
|
}else if(name == 'goods' && method == 'open' && this.state == 0){
|
|
if (!this.shopSelected.id) {
|
|
uni.showToast({title: '请选择直播店铺', icon: 'error'});
|
|
this.handlePopup('shop','open');
|
|
}else{
|
|
this.$refs.goods.open();
|
|
}
|
|
// 检查直播权限获取店铺列表、商家类目 ------------
|
|
}else if(name == 'start' && method == 'open'){
|
|
await uni.request({
|
|
url: '/wanlshop/live/getIsLive',
|
|
// 1.1.8升级
|
|
success: res => {
|
|
if(this.shopList.length == 0){
|
|
this.shopList = res.data;
|
|
}
|
|
this.$refs.start.open();
|
|
}
|
|
});
|
|
}else{
|
|
this.$refs[name][method]();
|
|
}
|
|
},
|
|
handleShop(index){
|
|
var j, len;
|
|
for(j = 0, len = this.shopList.length; j < len; j++) {
|
|
this.shopList[j].choose = j == index ? true : false;
|
|
}
|
|
this.shopSelected = this.shopList[index];
|
|
this.handleLive('user', this.shopSelected);
|
|
this.handlePopup('shop','close');
|
|
},
|
|
// 监听搜索
|
|
searchPicker(e){
|
|
var category = this.shopSelected.categoryList[e.detail.value];
|
|
this.search.shop_category_id = category.id;
|
|
this.search.category_name = category.name;
|
|
},
|
|
// 获取商品列表, 查询条件 ------------
|
|
async searchGoods(){
|
|
await uni.request({
|
|
url: '/wanlshop/live/goods',
|
|
data: {
|
|
shop_id: this.shopSelected.id,
|
|
q: this.search.q,
|
|
shop_category_id: this.search.shop_category_id
|
|
},
|
|
success: res => {
|
|
// 通过goodsSelected过滤已选择
|
|
var selectedIdArr = this.goodsSelected.map(item => { return item.id });
|
|
res.data.map(item => {
|
|
item.choose = selectedIdArr.findIndex(id => {if (item.id == id) {return true}}) !== -1 ? true : false;
|
|
});
|
|
this.goodsData = res.data;
|
|
}
|
|
});
|
|
},
|
|
handleGoods(index){
|
|
if(!this.goodsData[index].choose){
|
|
this.goodsData[index].choose = true;
|
|
// 追加到goodsSelected选择器中
|
|
this.goodsSelected = this.goodsSelected.concat(this.goodsData[index]);
|
|
}else{
|
|
this.handleGoodsSelected(this.goodsData[index].id);
|
|
}
|
|
},
|
|
// 删除选择 并取消商品列表勾选
|
|
handleGoodsSelected(id){
|
|
var selecteIndex = this.goodsSelected.findIndex(item => {if (item.id == id) {return true}});
|
|
var goodsIndex = this.goodsData.findIndex(item => {if (item.id == id) {return true}});
|
|
if(selecteIndex !== -1){
|
|
this.goodsSelected.splice(selecteIndex, 1);
|
|
}
|
|
if(selecteIndex !== -1){
|
|
this.goodsData[goodsIndex].choose = false;
|
|
}
|
|
},
|
|
// 操作直播
|
|
handleLive(method, data){
|
|
this.$emit('change', method, data);
|
|
},
|
|
// 传递给live 消息
|
|
send(type, index){
|
|
switch(type) {
|
|
// 发送消息
|
|
case 'msg':
|
|
if (this.message) {
|
|
this.$emit('send',{
|
|
type: 'msg',
|
|
message: this.message
|
|
});
|
|
this.message = '';
|
|
}
|
|
// 收起键盘
|
|
uni.hideKeyboard();
|
|
break;
|
|
// 点赞
|
|
case 'like':
|
|
this.$emit('send',{type: 'like'});
|
|
break;
|
|
}
|
|
},
|
|
// 上传封面
|
|
uploadCover() { //选择图片
|
|
uni.chooseImage({
|
|
sourceType: ["camera", "album"],
|
|
sizeType: "compressed",
|
|
count: 1,
|
|
success: res => {
|
|
uni.request({
|
|
url: '/wanlshop/common/uploadData',
|
|
success: updata => {
|
|
uni.uploadFile({
|
|
url: updata.data.uploadurl,
|
|
filePath: res.tempFilePaths[0],
|
|
formData: updata.data.storage == 'local' ? null : updata.data.multipart, // 1.0.5升级
|
|
header: { token: this.$store.state.user.token },
|
|
name: 'file',
|
|
success: data => {
|
|
this.start.image = JSON.parse(data.data).data.fullurl;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
stcOss(url) {
|
|
let oss = this.$store.state.common.appUrl.oss;
|
|
let image = '';
|
|
if (url) {
|
|
if ((/^(http|https):\/\/.+/.test(url))) {
|
|
image = url;
|
|
} else {
|
|
image = oss + url;
|
|
}
|
|
} else {
|
|
image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
|
|
}
|
|
return image;
|
|
},
|
|
formatEllipsis(str = '', limitLen = 24) {
|
|
let len = 0,
|
|
reg = /[\x00-\xff]/, //半角字符的正则匹配
|
|
strs = str.split(''),
|
|
inx = strs.findIndex(s => {
|
|
len += reg.test(s) ? 1 : 2
|
|
if (len > limitLen) return true
|
|
})
|
|
return inx === -1 ? str : str.substr(0, inx) + '...'
|
|
},
|
|
numFormat(num) {
|
|
return num > 9999 ? ((num - num % 1000) / 10000 + 'w') : num
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/static/style/wanlnvue.css';
|
|
.wanl-live-control-main{
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.wanl-live-control-left {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.wanl-btn{
|
|
margin-right: 18rpx;
|
|
}
|
|
.wanl-btn-text{
|
|
font-size: 38rpx;
|
|
}
|
|
.wanl-live-control-right{
|
|
flex: 1;
|
|
}
|
|
.wanl-live-control-right-start{
|
|
background: #f40;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 76rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
.wanl-live-control-right-start-text{
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
}
|
|
.wanl-live-control-right-list {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.wanl-live-control-right-list-btn {
|
|
position: relative;
|
|
}
|
|
/* 购物袋颜色 */
|
|
.wanl-live-control-right-list-btn-text {
|
|
color: #f40;
|
|
font-size: 56rpx;
|
|
}
|
|
/* 弹框 */
|
|
.wanl-live-popup{
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.93);
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
border-top-left-radius: 18rpx;
|
|
border-top-right-radius: 18rpx;
|
|
}
|
|
.wanl-live-popup-list{
|
|
margin-bottom: 108rpx;
|
|
}
|
|
.wanl-live-goods-list-empty {
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 600rpx;
|
|
}
|
|
.wanl-live-goods-list-empty-icon {
|
|
font-size: 100rpx;
|
|
color: #888;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.wanl-live-goods-list-empty-text {
|
|
color: #888;
|
|
font-size: 28rpx;
|
|
}
|
|
.wanl-live-popup-title {
|
|
height: 100rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.wanl-live-popup-title-text {
|
|
font-size: 32rpx;
|
|
}
|
|
.wanl-live-popup-title-close-text{
|
|
font-size: 32rpx;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.wanl-live-search {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 78rpx;
|
|
margin-bottom: 40rpx;
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
}
|
|
.wanl-live-search-picker {
|
|
flex-direction: row;
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-left: 30rpx;
|
|
padding-right: 18rpx;
|
|
margin-right: 18rpx;
|
|
border-radius: 18rpx;
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
.wanl-live-search-picker-text {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
font-size: 30rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
.wanl-live-search-picker-icon {
|
|
font-size: 32rpx;
|
|
color: rgba(0, 0, 0, 0.15);
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
.wanl-live-search-input {
|
|
flex: 1;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
.wanl-live-search-input-icon {
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
width: 80rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.wanl-live-search-input-icon-text {
|
|
font-size: 38rpx;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
.wanl-live-search-title {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.wanl-live-search-title-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
.wanl-live-search-title-icon-text {
|
|
font-size: 24rpx;
|
|
color: #f40;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
.wanl-live-popup-start {
|
|
position: absolute;
|
|
right: 18rpx;
|
|
left: 18rpx;
|
|
}
|
|
.wanl-live-operation-button{
|
|
flex-direction: row;
|
|
|
|
}
|
|
.wanl-live-operation-button-text {
|
|
font-size: 44rpx;
|
|
color: #f40;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
/* 准备直播 */
|
|
.wanl-start-list-item-name {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.wanl-start-list-item-name-left{
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.wanl-start-list-item-name-left-icon-text {
|
|
font-size: 24rpx;
|
|
color: #f40;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
}
|
|
.wanl-start-list-item-name-text {
|
|
font-size: 28rpx;
|
|
}
|
|
.wanl-start-list-item-name-right {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.wanl-start-list-item-name-right-text{
|
|
font-size: 26rpx;
|
|
color: #f40;
|
|
}
|
|
|
|
.wanl-start-list-item-content-select {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
margin-bottom: 18rpx;
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-radius: 18rpx;
|
|
}
|
|
.wanl-start-list-item-content-select-text {
|
|
font-size: 26rpx;
|
|
color: #888;
|
|
/* #ifndef APP-PLUS */
|
|
font-family: "iconfont";
|
|
/* #endif*/
|
|
font-family: iconfont;
|
|
padding-right: 8rpx;
|
|
padding-left: 8rpx;
|
|
}
|
|
|
|
|
|
.wanl-start-list-item-content-img {
|
|
position: relative;
|
|
width: 280rpx;
|
|
height: 350rpx;
|
|
padding-top: 18rpx;
|
|
padding-right: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
padding-left: 18rpx;
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-radius: 18rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.wanl-start-list-item-content-image {
|
|
border-radius: 18rpx;
|
|
width: 240rpx;
|
|
height: 310rpx;
|
|
}
|
|
|
|
.wanl-start-list-item-goods-image {
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.wanl-start-list-item-goods-item {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
border-radius: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.wanl-start-list-item-goods-item-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
.wanl-start-list-item-goods-item-img-image {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 5000rpx;
|
|
}
|
|
.wanl-start-list-item-goods-item-title {
|
|
flex: 1;
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
}
|
|
.wanl-start-list-item-goods-item-title-text {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.wanl-start-list-item-content-textarea {
|
|
font-size: 28rpx;
|
|
color: #888;
|
|
height: 200rpx;
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
padding-top: 18rpx;
|
|
padding-right: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
padding-left: 18rpx;
|
|
border-radius: 18rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.wanl-start-list-item-content-placeholder {
|
|
font-size: 28rpx;
|
|
color: #888;
|
|
}
|
|
|
|
/* 商品列表 */
|
|
.wanl-live-goods-list-item {
|
|
flex-direction: row;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
padding-top: 18rpx;
|
|
padding-right: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
padding-left: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
.wanl-live-goods-list-item-active {
|
|
background: #ffefe9;
|
|
border-left: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-right: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-top: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-bottom: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
}
|
|
.wanl-live-goods-list-item-img {
|
|
position: relative;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-top-left-radius: 12rpx;
|
|
border-top-right-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
border-bottom-left-radius: 12rpx;
|
|
overflow: hidden;
|
|
background-color: #f7f7f7;
|
|
margin-right: 20rpx;
|
|
}
|
|
.wanl-live-goods-list-item-image{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.wanl-live-goods-list-item-subject{
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wanl-live-goods-list-item-subject-title-text{
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-size: 28rpx;
|
|
lines:2;
|
|
text-overflow:ellipsis;
|
|
/* #ifdef APP-PLUS */
|
|
line-height: 36rpx;
|
|
/* #endif */
|
|
}
|
|
|
|
.wanl-live-goods-list-item-subject-operation{
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
.wanl-live-goods-list-item-subject-operation-price{
|
|
|
|
}
|
|
.wanl-live-goods-list-item-subject-operation-price-text{
|
|
color: #f72b36;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.wanl-live-shop-list-item {
|
|
align-items: center;
|
|
flex-direction: row;
|
|
margin-bottom: 24rpx;
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
border-left: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
.wanl-live-shop-list-item-active {
|
|
background: #ffefe9;
|
|
border-left: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-right: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-top: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
border-bottom: 2rpx solid rgba(255, 68, 0, 0.4);
|
|
}
|
|
.wanl-live-shop-list-item-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.wanl-live-shop-list-item-image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 5000rpx;
|
|
}
|
|
.wanl-live-shop-list-title{
|
|
flex: 1;
|
|
margin-left: 18rpx;
|
|
}
|
|
.wanl-live-shop-list-item-title {
|
|
flex: 1;
|
|
margin-left: 18rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
.wanl-live-shop-list-item-title-text {
|
|
font-size: 28rpx;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
</style> |