Skip to content

M
mallapp
Commit 7fc2f016 authored by zhengke's avatar zhengke
Browse files
Options

no message

parent 847dd6cc
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 268 deletions
components/uni-indexed-list/uni-indexed-list-item.vue
View file @ 7fc2f016
...@@ -3,19 +3,20 @@ ...@@ -3,19 +3,20 @@
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper"> <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key=='*'? '热门品牌': list.key }}</text> <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key=='*'? '热门品牌': list.key }}</text>
</view> </view>
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list"> <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0"
:class="{'uni-indexed-list__list':list.key!='*'}">
<view v-if="list.key=='*'" class="imgList"> <view v-if="list.key=='*'" class="imgList">
<view v-for="(item,index) in list.items" :key="index" @click="onClick(idx, index)"> <view v-for="(item,index) in list.items" :key="index" @click="onClick(idx, index)">
{{ item.name }} <image :src="item.img" mode="scaleToFill"/>
<!-- <image src="" /> -->
</view> </view>
</view> </view>
<template v-else> <template v-else>
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover"> <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)"> <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}"> <view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
<view style="margin-right: 20rpx;"> <view class="imgs" style="margin-right: 20rpx;">
<!-- <image src="" /> --> <!-- mode="aspectFill" -->
<image :src="item.img" mode="scaleToFill"/>
</view> </view>
<text class="uni-indexed-list__item-content">{{ item.name }}</text> <text class="uni-indexed-list__item-content">{{ item.name }}</text>
</view> </view>
...@@ -68,7 +69,7 @@ ...@@ -68,7 +69,7 @@
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
border-top-style: solid; /* border-top-style: solid; */
border-top-width: 1px; border-top-width: 1px;
border-top-color: #DEDEDE; border-top-color: #DEDEDE;
} }
...@@ -82,6 +83,7 @@ ...@@ -82,6 +83,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 20rpx;
} }
.uni-indexed-list__item-container { .uni-indexed-list__item-container {
...@@ -113,7 +115,7 @@ ...@@ -113,7 +115,7 @@
height: 50px; height: 50px;
padding: 25px; padding: 25px;
padding-left: 0; padding-left: 0;
border-bottom-style: solid; /* border-bottom-style: solid; */
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-color: #DEDEDE; border-bottom-color: #DEDEDE;
...@@ -125,8 +127,11 @@ ...@@ -125,8 +127,11 @@
.uni-indexed-list__item-content { .uni-indexed-list__item-content {
flex: 1; flex: 1;
font-size: 14px; font-size: 30rpx;
color: #191919; color: #191919;
font-weight:600;
font-family: -webkit-pictograph;
margin-left: 20rpx;
} }
.uni-indexed-list { .uni-indexed-list {
...@@ -139,9 +144,9 @@ ...@@ -139,9 +144,9 @@
.uni-indexed-list__title-wrapper { .uni-indexed-list__title-wrapper {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
width: 100%;
/* #endif */ /* #endif */
background-color: #f7f7f7; background-color: #f7f7f7;
padding: 0 0 0 20rpx;
} }
.uni-indexed-list__title { .uni-indexed-list__title {
...@@ -154,12 +159,30 @@ ...@@ -154,12 +159,30 @@
.imgList{ .imgList{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.imgList view{ .imgList view{
flex-shrink: 0; flex-shrink: 0;
width: 33.33%; width: 33.33%;
text-align: center; text-align: center;
height: 60rpx; padding: 20rpx 0 0 0;
line-height: 60rpx; }
.imgList view image{
width: 200rpx;
height: 150rpx;
margin-right: 10rpx;
margin-left: 10rpx;
border-radius: 15rpx;
}
/* .imgList view:nth-child(3n) image{
margin-right: 0;
} */
.imgs{
height: 90rpx;
}
.imgs image{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
} }
</style> </style>
components/uni-indexed-list/uni-indexed-list.vue
View file @ 7fc2f016
...@@ -6,9 +6,10 @@ ...@@ -6,9 +6,10 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y> <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
<view class="right-img"> <!-- <view class="right-img">
<image :src="Image" style="width: 100%; height: 100%;" mode="aspectFill"/> <image :src="classObj.Image" style="width: 100%; height: 100%;" mode="aspectFill"/>
</view> </view> -->
<template v-if="lists.length>0">
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx"> <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
<!-- #endif --> <!-- #endif -->
...@@ -17,6 +18,14 @@ ...@@ -17,6 +18,14 @@
@itemClick="onClick"></indexed-list-item> @itemClick="onClick"></indexed-list-item>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
</view> </view>
</template>
<view v-else style="
height: calc(100vh - 50px);
width: calc(100vw - 20px);
padding-top: 0;
">
<u-empty text="没有找到相关品牌信息" font-size="30" mode="list"></u-empty>
</view>
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
...@@ -98,10 +107,10 @@ ...@@ -98,10 +107,10 @@
}, },
emits: ['click'], emits: ['click'],
props: { props: {
Image:{ classObj:{
type: String, type: Object,
default: ()=>{ default () {
return "" return {}
} }
}, },
options: { options: {
...@@ -160,7 +169,8 @@ ...@@ -160,7 +169,8 @@
let items = value.data.map(item => { let items = value.data.map(item => {
let obj = {} let obj = {}
obj['key'] = value.letter obj['key'] = value.letter
obj['name'] = item obj['img'] = item.Logo
obj['name'] = item.Name
obj['itemIndex'] = index obj['itemIndex'] = index
index++ index++
obj.checked = item.checked ? item.checked : false obj.checked = item.checked ? item.checked : false
......
pages/Luxury/ClassList.vue
View file @ 7fc2f016
<template> <template>
<div v-if="!isloading"> <div v-if="!isloading">
<search :styleStr="searchStyle"></search> <view class="ctrl-box">
<u-search action-text="搜索" :focus="true" :clearabled="true" :show-action="false"
radius="40" v-model="Keywords"
></u-search>
<!-- @search="searchHandler" @custom="searchHandler" @change="changeHandler" -->
</view>
<!-- <view class="search-box" :style="{ background: bg }" @click="goSearch">
<u-search
:placeholder="styleStr.placeholder"
v-model="Keywords"
:input-align="styleStr.textPosition"
:value="Keywords"
:bg-color="styleStr.color"
:text-color="styleStr.textColor"
:radius="styleStr.radius"
:show-action="false"
:margin="marginStyle"
></u-search>
</view> -->
<div <div
:style="{ height: contentHeight + 'px' }" :style="{ height: contentHeight + 'px' }"
style="ovoerflow: hidden; overflow-y: auto;background: #F7F7F7;" style="ovoerflow: hidden; overflow-y: auto;background: #F7F7F7;"
> >
<view class="ClassList-form"> <view class="ClassList-form">
<view class="form-left"> <!-- <view class="form-left">
<view v-for="(item,index) in classData" :key="index" <view v-for="(item,index) in classData" :key="index"
class="name-box" :class="{'active':classObj.Name==item.Name}" class="name-box" :class="{'active':classObj.Name==item.Name}"
@click="chooseType(item)"> @click="chooseType(item)">
<view></view> <view></view>
<text>{{item.Name}}</text> <text>{{item.Name}}</text>
</view> </view>
</view> </view> -->
<view class="form-right"> <view class="form-right">
<view class="right-box"> <view class="right-box">
<uni-indexed-list :Image="classObj.Image" :options="list" :show-select="true" @click="bindClick" /> <uni-indexed-list :Image="classObj.Image" :options="list" :show-select="true" @click="bindClick" />
...@@ -40,7 +58,9 @@ ...@@ -40,7 +58,9 @@
isloading: true, isloading: true,
pageTitle: "选择品牌", pageTitle: "选择品牌",
navHeight: 0, navHeight: 0,
searchStyle: { Keywords:'',
marginStyle:"",
styleStr: {
placeholder: "搜索", placeholder: "搜索",
background: "rgb(240,239,244)", background: "rgb(240,239,244)",
textPosition: "center", textPosition: "center",
...@@ -54,216 +74,72 @@ ...@@ -54,216 +74,72 @@
Type:1, Type:1,
Style:1 Style:1
}, },
cat_id:'',
classData:[], classData:[],
classObj:null, classObj:null,
AllList:[],
list: [{ list: [{
letter: '*', letter: '*',
data: [ data: []
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
'阿克苏机场',
]
},{ },{
letter: 'A', letter: 'A',
data: [ data: []
'阿克苏机场',
'阿拉山口机场',
'阿勒泰机场',
'阿里昆莎机场',
'安庆天柱山机场',
'澳门国际机场'
]
}, { }, {
letter: 'B', letter: 'B',
data: [ data: []
'保山机场',
'包头机场',
'北海福成机场',
'北京南苑机场',
'北京首都国际机场'
]
}, { }, {
letter: 'C', letter: 'C',
data: [ data: []
'长白山机场',
'长春龙嘉国际机场',
'常德桃花源机场',
'昌都邦达机场',
'长沙黄花国际机场',
'长治王村机场',
'常州奔牛机场',
'成都双流国际机场',
'赤峰机场'
]
}, { }, {
letter: 'D', letter: 'D',
data: [ data: []
'大理机场',
'大连周水子国际机场',
'大庆萨尔图机场',
'大同东王庄机场',
'达州河市机场',
'丹东浪头机场',
'德宏芒市机场',
'迪庆香格里拉机场',
'东营机场',
'敦煌机场'
]
}, { }, {
letter: 'E', letter: 'E',
data: [ data: []
'鄂尔多斯机场',
'恩施许家坪机场',
'二连浩特赛乌苏国际机场'
]
}, { }, {
letter: 'F', letter: 'F',
data: [ data: []
'阜阳西关机场',
'福州长乐国际机场'
]
}, { }, {
letter: 'G', letter: 'G',
data: [ data: []
'赣州黄金机场',
'格尔木机场',
'固原六盘山机场',
'广元盘龙机场',
'广州白云国际机场',
'桂林两江国际机场',
'贵阳龙洞堡国际机场'
]
}, { }, {
letter: 'H', letter: 'H',
data: [ data: []
'哈尔滨太平国际机场',
'哈密机场',
'海口美兰国际机场',
'海拉尔东山国际机场',
'邯郸机场',
'汉中机场',
'杭州萧山国际机场',
'合肥骆岗国际机场',
'和田机场',
'黑河机场',
'呼和浩特白塔国际机场',
'淮安涟水机场',
'黄山屯溪国际机场'
]
}, { }, {
letter: 'I', letter: 'I',
data: [] data: []
}, { }, {
letter: 'J', letter: 'J',
data: [ data: []
'济南遥墙国际机场',
'济宁曲阜机场',
'鸡西兴凯湖机场',
'佳木斯东郊机场',
'嘉峪关机场',
'锦州小岭子机场',
'景德镇机场',
'井冈山机场',
'九江庐山机场',
'九寨黄龙机场'
]
}, { }, {
letter: 'K', letter: 'K',
data: [ data: []
'喀什机场',
'克拉玛依机场',
'库车龟兹机场',
'库尔勒机场',
'昆明巫家坝国际机场'
]
}, { }, {
letter: 'L', letter: 'L',
data: [ data: []
'拉萨贡嘎机场',
'兰州中川机场',
'丽江三义机场',
'黎平机场',
'连云港白塔埠机场',
'临沧机场',
'临沂机场',
'林芝米林机场',
'柳州白莲机场',
'龙岩冠豸山机场',
'泸州蓝田机场',
'洛阳北郊机场'
]
}, { }, {
letter: 'M', letter: 'M',
data: [ data: []
'满洲里西郊机场',
'绵阳南郊机场',
'漠河古莲机场',
'牡丹江海浪机场'
]
}, { }, {
letter: 'N', letter: 'N',
data: [ data: []
'南昌昌北国际机场',
'南充高坪机场',
'南京禄口国际机场',
'南宁吴圩机场',
'南通兴东机场',
'南阳姜营机场',
'宁波栎社国际机场'
]
}, { }, {
letter: 'O', letter: 'O',
data: [] data: []
}, { }, {
letter: 'P', letter: 'P',
data: [ data: []
'普洱思茅机场'
]
}, { }, {
letter: 'Q', letter: 'Q',
data: [ data: []
'齐齐哈尔三家子机场',
'秦皇岛山海关机场',
'青岛流亭国际机场',
'衢州机场',
'泉州晋江机场'
]
}, { }, {
letter: 'R', letter: 'R',
data: [ data: []
'日喀则和平机场'
]
}, { }, {
letter: 'S', letter: 'S',
data: [ data: []
'三亚凤凰国际机场',
'汕头外砂机场',
'上海虹桥国际机场',
'上海浦东国际机场',
'深圳宝安国际机场',
'沈阳桃仙国际机场',
'石家庄正定国际机场',
'苏南硕放国际机场'
]
}, { }, {
letter: 'T', letter: 'T',
data: [ data: []
'塔城机场',
'太原武宿国际机场',
'台州路桥机场 (黄岩机场)',
'唐山三女河机场',
'腾冲驼峰机场',
'天津滨海国际机场',
'通辽机场',
'铜仁凤凰机场'
]
}, { }, {
letter: 'U', letter: 'U',
data: [] data: []
...@@ -272,83 +148,68 @@ ...@@ -272,83 +148,68 @@
data: [] data: []
}, { }, {
letter: 'W', letter: 'W',
data: [ data: []
'万州五桥机场',
'潍坊机场',
'威海大水泊机场',
'文山普者黑机场',
'温州永强国际机场',
'乌海机场',
'武汉天河国际机场',
'乌兰浩特机场',
'乌鲁木齐地窝堡国际机场',
'武夷山机场',
'梧州长洲岛机场'
]
}, { }, {
letter: 'X', letter: 'X',
data: [ data: []
'西安咸阳国际机场',
'西昌青山机场',
'锡林浩特机场',
'西宁曹家堡机场',
'西双版纳嘎洒机场',
'厦门高崎国际机场',
'香港国际机场',
'襄阳刘集机场',
'兴义机场',
'徐州观音机场'
]
}, { }, {
letter: 'Y', letter: 'Y',
data: [ data: []
'延安二十里堡机场',
'盐城机场',
'延吉朝阳川机场',
'烟台莱山国际机场',
'宜宾菜坝机场',
'宜昌三峡机场',
'伊春林都机场',
'伊宁机场',
'义乌机场',
'银川河东机场',
'永州零陵机场',
'榆林榆阳机场',
'玉树巴塘机场',
'运城张孝机场'
]
}, { }, {
letter: 'Z', letter: 'Z',
data: [ data: []
'湛江机场',
'昭通机场',
'郑州新郑国际机场',
'芷江机场',
'重庆江北国际机场',
'中卫香山机场',
'舟山朱家尖机场',
'珠海三灶机场'
]
}, { }, {
letter: '#', letter: '#',
data: [ data: []
'湛江机场',
'昭通机场',
'郑州新郑国际机场',
'芷江机场',
'重庆江北国际机场',
'中卫香山机场',
'舟山朱家尖机场',
'珠海三灶机场'
]
}] }]
}; };
}, },
watch: { watch: {
classObj: { Keywords: {
handler: function(value) { handler: function(value) {
this.classObj = value if(value){
console.log(value,'===') let arr = this.AllList
arr = arr.filter(item=>{
return item.Name.indexOf(value)!=-1
})
console.log(arr,'--==')
if(arr.length>0){
arr.forEach(item=>{
this.list.forEach(i=>{
i.data = []
if(!item.IsHot){
if(item.PinYin==i.letter){
i.data.push(item)
}
}else{
if(i.letter=='*'){
i.data.push(item)
}
}
})
})
}else{
this.list.forEach(item=>{
item.data = []
})
}
}else{
this.AllList.forEach(item=>{
this.list.forEach(i=>{
if(!item.IsHot){
if(item.PinYin==i.letter){
i.data.push(item)
}
}else{
if(i.letter=='*'){
i.data.push(item)
}
}
})
})
}
}, },
deep: true deep: true
} }
...@@ -357,9 +218,10 @@ ...@@ -357,9 +218,10 @@
this.navHeight = this.$navHeight - 2; this.navHeight = this.$navHeight - 2;
if (this.cstyle.cat_style == "4") { if (this.cstyle.cat_style == "4") {
} }
if(option&&option.cat_id){ if(option.Id){
this.cat_id=option.cat_id; this.classObj.Id = option.Id
} }
this.getBrand()
}, },
mounted() { mounted() {
this.contentHeightB = this.$utils.calcContentHeight(-40)+'px'; this.contentHeightB = this.$utils.calcContentHeight(-40)+'px';
...@@ -379,8 +241,8 @@ ...@@ -379,8 +241,8 @@
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.pageTitle, title: this.pageTitle,
}); });
this.getStyle();
uni.showNavigationBarLoading(); uni.showNavigationBarLoading();
this.marginStyle=`${this.styleStr.top??0}px ${this.styleStr.right??0}px ${this.styleStr.bottom??0}px ${this.styleStr.left??0}px `
}, },
methods: { methods: {
bindClick(e){ bindClick(e){
...@@ -391,11 +253,54 @@ ...@@ -391,11 +253,54 @@
}, },
chooseType(item){ chooseType(item){
this.classObj = item this.classObj = item
this.getBrand()
}, },
goHome() { goHome() {
uni.redirectTo({ url: "/pages/index/main" }); uni.redirectTo({ url: "/pages/index/main" });
}, },
getStyle(){ // changeHandler(){
// },
// searchHandler(){
// },
// 获取品牌列表
getBrand(){
uni.showLoading({
title: '加载中'
});
this.request2(
{
url: '/api/AppletAssess/GetBrandDropList',
data: {
CategoryId: 1
}
},
res => {
this.isloading = false;
if(res.resultCode==1){
uni.hideLoading();
this.AllList = res.data
this.AllList.forEach(item=>{
this.list.forEach(i=>{
if(!item.IsHot){
if(item.PinYin==i.letter){
i.data.push(item)
}
}else{
if(i.letter=='*'){
i.data.push(item)
}
}
})
})
}
uni.hideNavigationBarLoading();
}
);
},
// 获取分类列表
getClass(){
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}); });
...@@ -410,14 +315,8 @@ ...@@ -410,14 +315,8 @@
if(res.resultCode==1){ if(res.resultCode==1){
uni.hideLoading(); uni.hideLoading();
this.classData = res.data; this.classData = res.data;
this.classObj = this.classData[0] this.classObj = this.classData[0]
// this.types.forEach((x) => { this.getBrand()
// if (x.IconPath == "") {
// x.IconPath =
// "https://cdnimg.iotweixin.com/uploads/mall1285/20200330/2099ca5e58ff3e0548d730bfaae14f7a.png";
// }
// });
} }
uni.hideNavigationBarLoading(); uni.hideNavigationBarLoading();
...@@ -431,6 +330,7 @@ ...@@ -431,6 +330,7 @@
.ClassList-form{ .ClassList-form{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 0 0 0;
} }
.form-left{ .form-left{
border-top: 1rpx solid #E7E7E7; border-top: 1rpx solid #E7E7E7;
...@@ -467,4 +367,8 @@ ...@@ -467,4 +367,8 @@
height: 100%; height: 100%;
position: relative; position: relative;
} }
.ctrl-box{
padding: 20rpx 20rpx;
background: #f2f2f2;
}
</style> </style>
\ 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