mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-23 13:26:40 +08:00
优化商城首页
This commit is contained in:
wuxw
parent
8682c0589b
commit
bcb504ddf4
@ -15,13 +15,13 @@ const baseUrl = '/';
|
||||
|
||||
// #ifndef H5
|
||||
//服务器域名 小程序 或者 app 时 后端地址
|
||||
const baseUrl = 'http://wuye.himac.cloud/';
|
||||
const baseUrl = 'http://demo.homecommunity.cn/';
|
||||
// #endif
|
||||
|
||||
let commonBaseUrl = 'http://wuye.himac.cloud/';
|
||||
let commonBaseUrl = 'http://demo.homecommunity.cn/';
|
||||
|
||||
//商城的url
|
||||
let mallUrl = 'http://mallapp.himac.cloud/';
|
||||
let mallUrl = 'http://mallapp.homecommunity.cn/';
|
||||
|
||||
//商城小程序ID
|
||||
let mallMinAppId = "xx";
|
||||
|
||||
@ -120,4 +120,57 @@ export function saveWAppId(_wAppId){
|
||||
|
||||
export function saveOpenId(_openId){
|
||||
uni.setStorageSync(CURRENT_OPEN_ID, _openId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取JSON格式的存储数据
|
||||
* @param {String} _key 存储键
|
||||
* @return {Object} JSON解析后的对象，如果不存在则返回null
|
||||
*/
|
||||
export function getJson(_key){
|
||||
debug('StorageUtil','getJson',_key);
|
||||
|
||||
let _value = uni.getStorageSync(_key);
|
||||
|
||||
debug('StorageUtil','getJson',_value);
|
||||
|
||||
if(!_value){
|
||||
return null;
|
||||
}
|
||||
|
||||
// 如果已经是对象，直接返回
|
||||
if(typeof _value === 'object'){
|
||||
return _value;
|
||||
}
|
||||
|
||||
// 如果是字符串，尝试解析JSON
|
||||
if(typeof _value === 'string'){
|
||||
try {
|
||||
return JSON.parse(_value);
|
||||
} catch(e) {
|
||||
console.error('JSON解析失败', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return _value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存JSON格式的数据到存储
|
||||
* @param {String} _key 存储键
|
||||
* @param {Object} _value 要存储的对象
|
||||
*/
|
||||
export function saveJson(_key,_value){
|
||||
debug('StorageUtil','saveJson',_key);
|
||||
|
||||
// 如果已经是字符串，直接存储
|
||||
if(typeof _value === 'string'){
|
||||
uni.setStorageSync(_key, _value);
|
||||
} else {
|
||||
// 否则序列化为JSON字符串
|
||||
uni.setStorageSync(_key, JSON.stringify(_value));
|
||||
}
|
||||
|
||||
debug('StorageUtil','saveJson',JSON.stringify(_value));
|
||||
}
|
||||
187
pages/mall/mall copy.vue
Normal file
187
pages/mall/mall copy.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="cu-bar search bg-white nav-list">
|
||||
<view class="search-form round" @tap="toSearch()">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input :adjust-position="false" type="text" placeholder="请输入商品名" @tap="toSearch()"
|
||||
></input>
|
||||
</view>
|
||||
<view class="text-white" @tap="toSelectArea()">
|
||||
{{selectCommunityName}}<text class="cuIcon-refresharrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 店铺类型 -->
|
||||
<view class="">
|
||||
<scroll-view scroll-x class="nav nav-scroll padding-bottom-xs" scroll-with-animation >
|
||||
<view class="cu-item text-white" :class="item.shopTypeId==shopTypeId?'nav-cur':''"
|
||||
v-for="(item,index) in navList" :key="index" @tap="selectType(index)" :data-id="index">
|
||||
{{item.typeName}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="padding-lr-sm">
|
||||
<!-- 广告 -->
|
||||
<vc-ads></vc-ads>
|
||||
<!-- 商圈菜单-->
|
||||
<vc-category :category-list="categoryList"></vc-category>
|
||||
<seckill-view></seckill-view>
|
||||
<group-view></group-view>
|
||||
<!-- 商圈商品 -->
|
||||
<vc-recommend ref="vcRecommendRef"></vc-recommend>
|
||||
<!-- <vc-shop ref="vcShopRef"></vc-shop> -->
|
||||
</view>
|
||||
<vc-bottom-black></vc-bottom-black>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fixedSearch from '../../components/fixed-search/fixed-search.vue';
|
||||
|
||||
import vcCategory from '@/components/vc-category/vc-category.vue';
|
||||
|
||||
import vcShop from '@/components/vc-shop/vc-shop.vue';
|
||||
|
||||
import vcRecommend from '@/components/vc-recommend/vc-recommend.vue';
|
||||
|
||||
import vcAds from '@/components/vc-ads/vc-ads.vue';
|
||||
|
||||
import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';
|
||||
|
||||
import param from '../../constant/MappingConstant.js';
|
||||
|
||||
import flixedadd from "../../components/flixedadd/flixedadd.vue";
|
||||
|
||||
import groupView from '@/components/index/group-view.vue';
|
||||
import seckillView from '@/components/index/seckill-view.vue';
|
||||
|
||||
import {
|
||||
getMallIndexCategoryList,
|
||||
queryShopType
|
||||
} from '../../api/mall/mallApi.js'
|
||||
import {
|
||||
getMallCommunityId,
|
||||
getMallCommunityName
|
||||
} from '../../api/community/communityApi.js';
|
||||
import {
|
||||
sliceArray
|
||||
} from '../../lib/java110/utils/ArrayUtil.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navList: [],
|
||||
shopTypeId:'0',
|
||||
selectCommunityName: "",
|
||||
categoryList: [],
|
||||
addlistdata: [{
|
||||
title: "我的发布",
|
||||
src: "/static/images/market_my.png"
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
vcCategory,
|
||||
vcRecommend,
|
||||
vcAds,
|
||||
vcShop,
|
||||
vcBottomBlack,
|
||||
groupView,
|
||||
seckillView
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
this.vc.onLoad(options);
|
||||
this._getCategoryList();
|
||||
},
|
||||
onShow: function() {
|
||||
this.selectCommunityName = getMallCommunityName();
|
||||
if(this.$refs.vcShopRef){
|
||||
this.$refs.vcShopRef._loadCommunityShops();
|
||||
}
|
||||
if(this.$refs.vcRecommendRef){
|
||||
this.$refs.vcRecommendRef._loadRecommendProdcut();
|
||||
}
|
||||
this.shopTypeId = 0
|
||||
},
|
||||
onReachBottom() {
|
||||
this.$refs.vcRecommendRef._loadRecommendProdcut();
|
||||
},
|
||||
methods: {
|
||||
selectType(index) {
|
||||
let shopTypeId = this.navList[index].shopTypeId;
|
||||
this.shopTypeId = shopTypeId;
|
||||
if(this.shopTypeId == 0){
|
||||
return;//首页不跳转
|
||||
}
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/market/market?typeId=' + shopTypeId
|
||||
})
|
||||
},
|
||||
_getCategoryList() {
|
||||
let _that = this
|
||||
let params = {
|
||||
page: 1,
|
||||
row: 100,
|
||||
isShow: "Y",
|
||||
shopId: '9999',
|
||||
typeCd: '2002'
|
||||
}
|
||||
getMallIndexCategoryList(params)
|
||||
.then(function(result) {
|
||||
let categoryData = result.data
|
||||
_that.categoryList = sliceArray(categoryData, 8)
|
||||
});
|
||||
params = {
|
||||
page: 1,
|
||||
row: 100
|
||||
}
|
||||
queryShopType(params)
|
||||
.then(function(result) {
|
||||
_that.navList = result.data
|
||||
_that.navList.unshift({
|
||||
"shopTypeId": "0",
|
||||
"typeName": "首页"
|
||||
})
|
||||
})
|
||||
},
|
||||
addlisttap: function(index) {
|
||||
/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
|
||||
this.vc.loginAuth();
|
||||
let _that = this;
|
||||
if (index == 0) {
|
||||
this.vc.navigateTo({
|
||||
url: '/pages/myOrder/myOrder'
|
||||
}, true);
|
||||
return;
|
||||
}
|
||||
},
|
||||
//搜索跳转
|
||||
toSearch:function() {
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/HM-search?searchType=3'
|
||||
})
|
||||
},
|
||||
//切换小区
|
||||
toSelectArea(e) {
|
||||
uni.navigateTo({
|
||||
url:'/pages/mall/selectcommunity'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-list {
|
||||
background-image: linear-gradient(45deg, #FA2E1B, #FA2E1B) !important;
|
||||
}
|
||||
.nav-scroll{
|
||||
background-color: #FA2E1B;
|
||||
}
|
||||
|
||||
.nav-cur{
|
||||
font-weight:bold;
|
||||
border-bottom:1px solid #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
676
pages/mall/mall.css
Normal file
676
pages/mall/mall.css
Normal file
@ -0,0 +1,676 @@
|
||||
/* ========= 全局 & 重置 ========= */
|
||||
.app {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background: #f5f5f5;
|
||||
position: relative;
|
||||
padding-bottom: 104rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ========= 顶部栏 ========= */
|
||||
.header {
|
||||
background: #fa2e1b;
|
||||
padding: 20rpx 24rpx 16rpx;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
background: #fa2e1b;
|
||||
margin-right: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.location-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 8rpx;
|
||||
top: 6rpx;
|
||||
width: 12rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.location-arrow {
|
||||
margin-left: 8rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10rpx solid #ffffff;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-wrap {
|
||||
background: #fa2e1b;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-radius: 36rpx;
|
||||
padding: 4rpx 6rpx 4rpx 20rpx;
|
||||
align-items: center;
|
||||
height: 68rpx;
|
||||
box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fa2e1b;
|
||||
position: relative;
|
||||
margin-right: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 14rpx;
|
||||
height: 4rpx;
|
||||
background: #fa2e1b;
|
||||
right: -8rpx;
|
||||
bottom: -2rpx;
|
||||
transform: rotate(40deg);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 32rpx;
|
||||
border: none;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: #fa2e1b;
|
||||
box-shadow: 0 4rpx 0 rgba(250, 46, 27, 0.65);
|
||||
margin-left: 12rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ========= 顶部分类图标 ========= */
|
||||
.nav-panel {
|
||||
background: #ffffff;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 12rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.nav-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 20%;
|
||||
padding: 16rpx 0 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-image-bg {
|
||||
display: block;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 单个图标颜色（红色主题） */
|
||||
.nav-icon.takeout {
|
||||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.group {
|
||||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.hotel {
|
||||
background: linear-gradient(135deg, #7dd5ff, #36a7ff);
|
||||
}
|
||||
|
||||
.nav-icon.flash {
|
||||
background: linear-gradient(135deg, #ff4757, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.movie {
|
||||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.beauty {
|
||||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.fun {
|
||||
background: linear-gradient(135deg, #ff7ae0, #ff49b4);
|
||||
}
|
||||
|
||||
.nav-icon.sports {
|
||||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.hair {
|
||||
background: linear-gradient(135deg, #ff9ec5, #ff657a);
|
||||
}
|
||||
|
||||
.nav-icon.show {
|
||||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.station {
|
||||
background: linear-gradient(135deg, #66b6ff, #3388ff);
|
||||
}
|
||||
|
||||
.nav-icon.life {
|
||||
background: linear-gradient(135deg, #35d6ff, #1d9dff);
|
||||
}
|
||||
|
||||
.nav-icon.medical {
|
||||
background: linear-gradient(135deg, #5ec8ff, #297fff);
|
||||
}
|
||||
|
||||
.nav-icon.cosmetic {
|
||||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||||
}
|
||||
|
||||
.nav-icon.run {
|
||||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||||
}
|
||||
|
||||
/* ========= 秒杀横滑区域 ========= */
|
||||
.section {
|
||||
margin-top: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 20rpx 20rpx 12rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title-main {
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.section-title-highlight {
|
||||
color: #ff5339;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.section-more::after {
|
||||
content: "›";
|
||||
margin-left: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.flash-list {
|
||||
padding: 0 16rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flash-item {
|
||||
display: inline-block;
|
||||
width: 240rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
margin-right: 16rpx;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
font-size: 22rpx;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.flash-tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(250, 46, 27, 0.9);
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 8rpx 4rpx 12rpx;
|
||||
border-bottom-right-radius: 16rpx;
|
||||
font-weight: 600;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flash-img {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flash-img image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.flash-info {
|
||||
padding: 8rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.flash-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.flash-price-symbol {
|
||||
font-size: 20rpx;
|
||||
color: #ff5339;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.flash-price {
|
||||
font-size: 32rpx;
|
||||
color: #ff5339;
|
||||
font-weight: 700;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.flash-old-price {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.flash-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 60rpx;
|
||||
background: #ff007d;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 24rpx 0 0 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.flash-desc {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
height: 48rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ========= 列表卡片 ========= */
|
||||
.card-section {
|
||||
margin-top: 16rpx;
|
||||
background: #ffffff;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
.card-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx 12rpx;
|
||||
}
|
||||
|
||||
.card-section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.card-section-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #fa2e1b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 0 20rpx 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-small {
|
||||
display: inline-block;
|
||||
width: 360rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
margin-right: 20rpx;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.card-small-img {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-small-img image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.card-small-body {
|
||||
padding: 12rpx 12rpx 16rpx;
|
||||
}
|
||||
|
||||
.card-small-title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.card-small-sub {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.card-small-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.price-main {
|
||||
color: #ff5339;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
color: #ff5339;
|
||||
font-size: 22rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-old {
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.price-desc {
|
||||
margin-left: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tag-orange {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #fa2e1b;
|
||||
border-radius: 6rpx;
|
||||
border: 2rpx solid #fa2e1b;
|
||||
padding: 0 6rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
/* ========= 商品瀑布流列表 ========= */
|
||||
.feed-section {
|
||||
margin-top: 16rpx;
|
||||
background: transparent;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
/* 标签栏 */
|
||||
.goods-cell-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.goods-item-title {
|
||||
flex: 0 0 25%;
|
||||
min-width: 25%;
|
||||
padding: 20rpx 12rpx;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-item-title .h4 {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.goods-item-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.goods-item-title.selected-title .goods-item-subtitle {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.feed-section-header {
|
||||
padding: 0 20rpx 12rpx;
|
||||
}
|
||||
|
||||
.feed-section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.feed {
|
||||
margin-top: 0;
|
||||
padding: 0 16rpx 5rpx;
|
||||
}
|
||||
|
||||
.feed-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.feed-card {
|
||||
width: calc(50% - 8rpx);
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feed-img {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feed-img image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.feed-body {
|
||||
padding: 12rpx 12rpx 14rpx;
|
||||
}
|
||||
|
||||
.feed-tag-top {
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 12rpx;
|
||||
padding: 0 8rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 6rpx;
|
||||
background: rgba(250, 46, 27, 0.95);
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feed-title {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 1.3;
|
||||
height: 66rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.feed-sub {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.feed-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.feed-price-row .price-symbol {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.feed-meta-row {
|
||||
margin-top: 4rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feed-meta-dot {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
|
||||
.feed-shop {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.feed-type-tag {
|
||||
border-radius: 6rpx;
|
||||
border: 2rpx solid #fa2e1b;
|
||||
color: #fa2e1b;
|
||||
padding: 0 4rpx;
|
||||
font-size: 20rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
@ -1,187 +1,587 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="cu-bar search bg-white nav-list">
|
||||
<view class="search-form round" @tap="toSearch()">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input :adjust-position="false" type="text" placeholder="请输入商品名" @tap="toSearch()"
|
||||
></input>
|
||||
<view class="app">
|
||||
<!-- 顶部 -->
|
||||
<view class="header">
|
||||
<view class="header-top">
|
||||
<view class="location" @tap="toSelectArea()">
|
||||
<view class="location-icon"></view>
|
||||
<text>{{selectCommunityName }}</text>
|
||||
<view class="location-arrow"></view>
|
||||
</view>
|
||||
<view class="header-actions">
|
||||
<!-- 预留位置，可添加订单、消息等图标 -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-white" @tap="toSelectArea()">
|
||||
{{selectCommunityName}}<text class="cuIcon-refresharrow"></text>
|
||||
<view class="search-wrap">
|
||||
<view class="search-bar" @tap="toSearch()">
|
||||
<view class="search-icon"></view>
|
||||
<input class="search-input" placeholder="搜索商品" disabled="true" />
|
||||
<button class="search-btn" @tap="toSearch()">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 店铺类型 -->
|
||||
<view class="">
|
||||
<scroll-view scroll-x class="nav nav-scroll padding-bottom-xs" scroll-with-animation >
|
||||
<view class="cu-item text-white" :class="item.shopTypeId==shopTypeId?'nav-cur':''"
|
||||
v-for="(item,index) in navList" :key="index" @tap="selectType(index)" :data-id="index">
|
||||
{{item.typeName}}
|
||||
|
||||
<!-- 顶部分类图标 -->
|
||||
<view class="nav-panel">
|
||||
<view class="nav-grid">
|
||||
<view v-for="(item, index) in categoryList" :key="index" class="nav-item" @tap="_urlJump(item)">
|
||||
<view v-if="!item.hktIcon || item.hktIcon === ''"
|
||||
class="nav-icon category-image-bg"
|
||||
:style="{background: getCategoryBgColor(index)}">
|
||||
</view>
|
||||
<image v-else :src="item.hktIcon" class="nav-icon" @error="_loadDefaultImg(item)"></image>
|
||||
<view class="nav-title">{{item.hktName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 一起拼团 1分抢 -->
|
||||
<view class="section" v-if="groupGoodsList && groupGoodsList.length > 0">
|
||||
<view class="section-header">
|
||||
<text class="section-title-main">一起拼团</text>
|
||||
<text class="section-title-highlight">1分抢</text>
|
||||
<text class="section-sub">平台补贴 到店立减</text>
|
||||
<text class="section-more" @tap="toGroupGoodsList">更多</text>
|
||||
</view>
|
||||
<scroll-view class="flash-list" scroll-x="true" show-scrollbar="false" enable-flex="true">
|
||||
<view v-for="(item, index) in groupGoodsList" :key="index" class="flash-item" @tap="toGroupGoods(item)">
|
||||
<view class="flash-tag" v-if="item.userCount">{{item.userCount}}人团</view>
|
||||
<view class="flash-img">
|
||||
<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultGroupImg(item)"></image>
|
||||
</view>
|
||||
<view class="flash-btn">抢</view>
|
||||
<view class="flash-info">
|
||||
<view class="flash-price-row">
|
||||
<text class="flash-price-symbol">￥</text>
|
||||
<text class="flash-price">{{item.groupPrice || 0}}</text>
|
||||
<text class="flash-old-price" v-if="item.price">￥{{item.price}}</text>
|
||||
</view>
|
||||
<view class="flash-desc">{{item.prodName || item.prodDesc || '拼团商品'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="padding-lr-sm">
|
||||
<!-- 广告 -->
|
||||
<vc-ads></vc-ads>
|
||||
<!-- 商圈菜单-->
|
||||
<vc-category :category-list="categoryList"></vc-category>
|
||||
<seckill-view></seckill-view>
|
||||
<group-view></group-view>
|
||||
<!-- 商圈商品 -->
|
||||
<vc-recommend ref="vcRecommendRef"></vc-recommend>
|
||||
<!-- <vc-shop ref="vcShopRef"></vc-shop> -->
|
||||
|
||||
<!-- 特价秒杀横滑 -->
|
||||
<view class="card-section" v-if="seckillGoodsList && seckillGoodsList.length > 0">
|
||||
<view class="card-section-header">
|
||||
<view class="card-section-title">特价秒杀</view>
|
||||
<view class="card-section-tag">{{curSecHours.name}}专场</view>
|
||||
</view>
|
||||
<scroll-view class="card-list" scroll-x="true" show-scrollbar="false" enable-flex="true">
|
||||
<view v-for="(item, index) in seckillGoodsList" :key="index" class="card-small" @tap="toSeckillGoods(item)">
|
||||
<view class="card-small-img">
|
||||
<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultSeckillImg(item)"></image>
|
||||
</view>
|
||||
<view class="card-small-body">
|
||||
<view class="card-small-title">{{item.prodName || '秒杀商品'}}</view>
|
||||
<view class="card-small-sub">
|
||||
<text class="price-symbol">￥</text><text class="price-main">{{item.killPrice || 0}}</text>
|
||||
<text class="price-old" v-if="item.price">￥{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 商品 Feed 列表 -->
|
||||
<view class="feed-section" v-if="productList && productList.length > 0">
|
||||
<!-- 标签栏 -->
|
||||
<view class="goods-cell-title">
|
||||
<view
|
||||
v-for="(category, catIndex) in productList"
|
||||
:key="catIndex"
|
||||
class="goods-item-title"
|
||||
:class="{ 'selected-title': selectedCategoryIndex === catIndex }"
|
||||
@tap="selectCategory(catIndex)">
|
||||
<h4 class="h4">{{category.categoryName || '推荐商品'}}</h4>
|
||||
<view class="goods-item-subtitle">{{category.categoryDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="feed" v-if="currentCategoryProducts && currentCategoryProducts.length > 0">
|
||||
<view class="feed-row" v-for="(row, rowIndex) in getProductRows(currentCategoryProducts)" :key="rowIndex">
|
||||
<view v-for="(item, itemIndex) in row" :key="itemIndex" class="feed-card" @tap="toGoodsDetail(item)">
|
||||
<view class="feed-img">
|
||||
<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultProductImg(item)"></image>
|
||||
</view>
|
||||
<view class="feed-body">
|
||||
<view class="feed-title">{{item.prodName || '商品名称'}}</view>
|
||||
<view class="feed-sub" v-if="item.deliveryTime || item.shopName">{{item.deliveryTime || item.shopName}}</view>
|
||||
<view class="feed-price-row">
|
||||
<text class="price-symbol">￥</text><text class="price-main">{{item.price || 0}}</text>
|
||||
<text class="price-old" v-if="item.originalPrice && item.originalPrice > item.price">￥{{item.originalPrice}}</text>
|
||||
<text class="price-desc" v-if="item.sales">月销 {{item.sales}}</text>
|
||||
</view>
|
||||
<view class="feed-meta-row" v-if="item.shopName || item.rating">
|
||||
<text class="feed-shop" v-if="item.shopName">{{item.shopName}}</text>
|
||||
<view class="feed-meta-dot" v-if="item.shopName && item.rating"></view>
|
||||
<text v-if="item.rating">好评 {{item.rating}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<vc-bottom-black></vc-bottom-black>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fixedSearch from '../../components/fixed-search/fixed-search.vue';
|
||||
|
||||
import vcCategory from '@/components/vc-category/vc-category.vue';
|
||||
|
||||
import vcShop from '@/components/vc-shop/vc-shop.vue';
|
||||
|
||||
import vcRecommend from '@/components/vc-recommend/vc-recommend.vue';
|
||||
|
||||
import vcAds from '@/components/vc-ads/vc-ads.vue';
|
||||
|
||||
import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';
|
||||
|
||||
import param from '../../constant/MappingConstant.js';
|
||||
|
||||
import flixedadd from "../../components/flixedadd/flixedadd.vue";
|
||||
|
||||
import groupView from '@/components/index/group-view.vue';
|
||||
import seckillView from '@/components/index/seckill-view.vue';
|
||||
|
||||
import {
|
||||
getMallIndexCategoryList,
|
||||
queryShopType
|
||||
getMallIndexCategoryList
|
||||
} from '../../api/mall/mallApi.js'
|
||||
import {
|
||||
sliceArray
|
||||
} from '../../lib/java110/utils/ArrayUtil.js';
|
||||
import param from '../../constant/param.js';
|
||||
import {
|
||||
queryGroupGoods,
|
||||
queryProductSeckill,
|
||||
queryMainCategory,
|
||||
queryPhoneMainCategoryProduct
|
||||
} from '../../api/goods/goodsApi.js';
|
||||
import conf from '../../conf/config.js';
|
||||
import {
|
||||
getCommunityId,
|
||||
getCurCommunity,
|
||||
getMallCommunityId,
|
||||
getMallCommunityName
|
||||
} from '../../api/community/communityApi.js';
|
||||
import {
|
||||
sliceArray
|
||||
} from '../../lib/java110/utils/ArrayUtil.js'
|
||||
getJson,
|
||||
saveJson
|
||||
} from '../../lib/java110/utils/StorageUtil.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navList: [],
|
||||
shopTypeId:'0',
|
||||
selectCommunityName: "",
|
||||
selectCommunityName: "雪峰商贸城",
|
||||
selectCommunityId: '',
|
||||
COMMUNITY_STORAGE_KEY: 'HC_MALL_SELECTED_COMMUNITY', // 小区缓存键
|
||||
categoryList: [],
|
||||
addlistdata: [{
|
||||
title: "我的发布",
|
||||
src: "/static/images/market_my.png"
|
||||
}]
|
||||
groupGoodsList: [],
|
||||
seckillGoodsList: [],
|
||||
productList: [],
|
||||
selectedCategoryIndex: 0,
|
||||
shopId: param.SHOP_ID_GLOBAL,
|
||||
noPic: conf.commonBaseUrl + 'h5/static/noPic.png',
|
||||
curSecHours: {},
|
||||
secHours: [{
|
||||
name: '08:00',
|
||||
hours: 8,
|
||||
}, {
|
||||
name: '10:00',
|
||||
hours: 10,
|
||||
}, {
|
||||
name: '12:00',
|
||||
hours: 12,
|
||||
}, {
|
||||
name: '14:00',
|
||||
hours: 14,
|
||||
}, {
|
||||
name: '15:00',
|
||||
hours: 15,
|
||||
}, {
|
||||
name: '16:00',
|
||||
hours: 16,
|
||||
}, {
|
||||
name: '20:00',
|
||||
hours: 20,
|
||||
}, {
|
||||
name: '22:00',
|
||||
hours: 22,
|
||||
}],
|
||||
// 预设的背景颜色数组，用于没有图片时显示
|
||||
categoryBgColors: [
|
||||
'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff5252, #fa2e1b)',
|
||||
'linear-gradient(135deg, #7dd5ff, #36a7ff)',
|
||||
'linear-gradient(135deg, #ff4757, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff5252, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff7ae0, #ff49b4)',
|
||||
'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff9ec5, #ff657a)',
|
||||
'linear-gradient(135deg, #ff5252, #fa2e1b)',
|
||||
'linear-gradient(135deg, #66b6ff, #3388ff)',
|
||||
'linear-gradient(135deg, #35d6ff, #1d9dff)',
|
||||
'linear-gradient(135deg, #5ec8ff, #297fff)',
|
||||
'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
|
||||
'linear-gradient(135deg, #ff5252, #fa2e1b)'
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
vcCategory,
|
||||
vcRecommend,
|
||||
vcAds,
|
||||
vcShop,
|
||||
vcBottomBlack,
|
||||
groupView,
|
||||
seckillView
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
this.vc.onLoad(options);
|
||||
// #ifdef MP
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#fa2e1b',
|
||||
})
|
||||
// #endif
|
||||
this._loadCommunityInfo();
|
||||
this._getCategoryList();
|
||||
this._getGroupGoodsList();
|
||||
this.computeCurHours();
|
||||
this._getSeckillGoodsList();
|
||||
this._getRecommendProduct();
|
||||
},
|
||||
onShow: function() {
|
||||
this.selectCommunityName = getMallCommunityName();
|
||||
if(this.$refs.vcShopRef){
|
||||
this.$refs.vcShopRef._loadCommunityShops();
|
||||
}
|
||||
if(this.$refs.vcRecommendRef){
|
||||
this.$refs.vcRecommendRef._loadRecommendProdcut();
|
||||
}
|
||||
this.shopTypeId = 0
|
||||
},
|
||||
onReachBottom() {
|
||||
this.$refs.vcRecommendRef._loadRecommendProdcut();
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时检查小区是否变化
|
||||
// 使用 getMallCommunityName 快速获取小区名称
|
||||
this.selectCommunityName = getMallCommunityName() || "雪峰商贸城";
|
||||
this._loadCommunityInfo();
|
||||
},
|
||||
methods: {
|
||||
selectType(index) {
|
||||
let shopTypeId = this.navList[index].shopTypeId;
|
||||
this.shopTypeId = shopTypeId;
|
||||
if(this.shopTypeId == 0){
|
||||
return;//首页不跳转
|
||||
// 加载小区信息（从缓存读取）
|
||||
_loadCommunityInfo() {
|
||||
let _that = this;
|
||||
// 优先从 _selectCommunity 读取（选择小区页面存储的）
|
||||
let community = uni.getStorageSync("_selectCommunity");
|
||||
if (community && community.communityId) {
|
||||
this.selectCommunityId = community.communityId;
|
||||
this.selectCommunityName = community.name || "雪峰商贸城";
|
||||
// 保存到自定义缓存键
|
||||
saveJson(this.COMMUNITY_STORAGE_KEY, {
|
||||
communityId: community.communityId,
|
||||
communityName: community.name
|
||||
});
|
||||
// 重新加载数据
|
||||
this._getGroupGoodsList();
|
||||
this._getSeckillGoodsList();
|
||||
this._getRecommendProduct();
|
||||
return;
|
||||
}
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/market/market?typeId=' + shopTypeId
|
||||
})
|
||||
|
||||
// 使用 getCurCommunity 获取当前小区信息
|
||||
getCurCommunity().then(function(communityInfo) {
|
||||
if (communityInfo && communityInfo.communityId) {
|
||||
_that.selectCommunityId = communityInfo.communityId;
|
||||
_that.selectCommunityName = communityInfo.communityName || "雪峰商贸城";
|
||||
// 保存到自定义缓存键
|
||||
saveJson(_that.COMMUNITY_STORAGE_KEY, {
|
||||
communityId: communityInfo.communityId,
|
||||
communityName: communityInfo.communityName
|
||||
});
|
||||
}
|
||||
}).catch(function(err) {
|
||||
console.error('获取小区信息失败', err);
|
||||
// 如果获取失败，尝试使用 getMallCommunityName
|
||||
_that.selectCommunityName = getMallCommunityName() || "雪峰商贸城";
|
||||
_that.selectCommunityId = getMallCommunityId() || '';
|
||||
});
|
||||
},
|
||||
// 获取当前小区ID（用于查询）
|
||||
_getCurrentCommunityId() {
|
||||
if (this.selectCommunityId && this.selectCommunityId !== '9999') {
|
||||
return this.selectCommunityId;
|
||||
}
|
||||
// 兼容旧逻辑
|
||||
let communityId = getCommunityId();
|
||||
if (communityId == '9999') {
|
||||
return '';
|
||||
}
|
||||
return communityId || '';
|
||||
},
|
||||
_getCategoryList() {
|
||||
let _that = this
|
||||
let _that = this;
|
||||
let params = {
|
||||
page: 1,
|
||||
row: 100,
|
||||
isShow: "Y",
|
||||
shopId: '9999',
|
||||
typeCd: '2002'
|
||||
shopId: param.SHOP_ID_GLOBAL,
|
||||
typeCd: param.MENU_TYPE.SHOP
|
||||
}
|
||||
getMallIndexCategoryList(params)
|
||||
.then(function(result) {
|
||||
let categoryData = result.data
|
||||
_that.categoryList = sliceArray(categoryData, 8)
|
||||
});
|
||||
params = {
|
||||
page: 1,
|
||||
row: 100
|
||||
}
|
||||
queryShopType(params)
|
||||
.then(function(result) {
|
||||
_that.navList = result.data
|
||||
_that.navList.unshift({
|
||||
"shopTypeId": "0",
|
||||
"typeName": "首页"
|
||||
})
|
||||
let categoryData = result.data || [];
|
||||
// 将数据扁平化，不再分组
|
||||
_that.categoryList = categoryData;
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error('获取菜单列表失败', err);
|
||||
});
|
||||
},
|
||||
addlisttap: function(index) {
|
||||
/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
|
||||
this.vc.loginAuth();
|
||||
let _that = this;
|
||||
if (index == 0) {
|
||||
_urlJump: function(_menu) {
|
||||
if (!_menu) return;
|
||||
|
||||
if (_menu.skipType == 2) {
|
||||
// 站外
|
||||
let url = encodeURIComponent(_menu.url);
|
||||
this.vc.navigateTo({
|
||||
url: '/pages/myOrder/myOrder'
|
||||
}, true);
|
||||
url: '/pages/hcWebView/hcWebView?url=' + url
|
||||
});
|
||||
} else if (_menu.skipType == 1 ) {
|
||||
// 站内
|
||||
this.vc.navigateToMall({
|
||||
url: _menu.url
|
||||
});
|
||||
} else if (_menu.skipType == '3') {
|
||||
// 商城商品列表
|
||||
let _url = "/pages/goods/goodsList?hktId=" + _menu.hktId;
|
||||
this.vc.navigateToMall({
|
||||
url: _url
|
||||
});
|
||||
} else if (_menu.skipType == 'S') {
|
||||
// 商城页面
|
||||
this.vc.navigateToMall({
|
||||
url: _menu.url
|
||||
});
|
||||
}else if (_menu.skipType == '5') {
|
||||
|
||||
this.vc.navigateToMall({
|
||||
url: _menu.url
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
_loadDefaultImg: function(item) {
|
||||
// 图片加载失败时，清空图片路径，让组件显示背景颜色
|
||||
if (item) {
|
||||
item.hktIcon = "";
|
||||
}
|
||||
},
|
||||
// 根据索引获取背景颜色
|
||||
getCategoryBgColor: function(index) {
|
||||
return this.categoryBgColors[index % this.categoryBgColors.length];
|
||||
},
|
||||
//搜索跳转
|
||||
toSearch:function() {
|
||||
toSearch(e) {
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/HM-search?searchType=3'
|
||||
})
|
||||
});
|
||||
},
|
||||
//切换小区
|
||||
toSelectArea(e) {
|
||||
uni.navigateTo({
|
||||
url:'/pages/mall/selectcommunity'
|
||||
this.vc.navigateTo({
|
||||
url: `/pages/mall/selectcommunity`
|
||||
}, true);
|
||||
},
|
||||
// 获取拼团商品列表
|
||||
_getGroupGoodsList() {
|
||||
let _that = this;
|
||||
let communityId = this._getCurrentCommunityId();
|
||||
queryGroupGoods({
|
||||
page: 1,
|
||||
row: 10,
|
||||
shopId: '',
|
||||
communityId: communityId
|
||||
}).then(function(data) {
|
||||
_that.groupGoodsList = data || [];
|
||||
}).catch(function(err) {
|
||||
console.error('获取拼团商品失败', err);
|
||||
_that.groupGoodsList = [];
|
||||
});
|
||||
},
|
||||
// 跳转到拼团商品详情
|
||||
toGroupGoods(item) {
|
||||
if (!item) return;
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/groupGoods?productId=' + item.productId +
|
||||
"&groupId=" + (item.groupId || '') +
|
||||
"&shopId=" + (item.shopId || this.shopId)
|
||||
});
|
||||
},
|
||||
// 跳转到拼团商品列表
|
||||
toGroupGoodsList() {
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/groupGoodsList?shopId='
|
||||
});
|
||||
},
|
||||
// 拼团商品图片加载失败
|
||||
_loadDefaultGroupImg(item) {
|
||||
if (item) {
|
||||
item.coverPhoto = this.noPic;
|
||||
}
|
||||
},
|
||||
// 计算当前秒杀时段
|
||||
computeCurHours() {
|
||||
let _date = new Date();
|
||||
let _curHours = _date.getHours();
|
||||
this.curSecHours = this.secHours[0];
|
||||
let _break = false;
|
||||
this.secHours.forEach(_hours => {
|
||||
if (_break) {
|
||||
return;
|
||||
}
|
||||
if (_hours.hours >= _curHours) {
|
||||
this.curSecHours = _hours;
|
||||
_break = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取秒杀商品列表
|
||||
_getSeckillGoodsList() {
|
||||
let _that = this;
|
||||
if (!this.curSecHours || !this.curSecHours.hours) {
|
||||
return;
|
||||
}
|
||||
let communityId = this._getCurrentCommunityId();
|
||||
queryProductSeckill({
|
||||
page: 1,
|
||||
row: 10,
|
||||
killHours: this.curSecHours.hours,
|
||||
shopId: '',
|
||||
communityId: communityId,
|
||||
validData: 'Y'
|
||||
}).then(function(data) {
|
||||
_that.seckillGoodsList = data || [];
|
||||
}).catch(function(err) {
|
||||
console.error('获取秒杀商品失败', err);
|
||||
_that.seckillGoodsList = [];
|
||||
});
|
||||
},
|
||||
// 跳转到秒杀商品详情
|
||||
toSeckillGoods(item) {
|
||||
if (!item) return;
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/seckillGoods?productId=' + item.productId +
|
||||
"&shopId=" + (item.shopId || this.shopId) +
|
||||
"&killId=" + (item.killId || '')
|
||||
});
|
||||
},
|
||||
// 秒杀商品图片加载失败
|
||||
_loadDefaultSeckillImg(item) {
|
||||
if (item) {
|
||||
item.coverPhoto = this.noPic;
|
||||
}
|
||||
},
|
||||
// 获取推荐商品列表（只获取分类列表，不查询商品）
|
||||
_getRecommendProduct() {
|
||||
let _that = this;
|
||||
let communityId = this._getCurrentCommunityId();
|
||||
|
||||
// 只获取专区目录列表
|
||||
let categoryParams = {
|
||||
page: 1,
|
||||
row: 100,
|
||||
communityId: communityId,
|
||||
categoryType: ''
|
||||
};
|
||||
|
||||
queryMainCategory(categoryParams)
|
||||
.then(function(categories) {
|
||||
if (!categories || categories.length === 0) {
|
||||
_that.productList = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 只初始化分类列表，不查询商品
|
||||
_that.productList = categories.map(function(category) {
|
||||
return {
|
||||
categoryId: category.mainCategoryId || category.categoryId || category.id,
|
||||
categoryName: category.categoryName || category.name,
|
||||
categoryDesc: category.categoryDesc || category.desc || '',
|
||||
mainCategoryProducts: [] // 初始为空，点击后再加载
|
||||
};
|
||||
});
|
||||
|
||||
// 默认选中第一个分类并加载其商品
|
||||
if (_that.productList.length > 0) {
|
||||
_that.selectedCategoryIndex = 0;
|
||||
_that._loadCategoryProducts(0);
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error('获取专区目录失败', err);
|
||||
_that.productList = [];
|
||||
});
|
||||
},
|
||||
// 加载指定分类的商品（每次点击都重新请求）
|
||||
_loadCategoryProducts(categoryIndex) {
|
||||
let _that = this;
|
||||
let category = this.productList[categoryIndex];
|
||||
if (!category) {
|
||||
// 如果分类不存在，直接返回
|
||||
return;
|
||||
}
|
||||
|
||||
let communityId = this._getCurrentCommunityId();
|
||||
|
||||
let mainCategoryId = category.categoryId;
|
||||
|
||||
// 每次点击都重新请求后端
|
||||
queryPhoneMainCategoryProduct({
|
||||
page: 1,
|
||||
row: 20,
|
||||
communityId: communityId,
|
||||
mainCategoryId: mainCategoryId
|
||||
}).then(function(result) {
|
||||
let products = [];
|
||||
|
||||
// 处理返回的数据格式
|
||||
if (Array.isArray(result)) {
|
||||
products = result;
|
||||
} else if (result && result.data) {
|
||||
if (Array.isArray(result.data)) {
|
||||
products = result.data;
|
||||
} else {
|
||||
products = result.data.mainCategoryProducts || result.data.products || [];
|
||||
}
|
||||
} else if (result && result.mainCategoryProducts) {
|
||||
products = result.mainCategoryProducts || [];
|
||||
}
|
||||
|
||||
// 更新分类的商品列表
|
||||
_that.$set(category, 'mainCategoryProducts', products);
|
||||
}).catch(function(err) {
|
||||
console.error('获取专区商品失败', err);
|
||||
_that.$set(category, 'mainCategoryProducts', []);
|
||||
});
|
||||
},
|
||||
// 跳转到商品详情
|
||||
toGoodsDetail(item) {
|
||||
if (!item) return;
|
||||
this.vc.navigateToMall({
|
||||
url: '/pages/goods/goods?productId=' + item.productId +
|
||||
"&shopId=" + (item.shopId || this.shopId)
|
||||
});
|
||||
},
|
||||
// 商品图片加载失败
|
||||
_loadDefaultProductImg(item) {
|
||||
if (item) {
|
||||
item.coverPhoto = this.noPic;
|
||||
}
|
||||
},
|
||||
// 将商品列表按每行2个分组
|
||||
getProductRows(products) {
|
||||
if (!products || products.length === 0) {
|
||||
return [];
|
||||
}
|
||||
let rows = [];
|
||||
for (let i = 0; i < products.length; i += 2) {
|
||||
rows.push(products.slice(i, i + 2));
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
// 选择分类标签
|
||||
selectCategory(index) {
|
||||
this.selectedCategoryIndex = index;
|
||||
// 如果该分类的商品还未加载，则加载
|
||||
this._loadCategoryProducts(index);
|
||||
},
|
||||
// 获取默认副标题
|
||||
getDefaultSubtitle(index) {
|
||||
const defaultSubtitles = ['精品推荐', '便宜好货', '国际自营', '冬季热卖', '限时特惠', '新品上市', '热销榜单', '精选好物'];
|
||||
return defaultSubtitles[index % defaultSubtitles.length] || '推荐商品';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前选中分类的商品列表
|
||||
currentCategoryProducts() {
|
||||
if (!this.productList || this.productList.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const selectedCategory = this.productList[this.selectedCategoryIndex];
|
||||
if (!selectedCategory) {
|
||||
return [];
|
||||
}
|
||||
return selectedCategory.mainCategoryProducts || [];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-list {
|
||||
background-image: linear-gradient(45deg, #FA2E1B, #FA2E1B) !important;
|
||||
}
|
||||
.nav-scroll{
|
||||
background-color: #FA2E1B;
|
||||
}
|
||||
|
||||
.nav-cur{
|
||||
font-weight:bold;
|
||||
border-bottom:1px solid #FFFFFF;
|
||||
}
|
||||
<style lang="css">
|
||||
@import "./mall.css";
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user