商学院资料库列表页修改

packageCase/imgs/detail.vue

@@ -1,6 +1,6 @@
 <template>
     <My_listbox ref="List" @getlist="getDetail">
-        <swiper class="swiper" v-if="slides.length" :indicator-dots="slides.length > 1" indicator-color="#DC808B"
+        <swiper class="swiper" circular v-if="slides.length" :indicator-dots="slides.length > 1" indicator-color="#DC808B"
             indicator-active-color="#C30D23">
             <swiper-item class="swiper-item" v-for="item in slides" :key="item.url">
                 <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
@@ -30,6 +30,23 @@
             <view class="subtitle" v-if="detail.subtitle">{{ detail.subtitle }}</view>
         </view>
 
+
+        <scroll-view v-if="productList.length" class="product-list" scroll-x lower-threshold="200" enable-flex
+            @scrolltolower="scrolltolower">
+            <navigator class="product" v-for="item in productList" :key="item.sa_fadid"
+                :url="'/packageCase/product/detail?id=' + item.sa_fadid" hover-class="navigator-hover">
+                <u--image :src="item.cover" :lazy-load="true" :width="tovw(112)" :height="tovw(112)" radius="5">
+                    <template v-slot:loading>
+                        <u-loading-icon color="red"></u-loading-icon>
+                    </template>
+                </u--image>
+                <view class="label u-line-1">
+                    {{ item.name }}
+                </view>
+            </navigator>
+        </scroll-view>
+
+
         <view class="introduce" v-if="detail.notes">
             <view class="introduce-title">
                 产品介绍
@@ -68,12 +85,22 @@ export default {
             sat_sharematerialid: null,
             detail: {},
             slides: [],
-            collectLoading: false
+            collectLoading: false,
+            content: {
+                "pageNumber": 1,
+                "pageTotal": 1,
+                "pageSize": 20,
+                "where": {
+                    "condition": ""
+                }
+            },
+            productList: []
         }
     },
     onLoad(options) {
         this.sat_sharematerialid = options.id;
         this.getDetail(true);
+        this.scrolltolower()
     },
     methods: {
         getDetail(init = false) {
@@ -171,13 +198,33 @@ export default {
                     });
                 },
             });
