323 lines
11 KiB
Vue
323 lines
11 KiB
Vue
<template name="index">
|
|
<view>
|
|
<!-- 轮播图-->
|
|
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
|
:autoplay="true" interval="5000" duration="500">
|
|
<swiper-item v-for="(item,index) in swiperList" :key="item.id">
|
|
<image :src="item.url" v-if="item.type=='image'"></image>
|
|
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
|
|
v-if="item.type=='video'"></video>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 搜索栏 -->
|
|
<view class="cu-bar search bg-white">
|
|
<view class="search-form round">
|
|
<text class="cuIcon-search"></text>
|
|
<input @confirm="searchGoods" v-model="searchInfo.inputGoodsName" :adjust-position="true" type="text"
|
|
placeholder="输入搜索内容" confirm-type="search"></input>
|
|
</view>
|
|
<!-- 区域筛选picker -->
|
|
<view class="action">
|
|
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
|
|
:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
|
|
<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
|
|
<text class="cuIcon-location"></text>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="margin-lr-sm margin-bottom-with-bar">
|
|
<!-- 大类 -->
|
|
<view class="flex justify-between text-black">
|
|
<view class="padding text-lg" @click="showProductCategories">
|
|
<text>分类</text>
|
|
<text class="cuIcon-apps text-main-color"></text>
|
|
<text class="cuIcon-triangledownfill"></text>
|
|
</view>
|
|
<view>
|
|
<scroll-view scroll-x class="nav">
|
|
<view class="flex text-center">
|
|
<view class="cu-item flex-sub" :class="index==tabCur?'text-main-color cur':''"
|
|
v-for="(item,index) in categories" :key="item.id" @tap="tabSelect" :data-id="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 热门细类 -->
|
|
<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
|
|
<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5"
|
|
@click="chooseCategory(item)">
|
|
<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
|
|
<view class="cu-tag badge" v-if="item.badge!=0">
|
|
<block v-if="item.badge!=1">{{item.badge}}</block>
|
|
</view>
|
|
</view>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 细类 -->
|
|
<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
|
|
<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
|
|
v-if="index < subCategories.length && index > 4" @click="chooseCategory(item)">
|
|
<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
|
|
<view class="cu-tag badge" v-if="item.badge!=0">
|
|
<block v-if="item.badge!=1">{{item.badge}}</block>
|
|
</view>
|
|
</view>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 超值服务 -->
|
|
<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
|
:title="discountGoods.title"></vertical-goods-card> -->
|
|
<!-- 热门服务 -->
|
|
<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
|
|
</vertical-goods-card>
|
|
</view>
|
|
<!-- 强制要求用户授权登录的弹窗 -->
|
|
<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl text-left">
|
|
<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
|
|
<view>1.微信昵称</view>
|
|
<view>2.微信头像</view>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
|
|
</navigator>
|
|
<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 手机号授予 -->
|
|
<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl">
|
|
<view>授予小程序绑定微信手机号码的权限</view>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
|
|
</navigator>
|
|
<view class="margin-0 flex-sub">
|
|
<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
|
|
open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
|
|
|
|
export default {
|
|
name: 'index',
|
|
components: {
|
|
verticalGoodsCard
|
|
},
|
|
data() {
|
|
return {
|
|
dotStyle: true,
|
|
swiperList: [],
|
|
tabCur: 0,
|
|
categories: [],
|
|
subCategories: [],
|
|
hotGoods: [],
|
|
discountGoods: {},
|
|
InputBottom: 0,
|
|
isAuthWxLoginModal: false,
|
|
isAuthWxPhoneModal: false,
|
|
searchInfo: {},
|
|
areaList: [],
|
|
areaMultiIndex: [0, 0, 0],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.bindEvent();
|
|
},
|
|
beforeDestroy() {
|
|
this.offBindEvent();
|
|
},
|
|
onReady() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '加载中'
|
|
})
|
|
// 更新缓存中的userInfo
|
|
let res = await this.$request.storageExistUser();
|
|
// 获取缓存中的userInfo
|
|
let curUserInfo = this.$request.getCurUserInfo();
|
|
this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
|
|
if (this.isAuthWxLoginModal) {
|
|
return;
|
|
}
|
|
this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
|
|
if (this.isAuthWxPhoneModal) {
|
|
return;
|
|
}
|
|
uni.hideLoading();
|
|
|
|
// 加载区域信息
|
|
this.loadRegionList();
|
|
// 加载热门商品
|
|
let hotGoodsRes = await this.$request.getHotGoods({
|
|
pageNum: 0,
|
|
pageSize: 50
|
|
});
|
|
this.hotGoods = hotGoodsRes.rows;
|
|
|
|
this.swiperList = await this.$api.data('swiperList');
|
|
this.categories = await this.$api.data('categories');
|
|
this.subCategories = await this.$api.data('subCategories');
|
|
this.moduleBarInfos = await this.$api.data('moduleBarInfos');
|
|
// this.hotGoods = await this.$api.data('hotGoods');
|
|
// this.discountGoods = await this.$api.data('discountGoods');
|
|
},
|
|
bindEvent() {
|
|
uni.$on('index_showProductDetail', this.showDetails);
|
|
},
|
|
offBindEvent() {
|
|
uni.$off('index_showProductDetail');
|
|
},
|
|
async loadRegionList() {
|
|
let regionList = await this.$request.areaListByStep();
|
|
regionList = regionList.data;
|
|
let subRegionList = [];
|
|
let subSubRegionList = [];
|
|
if (regionList && regionList.length > 0) {
|
|
subRegionList = await this.$request.areaListByStep({
|
|
parentCode: regionList[0].areaCode
|
|
});
|
|
subRegionList = subRegionList.data;
|
|
}
|
|
if (subRegionList && subRegionList.length > 0) {
|
|
subSubRegionList = await this.$request.areaListByStep({
|
|
parentCode: subRegionList[0].areaCode
|
|
});
|
|
subSubRegionList = subSubRegionList.data;
|
|
}
|
|
this.areaList.push(regionList);
|
|
this.areaList.push(subRegionList);
|
|
this.areaList.push(subSubRegionList);
|
|
// 默认选中第一个，因此将第一个区域默认加入查询条件中
|
|
this.searchInfo.area = [regionList[0], subRegionList[0], subSubRegionList[0]];
|
|
},
|
|
regionChange(e) {
|
|
this.areaMultiIndex = e.detail.value;
|
|
let chosenArea = [];
|
|
for (let i = 0; i < this.areaList.length; i++) {
|
|
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
|
|
}
|
|
this.searchInfo.area = chosenArea;
|
|
},
|
|
async regionColChange(e) {
|
|
let colObj = e.detail;
|
|
if (colObj.column == 0) {
|
|
// 通过一级查二级
|
|
let subAreaList = await this.$request.areaListByStep({
|
|
parentCode: this.areaList[0][colObj.value].areaCode
|
|
});
|
|
subAreaList = subAreaList.data;
|
|
let subSubAreaList = [];
|
|
if (subAreaList.length) {
|
|
subSubAreaList = await this.$request.areaListByStep({
|
|
parentCode: subAreaList[0].areaCode
|
|
});
|
|
subSubAreaList = subSubAreaList.data;
|
|
}
|
|
this.areaList.pop();
|
|
this.areaList.pop();
|
|
this.areaList.push(subAreaList);
|
|
this.areaList.push(subSubAreaList);
|
|
this.areaMultiIndex = [colObj.value, 0, 0];
|
|
} else if (colObj.column == 1) {
|
|
// 通过二级查三级
|
|
let subAreaList = await this.$request.areaListByStep({
|
|
parentCode: this.areaList[1][colObj.value].areaCode
|
|
});
|
|
subAreaList = subAreaList.data;
|
|
this.areaList.pop();
|
|
this.areaList.push(subAreaList);
|
|
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
|
|
}
|
|
},
|
|
async tabSelect(e) {
|
|
this.tabCur = e.currentTarget.dataset.id;
|
|
// 获取大类信息
|
|
let categoryId = this.categories[this.tabCur].id;
|
|
console.log("切换细类, 大类id=" + categoryId);
|
|
let allSubCategories = await this.$api.data('subCategories');
|
|
this.subCategories = allSubCategories.slice(0, (4 - categoryId) * 5);
|
|
},
|
|
chooseCategory(item) {
|
|
this.searchInfo.category = item;
|
|
this.searchGoods();
|
|
},
|
|
searchGoods() {
|
|
let params = {
|
|
category: this.searchInfo.category,
|
|
area: this.searchInfo.area,
|
|
inputGoodsName: this.searchInfo.inputGoodsName
|
|
};
|
|
uni.navigateTo({
|
|
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
|
})
|
|
},
|
|
showDetails(productItem) {
|
|
let params = {
|
|
goodsId: productItem.goodsId
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
|
});
|
|
},
|
|
showProductCategories() {
|
|
uni.navigateTo({
|
|
url: '/pages/product/product-category'
|
|
})
|
|
},
|
|
authWxLogin() {
|
|
this.$request.login().then(res => {
|
|
if (res) {
|
|
this.loadData();
|
|
}
|
|
})
|
|
},
|
|
getPhoneNumber(e) {
|
|
this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
|
|
if (res) {
|
|
this.loadData();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cu-list+.cu-list {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.cu-list.grid.no-border {
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.hot-sub-category .cu-item .hot-sub-category-icon {
|
|
font-size: 80rpx;
|
|
}
|
|
|
|
.modal-bottom-oper {
|
|
height: 70rpx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|