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

366 lines
11 KiB

<template>
<view>
<view class="se-pos se-pos-lt" style="z-index: -1;width: 750rpx;height: 388rpx;
background: linear-gradient(168deg,#669a32 0%, #669a32 72%);
border-radius: 0rpx 0rpx 80rpx 80rpx;">
</view>
<view class="se-flex se-flex-h-sb se-px-20 se-pb-10 se-pt-10 se-zi-s" style="background-color: transparent;">
<view class="se-c-white se-fs-28">
<view class="se-c-white se-py-5 se-px-10 se-fw-6 se-br-12 se-fs-30 se-display-ib">
环保
</view>
<text class="se-ml-10 se-fw-6 se-fs-26">寻找你想要的</text>
</view>
</view>
<view class="se-px-40 se-py-20">
<view class=" se-br-50 se-c-black se-px-20 se-py-5 se-flex se-flex-h-sb se-fs-26">
<view class="se-pl-10 se-pr-20 se-flex se-flex-h se-h-40 se-lh-40 " @click="getLocation()">
<text class="se-pr-20 se-c-white nobreak">{{city?city:'未知'}}</text>
<u-icon name="arrow-down-fill" color="#ffffff"></u-icon>
</view>
<view class="se-ml-20 se-w-p-100">
<u-search :disabled="true" @click="onSearch()" :showAction="false" bgColor="#ffffff" placeholder="搜索" v-model="keyword"></u-search>
</view>
</view>
</view>
<view class="se-pb-20 se-pt-40 se-zi-s">
<view class="se-px-20 se-br-20">
<!-- <image src="" mode="widthFix"></image> -->
<u-swiper :imgMode="widthFix" height="320rpx" :indicator="true" indicatorMode="dot" :loading="false" :circular="true" :interval="4000" :autoplay="true" style="background-color: #f5f5f5;height: 320rpx;" keyName="image" :list="swiperList" @click="swiperClick"></u-swiper>
</view>
<!-- <view class="se-pt-10 se-bgc-white se-px-0 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-26">
<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
<text class="se-ml-10">今日有6个工作息新发布....</text>
</view> -->
</view>
<view class="se-my-20 se-pt-20 se-bgc-white se-grid">
<navigator :url="item.path" v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-pt-10 se-mb-10">
<image class="se-a-100 se-br-20" :src="item.image" mode=""></image>
<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.title}}</text>
</navigator>
</view>
<view class="se-px-30 se-py-30 se-bgc-white se-c-black">
<!-- 精品二手车 -->
精品车列表
</view>
<view class="se-grid-2">
<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>
</view>
</template>
<script>
import { getInfo,queryGoodsList,queryBannerList,queryModuleList } from "@/common/api.js"
import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
export default{
components:{
},
data(){
return {
city:"",
swiperList: [],
nav:[],
pageNo:1,
pageSize:10,
list:[]
}
},
onLoad(options) {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
if(options.shareId){
uni.setStorageSync('shareId',options.shareId)
}
this.onPageList()
this.getLocation()
this.onQueryBannerList()
this.onQueryModuleList()
},
onPullDownRefresh() {
let that = this
that.pageNo = 1
that.list = []
that.onPageList()
this.getLocation()
this.onQueryBannerList()
this.onQueryModuleList()
},
onReachBottom() {
let that = this
that.pageNo = that.pageNo + 1
that.onPageList()
},
onShareAppMessage() {
let share = {
path:"/pages/home/index?shareId="+uni.getStorageSync('userInfo').id,
success:(res) => {
console.info(res)
},
fail:(err)=>{
console.info(err)
}
}
console.info(share)
return share
},
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:{
onQueryModuleList(){
const that = this;
let params={}
queryModuleList(params).then(response=>{
console.info("queryBannerList",response)
that.nav = response.result.records
// that.swiperList = response.result.records
}).catch(error=>{
})
},
onSearch(){
uni.navigateTo({
url:"/pages_subpack/category/index"
})
},
handleAreaChange(){
console.info("获取地址")
},
swiperClick(event){
console.info(event)
},
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
})
},
getLocation(){
const that = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
const qqmapsdk = new QQMapWX({
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(response) {
that.city = response.result.ad_info.city
console.log('逆地理编码结果:', response);
},
fail: function(error) {
console.error('逆地理编码失败:', error);
}
});
},
fail(err) {
console.error('获取位置失败:', err);
if (err.errMsg.includes('auth deny') || err.errMsg.includes('auth denied')) {
// 引导用户授权
uni.showModal({
title: '授权提示',
content: '需要获取位置信息,请前往设置授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (settingRes) => {
if (settingRes.authSetting['scope.userLocation']) {
console.log('用户已重新授权');
// 重新调用获取位置信息
uni.getLocation({
type: 'wgs84',
success: (res) => {
const qqmapsdk = new QQMapWX({
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(response) {
that.city = response.result.ad_info.city
console.log('逆地理编码结果:', response);
},
fail: function(error) {
console.error('逆地理编码失败:', error);
}
});
},
fail: (err) => {
console.error('重新获取位置失败:', err);
},
});
} else {
console.error('用户未授权位置信息');
}
},
});
}
},
});
}
}
})
},
onQueryBannerList(){
let that = this
let params={}
queryBannerList(params).then(response=>{
console.info("queryBannerList",response)
that.swiperList = response.result.records
}).catch(error=>{
})
},
onPageList(){
let that = this
let params={
status:1,
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 = []
}
})
that.list = that.list.concat(response.result.records)
}).catch((error) =>{
})
},
}
}
</script>
<style>
.nobreak {
white-space: nowrap;
}
page{
background-color: #f5f5f5;
}
.enterprise{
background: #ff7a31;
border: 4rpx solid rgba(255,255,255,0.50);
border-radius: 14rpx;
}
.master{
background: #f0b744;
border: 4rpx solid rgba(255,255,255,0.50);
border-radius: 14rpx;
}
.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>