print-package-app/pages/factory/index.vue

<template>
  <view class="content">
    <uni-nav-bar statusBar fixed title="工厂直印"></uni-nav-bar>
    <view class="flex-col group_3">
      <view class="group_4">
        <text class="text_4">热门推荐</text>
        <view class="flex-row justify-between equal-division">
          <view class="flex-col equal-division-item" v-for="simple in simpleList" :key="simple.id" @click="go2('smart-order', { id: simple.id })">
            <image :src="simple.pictureUrl" class="image_3" />
            <text class="text_5 text-ellipsis">{{ simple.name }}</text>
          </view>
        </view>
      </view>
      <view class="justify-between group_5">
        <text class="text_9">工厂直印</text>
        <view class="group_6">
          <qn-select
            options-align="right"
            contentStyle="background: none; padding: 0;text-align: right;"
            :options="options"
            v-model="condition.sortFlag"
          ></qn-select>
        </view>
      </view>
      <view class="list">
        <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
          <factoryItem v-for="(item, index) in factoryList" :key="index" :item="item"></factoryItem>
        </scroll-list>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getFactoryList } from '@/apis/factoryApi'
import { getSimpleList } from '@/apis/productionApi'
import factoryItem from '@/components/business-components/factoryItem'
const options = [
  {
    label: '按距离排序',
    value: 2
  },
  {
    label: '按评分排序',
    value: 1
  }
]
export default {
  components: {
    factoryItem
  },
  data() {
    return {
      options: Object.freeze(options),
      condition: {
        sortFlag: 1,
        latitude: '',
        longitude: '',
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      },
      simpleList: [],
      factoryList: []
    }
  },
  onLoad() {
    this.getLocation()
      .then(() => {
        this.condition.sortFlag = 2
      })
      .catch(() => {
        this.condition.sortFlag = 1
      })
  },
  onShow() {
    getSimpleList().then((res) => {
      this.simpleList = res
    })
  },
  watch: {
    'condition.sortFlag': {
      handler(val) {
        if (val === 2) {
          if (this.condition.latitude === null) {
            uni.showModal({
              title: '提示',
              content: '请先授权定位',
              success: (res) => {
                if (res.confirm) {
                  this.getLocation().catch(() => {})
                }
              }
            })
          } else {
            this.downCallback()
          }
          return
        }
        if (val === 1) {
          this.downCallback()
          return
        }
      },
      immediate: true
    },
    'condition.latitude': {
      handler(val) {
        if (val) {
          this.downCallback()
        }
      },
      immediate: true
    }
  },
  methods: {
    go2,
    back,
    getList() {
      return new Promise((resolve, reject) => {
        getFactoryList({ ...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.$refs.list.load()
      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()
        })
    },
    getLocation() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            console.log('success:', res)
            this.condition.latitude = res.latitude
            this.condition.longitude = res.longitude
            resolve()
          },
          fail: (err) => {
            console.log('error:', err)
            this.condition.latitude = null
            this.condition.longitude = null
            reject()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  height: calc(100vh-50px);
  background-color: rgb(255, 255, 255);
  .group_3 {
    padding-top: 25rpx;
    height: 100%;
    .group_4 {
      padding-left: 32rpx;
      padding-right: 32rpx;
      .text_4 {
        color: rgb(51, 51, 51);
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        white-space: nowrap;
      }
      .equal-division {
        margin-top: 24rpx;
        color: rgb(51, 51, 51);
        font-size: 22rpx;
        font-weight: 500;
        line-height: 30rpx;
        white-space: nowrap;
        .equal-division-item {
          padding-bottom: 11rpx;
          background-color: #f6f7fa;
          box-shadow: 0px 8rpx 28rpx -24rpx rgba(0, 0, 0, 0.1);
          border-radius: 8rpx;
          position: relative;
          .text_5 {
            width: 160rpx;
            padding: 12rpx 10rpx;
          }
        }
        .image_3 {
          border-radius: 8rpx 8rpx 0px 0px;
          width: 160rpx;
          height: 160rpx;
        }
      }
    }
    .group_5 {
      margin-top: 64rpx;
      padding: 0 32rpx;
      .text_9 {
        color: rgb(51, 51, 51);
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        white-space: nowrap;
      }
      .group_6 {
        width: 360rpx;
      }
    }
    .list {
      margin-top: 18rpx;
      flex: 1 1 0;
    }
  }
}
</style>