caimei-applets-caimei/supplier/pages/user/my-product.vue

<template>
	<view class="container product clearfix">
		<view class="superv-header">
			<view class="superv-header-click" v-if="!isSuperv">
				<view class="oltext" @click="supervClickFn">管理</view>
				<view class="ortext" @click="searchClickFn">筛选</view>
			</view>
			<view class="superv-header-checked" v-else>
				<view class="oltext">
					<view class="checkbox iconfont" :class="[isChecked ?'icon-yixuanze':'icon-weixuanze']" @click="isCheckedAll"></view>
					<view class="text">全选</view>
				</view>
				<view class="ortext" @click="closeSupervFn">完成</view>
			</view>
		</view>
		<view class="product-content">
			<view  :class="{'tui-order-list':scrollTop >= 0}" class="clearfix">
				<!-- 空白页 -->
				<empty v-if="isEmpty" :typeIndex="currentTabs" :navbarHeight="navbarHeight"></empty>
				<!-- 列表 -->
				<checkbox-group @change="buyChange" class="tui-group">
					<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in organizeProducts" :key="index">
						<tui-swipe-actions :actions="actions" @click="handlerButton($event,item)" :params="item">
							<template v-slot:content>
								<view class="tui-goods-item">
									<view class="tui-goods-checkBox" v-if="isSuperv">
										<view class="checkbox iconfont" :class="[isChecked ?'icon-yixuanze':'icon-weixuanze']" @click="isCheckedAll"></view>
									</view>
									<view class="tui-goods-image">
										<image :src="item.mainImage" class="tui-goods-img"/>
									</view>
									<view class="tui-goods-info"> 
										<view class="tui-goods-title">{{item.name}}</view>
										<view class="tui-price-box">
											<view class="tui-goods-price">￥{{item.price | NumFormat}}</view>
										</view>
										<view class="tui-goods-pip">市场价:￥{{item.price | NumFormat}}</view>
										<view class="tui-goods-pip">分类:耗材配件-配件-探头</view>
									</view>
									<view class="tui-goods-status">
										<view class="status-text">{{ item.verifyStatus | verifyStatusFilter }}</view>
									</view>
								</view>
							</template>
						</tui-swipe-actions>
					</view>
				</checkbox-group>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
		<tui-modal :show="modal" @click="handleClick" @cancel="hideMobel" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
		<!--右抽屉-->
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<view class="d-container clearfix" :style="{paddingTop:CustomBar+10+'px'}">
				<view class="d-label">商品货号:</view>
				<view class="d-input">
					<input class="input" type="text" value="" v-model="listQuery.keyword" placeholder="输入商品名称"/>
				</view>
				<view class="d-label">商品货号:</view>
				<view class="d-input">
					<input class="input" type="text" value="" v-model="listQuery.productSn" placeholder="输入商品货号"/>
				</view>
				<view class="d-label">状态:</view>
				<view class="d-input">
					<picker @change="bindPickerChange(3,$event)" :value="index" :range="Array2" range-key="name">
						<input class="input" type="text" disabled="false" v-model="listQuery.publishStatus" value="" placeholder="请选择审核状态"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-label">主推商品:</view>
				<view class="d-input">
					<picker @change="bindPickerChange(2,$event)" :value="index" :range="brandOptions" range-key="name">
						<input class="input" type="text" disabled="false" v-model="listQuery.brandId" value="" placeholder="请选择商品品牌"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-label">分类:</view>
				<view class="d-input">
					<picker @change="bindPickerChange(1,$event)" :value="index" :range="Array" range-key="name">
						<input class="input" type="text" disabled="false" v-model="listQuery.productCategoryId" value="" placeholder="请选择分类"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input">
					<picker @change="bindPickerChange(1,$event)" :value="index" :range="Array" range-key="name">
						<input class="input" type="text" disabled="false" v-model="listQuery.productCategoryId" value="" placeholder="请选择二级分类"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input">
					<picker @change="bindPickerChange(1,$event)" :value="index" :range="Array" range-key="name">
						<input class="input" type="text" disabled="false" v-model="listQuery.productCategoryId" value="" placeholder="请选择三级分类"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input btn">
					<view class="d-btn comfrim" @click="handSearchList">确定</view>
					<view class="d-btn clear" @click="handSearchClear">重置</view>
				</view>
			</view>
		</tui-drawer>
		<!-- 批量操作 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="isSuperv" @close="closeSupervFn()">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button" :class="isChecked ? 'active' : ''" @click="closeSupervFn()">批量下架</view>
					</view>
				</view>
			</view>	
		</tui-bottom-popup>	
	</view>
