caoliancun
/
MALL_MP_WX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
master
xiaozhiyong 1 year ago
parent 1f9fa4c3be
commit a87c17b91c
1 changed files with 62 additions and 49 deletions
Unified View
  1. 111
      pages/home/index.vue

111
pages/home/index.vue
Unescape View File

@ -4,54 +4,62 @@
<view class="home_container"> <view class="home_container">
<view :style="{height:`${titleStyle.height}px`}" class="home_header flex jc ac">首页</view> <view :style="{height:`${titleStyle.height}px`}" class="home_header flex jc ac">首页</view>
<view class="home_input_container"> <view class="home_input_container">
<uni-easyinput @clear='seach' @confirm='seach' prefixIcon="search" trim="all" v-model="productName" placeholder="请输入内容"></uni-easyinput> <uni-easyinput @clear='seach' @confirm='seach' prefixIcon="search" trim="all" v-model="productName"
placeholder="请输入内容"></uni-easyinput>
</view> </view>
<!-- 轮播图 --> <!-- 轮播图 -->
<view :style="{order:mobile.GUANGGAO.index}" v-if="mobile&&mobile.GUANGGAO&&mobile.GUANGGAO.infoList.length" class="home_swiper_container"> <view :style="{order:mobile.GUANGGAO.index}" v-if="mobile&&mobile.GUANGGAO&&!mobile.GUANGGAO.isReveal&&mobile.GUANGGAO.infoList.length"
class="home_swiper_container">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
:duration="500"> :duration="500">
<swiper-item v-for="item in mobile.GUANGGAO.infoList"> <swiper-item v-for="item in mobile.GUANGGAO.infoList">
<image :src="item.position_image"></image> <image :src="item.position_image"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- 菜单列表 --> <!-- 菜单列表 -->
<view :style="{order:mobile.FENLEI.index}" v-if="mobile&&mobile.FENLEI&&mobile.FENLEI.infoList.length" class="home_menu_container"> <view :style="{order:mobile.FENLEI.index}" v-if="mobile&&mobile.FENLEI&&!mobile.FENLEI.isReveal&&mobile.FENLEI.infoList.length"
class="home_menu_container">
<view class="menu_section"> <view class="menu_section">
<view @click="goList('classify',item.id)" v-for="(item,index) in mobile.FENLEI.infoList" class="menu_item"> <view @click="goList('classify',item.id)" v-for="(item,index) in mobile.FENLEI.infoList"
class="menu_item">
<image :src="item.icon"></image> <image :src="item.icon"></image>
<view class="name">{{item.categoryName}}</view> <view class="name">{{item.categoryName}}</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 新鲜好物 --> <!-- 新鲜好物 -->
<view :style="{order:mobile['1'].index}" v-if="mobile&&mobile['1']&&mobile['1'].infoList.length" class="home_fresh_container"> <view :style="{order:mobile['1'].index}" v-if="mobile&&mobile['1']&&!mobile['1'].isReveal&&mobile['1'].infoList.length"
class="home_fresh_container">
<view @click="goList('model',mobile['1'].type)" class="fresh_title flex jw ac"> <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_left strong">{{mobile['1'].moduleName}}</view>
<view class="fresh_title_right flex ac">更多好物 <uni-icons type="right" size="12"></uni-icons> </view> <view class="fresh_title_right flex ac">更多好物 <uni-icons type="right" size="12"></uni-icons>
</view>
</view> </view>
<view class="home_fresh_item_container flex"> <view class="home_fresh_item_container flex">
<view @click="navToDetailPage(item)" v-for="item in mobile['1'].infoList" class="home_fresh_item"> <view @click="navToDetailPage(item)" v-for="item in mobile['1'].infoList" class="home_fresh_item">
<view class="home_fresh_item_img flex ac jc"> <view class="home_fresh_item_img flex ac jc">
<image mode="widthFix" <image mode="widthFix" :src="item.url">
:src="item.url">
</image> </image>
</view> </view>
<view class="home_fresh_item_name flex jc">{{item.productName}}</view> <view class="home_fresh_item_name flex jc">{{item.productName}}</view>
<view class="home_fresh_item_price flex jc ac"> <view class="home_fresh_item_price flex jc ac">
<span>¥{{Number(item.price).toFixed(2)}}</span> <span>¥{{Number(item.price).toFixed(2)}}</span>
</view> </view>
</view> </view>
</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 :style="{order:mobile['2'].index}" v-if="mobile&&mobile['2']&&!mobile['2'].isReveal&&mobile['2'].infoList.length"
class="home_recommend_container model_container">
<view @click="goList('model',mobile['2'].type)" class="model_title flex jw ac"> <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_left strong">{{mobile['2'].moduleName}}</view>
<view class="model_title_right flex ac">更多推荐 <uni-icons type="right" size="12"></uni-icons> </view> <view class="model_title_right flex ac">更多推荐 <uni-icons type="right" size="12"></uni-icons>
</view>
</view> </view>
<view class="home_recommend_item_container"> <view class="home_recommend_item_container">
<view @click="navToDetailPage(item)" v-for="item in mobile['2'].infoList" class="home_recommend_item flex ac"> <view @click="navToDetailPage(item)" v-for="item in mobile['2'].infoList"
class="home_recommend_item flex ac">
<view class="model_item_img"> <view class="model_item_img">
<image mode="widthFix" :src="item.url"> <image mode="widthFix" :src="item.url">
</image> </image>
@ -61,22 +69,22 @@
<view class="home_recommend_item_item_name">{{item.productName}}</view> <view class="home_recommend_item_item_name">{{item.productName}}</view>
<view class="model_item_price flex ac"> <view class="model_item_price flex ac">
<span>¥{{Number(item.price).toFixed(2)}}</span> <span>¥{{Number(item.price).toFixed(2)}}</span>
</view> </view>
</view> </view>
<view class="home_recommend_item_right flex ac jc"> <view class="home_recommend_item_right flex ac jc">
兑换 兑换
</view> </view>
</view> </view>
</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 :style="{order:mobile['3'].index}" v-if="mobile&&mobile['3']&&!mobile['3'].isReveal&&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_title flex jc strong">{{mobile['3'].moduleName}}</view>
<view class="home_guess_item_container flex"> <view class="home_guess_item_container flex">
<view @click="navToDetailPage(item)" v-for="item in mobile['3'].infoList" class="home_guess_item"> <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"> <view style="width: 300rpx; height: 300rpx;" class="model_item_img">
<image mode="widthFix" <image mode="widthFix" :src="item.url">
:src="item.url">
</image> </image>
</view> </view>
<view class="home_guess_item_footer"> <view class="home_guess_item_footer">
@ -86,7 +94,7 @@
<!-- <span style="margin-left: 25rpx;text-decoration-line:line-through;color: #999999;font-size: 20rpx">¥89</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> </view>
</view> </view>
</view> </view>
@ -95,7 +103,7 @@
<script> <script>
import home from '@/api/home.js' import home from '@/api/home.js'
import homeApi from '@/api/home.js' import homeApi from '@/api/home.js'
import station from '@/api/station.js' import station from '@/api/station.js'
import stationItem from "@/components/stationItem/stationItem.vue" import stationItem from "@/components/stationItem/stationItem.vue"
import tool from '../../utils/tool.js' import tool from '../../utils/tool.js'
@ -107,18 +115,18 @@ import homeApi from '@/api/home.js'
styleIsolation: 'shared' styleIsolation: 'shared'
}, },
data() { data() {
return { return {
productName:"", productName: "",
mobile:null, mobile: null,
user: uni.getStorageSync('user'), user: uni.getStorageSync('user'),
pageData: { pageData: {
currentPage: 1, currentPage: 1,
stationName: '', stationName: '',
sortType: '' sortType: ''
}, },
viewData: null, viewData: null,
titleStyle: {}, titleStyle: {},
selectOptions: 0, selectOptions: 0,
} }
}, },
created() { created() {
@ -132,9 +140,9 @@ import homeApi from '@/api/home.js'
this.getPosition() this.getPosition()
}, },
methods: { methods: {
async getPosition() { async getPosition() {
await this.tool.userLocationChenk().then(res => {}).catch(err => {}); await this.tool.userLocationChenk().then(res => {}).catch(err => {});
await this.tool.getLocation().then(res => { }).catch(err => { }); await this.tool.getLocation().then(res => {}).catch(err => {});
}, },
//详情 //详情
navToDetailPage(item) { navToDetailPage(item) {
@ -145,30 +153,35 @@ import homeApi from '@/api/home.js'
url: `/Product/pages/product?id=${id}` url: `/Product/pages/product?id=${id}`
}) })
}, },
goList(type,data){ goList(type, data) {
if(type=='classify'){ if (type == 'classify') {
uni.navigateTo({ uni.navigateTo({
url:`/Product/pages/list?categoryOneId=${data}` url: `/Product/pages/list?categoryOneId=${data}`
}) })
}else if(type=='model'){ } else if (type == 'model') {
uni.navigateTo({ uni.navigateTo({
url:`/Product/pages/list?type=${data}` url: `/Product/pages/list?type=${data}`
}) })
}else{ } else {
uni.navigateTo({ uni.navigateTo({
url:"/Product/pages/list" url: "/Product/pages/list"
}) })
} }
}, },
getMobile(){ getMobile() {
homeApi.getMobile({ homeApi.getMobile({
productName:this.productName productName: this.productName
}).then(res=>{ }).then(res => {
if(res.code==20000){ console.log('res',res)
this.mobile = Object.fromEntries(res.data.map((item,index)=> [item.type,Object.assign(item,{index:index+1})])); if (res.code == 20000) {
} this.mobile = Object.fromEntries(res.data.map((item, index) => [item.type, Object.assign(
}).finally(()=>{ item, {
index: index + 1
})]));
}
console.log('this.mobile',this.mobile)
}).finally(() => {
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}) })
}, },
@ -254,4 +267,4 @@ import homeApi from '@/api/home.js'
@import 'index.scss'; @import 'index.scss';
@import '../index/index.scss'; @import '../index/index.scss';
</style> </style>

Write Preview
Loading…
Cancel
Save