guzijian / garbage-removal · Files

<template>
  <view class="home-container">

    <view class="top-swiper-image-scroll">
      <u-swiper :list="swiperImageList" keyName="image" :autoplay="true" circular></u-swiper>
      <view :style="{
        'height': lightHeight, 'line-height': lightHeight,
        'top': topMargin
      }" class="top-address">
        <view class="address-icon-image"><u-icon name="map" color="#fff" size="28"></u-icon></view>
        <view class="address-text" @click="handleAddressInfo">
          {{ addressInfo ? addressInfo : "请设置清运地址" }}
        </view>
        <view class="address-icon-label">
          <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
        </view>
      </view>
    </view>
    <!-- 公司容器 -->
    <view class="company-box">
      <view class="info-box">
        <view class="info-box-item" v-for="(item, index) in infoBoxList" :key="index">
          <view class="info-box-item-icon" :class="item.icon">
          </view>
          <view class="info-box-item-text">{{ item.text }}</view>
        </view>
      </view>

      <view class="company-container">
        <span class="company-label-info">可进行垃圾清运单位</span>
        <view class="company-list-box" v-if="addressInfo">
          <view class="company-list-header">
            <view class="company-list-header-left">
              综合排序
            </view>
            <view class="company-list-header-right">
              <u-search placeholder="请输入" :searchIconSize="40" disabled @click="handleSearchClick"
                :showAction="false"></u-search>
            </view>
          </view>
          <view class="company-list-content">
            <view class="company-list-content-box">
              <z-paging ref="paging" :fixed="false" v-model="companyList" @query="queryList">
                <empty-view slot:empty></empty-view>
                <view class="company-list-item" v-for="item in companyList" :key="item.id">
                  <view class="company-list-item-main">
                    <view class="company-list-item-main-left">
                      <image class="company-list-item-main-left-img"
                        :src="item.carParkPanorama ? item.carParkPanorama : 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png'" />
                    </view>
                    <view class="company-list-item-main-right"
                      @click="handleDetailClick(item, item.legalRepresentativePhone, userAddress)">
                      <view class="company-list-item-main-right-name">
                        {{ item.abbreviation }}
                      </view>
                      <view class="company-list-item-main-right-score">
                        <text class="company-list-item-main-right-text">评分:</text>
                        <view class="company-list-item-main-right-score-start">
                          <u-icon v-for="todo in maxStar" :name="item.score > todo ? 'star-fill' : 'star'" :key="todo"
                            color="#f9ae3d" size="28"></u-icon>
                        </view>
                        <text class="company-list-item-main-right-text" style="color: #fd5d00;">5分</text>
                      </view>
                      <view class="company-list-item-main-right-price-number">
                        <view class="company-list-item-main-right-price">公司类型：{{ item.companyType == 0 ? "经营单位" : "运输公司"
                        }}&nbsp;&nbsp;</view>
                        <view class="company-list-item-main-right-number">
                          车辆数：<text class="company-list-item-main-right-number-text">{{ item.carNumber }}</text>
                        </view>
                      </view>
                      <view class="company-list-item-main-right-remark">
                        {{ item.remark }}
                      </view>
                    </view>
                  </view>
                  <view class="company-list-item-bottom">
                    <view class="company-list-item-bottom-contact-company">
                      <u-button @click="handleContactClick(item.legalRepresentativePhone)" color="#a9e08f" size="normal"
                        type="success" :hairline="true" shape="circle" text="联系公司"></u-button>
                    </view>
                    <view class="company-list-item-bottom-button-clean">
                      <u-button @click="handleCleanGarbage(item, item.legalRepresentativePhone, userAddress)"
                        type="success" :hairline="true" size="normal" shape="circle" text="垃圾清运"></u-button>
                    </view>
                  </view>
                </view>
              </z-paging>
            </view>
          </view>
        </view>
        <view class="company-empty" v-else @click="handleCleanClick">
          <view class="empty-text-title">
            请先添加地址
          </view>
          <view class="empty-text-content">
            房屋装饰装修过程中产生的砖瓦、木材、熟料等废弃物
          </view>
          <view class="empty-text-box">
            <view class="empty-text-box-button">
              立即清运
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script setup >
import { queryAddress } from '@/apis/address.js';
import { queryEnterpriseList } from '@/apis/company.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
// 定义最大积分
let maxScore = 5
const maxStar = ref([])
const lightHeight = ref();//胶囊按钮信息
const topMargin = ref(null);//状态栏高度
const musicheadHeight = ref();
const paging = ref(null)
const swiperImageList = ref([{
  image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
}, {
  image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
}])

