设计美家/实景案例列表

pages/index/index/casePages/design.vue

@@ -0,0 +1,194 @@
+<template>
+    <view>
+        <tabs ref="tabs" typename="renderingstype" @getList="getList" />
+        <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
+            <navigator class="list-item" :url="'/packageCase/imgs/detail?id=' + item.sat_sharematerialid"
+                v-for="(item, index) in list" hover-class="navigator-hover" :key="item.sat_coursewareid">
+                <view style="position: relative;">
+                    <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
+                    <view class="createby-box">
+                        <image class="headpic" :src="item.headpic || '../../../../static/images/headpic.svg'"
+                            mode="aspectFill" lazy-load="true" />
+                        <view class="name u-line-1">{{ item.createby }}</view>
+                    </view>
+                </view>
+                <view class="tips">
+                    <view class="label u-line-1">{{ item.title }}</view>
+                    <view class="iconfont-box">
+                        <text class="iconfont icon-pinglun-hui">
+                            <text style="padding-left: 2px;" />{{ item.commentcount }}
+                        </text>
+                        <text class="iconfont icon-yidianzan">
+                            <text style="padding-left: 2px;" />{{ item.likecount }}
+                        </text>
+                        <text class="iconfont icon-yishoucang">
+                            <text style="padding-left: 2px;" />{{ item.collectcount }}
+                        </text>
+                    </view>
+                </view>
+            </navigator>
+        </My_listbox>
+    </view>
+</template>
+
+<script>
+import tabs from "./tabs.vue"
+export default {
+    components: { tabs },
+    props: {
+        pageType: {
+            type: String,
+            default: "设计"
+        }
+    },
+    name: "design",
+    data() {
+        return {
+            "content": {
+                isnationwide: 1,
+                "where": {
+                    "condition": "",
+                    "style": "",
+                    "space": "",
+                    "spec": "",
+                }
+            },
+            list: [],
+            isInitialize: false,
+        }
+    },
+    methods: {
+        init() {
+            if (this.isInitialize) return;
+            this.setTypes();
+            this.getList();
+        },
+        setTypes() {
+            let types = [{
+                value: "1",
+                remarks: "全国精选"
+            }];
+            types.push([21, 22].includes(uni.getStorageSync('userMsg').usertype) ? {
+                value: "0",
+                remarks: "门店" + this.pageType
+            } : {
+                value: "0",
+                remarks: "全国" + this.pageType
+            });
+            this.$refs.tabs.tabs = types;
+            this.$refs.tabs.active = "1";
+            this.$refs.tabs.setWidths();
+        },
+        getList(init = false) {
+            return new Promise((resolve, reject) => {
+                if (this.paging(this.content, init)) return;
+                let content = this.content;
+                let ref = this.$refs.tabs;
+                if (ref.active == null) this.setTypes()
+                content.isnationwide = ref.active;
+                content.where = {
+                    ...content.where,
+                    ...ref.where,
+                    "type": this.pageType == '设计' ? "4" : '5',
+                }
+                this.$Http.basic({
+                    "id": 20240417144702,
+                    content: this.content
+                }).then(res => {
+                    resolve()
+                    this.$refs.List.RefreshToComplete()
+                    this.$refs.List.setHeight()
+                    console.log(`获取${this.pageType}列表`, res)
+                    if (this.cutoff(res.msg)) return;
+                    this.isInitialize = true;
+                    res.data = res.data.map(v => {
+                        v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sat_sharematerial") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
+                        return v
+                    })
+                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+                    this.content = this.$refs.List.paging(this.content, res)
+                })
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+page,
+body {
+    height: 100vh;
+    overflow: hidden;
+}
+
+.list-item {
+    width: 355px;
+    margin: 0 auto 20px;
+    border-radius: 5px;
+    overflow: hidden;
+
+    .image {
+        position: relative;
+        width: 355px;
+        height: 240px;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    .createby-box {
+        position: absolute;
+        display: flex;
+        height: 24px;
+        line-height: 24px;
+        background: rgba($color: #333333, $alpha: 0.8);
+        border-radius: 12px;
+        bottom: 10px;
+        left: 10px;
+        padding-right: 10px;
+
+        .headpic {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-left: -1px;
+        }
+
+        .name {
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 12px;
+            color: #FFFFFF;
+            margin-left: 5px;
+            max-width: 200px;
+        }
+    }
+
+    .tips {
+        display: flex;
+        height: 20px;
+        line-height: 20px;
+        justify-content: space-between;
+
+        .title {
+            flex: 1;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 14px;
+            color: #333333;
+            margin-top: 10px;
+            margin-bottom: 20px;
+        }
+
+        .iconfont-box {
+            .iconfont {
+                font-family: Source Han Sans SC, Source Han Sans SC;
+                font-size: 12px;
+                color: #999999;
+                margin-right: 15px;
+            }
+
+            .iconfont:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+</style>

pages/index/index/casePages/tabs.vue

@@ -44,19 +44,21 @@ export default {
                     if (tabs.length) {
                         this.active = tabs[0].value;
                         resolve(this.active)
-                        setTimeout(() => {
-                            uni.createSelectorQuery().in(this).selectAll(`.tabitem`).boundingClientRect(list => {
-                                let count = 0;
-                                list.forEach((v, i) => {
-                                    if (i) this.widths.push(count)
-                                    count += v.width;
-                                })
-                            }).exec();
-                        }, 100);
                     }
                 });
             })
         },
+        setWidths() {
+            setTimeout(() => {
+                uni.createSelectorQuery().in(this).selectAll(`.tabitem`).boundingClientRect(list => {
+                    let count = 0;
+                    list.forEach((v, i) => {
+                        if (i) this.widths.push(count)
+                        count += v.width;
+                    })
+                }).exec();
+            }, 100);
+        },
         changeActive(active, index) {
             this.scrollLeft = this.widths[index]
             if (this.active == active) return;
@@ -143,6 +145,7 @@ export default {
     padding: 0 5px;
     background: #F2F2F2;
     border-radius: 12px;
+    font-size: 12px;
     margin-right: 5px;
 }
 

pages/index/index/myCase.vue

@@ -7,6 +7,8 @@
         <view class="content">
             <view class="head" />
             <imgs ref="图库" v-show="tabsActive == '图库'" />
+            <design ref="设计美家" v-show="tabsActive == '设计美家'" />
+            <design ref="实景案例" pageType="实景" v-show="tabsActive == '实景案例'" />
             <full-view ref="全景720" v-show="tabsActive == '全景720'" />
         </view>
     </view>
@@ -14,14 +16,15 @@
 
 <script>
 import imgs from "./casePages/imgs.vue";
+import design from "./casePages/design.vue";
 import fullView from "./casePages/fullView.vue";
 export default {
     name: "myCase",
-    components: { imgs, fullView },
+    components: { imgs, fullView, design },
     data() {
         return {
             updatePage: true,
-            tabsActive: "全景720",
+            tabsActive: "设计美家",
             tabs: ['图库', '设计美家', '实景案例', '全景720'],
             list: [],
             appList: [],
@@ -41,7 +44,6 @@ export default {
             })
         },
         tabsChange(tabsActive) {
-            console.log("切换", tabsActive)
             this.tabsActive = tabsActive;
             this.$refs[tabsActive].init()
         }