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.
257 lines
8.2 KiB
257 lines
8.2 KiB
<template> |
|
<view :style="{paddingTop:`${titleStyle.top}px`}" |
|
style="background: linear-gradient(180deg, #FF4A2B 0%, rgba(255,65,65,0) 25%);" class="page_body"> |
|
<view class="home_container"> |
|
<view :style="{height:`${titleStyle.height}px`}" class="home_header flex jc ac">首页</view> |
|
<view class="home_input_container"> |
|
<uni-easyinput @clear='seach' @confirm='seach' prefixIcon="search" trim="all" v-model="productName" placeholder="请输入内容"></uni-easyinput> |
|
</view> |
|
<!-- 轮播图 --> |
|
<view :style="{order:mobile.GUANGGAO.index}" v-if="mobile&&mobile.GUANGGAO&&mobile.GUANGGAO.infoList.length" class="home_swiper_container"> |
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" |
|
:duration="500"> |
|
<swiper-item v-for="item in mobile.GUANGGAO.infoList"> |
|
<image :src="item.position_image"></image> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
<!-- 菜单列表 --> |
|
<view :style="{order:mobile.FENLEI.index}" v-if="mobile&&mobile.FENLEI&&mobile.FENLEI.infoList.length" class="home_menu_container"> |
|
<view class="menu_section"> |
|
<view @click="goList('classify',item.id)" v-for="(item,index) in mobile.FENLEI.infoList" class="menu_item"> |
|
<image :src="item.icon"></image> |
|
<view class="name">{{item.categoryName}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 新鲜好物 --> |
|
<view :style="{order:mobile['1'].index}" v-if="mobile&&mobile['1']&&mobile['1'].infoList.length" class="home_fresh_container"> |
|
<view @click="goList('model',mobile['1'].type)" class="fresh_title flex jw ac"> |
|
<view class="fresh_title_left strong">{{mobile['1'].moduleName}}</view> |
|
<view class="fresh_title_right flex ac">更多好物 <uni-icons type="right" size="12"></uni-icons> </view> |
|
</view> |
|
<view class="home_fresh_item_container flex"> |
|
<view @click="navToDetailPage(item)" v-for="item in mobile['1'].infoList" class="home_fresh_item"> |
|
<view class="home_fresh_item_img flex ac jc"> |
|
<image mode="widthFix" |
|
:src="item.url"> |
|
</image> |
|
</view> |
|
<view class="home_fresh_item_name flex jc">{{item.productName}}</view> |
|
<view class="home_fresh_item_price flex jc ac"> |
|
<span>¥{{Number(item.price).toFixed(2)}}</span> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 人气推荐 --> |
|
<view :style="{order:mobile['2'].index}" v-if="mobile&&mobile['2']&&mobile['2'].infoList.length" class="home_recommend_container model_container"> |
|
<view @click="goList('model',mobile['2'].type)" class="model_title flex jw ac"> |
|
<view class="model_title_left strong">{{mobile['2'].moduleName}}</view> |
|
<view class="model_title_right flex ac">更多推荐 <uni-icons type="right" size="12"></uni-icons> </view> |
|
</view> |
|
<view class="home_recommend_item_container"> |
|
<view @click="navToDetailPage(item)" v-for="item in mobile['2'].infoList" class="home_recommend_item flex ac"> |
|
<view class="model_item_img"> |
|
<image mode="widthFix" :src="item.url"> |
|
</image> |
|
</view> |
|
<view style="padding: 0 25rpx;box-sizing: border-box;" |
|
class="home_recommend_item_center oneflex"> |
|
<view class="home_recommend_item_item_name">{{item.productName}}</view> |
|
<view class="model_item_price flex ac"> |
|
<span>¥{{Number(item.price).toFixed(2)}}</span> |
|
</view> |
|
</view> |
|
<view class="home_recommend_item_right flex ac jc"> |
|
兑换 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 猜你喜欢 --> |
|
<view :style="{order:mobile['3'].index}" v-if="mobile&&mobile['3']&&mobile['3'].infoList.length" class="home_guess_container model_container"> |
|
<view class="home_guess_title flex jc strong">{{mobile['3'].moduleName}}</view> |
|
<view class="home_guess_item_container flex"> |
|
<view @click="navToDetailPage(item)" v-for="item in mobile['3'].infoList" class="home_guess_item"> |
|
<view style="width: 300rpx; height: 300rpx;" class="model_item_img"> |
|
<image mode="widthFix" |
|
:src="item.url"> |
|
</image> |
|
</view> |
|
<view class="home_guess_item_footer"> |
|
<view class="model_item_name flex jc">{{item.productName}} </view> |
|
<view class="model_item_price flex jc"> |
|
<span>¥{{Number(item.price).toFixed(2)}}</span> |
|
<!-- <span style="margin-left: 25rpx;text-decoration-line:line-through;color: #999999;font-size: 20rpx">¥89</span> --> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import home from '@/api/home.js' |
|
import homeApi from '@/api/home.js' |
|
import station from '@/api/station.js' |
|
import stationItem from "@/components/stationItem/stationItem.vue" |
|
import tool from '../../utils/tool.js' |
|
export default { |
|
components: { |
|
stationItem, |
|
}, |
|
options: { |
|
styleIsolation: 'shared' |
|
}, |
|
data() { |
|
return { |
|
productName:"", |
|
mobile:null, |
|
user: uni.getStorageSync('user'), |
|
pageData: { |
|
currentPage: 1, |
|
stationName: '', |
|
sortType: '' |
|
}, |
|
viewData: null, |
|
titleStyle: {}, |
|
selectOptions: 0, |
|
} |
|
}, |
|
created() { |
|
this.init() |
|
}, |
|
//下拉刷新 |
|
onPullDownRefresh() { |
|
this.seach() |
|
}, |
|
onShow() { |
|
this.getPosition() |
|
}, |
|
methods: { |
|
async getPosition() { |
|
await this.tool.userLocationChenk().then(res => {}).catch(err => {}); |
|
await this.tool.getLocation().then(res => { }).catch(err => { }); |
|
}, |
|
//详情 |
|
navToDetailPage(item) { |
|
console.log(item) |
|
//测试数据没有写id，用title代替 |
|
let id = item.productId; |
|
uni.navigateTo({ |
|
url: `/Product/pages/product?id=${id}` |
|
}) |
|
}, |
|
goList(type,data){ |
|
if(type=='classify'){ |
|
uni.navigateTo({ |
|
url:`/Product/pages/list?categoryOneId=${data}` |
|
}) |
|
}else if(type=='model'){ |
|
uni.navigateTo({ |
|
url:`/Product/pages/list?type=${data}` |
|
}) |
|
}else{ |
|
uni.navigateTo({ |
|
url:"/Product/pages/list" |
|
}) |
|
} |
|
|
|
}, |
|
getMobile(){ |
|
homeApi.getMobile({ |
|
productName:this.productName |
|
}).then(res=>{ |
|
if(res.code==20000){ |
|
this.mobile = Object.fromEntries(res.data.map((item,index)=> [item.type,Object.assign(item,{index:index+1})])); |
|
} |
|
}).finally(()=>{ |
|
uni.stopPullDownRefresh(); |
|
}) |
|
}, |
|
changeIndicatorDots(e) { |
|
this.indicatorDots = !this.indicatorDots |
|
}, |
|
changeAutoplay(e) { |
|
this.autoplay = !this.autoplay |
|
}, |
|
intervalChange(e) { |
|
this.interval = e.target.value |
|
}, |
|
durationChange(e) { |
|
this.duration = e.target.value |
|
}, |
|
showInit() {}, |
|
refresherrefresh() { |
|
this.refresherTriggered = true; |
|
this.seach() |
|
}, |
|
seach() { |
|
this.pageData.currentPage = 1; |
|
this.getMobile() |
|
}, |
|
scrolltolower() { |
|
this.pageData.currentPage += 1; |
|
this.getList() |
|
}, |
|
async init() { |
|
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度 |
|
// await this.getPosition(); |
|
// this.getList(); |
|
this.getMobile() |
|
}, |
|
async getPosition() { |
|
// if(!this.user){ |
|
// return Promise.resolve(); |
|
// } |
|
await this.tool.userLocationChenk().then(res => {}).catch(err => {}); |
|
await this.tool.getLocation().then(res => { |
|
this.location = uni.getStorageSync('location') |
|
}).catch(err => { |
|
this.location = null |
|
}); |
|
}, |
|
async getList() { |
|
if (this.location) { |
|
this.pageData.stationLat = this.location.latitude; |
|
this.pageData.stationLng = this.location.longitude; |
|
} |
|
station[this.token ? 'getNearbySites' : 'getTouristSites'](this.pageData).then(res => { |
|
if (res.data.length == 0) { |
|
setTimeout(() => { |
|
uni.showToast({ |
|
title: '到底了', |
|
icon: 'none' |
|
}) |
|
}, 500) |
|
} |
|
if (res.code == 20000) { |
|
this.tool.difTags(res); |
|
if (this.pageData.currentPage !== 1) { |
|
let data = new this.tool.Anticorrosive(res, page); |
|
this.viewData.list = this.viewData.list.concat(data.list) |
|
} else { |
|
this.viewData = new this.tool.Anticorrosive(res, page); |
|
// this.viewData.list = [...this.viewData.list] |
|
} |
|
} |
|
this.refresherTriggered = false |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
</style> |
|
<style lang="scss" scoped> |
|
::v-deep .is-input-border { |
|
border: none !important; |
|
border-radius: 25rpx !important; |
|
} |
|
|
|
@import 'index.scss'; |
|
@import '../index/index.scss'; |
|
</style> |