工厂详情

apis/factoryApi.js

@@ -52,3 +52,12 @@ export function getAffiliatedFactoryList(data = {}) {
     data
   })
 }
+/**
+ * 获取工厂客户案例
+ */
+export function getCaseList(data = {}) {
+  return http.get({
+    url: `/yyt-uec/get/enterprise/product/case/page`,
+    data
+  })
+}

components/business-components/banner.vue

@@ -11,6 +11,7 @@
         </view>
       </swiper-item>
     </swiper>
+    <slot></slot>
     <!-- <image @click="shareFactory" src="/static/imgs/general/share-gray-icon.png" class="image_1" /> -->
     <view class="flex-col items-center text-wrapper">
       <text>{{ swiperCurrent + 1 }}/{{ list.length }}</text>

components/business-components/factoryItem.vue

@@ -3,7 +3,7 @@
     <image :src="item.pictureUrl || '/static/imgs/factory/default-factory.png'" class="image_8" />
     <view class="center-group flex-col">
       <view class="flex-row">
-        <text class="text_11 text-ellipsis">{{ item.name }}</text>
+        <text class="text_11 text-ellipsis" @click="go2('factory-info', { id: item.id })">{{ item.name }}</text>
         <view class="right-text-wrapper_1 flex-col">
           <text class="text_18">{{ item.score }}分</text>
         </view>
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { go2 } from '@/utils/hook.js'
 export default {
   props: {
     item: {
@@ -39,6 +40,7 @@ export default {
     }
   },
   methods: {
+    go2,
     arrSlice(arr, length) {
       if (!arr) {
         return []

pages.json

@@ -83,6 +83,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/factory-info/index",
+      "style": {
+        "navigationBarTitleText": "工厂详情",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/mall/index",
       "style": {

pages/factory-info/index.vue

@@ -0,0 +1,567 @@
+<template>
+  <view>
+    <view class="flex-col group">
+      <!-- 只能使用v-if，fixed会影响observer -->
+      <view class="justify-between header" v-if="showTitle">
+        <text class="text">{{ factoryInfo.name || '-' }}</text>
+        <!-- <view class="flex-row group_1">
+          <text class="text_1">分享</text>
+          <image src="/static/imgs/general/share-black-icon.png" class="image" />
+        </view> -->
+      </view>
+      <Banner :list="swiperList">
+        <image class="back" @click="back" src="/static/imgs/factory/back-icon.png"></image>
+      </Banner>
+      <view class="flex-col group_3">
+        <view class="flex-col section_1">
+          <view class="flex-col">
+            <view class="justify-between">
+              <text class="text_1">{{ factoryInfo.name || '-' }}</text>
+              <!-- <view class="flex-row group_6" @click="editFactory">
+                <text>修改</text>
+                <image src="/static/imgs/general/left-arrow-blue-icon.png" class="image_2" />
+              </view> -->
+            </view>
+            <view class="flex-col group_7">
+              <!-- <view class="flex-row">
+                <image src="/static/imgs/promotion/phone-blue-icon.png" class="image_3" />
+                <text class="text_3">{{ factoryInfo.contactName || '-' }} {{ factoryInfo.contactMobile }}</text>
+              </view> -->
+              <view class="flex-row group_9">
+                <image src="/static/imgs/promotion/address-icon.png" class="image_4" />
+                <text class="text_4">{{ factoryInfo.locProvinceName + factoryInfo.locCityName + factoryInfo.locDistrictName + factoryInfo.locDetail }}</text>
+              </view>
+            </view>
+          </view>
+          <text class="text_5">
+            {{ factoryInfo.factoryIntroduce || '-' }}
+          </text>
+        </view>
+        <view class="flex-col line-tabs">
+          <view class="flex-row group_10">
+            <view class="flex-col items-center text_7" :style="{ color: curTab == 'device' ? 'rgb(0, 122, 255)' : '' }">
+              <text @click="selectTab('device')">工厂设备</text>
+              <view v-show="curTab == 'device'" class="section_2"></view>
+            </view>
+            <view class="flex-col items-center text_7" :style="{ color: curTab == 'production' ? 'rgb(0, 122, 255)' : '' }">
+              <text @click="selectTab('production')">产品展示</text>
+              <view v-show="curTab == 'production'" class="section_2"></view>
+            </view>
+            <view class="flex-col items-center text_7" :style="{ color: curTab == 'case' ? 'rgb(0, 122, 255)' : '' }">
+              <text @click="selectTab('case')">产品案例</text>
+              <view v-show="curTab == 'case'" class="section_2"></view>
+            </view>
+          </view>
+          <view v-if="curTab == 'device'">
+            <view class="flex-col section_3" v-for="(item, index) in deviceList" :key="index" @click="go2('device-info', { id: item.id })">
+              <image mode="aspectFit" @click.stop="preview(item)" :src="item.imgItemList[0].url" class="image_5" />
+              <view class="flex-col">
+                <view class="justify-between group_13">
+                  <text class="text_8">{{ item.name }}</text>
+                </view>
+                <text class="text_9">
+                  {{ item.machineDescribe }}
+                </text>
+              </view>
+            </view>
+          </view>
+          <view v-if="curTab == 'production'">
+            <view class="grid">
+              <view class="flex-col grid-item" v-for="production in productionList" :key="production.id" @click="go2('production-info', { id: production.id })">
+                <text>{{ production.name }}</text>
+                <image mode="aspectFit" :src="production.imgItemList[0].url" class="image_7" />
+              </view>
+            </view>
+          </view>
+          <view v-if="curTab == 'case'">
+            <view class="flex-col section_3" v-for="(item, index) in caseList" :key="index">
+              <view class="group_13">
+                <text class="text_8">{{ item.name }}</text>
+              </view>
+              <image mode="aspectFit" @click.stop="preview(item)" :src="item.pictureUrl" class="image_5" />
+            </view>
+          </view>
+          <view class="observer">{{ hasMore ? '加载中～' : '没有更多～' }}</view>
+        </view>
+        <!-- <image @click="addItem" src="/static/imgs/promotion/add-icon.png" class="image_6" /> -->
+      </view>
+      <qn-footer fixed height="120rpx">
+        <view class="button-area">
+          <view class="button button__submit" @click="makePhone"><text class="text" style="color: white">一键联系</text></view>
+        </view>
+      </qn-footer>
+    </view>
+  </view>
+</template>
+
+<script>
+import Banner from '@/components/business-components/banner'
+import { go2, back } from '@/utils/hook.js'
+import { getFactoryInfo, getCaseList } from '@/apis/factoryApi.js'
+import { getEquipmentList } from '@/apis/deviceApi.js'
+import { getProductionList } from '@/apis/productionApi.js'
+import { fileType } from '@/enums/index.js'
+export default {
+  components: {
+    Banner
+  },
+  data() {
+    return {
+      companyId: null,
+      factoryInfo: {},
+      swiperList: [],
+      swiperCurrent: 0,
+      curTab: 'device',
+      pagination: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      deviceList: [],
+      productionList: [],
+      caseList: [],
+      observer: null,
+      hasMore: false,
+      showTitle: false
+    }
+  },
+  watch: {
+    curTab(val) {
+      // 重置
+      this.hasMore = false
+      this.pagination.pageNum = 1
+      this.getList()
+    }
+  },
+  onLoad(options) {
+    if (options.id) {
+      this.companyId = options.id
+    } else {
+      uni.showToast({
+        title: '参数错误',
+        icon: 'none',
+        success: () => {
+          setTimeout(() => {
+            back()
+          }, 1500)
+        }
+      })
+    }
+  },
+  onShow() {
+    this.getCompanyInfo()
+    this.getList()
+  },
+  mounted() {
+    this.observer = uni.createIntersectionObserver(this)
+    // 手动监听元素出现在视口
+    this.observer
+      .relativeToViewport({
+        bottom: 50
+      })
+      .observe('.observer', (res) => {
+        if (res.intersectionRatio > 0 && this.hasMore) {
+          this.pagination.pageNum++
+          this.getList()
+        }
+      })
+    let observerTitle = uni.createIntersectionObserver(this)
+    observerTitle
+      .relativeToViewport({
+        bottom: 50
+      })
+      .observe('.text_1', (res) => {
+        if (res.intersectionRatio > 0) {
+          this.showTitle = false
+        }
+        if (res.intersectionRatio == 0) {
+          this.showTitle = !this.showTitle
+        }
+      })
+  },
+  methods: {
+    go2,
+    back,
+    getCompanyInfo() {
+      if (!this.companyId) return
+      getFactoryInfo({ id: this.companyId }).then((res) => {
+        if (res) {
+          this.factoryInfo = res
+          this.swiperList = res.imgItemList.map((item) => {
+            if (item.type == fileType.IMG) {
+              return {
+                type: 'image',
+                url: item.fileUrl
+              }
+            }
+            if (item.type == fileType.VIDEO) {
+              return {
+                type: 'video',
+                url: item.fileUrl,
+                imageUrl: item.videoPicUrl
+              }
+            }
+            return {}
+          })
+        }
+      })
+    },
+    selectTab(tab) {
+      this.pagination.pageNum = 1
+      this.curTab = tab
+    },
+    // 获取列表
+    getList() {
+      if (this.curTab == 'device') {
+        getEquipmentList({ ...this.pagination, enterpriseId: this.companyId }).then((res) => {
+          if (res) {
+            if (res.current <= 1) {
+              this.deviceList = res.records
+            } else {
+              this.deviceList = this.deviceList.concat(res.records)
+            }
+            this.hasMore = this.deviceList.length < res.total
+          }
+        })
+      }
+      if (this.curTab == 'production') {
+        getProductionList({ ...this.pagination, enterpriseId: this.companyId }).then((res) => {
+          if (res) {
+            if (res.current <= 1) {
+              this.productionList = res.records
+            } else {
+              this.productionList = this.productionList.concat(res.records)
+            }
+            this.hasMore = this.productionList.length < res.total
+          }
+        })
+      }
+      if (this.curTab == 'case') {
+        getCaseList({ ...this.pagination, enterpriseId: this.companyId }).then((res) => {
+          if (res) {
+            if (res.current <= 1) {
+              this.caseList = res.records
+            } else {
+              this.caseList = this.caseList.concat(res.records)
+            }
+            this.hasMore = this.caseList.length < res.total
+          }
+        })
+      }
+    },
+    preview(device) {
+      let urls = device.imgItemList.map((item) => {
+        return item.url
+      })
+      uni.previewImage({
+        current: 0,
+        urls
+      })
+    },
+    makePhone() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.back {
+  position: absolute;
+  top: 68rpx;
+  left: 20rpx;
+  width: 66rpx;
+  height: 66rpx;
+}
+.group {
+  padding-bottom: 68rpx;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  height: 100vh; // 粘性定位的锚定元素
+  .group_3 {
+    margin-top: -40rpx;
+    position: relative;
+    .section_1 {
+      padding: 32rpx 32rpx 20rpx;
+      background-color: #fff;
+      border-radius: 40rpx 40rpx 0px 0px;
+      .text_5 {
+        margin-right: 7rpx;
+        margin-top: 48rpx;
+        color: rgb(51, 51, 51);
+        font-size: 26rpx;
+        line-height: 37rpx;
+        text-align: left;
+      }
+      .group_7 {
+        margin-top: 18rpx;
+        color: rgb(51, 51, 51);
+        font-size: 26rpx;
+        line-height: 37rpx;
+        white-space: nowrap;
+        .group_9 {
+          margin-top: 12rpx;
+          padding: 0 3rpx;
+          .image_4 {
+            margin: 3rpx 0 3rpx;
+            width: 27rpx;
+            height: 30rpx;
+          }
+          .text_4 {
+            margin-left: 12rpx;
+            width: 650rpx;
+            white-space: break-spaces;
+          }
+        }
+        .image_3 {
+          margin: 4rpx 0 4rpx;
+          width: 28rpx;
+          height: 28rpx;
+        }
+        .text_3 {
+          margin-left: 12rpx;
+        }
+      }
+      .text_1 {
+        width: 600rpx;
+        color: rgb(0, 0, 0);
+        font-size: 36rpx;
+        font-weight: 500;
+        line-height: 50rpx;
+        white-space: break-all;
+      }
+      .group_6 {
+        margin: 7rpx 7rpx 7rpx 0;
+        color: rgb(0, 122, 255);
+        font-size: 26rpx;
+        line-height: 37rpx;
+        white-space: nowrap;
+        .image_2 {
+          margin: 9rpx 0 9rpx 15rpx;
+          width: 10rpx;
+          height: 18rpx;
+        }
+      }
+    }
+    .line-tabs {
+      width: 750rpx;
+      padding-bottom: 20rpx;
+      .group_10 {
+        position: sticky;
+        top: 128rpx;
+        z-index: 10;
+        padding: 20rpx 38rpx;
+        background-color: rgb(255, 255, 255);
+        .section_2 {
+          margin-top: 18rpx;
+          background-color: rgb(0, 122, 255);
+          border-radius: 3rpx;
+          width: 80rpx;
+          height: 6rpx;
+        }
+        .text_7 {
+          margin-right: 32rpx;
+          color: rgb(51, 51, 51);
+          font-size: 28rpx;
+          line-height: 40rpx;
+          white-space: nowrap;
+        }
+      }
+      .section_3 {
+        margin: 20rpx 32rpx 0rpx;
+        padding: 24rpx 0 24rpx 24rpx;
+        filter: drop-shadow(0px 11rpx 23.5rpx #00000014);
+        background-color: rgb(255, 255, 255);
+        border-radius: 10rpx;
+        .image_5 {
+          background-color: rgb(0, 0, 0);
+          margin-right: 24rpx;
+          width: 638rpx;
+          height: 390rpx;
+        }
+        .group_13 {
+          margin-bottom: 20rpx;
+          color: rgb(0, 0, 0);
+          font-size: 32rpx;
+          font-weight: 600;
+          line-height: 45rpx;
+          white-space: nowrap;
+          .text_8 {
+            align-self: center;
+          }
+        }
+        .text_9 {
+          margin-top: 12rpx;
+          margin-right: 40rpx;
+          color: rgb(51, 51, 51);
+          font-size: 26rpx;
+          line-height: 32rpx;
+          text-align: left;
+        }
+      }
+    }
+  }
+  .image_6 {
+    position: fixed;
+    bottom: 160rpx;
+    right: 32rpx;
+    box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.12);
+    border-radius: 50%;
+    width: 82rpx;
+    height: 82rpx;
+  }
+}
+.observer {
+  width: 100%;
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  padding: 20rpx 32rpx 20rpx;
+  color: rgb(130, 132, 138);
+  font-size: 32rpx;
+}
+.header {
+  padding: 59rpx 35rpx 21rpx 38rpx;
+  background-color: rgb(255, 255, 255);
+  border-bottom: solid 1rpx rgb(221, 221, 221);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 128rpx;
+  .text {
+    color: rgb(0, 0, 0);
+    font-size: 36rpx;
+    font-weight: 500;
+    line-height: 50rpx;
+    white-space: nowrap;
+  }
+  .group_1 {
+    margin: 7rpx 0 6rpx;
+    color: rgb(51, 51, 51);
+    font-size: 24rpx;
+    line-height: 33rpx;
+    white-space: nowrap;
+    .text_1 {
+      margin-bottom: 3rpx;
+    }
+    .image {
+      margin-left: 14rpx;
+      width: 37rpx;
+      height: 37rpx;
+    }
+  }
+}
+// .section_6 {
+//   padding-top: 40rpx;
+//   overflow: hidden;
+//   border-radius: 40rpx 40rpx 0px 0px;
+//   background-color: rgb(255, 255, 255);
+//   height: 408rpx;
+//   .text_13 {
+//     align-self: center;
+//     color: rgb(51, 51, 51);
+//     font-size: 28rpx;
+//     font-weight: 500;
+//     line-height: 40rpx;
+//     white-space: nowrap;
+//   }
+//   .group_20 {
+//     margin-top: 40rpx;
+//     .group_21 {
+//       padding: 0 48rpx 32rpx;
+//       color: rgb(51, 51, 51);
+//       font-size: 24rpx;
+//       line-height: 33rpx;
+//       white-space: nowrap;
+//       .group_23 {
+//         width: 494rpx;
+//         .image_15 {
+//           width: 96rpx;
+//           height: 96rpx;
+//         }
+//         .text_15 {
+//           margin-left: 12rpx;
+//           margin-top: 16rpx;
+//         }
+//       }
+//       .image_14 {
+//         border-radius: 50%;
+//         width: 96rpx;
+//         height: 96rpx;
+//       }
+//       .text_14 {
+//         margin-top: 16rpx;
+//       }
+//     }
+//     .section_7 {
+//       background-color: rgb(247, 248, 250);
+//       height: 16rpx;
+//     }
+//     .button {
+//       padding: 26rpx 0;
+//       color: rgb(51, 51, 51);
+//       font-size: 32rpx;
+//       line-height: 45rpx;
+//       white-space: nowrap;
+//       background-color: rgb(255, 255, 255);
+//     }
+//   }
+// }
+.grid {
+  padding: 20rpx 32rpx 91rpx;
+  width: 750rpx;
+  color: rgb(31, 31, 31);
+  font-size: 28rpx;
+  font-weight: 500;
+  line-height: 40rpx;
+  white-space: nowrap;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 22rpx;
+  grid-column-gap: 16rpx;
+  .grid-item {
+    padding: 24rpx 20rpx 20rpx;
+    border-radius: 10rpx;
+    filter: drop-shadow(0px 5rpx 11rpx #00000014);
+    background-color: rgb(255, 255, 255);
+    background-position: 0px 0px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .image_7 {
+      margin-top: 20rpx;
+      width: 296rpx;
+      height: 296rpx;
+    }
+  }
+}
+.button-area {
+  width: 750rpx;
+  padding: 0 32rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // justify-content: space-between;
+  .button {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10rpx;
+    .text {
+      font-size: 30rpx;
+      font-weight: 500;
+      text-align: center;
+    }
+  }
+  .button__cancel {
+    width: 270rpx;
+    height: 88rpx;
+    border: 2rpx solid #979797;
+  }
+  .button__submit {
+    width: 100%;
+    height: 88rpx;
+    background: #007aff;
+  }
+}
+</style>