510

src/components/SeriesSelect.vue

@@ -10,61 +10,55 @@ export default {
         value: {
             type: Number,
             default: 0
+        },
+        isSeries: {
+            type: Boolean,
+            default: false
+        },
+        seriesId: {
+            type: Number,
+            default: 0
         }
     },
     data() {
         return {
             show: false,
-            serieses: [],
-            collections: [],
-            chooseSeriesId: 0
+            columns: []
         };
     },
-    computed: {
-        columns() {
-            if (this.chooseSeriesId) {
-                return [...this.collections];
-            } else {
-                return [...this.serieses];
-            }
-        }
-    },
-    mounted() {
-        this.$http
-            .post(
-                '/series/all',
-                {
-                    page: 0,
-                    size: 100
-                },
-                {
-                    header: {
-                        'Content-Type': 'application/json'
-                    }
-                }
-            )
-            .then(res => {
-                this.serieses = res.content;
-            });
-    },
     methods: {
-        confirm(e) {
-            console.log(e);
-            if (!this.chooseSeriesId) {
-                this.chooseSeriesId = e.detail.value.id;
-                this.findBySeriesId(e.detail.value.id);
+        init() {
+            this.columns = [];
+            if (this.isSeries) {
+                this.$http
+                    .post(
+                        '/series/all',
+                        {
+                            page: 0,
+                            size: 100
+                        },
+                        {
+                            header: {
+                                'Content-Type': 'application/json'
+                            }
+                        }
+                    )
+                    .then(res => {
+                        this.columns = res.content;
+                    });
             } else {
-                this.$emit('update:name', e.detail.value.name);
-                this.$emit('input', e.detail.value.id);
-                this.show = false;
+                this.findBySeriesId(this.seriesId);
             }
+
+            this.show = true;
+        },
+        confirm(e) {
+            this.$emit('update:name', e.detail.value.name);
+            this.$emit('input', e.detail.value.id);
+            this.show = false;
         },
         cancel() {
-            if (this.chooseSeriesId) {
-                this.chooseSeriesId = 0;
-            } else {
-                this.show = false;
-            }
+            this.show = false;
         },
         findBySeriesId(id) {
             this.$http
@@ -72,7 +66,7 @@ export default {
                     seriesId: id
                 })
                 .then(res => {
-                    this.collections = res;
+                    this.columns = res;
                 });
         }
     }

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/Home.vue

@@ -10,9 +10,9 @@
         <van-sticky>
             <div class="container-bg">
                 <div class="mytest"><img class="mytest" src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
-                <span>游戏王OCG</span>
+                <span>{{ seriesName }}</span>
                 <div class="box-top">
-                    <div class="box-img">
+                    <div class="box-img" @click="showSeries('series')">
                         <p class="box-top-img"><img src="../static/imgs/home_icon_qihuan@3x.png" alt="" /></p>
                         <p class="box-top-sp">切换卡片</p>
                     </div>
@@ -27,7 +27,7 @@
                         clearable
                         placeholder="搜索拼箱..."
                     />
-                    <div class="scan" @click="showSeries">
+                    <div class="scan" @click="showSeries('collectId')">
                         <van-icon size="16" :color="$colors.prim" name="liebiao" class-prefix="iconfont" />
                     </div>
                 </div>
@@ -58,8 +58,13 @@
             >
             </van-empty>
         </div>
-
-        <series-select ref="series" v-model="collectionId" :name.sync="searchVal" @input="getData"></series-select>
+        <series-select
+            ref="series"
+            :isSeries="isSeries"
+            :seriesId="seriesId"
+            :name.sync="selectName"
+            @input="changeSelect"
+        ></series-select>
     </div>
 </template>
 
@@ -73,15 +78,42 @@ export default {
     data() {
         return {
             searchVal: '',
+            selectName: '',
             search: '',
             active: '进行中',
             list: [],
             tabs: ['进行中', '已完成', '已过期'],
             empty: false,
-            collectionId: 0
+            collectionId: 0,
+            seriesId: 0,
+            seriesName: '',
+            isSeries: true
         };
     },
     methods: {
+        getSeries() {
+            return this.$http
+                .post(
+                    '/series/all',
+                    {
+                        page: 0,
+                        size: 1
+                    },
+                    {
+                        header: {
+                            'Content-Type': 'application/json'
+                        }
+                    }
+                )
+                .then(res => {
+                    if (!this.empty) {
+                        this.seriesId = res.content[0].id;
+                        this.seriesName = res.content[0].name;
+                    }
+
+                    return Promise.resolve();
+                });
+        },
         chageData(name) {
             this.active = name;
             this.getData();
@@ -93,6 +125,9 @@ export default {
             let data = {
                 caseStatus: this.getStatus(this.active)
             };
+            if (this.seriesId) {
+                data.seriesId = this.seriesId;
+            }
 
             if (this.collectionId) {
                 data.collectionId = this.collectionId;
@@ -128,13 +163,35 @@ export default {
             this.search = '';
             this.getData();
         },
-        showSeries() {
+        showSeries(type = 'series') {
+            if (type === 'series') {
+                this.isSeries = true;
+            } else {
+                this.isSeries = false;
+            }
             this.search = '';
-            this.$refs.series.show = true;
+            this.$nextTick(() => {
+                this.$refs.series.init();
+            });
+        },
+        changeSelect(id) {
+            if (this.isSeries) {
+                this.seriesId = id;
+                this.seriesName = this.selectName;
+                this.collectionId = 0;
+                this.searchVal = '';
+            } else {
+                this.collectionId = id;
+                this.searchVal = this.selectName;
+            }
+
+            this.getData();
         }
     },
     onLoad() {
-        this.getData();
+        this.getSeries().then(() => {
+            this.getData();
+        });
     }
 };
 </script>

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;
+}