第一次提交
This commit is contained in:
gxwebsoft
316
package/shops/detail/index.vue
Executable file
316
package/shops/detail/index.vue
Executable file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
<!-- 店招 -->
|
||||
<shop-banner :shop="shop" @onFollow="onFollow" @event="onSearch" />
|
||||
<!-- 一级分类 -->
|
||||
<primary v-if="setting.style == PageCategoryStyleEnum.ONE_LEVEL_BIG.value || setting.style == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value"
|
||||
:display="setting.style" :list="list" />
|
||||
|
||||
<!-- 二级分类 -->
|
||||
<secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" />
|
||||
|
||||
<!-- 分类+商品 -->
|
||||
<commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :equipmentName="searchValue" :list="list" :shopId="shopId" :setting="setting" @addCart="onRefreshPage"/>
|
||||
|
||||
<!-- 底部选项卡 -->
|
||||
<view class="footer-fixed" style="display: none;">
|
||||
<view class="footer-container">
|
||||
<!-- 导航图标 -->
|
||||
<view class="foo-item-fast">
|
||||
<!-- 首页 -->
|
||||
<view class="fast-item fast-item--home" @click="onTargetHome">
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-shouye"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>首页</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客服 (仅微信小程序端显示) -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="btn-normal" open-type="contact">
|
||||
<view class="fast-item">
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-kefu1"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- 购物车 -->
|
||||
<view class="fast-item fast-item--cart" @click="onTargetCart">
|
||||
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
|
||||
</view>
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-gouwuche"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="foo-item-btn">
|
||||
<view class="btn-wrapper">
|
||||
<view class="btn-item btn-item-main" @click="onTargetCart(3)">
|
||||
<text>去结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp'
|
||||
import { setCartTabBadge } from '@/core/app'
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key'
|
||||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
|
||||
import SettingModel from '@/common/model/Setting'
|
||||
import * as CategoryApi from '@/api/category'
|
||||
import * as EquipmentApi from '@/api/equipment'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import * as ShopApi from '@/api/shop.js'
|
||||
import Empty from '@/components/empty'
|
||||
import Search from './components/search'
|
||||
import ShopBanner from './components/shop-banner'
|
||||
import Primary from './components/primary'
|
||||
import Secondary from './components/secondary'
|
||||
import Commodity from './components/commodity'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
// 最后一次刷新时间
|
||||
let lastRefreshTime;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Search,
|
||||
Empty,
|
||||
Primary,
|
||||
Secondary,
|
||||
Commodity,
|
||||
ShopBanner
|
||||
},
|
||||
mixins: [MescrollCompMixin],
|
||||
data() {
|
||||
return {
|
||||
// 店铺信息
|
||||
shop: {},
|
||||
// 店铺ID
|
||||
shopId: null,
|
||||
// 枚举类
|
||||
PageCategoryStyleEnum,
|
||||
// 分类列表
|
||||
list: [],
|
||||
// 分类模板设置
|
||||
setting: {},
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
|
||||
// 购物车总数量
|
||||
cartTotal: 0,
|
||||
// 显示/隐藏SKU弹窗
|
||||
showSkuPopup: false,
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||||
skuMode: 1,
|
||||
// 显示/隐藏分享菜单
|
||||
showShareSheet: false,
|
||||
// 获取商品海报图api方法
|
||||
posterApiCall: EquipmentApi.poster,
|
||||
// 搜索关键词
|
||||
searchValue: '',
|
||||
// 刷新组件
|
||||
isRefresh: true
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad({ shopId }) {
|
||||
// 店铺ID
|
||||
this.shopId = parseInt(shopId),
|
||||
// 加载页面数据
|
||||
this.onRefreshPage()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 每间隔5分钟自动刷新一次页面数据
|
||||
const curTime = new Date().getTime()
|
||||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
|
||||
this.onRefreshPage()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchValue(val){
|
||||
this.searchValue = val
|
||||
this.$navTo('pages/search/index')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 刷新页面
|
||||
onRefreshPage() {
|
||||
// 记录刷新时间
|
||||
lastRefreshTime = new Date().getTime()
|
||||
// 获取页面数据
|
||||
this.getPageData()
|
||||
// 更新购物车角标
|
||||
setCartTabBadge()
|
||||
},
|
||||
|
||||
// 关注
|
||||
onFollow(shopId){
|
||||
ShopApi.setFollow({shopId}).then(res => {
|
||||
this.getPageData()
|
||||
})
|
||||
},
|
||||
|
||||
// 获取页面数据
|
||||
getPageData() {
|
||||
const app = this
|
||||
const equipmentName = storage.get('shopSearchValue')
|
||||
app.isLoading = true
|
||||
Promise.all([
|
||||
// 获取分类模板设置
|
||||
// 优化建议: 可以将此处的false改为true 启用缓存
|
||||
SettingModel.data(true),
|
||||
// 获取分类列表
|
||||
CategoryApi.list({shopId:app.shopId,equipmentName}),
|
||||
// 店铺信息
|
||||
ShopApi.detail(app.shopId)
|
||||
])
|
||||
.then(result => {
|
||||
// 初始化分类模板设置
|
||||
app.initSetting(result[0])
|
||||
// 初始化分类列表数据
|
||||
app.initCategory(result[1])
|
||||
// 更新购物车角标
|
||||
app.getCartTotal()
|
||||
// 初始化店铺信息
|
||||
app.initShop(result[2])
|
||||
// 刷新子组件
|
||||
app.isRefresh = true
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化分类模板设置
|
||||
* @param {Object} result
|
||||
*/
|
||||
initSetting(setting) {
|
||||
this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value]
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化分类列表数据
|
||||
* @param {Object} result
|
||||
*/
|
||||
initCategory(result) {
|
||||
this.list = result.data.list
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化店铺信息
|
||||
* @param {Object} result
|
||||
*/
|
||||
initShop(result){
|
||||
this.shop = result.data.detail
|
||||
},
|
||||
|
||||
// 获取购物车总数量
|
||||
getCartTotal() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
CartApi.total()
|
||||
.then(result => {
|
||||
app.cartTotal = result.data.cartTotal
|
||||
resolve(result)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 更新购物车数量
|
||||
onAddCart(total) {
|
||||
this.cartTotal = total
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示/隐藏SKU弹窗
|
||||
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||||
*/
|
||||
onShowSkuPopup(skuMode = 1) {
|
||||
this.skuMode = skuMode
|
||||
this.showSkuPopup = !this.showSkuPopup
|
||||
},
|
||||
|
||||
// 搜索
|
||||
onSearch(searchValue){
|
||||
this.searchValue = searchValue
|
||||
},
|
||||
|
||||
// 跳转到首页
|
||||
onTargetHome(e) {
|
||||
this.$navTo('pages/index/index')
|
||||
},
|
||||
|
||||
// 跳转到购物车页
|
||||
onTargetCart() {
|
||||
this.$navTo('pages/cart/index')
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置分享内容
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
const app = this
|
||||
return {
|
||||
title: _this.templet.shareTitle,
|
||||
path: '/pages/category/index?' + app.$getShareUrlParams()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||||
*/
|
||||
onShareTimeline() {
|
||||
const app = this
|
||||
return {
|
||||
title: _this.templet.shareTitle,
|
||||
path: '/pages/category/index?' + app.$getShareUrlParams()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
// 搜索框
|
||||
.search {
|
||||
position: fixed;
|
||||
top: var(--window-top);
|
||||
left: var(--window-left);
|
||||
right: var(--window-right);
|
||||
z-index: 9;
|
||||
top: 200rpx;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user