print-package-app/pages/smart-order/index.vue

<template>
  <view class="content flex-col">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="智能下单"></uni-nav-bar>
    <Banner :list="transformSwiper(info.pictureUrl)"></Banner>
    <view class="flex-col group_7">
      <text class="text_6">{{ info.name }}</text>
      <text class="text_7">
        {{ info.des }}
      </text>
      <view class="justify-between section_2">
        <view class="flex-row">
          <text>尺寸(mm)</text>
          <view class="flex-row group_9">
            <text>厚度(mm)</text>
            <text class="text_10">材质</text>
          </view>
        </view>
        <text class="text_11">数量</text>
      </view>
      <view class="justify-between section_3">
        <text style="width: 160rpx">{{ info.size }}</text>
        <text style="width: 110rpx">{{ info.thickness }}</text>
        <text style="width: 160rpx">{{ info.texture }}</text>
        <text style="width: 110rpx">{{ info.minimumOrderQuantity }}</text>
      </view>
    </view>
    <view class="list">
      <view class="justify-between group_10">
        <text class="text_16">推荐工厂列表</text>
      </view>
      <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
        <factoryItem v-for="item in factoryList" :key="item.id" :item="item"></factoryItem>
      </scroll-list>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getSimpleInfo } from '@/apis/productionApi'
import { getAffiliatedFactoryList } from '@/apis/factoryApi'
import Banner from '@/components/business-components/banner.vue'
import factoryItem from '@/components/business-components/factoryItem'
export default {
  components: {
    Banner,
    factoryItem
  },
  data() {
    return {
      info: {},
      condition: {
        id: null,
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      },
      factoryList: []
    }
  },
  onLoad(options) {
    if (options.id) {
      this.condition.id = options.id
      this.getInfo(this.condition.id)
    }
  },
  mounted() {
    if (this.condition.id) {
      this.downCallback()
    }
  },
  methods: {
    go2,
    back,
    getInfo(id) {
      getSimpleInfo({ id }).then((res) => {
        this.info = res
      })
    },
    transformSwiper(list) {
      if (list) {
        return list.map((item) => {
          return {
            url: item,
            type: 'image'
          }
        })
      }
      return []
    },
    getList() {
      return new Promise((resolve, reject) => {
        getAffiliatedFactoryList({ ...this.condition })
          .then((res) => {
            if (res.current <= 1) {
              this.factoryList = res.records
            } else {
              this.factoryList = this.factoryList.concat(res.records)
            }
            resolve({ list: this.factoryList, total: res.total })
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.condition.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback(page) {
      this.condition.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  height: 100vh;
  .list {
    margin-top: 18rpx;
    height: 60vh;
    .group_10 {
      padding: 19rpx 32rpx 18rpx;
    }
  }
}
.group_7 {
  padding: 26rpx 32rpx 24rpx;
  background-color: rgb(255, 255, 255);
  .text_6 {
    color: rgb(0, 0, 0);
    font-size: 34rpx;
    font-weight: 500;
    line-height: 48rpx;
    white-space: nowrap;
  }
  .text_7 {
    margin-right: 9rpx;
    margin-top: 16rpx;
    color: rgb(51, 51, 51);
    font-size: 28rpx;
    line-height: 40rpx;
    text-align: left;
  }
  .section_2 {
    margin-top: 24rpx;
    padding: 19rpx 32rpx 23rpx;
    color: rgb(136, 136, 136);
    font-size: 24rpx;
    line-height: 33rpx;
    white-space: nowrap;
    background-color: rgb(247, 248, 250);
    .text_11 {
      margin-right: 54rpx;
    }
    .group_9 {
      margin-left: 72rpx;
      .text_10 {
        margin-left: 40rpx;
      }
    }
  }
  .section_3 {
    padding: 20rpx 30rpx;
    color: rgb(51, 51, 51);
    font-size: 22rpx;
    line-height: 30rpx;
    white-space: pre-wrap;
    background-color: rgb(255, 255, 255);
    border: solid 2rpx rgb(216, 216, 216);
  }
}
</style>