jiuyiUniapp/shop/pages/index/storeDetail.vue

1004 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="rf-index">
<view class="head" >
<view class="backstyle" >
</view>
<image :src="store.avatarPicture" mode="widthFix"></image>
</view>
<!-- 商家内容标题部分 -->
<view class="content-title">
<view class="title-img" @click="magnifyThree">
<image :src="store.avatarPicture" mode=""></image>
</view>
<view class="title-font">
<view class="fontBox">
{{store.storeName}}
</view>
<view class="fontInfo">
{{store.companyPhone}}
</view>
</view>
<view class="collect" @tap="goCollect(store)">
<view class="iconfont" :class="[ favorite ? `text-${themeColor.name} iconshixin1` : 'iconguanzhu']"></view>
<text>收藏</text>
</view>
</view>
<!--搜索导航栏-->
<rf-search-bar
@search="navToSearch"
title="扫一扫"
icon="iconsaomiao"
:placeholder="hotSearchDefault"
/>
<!-- #ifdef MP-WEIXIN -->
<ad unit-id="adunit-4c607332fcb0fb3f"></ad>
<!-- #endif -->
<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>
<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>
<!--推荐商品-->
<rf-floor-index v-if="recommendProductList && recommendProductList.length > 0"
icon="icontuijian21"
: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 v-if="hotProductList && hotProductList.length > 0"
icon="iconremen2"
: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"
/>
<!--网站备案号-->
<!--#ifdef H5-->
<view class="copyright" v-if="config.web_site_icp">
{{ config.copyright_desc }}
<a href="http://www.beian.miit.gov.cn">{{ config.web_site_icp }}</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,querystoreinfo,
productList
} from '@/api/product';
import {
addStoreAttention,
// 删除收藏店铺
cancelStoreAttention,
} from '@/api/basic';
import {
bannerList,
homeRecommendSubject,
homeRecommendProduct,
homeBrand,noticeList,typeList,
homeNewProduct} from '@/api/sms';
import rfFloorPIndex from '@/components/rf-floor-p-index';
import rfSwipeDot from '@/components/rf-swipe-dot';
import rfFloorIndex from '@/components/rf-floor-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: {rfFloorPIndex,
rfFloorIndex,
rfSwipeDot,
rfProductList,
rfSearchBar,
rfSwiperSlide
},
data() {
return {
current: 0, // 轮播图index
carouselList: {}, // 广告图
index_hot: [], // 广告图
index_new: [], // 广告图
index_recommend: [], // 广告图
index_top: [], // 广告图
hotProductList: [], // 热门商品列表
markingList: this.$mConstDataConfig.markingList,
brandList:[],
store:{},
recommendProductList: [], // 推荐商品列表
guessYouLikeProductList: [], // 猜您喜欢商品列表
newProductList: [], // 新品上市商品列表
productCateList: [], // 商品栏目
config: {}, // 商户配置
announceList: [], // 公告列表
share: {},
loading: true,
scrollTop: 0,
hasLogin: this.$mStore.getters.hasLogin,
kefuShow: true,
loadingType: 'more',
hotSearchDefault: '请输入关键字',
newsBg: this.$mAssetsPath.newsBg,
errorImage: this.$mAssetsPath.errorImage,
appName: this.$mSettingConfig.appName,
tabCurrentIndex: 0,
categoryList: [], // 分类列表
categoryProductList: [], // 分类列表
pageNum :0,
favorite:false,
storeId:0,
currentCate: 0,
hotRecommendList: this.$mConstDataConfig.hotRecommendList,
productLoading: true,
customBar: this.CustomBar,
isOpenIndexCate: false,
adOn: this.adOn,
moneySymbol: this.moneySymbol
};
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onShow() {
// 初始化购物车数量
this.setCartNum(uni.getStorageSync('cartNum'));
},
onLoad(option) {
this.storeId=option.id
this.initData(option.id);
},
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;
},
},
onShareAppMessage() {
let shareParams = { title: this.share.share_title || `欢迎来到${this.appName}`, path: '/pages/index/index' };
return shareParams;
},
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.initData(this.storeId);
setTimeout(() => {
uni.stopPullDownRefresh();
}, 250);
},
// 加载更多
onReachBottom() {
if (this.loadingType === 'nomore') return;
if (this.currentCate === 0) {
this.pageNum++
this.getNewProductList();
return;
}
},
methods: {
navToByStoreId(route) {
this.navTo(route+`&storeId=`+this.storeId);
},
// 跳至广告图指定页面
indexTopToDetailPage(route) {
var url = route.url
this.navTo(url+`&storeId=`+this.storeId);
},
// 顶部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 getBrandList(storeId) {
await this.$http.get(`${homeBrand}`, {
storeId: storeId
}).then(r => {
this.productCateList = r;
this.categoryList = [{
brandId: 0,
brandName: '首页'
}, ...this.productCateList];
});
},
async getNewProductList(type) {
console.log('获取商品列表')
await this.$http
.get(`${productList}`, {
...this.productParams,
pageNum: this.pageNum,
storeId:this.storeId
})
.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();
}
});
},
// 获取产品列表
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;
});
},
...mapMutations(['setCartNum']),
// 监听轮播图切换
handleDotChange(e) {
this.current = e.detail.current;
},
// 数据初始化
initData(storeId) {
this.getStore(storeId);
// 设置购物车数量角标
this.getBannerList(storeId);
//
this.getannounceList(storeId);
this.loading = false;
this.getBrandList(storeId);
this.getHotProductList(storeId);
this.getRecommendProductList(storeId);
this.getNewProductList(storeId);
this.hasLogin = this.$mStore.getters.hasLogin;
this.initCartItemCount();
},
// 设置购物车数量角标
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 });
},
// 跳转至分类模块
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)}`
});
},
async goCollect(store){
if (!this.hasLogin) {
await this.$mHelper.backToLogin();
} else {
this.favorite ? this.handleCollectDel(store) : this.handleCollectCreate(store);
}
},
// 收藏商品
async handleCollectCreate(store) {
await this.$http
.get(`${addStoreAttention}`, {
storeId: store.id
})
.then(() => {
this.favorite=!this.favorite
console.log(this.favorite)
this.$mHelper.toast('收藏成功');
});
},
// 取消收藏商品
async handleCollectDel(store) {
await this.$http
.delete(`${cancelStoreAttention}?storeId=${store.id}`)
.then(() => {
this.favorite=!this.favorite
console.log(this.favorite)
this.$mHelper.toast('取消收藏成功');
});
},
async getStore(storeId) {
await this.$http.get(`${querystoreinfo}`,{storeId:storeId}).then(r => {
this.store = r;
this.favorite = r.hasAttention==1?true:false
});
},
// 轮播图列表 1 轮播图 2 新品推荐广告 3 人气推荐广告 4热门推荐广告
async getBannerList(storeId) {
await this.$http.get(`${bannerList}`,{storeId:storeId}).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 getannounceList(storeId) {
await this.$http.get(`${noticeList}`,{storeId:storeId}).then(r => {
this.announceList = r;
});
},
// 热门商品列表
async getHotProductList(storeId) {
await this.$http.get(`${homeNewProduct}`,{storeId:storeId}).then(r => {
this.hotProductList = r;
});
},
// 推荐商品列表
async getRecommendProductList(storeId) {
await this.$http.get(`${homeRecommendProduct}`,{storeId:storeId}).then(r => {
this.recommendProductList = r;
});
},
// 猜您喜欢商品列表
async getGuessYouLikeProductList(storeId) {
await this.$http.get(`${guessYouLikeProductList}`,{storeId:storeId}).then(r => {
this.guessYouLikeProductList = r;
});
},
// 跳转至商品详情页
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;
}
}
}
.head{
width: 750upx;
height: 300upx;
overflow: hidden;
position: relative;
}
.head image{
width: 750upx;
height: 180upx;
}
.backstyle{
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-color: rgba(0,0,0,0.4);
background-repeat: no-repeat;
}
.content-title{
width: 100%;
height:auto;
display: flex;
margin-top: -120upx;
position: relative;
background-color: rgba(0,0,0,0.5);
}
.content-content{
padding-left: 16upx;
}
.title-img{
float:left;
width: 130upx;
height:130upx;
margin-left: 30upx;
margin-right: 30upx;
margin-top: 10upx;
}
.title-img image{
width: 130upx;
height:130upx;
border-radius: 6upx;
}
.title-font{
width: 440upx;
height: 150upx;
float: left;
margin-top: 10upx;
color: #FFF;
}
.title-btn{
width:170upx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15upx;
}
.title-btn view{
width: 70upx;
height: 70upx;
margin-left: 15upx;
}
.fontBox{
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 36upx;
}
.fontInfo{
font-size: 24upx;
}
.bbox{
width: 100%;
height:20upx;
background-color: #e4e2e2;
}
.addressBox{
width: 690upx;
height:auto;
padding-top: 20upx;
padding-bottom: 20upx;
padding-left:30upx;
display: flex;
justify-content: space-between;
}
.addressBox-left{
display: flex;
}
.addressBox-right{
display: flex;
width:148upx;
justify-content: space-between;
}
.imgBox{
width: 750upx;
padding:0 30upx;
height: auto;
display: flex;
flex-wrap: wrap;
}
.imgBoxImg{
margin-top:40upx;
margin-left: 5upx;
margin-right: 5upx;
width: 220upx;
height:220upx;
}
.imgBoxImg image{
width: 220upx;
height:220upx;
border-radius: 10upx;
}
}
</style>