detection-user/pages/detection/VehicleInspection.vue

623 lines
13 KiB
Vue
Raw Normal View History

2024-09-01 18:16:43 +08:00
<template>
<view class="content">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-t-input">
<uni-icons type="search" size="22" color="#BCBCBC"></uni-icons>
<input type="text" placeholder="输入关键词搜索" v-model="searchValue">
</view>
<view class="" @click="sousuo()">搜索</view>
</view>
<view class="top-list">
<view class="list-box" @click="getqbfl()">
<view class="">全部分类<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
<view :class="{'lan':threeoptions == 2}" class="list-box" @click="getfwjl()">
<view class="">距离优先<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
<view class="list-box" @click="getzhsx()">
<view class="">综合筛选<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
</view>
<!-- 遮罩 -->
<u-overlay class="nbian" :show="show" @click="show = false">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-t-input">
<uni-icons type="search" size="22" color="#BCBCBC"></uni-icons>
<input type="text" placeholder="输入关键词搜索">
</view>
<view class=""></view>
</view>
<view class="top-list">
<view :class="{'lan':threeoptions == 1}" class="list-box" @tap.stop="getqbfl()">
<view class="">全部分类<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
<view class="list-box">
<view class="">距离优先<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
<view :class="{'lan':threeoptions == 3}" class="list-box" @tap.stop="getzhsx()">
<view class="">综合筛选<uni-icons type="bottom" size="14"></uni-icons></view>
</view>
</view>
<!-- 全部分类 -->
<scroll-view class="x-xiang" scroll-y :scroll-with-animation="true" :style="scrollStyle"
v-if="threeoptions == 1">
<view :class="{'ax':pding == index}" class="ann" v-for="(item,index) in Alloptions" :key="index"
@tap.stop="qhzz(index ,item.id)">
<view class="">{{item.categoryName}}</view>
</view>
</scroll-view>
<!-- 综合筛选 -->
<view class="x-ing" v-if="threeoptions == 3">
<view class="">检测分类</view>
<!-- 要处理的地方 -->
<scroll-view class="x-xiang" scroll-y :scroll-with-animation="true" :style="scrollStyle">
<view :class="{'ax':pding == index}" class="ann" v-for="(item,index) in Alloptions" :key="index"
@tap.stop="qhzz(index ,item.id)">
<view class="">{{item.categoryName}}</view>
</view>
</scroll-view>
<view class="">距离范围 <text class="lan">{{distance?distance:100}} km</text></view>
<u-slider v-model="distance" inactiveColor="#0D2E8D" activeColor="#0D2E8D" min="1" max="80"></u-slider>
<view class="">评价筛选</view>
<view class="x-xiang">
<view :class="{'ax':orderType == 'hp'}" class="ann" @tap.stop="gethp">
<view class="">好评优先</view>
</view>
<view :class="{'ax':orderType == 'xl'}" class="ann" @tap.stop="getxl">
<view class="">销量优先</view>
</view>
</view>
</view>
<view class="xsanniu" @tap.stop="show = false">
<view class="fanhu">
<view class="">返回</view>
</view>
<view class="wc" @tap.stop="getwc">
<view class="">完成</view>
</view>
</view>
</u-overlay>
<!-- 遮罩结束 -->
<view class="dil">
<view class="bjimg" v-if="listarr == ''">
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
</view>
<view class="d-box" v-for="(item,index) in listarr" :key="index">
<view class="box-top">
<view style="display: flex;">
<view class="touxiang">
<image :src="item.partnerLogo" mode="aspectFit"></image>
</view>
<view class="top-tile">
<view class="dix">
<view class="da">{{item.partnerName}}</view>
<view class="huang">{{item.averageScore}} <uni-icons type="star-filled" color="#FF9600"
size="14"></uni-icons></view>
</view>
<view class="dix">
<view class="sanyuan">
<view class="xhui">距离:</view>
<view v-if="item.distance >=1000" class="dda">{{(item.distance/1000).toFixed(2)}}
<text class="xhei">km</text>
</view>
<view v-else class="dda">{{item.distance}} <text class="xhei">m</text> </view>
</view>
<!-- <view class="sanyuan">
<view class="xhui">月销量:</view>
<view class="dda">{{item.salesNum?item.salesNum:0}}</view>
</view> -->
</view>
</view>
</view>
<view class="top-anniu" @click="gomerchant(item.partnerId)">
<view class="">预约进店</view>
</view>
</view>
<scroll-view scroll-x="true" class="box-bottom">
<view class="santu" v-for="(items,index) in item.goodsList" :key="index">
<view class="simg">
<image :src="items.goodsImage" mode=""></image>
</view>
<view class="ming">{{items.goodsTitle}}</view>
<view class="jus">{{items.price / 100}}</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
import config from '@/config'
export default {
data() {
return {
searchValue: "",
categoryId: "",
distance: null, //距离
threeoptions: 1, //三选
Alloptions: [], //全部分类
show: false,
listarr: [],
baseUrl: '',
pding: 0, //综合筛选
pjing: false, //评价筛选
hzc: false,
longitude: "105.442024",
latitude: "28.871325",
orderType: "",
pageNum: 1, //第几页
pageSize: 20, //一页多少张
totalPages: 0, //总数
}
},
onReachBottom() {
console.log("分页")
if (this.pageNum >= this.totalPages) {
uni.showToast({
title: '没有下一页数据',
icon: 'none'
})
} else {
this.pageNum++
console.log(222)
this.getlistindex()
}
},
onShow() {
this.baseUrl = this.$baseUrl
this.getlist()
},
methods: {
async getlist() {
// 列表获取
let that = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
let data = {
longitude: res.longitude,
latitude: res.latitude,
orderType: that.orderType,
categoryId: that.categoryId,
searchValue: that.searchValue,
distance: that.distance,
pageSize: that.pageSize,
pageNum: that.pageNum
}
request({
url: '/appInspection/partner/list',
method: 'get',
params: data
}).then(res => {
if (that.pageNum != 1) {
that.listarr = that.listarr.concat(res.rows)
} else {
that.listarr = res.rows
}
let total = res.total
that.totalPages = Math.ceil(total / that.pageSize);
})
},
fail() {
let data = {
longitude: that.longitude,
latitude: that.latitude,
orderType: that.orderType,
categoryId: that.categoryId,
searchValue: that.searchValue,
distance: that.distance,
pageSize: that.pageSize,
pageNum: that.pageNum
}
request({
url: '/appInspection/partner/list',
method: 'get',
params: data
}).then(res => {
if (that.pageNum != 1) {
that.listarr = that.listarr.concat(res.rows)
} else {
that.listarr = res.rows
}
let total = res.total
that.totalPages = Math.ceil(total / that.pageSize);
})
}
});
let rex = await request({
url: '/appInspection/goods/categoryList',
method: 'get',
})
console.log(rex);
this.Alloptions = rex.data
this.Alloptions.unshift({
categoryName: '全部'
})
},
gomerchant(id) {
uni.navigateTo({
url: '/pages/detection/MerchantDetails?id=' + id
})
},
sousuo() {
this.listarr = []
this.getlist()
},
getqbfl() {
//全部分类
this.show = true
this.threeoptions = 1
},
getfwjl() {
//距离
this.threeoptions = 2
if (this.orderType == "jl") {
this.orderType = ""
} else {
this.orderType = "jl"
}
this.getlist()
},
getzhsx() {
//综合筛选
this.show = true
this.threeoptions = 3
},
qhzz(index, id) {
this.pding = index
this.categoryId = id
},
getback() {
uni.navigateBack()
},
gethp() {
this.orderType = "hp"
},
getxl() {
this.orderType = "xl"
},
getwc() {
this.show = false
this.getlist()
}
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100vh);
background-color: #F6F6F6;
box-sizing: border-box;
// padding-top: 45px;
}
.dil {
box-sizing: border-box;
background-color: #F6F6F6;
padding: 0px 12px;
}
.lan {
color: #0D2E8D;
}
.dix {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.d-box {
background: #FFFFFF;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
}
.box-top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.touxiang {
width: 70px;
height: 70px;
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.bjimg {
width: 255px;
height: 236px;
margin: 0px auto;
margin-top: 100px;
image {
width: 100%;
height: 100%;
}
}
.top-tile {
margin-left: 15px;
}
.da {
font-size: 18px;
font-weight: bold;
color: #333333;
}
.huang {
margin-left: 20px;
color: #FF9600;
font-size: 14px;
}
.top-anniu {
width: 70px;
height: 24px;
background: #0D2E8D;
border-radius: 50px;
display: flex;
font-size: 14px;
justify-content: center;
align-items: center;
color: white;
}
.box-cont {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 15px;
}
.sanyuan {
margin-top: 22px;
text-align: center;
display: flex;
align-items: center;
}
.dda {
font-size: 14px;
font-weight: 500;
color: #333333;
margin-right: 10px;
}
.xhui {
font-size: 14px;
font-weight: 400;
color: #999999;
margin-right: 5px;
}
.xbox {
width: 100%;
display: flex;
}
.xhei {
font-size: 14px;
font-weight: 400;
color: #333333;
margin-left: 5px;
}
.box-bottom {
width: 100%;
box-sizing: border-box;
white-space: nowrap;
// display: flex;
// justify-content: space-between;
// align-items: center;
}
.santu {
width: 32%;
display: inline-block;
// width: 100px;
margin-top: 15px;
margin-right: 10px;
}
.simg {
width: 100%;
height: 80px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.ming {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 400;
color: #333333;
margin: 0px auto;
}
.jus {
font-size: 15px;
font-weight: bold;
color: #FF571A;
}
.c-top {
width: 100%;
box-sizing: border-box;
padding: 15px;
padding-top: 22%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.c-t-input {
width: 80%;
background-color: #F0F0F0;
color: #BCBCBC;
height: 40px;
border-radius: 50px;
display: flex;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
}
.c-title {
font-size: 18px;
font-weight: bold
}
.top-list {
width: 100%;
height: 88rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
}
.list-box {
height: 100%;
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
/* 遮罩 */
.xuanx {
position: fixed;
top: 260rpx;
width: 100%;
height: calc(100vh);
background: rgba(0, 0, 0, 0.2)
}
.nbian {
padding-top: 45px;
}
.x-xiang {
width: 100%;
height: 250px;
background: white;
box-sizing: border-box;
padding: 30rpx;
display: flex;
flex-wrap: wrap;
overflow-y: hidden;
/* 隐藏横向滚动条 */
}
.x-ing {
width: 100%;
background: white;
box-sizing: border-box;
padding: 30rpx;
}
.ann {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #F2F6FF;
border-radius: 24rpx;
padding: 10rpx 30rpx;
color: #666666;
font-size: 28rpx;
margin-right: 20rpx;
margin-bottom: 30rpx;
}
.ax {
font-size: 28rpx;
background: #0D2E8D;
color: white !important;
}
.xsanniu {
border-top: 1px solid #EEEEEE;
background: white;
box-sizing: border-box;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.wc {
width: 436rpx;
height: 80rpx;
background: #0D2E8D;
border-radius: 40rpx;
display: flex;
align-items: center;
color: white;
font-size: 32rpx;
justify-content: center;
}
.fanhu {
width: 224rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 40rpx 40rpx;
opacity: 1;
border: 2rpx solid #0D2E8D;
display: flex;
align-items: center;
color: #0D2E8D;
justify-content: center;
}
</style>