-        }, getSheraDate() {
+        },
+        getSheraDate() {
             let detail = this.detail
             return {
                 title: detail.title, // 标题
                 path: "/packageCase/imgs/detail?id=" + detail.sat_sharematerialid, // 分享路径
                 imageUrl: this.detail.attinfos.find(v => v.usetype == "sat_sharematerial").url || ""// 分享图
             };
+        },
+        scrolltolower() {
+            let content = this.content;
+            content.sat_sharematerialid = this.sat_sharematerialid;
+            if (content.pageNumber > content.pageTotal) return console.log("已加载全部单品")
+            this.$Http.basic({
+                "id": 20240419135802,
+                content
+            }).then(res => {
+                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
+                })
+                this.productList = res.pageNumber == 1 ? res.data : this.productList.concat(res.data);
+                content.pageNumber = res.pageNumber + 1;
+                content.pageTotal = res.pageTotal;
+            })
         }
     },
     onShareAppMessage(res) {
@@ -232,6 +279,7 @@ export default {
 .head {
     background: #fff;
     padding: 8px 10px 15px;
+    margin-bottom: 10px;
 
     .line1 {
         display: flex;
@@ -284,9 +332,37 @@ export default {
     }
 }
 
+.product-list {
+    display: flex;
+    width: 100vw;
+    height: 162px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding-top: 10px;
+    background: #fff;
+    margin-bottom: 10px;
+
+    .product {
+        width: 112px;
+        height: 142px;
+        margin-left: 10px;
+        flex-shrink: 0;
+        background: #fff;
+
+        .label {
+            width: 112px;
+            line-height: 20px;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 14px;
+            color: #333333;
+            margin-top: 10px;
+            white-space: Normal;
+        }
+    }
+}
+
 .introduce {
     background: #fff;
-    margin-top: 10px;
     padding: 0 10px;
 
     &-title {

pages/index/cloud/dataBank.vue

@@ -1,16 +1,29 @@
 <template>
     <My_listbox ref="List" @getlist="getList" :isShowEmpty="false" :bottomHeight="70">
+        <slideshow ref="slideshow" />
+
         <view class="box">
-            <navigator class="nav-box" v-for="item in appList" :key="item.name" :url="item.path"
+            <view class="head" />
+            <navigator class="nav-box" v-for="item in  appList " :key="item.name" :url="item.path"
                 hover-class="navigator-hover">
-                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
-                <text v-else>{{ item.remark }}</text>
+                <view class="classname u-line-1">
+                    {{ item.classname || '' }}
+                </view>
+                <view class="remark u-line-3">
+                    {{ item.remarks || '' }}
+                </view>
+                <view class="line" :style="{ background: item.color }" />
             </navigator>
-            <navigator class="nav-box" v-for="item in list"
+            <navigator class="nav-box" v-for="item  in  list"
                 :url="'/packageA/resourceLibrary/index?id=' + item.sat_sharematerial_classid + '&name=' + item.classname"
                 :key="item.sat_sharematerial_classid" hover-class="navigator-hover">
-                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
-                <text v-else>{{ item.classname }}</text>
+                <view class="classname u-line-1">
+                    {{ item.classname || '' }}
+                </view>
+                <view class="remark u-line-3">
+                    {{ item.remarks || '' }}
+                </view>
+                <view class="line" :style="{ background: item.color }" />
             </navigator>
         </view>
     </My_listbox>
@@ -28,19 +41,31 @@ export default {
                 "where": {
                     "isenable": 1
                 }
-            }
+            },
+            colors: ['#F9E3FF', "#FFE6E8", "#DDF3FD"],
         }
     },
     methods: {
         init(callBack) {
             try {
-                this.appList = this.getApps('资料库')
+                this.appList = this.dye(this.getApps('资料库').map(v => {
+                    v.classname = v.remark;
+                    switch (v.name) {
+                        case "affiche":
+                            v.remarks = '新品上市 / 停产 / 变更类 / 事件类'
+                            break;
+                        case "dailyYttendance":
+                            v.remarks = '效果图 / 实景图 / 产品图\n励志海报等'
+                            break;
+                    }
+                    return v
+                }), this.colors, 1)
             } catch (error) {
                 console.log("未获取到授权")
             }
-            this.getList(true).then(res => {
-                this.updatePage = false
+            Promise.all([this.getList(true), this.$refs.slideshow.getBanners(['databaseTop'])]).then(res => {
                 callBack()
+                this.updatePage = false;
             })
         },
         getList(init = false) {
@@ -54,36 +79,71 @@ export default {
                     this.$refs.List.RefreshToComplete()
                     resolve()
                     if (this.cutoff(res.msg)) return;
-                    res.data = res.data.map(v => {
-                        console.log("avatar", v.attinfos.find(s => s.usetype == "avatar"))
-                        v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "avatar")) : (uni.getStorageSync("site").logo || '');
-                        return v
-                    });
-                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+                    this.list = this.dye(res.pageNumber == 1 ? res.data : this.list.concat(res.data), this.colors, 1);
                     this.content = this.$refs.List.paging(this.content, res)
                 })
             })
         },
