carrent-front/pages_subpack/category/index.vue

<template>
	<view>
		<view class="se-pos-fixed se-pos-lt se-w-p-100">
			<view class="se-p-20" style="background: linear-gradient(168deg,#669a32 0%, #669a32 100%);">
				<u-search @click="onSearch()" @search="onSearch()" :showAction="false" bgColor="#fff" placeholder="搜索" v-model="goodsName"></u-search>
			</view>
			<view class="se-flex se-bgc-white se-fs-26 se-h-80 se-b-b">
				<view class="se-flex-1 se-flex se-flex-h-c" @click="handleCategoryTwoChange()">
					<text class="se-mr-10" v-if="categorytwoName">{{categorytwoName}}</text>
					<text class="se-mr-10" v-else>分类</text>
					<u-icon name="arrow-down-fill" color="#666666"></u-icon>
				</view>
				<view class="se-flex-1 se-b-l se-b-r  se-flex se-flex-h-c" @click="showDate=true">
					<text class="se-mr-10" v-if="goodsTime">{{goodsTime}}</text>
					<text class="se-mr-10" v-else>时间</text>
					<u-icon name="arrow-down-fill" color="#666666"></u-icon>
				</view>
				<view class="se-flex-1  se-flex se-flex-h-c" @click="handleMileageChange()">
					<text class="se-mr-10" v-if="mileageName">{{mileageName}}</text>
					<text class="se-mr-10" v-else>公里数</text>
					<u-icon name="arrow-down-fill" color="#666666"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="se-grid-2 se-pt-200">
			<view class="items-box se-br-5 se-px-10" v-for="(items,indexs) in list" :key="indexs" @click="onDetail(items)">
				<image class="se-w-p-100 se-h-200 se-bgc-f5 se-br-5  se-py-5" :src="items.image" mode=""></image>
				<view class="se-c-black se-fs-24 se-fw-6 se-mt-10">
					{{ items.goodsName }}
				</view>
				<view class="se-flex se-mt-10">
					<view class="se-tag">
						{{items.cartypeId_dictText}}
					</view>
					<view class="se-tag">
						{{items.categorytwoId_dictText}}
					</view>
				</view>
				<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
					<view class="se-fs-24 se-display-ib">
						<text class="se-c-orange se-fs-30 se-fw-6"><text class="se-fs-24">￥</text>{{items.price}}<text class="se-fs-24">元</text></text>
					</view>
					<view class="se-display-ib se-bgc-orange se-px-15 se-br-40 se-flex-h-c se-h-40 se-lh-40 se-ta-c se-fs-22 se-c-white se-b">
						<text>查看详情</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list && list.length==0" mode="list"></u-empty>
		<u-action-sheet :actions="categoryTwoList" @select="selectCategoryTwoClick" title="分类" :show="categoryTwoShow" @close="categoryTwoClose"></u-action-sheet>
		<u-action-sheet :actions="mileageList" @select="selectMileageClick" title="公里数" :show="mileageShow" @close="MileageClose"></u-action-sheet>
		<u-datetime-picker
				:show="showDate"
				v-model="date"
				mode="date"
				@confirm="onConfirm"
				@cancel="onCancel"
		></u-datetime-picker>
	</view>
</template>

<script>
	import { queryGoodsList,queryCategoryTwoList,queryMileageList } from "@/common/api.js"
	export default{
		data(){
			return{
				mileageShow:false,
				showDate:false,
				goodsName:null,
				id:null,
				goodsTime:null,
				date:Number(new Date()),
				categoryTwoShow:false,
				categorytwoId:null,
				categorytwoName:null,
				categoryTwoList:[],
				mileageId:null,
				mileageName:null,
				mileageList:[],
				pageNo:1,
				list:[],
			}
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
			}
			this.onPageList()
			this.onQueryCategoryTwoList()
			this.onQueryMileageList()
		},
		onPullDownRefresh() {
			let that = this
			that.pageNo =  1
			that.list = []
			that.onPageList()
		},
		onReachBottom() {
			let that = this
			that.pageNo = that.pageNo + 1
			that.onPageList()
		},
		methods:{
			onCancel(){
				this.goodsTime=""
				this.showDate = false
				this.onPageList()
			},
			onConfirm(e){
				console.info('e',e)
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				this.goodsTime = `${year}-${month}-${day}`;
				this.showDate = false
				this.pageNo =  1
				this.onPageList()
			},
			handleCategoryTwoChange(){
				console.info('handleCategoryTwoChange')
				this.categoryTwoShow = true
			},
			categoryTwoClose(){
				this.categoryTwoShow = false
				this.pageNo =  1
			},
			handleMileageChange(){
				this.mileageShow = true
			},
			MileageClose(){
				this.mileageShow = false
				this.pageNo =  1
			},
			selectMileageClick(event){
				console.info("selectMileageClick",event)
				this.mileageId = event.id
				this.mileageName = event.mileage
				this.mileageShow = false
				this.pageNo =  1
				this.onPageList()
			},
			selectCategoryTwoClick(event){
				console.info("selectCategoryTwoClick",event)
				this.categorytwoId = event.id
				this.categorytwoName = event.name
				this.categoryTwoShow = false
				this.pageNo =  1
				this.onPageList()
			},
			onQueryCategoryTwoList(){
				let that = this
				let params = {
					categoryoneId:"1867039853005877250"
				}
				queryCategoryTwoList(params).then(response=>{
					console.info("queryCategoryTwoList",response)
					that.categoryTwoList = response.result.records
				}).catch(error=>{
					
				})
			},
			onQueryMileageList(){
				let that = this
				let params = {}
				queryMileageList(params).then(response=>{
					console.info("queryMileageList",response)
					response.result.forEach(items=>{
						items.name = items.mileage
					})
					that.mileageList = response.result
				}).catch(error=>{
					
				})
			},
			onSearch(){
				this.pageNo =  1
				this.onPageList()
			},
			onPageList(){
				let that = this
				let params={
					cartypeId:that.id,
					categorytwoId:that.categorytwoId,
					mileage:that.mileageName,
					goodsTime:that.goodsTime,
					goodsName:that.goodsName,
					pageNo:that.pageNo,
					pageSize:that.pageSize
				}
				queryGoodsList(params).then((response) => {
					console.info('queryGoodsList',response)
					if(that.pageNo==1){
						that.list = response.result.records
					}else{
						that.list = that.list.concat(response.result.records) 
					}
					
				}).catch((error) =>{
					
				})
			},
			onDetail(event){
				uni.navigateTo({
					url:"/pages_subpack/detail/index?goodsId="+event.id
				})
			},
		}
	}
</script>

<style>
	.items-box{
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.05); 
		padding: 20rpx;
	}
	.se-tag{
		padding: 5rpx 10rpx;
		background: #fff2df;
		border-radius: 4rpx;
		border: 2rpx solid rgba(0,0,0,0.00);
		font-size: 16rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #fab143;
		margin-left: 10rpx;
	}
	
	.se-tag:first-child{
		margin-left: 0rpx;
	}
</style>