Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成对接分类&品牌页面接口

master
邓平艺 5 years ago
parent
60aa312bdb
commit
6058d73674
2 changed files with 551 additions and 465 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      pages/index/category/category.vue
  2. 16
      pages/index/index/index.vue

168
pages/index/category/category.vue
View File

@ -10,7 +10,7 @@
</view> </view>
</view> </view>
<!-- 分类 --> <!-- 分类 -->
<view class="page" v-if="current == 0">
<view class="page" v-if="current == 0 && dataArr.length">
<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }"> <scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }">
<block v-for="(item, index) in dataArr" :key="index"> <block v-for="(item, index) in dataArr" :key="index">
<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view> <view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view>
@ -23,9 +23,9 @@
<view :ref="'left_' + index" class="right_item " :id="'left_' + index"> <view :ref="'left_' + index" class="right_item " :id="'left_' + index">
<text class="right_item_title ">{{ item.name }}</text> <text class="right_item_title ">{{ item.name }}</text>
<view class="right_item_view"> <view class="right_item_view">
<view class="item" v-for="(item, index) in item.subArr" :key="index" @click="rightTap(item)">
<image :src="item.img" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image>
<text class="lf-font-24">{{ item.name }}</text>
<view class="item" v-for="(c_item, c_index) in item.sub_category" :key="c_index" @click="rightTap(c_item)">
<image :src="c_item.image" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image>
<text class="lf-font-24">{{ c_item.name }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -36,37 +36,52 @@
<!-- 品牌 --> <!-- 品牌 -->
<view class="brand" v-else-if="current == 1" :style="{height: autoHeight}"> <view class="brand" v-else-if="current == 1" :style="{height: autoHeight}">
<!-- 筛选 --> <!-- 筛选 -->
<view class="lf-filter-box">
<view class="lf-filter-box" :style="{'z-index': filter_active == '' ? 1 : 99}">
<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}"> <view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}">
<view :class="{'filter-active': filter_active == 'floor'}" @click="filter_active = 'floor'">楼层</view>
<view :class="{'filter-active': filter_active == 'class'}" @click="filter_active = 'class'">分类</view>
<view v-for="(value, key) in filter_list" :key="key"
:class="{'filter-active': filter_active == key}"
@click="filter_active = key">{{ value.name }}
</view>
</view> </view>
<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''"> <view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''">
<view class="filter-modal">
<view class="filter-item" v-for="(item, index) in 6" :key="index">{{ '哈哈'+ item }}</view>
<view class="filter-modal" @click.stop>
<view class="filter-item"
:class="{'filter-item-active': filter_list[filter_active].current == index}"
@click="selectFilter(item, index)"
v-for="(item, index) in filter_list[filter_active].list"
:key="index">{{ item.name || item }}
</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 内容 --> <!-- 内容 -->
<scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}"> <scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}">
<view class="lf-flex brand-item" <view class="lf-flex brand-item"
:id="'anchor-'+ index"
@click="$url('/pages/shop/shopdetail')"
v-for="(item, index) in point_list" :key="index">
<image class="img" src="https://picsum.photos/200"></image>
:id="'anchor-'+ item.initial"
@click="$url('/pages/shop/shopdetail?id='+ item.id)"
v-for="(item, index) in brand_list" :key="index">
<image class="img" :src="item.logo"></image>
<view class="info"> <view class="info">
<view class="lf-font-36 lf-font-bold lf-color-black">luckin coffee 瑞幸咖啡 {{ item }}</view>
<view class="lf-font-24 lf-color-gray">餐饮·美食｜18件在售</view>
<view class="lf-font-36 lf-font-bold lf-color-black">{{ item.name }}</view>
<view class="lf-font-24 lf-color-gray">{{ item.category }}｜{{ item.goods_count || 0 }}件在售</view>
<view class="lf-font-24"> <view class="lf-font-24">
<text class="lf-iconfont icon--1 lf-font-24"></text>
<text class="lf-color-gray lf-m-l-10">L2</text>
<text class="lf-iconfont icon-dizhi lf-font-24"></text>
<text class="lf-color-gray lf-m-l-10">{{ item.floor }}</text>
</view> </view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 锚点定位 --> <!-- 锚点定位 -->
<view class="fixed-point" @touchmove="pointTouchmove">
<view class="point-item" @click="pointClick" :id="'point-'+index" :style="{height: 100 / 26 +'%'}" v-for="(item, index) in point_list" :key="index">{{ item }}</view>
<view class="fixed-point" v-if="point_list.length">
<view class="fixed-content" @touchmove="pointTouchmove">
<view class="point-item"
@click="pointClick"
:id="'point-'+ item"
:style="{height: 100 / 26 +'%'}"
v-for="(item, index) in point_list"
:key="index">{{ item }}
</view>
</view>
</view> </view>
</view> </view>
<lf-tabbar></lf-tabbar> <lf-tabbar></lf-tabbar>
@ -89,7 +104,7 @@
ttscrollH: 0, //总高度 ttscrollH: 0, //总高度
placeholderH: 0, //占位高度 placeholderH: 0, //占位高度
heighArr: [], heighArr: [],
dataArr: testdata,
dataArr: [],
current: 1, current: 1,
nav_height: 0, nav_height: 0,
tabs: [{ tabs: [{
@ -97,7 +112,20 @@
},{ },{
name: '品牌' name: '品牌'
}], }],
filter_list: {
'floor': {
name: '楼层',
list: [],
current: null
},
'class': {
name: '分类',
list: [],
current: null
}
},
filter_active: '', filter_active: '',
brand_list: [],
point_list: [], point_list: [],
scrollAnchorId: '' scrollAnchorId: ''
}; };
@ -120,23 +148,55 @@
}, },
onLoad(options) { onLoad(options) {
// https://ext.dcloud.net.cn/plugin?id=5031 // https://ext.dcloud.net.cn/plugin?id=5031
this.getBrandList();
if(this.$isRight(options)){ if(this.$isRight(options)){
this.current = options.current || 1; this.current = options.current || 1;
this.left_selectIndex = options.type || 0; this.left_selectIndex = options.type || 0;
this.right_selectIndex = options.type || 0; this.right_selectIndex = options.type || 0;
} }
let info = uni.getSystemInfoSync(); let info = uni.getSystemInfoSync();
let self = this; let self = this;
self.scrollH = info.screenHeight; self.scrollH = info.screenHeight;
self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3); self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3);
setTimeout(function() {
this.getCategoryList().then(() => {
self.computerH(); self.computerH();
}, 100);
this.createAtoZ();
});
// setTimeout(function() {
// self.computerH();
// }, 100);
// this.createAtoZ();
}, },
methods: { methods: {
// 生成A-Z的大写字母
getBrandList(){
this.$http.get({
api: '/api/brand'
}).then(res => {
console.log("getBrandList", res);
let category = res.data.data.category;
let floor = res.data.data.floor;
this.filter_list['floor'].list = floor;
this.filter_list['class'].list = category;
this.brand_list = res.data.data.list;
this.autoCreateAtoZ(res.data.data.list);
});
},
getCategoryList(){
return new Promise((resolve, reject) => {
this.$http.get({
api: '/api/category/list'
}).then(res => {
console.log("getCategoryList", res);
this.dataArr = res.data.data;
resolve(res);
}).catch(err => reject(err));
}) },
// 选择筛选项
selectFilter(item, index){
console.log(item, index);
this.filter_list[this.filter_active].current = index;
this.filter_active = '';
},
// 生成A-Z的大写字母 自己生成的
createAtoZ(){ createAtoZ(){
let point_list = []; let point_list = [];
for(var i=0; i<26; i++){ for(var i=0; i<26; i++){
@ -144,16 +204,29 @@
} }
this.point_list = point_list; this.point_list = point_list;
}, },
// 生成A-Z的大写字母 根据店铺类别动态生成
autoCreateAtoZ(list){
let letters = Array.from(new Set(list.map(item => item.initial)));
letters.sort(function(a1, b1){
let a = a1.toLowerCase();
let b = b1.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
})
this.point_list = letters;
},
pointTouchmove(event){ pointTouchmove(event){
console.log(event); console.log(event);
}, },
pointClick(event){ pointClick(event){
let index = (event.target.id).replace('point-', '');
let letter = this.point_list[index];
// let index = (event.target.id).replace('point-', '');
// let letter = this.point_list[index];
let letter = (event.target.id).replace('point-', '');
this.scrollAnchorId = ''; this.scrollAnchorId = '';
this.$msg(letter); this.$msg(letter);
this.$nextTick(() => { this.$nextTick(() => {
this.scrollAnchorId = 'anchor-'+ index;
this.scrollAnchorId = 'anchor-'+ letter;
}) })
}, },
leftTap: function(e) { leftTap: function(e) {
@ -161,8 +234,8 @@
this.right_selectIndex = e.index; this.right_selectIndex = e.index;
}, },
// 右边点击 // 右边点击
rightTap: function() {
this.$msg('敬请期待')
rightTap: function(item) {
this.$url(item.path);
}, },
rightScroll: function(e) { rightScroll: function(e) {
let scrollH = e.detail.scrollTop + 30; let scrollH = e.detail.scrollTop + 30;
@ -183,7 +256,7 @@
this.ttscrollH = 0; this.ttscrollH = 0;
for (let item of this.dataArr) { for (let item of this.dataArr) {
let title_lineH = 49; //rpx let title_lineH = 49; //rpx
let subNum = item.subArr.length;
let subNum = item.sub_category.length;
let subImgH = this.subItemW; //rpx let subImgH = this.subItemW; //rpx
let subTitleH = 40; //rpx let subTitleH = 40; //rpx
let rowSpecH = 8; //rpx let rowSpecH = 8; //rpx
@ -380,6 +453,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
z-index: 99;
.filter-modal{ .filter-modal{
width: 750rpx; width: 750rpx;
height: max-content; height: max-content;
@ -389,7 +463,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
z-index: 1;
z-index: 102;
.filter-item{ .filter-item{
width: 215rpx; width: 215rpx;
height: 65rpx; height: 65rpx;
@ -408,6 +482,10 @@
margin-top: 21rpx; margin-top: 21rpx;
} }
} }
.filter-item-active{
background-color: #15716E;
color: #FFFFFF;
}
} }
} }
} }
@ -441,17 +519,25 @@
.fixed-point{ .fixed-point{
position: fixed; position: fixed;
right: 0; right: 0;
top: 18vh;
height: 70vh;
top: 0;
// top: 18vh;
// height: 70vh;
height: 100vh;
width: 57rpx; width: 57rpx;
background-color: rgba(0,0,0,0.3);
border-radius: 30rpx 0rpx 0rpx 30rpx;
padding: 14rpx 0rpx;
z-index: 2; z-index: 2;
.point-item{
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
display: flex;
align-items: center;
.fixed-content{
width: 100%;
height: max-content;
padding: 14rpx 0rpx;
background-color: rgba(0,0,0,0.3);
border-radius: 30rpx 0rpx 0rpx 30rpx;
.point-item{
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
}
} }
} }
</style> </style>

16
pages/index/index/index.vue
View File

@ -551,14 +551,14 @@
// 生命周期 // 生命周期
onLoad(e) { onLoad(e) {
// 进入开屏广告页
if(app.globalData.app_first_full){
getApp().globalData.app_first_full = false;
this.$url('/pages/index/openScreenAd/openScreenAd', {type: 'launch'});
}else if(app.globalData.app_first_alert){
getApp().globalData.app_first_alert = false;
this.getAlertAd();
}
// 进入开屏广告页 todo 暂时注释，已对接完成
// if(app.globalData.app_first_full){
// getApp().globalData.app_first_full = false;
// this.$url('/pages/index/openScreenAd/openScreenAd', {type: 'launch'});
// }else if(app.globalData.app_first_alert){
// getApp().globalData.app_first_alert = false;
// this.getAlertAd();
// }
// 第三方平台配置颜色 // 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || ''; var gbConfig = this.$cookieStorage.get('globalConfig') || '';

Write Preview
Loading…
Cancel
Save