<!-- 
	版本声明：
	* 由于 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">&#xeb11;</text>
				</view>
				<view class="wanl-btn" @tap="handleLive('snapshot')">
					<text class="wanl-btn-text">&#xe77e;</text>
				</view>
				<view class="wanl-btn" @tap="handleLive('switch')">
					<text class="wanl-btn-text">&#xe653;</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">&#xe87f;</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">&#xe635;</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')">&#xe66b;</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">&#xe68b;</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">&#xe644;</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">&#xe68b;</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">&#xe644;</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">&#xe724;</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">&#xe68b;</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">&#xe68b;</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')">&#xe66b;</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">&#xe65c;</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">&#xe684;</text>
						</view>
					</view>
					<view class="wanl-live-search-title">
						<!-- <text class="wanl-live-search-title-icon-text">&#xe68b;</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">&#xe67c;</text>
										<text v-else class="wanl-live-operation-button-text">&#xe692;</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">&#xe610;</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')">&#xe66b;</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">&#xe724;</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')">&#xe66b;</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">&#xe67c;</text>
								<text v-else class="wanl-live-operation-button-text">&#xe692;</text>
							</view>
						</view>
						<view v-if="shopList.length == 0" class="wanl-live-goods-list-empty">
							<text class="wanl-live-goods-list-empty-icon">&#xe610;</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>