Browse Source

修复年代和类型显示bug

shaogen1995 3 years ago
parent
commit
3de2199d21
2 changed files with 124 additions and 115 deletions
  1. 36 35
      src/pages/collection/collection-detail.vue
  2. 88 80
      src/pages/collection/collection-type.vue

+ 36 - 35
src/pages/collection/collection-detail.vue

@@ -69,8 +69,8 @@
                 </div>
                 </div>
                 <div class="detail-title">{{ detail.name }}</div>
                 <div class="detail-title">{{ detail.name }}</div>
                 <div class="detail-desc">
                 <div class="detail-desc">
-                  <span>年代:&nbsp;{{ detail.age }}&nbsp;&nbsp;</span>
-                  <span>分类:&nbsp;{{ detail.goodsTypeId }}</span>
+                  <span>年代:&nbsp;{{ detail.myage }}&nbsp;&nbsp;</span>
+                  <span>分类:&nbsp;{{ detail.classify }}</span>
                 </div>
                 </div>
                 <div class="detail-con" v-html="detail.description"></div>
                 <div class="detail-con" v-html="detail.description"></div>
               </div>
               </div>
@@ -83,50 +83,51 @@
 </template>
 </template>
 
 
 <script>
 <script>
-//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
-//例如:import 《组件名称》 from '《组件路径》';
+// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+// 例如:import 《组件名称》 from '《组件路径》';
 export default {
 export default {
-  name: "collection-detail",
-  //import引入的组件需要注入到对象中才能使用
+  name: 'collection-detail',
+  // import引入的组件需要注入到对象中才能使用
   components: {},
   components: {},
-  data() {
-    //这里存放数据
+  data () {
+    // 这里存放数据
     return {
     return {
-      collectionType: "boutique",
-      detail: {},
-    };
+      collectionType: 'boutique',
+      detail: {}
+    }
   },
   },
-  //监听属性 类似于data概念
+  // 监听属性 类似于data概念
   computed: {},
   computed: {},
-  //监控data中的数据变化
+  // 监控data中的数据变化
   watch: {},
   watch: {},
-  //方法集合
+  // 方法集合
   methods: {
   methods: {
-    switchType(type) {
-      this.$router.push({ path: "/collection-type", query: { type } });
+    switchType (type) {
+      this.$router.push({ path: '/collection-type', query: { type } })
     },
     },
-    back() {
+    back () {
       this.$router.push({
       this.$router.push({
-        path: "/collection-type",
-        query: { type: this.detail.navType || "" },
-      });
-    },
+        path: '/collection-type',
+        query: { type: this.detail.navType || '' }
+      })
+    }
   },
   },
-  //生命周期 - 创建完成(可以访问当前this实例)
-  created() {
-    this.detail = this.$route.query;
-    this.collectionType = this.detail.navType;
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
+    console.log(77777, this.$route.query)
+    this.detail = this.$route.query
+    this.collectionType = this.detail.navType
   },
   },
-  //生命周期 - 挂载完成(可以访问DOM元素)
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
-};
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
 </script>
 </script>
 <style lang='less' scoped>
 <style lang='less' scoped>
 .bg {
 .bg {

+ 88 - 80
src/pages/collection/collection-type.vue

@@ -123,130 +123,138 @@
 </template>
 </template>
 
 
 <script>
 <script>
-//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
-//例如:import 《组件名称》 from '《组件路径》';
-import Paging from "@/components/pagination";
+// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+// 例如:import 《组件名称》 from '《组件路径》';
+import Paging from '@/components/pagination'
 export default {
 export default {
-  name: "collection-type",
-  //import引入的组件需要注入到对象中才能使用
+  name: 'collection-type',
+  // import引入的组件需要注入到对象中才能使用
   components: {
   components: {
-    Paging,
+    Paging
   },
   },
-  data() {
-    //这里存放数据
+  data () {
+    // 这里存放数据
     return {
     return {
-      collectionType: "boutique",
+      collectionType: 'boutique',
       dataList: [],
       dataList: [],
       paging: {
       paging: {
         pageSize: 12,
         pageSize: 12,
         pageNum: 1,
         pageNum: 1,
         total: 0,
         total: 0,
         showSize: 12,
         showSize: 12,
-        current: 1,
+        current: 1
       },
       },
       params: {
       params: {
         pageNum: 1,
         pageNum: 1,
         pageSize: 12,
         pageSize: 12,
-        type: "",
-        goodsAgeId: "",
-        goodsTypeId: "",
-        searchKey:""
+        type: '',
+        goodsAgeId: '',
+        goodsTypeId: '',
+        searchKey: ''
       },
       },
       typeChange: {
       typeChange: {
-        boutique: "img",
-        threeDimensional: "model",
+        boutique: 'img',
+        threeDimensional: 'model'
       },
       },
-      getGoodAgeList:[],
-      getGoodTypeList:[]
-    };
+      getGoodAgeList: [],
+      getGoodTypeList: []
+    }
   },
   },
-  //监听属性 类似于data概念
+  // 监听属性 类似于data概念
   computed: {},
   computed: {},
-  //监控data中的数据变化
+  // 监控data中的数据变化
   watch: {
   watch: {
     paging: {
     paging: {
       deep: true,
       deep: true,
-      handler: function () {},
-    },
+      handler: function () {}
+    }
   },
   },
-  //方法集合
+  // 方法集合
   methods: {
   methods: {
-    async getList(reload=false) {
-      if(reload){
-        this.dataList = [];
-        this.params.pageNum = 1;
+    async getList (reload = false) {
+      if (reload) {
+        this.dataList = []
+        this.params.pageNum = 1
       }
       }
       let result = await this.$http({
       let result = await this.$http({
-        method: "post",
-        url: "/api/web/goods/list",
-        data: this.params,
-      });
-      this.dataList = result.data.list;
-      this.paging.total = result.data.total;
+        method: 'post',
+        url: '/api/web/goods/list',
+        data: this.params
+      })
+      this.dataList = result.data.list
+      this.paging.total = result.data.total
     },
     },
-    switchType(type) {
-      this.collectionType = type;
-      this.params["type"] = this.typeChange[this.collectionType];
-      this.params["pageNum"] = 1;
-      this.paging.current = 1;
-      this.getList();
+    switchType (type) {
+      this.collectionType = type
+      this.params['type'] = this.typeChange[this.collectionType]
+      this.params['pageNum'] = 1
+      this.paging.current = 1
+      this.getList()
     },
     },
-    back() {
-      this.$router.push({ path: "/collection" });
+    back () {
+      this.$router.push({ path: '/collection' })
     },
     },
-    pageChange(val) {
-      console.log(val);
-      this.paging.current = val;
-      this.params.pageNum = val;
-      this.getList();
+    pageChange (val) {
+      console.log(val)
+      this.paging.current = val
+      this.params.pageNum = val
+      this.getList()
     },
     },
-    toDetail(item) {
+    toDetail (item) {
+      let classify, myage
+      this.getGoodAgeList.forEach(v => {
+        if (v.id === item.goodsAgeId) myage = v.name
+      })
+      this.getGoodTypeList.forEach(v => {
+        if (v.id === item.goodsTypeId) classify = v.name
+      })
+
       this.$router.push({
       this.$router.push({
-        path: "/collection-detail",
-        query: { ...item, navType: this.collectionType },
-      });
+        path: '/collection-detail',
+        query: { ...item, navType: this.collectionType, classify, myage }
+      })
     },
     },
-    search() {
-      console.log(this.params);
-      this.getList(true);
+    search () {
+      console.log(this.params)
+      this.getList(true)
     },
     },
-    async getGoodAge(){
+    async getGoodAge () {
       let result = await this.$http({
       let result = await this.$http({
-        method: "get",
-        url: "/api/web/goods/age/list",
-        data: this.params,
-      });
+        method: 'get',
+        url: '/api/web/goods/age/list',
+        data: this.params
+      })
       this.getGoodAgeList = result && result['code'] === 0 && result['data']
       this.getGoodAgeList = result && result['code'] === 0 && result['data']
-      console.log('this.getGoodAgeList',this.getGoodAgeList)
+      console.log('this.getGoodAgeList', this.getGoodAgeList)
     },
     },
-    async getGoodType(){
+    async getGoodType () {
       let result = await this.$http({
       let result = await this.$http({
-        method: "get",
-        url: "/api/web/goods/type/list",
-        data: this.params,
-      });
+        method: 'get',
+        url: '/api/web/goods/type/list',
+        data: this.params
+      })
       this.getGoodTypeList = result && result['code'] === 0 && result['data']
       this.getGoodTypeList = result && result['code'] === 0 && result['data']
     }
     }
   },
   },
-  //生命周期 - 创建完成(可以访问当前this实例)
-  created() {
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
     this.collectionType =
     this.collectionType =
-      (this.$route.query && this.$route.query["type"]) || "boutique";
-    this.params["type"] = this.typeChange[this.collectionType];
-    this.getList();
+      (this.$route.query && this.$route.query['type']) || 'boutique'
+    this.params['type'] = this.typeChange[this.collectionType]
+    this.getList()
     this.getGoodAge()
     this.getGoodAge()
     this.getGoodType()
     this.getGoodType()
   },
   },
-  //生命周期 - 挂载完成(可以访问DOM元素)
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
-};
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
 </script>
 </script>
 <style lang='less' scoped>
 <style lang='less' scoped>
 .bg {
 .bg {