const userAddress = ref({})
const addressInfo = ref()

// 信息指南
const infoBoxList = ref([{
  icon: 'iconfont icon-wenjianziliao',
  text: '用户指南'
}, {
  icon: 'iconfont icon-lajitong',
  text: '分类指南'
}, {
  icon: 'iconfont icon-huoche',
  text: '车型说明'
}, {
  icon: 'iconfont icon-zhengce',
  text: '政策法规'
},])

//公司列表
const companyList = ref([])


/**
 * 拨打电话回调
 */
const handleContactClick = (val) => {
  console.log("拨打电话", val);
  uni.makePhoneCall({ phoneNumber: val }).then(res => {
    console.log(res);
  }).catch(err => { });
}

/**
 * 跳转地址
 */
function handleAddressInfo() {
  uni.$u.route({
    url: `pages/home/address/index`,
  })
}
const handleCleanClick = () => {
  uni.showModal({
    title: '',
    content: '请先添加清运地址',
    success: function (res) {
      if (res.confirm) {
        uni.$u.route({
          url: `pages/home/address/index`,
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}
/**
 * 公司详情
 */
function handleDetailClick(company, tel, userAddress) {
  console.log(company);
  uni.$u.route({
    url: `pages/home/clean/company-detail/index?companyObj=${JSON.stringify(company)}&tel=${tel}&userAddress=${userAddress}`,
  })
}

/**
 * 清运跳转
 */
const handleCleanGarbage = (companyObj, tel, userAddress) => {
  console.log("垃圾清运");
  uni.$u.route({
    url: `pages/home/clean/index?companyObj=${JSON.stringify(companyObj)}&tel=${tel}&userAddress=${userAddress}`,
  })
}

/**
 * 搜索
 */
const handleSearchClick = () => {
  console.log("search");
}

/**
 * 计算胶囊高度
 */
onLoad(() => {
  // 积分初始化
  for (let index = 0; index < maxScore; index++) {
    maxStar.value.push(index);
  }

  try {
    const { height, top } = uni.getMenuButtonBoundingClientRect();
    topMargin.value = top + "px";
    lightHeight.value = height + 'px'
  } catch (error) {
    topMargin.value = "60rpx";
    musicheadHeight.value = "40rpx"
    console.log("There is no menu because the current app is not a small program");
  }
})
onShow(() => {
  // 初始化数据
  initData()
})
const initData = () => {
  userAddress.value = null;
  // 查询用户当前地址
  queryAddress('CURRENT').then(res => {
    if (res.data.data && res.data.data[0]) {
      addressInfo.value = res.data.data[0].garUserAddress + res.data.data[0].garRemark
      userAddress.value = JSON.stringify(res.data.data[0] ? res.data.data[0] : {});
    }
  })

}
const queryList = (pageNo, pageSize) => {
  // 查询公司信息
  queryEnterpriseList({ companyType: 0, pageNum: pageNo, pageSize }).then(res => {
    paging.value.complete(res.data.rows);
  })
}
</script>

<style lang="scss" scoped>
.home-container {
  background: linear-gradient(to bottom, $u-info-light, $u-info-light);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: '黑体', '圆体';
  // position: relative;
  width: 100%;
  height: 100%;


  .top-swiper-image-scroll {
    width: 100%;
    height: 400rpx;
    box-sizing: border-box;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;

    ::v-deep .u-swiper {
      height: 400rpx !important;

      .u-swiper__wrapper {
        height: 400rpx !important;
      }

      .u-swiper__wrapper__item__wrapper__image {
        height: 400rpx !important;
      }
    }

    .top-address {
      position: absolute;
      width: 525rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      color: white;
      font-size: 30rpx;
      font-family: '圆体', '黑体';
      box-sizing: border-box;

      .address-icon-image {
        margin-right: 10rpx;
        vertical-align: top;
      }

      .address-text {
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }

      .address-icon-label {
        vertical-align: top;
      }
    }
  }

  .company-box {
    // position: relative;
    width: 100%;
    z-index: 200;
    box-sizing: border-box;
    padding: 30rpx;
    margin-top: 330rpx;
    flex: 1;
    display: flex;
    flex-direction: column;

    .info-box {
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      border-radius: 15rpx;
      box-sizing: border-box;
      padding: 40rpx;
      align-items: center;
      font-size: 25rpx;
      color: $u-main-color;

      .info-box-item {
        flex: 1;
        display: flex;
        flex-direction: column;

        .info-box-item-icon {
          font-size: 70rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 10rpx;
          box-sizing: border-box;
        }

        .info-box-item-text {
          font-weight: small;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .company-container {
      margin-top: 20rpx;
      width: 100%;
      box-sizing: border-box;
      flex: 1;
      display: flex;
      flex-direction: column;

      .company-label-info {
        line-height: 60rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        width: 100%;
        color: $u-info-dark;

      }

      .company-empty {
        width: 100%;
        height: 300rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background: linear-gradient(to bottom, $u-primary, $u-primary-disabled);
        // background-image: url("https://cdn.uviewui.com/uview/swiper/swiper2.png");
        color: #ffffff;
        background-size: 100% 100%;
        padding: 20rpx;

        .empty-text-title {
          font-size: 30rpx;
          line-height: 60rpx;
        }

        .empty-text-content {
          font-size: small;
          width: 60%;
          line-height: 40rpx;
        }

        .empty-text-box {
          // width: 0%;
          display: flex;

          .empty-text-box-button {
            margin-top: 20rpx;
            padding: 15rpx 30rpx 15rpx 30rpx;
            white-space: nowrap;
            box-sizing: border-box;
            border-radius: 50rpx;
            background-color: orange;
            font-size: 25rpx;
          }
        }
      }

      .company-list-box {
        width: 100%;
        background-color: #ffffff;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        flex: 1;
        display: flex;
        flex-direction: column;

        .company-list-header {
          display: flex;
          font-size: small;
          font-weight: small;
          align-items: center;

          .company-list-header-left {
            width: 200rpx;
            text-align: center;
          }

          .company-list-header-right {
            width: 100%;
          }
        }

        .company-list-content {
          flex: 1 0 auto;
          height: 0;
          box-sizing: border-box;
          margin-top: 20rpx;
          flex-shrink: 0;
          margin-bottom: 20rpx;
          width: 100%;

          .company-list-content-box {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            overflow: scroll;

            .company-list-item {
              width: 100%;
              margin-bottom: 20rpx;

              .company-list-item-main {
                display: flex;
                box-sizing: border-box;

                .company-list-item-main-left {
                  margin-right: 20rpx;

                  .company-list-item-main-left-img {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 20rpx;
                  }
                }

                .company-list-item-main-right {
                  display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  color: $u-info;
                  line-height: 50rpx;
                  font-size: 25rpx;

                  .company-list-item-main-right-name {
                    font-weight: bold;
                    color: black;
                    font-size: 35rpx;
                  }

                  .company-list-item-main-right-score {
                    display: flex;
                    font-size: small;

                    .company-list-item-main-right-text {
                      text-align: center;
                      margin-right: 10rpx;
                      box-sizing: border-box;
                    }

                    .company-list-item-main-right-score-start {
                      display: flex;
                      align-items: center;
                      margin-right: 10rpx;
                      box-sizing: border-box;
                    }
                  }

                  .company-list-item-main-right-price-number {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .company-list-item-main-right-price {}

                    .company-list-item-main-right-number {
                      font-size: small;

                      .company-list-item-main-right-number-text {
                        color: $u-main-color;
                      }
                    }
                  }

                  .company-list-item-main-right-remark {
                    font-size: 25rpx;
                    line-height: 40rpx;
                  }
                }
              }

              .company-list-item-bottom {
                display: flex;
                justify-content: space-around;
                margin-top: 20rpx;

                .company-list-item-bottom-contact-company {
                  flex: 1;
                  margin-right: 10rpx;
                  box-sizing: border-box;
                }

                .company-list-item-bottom-button-clean {
                  flex: 1;
                  margin-left: 10rpx;
                  box-sizing: border-box;
                }
              }
            }
          }

        }
      }
    }
  }

}
</style>