Skip to content

M
mayi-mp-shop
Commit 3290e924 by 程智春
Options

商品分类

parent 370a1389
Showing with 372 additions and 5 deletions
src/App.vue
......@@ -39,8 +39,11 @@ export default {
// 初始
this.getShopInfo(extConfig);
console.log(this,'this.mpApp')
// 页面配置信息
this.getThemePage(extConfig);
},
methods: {
//商城配置
......
src/api/index.js
......@@ -18,6 +18,9 @@ console.log(process.env,'-----------------config------')
},
queryLocation(longitude,latitude){
return requestGET(`${process.env.OLSHOP_URL}/operatingArea/query_Location_operating_area_area_list?location=${longitude},${latitude}`)
}
},
get_product_category(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_category`, data);
},
}
\ No newline at end of file
src/main.js
......@@ -8,6 +8,7 @@ import promoteApi from "./api/promote";
import indexApi from './api/index'
import { DFSImg } from "@/utils/index";
import { $themeToLink } from "@/utils/mayi"
import shop from "./api/shop";
Vue.config.productionTip = false
App.mpType = 'app'
......@@ -52,6 +53,32 @@ mpApp.promoteApi = promoteApi;
mpApp.indexApi = indexApi;
mpApp.DFSImg = DFSImg;
mpApp.getThemePage = getThemePage
function getThemePage({mixid,shopid}) {
shop
.themePagesInfo({
shopid,
shopMixId: mixid,
})
.then((response) => {
if (response.data.code == 200) {
let data = response.data.data;
if (Array.isArray(data) && data.length > 0) {
console.log("90", data);
mpApp.globalData.pageList = data;
// app中异步数据回调 底部栏数据
if (mpApp.pageCallBack) {
mpApp.pageCallBack(data);
}
}
}
})
.catch((err) => {});
}
......
src/pages/home/index.vue
......@@ -54,6 +54,9 @@
<div v-if="item.componentCode == 'pop-up'">
<pop-up :datas="item"></pop-up>
</div>
<div v-if="item.componentCode == 'speedy-nav'">
<speedy-nav :datas="item"></speedy-nav>
</div>
</div>
<bottomCont></bottomCont>
......
src/pages/home/main.json
......@@ -11,7 +11,8 @@
"goods-search":"/static/nativeComponents/GoodsSearch/index",
"notice":"/static/nativeComponents/Notice/index",
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index"
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index"
},
"enablePullDownRefresh":true
}
\ No newline at end of file
static/nativeComponents/AreaNavigation/index.js
......@@ -216,6 +216,7 @@ Component({
positionCity : obj
})
}
app.getThemePage({ mixid: "antgood", shopid: 67 })
return
}
......@@ -243,11 +244,11 @@ Component({
this.setData({
positionCity: obj
})
app.getThemePage({ mixid: "antgood", shopid: 67 })
return
}
}
this.$mp.page.onReady()
}
......
static/nativeComponents/AreaNavigation/index.wxml
......@@ -56,7 +56,7 @@
切换到{{ positionCity.regionName }}
</view>
<view class="continue line-clamp1" bindtap="continueBrowser">
继续浏览{{ datas.componentData.designateAreaObj.regionName }}
继续浏览{{ designateAreaObj.regionName }}
</view>
</view>
......
static/nativeComponents/SpeedyNav/index.js 0 → 100644
// static/nativeComponents/SpeedyNav/index.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
datas:{
type : Object
}
},
/**
* 组件的初始数据
*/
data: {
getTypeStyle: 'across',
categoryList : [],
targetShow: true,
loading: false,
getColumnWidth : '',
getStyle : ''
},
ready(){
this.setData({
getTypeStyle: this.data.datas.componentData.typeStyle
})
let arr = ['50%', "33.3%", "25%", "20%", "16.6%"]
this.setData({
getColumnWidth: arr[this.data.datas.componentData.columnNum - 2]
})
if (this.data.datas.componentData.style == 'circle'){
this.setData({
getStyle : '20%'
})
} else if (this.data.datas.componentData.style == 'rect'){
this.setData({
getStyle: '0'
})
} else if (this.data.datas.componentData.style == 'whole-circle'){
this.setData({
getStyle: '50%'
})
}
app.indexApi.get_product_category({
whetherShowSoldOutGoods: null
}).then(res => {
if (res.data.code == 200 && res.data.data.category[0] && res.data.data.category[0].children){
this.setData({
loading : true
})
res.data.data.category[0].children.forEach(item => {
if (item.categoryBigImg) {
item.categoryBigImg = app.DFSImg(item.categoryBigImg)
}
if (item.categoryBigImg) {
item.categoryImgUrl = app.DFSImg(item.categoryImgUrl)
}
this.setData({
categoryList: res.data.data.category[0].children
})
if (this.data.categoryList.length == 0) {
this.setData({
targetShow : false
})
}
})
}
})
},
/**
* 组件的方法列表
*/
methods: {
onclick(e){
let item = e.currentTarget.dataset.item
app.$themeToLink({
type: 1,
link: `/goods/commodityMenu?categoryName=${item.categoryName}&categoryId=${item.id}`
})
}
}
})
static/nativeComponents/SpeedyNav/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/SpeedyNav/index.wxml 0 → 100644
<!--static/nativeComponents/SpeedyNav/index.wxml-->
<view class="speedy-nav" style="background-color:{{datas.componentData.backgroundColor || ''}}">
<view class="speedy-nav-skeleton skeleton-animate" wx:if="{{getTypeStyle==='across' && !loading}}">
<view wx:for="{{[1,2,3,4]}}" class="speedy-nav-skeleton-item">
<view class="skeleton-blocks"></view>
<view class="skeleton_100 skeleton-title"></view>
</view>
</view>
<view class="goods1 goods1-wibkit" wx:if="{{getTypeStyle == 'across'}}" style="margin-left:{{-datas.componentData.proGap * 2}}rpx;padding-top:{{datas.componentData.paddingList[0]['value'] * 2}}rpx;padding-bottom:{{datas.componentData.paddingList[1]['value'] * 2}}rpx;padding-left:{{datas.componentData.paddingList[2]['value'] * 2}}rpx;padding-right:{{datas.componentData.paddingList[3]['value'] * 2}}rpx">
<view class="prev-btn" wx:if="loading">
<i class="iconfont-common common-iconyoujiantou" style="font-size:30px"></i>
</view>
<view class="next-btn" wx:if="loading">
<i class="iconfont-common common-iconyoujiantou" style="font-size:30px"></i>
</view>
<view class="goods-item" wx:for="{{categoryList}}" style="width:{{getColumnWidth}}" bindtap="onclick" data-item="{{item}}">
<view class="items" style="margin-left:{{datas.componentData.proGap *2}}rpx">
<view class="imgBox slidebox2" style="border-radius:{{getStyle}}">
<image src="{{item.categoryBigImg || item.categoryImgUrl}}"></image>
</view>
<view class="info">
<view class="name line-clamp1" style="color:{{datas.componentData['textColor']}}">{{item.categoryName}}</view>
</view>
</view>
</view>
</view>
<view class="speedy-nav-skeleton skeleton-animate" wx:if="{{getTypeStyle==='list' && !loading}}">
<view wx:for="{{[1,2,3,4,5,6,7,8]}}" class="speedy-nav-skeleton-item">
<view class="skeleton-blocks"></view>
<view class="skeleton_100 skeleton-title"></view>
</view>
</view>
<view class="goods3 goods1-wibkit" wx:if="{{ getTypeStyle==='list' && loading }}" style="display:flex;flex-wrap: wrap;margin-left:{{-datas.componentData.proGap * 2}}rpx;padding-top:{{datas.componentData.paddingList[0]['value'] * 2}}rpx;padding-bottom:{{datas.componentData.paddingList[1]['value'] * 2}}rpx;padding-left:{{datas.componentData.paddingList[2]['value'] * 2}}rpx;padding-right:{{datas.componentData.paddingList[3]['value'] * 2}}rpx">
<view class="goods-item" wx:for="{{categoryList}}" style="width:{{getColumnWidth}}" bindtap="onclick" data-item="{{item}}">
<view class="items" style="margin-left:{{datas.componentData.proGap *2}}rpx">
<view class="imgBox slidebox2" style="border-radius:{{getStyle}}">
<image src="{{item.categoryBigImg || item.categoryImgUrl}}"></image>
</view>
<view class="info">
<view class="name line-clamp1" style="color:{{datas.componentData['textColor']}}">{{item.categoryName}}</view>
</view>
</view>
</view>
</view>
</view>
static/nativeComponents/SpeedyNav/index.wxss 0 → 100644
/* static/nativeComponents/SpeedyNav/index.wxss */
@import "/static/font/common_icon.wxss";
.speedy-nav{
width: 100%;
font-size: 28rpx;
overflow: hidden;
position: relative;
}
.goods1{
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
}
.goods1 .goods-item{
display: inline-block;
vertical-align: top;
white-space: initial;
width: 25%;
}
.goods1 .goods-item:last-child .info{
overflow: hidden;
}
.goods1 .slidebox2{
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
.goods1-wibkit::-webkit-scrollbar {
display: none;
}
.goods{
box-sizing: border-box;
}
.goods1 .imgBox,.goods3 .imgBox{
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 100%;
margin: 0 auto 10rpx;
background-color: rgb(255, 251, 232);
}
.goods1 .imgBox image, .goods3 .imgBox image{
width: 100%;
height: 100%;
position: absolute;
margin: auto;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
}
.goods2 .goods-item{
flex: 1;
padding-bottom: 60rpx;
}
.goods2 .goods-item .items{
position: relative;
}
.goods2 .goods-item .items .info{
position: absolute;
bottom: -80%;
}
.goods2 .imgBox{
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 100%;
background-color: rgb(255, 251, 232);
}
.goods2 .imgBox image{
width: 100%;
height: 100%;
position: absolute;
margin: auto;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
}
.info .name{
text-align: center;
margin: 0 -100%;
color: #666;
height: 2em;
line-height: 1em;
white-space: nowrap;
}
/* 骨架屏样式-start */
.skeleton-content{
padding: 0px 16px;
}
.skeleton-title{
height: 16px;
background-color: #f2f3f5;
margin-top: 16px;
}
.skeleton-blocks{
margin-top: 16px;
width: 100%;
padding-top: 70%;
background-color: #f2f3f5;
}
.skeleton-dice{
margin-top: 16px;
width: 30%;
padding-top: 30%;
background-color: #f2f3f5;
}
.skeleton_50{
width: 50%;
}
.skeleton_100{
width: 100%;
}
/* 快捷导航骨架 */
.speedy-nav-skeleton{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.speedy-nav-skeleton-item{
width: 25%;
padding: 16px 10px;
display: flex;
align-items: center;
flex-direction: column;
}
/* 动画 */
.skeleton-animate{
animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
50% {
opacity: 0.6;
}
}
/* 骨架屏样式-end */
/* 左右箭头 */
.prev-btn,.next-btn{
width: 60rpx;
height: 60rpx;
position: absolute;
top: 50%;
margin-top: -30rpx;
z-index: 99;
opacity: 0.3;
}
.common-iconyoujiantou{
text-shadow: -1rpx 1rpx 14rpx #333;
pointer-events: none;
}
.prev-btn{
left: 10rpx;
transform: rotate(180deg);
}
.next-btn{
right: 10rpx;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment