环卫车小程序前端代码
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.
 
 
 

314 lines
9.2 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.images[0]" mode=""></image>
<view class="se-c-black se-fs-24 se-fw-6 se-mt-10">
{{ items.goodsName }}
</view>
<view class="se-flex se-flex-ff-rw se-mt-10" v-if="items.categoryoneName!='环卫设备及配件'">
<view class="se-tag">
{{items.brand}}
</view>
<view class="se-tag">
{{items.goodsTime}}
</view>
<view class="se-tag">
{{items.mileage}}公里
</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-26 se-fw-6"><text class="se-fs-24">¥</text>{{items.price | getPersonAuthentication}}<text class="se-fs-24">元</text><text class="se-fs-24" v-if="items.cartypeId=='1875536807086256130'">/月</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> -->
<u-picker :show="showDate" :columns="columns" @confirm="onConfirm"
@cancel="onCancel"></u-picker>
</view>
</template>
<script>
import { queryGoodsList,queryCategoryTwoList,queryCategoryList,queryMileageList } from "@/common/api.js"
export default{
data(){
return{
columns:[["全部",'2025', '2024', '2023', '2022', '2020', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']],
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()
},
filters:{
getPersonAuthentication(price){
let companyAuthenticationStatus = uni.getStorageSync("companyAuthenticationStatus")
if(companyAuthenticationStatus==1){
return price
}
let personAuthenticationStatus =uni.getStorageSync("personAuthenticationStatus")
if (personAuthenticationStatus != 1){
return '***';
}
return price
}
},
methods:{
onCancel(){
this.goodsTime=""
this.showDate = false
this.onPageList()
},
onConfirm(e){
this.goodsTime = e.value[0];
this.showDate = false
// 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:that.id,
categoryOneId:that.id,
}
queryCategoryList(params).then(response=>{
// queryCategoryTwoList(params).then(response=>{
console.info("queryCategoryTwoList",response)
if(response.result.length>0){
let arr = [{id:null,name:"全部"}]
that.categoryTwoList = arr.concat(response.result[0].carrentCategorytwoList)
}
}).catch(error=>{
})
},
onQueryMileageList(){
let that = this
let params = {}
queryMileageList(params).then(response=>{
console.info("queryMileageList",response)
response.result.forEach(items=>{
items.name = items.mileage
})
let arr = [{id:null,name:"全部"}]
that.mileageList = arr.concat(response.result)
}).catch(error=>{
})
},
onSearch(){
this.pageNo = 1
this.onPageList()
},
onPageList(){
let that = this
let params={
status:1,
cartypeId:that.id,
categorytwoId:that.categorytwoId,
mileage:that.mileageName,
goodsTime:that.goodsTime!='全部'?that.goodsTime:'',
goodsName:that.goodsName,
pageNo:that.pageNo,
pageSize:that.pageSize,
}
queryGoodsList(params).then((response) => {
console.info('queryGoodsList',response)
response.result.records.forEach((items,indexs)=>{
if(items.image){
items.images = items.image.split(',')
}else{
items.images = []
}
if(items.imageBack){
items.imageBacks = items.imageBack.split(',')
}else{
items.imageBacks = []
}
if(items.imageCab){
items.imageCabs = items.imageCab.split(',')
}else{
items.imageCabs = []
}
if(items.imageFront){
items.imageFronts = items.imageFront.split(',')
}else{
items.imageFronts = []
}
if(items.imageLeft){
items.imageLefts = items.imageLeft.split(',')
}else{
items.imageLefts = []
}
if(items.imageRight){
items.imageRights = items.imageRight.split(',')
}else{
items.imageRights = []
}
})
if(that.pageNo==1){
that.list = response.result.records
}else{
that.list = that.list.concat(response.result.records)
}
}).catch((error) =>{
})
},
onDetail(event){
let companyAuthenticationStatus = uni.getStorageSync("companyAuthenticationStatus")
if(companyAuthenticationStatus==1){
uni.navigateTo({
url:"/pages_subpack/detail/index?goodsId="+event.id
})
return;
}
let personAuthenticationStatus =uni.getStorageSync("personAuthenticationStatus")
if (personAuthenticationStatus != 1){
return uni.showModal({
title:"未认证",
showCancel:false,
content:"立即前往认证",
success() {
uni.navigateTo({
url:"/pages/identity/index?userStatus=1"
})
}
})
}
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{
margin-right: 10rpx;
margin-top: 5px;
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;
}
</style>