banma/pages/deal/deal.vue

<template>
	<view class="">
		
		<view class="sort">
			<view class="sortItem" :style="{color:current==1?'#A5CF49':'#333333'}" @click="sort(1)">
				<text>{{sortCurrent==null?'时间排序':sortList[sortCurrent].name}}</text>
				<u-icon name="arrow-down-fill" :color="{color:current==1?'#A5CF49':'#333333'}"
					:class="{'select':current==1}" size="8"></u-icon>
			</view>
			<view class="sortItem" @click="sort(2)" :style="{color:current==2?'#A5CF49':'#333333'}">
				<view class="">
					<text>账号筛选</text>
					<view class="tips">
					{{mark_notice}}
					</view>
					<u-badge  showZero absolute='true' :offset='[10,30]' bgColor='red' type="warning " max="99" :value="total_num"></u-badge>
				</view>
				
				<u-icon name="arrow-down-fill" :color="{color:current==2?'#A5CF49':'#333333'}"
					:class="{'select':current==2}" size="8"></u-icon>
					<zpTooltip content="点击快速筛选" :visible="visible" placement="bottom"></zpTooltip>
			</view>
		</view>
		<view class="notice">
			<u-notice-bar :text="text1" color="#fff" bgColor="#A5CF49" fontSize='16'></u-notice-bar>
		</view>
		<view class="" v-if="swiperList.length!=0">
			 <u-swiper
			            :list="swiperList"
			            @change="change"
						keyName="image"
			            @click="click"
			    ></u-swiper>
		</view>
		<view class="accountList">
			
			<view class="accountItem" v-for="(item,index) in goodsList" :key="index" @click="toInfo(item)">
				<view class="imgBox">
					<image :src="BASE_URL+item.coverimage" mode=""></image>
					<view class="bar" :class="{'bule':item.bar_type==0}">
						{{item.color_bar}}
					</view>
				</view>
				<view class="introduction">
					<view class="title">
						{{item.show_title}}

					</view>
					<view class="labelBox">
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.top_bg.value+')'}"  v-if="item.is_top==1">
													置顶
												</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.discount_bg.value+')'}" v-if="item.discount==1">
							特价
						</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.recommend_bg.value+')'}" v-if="item.recommend==1">
							斑马推荐
						</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.stage_bg.value+')'}" v-if="item.stage==1">
							可分期
						</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.recommend_bg.value+')'}" v-if="item.is_hot==1">
							热门
						</view>
						<!-- <view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.level_bg.value+')'}" v-if="item.level>=1">
							VIP
						</view> -->
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.new_bg.value+')'}" v-if="item.is_new==1">
							新品
						</view>
						
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby1_bg.value+')'}" v-if="item.standby1==1">
								{{item.standby1_title}}
						</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby2_bg.value+')'}" v-if="item.standby2==1">
								{{item.standby2_title}}
						</view>
						<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby3_bg.value+')'}" v-if="item.standby3==1">
								{{item.standby3_title}}
						</view>
						
						<!-- <u-tag v-if="item.discount==1" text="特价" type="error" shape="circle" size="mini"></u-tag>
						<u-tag v-if="item.recommend==1" text="斑马推荐"  shape="circle" size="mini"></u-tag>
						<u-tag v-if="item.stage==1" text="可分期" type="success" shape="circle" size="mini"></u-tag> -->
					</view>
					<view class="price">
						<text>{{item.money}}</text>米
					</view>
				</view>
			</view>
			<u-empty
			v-if="goodsList.length==0"
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
			</u-empty>
		</view>
	</view>
	<u-popup :show="show" mode="top" @close="close">
		<view class="popup">
			
			<view class="item" :class="{'selectSort':sortCurrent==index}" v-for="(item,index) in sortList" :key="index" @click="sortClick(item,index)">
				{{item.name}}
			</view>
			
		</view>
	</u-popup>
	<u-popup :show="show1" mode="top" @close="close1">
		<scroll-view scroll-y="true" >
		<view class="popup popup1">
			
				
			
			<view class="labelItem">
				<view class="label">
					编号
				</view>
				<view class="value">
					<input type="text" v-model="condition.search_name" class="codeInput" placeholder="请输入需要搜索的账号编号">
				</view>
			</view>
			<view class="" style="height: 800rpx;overflow: scroll;">
				
			
			<view class="labelItem">
				<view class="label">
					标签选择
				</view>
				<view class="value">
					<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList"
							:key="index" :label="item.title" :name="item.id">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					价格区间
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_money" class="codeInput" placeholder="最低价格">
					<text>至</text>
					<input type="number" v-model="condition.max_money" class="codeInput" placeholder="最高价格">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					区服范围
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_server" class="codeInput" placeholder="XXX区">
					<text>至</text>
					<input type="number" v-model="condition.max_server" class="codeInput" placeholder="XXX区">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					金伙伴数量区间
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_partner" class="codeInput" placeholder="最少伙伴数量">
					<text>至</text>
					<input type="number" v-model="condition.max_partner" class="codeInput" placeholder="最多伙伴数量">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					VIP等级区间
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_level" class="codeInput" placeholder="最低等级">
					<text>至</text>
					<input type="number" v-model="condition.max_level" class="codeInput" placeholder="最高等级">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					战力范围(单位：亿)
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_force" class="codeInput" placeholder="最低战力">
					<text>至</text>
					<input type="number" v-model="condition.max_force" class="codeInput" placeholder="最高战力">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					速度范围(单位：万)
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_speed" class="codeInput" placeholder="最低速度">
					<text>至</text>
					<input type="number" v-model="condition.max_speed" class="codeInput" placeholder="最高速度">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					法伤范围(单位：万)
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_atk" class="codeInput" placeholder="最低法伤">
					<text>至</text>
					<input type="number" v-model="condition.max_atk" class="codeInput" placeholder="最高法伤">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					冰冻范围(单位：万)
				</view>
				<view class="value1">
					<input type="number" v-model="condition.min_property" class="codeInput" placeholder="最低冰冻">
					<text>至</text>
					<input type="number" v-model="condition.max_property" class="codeInput" placeholder="最高冰冻">
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					账号类型
				</view>
				<view class="value">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.type" >
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="labelItem">
				<view class="label">
					是否榜一
				</view>
				<view class="value">
					<u-radio-group v-model="radiovalue2" placement="row" @change="groupChange1">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList2"
							:key="index" :label="item.name" :name="item.type" >
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			</view>
			<view class="btnBox">
				<button class="btn1" @click="reset">重置</button>
				<button class="btn2" @click="getList">确定</button>
			</view>
		</view>
		</scroll-view>
	</u-popup>
	<u-overlay :show="show10" @click="show10 = false">
		<view class="warp">
			<view class="rect1" @tap.stop>
				<image src="../../static/tishi.png" mode=""></image>
				<p>该商品已出售或下架</p>
				<u-button color="#A5CF49" type="success" shape="circle" text="看看其他斑马账号" @click="show10 = false"></u-button>
			</view>
		</view>
	</u-overlay>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh,onReachBottom
	} from "@dcloudio/uni-app";
	import zpTooltip from '../../uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue'
	import {BASE_URL} from '../../utils/http.js'
	import {
		ref
	} from "vue"
	import {getbannerlist,getnoticelist,getSelLabel,getGoodsList,getplatformmeun,getplatformeditor} from '@/utils/api.js'
	let mark_notice=ref('')
	onLoad(() => {
		getplatformeditor().then(res => {
			mark_notice.value = res.data.mark_notice
		})
		uni.hideTabBar()
		getplatformmeun().then(res=>{
			text1.value=res.data.acc_notice
			let menu=res.data
				getApp().globalData.config=menu
			uni.setTabBarItem({
			  index: 0,
			  text: menu.simple_menu,
			  iconPath: BASE_URL+menu.simple_logo,
			  selectedIconPath: BASE_URL+menu.simple_logo2
			})
			uni.setTabBarItem({
			  index: 1,
			  text: menu.acc_menu,
			  iconPath: BASE_URL+menu.acc_logo,
			  selectedIconPath: BASE_URL+menu.acc_logo2
			})
			uni.setTabBarItem({
			  index: 2,
			  text: menu.jump_menu,
			  iconPath: BASE_URL+menu.jump_logo,
			  selectedIconPath: BASE_URL+menu.jump_logo2
			})
			uni.setTabBarItem({
			  index: 3,
			  text: menu.information_menu,
			  iconPath: BASE_URL+menu.information_logo,
			  selectedIconPath: BASE_URL+menu.information_logo2
			})
			uni.showTabBar()
			uni.setNavigationBarTitle({
				title: res.data.name
			});
		})
	getBanner()
	getSelLabel().then(res=>{
		labelList.value=res.data
	})
	// getnoticelist(2).then(res=>{
	// 	let data=res.data
	// 	data.forEach(item=>{
	// 		text1.value=text1.value+'   '+item.content
	// 	})
	// })
	getList()
	})
	let show10=ref(false)
	onReachBottom(()=>{
		condition.value.page++
		getList()
	})
	let groupChange=(e)=>{
		condition.value.account_type=e
	}
	let groupChange1=(e)=>{
		condition.value.is_top=e
	}
	let sortCurrent=ref(null)
	let sortClick=(item,index)=>{
		if(sortCurrent.value!=index){
			sortCurrent.value=index
			condition.value.sort_type=item.sort_type
			condition.value.sort_order=item.sort_order
			show.value=false
			current.value=0
			condition.value.page=1
			getList()
			
		}
	}
	let goodsList=ref([])
	let bg_list=ref({})
	let total_num=ref(0)
	let getList=()=>{
		show1.value=false
		current.value=0
		getGoodsList(condition.value).then(res=>{
			getNum()
			bg_list.value=res.data.bg_list
			if(condition.value.page==1){
				goodsList.value=res.data.list
			}else{
				goodsList.value=[...goodsList.value,...res.data.list]
			}
		})
	}
	let labelList=ref([])
	onShow(() => {
// setTimeout(()=>{
// 	visible.value=false
// },3000)
	})
	let getNum=()=>{
		let count=0
		if(condition.value.search_name!=''){
			count+=1
		}
		if(condition.value.label_ids.split(',')!=0){
			count+=condition.value.label_ids.split(',').length
		}
		if(condition.value.min_money!=''||condition.value.max_money!=''){
			count+=1
		}
		if(condition.value.min_server!=''||condition.value.max_server!=''){
			count+=1
		}
		if(condition.value.min_partner!=''||condition.value.max_partner!=''){
			count+=1
		}
		if(condition.value.min_level!=''||condition.value.max_level!=''){
			count+=1
		}
		if(condition.value.min_force!=''||condition.value.max_force!=''){
			count+=1
		}
		
		if(condition.value.min_speed!=''||condition.value.max_speed!=''){
			count+=1
		}
		// console.log(123,condition.value.min_atk,condition.value.max_atk)
		if(condition.value.min_atk!=''||condition.value.max_atk!=''){
			count+=1
		}
		if(condition.value.min_property!=''||condition.value.max_property!=''){
			count+=1
		}
		if(condition.value.account_type!=0){
			count+=1
		}
		
		if(condition.value.is_top!=-1){
			count+=1
		}
		total_num.value=count
	}
	let reset=()=>{
		radiovalue1.value = ref(0)
		radiovalue2.value = ref(-1)
		checkboxValue1.value=[]
		condition.value={
			page:1,
			page_num:10,
			sort_type:'',
			sort_order:'',
			min_money:'',
			max_money:'',
			min_server:'',
			max_server:'',
			min_partner:'',
			max_partner:'',
			min_level:'',
			max_level:'',
			min_force:'',
			max_force:'',
			min_speed:'',
			max_speed:'',
			min_atk:'',
			max_atk:'',
			min_property:'',
			max_property:'',
			account_type:0,
			is_top:-1,
			label_ids:'',
			search_name:''
		}
	}
	let sortList=[
		{name:'最近发布',sort_type:1,sort_order:1},
		// {name:'发布时间从远到近',sort_type:1,sort_order:2},
		{name:'价格从高到低',sort_type:2,sort_order:1},
		{name:'价格从低到高',sort_type:2,sort_order:2},
		{name:'战力从高到低',sort_type:3,sort_order:1},
		{name:'战力从低到高',sort_type:3,sort_order:2},
		{name:'冰冻从高到低',sort_type:4,sort_order:1},
		{name:'冰冻从低到高',sort_type:4,sort_order:2},
		{name:'速度从高到低',sort_type:5,sort_order:1},
		{name:'速度从低到高',sort_type:5,sort_order:2},
		{name:'法伤从高到低',sort_type:6,sort_order:1},
		{name:'法伤从低到高',sort_type:6,sort_order:2},
		{name:'vip等级排序',sort_type:7,sort_order:1},
		// {name:'vip等级从低到高',sort_type:7,sort_order:2},
	]
	let condition=ref({
		page:1,
		page_num:10,
		sort_type:'',
		sort_order:'',
		min_money:'',
		max_money:'',
		min_server:'',
		max_server:'',
		min_partner:'',
		max_partner:'',
		min_level:'',
		max_level:'',
		min_force:'',
		max_force:'',
		min_speed:'',
		max_speed:'',
		min_atk:'',
		max_atk:'',
		min_property:'',
		max_property:'',
		account_type:0,
		is_top:-1,
		label_ids:'',
		search_name:''
	})
	let getBanner=()=>{
		getbannerlist().then(res=>{
			res.data.forEach(item=>{
				item.image=BASE_URL+item.image
			})
			swiperList.value=res.data
			
		})
	}
	let toInfo=(item)=>{
		if(item.status==0){
			show10.value=true
			return
		}
		uni.navigateTo({
			url:`/pages/deal/productInfo?id=${item.id}`+(item.rand_num?`&rand_num=${item.rand_num}`:'')
			// url:'/pages/deal/productInfo?id='+6
		})
	}
	let visible=ref(true)
	let  swiperList=ref([]) 
	let radiovalue1 = ref(0)
	let radiovalue2 = ref(-1)
	let checkboxValue1 = ref([])
	let checkboxChange = (n) => {
		condition.value.label_ids=n.toString()
	}
	let  text1=ref('')
	// 基本案列数据
	let checkboxList1 = [{
			name: '全部',
			type: 0
		},
		{
			name: '手机',
			type: 1
		},
		{
			name: '邮箱',
			type: 2
		},
		{
			name: '微信/qq',
			type: 3
		}
	]
	let checkboxList2 = [{
			name: '全部',
			type: -1
		},
		{
			name: '否',
			type: 0
		},
		{
			name: '是',
			type: 1
		}
		
	]
	let show = ref(false)
	let show1 = ref(false)
	let current = ref(0)
	let sort = (type) => {
		if (current.value != type) {
			current.value = type
			if (type == 1) {
				show.value = true
				show1.value = false
			} else {
				show1.value = true
				show.value = false
			}
		} else {
			current.value = 0
			show.value = false
			show1.value = false
		}
	}
	let close = () => {
		show.value = false
		current.value = 0
	}
	let close1 = () => {
		show1.value = false
		current.value = 0
	}
	onPullDownRefresh(() => {
		reset()
		getList()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
</script>

<style>
	uni-button:after{
		border:none;
	}
</style>
<style lang="scss">
	.notice{
		height: 37px;
		overflow: hidden;
	}
	.warp {
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect1 {
		padding: 60rpx 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 558rpx;
		height: 438rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	
		image {
			width: 96rpx;
			height: 96rpx;
		}
	
		p {
			font-size: 24rpx;
			margin: 62rpx 0 40rpx;
		}
	
		// background-color: #fff;
	}
	.labelBox{
		margin: 10rpx 0;
		display: flex;
		flex-wrap: wrap;
		.labelItem{
			margin-right: 20rpx;
			margin-bottom: 5rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #fff;
border-radius: 30rpx;
			padding: 7rpx 16rpx;
			background-position: center center; 
			background-repeat: no-repeat;
			background-size: cover;
			// background-color: #A5CF49;
		}
	}
	.selectSort{
		color: rgb(165, 207, 73);
	}
	.accountList{
		background-color: #FFFFFF;
		.accountItem{
			border-bottom: 20rpx solid #F5F5F5;
			display: flex;
			padding: 8rpx 24rpx;
			align-items: center;
			.imgBox{
				overflow: hidden;
				position: relative;
				margin-right: 26rpx;
				image{
					width: 188rpx;
					max-height: 188rpx;
					border-radius: 10rpx;
					
				}
				.bar{
					display: flex;
					justify-content: center;
					font-weight: bold;
					overflow: hidden;
					font-size: 28rpx;
					color: #fff;
					padding: 5rpx;
					// text-align: center;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: 188rpx;
					background: red;
				}
				.bule{
					background: blue;
				}
			}
			
			.introduction{
				flex: 1;
				
				.title{
					color: #000000;
					font-weight: bold;
					font-size: 28rpx;
				}
				.u-fade-enter-active{
					margin-top: 0;
					padding: 10rpx;
				}
				.price{
					color: #FF2828;
					font-size: 24rpx;
					text{
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	.btnBox {
		margin-top: 100rpx;
		display: flex;
		justify-content: right;

		button {
			margin: 0;
			margin-left: 40rpx;
			padding: 0;
			width: 206rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			font-size: 24rpx;
		}

		.btn1 {

			background: #F5F5F5;
		}

		.btn2 {

			background: #A5CF49;
			color: #fff;
		}
	}

	.labelItem {
		.label {
			font-size: 24rpx;
			font-weight: bold;
			margin: 24rpx 0 10rpx;
		}

		.value {
			.codeInput {
				font-size: 24rpx;
				width: 562rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 0 24rpx;
			}
		}

		.value1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				font-size: 24rpx;
				text-align: center;
				width: 231rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 0 24rpx;
			}
		}
	}

	.popup {
		padding: 0 40rpx;
		font-size: 24rpx;

		.item {
			line-height: 90rpx;
			border-bottom: 1rpx solid #F5F5F5;

		}
	}

	.popup1 {
		
		padding: 0 40rpx 40rpx;
	}

	::v-deep .u-checkbox {
		span {
			font-size: 24rpx !important;
		}

		margin-right: 20rpx;
	}

	::v-deep .u-radio {
		span {
			font-size: 24rpx !important;
		}

		margin-right: 20rpx;
	}

	::v-deep .u-fade-enter-active {
		margin-top: 89px;
	}

	::v-deep .u-slide-down-enter-to {
		top: 49px !important;
	}

	.select {
		transform: rotate(180deg);
	}

	page {
		.sort {
			border-top: 1rpx solid #F2F2F2;
			width: 750rpx;
			height: 120rpx;
			line-height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			display: flex;
			position: sticky;
			top: 0;
			z-index: 99999;
			.sortItem {
				position: relative;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				
				text {
					margin-right: 16rpx;
				}
				.tips{
					width: 100%;
					text-align: center;
					position: absolute;
					bottom: -40rpx;
					left: 0;
					// transform: translateX(-50%);
					font-size: 8rpx;
					white-space: nowrap;
					color: #000;
					font-weight: bold;
					// transform: scale(0.8);
					
				}
			}
		}
	}
</style>