257 lines
8.2 KiB
Vue
257 lines
8.2 KiB
Vue
<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> |