carrent-front/pages/home/index.vue

<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>