</template>
<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import modalLayer from "@/components/modal-layer"
	import empty from "@/components/empty";
	import { mapState,mapMutations } from 'vuex'
	const defaultListQuery = {
			keyword: '',
			pageNum: 1,
			pageSize: 10,
			publishStatus: '',
			verifyStatus: '',
			productSn: '',
			productCategoryId: '',
			brandId: '',
			merchantId:''
	 };
	export default{
		components: {
			tuiLoadmore,
			tuiNomore,
			empty
		},
		data() {
			return{	
				isSuperv:false,
				isChecked:false,
				mapStateArr:[
					{label:'isQuery',val:[4,5,12,13,33,22,23,32,77],status: true},
					{label:'isDelete',val:[6],status: true},
					{label:'isCancel',val:[0,111],status: true},
					{label:'isConfirm',val:[33],status: true},
					{label:'isConfirmation',val:[0],status: true},
					{label:'isPay',val:[11,12,13,21,22,23,111],status: true},
				],
				actions: [
					{name: '查看详情',color: '#fff',fontsize: 26,width: 50,background: '#f9a94b'},
					{name: '添加主页推荐',color: '#fff',fontsize: 26,width: 50,background: '#ff7a51'},
					{name: '下架',color: '#fff',fontsize: 26,width: 50,background: '#fea785'},
					{name: '无操作',color: '#fff',fontsize: 26,width: 50,background: '#e1e1e1'},
				],
				Array: [{name:'男装'},{name: '女装'},{name: '男鞋'},{name: '女鞋'},{name: '童鞋'}],
				brandOptions: [],
				Array2: [{name:'审核通过'},{name: '未审核'}],
				currents:0,
				userID:0,
				listQuery:Object.assign({}, defaultListQuery),
				dataList: [],
				btnoRderID: 0, //点击按钮传入的的订单ID
				scrollTop: 0,
				deteleType:'',
				skeletonShow: true,
				isEmpty: false,
				isDelete:false,
				isModalLayer: false,
				loadding: false,
				pullUpOn: true,
				total: 0,
				pullFlag: true,
				navbarHeight:'',
				nomoreText: '上拉显示更多',
				contentModalText:'',//操作文字提示语句
				modal:false,
				rightDrawer: false,
				handlerProduct:{},//储存监听商品信息
				OperationType:'',//操作类型
				isCmcustomClass : 'left',
				count:0,
				offTheShelf:0,
				onTheShelf:0,
				organizeProducts:[]
			}
		},
		onLoad(){
		
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
			verifyStatusFilter:function(value) {//审核状态
			if (value === 1) {
			  return '审核通过';
			} else {
			  return '未审核';
			}
		  }
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			...mapMutations(['login','logout']),
			getOrganizeProducts(){//获取模块三商品
				this.ProductService.queryProductPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:20}).then(res =>{
					this.organizeProducts = res.data.results
					//循环根据状态设置操作按钮:0,1,2,3,8,9(可编辑)、1,2(预览商品)、2(下架)、
					this.getProductPrice()
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getProductPrice(){//获取商品或者活动价格
				let productIdArr = [];
				let productIds ='';
				this.organizeProducts.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
					productIdArr.push(item.productID)
				})
				productIds = productIdArr.join(",");
				this.ProductService.querySearchProductPrice({userId: this.userID,productIds:productIds}).then(response =>{
					this.organizeProducts = this.ReturnNewProducts(this.organizeProducts,response.data);
					this.skeletonShow = false;
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			ReturnNewProducts(Array,list){
				let NewArray = []
				Array.map(item=>{
					for (let i = 0; i < list.length; i++) {
						if( item.productID == list[i].productId ){
							NewArray.push(Object.assign(item,list[i])) 
						}
					}
				});
				return NewArray
			},
			GetProductListInfo(){
				this.listQuery.pageNum = 1
				this.ProductService.GetProductList(this.listQuery).then(response =>{
					let resData = response.data.list
					this.total = response.data.total;
					if(resData && resData.length > 0){
						this.isEmpty = false;
						this.dataList = [...resData];
						if(this.total > this.dataList.length){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.dataList.length < 2){
								this.pullUpOn = true
							}else{
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					}else{
						this.isEmpty = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			}, 
			GetOnReachBottomData(index){//上拉加载
				this.listQuery.pageNum += 1
				this.ProductService.GetProductList(this.listQuery).then(response =>{
					let resData = response.data.list
					this.total = response.data.total;
					this.dataList = this.dataList.concat(resData)
					this.pullFlag = false;// 防上拉暴滑
					setTimeout(()=>{this.pullFlag = true;},500)
					if(this.total > this.dataList.length){
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					}else{
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})	
			},	
			handSearchList(){//搜索
				this.GetProductListInfo()
				this.leftDrawer = false;
				this.rightDrawer = false;
			},	
			handlerButton(e,item){//监听侧滑按钮点击事件
				switch(this.currents){
					case 0://全部商品列表
						this.handleCurrentsAll(e,item)
						break;
					case 1://上架商品列表
						this.handleCurrentsUpdate(e,item)
						break;
					case 2://下架商品列表
						this.handleCurrentsDown(e,item)
						break;
				}				
			},
			handleCurrentsAll(e,item){//处理全部商品列表只做删除操作
				switch(e.index){
					case 0://删除
						this.handleDeleter(item)
						break;
				}
			},
			handleCurrentsUpdate(e,item){//处理上架商品列表只做下架&&删除操作
				switch(e.index){
					case 0://下架
						this.handleUnder(item)
						break;
					case 1://删除
						this.handleDeleter(item)
						break;
				}
			},
			handleCurrentsDown(e,item){//处理下架商品列表只做下架&&删除操作
				switch(e.index){
					case 0://上架
						this.handleGround(item)
						break;
					case 1://删除
						this.handleDeleter(item)
						break;
				}
			},
			handleDeleter(item){//删除操作
				this.OperationType = 'delete'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '是否删除该商品？';
			},
			handleGround(item){//上架操作
				this.OperationType = 'ground'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '是否上架该商品？';
			},
			handleUnder(item){//下架操作
				this.OperationType = 'under'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '是否下架该商品？';
			},
			handleClick(e) {//弹窗提示用户操作
				if(e.index == 1){
					switch(this.OperationType){
						case 'delete'://删除商品
							this.UpdateDeleteStatus()
							break;
						case 'ground'://上架商品
							this.UpdatePublishStatus(this.handlerProduct,1)
							break;
						case 'under'://下架商品
							this.UpdatePublishStatus(this.handlerProduct,0)
							break;
					}
				}
				this.modal = false;
			},
			UpdatePublishStatus(item,publishStatus){//上下架商品操作处理接口
				this.ProductService.ProductUpdatePublishStatus({publishStatus:publishStatus,ids:item.id}).then(response =>{
					this.$util.msg('操作成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
						this.getOrderListCount()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.message,2000)
				})
			},
			UpdateDeleteStatus(){//商品删除处理接口
				this.ProductService.ProductUpdateDeleteStatus({deleteStatus:1,ids:this.handlerProduct.id}).then(response =>{
					this.$util.msg('删除商品成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
						this.getOrderListCount()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.message,2000)
				})
			},
			hideMobel(){
				this.modal = false;
			},
			isCheckedAll(){
				this.isCheckedAll = true
			},
			addProductFn(){
				this.$util.msg('功能开发中,敬请期待^_^',2000);
			},
			supervClickFn(){//管理全选
				this.isSuperv = true
			},
			closeSupervFn(){
				this.isSuperv = false
			},
			searchClickFn() {//弹出抽屉
				this.rightDrawer = true;
			},
			closeDrawer(e) {//关闭抽屉
				this.leftDrawer = false;
				this.rightDrawer = false;
			},
			orderPriceToFixed (n){
				let price ='';
				price = Number(n).toFixed(2);
				return price
			},
			tabClick(index){
				this.currents = index
				switch(index){
					case 0:
						this.listQuery.publishStatus = ''
						this.dataList = []
						this.GetProductListInfo()
						this.actions =[
							{name: '删除',color: '#fff',fontsize: 28,width: 80,background: '#ff4759'},
						]
						break;
					case 1:
						this.listQuery.publishStatus = 1
						this.dataList = []
						this.GetProductListInfo()
						this.actions =[
							{name: '下架',color: '#fff',fontsize: 28,width: 80,background: '#ffaa33'},
							{name: '删除',color: '#fff',fontsize: 28,width: 80,background: '#ff4759'},
						]
						break;
					case 2:
						this.listQuery.publishStatus = 0
						this.dataList = []
						this.GetProductListInfo()
						this.actions =[
							{name: '上架',color: '#fff',fontsize: 28,width: 80,background: '#4688fa'},
							{name: '删除',color: '#fff',fontsize: 28,width: 80,background: '#ff4759'},
						]
						break;
				
				}
			},
			bindDateChange: function(e) {//选择筛选时间
				this.listQuery.date = e.detail.value
			},
			bindPickerChange: function(type,e) {//选择筛选条件
				console.log(type)
				console.log(e)
				switch(type){
					case 1:
						this.listQuery.classification = this.Array[e.target.value].name
						console.log(this.listQuery.classification)
						break;
					case 2:
						this.listQuery.source = this.brandOptions[e.target.value].name
						console.log(this.listQuery.source)
						break;
					case 3:
						this.listQuery.classification = this.Array2[e.target.value].name
						console.log(this.listQuery.classification)
						break;
				}
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>30){
				this.isCmcustomClass = 'fiexd'
			}else{
				this.isCmcustomClass = 'left'
			}	
		},
		onReachBottom() {
			if(this.total > this.dataList.length){
				this.loadding = true
				this.pullUpOn = true
				this.GetOnReachBottomData()
			}	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.listQuery.pageNum = 1
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.listQuery.merchantId = resolve.id
				this.getOrganizeProducts()
			})
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background:#FFF;
	}
	.superv-header{
		width: 100%;
		height: 80rpx;
		background-color: #F7F7F7;
		line-height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 0 24rpx;
		z-index: 999;
		.superv-header-click{
			width: 100%;
			height: 80rpx;
			font-size: $font-size-30;
			.oltext{
				float: left;
				color: #666666;
			}
			.ortext{
				float: right;
				color: $color-system;
			}
		}
		.superv-header-checked{
			width: 100%;
			height: 80rpx;
			font-size: $font-size-30;
			.oltext{
				float: left;
				color: #666666;
				display: flex;
				.checkbox{
					display: flex;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					font-size: 34rpx;
					color:$color-system;
					line-height: 80rpx;
				}
				.text{
					float: left;
					line-height: 80rpx;
					margin-left: 15rpx;
				}
			}
			.ortext{
				float: right;
				color: $color-system;
			}
		}
	}
	.d-container {
		width: 560rpx;
		padding: 80rpx 30rpx;
		.d-title{
			width: 100%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #4688fa;
			font-size: $font-size-32;
			float: left;
		}
		.d-time{
			width: 100%;
			height: 70rpx;
			float: left;
			box-sizing: border-box;
			padding: 0 10rpx;
			border: 1px solid rgba(0,0,0,0.2);
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			.iconfont{
				width:70rpx;
				height: 60rpx;
				display: block;
				float: left;
				font-size: 50rpx;
				color: #666666;
				line-height: 70rpx;
				text-align: left;
			}
			.input{
				width: 220rpx;
				height: 70rpx;
				line-height: 70rpx;
				float: left;
				box-sizing: border-box;
				font-size: $font-size-24;
				color: #333333;
				padding: 0 10rpx;
			}
		}
		.d-label{
			width: 100%;
			height: 44rpx;
			line-height: 44rpx;
			text-align: left;
			color: #666666;
			font-size: $font-size-26;
			float: left;
		}
		.d-input{
			width: 100%;
			height: 70rpx;
			float: left;
			box-sizing: border-box;
			padding: 0 10rpx;
			border: 1px solid rgba(0,0,0,0.2);
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			position: relative;
			&.btn{
				border: none;
				margin-top: 40rpx;
			}
			.input{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				float: left;
				box-sizing: border-box;
				font-size: $font-size-24;
				color: #333333;
				padding: 0 10rpx;
				padding-right: 68rpx;
			}
			.iconfont{
				width: 50rpx;
				height: 68rpx;
				display: block;
				line-height: 68rpx;
				text-align: center;
				font-size: 30rpx;
				color: #999999;
				position: absolute;
				right: 0;
				top: 0;
			}
			.d-btn{
				width: 210rpx;
				height: 84rpx;
				border-radius: 42rpx;
				background: $btn-confirm;
				line-height: 84rpx;
				text-align: center;
				font-size: $font-size-26;
				color: #FFFFFF;
				float: right;
				&.comfrim{
					background: $btn-confirm;
					margin-left: 20rpx;
				}
				&.clear{
					background: #e1e1e1;   
				}
			}
		}
	}
	.tui-header {
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 40rpx;
	}
	.header-sit{
		width:100%;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding:0 40rpx;
		text-align: left;
		font-size: $font-size-40;
		color: #FFFFFF;
		font-weight: 600;
		font-family: '正楷';
		margin-top: 30rpx;
		.iconfont{
			font-size: 42rpx;
			margin-left: 30rpx;
		}
	}
	.mine{
		width: 100%;
		height: 100%;
		position:relative;
	}
	.product-content{
		width: 100%;
		height: auto;
		position: relative;
		padding:0;
		padding-top: 80rpx;
		box-sizing: border-box;
		.header-tabs{
			width: 100%;
			height: auto;
			margin-bottom: 40rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background:#4688fa;
			box-sizing: border-box;
			&.day{
				background:#FFFFFF;
				padding:40rpx 20rpx;
				box-shadow:0px 3px 6px rgba(0,0,0,0.2);
			}
			.title{
				font-size: $font-size-36;
				line-height: 60rpx;
				color: #FFF;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.main{
				width: 100%;
				height: 110rpx;
				.main-item{
					float: left;
					width:20%;
					text-align: center;
					color: #FFFFFF;
					box-sizing: border-box;
					&.active{
						.iconfont{
							color: #576efa;
						}
						.text{
							font-weight: bold;
							color:#576efa ;
							font-size: $font-size-28;
						}
					}
					.text{
						width: 100%;
						height:60rpx;
						line-height: 60rpx;
						display: block;
						float: left;
						font-size:$font-size-24;
						color: #666666;
						text-align: center;
						&.nm{
							color: #222222;
							height:40rpx;
							line-height: 40rpx;
							font-size: $font-size-32;
							font-weight: bold;
						}
					}
					.iconfont{
						font-size:50rpx;
						color: #7aa5fa ;
						position: relative;
						.badg{
							padding: 0 10rpx;
							height: 30rpx;
							display: inline-block;
							font-size: $font-size-24;
							text-align: center;
							line-height: 30rpx;
							background-color: #ff4759;
							color: #FFF;
							position: absolute;
							top: -15rpx;
							right:20rpx;
							border-radius: 15rpx;
						}
					}
				}
			}
		}
		.tui-header-btm {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
		}
		.tui-btm-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.tui-btm-num {
			font-size: 32rpx;
			font-weight: 600;
			position: relative;
		}
		.tui-btm-text {
			font-size: 24rpx;
			opacity: 0.85;
			padding-top: 4rpx;
		}
	}	
	.tui-goods-item {
		display: flex;
		padding: 30rpx 4rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EBEBEB;
	}
	.tui-goods-checkBox{
		display: flex;
		align-items: center;
		.checkbox{
			display: flex;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			border-radius: 0;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			background-color:#FFFFFF;
			font-size: 36rpx;
			color:$color-system;
		}
		.text{
			font-size: $font-size-24;
			margin-left: 10rpx;
		}
	}
	.tui-goods-image{
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		margin-left: 20rpx;
		.tui-goods-img {
			width: 180rpx;
			height: 180rpx !important;
			border-radius: 12rpx;
			flex-shrink: 0;
			display: block;
		}
	}
	.tui-goods-info {
		width: 370rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
	}
	.tui-goods-status{
		width: 100rpx;
		float: right;
		.status-text{
			font-size: $font-size-24;
			line-height: 44rpx;
			text-align: right;
			color: #666666;
		}
	}
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		color: #333;
		line-height: 44rpx;
	}
	.tui-goods-pip{
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #999;
		line-height: 44rpx;
	}
	.tui-goods-ediet{
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(90deg,rgba(122,165,250,1) 0%,rgba(87,110,250,1) 100%);
		border-radius: 50%;
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 50%;
		.icon-bianji1 {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 24rpx;
		}	
	}
	.tui-goods-model {
		max-width: 100%;
		color: #FFFFFF;
		background: #4688fa;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: $font-size-28;
		font-weight: 500;
		color: #FF201F;
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 200rpx;
		padding:6rpx 24rpx;
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		padding: 0 75rpx;
		margin-top: 30rpx;
		.tui-button{
			width: 600rpx;
			height: 88rpx;
			background: #e1e1e1;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-28;
			border-radius: 44rpx;
			&.active{
				background: $btn-confirm;
			}
		}
	}
</style>