|
|
|
@ -1,42 +1,70 @@ |
|
|
|
<template> |
|
|
|
<view class="mall-index"> |
|
|
|
<view class="mi-header"> |
|
|
|
<index-search-bar></index-search-bar> |
|
|
|
<view class="mh-graph"></view> |
|
|
|
<swiper class="mh-swiper" indicator-dots indicator-active-color='#009874'> |
|
|
|
<swiper-item v-for="i in 3" :key=i> |
|
|
|
<image class="ms-img" mode="aspectFill" :src="tImg"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<index-search-bar v-if="isShow('搜索栏')"></index-search-bar> |
|
|
|
<block v-if="isShow('轮播图')&&banner.length"> |
|
|
|
<view class="mh-graph"></view> |
|
|
|
<swiper class="mh-swiper" autoplay indicator-dots indicator-active-color='#009874'> |
|
|
|
<swiper-item v-for="(e, i) in banner" :key=i> |
|
|
|
<image @click="bannerClick(e)" class="ms-img" mode="aspectFill" :src="e.banner_imgs"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</block> |
|
|
|
</view> |
|
|
|
<!-- 分类tab --> |
|
|
|
<view class="mi-tags" v-if="false"> |
|
|
|
<view class="mc-item" v-for="i in 7" :key='i'> |
|
|
|
<image class="mi-img"></image> |
|
|
|
<view class="mi-txt">健身训练</view> |
|
|
|
<view class="mi-tags" v-if="isShow('首页菜单入口')&&getGridLsFor('home_menus').length"> |
|
|
|
<view class="mc-item" v-for="(e, i) in getGridLsFor('home_menus')" :key='i'> |
|
|
|
<image class="mi-img" mode="aspectFit" :src="e.icon"></image> |
|
|
|
<view class="mi-txt">{{ e.name || '-' }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="mi-ad-pic" v-if="false"> |
|
|
|
<image class="map-img" mode="aspectFill" :src="tImg"></image> |
|
|
|
<!-- 营销广告图 最多展示1个--> |
|
|
|
<view class="mi-ad-pic" v-if="isShow('广告图')&&getGridLsFor('home_advert').length"> |
|
|
|
<block v-for="(e, i) in getGridLsFor('home_advert')" :key='i'> |
|
|
|
<image |
|
|
|
v-if="i <= 0" |
|
|
|
class="map-img" |
|
|
|
mode="aspectFill" |
|
|
|
:src="e.image || ''" |
|
|
|
@click="linkClick(e)" |
|
|
|
></image> |
|
|
|
</block> |
|
|
|
|
|
|
|
</view> |
|
|
|
<!-- 精选 --> |
|
|
|
<view class="mi-choiceness" v-if="false"> |
|
|
|
<image class="mc-img"></image> |
|
|
|
<image class="mc-img"></image> |
|
|
|
<image class="mc-img"></image> |
|
|
|
<view class="mi-choiceness" v-if="isShow('快捷入口宣传栏')&&getGridLsFor('home_quick').length"> |
|
|
|
<block v-for="(e, i) in getGridLsFor('home_quick')" :key='i'> |
|
|
|
<image |
|
|
|
v-if="i < showdata.home_quick.grid_count" |
|
|
|
class="mc-img" |
|
|
|
:src="e.image || ''" |
|
|
|
@click="linkClick(e)" |
|
|
|
></image> |
|
|
|
</block> |
|
|
|
</view> |
|
|
|
<!-- 分类 --> |
|
|
|
<index-classify-bar></index-classify-bar> |
|
|
|
<view class="mi-classify-list"> |
|
|
|
<view class="mcl-item" v-for="i in 7" :key="i"> |
|
|
|
<goods-item |
|
|
|
:poster="tImg" |
|
|
|
@click:add="goodsItemAddBtn" |
|
|
|
></goods-item> |
|
|
|
|
|
|
|
<block v-if="isShow('商品分类模块')"> |
|
|
|
<index-classify-bar |
|
|
|
:classify-ls="goodsCateClassify" |
|
|
|
v-model="goodsCateIdx" |
|
|
|
></index-classify-bar> |
|
|
|
<view class="mi-classify-list"> |
|
|
|
<view class="mcl-item" v-for="(e, i) in goodsCateList" :key="i"> |
|
|
|
<goods-item |
|
|
|
:poster="(e.product_imgs&&e.product_imgs[0]) || ''" |
|
|
|
:name="e.product_name" |
|
|
|
:price="e.product_price" |
|
|
|
:id="e.id" |
|
|
|
:is-del-price="e.product_spec_multi === 0&&e.product_price_show != 0" |
|
|
|
:del-price="e.product_price_show || 0" |
|
|
|
@click:add="goodsItemAddBtn(e)" |
|
|
|
></goods-item> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<!-- 分类 --> |
|
|
|
<spacification-modal |
|
|
|
ref="spacificationModal" |
|
|
|
></spacification-modal> |
|
|
|
@ -48,6 +76,9 @@ import indexSearchBar from "../components/index_search_bar.vue"; |
|
|
|
import indexClassifyBar from "../components/index_classify_bar.vue"; |
|
|
|
import goodsItem from "../components/goods_item.vue"; |
|
|
|
import spacificationModal from "../components/specification_modal.vue"; |
|
|
|
import { routeTo, debounce, showLoad, hideLoad, showModal, showNone, tsRoute, jsonStr } from "@/utils/util.js"; |
|
|
|
import { MALL_API } from "../js/api"; |
|
|
|
import server from "../js/server"; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
indexSearchBar, |
|
|
|
@ -55,15 +86,117 @@ export default { |
|
|
|
goodsItem, |
|
|
|
spacificationModal |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
banner(){ |
|
|
|
return this.indexData?.banner ?? []; |
|
|
|
}, |
|
|
|
showdata(){ |
|
|
|
return this.indexData?.showdata ?? {}; |
|
|
|
}, |
|
|
|
goodsCate(){ |
|
|
|
return this.indexData?.goodsCate ?? []; |
|
|
|
}, |
|
|
|
goodsCateClassify(){ |
|
|
|
let { goodsCate } = this; |
|
|
|
return goodsCate.map(item=> item?.product_cate_name ?? ''); |
|
|
|
}, |
|
|
|
goodsCateList(){ |
|
|
|
let { goodsCate, goodsCateIdx } = this; |
|
|
|
if(goodsCateIdx < 0)return []; |
|
|
|
return goodsCate?.[goodsCateIdx]?.cate_goods ?? [] |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tImg: 'http://imgcdn.ouxuanzhineng.cn/upload/shopBanner/6b77330084b3732bad96250beeded038.png' |
|
|
|
brand_id: '', |
|
|
|
indexData: {}, |
|
|
|
goodsCateIdx: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
let _bid = options?.brand_id ?? ''; |
|
|
|
this.brand_id = _bid; |
|
|
|
this.getHomeData({ brand_id: _bid }); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
goodsItemAddBtn(){ |
|
|
|
this.$refs.spacificationModal.alert(); |
|
|
|
} |
|
|
|
getGridLsFor(key){ |
|
|
|
let { showdata } = this; |
|
|
|
return showdata?.[key]?.grid_setting ?? []; |
|
|
|
}, |
|
|
|
bannerClick(info){ |
|
|
|
// 20210823 |
|
|
|
// 首先判断 banner_jump=1/0(是/否) 是否跳转 |
|
|
|
// 再判断跳转类型 banner_jump_type=0/1(小程序/外链) |
|
|
|
// 跳转的地址 都用 banner_jump_link |
|
|
|
if(info&&info.banner_jump == 1){ |
|
|
|
if(info.banner_jump_type == 0)return tsRoute(info.banner_jump_link); |
|
|
|
if(info.banner_jump_type == 1)return routeTo(`/pages/web_view/web_view?link=${jsonStr(info.banner_jump_link)}`,'nT'); |
|
|
|
} |
|
|
|
}, |
|
|
|
linkClick(info) { |
|
|
|
// 20210407 取消映射 |
|
|
|
// type 不用 用link_address |
|
|
|
// link_type: 0->小程序内链/1-> 外链 |
|
|
|
// 先判断link_status 是否跳转页面 再判断link_type 是否是外链 |
|
|
|
// link_type 是 0 的话是小程序页面 以前是拿type 映射 现在改成跟外链一样的字段 |
|
|
|
// 简单的说就是不用映射了 直接判断link_type == 0 就是小程序内链 用 link_address |
|
|
|
if(info&&info.link_status == 1){ |
|
|
|
if(info.link_type == 0)return tsRoute(info.link_address); |
|
|
|
if(info.link_type == 1)return routeTo(`/pages/web_view/web_view?link=${jsonStr(info.link_address)}`,'nT'); |
|
|
|
} |
|
|
|
}, |
|
|
|
goodsItemAddBtn(e){ |
|
|
|
let { brand_id } = this; |
|
|
|
// 如果商品是多个规格属性的，则出现弹窗给用户选择规格加入购物车，如果是单规格的则直接加入购物车 |
|
|
|
// 根据product_spec_multi字段做判断 等于1则是多规格 |
|
|
|
if(e.product_spec_multi == 1){ |
|
|
|
this.$refs.spacificationModal.alert({ |
|
|
|
poster: e?.product_imgs?.[0] ?? '', |
|
|
|
name: e?.product_name ?? '', |
|
|
|
price: e?.product_price ?? '', |
|
|
|
specArr: e?.product_spec ?? [], |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.$refs?.spacificationModal?.goodsCartAdd({ brand_id, id: e?.id, }); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
// 是否展示模块 |
|
|
|
isShow(val) { |
|
|
|
let { showdata } = this; |
|
|
|
let _home_mods = showdata?.home_mods || []; |
|
|
|
let _isModsArr = _home_mods.filter(item => item.is_show === 1); |
|
|
|
let _isModsNames = _isModsArr.map(item => item.name); |
|
|
|
return _isModsNames.includes(val); |
|
|
|
}, |
|
|
|
getHomeData({ brand_id }){ |
|
|
|
showLoad(); |
|
|
|
return server.post({ |
|
|
|
url: MALL_API.homeShow, |
|
|
|
data: { brand_id }, |
|
|
|
isDefaultGet: false, |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
hideLoad(); |
|
|
|
let _data = res?.data || {}; |
|
|
|
if(_data.code === 0){ |
|
|
|
console.log('subpackage mall pages index getHomeData res --->', _data); |
|
|
|
return this.indexData = _data?.data ?? {}; |
|
|
|
}else{ |
|
|
|
return Promise.reject(_data); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
hideLoad(); |
|
|
|
showModal({ |
|
|
|
title: '提示', |
|
|
|
content: err.message || '加载失败！' |
|
|
|
}) |
|
|
|
console.warn('subpackage mall pages index getHomeData err --->', err); |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -119,7 +252,6 @@ export default { |
|
|
|
height: 88upx; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
background: skyblue; |
|
|
|
} |
|
|
|
.mi-txt{ |
|
|
|
margin-top: 12upx; |
|
|
|
@ -155,7 +287,6 @@ export default { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 340upx; |
|
|
|
height: 236upx; |
|
|
|
background: skyblue; |
|
|
|
} |
|
|
|
} |
|
|
|
.mi-classify-list{ |
|
|
|
|
