1020 lines
25 KiB
Vue
1020 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<view class="rf-index">
|
|||
|
|
<!--搜索导航栏-->
|
|||
|
|
<rf-search-bar @search="navToSearch" title="扫一扫" icon="iconsaomiao" :placeholder="hotSearchDefault" />
|
|||
|
|
<scroll-view scroll-x class="index-cate" :style="{top: customBar +'px'}" v-if="isOpenIndexCate && categoryList.length > 0">
|
|||
|
|
<view v-for="(item, index) in categoryList" :key="index" class="index-cate-item" :class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''"
|
|||
|
|
@tap.stop="tabClick(index, item.brandId)">
|
|||
|
|
{{ item.brandName }}
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<ad v-if="adOn" unit-id="adunit-4c607332fcb0fb3f"></ad>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view :class="isOpenIndexCate && categoryList.length > 0 ? 'main-wrapper' : ''">
|
|||
|
|
<block v-if="currentCate === 0">
|
|||
|
|
<!-- 轮播图1 -->
|
|||
|
|
<view class="swiper" v-if="index_top && index_top.length > 0">
|
|||
|
|
<view class="swiper-box">
|
|||
|
|
<rf-swipe-dot :info="index_top" mode="nav" :current="current" field="title">
|
|||
|
|
<swiper @change="handleDotChange" autoplay="true">
|
|||
|
|
<swiper-item v-for="(item, index) in index_top" @tap="indexTopToDetailPage(item)" :key="index">
|
|||
|
|
<view class="swiper-item">
|
|||
|
|
<image :src="item.pic" mode="aspectFill" />
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</rf-swipe-dot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 分类列表 -->
|
|||
|
|
<swiper :indicator-active-color="themeColor.color" indicator-color="#666" :indicator-dots="markingList.length > 10"
|
|||
|
|
:style="{height: markingList.length <= 5 ? '200rpx' : '400rpx'}" class="category-list-wrapper" v-if="markingList.length > 0">
|
|||
|
|
<swiper-item class="category-list">
|
|||
|
|
<view class="category" v-for="(sItem, sIndex) in markingList" :key="sIndex" @tap.stop="navToByStoreId(sItem.url)">
|
|||
|
|
<view class="img">
|
|||
|
|
<text class="iconfont" :style="{color: sItem.color}" :class="sItem.icon"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text in1line">{{ sItem.title}}</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
<!--新闻通知-->
|
|||
|
|
<rf-swiper-slide v-if="announceList && announceList.length > 0" :list="announceList" class="rf-skeleton" @navTo="navTo('/pages/index/notice/notice')">
|
|||
|
|
<view slot="header" class="swiper-slide-header">
|
|||
|
|
<text class="iconfont icongonggao" :class="'text-'+themeColor.name"></text>
|
|||
|
|
</view>
|
|||
|
|
</rf-swiper-slide>
|
|||
|
|
<!-- 爆款推荐 -->
|
|||
|
|
<view class="hot-recommend" v-if="hotRecommendList && hotRecommendList.length > 0">
|
|||
|
|
<view class="left">
|
|||
|
|
<image class="hot-recommend-image" @tap="navTo(hotRecommendList[0].url)" :src="hotRecommendList[0].pic"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<image class="hot-recommend-image" @tap.stop="navTo(hotRecommendList[1].url)" :src="hotRecommendList[1].pic"></image>
|
|||
|
|
<image class="hot-recommend-image" @tap.stop="navTo(hotRecommendList[2].url)" :src="hotRecommendList[2].pic"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 直播 -->
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<ad v-if="adOn" unit-id="adunit-2360481bbd1bd497" ad-type="video" ad-theme="white"></ad>
|
|||
|
|
<Live :detail="liveList"></Live>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!--推荐商品-->
|
|||
|
|
<rf-floor-index icon="icontuijian21" v-if="recommendProductList && recommendProductList.length > 0" :list="recommendProductList"
|
|||
|
|
:header="{ title: '推荐商品', desc: 'Recommend Product' }" @toBanner="indexTopToDetailPage" @toList="
|
|||
|
|
navTo(
|
|||
|
|
`/pages/product/list?param=${JSON.stringify({ is_recommend: 1 })}`
|
|||
|
|
)
|
|||
|
|
"
|
|||
|
|
@detail="navToDetailPage" :banner="index_recommend && index_recommend[0]" />
|
|||
|
|
<!--热门商品-->
|
|||
|
|
<rf-floor-index icon="iconremen2" v-if="hotProductList && hotProductList.length > 0" :list="hotProductList" :header="{ title: '热门商品', desc: 'Hot Product' }"
|
|||
|
|
@toBanner="indexTopToDetailPage" @toList="
|
|||
|
|
navTo(`/pages/product/list?param=${JSON.stringify({ is_hot: 1 })}`)
|
|||
|
|
"
|
|||
|
|
@detail="navToDetailPage" :banner="index_hot && index_hot[0]" />
|
|||
|
|
<!--猜您喜欢-->
|
|||
|
|
<rf-floor-p-index v-if="guessYouLikeProductList && guessYouLikeProductList.length > 0" icon="iconcainixihuan2"
|
|||
|
|
:list="guessYouLikeProductList" :isLink="false" :header="{ title: '新品上线', desc: 'Guess You Like It' }" @detail="navToDetailPage"
|
|||
|
|
:bannerShow="false" />
|
|||
|
|
<rf-load-more class="load-more" :status="loadingType" v-if="guessYouLikeProductList.length > 0"></rf-load-more>
|
|||
|
|
<!--网站备案号-->
|
|||
|
|
<!--#ifdef H5-->
|
|||
|
|
<view class="copyright">
|
|||
|
|
|
|||
|
|
<a href="" target="_blank"></a>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</block>
|
|||
|
|
<view v-else class="index-cate-product-list">
|
|||
|
|
<rf-product-list :bottom="bottom" :list="categoryProductList"></rf-product-list>
|
|||
|
|
<rf-load-more :status="loadingType" v-if="categoryProductList.length > 0"></rf-load-more>
|
|||
|
|
<rf-empty :bottom="bottom" :info="'暂无该分类产品~'" v-if="categoryProductList.length === 0 && !productLoading"></rf-empty>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!--页面加载动画-->
|
|||
|
|
<rfLoading isFullScreen :active="loading"></rfLoading>
|
|||
|
|
<rf-back-home></rf-back-home>
|
|||
|
|
<rf-back-top :scrollTop="scrollTop"></rf-back-top>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* @des 微商城首页
|
|||
|
|
*
|
|||
|
|
* @author 237524947@qq.com
|
|||
|
|
* @date 2020-01-08 14:14
|
|||
|
|
* @copyright 2019
|
|||
|
|
*/
|
|||
|
|
import {
|
|||
|
|
indexList,
|
|||
|
|
productList,
|
|||
|
|
storeList
|
|||
|
|
} from '@/api/product';
|
|||
|
|
import {
|
|||
|
|
bannerList,
|
|||
|
|
homeRecommendSubject,
|
|||
|
|
homeRecommendProduct,
|
|||
|
|
homeBrand,
|
|||
|
|
queryliveplayerroomlist,
|
|||
|
|
noticeList,
|
|||
|
|
typeList,
|
|||
|
|
homeNewProduct
|
|||
|
|
} from '@/api/sms';
|
|||
|
|
import {
|
|||
|
|
getOpenId,
|
|||
|
|
mpWechatLogin,
|
|||
|
|
wechatH5Login,
|
|||
|
|
thirdPartyWechatOpenPlatform,
|
|||
|
|
thirdPartyApple,
|
|||
|
|
runData
|
|||
|
|
} from '@/api/login';
|
|||
|
|
import {
|
|||
|
|
footPrintList,
|
|||
|
|
memberInfo,
|
|||
|
|
notifyUnRreadCount
|
|||
|
|
} from '@/api/userInfo';
|
|||
|
|
import rfSwipeDot from '@/components/rf-swipe-dot';
|
|||
|
|
import Live from '@/components/Live';
|
|||
|
|
import rfFloorIndex from '@/components/rf-floor-index';
|
|||
|
|
import rfFloorPIndex from '@/components/rf-floor-p-index';
|
|||
|
|
import rfSearchBar from '@/components/rf-search-bar';
|
|||
|
|
import rfSwiperSlide from '@/components/rf-swiper-slide';
|
|||
|
|
import rfProductList from '@/components/rf-product-list';
|
|||
|
|
import {
|
|||
|
|
mapMutations
|
|||
|
|
} from 'vuex';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Live,
|
|||
|
|
rfFloorIndex,
|
|||
|
|
rfFloorPIndex,
|
|||
|
|
rfSwipeDot,
|
|||
|
|
rfProductList,
|
|||
|
|
rfSearchBar,
|
|||
|
|
rfSwiperSlide
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
current: 0, // 轮播图index
|
|||
|
|
carouselList: {}, // 广告图
|
|||
|
|
index_hot: [], // 广告图
|
|||
|
|
index_new: [], // 广告图
|
|||
|
|
index_recommend: [], // 广告图
|
|||
|
|
index_top: [], // 广告图
|
|||
|
|
hotProductList: [], // 热门商品列表
|
|||
|
|
brandList: [],
|
|||
|
|
liveList: [],
|
|||
|
|
recommendProductList: [], // 推荐商品列表
|
|||
|
|
guessYouLikeProductList: [], // 猜您喜欢商品列表
|
|||
|
|
newProductList: [], // 新品上市商品列表
|
|||
|
|
productCateList: [], // 商品栏目
|
|||
|
|
markingList: this.$mConstDataConfig.markingList,
|
|||
|
|
config: {}, // 商户配置
|
|||
|
|
announceList: [], // 公告列表
|
|||
|
|
share: {},
|
|||
|
|
adOn: this.adOn,
|
|||
|
|
loading: true,
|
|||
|
|
scrollTop: 0,
|
|||
|
|
kefuShow: true,
|
|||
|
|
loadingType: 'more',
|
|||
|
|
hotSearchDefault: '请输入关键字',
|
|||
|
|
newsBg: this.$mAssetsPath.newsBg,
|
|||
|
|
errorImage: this.$mAssetsPath.errorImage,
|
|||
|
|
appName: this.$mSettingConfig.appName,
|
|||
|
|
tabCurrentIndex: 0,
|
|||
|
|
categoryList: [], // 分类列表
|
|||
|
|
categoryProductList: [], // 分类列表
|
|||
|
|
pageNum: 0,
|
|||
|
|
currentCate: 0,
|
|||
|
|
hotRecommendList: this.$mConstDataConfig.hotRecommendList,
|
|||
|
|
productLoading: true,
|
|||
|
|
customBar: this.CustomBar,
|
|||
|
|
isOpenIndexCate: this.$mSettingConfig.isOpenIndexCate,
|
|||
|
|
moneySymbol: this.moneySymbol
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
this.scrollTop = e.scrollTop;
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 初始化购物车数量
|
|||
|
|
this.setCartNum(uni.getStorageSync('cartNum'));
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.initData(option);
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 计算倒计时时间
|
|||
|
|
second() {
|
|||
|
|
return function(val) {
|
|||
|
|
return Math.floor(15 * 60 - (new Date() / 1000 - val));
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
bottom() {
|
|||
|
|
let bottom = 0;
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
bottom = 90;
|
|||
|
|
/* #endif */
|
|||
|
|
return bottom;
|
|||
|
|
},
|
|||
|
|
swipeCateList() {
|
|||
|
|
const list = this.brandList;
|
|||
|
|
let result = [];
|
|||
|
|
for (let i = 0, len = list.length; i < len; i += 10) {
|
|||
|
|
result.push(list.slice(i, i + 10));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
if (this.hasLogin) {
|
|||
|
|
let userInfo = uni.getStorageSync('userInfo')
|
|||
|
|
return {
|
|||
|
|
title: `${userInfo.nickname}邀请你来到${this.appName}`,
|
|||
|
|
path: '/pages/index/index?recommondCode='+userInfo.selfRecommendCode
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
title: `欢迎来到${this.appName}`,
|
|||
|
|
path: '/pages/index/index'
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShareTimeline: function(res) {
|
|||
|
|
if (!this.hasLogin) {
|
|||
|
|
let userInfo = uni.getStorageSync('userInfo')
|
|||
|
|
return {
|
|||
|
|
title: `${userInfo.nickname}邀请你来到${this.appName}`,
|
|||
|
|
query: 'recommondCode=${userInfo.selfRecommendCode}'
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
title: `欢迎来到${this.appName}`,
|
|||
|
|
query: '1=1'
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
filters: {
|
|||
|
|
filterDiscountPrice(val) {
|
|||
|
|
const price = val.product && (val.product.price * val.discount) / 100;
|
|||
|
|
switch (val.decimal_reservation_number) {
|
|||
|
|
case 0:
|
|||
|
|
return (Math.floor(price * 100) / 100).toFixed(2);
|
|||
|
|
case 1:
|
|||
|
|
return (Math.floor(price * 100) / 100).toFixed(0);
|
|||
|
|
case 2:
|
|||
|
|
return (Math.floor(price * 100) / 100).toFixed(1);
|
|||
|
|
default:
|
|||
|
|
return (Math.floor(price * 100) / 100).toFixed(2);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
filterTotalSales(val) {
|
|||
|
|
if (val > 10000) {
|
|||
|
|
val = `${(val / 10000).toFixed(2)}w`;
|
|||
|
|
}
|
|||
|
|
return val;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.loading = false;
|
|||
|
|
this.initData();
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}, 250);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 加载更多
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.loadingType === 'nomore') return;
|
|||
|
|
if (this.currentCate === 0) {
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getNewProductList();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getProductList(this.currentCate);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['setNotifyNum', 'setCartNum']),
|
|||
|
|
// 顶部tab点击
|
|||
|
|
tabClick(index, id) {
|
|||
|
|
this.currentCate = id;
|
|||
|
|
this.tabCurrentIndex = index;
|
|||
|
|
if (id === 0) return;
|
|||
|
|
this.loading = true;
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.productLoading = true;
|
|||
|
|
this.categoryProductList = [];
|
|||
|
|
this.getProductList(id);
|
|||
|
|
},
|
|||
|
|
// 获取产品列表
|
|||
|
|
async getProductList(id) {
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${productList}`, {
|
|||
|
|
brandId: id,
|
|||
|
|
pageNum: this.pageNum
|
|||
|
|
})
|
|||
|
|
.then(async r => {
|
|||
|
|
this.loading = false;
|
|||
|
|
this.productLoading = false;
|
|||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|||
|
|
this.categoryProductList = [...this.categoryProductList, ...r.list];
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
this.productLoading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 监听轮播图切换
|
|||
|
|
handleDotChange(e) {
|
|||
|
|
this.current = e.detail.current;
|
|||
|
|
},
|
|||
|
|
// 获取code
|
|||
|
|
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
|
|||
|
|
getCode() {
|
|||
|
|
var appid = `${this.$mConfig.weixinAppId}`;
|
|||
|
|
var hostUrl = `${this.$mConfig.hostUrl}`;
|
|||
|
|
|
|||
|
|
// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
|
|||
|
|
let code = this.getUrlCode('code')
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (code === null || code === '') {
|
|||
|
|
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
|
|||
|
|
encodeURIComponent('https://mojin.51wangshi.com') +
|
|||
|
|
'&response_type=code&scope=snsapi_userinfo&state=1234#wechat_redirect'
|
|||
|
|
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
|
|||
|
|
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
|
|||
|
|
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getUrlCode(name) {
|
|||
|
|
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
|
|||
|
|
.replace(/\+/g, '%20')) || null
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getOpenidAndUserinfo(code) {
|
|||
|
|
var storeId = `${this.$mConfig.storeId}`;
|
|||
|
|
this.$http.get(`${wechatH5Login}`, {
|
|||
|
|
code: code,
|
|||
|
|
recommondCode: uni.getStorageSync('recommondCode'),
|
|||
|
|
storeId: storeId
|
|||
|
|
}).then(r => {
|
|||
|
|
this.$mStore.commit('login', r);
|
|||
|
|
|
|||
|
|
this.$mRouter.reLaunch({
|
|||
|
|
route: '/pages/profile/profile'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 数据初始化
|
|||
|
|
initData(option) {
|
|||
|
|
|
|||
|
|
var baseUrl = `${this.$mConfig.baseUrl}`;
|
|||
|
|
var storeId = `${this.$mConfig.storeId}`;
|
|||
|
|
this.storeId=storeId;
|
|||
|
|
this.hasLogin = this.$mStore.getters.hasLogin;
|
|||
|
|
this.loading = false;
|
|||
|
|
|
|||
|
|
if (option && option.recommondCode) {
|
|||
|
|
uni.setStorageSync('recommondCode', option.recommondCode)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
if (option && this.$mPayment.isWechat() && !this.hasLogin) {
|
|||
|
|
let code = this.getCode()
|
|||
|
|
|
|||
|
|
if (option.code !== null && option.code !== "" && option.code !== undefined) {
|
|||
|
|
|
|||
|
|
this.getOpenidAndUserinfo(option.code)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
// 设置购物车数量角标
|
|||
|
|
this.getBannerList();
|
|||
|
|
this.getannounceList();
|
|||
|
|
// this.getTypeList();
|
|||
|
|
this.getBrandList();
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.getLiveList();
|
|||
|
|
// #endif
|
|||
|
|
//this.getStoreList();
|
|||
|
|
this.loading = false;
|
|||
|
|
this.getHotProductList();
|
|||
|
|
this.getRecommendProductList();
|
|||
|
|
|
|||
|
|
this.getNewProductList();
|
|||
|
|
if (this.hasLogin) {
|
|||
|
|
|
|||
|
|
this.initNotifyNum();
|
|||
|
|
this.initCartItemCount();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
async getLiveList() {
|
|||
|
|
await this.$http.get(`${queryliveplayerroomlist}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(groupHotGoodsList => {
|
|||
|
|
|
|||
|
|
groupHotGoodsList.forEach(item => {
|
|||
|
|
if (item.live_status == '101') {
|
|||
|
|
if (this.liveList.length < 3) {
|
|||
|
|
this.liveList.push(item)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (this.liveList.length < 3) {
|
|||
|
|
groupHotGoodsList.forEach(item => {
|
|||
|
|
if (item.live_status == '103') {
|
|||
|
|
if (this.liveList.length < 3) {
|
|||
|
|
this.liveList.push(item)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (this.liveList.length < 3) {
|
|||
|
|
groupHotGoodsList.forEach(item => {
|
|||
|
|
if (item.live_status == '102') {
|
|||
|
|
if (this.liveList.length < 3) {
|
|||
|
|
this.liveList.push(item)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 设置购物车数量角标
|
|||
|
|
async initCartItemCount() {
|
|||
|
|
if (
|
|||
|
|
this.$mStore.getters.hasLogin &&
|
|||
|
|
parseInt(uni.getStorageSync('cartNum'), 10) > 0
|
|||
|
|
) {
|
|||
|
|
uni.setTabBarBadge({
|
|||
|
|
index: this.$mConstDataConfig.cartIndex,
|
|||
|
|
text: uni.getStorageSync('cartNum').toString()
|
|||
|
|
});
|
|||
|
|
uni.setTabBarBadge({
|
|||
|
|
index: this.$mConstDataConfig.notifyIndex,
|
|||
|
|
text: uni.getStorageSync('notifyNum').toString()
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.removeStorageSync('cartNum');
|
|||
|
|
uni.removeTabBarBadge({
|
|||
|
|
index: this.$mConstDataConfig.cartIndex
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
uni.removeStorageSync('notifyNum');
|
|||
|
|
uni.removeTabBarBadge({
|
|||
|
|
index: this.$mConstDataConfig.notifyIndex
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 通用跳转
|
|||
|
|
navTo(route) {
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
navToByStoreId(route) {
|
|||
|
|
this.navTo(route + `?storeId=0`);
|
|||
|
|
},
|
|||
|
|
// 跳转至分类模块
|
|||
|
|
navToCategory(id) {
|
|||
|
|
if (this.$mSettingConfig.appCateType === '2') {
|
|||
|
|
uni.setStorageSync('indexToCateId', id);
|
|||
|
|
this.$mRouter.reLaunch({
|
|||
|
|
route: '/pages/category/category'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.navTo(`/pages/product/list?cate_id=${id}`);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 通用跳转
|
|||
|
|
navToSearch() {
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 跳至广告图指定页面
|
|||
|
|
indexTopToDetailPage(item) {
|
|||
|
|
var url = item.url
|
|||
|
|
this.navTo(url + `&storeId=` + this.storeId);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async getStoreList() {
|
|||
|
|
await this.$http.get(`${storeList}`, {
|
|||
|
|
orderBy: 1,
|
|||
|
|
pageSize: 40
|
|||
|
|
}).then(r => {
|
|||
|
|
this.productCateList = r.list;
|
|||
|
|
this.categoryList = [{
|
|||
|
|
id: 0,
|
|||
|
|
storeName: '平台自营'
|
|||
|
|
}, ...this.productCateList];
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 推荐品牌
|
|||
|
|
async getBrandList() {
|
|||
|
|
await this.$http.get(`${homeBrand}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(r => {
|
|||
|
|
this.productCateList = r;
|
|||
|
|
this.categoryList = [{
|
|||
|
|
brandId: 0,
|
|||
|
|
brandName: '首页'
|
|||
|
|
}, ...this.productCateList];
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 轮播图列表 1 轮播图 2 新品推荐广告 3 人气推荐广告 4热门推荐广告 5 分类广告
|
|||
|
|
async getBannerList() {
|
|||
|
|
await this.$http.get(`${bannerList}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(r => {
|
|||
|
|
|
|||
|
|
r.forEach((item, index) => {
|
|||
|
|
if (item.orderCount === 1) {
|
|||
|
|
this.index_top.push(item)
|
|||
|
|
} else if (item.orderCount === 2) {
|
|||
|
|
this.index_new.push(item)
|
|||
|
|
} else if (item.orderCount === 3) {
|
|||
|
|
this.index_recommend.push(item)
|
|||
|
|
} else if (item.orderCount === 4) {
|
|||
|
|
this.index_hot.push(item)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 设置未读消息个数
|
|||
|
|
async initNotifyNum() {
|
|||
|
|
await this.$http.get(notifyUnRreadCount).then(r => {
|
|||
|
|
this.setNotifyNum(r);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 公告列表
|
|||
|
|
async getannounceList() {
|
|||
|
|
await this.$http.get(`${noticeList}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(r => {
|
|||
|
|
this.announceList = r;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 热门商品列表
|
|||
|
|
async getHotProductList() {
|
|||
|
|
await this.$http.get(`${homeNewProduct}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(r => {
|
|||
|
|
this.hotProductList = r;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 推荐商品列表
|
|||
|
|
async getRecommendProductList() {
|
|||
|
|
await this.$http.get(`${homeRecommendProduct}`, {
|
|||
|
|
storeId: 0
|
|||
|
|
}).then(r => {
|
|||
|
|
this.recommendProductList = r;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 猜您喜欢商品列表
|
|||
|
|
|
|||
|
|
|
|||
|
|
async getNewProductList(type) {
|
|||
|
|
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${productList}`, {
|
|||
|
|
...this.productParams,
|
|||
|
|
storeId: -1,
|
|||
|
|
pageNum: this.pageNum
|
|||
|
|
})
|
|||
|
|
.then(async r => {
|
|||
|
|
console.log(r)
|
|||
|
|
this.loading = false;
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
console.log(r)
|
|||
|
|
if (r.list) {
|
|||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|||
|
|
this.guessYouLikeProductList = [...this.guessYouLikeProductList, ...r.list];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
this.errorInfo = err;
|
|||
|
|
this.loading = false;
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 跳转至商品详情页
|
|||
|
|
navToDetailPage(data) {
|
|||
|
|
const {
|
|||
|
|
id
|
|||
|
|
} = data;
|
|||
|
|
if (!id) return;
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route: `/pages/product/product?id=${id}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 跳转至分类页
|
|||
|
|
toCategory() {
|
|||
|
|
this.$mRouter.switchTab({
|
|||
|
|
route: '/pages/category/category'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: $page-color-base;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rf-index {
|
|||
|
|
background-color: $color-white;
|
|||
|
|
|
|||
|
|
/*爆款拼团*/
|
|||
|
|
.wrapper {
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
|
|||
|
|
.h-list {
|
|||
|
|
background-color: $page-color-base;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
padding: 0 $spacing-sm;
|
|||
|
|
|
|||
|
|
.h-item {
|
|||
|
|
margin: $spacing-sm $spacing-sm $spacing-sm 0;
|
|||
|
|
display: inline-block;
|
|||
|
|
background-color: $color-white;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
width: 280upx;
|
|||
|
|
border-radius: 6upx;
|
|||
|
|
|
|||
|
|
.h-item-img {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 280upx;
|
|||
|
|
height: 300upx;
|
|||
|
|
border-top-left-radius: 12upx;
|
|||
|
|
border-top-right-radius: 12upx;
|
|||
|
|
border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 280upx;
|
|||
|
|
white-space: normal;
|
|||
|
|
height: 60upx;
|
|||
|
|
line-height: 30upx;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
padding: 0 $spacing-sm;
|
|||
|
|
margin: $spacing-sm 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.last-line {
|
|||
|
|
padding: 0 $spacing-sm $spacing-base;
|
|||
|
|
margin-bottom: 5upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
/* 垂直居中 */
|
|||
|
|
.red {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
margin-right: 4upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
font-size: $font-base - 2upx;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
.m-price {
|
|||
|
|
margin-left: 8upx;
|
|||
|
|
color: $font-color-light;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*轮播图*/
|
|||
|
|
.swiper {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.swiper-box {
|
|||
|
|
width: 92%;
|
|||
|
|
height: 40vw;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 15upx;
|
|||
|
|
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
|
|||
|
|
//兼容ios，微信小程序
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
swiper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40vw;
|
|||
|
|
|
|||
|
|
swiper-item {
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40vw;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 爆款推荐 */
|
|||
|
|
.hot-recommend {
|
|||
|
|
background-color: $color-white;
|
|||
|
|
display: flex;
|
|||
|
|
padding: $spacing-base $spacing-lg 0;
|
|||
|
|
|
|||
|
|
.hot-recommend-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
flex: 3;
|
|||
|
|
height: 350upx;
|
|||
|
|
margin-right: 15upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
flex: 4;
|
|||
|
|
|
|||
|
|
.hot-recommend-image {
|
|||
|
|
height: 170upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*轮播图2*/
|
|||
|
|
.swiper-item-text {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 16upx;
|
|||
|
|
left: 30upx;
|
|||
|
|
height: 48upx;
|
|||
|
|
line-height: 48upx;
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
width: 90%;
|
|||
|
|
color: $color-white;
|
|||
|
|
border-bottom-left-radius: 12upx;
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*新闻通知*/
|
|||
|
|
.swiper-slide-header {
|
|||
|
|
.picfont {
|
|||
|
|
font-size: $font-lg + 8upx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*分类列表*/
|
|||
|
|
.category-list-wrapper {
|
|||
|
|
.category-list {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: $spacing-base;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.category {
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
width: calc(20% - 20upx);
|
|||
|
|
height: 132upx;
|
|||
|
|
display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 12vw;
|
|||
|
|
height: 12vw;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
margin-top: 16upx;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #3c3c3c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*版权显示*/
|
|||
|
|
.copyright {
|
|||
|
|
margin: 10upx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
display: block;
|
|||
|
|
color: #666;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*限时抢购*/
|
|||
|
|
.order-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 30upx;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
|
|||
|
|
.goods-box-single {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 40upx 10upx 10upx;
|
|||
|
|
height: 330upx;
|
|||
|
|
border-radius: 12upx;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
box-shadow: 2px 2px 10px rgba(66, 135, 193, 0.2); // 阴影
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05); // 边框
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.goods-img {
|
|||
|
|
display: block;
|
|||
|
|
border-radius: 12upx;
|
|||
|
|
width: 190upx;
|
|||
|
|
height: 200upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 0 30upx 0 24upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin: 10upx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.attr-box {
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin-bottom: 8upx;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.last-line {
|
|||
|
|
margin-top: 3upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
/* 垂直居中 */
|
|||
|
|
.red {
|
|||
|
|
margin-right: 4upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
font-size: $font-lg;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
.m-price {
|
|||
|
|
margin-left: 8upx;
|
|||
|
|
color: $font-color-light;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.triangle-wrapper {
|
|||
|
|
position: absolute;
|
|||
|
|
overflow: hidden;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-radius: 12upx;
|
|||
|
|
|
|||
|
|
.triangle {
|
|||
|
|
color: #5eba8f;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-top: 120upx solid;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
border-left: 120upx solid transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.triangle-content {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 28upx;
|
|||
|
|
right: 0;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
font-size: $font-sm - 2upx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 90upx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.discount-time {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
color: $uni-color-success;
|
|||
|
|
margin-right: 20upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.index-cate {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
z-index: 10;
|
|||
|
|
background-color: $color-white;
|
|||
|
|
/*#ifndef MP*/
|
|||
|
|
position: fixed;
|
|||
|
|
/*#endif*/
|
|||
|
|
margin-bottom: $spacing-sm;
|
|||
|
|
|
|||
|
|
.index-cate-item {
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 75upx;
|
|||
|
|
line-height: 75upx;
|
|||
|
|
margin: 0 15upx;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 120upx;
|
|||
|
|
font-size: $font-base;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
font-weight: 500;
|
|||
|
|
border-bottom: 2px solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-wrapper {
|
|||
|
|
margin-top: 85upx;
|
|||
|
|
/*#ifdef MP*/
|
|||
|
|
margin-top: 0;
|
|||
|
|
/*#endif*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.index-cate-product-list {
|
|||
|
|
padding-top: $spacing-sm;
|
|||
|
|
background-color: $page-color-base;
|
|||
|
|
|
|||
|
|
.no-data {
|
|||
|
|
margin: 48upx 0;
|
|||
|
|
color: $font-color-light;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.picfont {
|
|||
|
|
margin-right: 20upx;
|
|||
|
|
font-size: $font-lg + 16upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|