+
     },
 }
 </script>
 
 <style lang="scss">
 .box {
+    position: relative;
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 
+    .head {
+        position: absolute;
+        height: 10px;
+        width: 100vw;
+        border-radius: 8px 8px 0 0;
+        background: #F7F7F7;
+        top: -10px;
+        left: 0;
+        z-index: 1;
+    }
+
     .nav-box {
+        position: relative;
+        padding: 15px;
+        padding-right: 3px;
         width: 172.5px;
         height: 104px;
         flex-shrink: 0;
-        margin-top: 10px;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+        background: #fff;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .classname {
+            height: 24px;
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #333333;
+        }
+
+        .remark {
+            margin-top: 10px;
+            line-height: 17px;
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 10px;
+            color: #999999;
+            white-space: pre-wrap;
+        }
 
-        .image {
-            width: 100%;
+        .line {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4px;
             height: 100%;
         }
     }

pages/index/cloud/school.vue

@@ -1,18 +1,28 @@
 <template>
     <My_listbox ref="List" @getlist="getList" :isShowEmpty="false" :bottomHeight="70">
+        <slideshow ref="slideshow" />
         <view class="box">
+            <view class="head" />
             <navigator class="nav-box" v-for="item in list" :key="item.sat_courseware_classid"
                 :url="'/packageA/course/index?id=' + item.sat_courseware_classid + '&classname=' + item.classname"
                 hover-class="navigator-hover">
-                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
-                <text v-else>{{ item.classname }}</text>
+                <view class="classname u-line-1">
+                    {{ item.classname }}
+                </view>
+                <view class="remarks u-line-1">
+                    {{ item.remarks }}
+                </view>
+                <view class="line" :style="{ background: item.color }" />
             </navigator>
             <navigator class="nav-box" v-for="item in appList" :key="item.name" :url="item.path"
                 hover-class="navigator-hover">
-                <block v-if="item.cover">
-                    <image class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
-                </block>
-                <text v-else>{{ item.remark }}</text>
+                <view class="classname u-line-1">
+                    {{ item.classname }}
+                </view>
+                <view class="remarks u-line-1">
+                    {{ item.remarks }}
+                </view>
+                <view class="line" :style="{ background: item.color }" />
             </navigator>
         </view>
     </My_listbox>
@@ -25,6 +35,7 @@ export default {
             updatePage: true,
             list: [],
             appList: [],
+            colors: ['#FFE6E7', '#EAEAFF', '#DDF3FD'],
             "content": {
                 "parentid": 0,
                 "where": {
@@ -36,13 +47,22 @@ export default {
     methods: {
         init(callBack) {
             try {
-                this.appList = this.getApps('商学院')
+                this.appList = this.dye(this.getApps('商学院').map(v => {
+                    v.classname = v.remark;
+                    switch (v.name) {
+                        case "exam":
+                            v.remarks = 'TEST'
+                            break;
+                    }
+                    return v
+                }), this.colors)
             } catch (error) {
                 console.log("未获取到授权信息")
             }
-            this.getList().then(res => {
-                this.updatePage = false;
+
+            Promise.all([this.getList(true), this.$refs.slideshow.getBanners(['courseTop'])]).then(res => {
                 callBack()
+                this.updatePage = false;
             })
         },
         getList(init = false) {
@@ -56,11 +76,7 @@ export default {
                     this.$refs.List.RefreshToComplete()
                     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 == "avatar")) : uni.getStorageSync("site").logo || '';
-                        return v
-                    });
-                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+                    this.list = this.dye(res.pageNumber == 1 ? res.data : this.list.concat(res.data), this.colors);
                     this.content = this.$refs.List.paging(this.content, res)
                 })
             })
@@ -71,21 +87,54 @@ export default {
 
 <style lang="scss">
 .box {
+    position: relative;
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 
+    .head {
+        position: absolute;
+        height: 10px;
+        width: 100vw;
+        border-radius: 8px 8px 0 0;
+        background: #F7F7F7;
+        top: -10px;
+        left: 0;
+        z-index: 1;
+    }
+
     .nav-box {
         width: 172.5px;
         height: 92px;
         flex-shrink: 0;
-        margin-top: 10px;
+        margin-bottom: 10px;
+        background: #fff;
+        padding: 15px;
+        border-radius: 8px;
+        box-sizing: border-box;
+
+        .classname {
+            line-height: 24px;
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #333333;
+        }
+
+        .remarks {
+            line-height: 15px;
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 10px;
+            color: #999999;
+            margin-top: 10px;
+        }
 
-        .image {
-            width: 100%;
-            height: 100%;
+        .line {
+            width: 32px;
+            height: 3px;
+            margin-top: 10px;
         }
     }
 }

pages/index/index/modules/apps.vue

@@ -66,10 +66,16 @@ export default {
                 label: "云C+工作台",
                 introduce: "预约名单 / 人员管理 / 活动 \n门店 / 商城管理 / 排行榜等",
             }],
+            colors: ['linear-gradient( 270deg, rgba(255,255,255,0) 0%, #E18FFA 100%)',
+                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FD8C90 100%)",
+                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #9191FA 100%)",
+                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #8CD6F7 100%)",
+                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #5CD96B 100%)",
+                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #D4D418 100%)"],
         }
     },
     created() {
-        this.dye(this.list)
+        this.list = this.dye(this.list, this.colors, 2)
     },
     methods: {
         onClick(item) {
@@ -85,24 +91,6 @@ export default {
                     icon: "none"
                 })
             }
-        },
-        dye(list, num = 2) {
-            let colors = ['linear-gradient( 270deg, rgba(255,255,255,0) 0%, #E18FFA 100%)',
-                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FD8C90 100%)",
-                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #9191FA 100%)",
-                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #8CD6F7 100%)",
-                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #5CD96B 100%)",
-                "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #D4D418 100%)"],
-                count = num - 1,
-                index = 0;
-            this.list = list.map((v, i) => {
-                if (i > count) {
-                    count += num;
-                    index += 1;
-                }
-                v.color = colors[index % colors.length]
-                return v
-            })
         }
     },
 }

utils/tool.js

@@ -173,7 +173,18 @@ function mount() {
                 console.log('makePhoneCall', res)
             }
         })
-
+    }
+    Vue.prototype.dye = (list, colors, num = 2) => {
+        let count = num - 1,
+            index = 0;
+        return list.map((v, i) => {
+            if (i > count) {
+                count += num;
+                index += 1;
+            }
+            v.color = colors[index % colors.length]
+            return v
+        })
     }
 }