列表接口

src/config/request/apiList/plm/index.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-14 11:42:25
+ * @LastEditTime: 2022-01-14 13:56:35
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/config/request/apiList/plm/index.js
+ */
 
 import stylelibraryorder from './stylelibraryorder/index'
 import modelingtask from './modelingtask'
+import mobileBrand from './mobileBrand'
 export default {
     ...stylelibraryorder,
-    ...modelingtask
+    ...modelingtask,
+    ...mobileBrand
 }

src/config/request/apiList/plm/mobileBrand/index.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-14 13:55:11
+ * @LastEditTime: 2022-01-14 16:50:17
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/config/request/apiList/plm/mobileBrand/index.js
+ */
+
+import config from "../config/index";
+let className = 'mobileBrand'
+let baseUrl = `${config.baseUrl}/${className}`
+export default {
+    [className]:{
+        'dailyNewStylePage': {
+            url: `${baseUrl}/dailyNewStylePage`,
+            method: "post",
+        },
+        'stylePage': {
+            url: `${baseUrl}/stylePage`,
+            method: "post",
+        },
+        'styleDetail': {
+            url: `${baseUrl}/styleDetail`,
+            method: "get",
+        },
+    }
+}
\ No newline at end of file

src/pages/brands/brands.vue

@@ -6,13 +6,9 @@
       <u-navbar title="" :border-bottom="false" :background="background">
         <template slot="right">
           <!-- 插槽搜索按钮 -->
-          <view @click="searchCli" class="u-m-r-24 search"
-            ><image
-              class="hs-img"
-              src="../../static/images/home/search@2x.png"
-              mode=""
-            ></image
-          ></view>
+          <view @click="searchCli" class="u-m-r-24 search">
+            <image class="hs-img" src="../../static/images/home/search@2x.png" mode=""></image>
+          </view>
         </template>
       </u-navbar>
     </view>
@@ -24,13 +20,16 @@
         </view>
         <view slot="body">
           <view class="imgList">
+            <image v-for="item,index in dailyNewStyleList" :key="index" :src="`${imgUrl}${item.originalImageCode}`"
+              mode=""></image>
+            <!-- 
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
-            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
+            <image src="../../static/images/brank/mei1.jpg" mode=""></image> -->
           </view>
         </view>
       </u-card>
@@ -43,10 +42,10 @@
         </view>
         <view slot="body">
           <view class="hotFlex">
+            <hot-style v-if="hotStylePage.records.length>0" :recordsList="hotStylePage.records"></hot-style>
+            <!-- <hot-style></hot-style>
             <hot-style></hot-style>
-            <hot-style></hot-style>
-            <hot-style></hot-style>
-            <hot-style></hot-style>
+            <hot-style></hot-style> -->
           </view>
         </view>
       </u-card>
@@ -55,15 +54,28 @@
 </template>
 
 <script>
