我的收藏

cloud/collect/mylist.vue

@@ -1,12 +1,138 @@
 <template>
     <view>
-        我的收藏
+        <u-tabs lineColor="#C30D23" :activeStyle="{ color: '#C30D23', fontWeight: 'bold' }" :list="tabs"
+            @click="changeCurrent" :current="current" />
+        <view style="padding: 10px;background-color: #fff;">
+            <My_search @onSearch="onSearch" />
+        </view>
+        <view style="height: 10px;" />
+        <My_listbox ref="List" @getlist="getList">
+            <img-list v-if="tabs[current].name == '效果图'" ref="效果图" :list="list" @addReadcount="addReadcount" />
+            <design-list v-if="tabs[current].name == '设计实景'" ref="设计实景" :list="list" @toDetail="updateDesign" />
+            <view v-else-if="tabs[current].name == '单品'" style="padding: 0 10px;">
+                <product ref="单品" :list="list" />
+            </view>
+            <courseware v-else-if="tabs[current].name == '课件'" ref="课件" :list="list" />
+            <commodity-list v-else-if="tabs[current].name == '商品'" ref="商品" :list="list" />
+        </My_listbox>
     </view>
 </template>
 
 <script>
-export default {
+import imgList from '../../pages/index/index/casePages/modules/imgList.vue';
+import designList from '../../pages/index/index/casePages/modules/designList.vue';
+import product from "../../components/collectLists/product.vue";
+import courseware from "../../components/collectLists/courseware.vue";
+import commodityList from "../../pages/index/index/modules/commodityList.vue";
 
+export default {
+    components: { commodityList, imgList, product, courseware, designList },
+    data() {
+        return {
+            current: 0,
+            tabs: [{
+                name: '效果图',
+                id: "20240415164402"
+            }, {
+                name: '单品',
+                id: "20240418141302"
+            }, {
+                name: '设计实景',
+                id: "20240417144702"
+            }, {
+                name: '课件',
+                id: "20240506100502"
+            }, {
+                name: '商品',
+                id: '20240430094102'
+            }],
+            "content": {
+                nocache: true,
+                iscollect: 1,
+                "where": {
+                    iscollect: 1,
+                    "condition": ""
+                }
+            },
+            showCount: 0,
+            list: []
+        }
+    },
+    onLoad() {
+        uni.setNavigationBarTitle({
+            title: '我的收藏'
+        });
+        this.getList(true)
+    },
+    onShow() {
+        if (this.showCount) this.updateList();
+        this.showCount += 1;
+    },
+    methods: {
+        getList(init = false) {
+            let current = this.tabs[this.current];
+            if (this.paging(this.content, init)) return;
+            this.$Http.basic({
+                "id": current.id,
+                content: this.content
+            }).then(res => {
+                this.$refs.List.RefreshToComplete()
+                console.log(`我收藏的${current.name}列表`, this.list)
+                console.log(current.id)
+                if (this.cutoff(res.msg)) return;
+                res.data = this.$refs[current.name].handleList(res.data)
+                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+                this.content = this.$refs.List.paging(this.content, res)
+            })
+        },
+        updateList() {
+            let current = this.tabs[this.current];
+            if (this.content.pageNumber && this.content.pageNumber >= 2) {
+                let content = this.paging(this.content, true, true)
+                this.$Http.basic({
+                    "id": current.id,
+                    content
+                }).then(res => {
+                    console.log(`更新我收藏的${current.name}列表`, res)
+                    if (this.cutoff(res.msg)) return;
+                    res.data = this.$refs[current.name].handleList(res.data)
+                    this.list = res.data;
+                })
+            }
+        },
+        changeCurrent({ index }) {
+            this.current = index;
+            this.list = [];
+            this.getList(true)
+        },
+        onSearch(condition) {
+            this.content.where.condition = condition;
+            this.getList(true)
+        },
+        addReadcount(index) {
+            this.$set(this.list[index], 'readcount', this.list[index].readcount - 0 + 1)
+        },
+        updateDesign(index, type = 1) {
+            let item = this.list[index]
+            if (type == 1) {
+                uni.navigateTo({
+                    url: `/packageA/fullView/detail?id=${item.sat_sharematerialid}`,
+                });
+            } else {
+                uni.redirectTo({
+                    url: `/packageA/fullView/detail?id=${item.sat_sharematerialid}`,
+                });
+            }
+            this.$Http.setCount = function (detail) {
+                item.collectcount = detail.collectcount;
+                item.commentcount = detail.commentcount;
+                item.likecount = detail.likecount;
+                item.islike = detail.islike;
+                item.iscollect = detail.iscollect;
+                this.$set(this.list, index, item)
+            }.bind(this)
+        },
+    },
 }
 </script>
 

components/collectLists/courseware.vue

@@ -0,0 +1,98 @@
+<template>
+    <view class="catalog">
+        <navigator class="item" :url="'/packageA/course/detail?id=' + item.sat_coursewaredetailid" v-for="item in list"
+            :key="item.sat_coursewaredetailid">
+            <view class="cover">
+                <view class="u-icon" v-if="item.filetype == '视频' || item.filetype == '音频'">
+                    <u-icon name="play-right-fill" color="#FFFFFF" size="30" />
+                </view>
+                <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
+            </view>
+            <view class="title u-line-2">
+                {{ item.title || '--' }}
+            </view>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "list",
+    props: {
+        list: {
+            type: Array
+        }
+    },
+    methods: {
+        handleList(list) {
+            return list.map(v => {
+                if (v.filetype == '视频') {
+                    if (v.attinfos.length) {
+                        let cover = v.attinfos.find(s => s.subfiles.some(e => e.type == 'cover'))
+                        if (cover) {
+                            v.cover = cover.subfiles.find(e => e.type == 'cover').url;
+                        } else {
+                            v.cover = uni.getStorageSync("site").logo
+                        }
+                    } else {
+                        v.cover = uni.getStorageSync("site").logo
+                    }
+                }
+                else {
+                    v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "avatar") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
+                }
+                return v
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.catalog {
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .item {
+        flex-shrink: 0;
+        margin-bottom: 10px;
+        border-radius: 5px;
+
+        .cover {
+            position: relative;
+            width: 173px;
+            height: 106px;
+            border-radius: 5px;
+            overflow: hidden;
+
+            .u-icon {
+                position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                z-index: 9999999;
+                opacity: .9;
+            }
+
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .title {
+            height: 34px;
+            font-size: 12px;
+            color: #333333;
+            line-height: 17px;
+            margin-top: 10px;
+            width: 173px;
+        }
+    }
+}
+</style>

components/collectLists/product.vue

@@ -0,0 +1,65 @@
+<template>
+    <view class="list-box">
+        <navigator class="item" :url="'/packageCase/product/detail?id=' + item.sa_fadid" 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>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "list",
+    props: {
+        list: {
+            type: Array
+        }
+    },
+    methods: {
+        handleList(list) {
+            return list.map(v => {
+                v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
+                return v
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+.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;
+        }
+    }
+}
+</style>

packageA/course/list.vue

@@ -20,20 +20,7 @@
             </view>
         </view>
         <My_listbox v-show="tabsActive == '目录'" ref="List" @getlist="getList" boxBackground="#fff">
-            <view class="catalog">
-                <navigator class="item" :url="'/packageA/course/detail?id=' + item.sat_coursewaredetailid"
-                    v-for="item in list" :key="item.sat_coursewaredetailid">
-                    <view class="cover">
-                        <view class="u-icon" v-if="item.filetype == '视频' || item.filetype == '音频'">
-                            <u-icon name="play-right-fill" color="#FFFFFF" size="30" />
-                        </view>
-                        <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
-                    </view>
-                    <view class="title u-line-2">
-                        {{ item.title || '--' }}
-                    </view>
-                </navigator>
-            </view>
+            <list ref="courseware" :list="list" />
         </My_listbox>
 
         <My_listbox v-if="tabsActive == '介绍'" :pullDown="false" boxBackground="#fff">
@@ -50,7 +37,9 @@
 </template>
 
 <script>
+import list from "../../components/collectLists/courseware"
 export default {
+    components: { list },
     data() {
         return {
             tabsActive: "目录",
@@ -94,10 +83,7 @@ export default {
                 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 == "avatar") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
-                    return v
-                })
+                res.data = this.$refs.courseware.handleList(res.data)
                 this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                 this.total = res.total;
                 this.content = this.$refs.List.paging(this.content, res)
@@ -193,51 +179,6 @@ export default {
 
 }
 
-.catalog {
-    padding: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .item {
-        flex-shrink: 0;
-        margin-bottom: 10px;
-        border-radius: 5px;
-
-        .cover {
-            position: relative;
-            width: 173px;
-            height: 106px;
-            border-radius: 5px;
-            overflow: hidden;
-
-            .u-icon {
-                position: absolute;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                height: 100%;
-                z-index: 9999999;
-                opacity: .9;
-            }
-
-            .image {
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        .title {
-            height: 34px;
-            font-size: 12px;
-            color: #333333;
-            line-height: 17px;
-            margin-top: 10px;
-            width: 173px;
-        }
-    }
-}
 
 .introduce {
     padding: 10px;

packageCase/electricAppliances/index.vue

@@ -38,22 +38,16 @@
                 <view class="total">共{{ total }}件</view>
             </view>
             <My_listbox ref="List" @getlist="getList">
-                <view class="list-box">
-                    <navigator class="item" :url="'/packageCase/product/detail?id=' + item.sa_fadid" 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>
-                    </navigator>
-                </view>
+                <list ref="myList" :list="list" />
             </My_listbox>
         </view>
     </view>
 </template>
 
 <script>
+import list from "../../components/collectLists/product.vue";
 export default {
+    components: { list },
     data() {
         return {
             searchShow: true,
@@ -117,10 +111,7 @@ export default {
                 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]) : uni.getStorageSync("site").logo || ''
-                    return v
-                })
+                res.data = this.$refs.myList.handleList(res.data)
                 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;
@@ -233,40 +224,6 @@ export default {
     }
 }
 
-.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;

pages/index/index/casePages/design.vue

@@ -3,42 +3,17 @@
         <tabs ref="tabs" typename="renderingstype" @getList="getList" />
         <float-but @onClick="toUpload" />
         <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
-            <navigator class="list-item" url="#" v-for="(item, index) in list" hover-class="navigator-hover"
-                :key="item.sat_coursewareid" @click="toDetail(index)">
-                <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 || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.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_c || 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>
+            <design-list ref="designList" :list="list" @toDetail="toDetail" />
         </My_listbox>
     </view>
 </template>
 
 <script>
 import tabs from "./tabs.vue"
-import { formattedFiles } from "../../../../utils/settleFiles"
+import designList from "./modules/designList.vue";
 
 export default {
-    components: { tabs },
+    components: { tabs, designList },
     props: {
         pageType: {
             type: String,
@@ -105,11 +80,7 @@ export default {
                     console.log(`获取${this.pageType}列表`, res)
                     if (this.cutoff(res.msg)) return;
                     this.isInitialize = true;
-                    res.data = res.data.map(v => {
-                        v.attinfos = formattedFiles(v.attinfos);
-                        v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sat_sharematerial" && s.fileType == 'image') || v.attinfos.find(s => s.fileType == 'image')) : uni.getStorageSync("site").logo || ''
-                        return v
-                    })
+                    this.$refs.designList.handleList(res.data)
                     this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                     this.content = this.$refs.List.paging(this.content, res)
                 })
@@ -198,75 +169,4 @@ 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/imgs.vue

@@ -6,24 +6,16 @@
             </navigator>
         </tabs>
         <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
-            <navigator class="list-item" :url="'/packageCase/imgs/detail?id=' + item.sat_sharematerialid"
-                @click="addReadcount(index)" v-for="(item, index) in list" hover-class="navigator-hover"
-                :key="item.sat_coursewareid">
-                <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
-                <view class="tips">
-                    <view class="label u-line-1">{{ item.title }}</view>
-                    <view class="iconfont icon-liulanliang"><text style="padding-left: 5px;" />{{ item.readcount +
-                        item.readcount_start }}</view>
-                </view>
-            </navigator>
+            <img-list ref="imgList" :list="list" @addReadcount="addReadcount" />
         </My_listbox>
     </view>
 </template>
 
 <script>
+import imgList from "./modules/imgList.vue"
 import tabs from "./tabs.vue"
 export default {
-    components: { tabs },
+    components: { tabs, imgList },
     name: "imgsindex",
     data() {
         return {
@@ -68,10 +60,7 @@ export default {
                     console.log("获取效果图列表", 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
-                    })
+                    res.data = this.$refs.imgList.handleList(res.data);
                     this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                     this.content = this.$refs.List.paging(this.content, res)
                 })
@@ -91,41 +80,6 @@ body {
     overflow: hidden;
 }
 
-.list-item {
-    width: 355px;
-    margin: 0 auto 20px;
-    border-radius: 5px;
-    overflow: hidden;
-
-    .image {
-        width: 355px;
-        height: 240px;
-        border-radius: 5px;
-        overflow: hidden;
-    }
-
-    .tips {
-        display: flex;
-        justify-content: space-between;
-        height: 20px;
-        line-height: 20px;
-
-        .title {
-            flex: 1;
-            font-family: PingFang SC, PingFang SC;
-            font-size: 14px;
-            color: #333333;
-            margin-top: 10px;
-            margin-bottom: 20px;
-        }
-
-        .iconfont {
-            font-family: Source Han Sans SC, Source Han Sans SC;
-            font-size: 12px;
-            color: #999999;
-        }
-    }
-}
 
 .tab-item {
     flex-shrink: 0;

pages/index/index/casePages/modules/designList.vue

@@ -0,0 +1,131 @@
+<template>
+    <view>
+
+        <navigator class="list-item" url="#" v-for="(item, index) in list" hover-class="navigator-hover"
+            :key="item.sat_coursewareid" @click="onClick(index)">
+            <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 || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.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_c || 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>
+
+    </view>
+</template>
+
+<script>
+import { formattedFiles } from "../../../../../utils/settleFiles"
+export default {
+    props: {
+        list: {
+            type: Array,
+        },
+        toDetail: {
+            type: Function
+        }
+    },
+    methods: {
+        handleList(list) {
+            return list.map(v => {
+                v.attinfos = formattedFiles(v.attinfos);
+                v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sat_sharematerial" && s.fileType == 'image') || v.attinfos.find(s => s.fileType == 'image')) : uni.getStorageSync("site").logo || ''
+                return v
+            })
+        },
+        onClick(index) {
+            this.$emit("toDetail", index)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.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/modules/imgList.vue

@@ -0,0 +1,76 @@
+<template>
+    <view>
+        <navigator class="list-item" :url="'/packageCase/imgs/detail?id=' + item.sat_sharematerialid"
+            @click="readcount(index)" v-for="(item, index) in list" hover-class="navigator-hover"
+            :key="item.sat_coursewareid">
+            <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
+            <view class="tips">
+                <view class="label u-line-1">{{ item.title }}</view>
+                <view class="iconfont icon-liulanliang"><text style="padding-left: 5px;" />{{ item.readcount +
+                    item.readcount_start }}</view>
+            </view>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        list: {
+            type: Array,
+        },
+        addReadcount: {
+            type: Function
+        }
+    },
+    methods: {
+        readcount(index) {
+            this.$emit("addReadcount", index)
+        },
+        handleList(list) {
+            return list.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
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.list-item {
+    width: 355px;
+    margin: 0 auto 20px;
+    border-radius: 5px;
+    overflow: hidden;
+
+    .image {
+        width: 355px;
+        height: 240px;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    .tips {
+        display: flex;
+        justify-content: space-between;
+        height: 20px;
+        line-height: 20px;
+
+        .title {
+            flex: 1;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 14px;
+            color: #333333;
+            margin-top: 10px;
+            margin-bottom: 20px;
+        }
+
+        .iconfont {
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 12px;
+            color: #999999;
+        }
+    }
+}
+</style>

pages/index/index/modules/commodityList.vue

@@ -0,0 +1,96 @@
+<template>
+    <view class="products-box">
+        <navigator :url="'/store/product/detail?id=' + item.sa_fadid" class="item" v-for="item in list"
+            hover-class="navigator-hover" :key="item.sa_fadid">
+            <u--image :src="item.cover" :width="tovw(172)" :height="tovw(160)" radius="5">
+                <template v-slot:loading>
+                    <u-loading-icon color="red"></u-loading-icon>
+                </template>
+            </u--image>
+            <view class="text">
+                <view class="title u-line-1">{{ item.name }}</view>
+                <view class="price">
+                    ￥<text class="num">
+                        {{ CNY(item.pricetype == '一口价' ? item.price : item.price_deposit, '') }}
+                    </text>元/{{ item.unitname }}
+                </view>
+                <view v-if="item.tag" class="tag">{{ item.tag }}</view>
+            </view>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "list",
+    props: {
+        list: {
+            type: Array
+        }
+    },
+    methods: {
+        handleList(list) {
+            return list.map(v => {
+                v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
+                return v
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.products-box {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    .item {
+        width: 172px;
+        border-radius: 5px;
+        margin-top: 20px;
+
+        .text {
+            padding: 10px;
+            box-sizing: border-box;
+
+            .title {
+                line-height: 20px;
+                font-family: PingFang SC, PingFang SC;
+                font-size: 14px;
+                color: #333333;
+            }
+
+            .price {
+                line-height: 17px;
+                font-family: PingFang SC, PingFang SC;
+                font-size: 12px;
+                color: #E3041F;
+                margin-top: 2px;
+
+                .num {
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: bold;
+                    font-size: 18px;
+                    color: #E3041F;
+                    margin-right: 2px;
+                }
+            }
+
+            .tag {
+                width: max-content;
+                background: #FFFFFF;
+                border: 1px solid #E3041F;
+                padding: 2px 4px;
+                box-sizing: border-box;
+                font-family: PingFang SC, PingFang SC;
+                font-size: 10px;
+                color: #E3041F;
+                margin-top: 4px;
+            }
+        }
+    }
+}
+</style>

pages/index/index/store.vue

@@ -27,32 +27,15 @@
             </view>
         </view>
         <My_listbox ref="List" @getlist="getList" :bottomHeight="70" boxBackground="#fff">
-            <view class="products-box">
-                <navigator :url="'/store/product/detail?id=' + item.sa_fadid" class="item" v-for="item in list"
-                    hover-class="navigator-hover" :key="item.sa_fadid">
-                    <u--image :src="item.cover" :width="tovw(172)" :height="tovw(160)" radius="5">
-                        <template v-slot:loading>
-                            <u-loading-icon color="red"></u-loading-icon>
-                        </template>
-                    </u--image>
-                    <view class="text">
-                        <view class="title u-line-1">{{ item.name }}</view>
-                        <view class="price">
-                            ￥<text class="num">
-                                {{ CNY(item.pricetype == '一口价' ? item.price : item.price_deposit, '') }}
-                            </text>元/{{ item.unitname }}
-                        </view>
-                        <view v-if="item.tag" class="tag">{{ item.tag }}</view>
-                    </view>
-                </navigator>
-            </view>
+            <commodity-list :list="list" ref="commodity" />
         </My_listbox>
     </view>
 </template>
 
 <script>
+import commodityList from "./modules/commodityList.vue";
 export default {
-    components: {},
+    components: { commodityList },
     data() {
         return {
             updatePage: true,
@@ -105,10 +88,7 @@ export default {
                     console.log("获取商城列表", res)
                     resolve();
                     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]) : uni.getStorageSync("site").logo || ''
-                        return v
-                    })
+                    res.data = this.$refs.commodity.handleList(res.data)
                     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;
@@ -201,60 +181,6 @@ export default {
 
 }
 
-.products-box {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 0 10px;
-    box-sizing: border-box;
-
-    .item {
-        width: 172px;
-        border-radius: 5px;
-        margin-top: 20px;
-
-        .text {
-            padding: 10px;
-            box-sizing: border-box;
-
-            .title {
-                line-height: 20px;
-                font-family: PingFang SC, PingFang SC;
-                font-size: 14px;
-                color: #333333;
-            }
-
-            .price {
-                line-height: 17px;
-                font-family: PingFang SC, PingFang SC;
-                font-size: 12px;
-                color: #E3041F;
-                margin-top: 2px;
-
-                .num {
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: bold;
-                    font-size: 18px;
-                    color: #E3041F;
-                    margin-right: 2px;
-                }
-            }
-
-            .tag {
-                width: max-content;
-                background: #FFFFFF;
-                border: 1px solid #E3041F;
-                padding: 2px 4px;
-                box-sizing: border-box;
-                font-family: PingFang SC, PingFang SC;
-                font-size: 10px;
-                color: #E3041F;
-                margin-top: 4px;
-            }
-        }
-    }
-}
-
 .tabs-box {
     width: 100vw;
     background: #fff;