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" hover-class="click-box" v-for="(item, index) in infoBoxList" :key="index"
          @click.stop="handlerCLickInfoBox(item.text)">
          <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">
        <view class="company-list-box" v-if="addressInfo && userType == '用户'">
          <view class="company-list-header">
            <view class="company-list-header-left">
              <u-dropdown active-color="#19a97c">
                <u-dropdown-item :height="'240rpx'" :placement="'left'" v-model="registrationAreaValue"
                  @change="handleDropdownAreaChange" :title="'所属区域'" :options="dropdownOptions[0]"></u-dropdown-item>
                <u-dropdown-item :placement="'center'" v-model="carTypeValue" @change="handleDropdownCarChange"
                  :title="'车辆类型'" :options="dropdownOptions[1]"></u-dropdown-item>
                <u-dropdown-item :placement="'right'" v-model="sortValue" @change="handleDropdownSortChange"
                  :title="dropdownOptions[2][sortValue].label" :options="dropdownOptions[2]"></u-dropdown-item>
              </u-dropdown>
            </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, index) in companyList" :key="item.id">
                  <view class="company-list-item-main">
                    <view class="company-list-item-main-right">
                      <view class="company-list-item-main-right-name">
                        <view class="company-list-item-main-right-name-label-recently"
                          v-if="index == 0 && sortValue == 0">
                          {{ "距离最近" }}
                        </view>
                        <view class="company-list-item-main-right-name-label-distance">
                          {{ "距离" + item.distance + "公里" }}
                        </view>
                        <view class="company-list-item-main-right-name-label-name">
                          {{ item.name }}
                        </view>
                      </view>
                      <view class="company-list-item-main-box" style="display: flex;">
                        <view class="company-list-item-main-left-box" style="flex: 1;">
                          <view class="company-list-item-main-bottom-box"
                            @click="handleDetailClick(item, item.servicePhone, userAddress)">
                            <view class="company-list-item-main-right-score">
                              <text class="company-list-item-main-right-text">评分:</text>
                              <view v-if="item.score != 0" class="company-list-item-main-right-score-start">
                                <u-rate activeColor="#f9ae3d" inactive-color="#f9ae3d" size="28"
                                  :modelValue="item.score" allowHalf readonly></u-rate>
                              </view>
                              <text v-if="item.score > 0" class="company-list-item-main-right-text"
                                style="color: #fd5d00;">
                                {{ item.score }}分
                              </text>
                              <text v-else class="company-list-item-main-right-text"
                                style="color: #fd5d00;">最近一月暂无评分</text>
                            </view>
                            <view class="company-list-item-main-right-price-number">
                              <view class="company-list-item-main-right-price">
                                报价:<text style="color: #fd5d00;">￥{{ item.offer }}起&nbsp;&nbsp;</text>
                              </view>
                              <view class="company-list-item-main-right-number">
                                清运数：<text class="company-list-item-main-right-number-text">{{ item.cleanNumber }}</text>
                              </view>
                            </view>
                          </view>
                          <view class="company-list-item-bottom-contact-company"
                            style="display: flex; align-items: center;">
                            <up-icon name="phone" size="34" color="#19a97c"></up-icon>
                            <view @click.stop="handleContactClick(item.servicePhone)"
                              style="display: flex; justify-content: center; align-items: center;font-size: 28rpx; color:'#a9e08f'">
                              {{ item.servicePhone }}
                            </view>
                          </view>
                        </view>
                        <view class="company-list-item-main-right-box"
                          style="display: flex;font-size: 28rpx; justify-content: flex-end; align-items: flex-end;color:#458B74;font-weight: bold;">
                          <view class="company-list-item-main-right-box-text"
                            @click.stop="handleCleanGarbage(item, item.servicePhone, userAddress)">
                            预约清运 ->
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="company-list-item-bottom">
                  </view>
                </view>
              </z-paging>
            </view>
          </view>
        </view>
        <view class="company-empty" v-else @click="handleCleanClick">
          <view class="empty-text-title">
            {{ prompt }}
          </view>
          <view class="empty-text-content">
            房屋装饰装修过程中产生的砖瓦、木材、熟料等废弃物
          </view>
          <view class="empty-text-box">
            <view class=" empty-text-box-button">
              {{ userType == '用户' ? '立即清运' : '身份切换' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { queryAddress } from '@/apis/address.js';
import { queryEnterpriseList } from '@/apis/company.js';
import { queryRole } from "@/apis/user";
import { useMainStore } from "@/stores/index.js";
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
const mainStore = useMainStore()
const userType = computed(() => mainStore.userType);
const prompt = computed(() => userType.value == '用户' ? "请先添加地址" : '非用户无法下单')
// 定义最大积分
let maxScore = 5
const maxStar = ref([]);
const lightHeight = ref();//胶囊按钮信息
const topMargin = ref(null);//状态栏高度
const musicheadHeight = ref();
const paging = ref(null)
const swiperImageList = ref([{
  image: import.meta.env.VITE_BASE_URL + "/swiper-1.jpg"
}, {
  image: import.meta.env.VITE_BASE_URL + "/swiper-2.jpg"
}])

const userAddress = ref({})
const addressInfo = ref()
const sortValue = ref(0)
const registrationAreaValue = ref('')
const registrationAreaRealValue = ref('')
const carTypeValue = ref('')
const carTypeRealValue = ref('')
const dropdownOptions = ref([
  [{
    label: '芙蓉区',
    value: '芙蓉区',
  },
  {
    label: '天心区',
    value: '天心区'
  },
  {
    label: '岳麓区',
    value: '岳麓区'
  },
  {
    label: '开福区',
    value: '开福区'
  },
  {
    label: '雨花区',
    value: '雨花区'
  },
  {
    label: '望城区',
    value: '望城区'
  },
  {
    label: '长沙县',
    value: '长沙县'
  },
  {
    label: '浏阳市',
    value: '浏阳市'
  },
  {
    label: '宁乡市',
    value: '宁乡市'
  }
  ], [{
    label: '暂未开放',
    value: '暂未开放',
  },]
  , [{
    label: '距离排序',
    value: 0,
  },
  {
    label: '清运排序',
    value: 1
  },
  {
    label: '评价排序',
    value: 2
  }]
])

// 信息指南
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 handlerCLickInfoBox = (val) => {
  switch (val) {
    case '用户指南':
      uni.$u.route('/pages/home-info/user-guide/index')
      break;

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

/**
 * 下拉框改变
 * @param {number} val
 */
const handleDropdownSortChange = (val) => {
  sortValue.value = val;
  // 重新获取列表
  paging.value.reload()
}
const handleDropdownAreaChange = (val) => {
  if (registrationAreaRealValue.value == val) {
    registrationAreaValue.value = ''
    registrationAreaRealValue.value = ''
    // 重新获取列表
    paging.value.reload()
    return
  }
  registrationAreaRealValue.value = val;
  // 重新获取列表
  paging.value.reload()
}
const handleDropdownCarChange = (val) => {
  if (carTypeRealValue.value == val) {
    carTypeValue.value = ''
    carTypeRealValue.value = ''
    // 重新获取列表
    paging.value.reload()
    return
  }
  carTypeRealValue.value = val;
  // 重新获取列表
  paging.value.reload()
}
/**
 * 跳转地址
 */
function handleAddressInfo() {
  uni.$u.route({
    url: `pages/home-info/address/index`,
  })
}
const handleCleanClick = () => {
  // 判断用户是否登录 没有登陆要求登录
  if (uni.getStorageSync("cancelFlag")) {
    // 请登录
    uni.showModal({
      title: '提示',
      content: "请登录",
      success: function (res) {
        if (res.confirm) {
          // 重定向到登录页面
          uni.setStorageSync("cancelFlag", false);
          uni.reLaunch({
            url: "/pages/login/index",
          })
        } else if (res.cancel) {
          console.log('用户点击取消');
          // 设置本地缓存，表示已经登录
          uni.setStorageSync("cancelFlag", true);
        }
      }
    });
  } else {
    // 用户已登录但是没有清运地址的情况
    if (userType.value == '用户') {
      uni.showModal({
        title: '提示',
        content: prompt.value,
        success: function (res) {
          if (res.confirm) {
            uni.$u.route({
              url: `pages/home-info/address/index`,
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    } else {
      uni.showModal({
        title: '提示',
        content: '是否进行身份切换？',
        success: function (res) {
          if (res.confirm) {
            queryRole().then(res => {
              uni.$u.route({
                url: `pages/wode/choose/index?ruleVos= ${encodeURIComponent(JSON.stringify(res.data.data.ruleVos))}`,
              })
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
  return
}
/**
 * 公司详情
 */
function handleDetailClick(company, tel, userAddress) {
  uni.$u.route({
    url: `pages/home-info/clean/company-detail/index?companyObj=${JSON.stringify(company)}&tel=${tel}&userAddress=${userAddress}`,
  })
}

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

/**
 * 搜索
 */
const handleSearchClick = (e) => {
  uni.$u.route({
    url: `pages/home-info/search/index`,
  })
}

/**
 * 计算胶囊高度
 */
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 refreshPage = () => {
  initData();
}

const initData = () => {
  userAddress.value = null;
  // 查询用户当前地址
  queryAddress('CURRENT').then(res => {
    try {
      if (res.data.data && res.data.data[0]) {
        addressInfo.value = res.data.data[0].garRemark
        userAddress.value = JSON.stringify(res.data.data[0] ? res.data.data[0] : {});
      } else {
        addressInfo.value = '';
        userAddress.value = {};
      }
    } catch (error) {
      console.log("请求失败", error);
      addressInfo.value = '';
      userAddress.value = {};
    }
  })
}
const queryList = (pageNo, pageSize) => {
  let query = {
    companyType: 1,
    pageNum: pageNo,
    pageSize,
    orderByColumn: sortValue.value,
    registrationArea: registrationAreaValue.value,
    searchValue: carTypeValue.value
  }
  // 查询公司信息
  queryEnterpriseList(query).then(res => {
    paging.value.complete(res.data.data.list);
  })
}
</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;
      background-size: 100% 100% !important;

      .u-swiper__wrapper {
        height: 400rpx !important;
        background-size: 100% 100% !important;
      }

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

        &>div {
          background-size: 100% 100% !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;
      @include handleClick;

      .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: 300rpx;
    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);
        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: 28rpx;
          }
        }
      }

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

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

          .company-list-header-left {
            text-align: center;
            margin-bottom: 15rpx;
          }

          .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 {
                  flex: auto;
                  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: $u-main-color;
                    font-size: 30rpx;
                    display: flex;
                    line-height: 20rpx !important;

                    .company-list-item-main-right-name-label-recently {
                      margin-right: 10rpx;
                      font-size: 18rpx;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      padding: 8rpx 13rpx;
                      box-sizing: border-box;
                      border-radius: 25rpx;
                      background: #19a97c;
                      color: #ffffff
                    }

                    .company-list-item-main-right-name-label-distance {
                      margin-right: 10rpx;
                      font-size: 18rpx;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      padding: 8rpx 13rpx;
                      box-sizing: border-box;
                      border-radius: 25rpx;
                      background: #deab11;
                    }

                    .company-list-item-main-right-name-label-name {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 30rpx;
                      overflow-x: visible;
                    }
                  }

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

                    .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-between;
                    align-items: center;
                    font-size: 28rpx;

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

                    .company-list-item-main-right-number {
                      flex: auto;


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

                }
              }

              .company-list-item-bottom {
                display: flex;
                justify-content: space-around;
                font-size: 28rpx;
                color: #909399;
                margin-bottom: 50rpx;

                .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;
                }
              }
            }
          }
        }
      }
    }
  }
}

.click-box {
  @include handleClick;
}

.company-label-title-box {
  width: 100%;

  .company-label-title-top {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .company-label-title-top-left {
      width: 100%;
    }

    .company-label-title-top-right {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>