-import headTitle from "./components/header"; //每日更新头部的东西
-import hotStyle from "./components/hotStyle"; //热门款式
-export default {
-  components: { headTitle, hotStyle },
+  import headTitle from "./components/header"; //每日更新头部的东西
+  import hotStyle from "./components/hotStyle"; //热门款式
+  export default {
+    components: {
+      headTitle,
+      hotStyle
+    },
     data() {
       return {
-      background: { backgroundColor: "rgba(245,245,245,0)" },
+        fabricObj: "",
+        dailyNewStyleList: [],
+        hotStylePage: [],
+        imgUrl: this.$IMG_URL, // 上传地址
+        background: {
+          backgroundColor: "rgba(245,245,245,0)"
+        },
       };
     },
+    created() {
+      console.log("ces");
+      this.getList()
+    },
     methods: {
       // 搜索按钮
       searchCli() {
@@ -71,29 +83,51 @@ export default {
       },
       headTab() {
         this.$router.push("pages/brands/everyDay");
+        // this.$router.push("pages/brands/detail");
       },
+      getList() {
+        let param = {
+          "current": 1,
+          "size": 10,
+          "styleTag": ""
+        }
+        this.$http('mobileBrand.stylePage', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+            this.dailyNewStyleList = data.dailyNewStyleList;
+            this.hotStylePage = data.hotStylePage;
+          }
+        });
+      }
     },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-//头部
-.back_img {
+  //头部
+  .back_img {
     height: 486rpx;
     width: 100%;
     background: url(../../static/images/home/exhibition.png) no-repeat;
     background-size: 100% 100%;
-}
-.search {
+  }
+
+  .search {
     width: 60rpx;
     height: 60rpx;
-}
-//每日更新
-.everyUpdate {
+  }
+
+  //每日更新
+  .everyUpdate {
     width: 100%;
+
     ::v-deep .u-card__body {
       padding: 0rpx 0rpx 40rpx 36rpx !important;
     }
+
     ::v-deep .u-card__head {
       padding-bottom: 34rpx !important;
     }
@@ -101,6 +135,8 @@ export default {
     .imgList {
       overflow-x: auto;
       white-space: nowrap;
+      display: flex;
+
       image {
         width: 240rpx;
         height: 160rpx;
@@ -108,20 +144,24 @@ export default {
         padding-left: 20.3rpx;
       }
     }
-}
-//热门款式
-.hotstyle {
+  }
+
+  //热门款式
+  .hotstyle {
     ::v-deep .u-card__body {
       padding-top: 24rpx !important;
     }
+
     ::v-deep .u-card__head {
       padding-bottom: 0rpx !important;
     }
+
     width: 100%;
+
     .hotFlex {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
     }
-}
+  }
 </style>
\ No newline at end of file

src/pages/brands/components/hotStyle.vue

 <template>
-  <view class="hots">
-    <image
-      @click="tabdetail"
-      class="indexhot"
-      src="../../../static/images/brank/mei1.jpg"
-    ></image>
+  <view  class="whole">
+    <view  class="hots" v-for="(item,index) in recordsList" :key="index" > 
+      <image class="indexhot" :src="`${imgUrl}${item.originalImageCode}`" @click="tabdetail(item)" mode="aspectFill" ></image>
+      
+    <!-- <image @click="tabdetail" class="indexhot" src="../../../static/images/brank/mei1.jpg"></image> -->
     <view class="hotborder">
-      <view class="hotText1">男装-上装-青年-时尚休闲</view>
+      <view class="hotText1">{{item.styleTag}}</view>
       <view class="hotText2">
-        <image
-          class="iconhot"
-          src="../../../static/images/brank/mei1.jpg"
-        ></image>
-        <text class="wen">我的文字是dsadasdasddsads</text>
-        <image
-          class="iconLove"
-          src="../../../static/images/brank/blackxin.png"
-          v-if="ImageBool"
-          @click="tabImage"
-        ></image>
-        <image
-          class="iconLove"
-          src="../../../static/images/brank/lightxin.png"
-          v-else
-          @click="tabImage"
-        ></image>
+         <image class="iconhot" :src="`${imgUrl}${item.originalImageCode}`"  mode="aspectFill" ></image>
+        <!-- <image class="iconhot" src="../../../static/images/brank/mei1.jpg"></image> -->
+        <text class="wen">{{item.materialName}}</text>
+        <image class="iconLove" src="../../../static/images/brank/blackxin.png" v-if="!item.isFavorite" @click="tabImage">
+        </image>
+        <image class="iconLove" src="../../../static/images/brank/lightxin.png" v-else @click="tabImage"></image>
+      </view>
     </view>
     </view>
   </view>
 </template>
 
 <script>
-export default {
+  export default {
+    props: {
+      recordsList: {
+        type: Array,
+        default: () => [],
+      }
+    },
     data() {
       return {
         // 爱心切换的bool
         ImageBool: true,
+        imgUrl: this.$IMG_URL, // 上传地址
       };
     },
+    created() {
+      console.log(this.recordsList, "recordsList");
+    },
     methods: {
       // 点击切换心心选项
       tabImage() {
         this.ImageBool = !this.ImageBool;
       },
       // 跳转到详情
-    tabdetail() {
-      this.$router.push("pages/brands/detail?id=2");
+      tabdetail(item) {
+        // console.log("KKK");
+        this.$router.push("/pages/brands/detail?id=" + item.id);
+        // this.$router.push("pages/brands/everyDay");
       },
     },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.hots {
+.whole{
+  display: flex;
+  flex-wrap: wrap;
+}
+  .hots {
     height: 578rpx;
     width: 330rpx;
     margin-bottom: 20rpx;
+    margin-right: 16rpx;
+    // flex: 1;
+
     .indexhot {
       display: block;
       height: 434rpx;
       width: 330rpx;
       border-radius: 10rpx 10rpx 0 0;
     }
+
     .hotborder {
       height: 144rpx;
+      // width: 193rpx; 
       border: 2rpx solid #e3e1e0;
       // border-top: 0rpx !important;
       border-radius: 0 0 10rpx 10rpx;
     }
+
     .hotText1 {
       font-size: 24rpx;
       font-family: PingFangSC, PingFangSC-Regular;
@@ -75,32 +86,38 @@ export default {
       color: rgba(0, 0, 0, 0.8);
       margin: 24rpx 28rpx 0 20rpx;
     }
+
     .hotText2 {
       width: 100%;
       // background-color: red;
       margin-top: 16rpx;
       display: flex;
       align-items: center;
+
       // margin: 24rpx 0rpx 0 20rpx;
       .iconhot {
         width: 40rpx;
         height: 40rpx;
         margin-left: 20rpx;
       }
+
       .wen {
         width: 192rpx;
         font-size: 24rpx;
         margin-left: 10rpx;
 
-      overflow: hidden; /*超出部分隐藏*/
-      white-space: nowrap; /*禁止换行*/
+        overflow: hidden;
+        /*超出部分隐藏*/
+        white-space: nowrap;
+        /*禁止换行*/
         text-overflow: ellipsis;
       }
+
       .iconLove {
         width: 36rpx;
         height: 32rpx;
         margin-left: 20rpx;
       }
     }
-}
+  }
 </style>
\ No newline at end of file

src/pages/brands/components/hs-material-thumbnail.vue

 <template>
   <view class="home_con_content_order" @click="click">
-    <image
+    <!-- <image
       class="width_100 hs-height-160"
       src="@/static/images/home/1@2x.png"
       mode=""
-    ></image>
+    ></image> -->
+    <!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
+    <template v-for="item,index in colourApiList">
+
+      <image :key="index" v-if="item.isMain" class="width_100 hs-height-160" :src="`${imgUrl}${item.fileCode}`" />
+    </template>
     <view class="order_tit">
       <view class="u-flex justify-between u-font-32">
-        <span class="color_DDA973 u-line-1"
-          >{{ item.materialName }}加厚荷兰绒绒布布料</span
-        >
+        <span class="color_DDA973 u-line-1">{{ item.materialName }}
+          <!-- 加厚荷兰绒绒布布料 -->
+        </span>
       </view>
       <view class="u-font-24 u-m-t-20 color_6F6F72">
-        <span class="u-m-r-10">{{ item.materialCategory }}</span>
+        <span class="u-m-r-10">{{ item.category }}</span>
         |
-        <span class="u-m-l-10 u-m-r-10">{{ item.materialDoorWidth }} cm</span>
+        <span class="u-m-l-10 u-m-r-10">{{ item.clothWidth }} cm</span>
         |
-        <span class="u-m-l-10">{{ item.materialElement }}</span>
+        <span class="u-m-l-10">{{ item.component }}</span>
       </view>
     </view>
   </view>
 </template>
 
 <script>
-export default {
+  export default {
     name: "hs-material-thumbnail",
     props: {
       item: {
         type: Object,
         default: () => {},
       },
+      colourApiList: {
+        type: Array,
+        default: []
+      }
     },
     data() {
       return {};
@@ -39,11 +48,11 @@ export default {
         this.$emit("click");
       },
     },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.home_con_content_order {
+  .home_con_content_order {
     position: relative;
     display: flex;
     align-items: center;
@@ -52,6 +61,7 @@ export default {
     border-radius: 8rpx;
     overflow: hidden;
     width: 100%;
+
     .order_tit {
       position: absolute;
       width: 75%;
@@ -62,35 +72,36 @@ export default {
       padding: 20rpx;
       flex: 1;
       height: 100%;
-    background: rgba(17, 21, 30, 0.5);
+      // background: rgba(17, 21, 30, 0.5);
     }
-}
-.width_30 {
+  }
+
+  .width_30 {
     width: 30%;
-}
+  }
 
-.color_DDA973 {
+  .color_DDA973 {
     color: #dda973;
-}
+  }
 
-.color_6F6F72 {
+  .color_6F6F72 {
     color: #6f6f72;
-}
+  }
 
-.bd_dashed {
+  .bd_dashed {
     position: relative;
-}
+  }
 
-.bd_dashed:after {
+  .bd_dashed:after {
     border-width: 1px;
-}
+  }
 
-.bd_dashed-bottom:after,
-.bd_dashed-left:after,
-.bd_dashed-right:after,
-.bd_dashed-top-bottom:after,
-.bd_dashed-top:after,
-.bd_dashed:after {
+  .bd_dashed-bottom:after,
+  .bd_dashed-left:after,
+  .bd_dashed-right:after,
+  .bd_dashed-top-bottom:after,
+  .bd_dashed-top:after,
+  .bd_dashed:after {
     content: " ";
     position: absolute;
     left: 0;
@@ -103,11 +114,11 @@ export default {
     transform: scale(0.5, 0.5);
     border: 1px dashed #e4e7ed;
     z-index: 2;
-}
+  }
 
-.ov_hiden {
+  .ov_hiden {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
+  }
 </style>
\ No newline at end of file

src/pages/brands/detail.vue

@@ -3,7 +3,7 @@
     <!-- <u-navbar title="" :border-bottom="false" :background="background">
     </u-navbar> -->
     <view>
-      <u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
+      <u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image>
     </view>
     <view class="u-p-r-30 u-p-l-30">
       <!--款式信息 -->
@@ -11,36 +11,36 @@
         <view class="u-border-bottom u-line-88">款式信息</view>
         <view class="fabric u-m-t-24">
           <text class="textStyle1">产品款号</text>
-          <text class="textStyle2">AS23124</text>
+          <text class="textStyle2">{{tabledata.styleCode}}</text>
         </view>
         <view class="fabric u-m-t-8">
           <text class="textStyle1">面料供应商</text>
-          <text class="textStyle2">AS23124</text>
+          <text class="textStyle2">{{tabledata.supplierName}}</text>
         </view>
       </view>
       <!-- 面料信息 -->
       <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
         <view class="u-border-bottom u-line-88">面料信息</view>
         <view class="u-m-t-30 u-m-b-56">
-          <material :item="item"></material>
+          <material :item="item" :colourApiList="tabledata.colourApiList"></material>
         </view>
         <!-- 其他颜色 -->
         <view class="u-flex">
           <view class="overflow u-flex-1">
             <view>其他颜色</view>
             <view>
-              <view class="image u-m-r-10">
-                <image src="" style="width: 100%; height: 100%"></image>
+              <view class="image u-m-r-10" v-for="item,index in tabledata.colourApiList" :key="index">
+                <image v-if="item.isMain" :src="`${imgUrl}${item.fileCode}`" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
               </view>
-              <view class="image u-m-r-10">
+              <!-- <view class="image u-m-r-10">
                 <image src="" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
               </view>
               <view class="image u-m-r-10">
                 <image src="" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
-              </view>
+              </view> -->
             </view>
           </view>
         </view>
@@ -53,43 +53,85 @@
 </template>
 
 <script>
-import material from "./components/hs-material-thumbnail.vue";
-export default {
-  components: { material },
+  import material from "./components/hs-material-thumbnail.vue";
+  export default {
+    components: {
+      material
+    },
     data() {
       return {
+        tabledata:{},
         item: {},
+        id: "",
+        imgUrl: this.$IMG_URL, // 上传地址
       };
     },
-};
+    watch: {
+      id: {
+        handler() {
+          console.log("oid");
+          this.detail()
+        }
+      }
+    },
+
+    created() {
+      this.detail()
+    },
+    onLoad(options) {
+      this.id = options.id;
+
+    },
+    methods: {
+      detail() {
+        let param = {
+          id: this.id
+        }
+        this.$http('mobileBrand.styleDetail', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+       this.tabledata=data
+       this.item=data.materialInfo
+          }
+        });
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-$h-color: #af8d66;
-$activeColor: #dda973;
-$color: rgba(175, 141, 102, 0.1);
-$main-color: #fff;
-// 款式信息
-.textStyle1 {
+  $h-color: #af8d66;
+  $activeColor: #dda973;
+  $color: rgba(175, 141, 102, 0.1);
+  $main-color: #fff;
+
+  // 款式信息
+  .textStyle1 {
     display: inline-block;
     width: 160rpx;
     color: rgba(0, 0, 0, 0.4);
-}
-.textStyle2 {
+  }
+
+  .textStyle2 {
     margin-left: 40rpx;
     font-size: 14px;
     font-family: PingFangSC, PingFangSC-Regular;
     font-weight: 500;
     color: #333333;
-}
-// 我要采购布样
-.sampling {
+  }
+
+  // 我要采购布样
+  .sampling {
     position: fixed;
     bottom: 0;
     width: 750rpx;
     height: 100rpx;
     background: #ffffff;
     box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
+
     .u-btn {
       width: 630rpx;
       height: 88rpx;
@@ -97,17 +139,19 @@ $main-color: #fff;
       border-radius: 44rpx;
       color: white;
     }
-}
+  }
 
-.u-line-88 {
+  .u-line-88 {
     line-height: 88rpx;
-}
-.bg-fff {
+  }
+
+  .bg-fff {
     position: relative;
     top: -10rpx;
     background: #fff;
-}
-.item {
+  }
+
+  .item {
     width: 100%;
     margin-bottom: 28rpx;
 
@@ -115,6 +159,7 @@ $main-color: #fff;
       border-radius: 16rpx;
       border: 1px solid rgba(0, 0, 0, 0.1);
     }
+
     &-tag {
       padding: 6rpx 2px;
       background: $color;
@@ -123,13 +168,14 @@ $main-color: #fff;
       display: inline-block;
       margin-right: 10rpx;
     }
-}
+  }
 
-.image {
+  .image {
     position: relative;
     width: 160rpx;
     height: 160rpx;
     display: inline-block;
+
     &-tip {
       text-align: center;
       width: 100%;
@@ -141,9 +187,10 @@ $main-color: #fff;
       bottom: 0;
       left: 0;
     }
-}
-.overflow {
+  }
+
+  .overflow {
     overflow-x: auto;
     white-space: nowrap;
-}
+  }
 </style>
\ No newline at end of file

src/pages/brands/everyDay.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-14 11:42:25
+ * @LastEditTime: 2022-01-14 15:24:14
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/pages/brands/everyDay.vue
+-->
 <template>
   <!-- 每日上新 -->
   <u-card full :head-border-bottom="false">
     <view slot="body">
       <view class="hotFlex">
-        <hot-style></hot-style>
-        <hot-style></hot-style>
-        <hot-style></hot-style>
-        <hot-style></hot-style>
+        <hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style>
       </view>
     </view>
   </u-card>
@@ -19,9 +24,33 @@ export default {
     hotStyle,
   },
   data() {
-    return {};
+    return {
+      recordsList:[]
+    };
+  },
+  created(){
+      console.log("ces");
+      this.materialDetail()
+    },
+  methods: {
+    materialDetail() {
+        let param = {
+          "current": 1,
+          "size": 10,
+          "styleTag": ""
+        }
+        this.$http('mobileBrand.dailyNewStylePage', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+            this.recordsList = data.records;
+            console.log(this.recordsList,"this.recordsList");
+          }
+        });
+      }
   },
-  methods: {},
 };
 </script>