lanan-old/detection-user/pages/detection/detection.vue
愉快的大福 7dc28dc701 init
2024-07-17 14:16:22 +08:00

1018 lines
19 KiB
Vue

<!-- 默认复制 -->
<template>
<view class="content">
<u-overlay :show="show" @click="show = false">
<view class="warp">
<view class="warp-top">
<image src="http://www.nuoyunr.com/lananRsc/detection/gold.png" mode=""></image>
</view>
<view class="bcai-title">平台福利</view>
<view class="w-box">
<view class="war-box" v-for="(item,index) in couponlist" :key="index">
<view class="war-left">
<text>¥{{item.discount / 100}}</text>
</view>
<view class="war-right">
<text>{{item.title}}</text>
</view>
</view>
</view>
<view class="wrap-bott">
<image src="http://www.nuoyunr.com/lananRsc/detection/red.png" mode=""></image>
</view>
<view class="rect" @tap.stop="drawDownCoupon()">
<text>立即领取</text>
</view>
</view>
</u-overlay>
<view class="dil">
<view class="sousuo" @click="hunong()">
<view class=""><uni-icons type="search" size="18"></uni-icons></view>
<input type="text" placeholder="输入关键词搜索">
</view>
<!-- banner -->
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item v-for="(item,index) in bannerliet" :key="index">
<view class="swiper-box">
<image :src="baseUrl+ item.swiperPicture" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- jingangq -->
<view class="jgq">
<view class="j-box" @click="goshowMenu()">
<view class="j-img">
<image src="http://www.nuoyunr.com/lananRsc/detection/hmzc.png" mode=""></image>
</view>
<view class="">
<text>使用说明</text>
</view>
</view>
<!-- <view class="j-box" @click="getgolist(2)">
<view class="j-img">
<image src="http://www.nuoyunr.com/lananRsc/detection/hygg.png" mode=""></image>
</view>
<view class="">
<text>行业公告</text>
</view>
</view> -->
<view class="j-box" @click="getgolist(3)">
<view class="j-img">
<image src="http://www.nuoyunr.com/lananRsc/detection/qcjc.png" mode=""></image>
</view>
<view class="">
<text style="font-size: 20px; font-weight: bold;">我要审车</text>
</view>
</view>
<view class="j-box" @click="goM()">
<view class="j-img">
<image src="http://www.nuoyunr.com/lananRsc/detection/mz.png" mode=""></image>
</view>
<view class="">
<text>M站信息</text>
</view>
</view>
<view class="j-box" @click="gostatistics" v-if="jcgfRole == true">
<view class="j-img">
<image src="http://www.nuoyunr.com/lananRsc/detection/jcsj.png" mode=""></image>
</view>
<view class="">
<text>检测数据</text>
</view>
</view>
</view>
<!-- touzhi -->
<view class="notice">
<view class="n-img">
<!-- <image src="http://www.nuoyunr.com/lananRsc/detection/tzggg.png" mode=""></image> -->
<div class="tongzhi">通知</div>
<div class="gonggao">公告</div>
</view>
<view class="n-right">
<!-- <view class="lists">
<view :class="{ top: animate == true }">
<view class="list" v-for="(item,index) in text" :key="index" @click="getdetails(item.id)">
<view class="n-title">{{item.newsTitle}}</view>
<view class="n-zi" v-html="item.newsContent" > 文章信息</view>
</view>
</view>
</view> -->
<view class="uni-xiugai-wrap">
<swiper class="swipers" :vertical="true" circular :indicator-dots="indicatorDots"
:autoplay="autoplay" :interval="interval" :duration="duration">
<view class="list" v-for="(item,index) in text" :key="index" @click="getdetails(item.id)">
<swiper-item>
<view class="n-title">{{item.newsTitle}}</view>
</swiper-item>
</view>
</swiper>
</view>
<view style="display: flex; width: 30%; align-items: center; color: #999999;" @click="getgolist(2)">
<view style="font-weight: bold;">更</view>
<view style="font-weight: bold;">多</view>
<uni-icons type="right" color="#999999" size="26"></uni-icons>
</view>
</view>
</view>
<!-- shangpin -->
<view class="Productbox">
<view class="p-top">
<view class="p-left">
<view class="p-lan">附近检测站</view>
<view class="gang"></view>
</view>
<!-- <view class="p-right">
<view class="p-z">更多检测</view>
<view class="">
<uni-icons type="right" color="#AAAAAA" size="16"></uni-icons>
</view>
</view> -->
</view>
<view class="p-cont">
<view class="dlist-box" v-for="(item,index) in listarr" :key="index"
@click="getpartnerId(item.partnerId)">
<view class="listimg">
<image :src="baseUrl + item.partnerLogo" mode=""></image>
</view>
<view class="listright">
<view class="n-title">{{item.partnerName}}</view>
<view class="dix">
<view class="huang">
<!-- <text>{{item.averageScore}}</text>-->
<!-- <uni-icons type="star-filled" color="#FF9600" size="10"></uni-icons>-->
</view>
<!-- <view class="hui">
<text>已售{{item.salesNum}}</text>
</view> -->
</view>
<view class="dixb">
<view class="hui">{{item.address}}</view>
<text>{{jlFunction(item.distance)}}</text>
</view>
</view>
</view>
</view>
<view style="width: 100%; height: 60px;"></view>
</view>
</view>
<tabBar :msg="msg"></tabBar>
</view>
</template>
<script>
import config from '@/config'
import request from '../../utils/request';
import tabBar from '../../components/detection/tabBar.vue'
import {
getToken
} from '@/utils/auth'
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
roles: [],
jcshopRole: false,
jcgfRole: false,
msg: "1",
text: [{
size: '公告的详细内容,最多展示两行多余部分一省略号代替公告的详细内容,最多展示两...'
}, ],
baseUrl: this.$baseUrl,
bannerliet: [],
background: ['color1', 'color2', 'color3'],
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 500,
goodslist: [],
animate: false,
timer: null,
notics: [],
listarr: [],
couponlist: [],
show: false,
longitude: "105.442024",
latitude: "28.871325",
}
},
components: {
tabBar,
},
onLoad() {
this.handleScrollNotice();
// this.baseUrl = this.$baseUrl
this.getbanner()
this.timer = setInterval(this.scroll, 8000)
this.vgetlist()
this.canLedCoupon()
},
onShow() {
console.log(uni.getStorageSync('role'))
this.roles = uni.getStorageSync('role')
if (this.roles) {
this.roles.forEach(item => {
if (item == 'jcgf') {
this.jcgfRole = true
}
})
}
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '机动车管家',
path: '/pages/detection/detection'
}
},
onShareTimeline(res) {
return {
title: '机动车管家',
path: '/pages/detection/detection'
}
},
methods: {
goshowMenu() {
uni.downloadFile({
url: 'https://www.nuoyunr.com/cdJdc/profile/upload/2023/08/19/jdcSysc.pdf',
success: function(res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res) {
console.log('打开文档成功');
}
});
}
});
return
},
hunong() {
uni.navigateTo({
url: '/pages/detection/VehicleInspection'
})
},
async canLedCoupon() {
if (!getToken()) {
return
}
let res = await request({
url: '/appInspection/goods/canLedCouponPlatform',
method: 'get',
})
console.log(res);
this.couponlist = res.data.slice(0, 3);
if (res.data.length > 0) {
this.show = true
}
},
async drawDownCoupon() {
let res = await request({
url: '/appInspection/goods/drawDownCouponPlatform',
method: 'post',
})
uni.showToast({
title: '领取成功'
})
this.show = false
},
async vgetlist() {
// 列表获取
let that = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
let data = {
longitude: res.longitude,
latitude: res.latitude,
}
request({
url: '/appInspection/appHome/homePartner',
method: 'get',
params: data
}).then(res => {
that.listarr = res.rows
})
},
fail(e) {
console.log(e)
let data = {
longitude: that.longitude,
latitude: that.latitude,
}
request({
url: '/appInspection/appHome/homePartner',
method: 'get',
params: data
}).then(res => {
that.listarr = res.rows
})
}
});
},
jlFunction(num) {
let snum = num / 1000
if (snum >= 1) {
return snum.toFixed(2) + 'Km'
} else {
return snum.toFixed(2) + 'm'
}
},
getdetails(id) {
uni.navigateTo({
url: '/pages/detection/detedetails?id=' + id
})
},
getpartnerId(id) {
uni.navigateTo({
url: '/pages/detection/MerchantDetails?id=' + id
})
},
getgolist(id) {
if (id == 1) {
uni.navigateTo({
url: '/pages/detection/detelist'
})
}
if (id == 2) {
uni.navigateTo({
url: '/pages/detectiontransfer/detectiontransfer'
})
}
if (id == 3) {
uni.navigateTo({
url: '/pages/detection/VehicleInspection'
})
}
},
getback() {
uni.navigateBack({
delta: 1,
})
},
async getbanner() {
let res = await request({
url: '/appInspection/appHome/listSwiper',
method: 'get',
})
this.bannerliet = res.data
let ress = await request({
url: '/appInspection/appHome/listNews',
method: 'get',
})
this.newslist = res.data
// let resss = await request({
// url:'/appInspection/appHome/homeGoods',
// method: 'get',
// })
// this.goodslist = resss.rows
let gg = await request({
url: '/appInspection/appHome/listNews',
method: 'get',
})
console.log('公告', gg);
this.text = gg.data
},
gostatistics() {
uni.navigateTo({
url: "/pages/detection/statistics"
})
},
goM() {
uni.navigateTo({
url: "/pages/M/M"
})
},
going(id) {
uni.navigateTo({
url: "/pages/detection/Merchantproducts?id=" + id
})
},
scroll() {
this.animate = true;
setTimeout(() => {
this.notics.push(this.notics[0]);
this.notics.shift();
this.animate = false;
}, 1000);
},
// 初始化通知列表
initNoticeList() {
const _this = this;
_this.noticeList = _this.text;
if (_this.noticeList.length > 1) {
_this.timer = setInterval(() => {
_this.handleScrollNotice();
}, _this.interval);
}
},
// 点击通知时触发
handleClickNotice(item) {
this.$emit("click", item);
},
// 滚动通知
handleScrollNotice() {
console.log('执行了');
const len = this.text.length;
if (this.currentIndex === len - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
this.animateScroll();
},
// 动画滚动
animateScroll() {
console.log('动画滚动');
const _this = this;
const noticeHeight = 30; // 通知高度,根据实际情况调整
const scrollTop = _this.currentIndex * noticeHeight;
_this.scrollTop = scrollTop;
},
}
}
</script>
<style scoped lang="scss">
@import "@/uni_modules/uview-ui/index.scss";
.warp {
width: 275px;
height: 375px;
background: #FB4746;
border-radius: 10px;
margin: 0 auto;
margin-top: 200px;
box-sizing: border-box;
padding: 15px;
position: relative;
}
.warp-top {
position: absolute;
width: 100%;
height: 40px;
top: 0px;
left: 0px;
image {
width: 100%;
height: 100%;
}
}
.bcai-title {
width: 100%;
text-align: center;
font-size: 16px;
color: white;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 10px;
}
.w-box {
background: #cf2c2f;
width: 100%;
height: 300px;
border-radius: 10px;
box-sizing: border-box;
padding: 8px;
}
.war-left {
width: 40%;
border-right: 1px solid #EBC29D;
font-size: 26px;
text-align: center;
font-weight: bold;
color: #E0262C;
}
.war-right {
width: 60%;
font-size: 16px;
font-weight: bold;
color: #7D592C;
box-sizing: border-box;
padding-left: 10px;
}
.wrap-bott {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 80px;
image {
width: 100%;
height: 100%;
}
}
.war-box {
width: 100%;
height: 69px;
background: linear-gradient(90deg, #FFF1E4 0%, #FACEA6 100%);
border-radius: 6px 6px 6px 6px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 10px;
margin-bottom: 10px;
}
.rect {
width: 172px;
height: 36px;
background: linear-gradient(90deg, #FFF4CB 0%, #FDDC66 100%);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: #E11E27;
position: absolute;
bottom: 20px;
transform: translate(-50%);
left: 50%;
z-index: 999;
}
.uni-margin-wrap {
width: 100%;
}
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.uni-xiugai-wrap {
width: 100%;
}
.swiper {
height: 180px;
border-radius: 8px;
}
.swipers {
height: 80px;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
}
.swiper-box {
background-color: white;
height: 180px;
border-radius: 8px;
overflow: hidden;
width: 95%;
margin: 0 auto;
image {
width: 100%;
height: 100%;
}
}
.content {
width: 100%;
height: calc(100vh);
background: linear-gradient(180deg, #0D2E8D 0%, rgba(13, 46, 141, 0) 100%);
box-sizing: border-box;
padding-top: 20%;
}
.dil {
background-color: rgba(13, 46, 141, 0.1);
box-sizing: border-box;
// padding: 0px 12px;
}
.dix {
display: flex;
align-items: center;
}
.sousuo {
width: 95%;
height: 36px;
border-radius: 18px;
background: #FFFFFF;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0px 12px;
margin: 0 auto;
margin-bottom: 28px;
}
.jgq {
// height: 160px;
background: linear-gradient(180deg, #DFE2EB 0%, #FFFFFF 100%);
border-radius: 8px;
width: 95%;
border: 1px solid #FFFFFF;
margin: 0 auto;
margin-top: 10px;
box-sizing: border-box;
// padding: 0px 15px;
flex-wrap: wrap;
display: flex;
justify-content: space-around;
padding-bottom: 15px;
}
.j-box {
text-align: center;
width: 32%;
font-size: 18px;
font-weight: 400;
color: #333333;
margin-top: 15px;
}
.j-img {
margin: 0 auto;
width: 40px;
height: 40px;
text-align: center;
image {
width: 100%;
height: 100%;
margin-left: 6px;
}
}
.notice {
width: 95%;
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(13, 46, 141, 0.1);
border-radius: 8px;
margin: 10px auto;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: space-between;
}
.n-title {
box-sizing: border-box;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.n-zi {
font-size: 13px;
font-weight: 400;
color: #999999;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gang {
margin-top: 2px;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #0D2E8D 0%, rgba(13, 46, 141, 0) 100%);
}
.n-img {
width: 20%;
}
.n-right {
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
.Productbox {
width: 100%;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 8px;
box-sizing: border-box;
padding: 16px;
}
.p-top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-left {}
.p-lan {
font-size: 16px;
font-weight: bold;
color: #0D2054;
}
.p-right {
display: flex;
align-items: center;
}
.p-z {
font-size: 15px;
font-weight: 400;
color: #999999;
}
.daqi {
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.p-cont {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.p-box {
width: 49%;
background: #FFFFFF;
border-radius: 8px;
overflow: hidden;
margin-top: 10px;
position: relative;
}
.p-img {
width: 100%;
height: 166px;
image {
width: 100%;
height: 100%;
}
}
.p-t-z {
font-size: 16px;
font-weight: 600;
color: #333333;
margin-bottom: 10px;
}
.p-d {
width: auto;
// background: #EEEEEE;
// border-radius: 10px;
font-size: 16px;
font-weight: 400;
color: #666666;
box-sizing: border-box;
display: flex;
align-items: center;
// padding: 2px 5px;
margin-bottom: 10px;
}
.p-bottom {
width: 100%;
display: flex;
justify-content: space-between;
}
.p-jia {
font-size: 16px;
font-weight: bold;
color: #FF571A;
}
.aniu {
background: #0D2E8D;
display: flex;
justify-content: center;
align-items: center;
border-radius: 11px;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
padding: 2px 5px;
}
.p-biao {
position: absolute;
top: 0px;
right: 1px;
width: 43px;
height: 22px;
background: linear-gradient(90deg, #EE8342 0%, #EA3942 100%);
border-radius: 0px 8px 0px 8px;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 12px;
}
.lists {
height: 70px;
overflow: hidden;
width: 100%;
}
.list {
width: 100%;
// display: flex;
// align-items: center;
font-size: 26rpx;
}
text {
padding-left: 20rpx;
}
.top {
transition: all 1s;
margin-top: -100rpx;
}
.dlist-box {
width: 100%;
box-sizing: border-box;
padding: 15px;
background: #FFFFFF;
border-radius: 8px;
display: flex;
align-items: center;
margin-top: 10px;
}
.dixb {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between
}
.huang {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 400;
color: #FF9600;
margin: 5px 0px;
}
.hui {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 400;
color: #999999;
}
.listright {
width: 70%;
}
.tongzhi {
font-size: 28px;
font-weight: bold;
}
.gonggao {
font-size: 28px;
font-weight: bold;
color: #c7b07f;
}
.listimg {
width: 70px;
height: 70px;
border-radius: 8px 8px 8px 8px;
overflow: hidden;
border: 1px solid #EEEEEE;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.notices {
/* 组件高度,根据实际情况调整 */
width: 70%;
height: 80px;
overflow: hidden;
}
.notice-scroll {
width: 100%;
height: 100%;
}
.notice-content {
display: flex;
flex-direction: column;
}
.notice-item {
/* 通知高度,根据实际情况调整 */
height: 60px;
/* 通知行高,根据实际情况调整 */
line-height: 60rpx;
padding-left: 20rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>