
<template>
  <view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
    <view class="head-wrapper"></view>
    <view class="town-title">{{town}}里海云仓</view>
    <view class="body-wrapper">
      <block v-for="(item,index) in cloudList" :key="index">
        <navigator class="item"
          :url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
          :style="{'background-image': `url(${item.background})`}">
          <text class="item-title">{{item.category_name}}云仓服务</text>
          <text>{{item.description}}</text>
          <view class="chakan-btn">查看</view>
        </navigator>
      </block>
    </view>
  </view>
</template>

<script>
  import { getCityCloundShop } from '@/api/api.js'
  import { Toast } from '@/libs/uniApi';
  export default {
    data() {
      let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
      return {
        winHeight: 0,
        cloudList: [],
        street_code: '',
        town: ''
      }
    },
    onLoad(e) {
      uni.getSystemInfo({
        success: (res) => {
          this.winHeight = res.windowHeight
        },
      });
      this.street_code = e.street
      this.town = e.town
      this.getCloundShop()
    },
    onShow() {},
    onPullDownRefresh() {
      this.getCloundShop()
      uni.stopPullDownRefresh()
    },
    methods: {
      async getCloundShop() {
        const { data } = await getCityCloundShop({ street_code: this.street_code })
        this.cloudList = data
        data.length < 1 ? Toast("暂无云仓") : '';
      }
    }
  }
</script>

<style lang="scss">
  .cloud_entrepot {
    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
    background-size: cover;
    padding-bottom: 92.98rpx;
  }

  .head-wrapper {
    height: 485.96rpx;
    width: 100%;
    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
    background-size: cover;
    margin-bottom: 49.12rpx;
  }

  .town-title {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 50.88rpx;
    color: #fff;
    margin-bottom: 28.07rpx;

    &::after {
      content: '';
      display: inline-block;
      width: 66.67rpx;
      height: 31.58rpx;
      background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
      background-size: cover;
      margin-left: 24.56rpx;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 66.67rpx;
      height: 31.58rpx;
      background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
      background-size: cover;
      margin-right: 24.56rpx;
    }
  }

  .body-wrapper {
    width: 694.74rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;

    .item {
      width: 336.84rpx;
      height: 100%;
      padding: 24.56rpx 28.07rpx;
      margin-bottom: 21.05rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;

      text {
        display: block;
        font-size: 24.56rpx;
        color: #999;
        margin-bottom: 14.04rpx;
      }

      .item-title {
        font-size: 31.58rpx;
        color: #333;
      }

      .chakan-btn {
        width: 114.04rpx;
        height: 49.12rpx;
        font-size: 28.07rpx;
        text-align: center;
        line-height: 49.12rpx;
        color: #fff;
        margin-top: auto;
        background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
        border-radius: 50px;
      }
    }
  }
</style>
