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" @click="isCheckedAll">
					<view class="checkbox iconfont" :class="[isAllChecked ?'icon-yixuanze':'icon-weixuanze']"></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">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
					<text class="error-text">暂无数据^_^</text>
				</view>
				<!-- 列表 -->
				<checkbox-group @change="buyChange" class="tui-group">
					<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in dataList" :key="index">
						<tui-swipe-actions :actions="item.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="[item.isChecked ?'icon-yixuanze':'icon-weixuanze']" @click="checkedSoperv(item)"></view>
									</view>
									<view class="tui-goods-image">
										<image :src="item.mainImage" class="tui-goods-img"/>
									</view>
									<view class="tui-goods-info" :style="{width:isSuperv ? '360rpx' : '420rpx'}"> 
										<view class="tui-goods-title">{{ item.name }}</view>
										<view class="tui-price-box">
											<view class="tui-goods-price">￥{{item.price1 | NumFormat}}</view>
										</view>
										<view class="tui-goods-pip">市场价:￥{{item.normalPrice | NumFormat}}</view>
										<view class="tui-goods-pip">分类:{{ item.typeName }}</view>
									</view>
									<view class="tui-goods-status">
										<view class="status-text" :style="{ color: verifyColorFilter(item.validFlag)}">
											{{ item.validFlag | 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.name" placeholder="输入商品名称"/>
				</view>
				<view class="d-label">商品货号:</view>
				<view class="d-input">
					<input class="input" type="text" value="" v-model="listQuery.productCode" placeholder="输入商品货号"/>
				</view>
				<view class="d-label">状态:</view>
				<view class="d-input">
					<picker @change="bindPickerChange(1,$event)" :value="index" :range="statusActions" range-key="name">
						<input class="input" type="text" disabled="false" v-model="validFlagText" 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="recommendActions" range-key="name">
						<input class="input" type="text" disabled="false" v-model="featuredFlagText" value="" placeholder="请选择"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-label">分类:</view>
				<view class="d-input">
					<picker @change="bindPickerChange(3,$event)" :value="index" :range="classificationFirstList" range-key="name">
						<input class="input" type="text" disabled="false" v-model="firstClassificationText" value="" placeholder="请选择一分类"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input">
					<picker @change="bindPickerChange(4,$event)" :value="index" :range="classificationTwoList" range-key="name">
						<input class="input" type="text" disabled="false" v-model="twoClassificationText" value="" placeholder="请选择二级分类"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input">
					<picker @change="bindPickerChange(5,$event)" :value="index" :range="classificationThreeList" range-key="name">
						<input class="input" type="text" disabled="false" v-model="threeClassificationText" 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">
			<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="isProductChecked ? 'active' : ''" @click="handleAllUnder()">批量下架</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 { mapState,mapMutations } from 'vuex'
	const defaultListQuery = {
			shopID:'',
			pageNum:1,
			pageSize:10,
			productCode:'',//货号
			name:'',//商品名称
			validFlag:'',//状态
			featuredFlag:'',//是否主推
			bigTypeID:0,//一级
			smallTypeID:0,//二级
			tinyTypeID:0//三级
	 };
	export default{
		components: {
			tuiLoadmore,
			tuiNomore
		},
		data() {
			return{	
				isSuperv:false,
				isProductChecked:false,
				validFlagText:'',
				featuredFlagText:'',
				firstClassificationText:'',
				twoClassificationText:'',
				threeClassificationText:'',
				recommendActions: [{name:'是',value:1},{name: '否',value:0}],
				statusActions: [
					{name:'全部',value:''},
					{name: '未审核',value:1},
					{name: '审核未通过',value:8},
					{name: '已上架',value:2},
					{name: '已下架',value:3},
					{name: '已冻结',value:10},
					{name: '已隐身',value:9},
					{name: '已删除',value:0},
				],
				classificationFirstList:[],
				classificationTwoList:[],
				classificationThreeList:[],
				currents:0,
				userID:0,
				listQuery:Object.assign({}, defaultListQuery),
				dataList: [],
				btnoRderID: 0, //点击按钮传入的的订单ID
				scrollTop: 0,
				deteleType:'',
				skeletonShow: true,
				isEmpty: false,
				isDelete:false,
				isAllChecked:false,
				isModalLayer: false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				hasNextPage: false,
				navbarHeight:'',
				nomoreText: '上拉显示更多',
				contentModalText:'',//操作文字提示语句
				modal:false,
				rightDrawer: false,
				handlerProduct:{},//储存监听商品信息
				OperationType:'',//操作类型
				isCmcustomClass : 'left',
				featuredNum:0,
				productIds:'',//批量下架操作商品ID
				
			}
		},
		onLoad(option){
			switch(option.listType){
				case '0':
					this.listQuery.validFlag =''
					break;
				case '1':
					this.listQuery.validFlag = 2
					break;
				case '2':
					this.listQuery.validFlag = 3
					break;
			}
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.listQuery.shopID = resolve.shopID
				this.GetProductListInfo()
				this.GetPrimaryClassification()
			})
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
			verifyStatusFilter: function(state){
				let stateText = '',
					stateTextObject={
						'2':'已上架',
						'3':'已下架',
						'1':'待审核',
						'8':'审核未通过',
						'9':'已隐身',
						'10':'已冻结',
						'0':'已删除'
					};
				Object.keys(stateTextObject).forEach(function(key) {
					if(key == state){
						stateText = stateTextObject[key]
					}
				});
				return stateText;
			},
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			...mapMutations(['login','logout']),
			GetProductListInfo(){
				this.listQuery.pageNum = 1
				this.ShopService.GetSupplierPyProduct(this.listQuery).then(response =>{
					let data = response.data.productPage
					this.featuredNum = response.data.featuredNum
					this.hasNextPage = data.hasNextPage
					if(data.results && data.results.length > 0){
						this.isEmpty = false;
						this.dataList = data.results;
						this.handleDataList()
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.dataList.length < 5){
								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.ShopService.GetSupplierPyProduct(this.listQuery).then(response =>{
					let data = response.data.productPage
					this.featuredNum = response.data.featuredNum
					this.hasNextPage = data.hasNextPage;
					this.dataList = this.dataList.concat(data.results)
					this.handleDataList()
					this.pullFlag = false;// 防上拉暴滑
					setTimeout(()=>{this.pullFlag = true;},500)
					if(this.hasNextPage){
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					}else{
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})	
			},	
			handleDataList(){//根据商品状态set不同的tabAction返回新的数据
				this.dataList.forEach(item =>{
					if(item.validFlag === '0' || item.validFlag === '3' || item.validFlag === '8' || item.validFlag === '9'){
						item.actions = [
							{name: '无操作',color: '#fff',fontsize: 26,width: 50,background: '#e1e1e1'},
						]
					}else if(item.validFlag === '1' || item.validFlag === '10'){
						item.actions = [
							{name: '查看详情',color: '#fff',fontsize: 26,width: 50,background: '#f9a94b'},
						]
					}else if(item.validFlag === '2'){
						if(item.featuredFlag ==='1'){
							item.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'},
							]
						}else{
							item.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'},
							]
						}
					}
				})
			},
			handSearchList(){//搜索
				this.GetProductListInfo()
				this.leftDrawer = false;
				this.rightDrawer = false;
			},	
			handSearchClear(){//重置搜索条件
				this.listQuery = Object.assign({}, defaultListQuery)
				this.validFlagText='';
				this.featuredFlagText='';
				this.firstClassificationText='';
				this.twoClassificationText='';
				this.threeClassificationText='';
				this.classificationTwoList = [];
				this.classificationThreeList = [];
			},
			handlerButton(e,item){//监听侧滑按钮点击事件
				if(item.validFlag === '0' || item.validFlag === '3' || item.validFlag === '8' || item.validFlag === '9'){
					if(e.index == 0){
						return
					}
				}else if(item.validFlag === '1' || item.validFlag === '10'){
					if(e.index == 0){
						this.$api.navigateTo(`/pages/goods/product?id=${item.productID}`)
					}
				}else if(item.validFlag === '2'){
					switch(e.index){
						case 0:
							this.$api.navigateTo(`/pages/goods/product?id=${item.productID}`)
							break;
						case 1:
							if(item.featuredFlag ==='1'){
								this.handleDeleteShopRemb(item)
							}else{
								this.handleAddShopRemb(item)
							}
							break;
						case 2:
							this.handleUnder(item)
					}
				}
			},
			handleAddShopRemb(item){//添加主页推荐
				console.log(this.featuredNum);
				let num = 4- this.featuredNum;
				console.log(num);
				this.OperationType = 'add'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = `总共能添加4个主推商品，您还能添加${num}个确定将该商品添加为主推商品吗？`;
			},
			
			handleDeleteShopRemb(item){//删除主页推荐
				this.OperationType = 'delete'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '是否把该商品从主推商品中删除？';
			},
			handleUnder(item){//下架操作
				this.OperationType = 'under'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '确定下架该商品吗？';
			},
			handleAllUnder(){//批量下架操作
				let isValidFlag = false
				if(this.isProductChecked){
					this.dataList.forEach(el => {
						if(el.isChecked) { 
							if(el.validFlag != 2){ 
								isValidFlag = true; 
							}else{
								isValidFlag = false
								this.productIds += el.productID+','
							}
						}
					})
					if(isValidFlag){
						this.$util.modal('','部分选中的商品暂未上架，不能进行下架操作','确定','',false,() =>{})
					}else{	
						this.OperationType = 'allunder'
						this.modal = true;
						this.contentModalText = '确定下架选中的商品吗？';												
					}
				}else{
					return;
				}
			},
			handleClick(e) {//弹窗提示用户操作
				if(e.index == 1){
					switch(this.OperationType){
						case 'delete'://删除主页推荐
							this.SupplierDeleteSwitchFeatured(this.handlerProduct)
							break;
						case 'add'://添加主页推荐
							this.SupplierAddSwitchFeatured(this.handlerProduct)
							break;
						case 'under'://下架商品
							this.SupplierSoldOutProduct(this.handlerProduct)
							break;
						case 'allunder'://批量下架
							this.SupplierAllSoldOutProduct(this.productIds)
							break;
					}
				}
				this.modal = false;
			},
			SupplierDeleteSwitchFeatured(item){//操作删除主页推荐
				this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productID,featuredFlag:0}).then(response =>{
					this.$util.msg('删除成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierAddSwitchFeatured(item){//操作添加主页推荐
				this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productID,featuredFlag:1}).then(response =>{
					this.$util.msg('添加成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierSoldOutProduct(item){//操作下架商品
				this.ShopService.SupplierSoldOutProduct({productIds:item.productID}).then(response =>{
					this.$util.msg('下架成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierAllSoldOutProduct(ids){//操作批量下架商品
				this.ShopService.SupplierSoldOutProduct({productIds:ids}).then(response =>{
					this.$util.msg('下架成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			bindPickerChange: function(type,e) {//选择筛选条件
				switch(type){
					case 1:
						this.validFlagText = this.statusActions[e.target.value].name
						this.listQuery.validFlag = this.statusActions[e.target.value].value
						break;
					case 2:
						this.featuredFlagText = this.recommendActions[e.target.value].name
						this.listQuery.featuredFlag = this.recommendActions[e.target.value].value
						break;
					case 3:					
						this.firstClassificationText = this.classificationFirstList[e.target.value].name
						this.listQuery.bigTypeID = this.classificationFirstList[e.target.value].value
						this.GetPrimarySecondaryClassification(this.listQuery.bigTypeID)
						this.twoClassificationText = ''
						this.threeClassificationText=''
						break;
					case 4:
						if(this.listQuery.bigTypeID == 0){
							this.$util.msg('请先选择一级分类',2000)
							return
						}
						this.twoClassificationText = this.classificationTwoList[e.target.value].name
						this.listQuery.smallTypeID = this.classificationTwoList[e.target.value].value
						this.GetPrimaryThreeLevelClassification(this.listQuery.smallTypeID)
						break;
					case 5:
						if(this.listQuery.smallTypeID == 0){
							this.$util.msg('请先选择二级分类',2000)
							return
						}
						this.threeClassificationText = this.classificationThreeList[e.target.value].name
						this.listQuery.tinyTypeID = this.classificationThreeList[e.target.value].value
						break;
				}
			},
			GetPrimaryClassification(){//获取筛选条件一级分类
				this.ShopService.GetPrimaryClassification().then(response =>{
					const data = response.data
					data.forEach(item =>{
						let _obj = {name:item.name,value:item.bigTypeID} 
						this.classificationFirstList.push(_obj)
					})
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPrimarySecondaryClassification(value){//获取筛选条件二级分类
				this.classificationTwoList = []
				this.ShopService.GetPrimarySecondaryClassification({bigTypeId:value}).then(response =>{
					const data = response.data
					data.forEach(item =>{
						let _obj = {name:item.name,value:item.smallTypeID} 
						this.classificationTwoList.push(_obj)
					})
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPrimaryThreeLevelClassification(value){//获取筛选条件三级分类
				this.classificationThreeList = []
				this.ShopService.GetPrimaryThreeLevelClassification({smallTypeId:value}).then(response =>{
					const data = response.data
					data.forEach(item =>{
						let _obj = {name:item.name,value:item.tinyTypeID} 
						this.classificationThreeList.push(_obj)
					})
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			hideMobel(){
				this.modal = false;
			},
			updateCheckAllBtn() {//勾选单个判断全选
				let goodsCheckedLength = 0
				this.dataList.forEach(item => {
					if(item.isChecked) { goodsCheckedLength++; }
				})
				this.isAllChecked = goodsCheckedLength === this.dataList.length;
				if(goodsCheckedLength>0){
					this.isProductChecked = true
				}else{
					this.isProductChecked = false
				}
			},
			updateBothCheckBtn() {//全选勾选判断
				this.dataList.forEach((item)=>{
					item.isChecked = this.isAllChecked				
				})
			},
			isCheckedAll(){//全选
				this.isAllChecked = !this.isAllChecked
				if(this.isAllChecked){
					this.isProductChecked = true
				}else{
					this.isProductChecked = false
				}
				this.updateBothCheckBtn()
			},
			checkedSoperv(item){//选择
				item.isChecked = !item.isChecked
				this.updateCheckAllBtn()
			},
			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
			},
			verifyColorFilter: function(state){
				let stateColor = '',
					stateColorObject={
						'2':'#1890f9',
						'1':'#f9a94b',
						'0':'#FFB12A',
						'3':'#627386',
						'8':'#FF2A2A',
						'9':'#f94b4b'
					};
				Object.keys(stateColorObject).forEach(function(key){
					if(key == state){
						stateColor = stateColorObject[key]
					}
				});
				return stateColor;
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>30){
				this.isCmcustomClass = 'fiexd'
			}else{
				this.isCmcustomClass = 'left'
			}	
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.GetOnReachBottomData()
			}	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.listQuery.pageNum = 1
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow(){
			
		}	
	}
</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{
				width: 120rpx;
				float: left;
				color: #666666;
			}
			.ortext{
				width: 120rpx;
				float: right;
				color: $color-system;
				text-align: right;
			}
		}
		.superv-header-checked{
			width: 100%;
			height: 80rpx;
			font-size: $font-size-30;
			.oltext{
				width: 120rpx;
				float: left;
				color: #666666;
				display: flex;
				margin-left: 10rpx;
				.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{
				width: 120rpx;
				float: right;
				color: $color-system;
				text-align: right;
			}
		}
	}
	.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 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EBEBEB;
		position: relative;
	}
	.tui-goods-checkBox{
		display: flex;
		align-items: center;
		margin: 0 15rpx;
		.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;
		.tui-goods-img {
			width: 180rpx;
			height: 180rpx !important;
			border-radius: 12rpx;
			flex-shrink: 0;
			display: block;
		}
	}
	.tui-goods-info {
		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: 160rpx;
		position: absolute;
		right: 0;
		.status-text{
			font-size: $font-size-24;
			line-height: 44rpx;
			text-align: center;
			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>