关注&客服

src/mixins/collection.js

@@ -0,0 +1,52 @@
+export default {
+    data() {
+        return {
+            caseId: 0,
+            cartId: 0,
+            isCollection: false,
+            animate: false
+        };
+    },
+    methods: {
+        collect() {
+            let data = {};
+            if (this.isCollection) {
+                data.cartId = this.cartId;
+            } else {
+                data.caseId = this.caseId;
+            }
+            this.animate = true;
+            setTimeout(() => {
+                this.animate = false;
+            }, 1000);
+            this.$http.post(this.isCollection ? '/cart/remove' : '/cart/add', data).then(res => {
+                this.toast(this.isCollection ? '取消成功' : '关注成功', 'success');
+                this.checkCollect();
+            });
+        },
+        checkCollect() {
+            this.$http
+                .post(
+                    '/cart/all',
+                    {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            caseId: this.caseId,
+                            del: false
+                        }
+                    },
+                    {
+                        header: {
+                            'Content-Type': 'application/json'
+                        }
+                    }
+                )
+                .then(res => {
+                    this.isCollection = !res.empty;
+                    if (!res.empty) {
+                        this.cartId = res.content[0].id;
+                    }
+                });
+        }
+    }
+};

src/pages/details.vue

@@ -75,13 +75,19 @@
             ></card-case>
             <div class="box-footer-con">
                 <div class="box-footer-left">
-                    <div>
+                    <div class="contact">
                         <img src="../static/imgs/icon_kefu@3x.png" alt="" />
                         <p>客服</p>
+                        <button open-type="contact" />
                     </div>
-                    <div class="box-follow" @click="follows">
-                        <img src="../static/imgs/icon_guanzhu@3x.png" alt="" />
-                        <p>关注</p>
+                    <div class="box-follow" :class="{ active: isCollection }" @click="collect">
+                        <van-icon
+                            :custom-class="animate ? 'iconAnimate' : ''"
+                            :name="`like${isCollection ? '' : '-o'}`"
+                            :size="24"
+                            :color="isCollection ? $colors.prim : '#000'"
+                        />
+                        <p>{{ isCollection ? '已关注' : '关注' }}</p>
                     </div>
                 </div>
                 <div class="box-footer-right">
@@ -93,7 +99,9 @@
 </template>
 <script>
 import CardCase from '../components/CardCase';
+import collection from '../mixins/collection';
 export default {
+    mixins: [collection],
     data() {
         return {
             show: false,
@@ -131,6 +139,12 @@ export default {
                 this.cardCaseInfo = res.cardCaseInfo || {};
                 // this.list = res.cardCaseInfo;
             });
+        },
+        loginMethods() {
+            this.caseId = this.$mp.options.id;
+            this.$nextTick(() => {
+                this.checkCollect();
+            });
         }
     },
     created() {
@@ -375,9 +389,28 @@ export default {
                     font-weight: 400;
                     color: #1a1a1a;
                     line-height: 14px;
+                    white-space: nowrap;
                 }
                 .box-follow {
                     margin-left: 30px;
+
+                    &.active {
+                        p {
+                            color: @prim;
+                        }
+                    }
+                }
+
+                .contact {
+                    position: relative;
+                    button {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        opacity: 0;
+                    }
                 }
             }
             .box-footer-right {

src/styles/common.less

@@ -42,3 +42,27 @@
     padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
     padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
 }
+
+@keyframes iconAnimate {
+    from {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    20% {
+        -webkit-transform: scale(0.8);
+        transform: scale(0.8);
+    }
+
+    80% {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+    }
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+.iconAnimate {
+    animation: iconAnimate ease-in-out 0.3s;
+}