Skip to content

M
mallapp
Commit 36048e14 authored by 吴春's avatar 吴春
Browse files
Options

11

parent 859d5c75
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 71 deletions
pages/kotra/brand/list.vue
View file @ 36048e14
......@@ -3,6 +3,7 @@
'background-color': '#f6f6f6',
height: contentHeight + 'px',
overflow: 'hidden',
'--main-color': mainColor,
}">
<view :class="[FilterCriShow?'FilterBgBox':'']">
<view class="brandHeadBgBox"
......@@ -42,15 +43,17 @@
:activeFontSize="34" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
</view>
</view> -->
<view>
<view
style="display: flex; align-items: center; flex-shrink: 0; width: 100%; flex-wrap: nowrap; overflow: visible;">
<view style="flex: 1; min-width: 0;">
<u-dropdown ref="uDropdown" @open="openBrand" @close="closeBrand" active-color="#000"
inactive-color="#444">
<u-dropdown-item :title="selectedBrandClass">
<view
style="display: flex; flex-direction: column; height: 600rpx; background: #fff; border-radius: 16rpx 16rpx 0 0; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);">
style="display: flex; flex-direction: column; height: 600rpx; background: #fff; border-radius: 16rpx 16rpx 0 0; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08); width: 100%;">
<view style="flex: 1; display: flex;">
<scroll-view scroll-y
style="width: 200rpx; height: 500rpx; background: #f5f5f5; border-right: 1rpx solid #e0e0e0;">
style="width: 200rpx; height: 500rpx; background: #f5f5f5; border-right: 1rpx solid #e0e0e0; flex-shrink: 0;">
<view v-for="item in treeList" :key="item.value"
:class="['cat-level1', selectedBrandClass === item.label ? 'active' : '']"
@click="changeBrand(item)">
......@@ -58,23 +61,20 @@
</view>
</scroll-view>
<scroll-view scroll-y
style="flex: 1; height: 500rpx; padding: 0 24rpx; box-sizing: border-box; background: #f5f5f5;">
<view v-if="selectedSubClass && selectedSubClass.length > 0">
<view style="display: flex; flex-wrap: wrap;">
style="flex: 1; height: 500rpx; padding: 0 24rpx; box-sizing: border-box; background: #f5f5f5; width: 0; min-width: 0;">
<view v-if="selectedSubClass && selectedSubClass.length > 0"
style="display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; gap: 16rpx;">
<view v-for="sub in selectedSubClass" :key="sub.value"
class="cat-card"
:class="msg.BrandClassId === sub.value ? 'active' : ''"
@click="changeBrandSub(sub)">
<view
style="height: 120rpx; background: #e8e8e8; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #999;">
</view>
<view
style="padding: 12rpx 0; font-size: 24rpx; color: #333; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{ sub.label }}
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view
......@@ -83,35 +83,80 @@
style="flex: 1; height: 72rpx; background: #f5f5f5; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; margin-right: 16rpx;"
@click="resetBrand">重置</view>
<view
style="flex: 1; height: 72rpx; background: #ff6600; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #fff;"
:style="{
'flex': '1',
'height': '72rpx',
'background': mainColor,
'border-radius': '10rpx',
'display': 'flex',
'align-items': 'center',
'justify-content': 'center',
'font-size': '28rpx',
'color': '#fff'
}"
@click="confirmBrand">确认</view>
</view>
</view>
</u-dropdown-item>
</u-dropdown>
<view class=" brandScreen">
<view class="statusBox" v-if="msg.IsInChengdu == 0" @click="changeFirstStoreTest(-1)">
未在成都落地
<u-dropdown-item :title="chengduTitle">
<view style="padding: 24rpx; background: #fff; width: 100%;">
<view style="display: flex; flex-direction: row; gap: 16rpx;">
<view
style="flex: 1; padding: 16rpx 20rpx; background: #fff; border-radius: 8rpx; border: 1rpx solid #e0e0e0; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
:class="msg.IsInChengdu == 0 ? 'active-option' : ''"
@click="changeFirstStoreTest(0)">
<text style="font-size: 24rpx; color: #333;">未在成都落地</text>
<u-icon v-if="msg.IsInChengdu == 0" name="checkmark" :color="mainColor"
size="32"></u-icon>
</view>
<view
style="flex: 1; padding: 16rpx 20rpx; background: #fff; border-radius: 8rpx; border: 1rpx solid #e0e0e0; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
:class="msg.IsInChengdu == 1 ? 'active-option' : ''"
@click="changeFirstStoreTest(1)">
<text style="font-size: 24rpx; color: #333;">成都落地</text>
<u-icon v-if="msg.IsInChengdu == 1" name="checkmark" :color="mainColor"
size="32"></u-icon>
</view>
</view>
<view class="statusBox2" v-if="msg.IsInChengdu == -1" @click="changeFirstStoreTest(0)">
未在成都落地
<view style="display: flex; margin-top: 24rpx; gap: 16rpx;">
<view
style="flex: 1; height: 72rpx; background: #f5f5f5; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx;"
@click="resetChengdu">重置</view>
<view
:style="{
'flex': '1',
'height': '72rpx',
'background': mainColor,
'border-radius': '10rpx',
'display': 'flex',
'align-items': 'center',
'justify-content': 'center',
'font-size': '28rpx',
'color': '#fff'
}"
@click="confirmChengdu">确认</view>
</view>
</view>
<view class="screenBox" v-if="PrizeList.length > 0">
<view v-for="(item, index) in PrizeList" :key="index" class="screenBoxItem"
</u-dropdown-item>
<u-dropdown-item :title="prizeTitle" v-if="PrizeList.length > 0">
<view style="padding: 24rpx; background: #fff; width: 100%;">
<view style="display: flex; flex-wrap: wrap; gap: 20rpx;">
<view v-for="(item, index) in PrizeList" :key="index"
style="width: calc(50% - 10rpx); padding: 24rpx; background: #f5f5f5; border-radius: 12rpx;"
:class="item.Id == msg.PrizeId ? 'active' : ''"
@click="chooseYear(item)">
<view class="screenBoxItemYear" :class="{ activeYear: item.Id == msg.PrizeId }">
{{ item.YearInfo }}
<view style="text-align: center;">
<view style="font-size: 28rpx; color: #333; font-weight: 600;">
{{ item.YearInfo }}</view>
<view style="font-size: 24rpx; color: #999; margin-top: 8rpx;">
{{ item.Name }}</view>
</view>
<view class="screenBoxItemName" :class="{ activeName: item.Id == msg.PrizeId }">
{{ item.Name }}
</view>
</view>
</view>
</u-dropdown-item>
</u-dropdown>
</view>
</view>
</template>
<view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
......@@ -289,7 +334,7 @@
ShopTypeList: [],
FilterCriShow: false,
treeList: [],
selectedBrandClass: "全部",
selectedBrandClass: "分类筛选",
brandDropdownOpen: false,
selectedSubClass: null,
};
......@@ -386,6 +431,20 @@
let c = this.$uiConfig.is_bang ? 78 : 50;
this.contentHeight = this.$utils.calcContentHeight(c) + 40;
},
computed: {
chengduTitle() {
if (this.msg.IsInChengdu == 1) return '成都落地';
if (this.msg.IsInChengdu == 0) return '未在成都落地';
return '落地状态';
},
prizeTitle() {
if (this.msg.PrizeId) {
let item = this.PrizeList.find(x => x.Id == this.msg.PrizeId);
return item ? item.YearInfo : '年份';
}
return '年份';
}
},
methods: {
openBrand() {
this.brandDropdownOpen = true;
......@@ -404,7 +463,7 @@
this.msg.BrandClassId = sub.value;
},
resetBrand() {
this.selectedBrandClass = "全部";
this.selectedBrandClass = "分类筛选";
this.selectedSubClass = null;
this.msg.BrandClassId = 0;
this.g = [];
......@@ -418,6 +477,15 @@
this.$refs.uDropdown.close();
this.init();
},
resetChengdu() {
this.msg.IsInChengdu = -1;
},
confirmChengdu() {
this.g = [];
this.msg.pageIndex = 1;
this.$refs.uDropdown.close();
this.init();
},
getMixArea(type) {
if (this.msg.MaxAreaRequirement != '') {
if (this.msg.MaxAreaRequirement < this.msg.MixAreaRequirement) {
......@@ -622,12 +690,14 @@
}
this.g = [];
this.msg.pageIndex = 1;
this.$refs.uDropdown.close();
this.init();
},
changeFirstStoreTest(i) {
this.msg.IsInChengdu = i;
this.msg.pageIndex = 1;
this.g = [];
this.$refs.uDropdown.close();
this.init();
},
},
......@@ -1016,8 +1086,8 @@
.dropdown-tag.active {
background: #e6f4ff;
border-color: #017EDF;
color: #017EDF;
border-color: var(--main-color);
color: var(--main-color);
}
.cat-level1 {
......@@ -1032,8 +1102,8 @@
.cat-level1.active {
background: #fff;
color: #ff6600;
border-left-color: #ff6600;
color: var(--main-color);
border-left-color: var(--main-color);
font-weight: bold;
}
......@@ -1046,28 +1116,36 @@
}
.cat-level2.active {
background: #fff3e0;
color: #ff6600;
border: 1rpx solid #ff6600;
background: #e6f4ff;
color: var(--main-color);
border: 1rpx solid var(--main-color);
}
.cat-level2.active {
background: #fff3e0;
color: #ff6600;
border: 1rpx solid #ff6600;
background: #e6f4ff;
color: var(--main-color);
border: 1rpx solid var(--main-color);
}
.cat-card {
width: calc(50% - 8rpx);
width: calc(50% - 10rpx);
margin-bottom: 16rpx;
background: #fff;
border-radius: 8rpx;
border: 1rpx solid #e0e0e0;
}
.cat-card:nth-child(2n) {
margin-right: 0;
}
.cat-card.active view:last-child {
color: #ff6600;
.cat-card.active {
background: var(--main-color);
border-color: var(--main-color);
}
.cat-card.active view {
color: #fff !important;
font-weight: bold;
}
......@@ -1075,4 +1153,13 @@
.dropdown-tag.active {
display: none;
}
.active-option {
background: var(--main-color) !important;
border-color: var(--main-color) !important;
}
.active-option text {
color: #fff !important;
}
</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