0113

.env.development

@@ -1,3 +1,3 @@
-VUE_APP_BASE_URL=https://www.imttech.cn
+VUE_APP_BASE_URL=http://localhost:8080
 VUE_APP_PHONE=862160797117
 VUE_APP_EMAIL=imttech@itoc.com.cn

project.config.json

@@ -63,8 +63,8 @@
             "list": [
                 {
                     "id": -1,
-                    "name": "我的",
-                    "pathName": "pages/My",
+                    "name": "消息",
+                    "pathName": "pages/Chat",
                     "scene": null
                 },
                 {

src/pages/Chat.vue

@@ -9,8 +9,23 @@
         <member :info="emailInfo" type="system" />
         <member :info="adminInfo" type="admin" />
         <van-divider />
+
         <block v-for="item in showList" :key="item.otherUserId">
-            <member :info="item"></member>
+            <movable-area class="move-area">
+                <movable-view
+                    direction="horizontal"
+                    @touchstart="touchStartEvent($event, item.otherUserId)"
+                    @change="touchMoveEvent($event, item.otherUserId)"
+                    @touchend="touchEndEvent($event, item.otherUserId)"
+                    :x="moveInfo[item.otherUserId]"
+                    class="move-view"
+                    out-of-bounds
+                    inertia
+                >
+                    <member :info="item"></member>
+                    <div class="del">删除</div>
+                </movable-view>
+            </movable-area>
         </block>
     </div>
 </template>
@@ -21,7 +36,11 @@ export default {
     components: { Member },
     data() {
         return {
-            adminId: 0
+            adminId: 0,
+            timeChange: null,
+            touchMap: new Map(),
+            moveInfo: {},
+            moveX: 60
         };
     },
     computed: {
@@ -34,9 +53,21 @@ export default {
             );
         },
         showList() {
-            return [...this.messageList].filter(item => {
-                return item.otherUserId !== this.adminId;
-            });
+            return [...this.messageList]
+                .filter(item => {
+                    return item.otherUserId !== this.adminId;
+                })
+                .map(item => {
+                    return {
+                        ...item,
+                        x: 60
+                    };
+                });
+        }
+    },
+    watch: {
+        showList() {
+            this.setMove();
         }
     },
     onLoad() {
@@ -48,6 +79,7 @@ export default {
         });
     },
     onShow() {
+        this.setMove();
         const app = getApp();
         if (app.globalData.initialize) {
             this.loginMethods();
@@ -58,8 +90,37 @@ export default {
         }
     },
     methods: {
+        setMove() {
+            const info = {};
+            [...this.showList].forEach(item => {
+                info[item.otherUserId] = 60;
+            });
+            this.moveInfo = {
+                ...info
+            };
+        },
         loginMethods() {
             this.$store.dispatch('getUnreadNumber');
+        },
+        touchStartEvent(e, id) {
+            this.setMove();
+            this.touchMap.set(id, {
+                startX: e.changedTouches[0].clientX
+            });
+        },
+        touchEndEvent(e, id) {
+            if (this.touchMap.has(id)) {
+                const touchInfo = this.touchMap.get(id);
+                this.moveX = e.changedTouches[0].clientX < touchInfo.startX ? 0 : 60;
+
+                this.moveInfo[id] = e.changedTouches[0].clientX < touchInfo.startX ? 0 : 60;
+            }
+        },
+        touchMoveEvent(e, id) {
+            this.touchMap.set(id, {
+                ...this.touchMap.get(id),
+                ...e.detail
+            });
         }
     },
     onShareAppMessage(from, target) {
@@ -74,4 +135,40 @@ export default {
     height: 5px;
     background-color: @bg;
 }
+
+.move-area {
+    width: calc(100vw + 120px);
+    height: 80px;
+    transform: translateX(-60px);
+    background-color: @bg;
+    // display: flex;
+}
+.move-view {
+    width: calc(100vw + 60px);
+    height: 80px;
+    display: flex;
+    background-color: #fff;
+
+    .del {
+        width: 60px;
+        height: 80px;
+        background-color: #ee0a24;
+        color: #fff;
+        flex-shrink: 0;
+        font-size: 12px;
+        text-align: center;
+        line-height: 80px;
+
+        &:active {
+            background-color: #ee0a2480;
+        }
+    }
+
+    .message {
+        width: 100vw;
+        flex-shrink: 0;
+        height: 80px;
+        box-sizing: border-box;
+    }
+}
 </style>

src/pagesProduct/Detail.vue

@@ -58,12 +58,7 @@
                             v-if="productInfo.averageLeadTime"
                             :value="productInfo.averageLeadTime"
                         />
-                        <van-cell
-                            title="产品产地"
-                            v-if="productInfo.origin"
-                            :border="false"
-                            :value="productInfo.origin"
-                        />
+                        <van-cell title="产品产地" v-if="origin" :border="false" :value="origin" />
                         <van-cell title="应用领域" :border="false" :value="applicationField" />
                         <van-cell title="产品标签" :border="false">
                             <div>
@@ -213,6 +208,17 @@ export default {
     mixins: [collection],
     computed: {
         ...mapState(['intentionList', 'barHeight']),
+        origin() {
+            return (
+                [...(this.productInfo.origin1 || [])]
+                    .map(item => {
+                        return this.getName(item);
+                    })
+                    .join('、') ||
+                this.productInfo.origin ||
+                ''
+            );
+        },
         banners() {
             let list = [];
             if (this.productInfo.img) {
@@ -497,8 +503,6 @@ export default {
 };
 </script>
 <style lang="less">
-.van-cell {
-}
 .main {
     .tips {
         font-size: 14px;

src/pagesVendor/Detail.vue

@@ -22,11 +22,11 @@
             id="scroller"
             @scroll="onScroll"
             :style="{ height: `calc(100vh - ${barHeight}px)` }"
-            scroll-y
+            :scroll-y="mainScroll"
             class="scrollView"
             efresher-background="#0F264D"
-            scroll-anchoring
             :scroll-into-view="scrollId"
+            scroll-anchoring
         >
             <div class="vendor" id="vendor">
                 <van-image :radius="4" :src="vendorInfo.logo" fit="cover" :width="60" :height="60" />
@@ -69,6 +69,8 @@
                     :vendorInfo="vendorInfo"
                     :fixedTop="headerTop"
                     :scrollEnabled="scrollEnabled"
+                    @changeMainScroll="changeMainScroll"
+                    @goTop="goTop"
                 ></product>
                 <news v-else-if="active === 2" :vendorInfo="vendorInfo"></news>
             </div>
@@ -120,7 +122,8 @@ export default {
             offsetTop: 0,
             scrollId: '',
             scrollEnabled: false,
-            headerTop: 0
+            headerTop: 0,
+            mainScroll: true
         };
     },
     computed: {
@@ -151,7 +154,9 @@ export default {
             } else {
                 this.showConnect = true;
             }
-            if (event.detail.scrollTop < this.offsetTop - 44) {
+
+            this.changeMainScroll(true);
+            if (event.detail.scrollTop < this.headerTop) {
                 this.scrollEnabled = false;
             } else {
                 this.scrollEnabled = true;
@@ -159,6 +164,18 @@ export default {
         },
         changeActive(index) {
             this.active = index;
+        },
+        changeMainScroll(val) {
+            this.mainScroll = val;
+        },
+        goTop() {
+            console.log('goTop');
+            setTimeout(() => {
+                this.scrollId = 'top';
+                setTimeout(() => {
+                    this.scrollId = '';
+                }, 200);
+            }, 100);
         }
     },
     onLoad(options) {
@@ -211,12 +228,7 @@ export default {
     },
     watch: {
         active() {
-            setTimeout(() => {
-                this.scrollId = 'top';
-                setTimeout(() => {
-                    this.scrollId = '';
-                }, 200);
-            }, 100);
+            this.goTop();
         }
     }
 };

src/pagesVendor/Product.vue

@@ -2,20 +2,39 @@
     <div class="productPage" :style="{ minHeight: ` calc( 100vh - ${fixedTop}px - ${barHeight}px + 44px )` }">
         <scroll-view
             :style="{ height: `calc( 100vh - ${fixedTop}px - ${barHeight}px  + 44px )` }"
-            :scroll-y="scrollEnabled"
+            scroll-y
             class="left-side"
             v-if="menus.length > 0"
+            :scroll-into-view="scrollId"
         >
-            <van-sidebar :active-key="activeKey" @change="changeCustomCate">
-                <van-sidebar-item title="全部产品" />
-                <van-sidebar-item :title="getName(item)" :key="item.id" v-for="item in menus" />
-            </van-sidebar>
+            <!-- <van-sidebar :active-key="activeKey" @change="changeCustomCate">
+                <van-sidebar-item title="全部产品" id="cate_0" />
+                <van-sidebar-item :title="getName(item)" :id="`cate_${item.id}`" :key="item.id" v-for="item in menus" />
+            </van-sidebar> -->
+
+            <div class="left-side-item" :class="{ active: activeKey === 0 }" id="cate_0" @click="changeCustomCate(0)">
+                全部产品
+            </div>
+
+            <div
+                class="left-side-item"
+                :class="{ active: activeKey === item.id }"
+                @click="changeCustomCate(item.id)"
+                :id="`cate_${item.id}`"
+                :key="item.id"
+                v-for="item in menus"
+            >
+                {{ getName(item) }}
+            </div>
         </scroll-view>
         <scroll-view
             :style="{ height: `calc( 100vh - ${fixedTop}px - ${barHeight}px + 44px )` }"
             :scroll-y="scrollEnabled"
             class="right-side"
+            scroll-anchoring
             @scrolltolower="getMore"
+            @scrolltoupper="changeScroll"
+            @scroll="scrollEvent($event, 'right')"
         >
             <div class="right">
                 <sort-list :empty="empty" :loading="loading" :finish="finish" :top="`${fixedTop}px`">
@@ -39,7 +58,8 @@ export default {
             menus: [],
             activeKey: 0,
             url: '/product/show',
-            searchTop: -1
+            searchTop: -1,
+            scrollId: ''
         };
     },
     mixins: [searchList],
@@ -64,7 +84,7 @@ export default {
         listQuery() {
             return {
                 productSort: this.sort,
-                customCateId: this.customCateId,
+                customCateId: this.activeKey || '',
                 query: JSON.stringify({
                     vendorInfoId: this.vendorInfo.id
                 })
@@ -92,8 +112,14 @@ export default {
             });
     },
     methods: {
-        changeCustomCate(e) {
-            this.activeKey = e.detail;
+        changeCustomCate(id) {
+            this.$emit('goTop');
+            this.activeKey = id;
+            this.scrollId = 'cate_' + id;
+            setTimeout(() => {
+                this.scrollId = '';
+            }, 200);
+
             this.refreash();
         },
         getMore() {
@@ -101,6 +127,23 @@ export default {
                 this.page++;
                 this.getData();
             }
+        },
+        changeScroll() {
+            this.$emit('changeMainScroll', true);
+        },
+        scrollEvent(event, type = 'left') {
+            if (event.detail.scrollTop > 0) {
+                this.$emit('changeMainScroll', false);
+            } else {
+                this.$emit('changeMainScroll', true);
+            }
+
+            if (type === 'right') {
+                this.scrollId = 'cate_' + this.activeKey;
+                setTimeout(() => {
+                    this.scrollId = '';
+                }, 200);
+            }
         }
     },
     components: {
@@ -117,9 +160,6 @@ export default {
 }
 .left-side {
     width: 121px;
-    --sidebar-padding: 20px;
-    --sidebar-selected-border-color: transparent;
-    --sidebar-selected-font-weight: bolder;
     background: @bg;
     flex-shrink: 0;
     position: sticky;
@@ -128,6 +168,30 @@ export default {
         width: 121px;
     }
 
+    .left-side-item {
+        padding: 20px 20px;
+        font-size: 14px;
+        color: #000000;
+        line-height: 20px;
+
+        &.active {
+            color: #ffa526;
+            font-weight: bold;
+            background: #fff;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 12px;
+                top: 20px;
+                bottom: 20px;
+                width: 2px;
+                background-color: #ffa526;
+            }
+        }
+    }
+
     .van-sidebar-item--selected {
         position: relative;
         &::before {