You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
6.6 KiB
236 lines
6.6 KiB
<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>
|