feat: 首页未登录时优化

dev_1.0.1
hu-qi 5 months ago
parent 7601e45078
commit d2d931ed67
No known key found for this signature in database
GPG Key ID: C8A53E9FE5178D78

@ -1,442 +1,444 @@
<template> <template>
<view class="container"> <view class="container">
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;"> <view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;">
<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false" bgColor="#ffffff" <u-search class="search" v-model="keyword" :clearabled="true" :showAction="false" bgColor="#ffffff"
@search="search" @clear="search"></u-search> @search="search" @clear="search"></u-search>
<navigator url="/pages/cart/cart" open-type="switchTab" class="icon-box"> <navigator url="/pages/cart/cart" open-type="switchTab" class="icon-box">
<image class="cart-icon" src="../../static/index/cart.svg" mode=""></image> <image class="cart-icon" src="../../static/index/cart.svg" mode=""></image>
<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge> <u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
</navigator> </navigator>
</view> </view>
<!-- 服务列表 --> <!-- 服务列表 -->
<view class="server-list"> <view class="server-list">
<view class="server-item" v-for="item in serverList" :key="item.code" @click="goto(item.code)"> <view class="server-item" v-for="item in serverList" :key="item.code" @click="goto(item.code)">
<view class="server-icon"> <view class="server-icon">
<image :src="`../../static/index/${item.code}.svg`" mode=""></image> <image :src="`../../static/index/${item.code}.svg`" mode=""></image>
</view> </view>
<view class="server-text">{{item.title}}</view> <view class="server-text">{{item.title}}</view>
</view> </view>
</view> </view>
<!-- 头部轮播 --> <!-- 头部轮播 -->
<view class="carousel-section"> <view class="carousel-section">
<swiper autoplay class="carousel" circular> <swiper autoplay class="carousel" circular>
<swiper-item v-for="(item, index) in newAdvertiseList" :key="index" <swiper-item v-for="(item, index) in newAdvertiseList" :key="index"
:class="['carousel-item',item.length == 1?'single':'']"> :class="['carousel-item',item.length == 1?'single':'']">
<image @click="navToAdvertisePage(subItem)" mode="aspectFill" :key="subItem.id" <image @click="navToAdvertisePage(subItem)" mode="aspectFill" :key="subItem.id"
v-for="subItem in item" :src="subItem.pic"></image> v-for="subItem in item" :src="subItem.pic"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- 标签列表 --> <!-- 标签列表 -->
<u-sticky bgColor="#f5f5f5"> <u-sticky bgColor="#f5f5f5">
<u-tabs bgColor="#f5f5f5" class="tag-list" :list="categoryList" :current="tagCurrent" @change="changeTag" <u-tabs bgColor="#f5f5f5" class="tag-list" :height="56" :list="categoryList" :current="tagCurrent" @change="changeTag"
:activeStyle="{ :activeStyle="{
color: '#ffffff', color: '#ffffff',
fontWeight: 'bold', fontWeight: 'bold',
transform: 'scale(1.05)' transform: 'scale(1.05)'
}" active-color="#ffffff" :bar-height="0" :active-item-style="{ }" active-color="#ffffff" :bar-height="0" :active-item-style="{
backgroundColor: '#CC342D' backgroundColor: '#CC342D'
}"></u-tabs> }"></u-tabs>
</u-sticky> </u-sticky>
<!-- 商城列表 --> <!-- 商城列表 -->
<view class="product-section"> <view class="product-section">
<view v-for="(item, index) in recommendProductList" :key="index" class="product-item" <view v-for="(item, index) in recommendProductList" :key="index" class="product-item"
@click="navToDetailPage(item)"> @click="navToDetailPage(item)">
<view class="image-wrapper"> <view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image> <image :src="item.pic" mode="aspectFill"></image>
</view> </view>
<text class="title clamp">{{item.name}}</text> <text class="title clamp">{{item.name}}</text>
<!-- <text class="title2 clamp">{{item.subTitle}}</text> --> <!-- <text class="title2 clamp">{{item.subTitle}}</text> -->
<text class="price">{{item.price}}</text> <text class="price">{{item.price}}</text>
</view> </view>
</view> </view>
<uni-load-more :status="loadingType"></uni-load-more> <uni-load-more :status="loadingType"></uni-load-more>
</view> </view>
</template> </template>
<script> <script>
import { import {
mapState mapState
} from 'vuex'; } from 'vuex';
import { import {
fetchContent, fetchContent,
fetchContentV2, fetchContentV2,
fetchRecommendProductList fetchRecommendProductList
} from '@/api/home.js'; } from '@/api/home.js';
import { import {
fetchCartList fetchCartList
} from '@/api/cart.js'; } from '@/api/cart.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { import {
groupData groupData
} from '@/utils/index.js' } from '@/utils/index.js'
export default { export default {
components: { components: {
uniLoadMore uniLoadMore
}, },
data() { data() {
return { return {
keyword: '', keyword: '',
cartNum: 0, cartNum: 0,
serverList: [{ serverList: [{
code: 'myOrders', code: 'myOrders',
title: '我的订单', title: '我的订单',
}, },
{ {
code: 'collections', code: 'collections',
title: '收藏', title: '收藏',
}, },
{ {
code: 'records', code: 'records',
title: '足迹', title: '足迹',
}, },
{ {
code: 'serverCenter', code: 'serverCenter',
title: '客服中心', title: '客服中心',
}, },
], ],
advertiseList: [], advertiseList: [],
recommendProductList: [], recommendProductList: [],
hotProductList: [], hotProductList: [],
recommendParams: { recommendParams: {
pageNum: 1, pageNum: 1,
pageSize: 4, pageSize: 4,
categoryId: '', categoryId: '',
searchStr: '', searchStr: '',
}, },
loadingType: 'more', loadingType: 'more',
tagCurrent: 0, tagCurrent: 0,
categoryList: [{ categoryList: [{
id: '', id: '',
name: '全部', name: '全部',
}] }]
}; };
}, },
onLoad() { onLoad() {
// this.loadData(); // this.loadData();
}, },
onShow() { onShow() {
this.loadData(); this.loadData();
}, },
// //
onPullDownRefresh() { onPullDownRefresh() {
this.recommendParams = { this.recommendParams = {
pageNum: 1, pageNum: 1,
pageSize: 4, pageSize: 4,
searchStr: '', searchStr: '',
categoryId: '' categoryId: ''
}; };
this.tagCurrent = 0 this.tagCurrent = 0
this.keyword = '' this.keyword = ''
this.loadData(); this.loadData();
}, },
// //
onReachBottom() { onReachBottom() {
this.recommendParams.pageNum++; this.recommendParams.pageNum++;
this.loadingType = 'loading'; this.loadingType = 'loading';
fetchRecommendProductList(this.recommendParams).then(response => { fetchRecommendProductList(this.recommendParams).then(response => {
let addProductList = response.data; let addProductList = response.data;
if (response.data.length === 0) { if (response.data.length === 0) {
// //
this.recommendParams.pageNum--; this.recommendParams.pageNum--;
this.loadingType = 'nomore'; this.loadingType = 'nomore';
} else { } else {
this.recommendProductList = this.recommendProductList.concat(addProductList); this.recommendProductList = this.recommendProductList.concat(addProductList);
this.loadingType = 'more'; this.loadingType = 'more';
} }
}) })
}, },
computed: { computed: {
...mapState(['hasLogin']), ...mapState(['hasLogin']),
newAdvertiseList() { newAdvertiseList() {
console.log(groupData(this.advertiseList, 2)) console.log(groupData(this.advertiseList, 2))
return groupData(this.advertiseList, 2) return groupData(this.advertiseList, 2)
} }
}, },
filters: {}, filters: {},
methods: { methods: {
/** /**
* 加载数据 * 加载数据
*/ */
async loadData() { async loadData() {
fetchContent().then(response => { fetchContent().then(response => {
console.log("onLoad", response.data); console.log("onLoad", response.data);
this.advertiseList = response.data.advertiseList; this.advertiseList = response.data.advertiseList;
this.hotProductList = response.data.hotProductList; this.hotProductList = response.data.hotProductList;
fetchRecommendProductList(this.recommendParams).then(response => { fetchRecommendProductList(this.recommendParams).then(response => {
this.recommendProductList = response.data; this.recommendProductList = response.data;
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}) })
}); });
fetchContentV2().then(response => { fetchContentV2().then(response => {
this.categoryList = [{ this.categoryList = [{
id: '', id: '',
name: "全部" name: "全部"
}].concat(response.data.categoryList) }].concat(response.data.categoryList)
}); });
if (!this.hasLogin) { console.log('this.hasLogin', this.hasLogin)
return; if (!this.hasLogin) {
} return;
fetchCartList().then(response => { }
this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
}) fetchCartList().then(response => {
}, this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
// })
navToDetailPage(item) { },
let id = item.id; //
uni.navigateTo({ navToDetailPage(item) {
url: `/pages/product/product?id=${id}` let id = item.id;
}) uni.navigateTo({
}, url: `/pages/product/product?id=${id}`
//广 })
navToAdvertisePage(item) { },
let id = item.id; //广
console.log("navToAdvertisePage", item) navToAdvertisePage(item) {
}, let id = item.id;
// console.log("navToAdvertisePage", item)
goto(code) { },
switch (code) { //
case 'myOrders': goto(code) {
uni.navigateTo({ switch (code) {
url: '/pages/order/order?state=0' case 'myOrders':
}) uni.navigateTo({
break; url: '/pages/order/order?state=0'
case 'collections': })
uni.navigateTo({ break;
url: '/pages/user/productCollection' case 'collections':
}) uni.navigateTo({
break; url: '/pages/user/productCollection'
case 'records': })
uni.navigateTo({ break;
url: '/pages/user/readHistory' case 'records':
}) uni.navigateTo({
break; url: '/pages/user/readHistory'
case 'serverCenter': })
uni.showToast({ break;
title: '开发中,尽请期待!', case 'serverCenter':
icon: 'none', uni.showToast({
duration: 2000 title: '开发中,尽请期待!',
}); icon: 'none',
break; duration: 2000
default: });
break; break;
} default:
}, break;
changeTag(index) { }
console.log('index', index, this.categoryList[index]) },
this.tagCurrent = index changeTag(index) {
const currentTag = this.categoryList[index] console.log('index', index, this.categoryList[index])
this.recommendParams.pageNum = 1 this.tagCurrent = index
this.recommendParams.pageSize = 4 const currentTag = this.categoryList[index]
this.recommendParams.categoryId = currentTag.id this.recommendParams.pageNum = 1
this.getProductList() this.recommendParams.pageSize = 4
}, this.recommendParams.categoryId = currentTag.id
search() { this.getProductList()
this.recommendParams.searchStr = this.keyword },
this.recommendParams.pageNum = 1 search() {
this.recommendParams.pageSize = 4 this.recommendParams.searchStr = this.keyword
this.getProductList() this.recommendParams.pageNum = 1
}, this.recommendParams.pageSize = 4
getProductList() { this.getProductList()
fetchRecommendProductList(this.recommendParams).then(response => { },
this.recommendProductList = response.data; getProductList() {
if (response.data.length === 0) { fetchRecommendProductList(this.recommendParams).then(response => {
this.loadingType = 'nomore'; this.recommendProductList = response.data;
} else { if (response.data.length === 0) {
this.loadingType = 'more'; this.loadingType = 'nomore';
} } else {
uni.stopPullDownRefresh(); this.loadingType = 'more';
}) }
uni.stopPullDownRefresh();
} })
},
} }
</script> },
}
<style lang="scss"> </script>
page {
background: #f5f5f5; <style lang="scss">
} page {
background: #f5f5f5;
.m-t { }
margin-top: 16upx;
} .m-t {
margin-top: 16upx;
/* 搜索 */ }
.search-box {
padding: 8upx 12upx 32upx 36upx; /* 搜索 */
.search-box {
@include flex(x, center, center); padding: 8upx 12upx 32upx 36upx;
.search { @include flex(x, center, center);
@include flex(x, center, center);
flex: 1; .search {
} @include flex(x, center, center);
flex: 1;
.icon-box { }
position: relative;
@include flex(x, center, center); .icon-box {
width: 56upx; position: relative;
height: 56upx; @include flex(x, center, center);
} width: 56upx;
height: 56upx;
.cart-icon { }
width: 48upx;
height: 48upx; .cart-icon {
} width: 48upx;
height: 48upx;
.cart-badge>view { }
top: 0upx !important;
right: -12upx !important; .cart-badge>view {
} top: 0upx !important;
} right: -12upx !important;
}
/* 服务列表 */ }
.server-list {
width: 100vw; /* 服务列表 */
min-height: 120upx; .server-list {
padding: 0 36upx; width: 100vw;
display: flex; min-height: 120upx;
flex-wrap: wrap; padding: 0 36upx;
display: flex;
.server-item { flex-wrap: wrap;
width: 25%;
height: 120upx; .server-item {
display: flex; width: 25%;
flex-direction: column; height: 120upx;
align-items: center; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
.server-icon { justify-content: center;
image {
width: 48upx; .server-icon {
height: 48upx; image {
} width: 48upx;
} height: 48upx;
}
.server-text { }
color: rgba(0, 0, 0, 0.7);
} .server-text {
} color: rgba(0, 0, 0, 0.7);
}
} }
}
/* 头部 轮播图 */
.carousel-section {
position: relative; /* 头部 轮播图 */
.carousel-section {
.carousel { position: relative;
height: 180upx;
padding: 36rpx; .carousel {
box-sizing: content-box; height: 180upx;
padding: 36rpx;
.carousel-item { box-sizing: content-box;
width: 100%;
height: 100%; .carousel-item {
padding: 0 28upx; width: 100%;
overflow: hidden; height: 100%;
@include flex(x, center, center); padding: 0 28upx;
overflow: hidden;
image { @include flex(x, center, center);
height: 180upx;
width: 328upx; image {
margin: 0upx 10upx; height: 180upx;
} width: 328upx;
} margin: 0upx 10upx;
}
.carousel-item.single { }
image {
width: 656upx; .carousel-item.single {
} image {
} width: 656upx;
} }
}
} }
/* 标签列表 */ }
.tag-list {
/* 标签列表 */
// padding: 0 36upx; .tag-list {
.u-scroll-box {
view { // padding: 0 36upx;
background-color: #ffffff; .u-scroll-box {
border-radius: 60upx; view {
margin: 9upx; background-color: #ffffff;
} border-radius: 60upx;
} margin: 9upx;
} }
}
/* 商品列表 */ }
.product-section {
display: flex; /* 商品列表 */
flex-wrap: wrap; .product-section {
padding: 0 36upx; display: flex;
flex-wrap: wrap;
.product-item { padding: 0 36upx;
display: flex;
flex-direction: column; .product-item {
width: 48%; display: flex;
background-color: #ffffff; flex-direction: column;
margin-bottom: 36upx; width: 48%;
border-radius: 12upx; background-color: #ffffff;
margin-bottom: 36upx;
&:nth-child(2n+1) { border-radius: 12upx;
margin-right: 4%;
} &:nth-child(2n+1) {
} margin-right: 4%;
}
.image-wrapper { }
width: 100%;
height: 324upx; .image-wrapper {
border-radius: 3px; width: 100%;
overflow: hidden; height: 324upx;
border-radius: 3px;
image { overflow: hidden;
width: 100%;
height: 100%; image {
opacity: 1; width: 100%;
} height: 100%;
} opacity: 1;
}
.image-wrapper-brand { }
width: 100%;
height: 150upx; .image-wrapper-brand {
border-radius: 3px; width: 100%;
overflow: hidden; height: 150upx;
border-radius: 3px;
image { overflow: hidden;
width: 100%;
height: 100%; image {
opacity: 1; width: 100%;
} height: 100%;
} opacity: 1;
}
.title { }
padding: 0 36upx;
font-size: $font-base; .title {
color: $font-color-dark; padding: 0 36upx;
line-height: 80upx; font-size: $font-base;
} color: $font-color-dark;
line-height: 80upx;
.title2 { }
font-size: $font-sm;
color: $font-color-light; .title2 {
line-height: 40upx; font-size: $font-sm;
} color: $font-color-light;
line-height: 40upx;
.price { }
padding: 0 36upx 36upx 36upx;
font-size: $font-lg; .price {
color: #000000; padding: 0 36upx 36upx 36upx;
line-height: 1; font-size: $font-lg;
font-weight: 500; color: #000000;
} line-height: 1;
} font-weight: 500;
}
}
</style> </style>

File diff suppressed because it is too large Load Diff

@ -72,7 +72,7 @@
// //
isRead: false, isRead: false,
// //
isShowCode: true, isShowCode: false,
// //
isLogining: false, isLogining: false,
// //

@ -3,6 +3,7 @@ import {
API_BASE_URL, API_BASE_URL,
API_USER_URL, API_USER_URL,
} from '@/utils/appConfig.js'; } from '@/utils/appConfig.js';
import store from '@/store/index.js';
const http = new Request() const http = new Request()
@ -58,7 +59,7 @@ http.interceptor.response((response) => {
uni.showToast({ uni.showToast({
title: res.message, title: res.message,
duration: 1500, duration: 1500,
icon: 'error' icon: 'none'
}) })
//401未登录处理 //401未登录处理
if (res.code === 401) { if (res.code === 401) {
@ -77,7 +78,7 @@ http.interceptor.response((response) => {
} }
} }
}); });
uni.setStorageSync('token', '') store.commit('logout')
} }
return Promise.reject(response); return Promise.reject(response);
} else { } else {

Loading…
Cancel
Save