|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-tabs :list="types" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
|
|
|
+ keyName="classname" @change="tabsChange">
|
|
|
+ <view slot="right" class="nav-search" hover-class="navigator-hover" @click="changeSearchShow(searchShow)">
|
|
|
+ <view class="iconfont icon-sousuo" :style="{ color: searchShow ? '#C30D23' : '#999999' }" />
|
|
|
+ </view>
|
|
|
+ </u-tabs>
|
|
|
+ <u-transition :show="searchShow">
|
|
|
+ <view class="My_search-box">
|
|
|
+ <My_search :value="content.where.condition" @onSearch="onSearch">
|
|
|
+ <view class="cancel" v-if="content.where.condition" hover-class="navigator-hover" @click="onSearch('')">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view v-else style="width: 5px;" />
|
|
|
+ </My_search>
|
|
|
+ </view>
|
|
|
+ </u-transition>
|
|
|
+
|
|
|
+ <view class="scroll-view-box" v-if="tabs.length">
|
|
|
+ <scroll-view class="scroll-view" :scroll-left="scrollLeft" scroll-x scroll-with-animation>
|
|
|
+ <view class="tab-box">
|
|
|
+ <view class="tab-item tabitem" :id="item.classname + item.sa_fadclassid"
|
|
|
+ :class="item.sa_fadclassid == sa_fadclassid ? 'tab-item-active' : ''" v-for="item in tabs"
|
|
|
+ :key="item.sa_fadclassid" @click="changeActive(item.sa_fadclassid)">
|
|
|
+ {{ item.classname }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height: 10px;" />
|
|
|
+ <view class="list">
|
|
|
+ <view class="head">
|
|
|
+ <view class="crumbs u-line-1">
|
|
|
+ <text class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="total">共{{ total }}件</view>
|
|
|
+ </view>
|
|
|
+ <My_listbox ref="List" @getlist="getList">
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="item" v-for="item in list" :key="item.sa_fadid" hover-class="navigator-hover">
|
|
|
+ <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
|
|
|
+ <view class="title u-line-1">
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </My_listbox>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchShow: true,
|
|
|
+ crumbs: [],
|
|
|
+ types: [],
|
|
|
+ tabs: [],
|
|
|
+ condition: "",
|
|
|
+ "content": {
|
|
|
+ "where": {
|
|
|
+ "condition": "",
|
|
|
+ "isonsale": 1,
|
|
|
+ "begindate_create": "",
|
|
|
+ "enddate_create": "",
|
|
|
+ "begindate_onsale": "",
|
|
|
+ "enddate_onsale": "",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sa_fadclassid: '',
|
|
|
+ total: 0,
|
|
|
+ searchShowAntiShake: null,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '电器系统',
|
|
|
+ })
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": "20240418112002",
|
|
|
+ "content": {
|
|
|
+ "parentid": 0,
|
|
|
+ "where": { "isenable": 1 }
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let 电器系统 = res.data.find(v => v.classname == '电器系统')
|
|
|
+ this.types = [{
|
|
|
+ classname: "全部",
|
|
|
+ children: "",
|
|
|
+ sa_fadclassid: 电器系统.sa_fadclassid,
|
|
|
+ }].concat(电器系统.children);
|
|
|
+ this.crumbs = [{
|
|
|
+ classname: "电器"
|
|
|
+ }, {
|
|
|
+ classname: '全部',
|
|
|
+ sa_fadclassid: 电器系统.sa_fadclassid
|
|
|
+ }]
|
|
|
+ this.sa_fadclassid = 电器系统.sa_fadclassid;
|
|
|
+ this.getList(true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList(init = false) {
|
|
|
+ if (this.paging(this.content, init)) return;
|
|
|
+ this.content.where.sa_fadclassids = [[this.sa_fadclassid]];
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": "20240418141302",
|
|
|
+ content: this.content
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.List.RefreshToComplete()
|
|
|
+ console.log("获取电器列表", res)
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ res.data = res.data.map(v => {
|
|
|
+ v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : ''
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
|
|
|
+ this.content = this.$refs.List.paging(this.content, res)
|
|
|
+ this.total = res.total;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSearch(condition) {
|
|
|
+ if (condition == this.content.where.condition) return;
|
|
|
+ this.content.where.condition = condition;
|
|
|
+ this.getList(true);
|
|
|
+ },
|
|
|
+ tabsChange(e) {
|
|
|
+ let all = {
|
|
|
+ classname: "全部",
|
|
|
+ sa_fadclassid: e.sa_fadclassid
|
|
|
+ }
|
|
|
+ this.sa_fadclassid = e.sa_fadclassid;
|
|
|
+ e.classname == '全部' ? this.crumbs = this.crumbs.splice(1) : this.crumbs.splice(2, 1, all)
|
|
|
+ this.crumbs[1] = e;
|
|
|
+ if (e.children.length && e.children[0].classname != '全部') e.children.unshift(all)
|
|
|
+ this.tabs = e.children;
|
|
|
+ this.active = '全部'
|
|
|
+ this.$refs.List.setHeight();
|
|
|
+ this.getList(true)
|
|
|
+ },
|
|
|
+ changeActive(sa_fadclassid) {
|
|
|
+ if (this.sa_fadclassid == sa_fadclassid) return;
|
|
|
+ this.sa_fadclassid = sa_fadclassid
|
|
|
+ this.getList(true)
|
|
|
+ },
|
|
|
+ changeSearchShow(searchShow) {
|
|
|
+ this.searchShow = !searchShow;
|
|
|
+ clearTimeout(this.searchShowAntiShake)
|
|
|
+ this.searchShowAntiShake = setTimeout(() => {
|
|
|
+ this.$refs.List.setHeight();
|
|
|
+ }, 350)
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.nav-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.My_search-box {
|
|
|
+ background: #fff;
|
|
|
+ width: 100vw;
|
|
|
+ padding: 5px;
|
|
|
+ padding-left: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ line-height: 30px;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-view-box {
|
|
|
+ width: 100vw;
|
|
|
+ padding: 10px;
|
|
|
+ padding-top: 5px;
|
|
|
+ background: #fff;
|
|
|
+ height: 44px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ .tab-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background: #F2F2F2;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item-active {
|
|
|
+ background: #C30D23;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 173px;
|
|
|
+ height: 207px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 173px;
|
|
|
+ height: 172px;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.list {
|
|
|
+ width: 100vw;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 17px;
|
|
|
+ line-height: 17px;
|
|
|
+
|
|
|
+ .crumbs {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+
|
|
|
+ .crumb {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ }
|
|
|
+
|
|
|
+ .crumb::after {
|
|
|
+ content: ">";
|
|
|
+ padding: 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .crumb:last-child {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .crumb:last-child::after {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
