freight-ts-dy-web/src/pagesVehicle/index.vue

<template>
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 入口 -->
  <view class="entry-card">
    <uni-card
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
    >
      <uni-grid :column="4" :showBorder="false" :square="false">
        <uni-grid-item v-for="(item, index) in entryItemList" :key="index">
          <view class="item">
            <view @click="handleClick(item)">
              <view>
                <image :src="`${url}/static/img/vehicle/${item.path}`"></image>
              </view>
              <view>
                <text class="text">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-card>
  </view>
  <!-- 介绍 -->
  <view class="avatar-card">
    <uni-card
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
    >
      <view class="title">服务项目</view>
      <uni-grid :column="2" :showBorder="false" :square="false">
        <uni-grid-item
          class="item"
          v-for="(item, index) in serviceItemList"
          :key="index"
        >
          <view class="item">
            <uni-card
              :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
              :padding="'0px'"
              :margin="'5px'"
              :border="false"
            >
              <view style="background-color: #e8edff">
                <image
                  mode="aspectFill"
                  :src="`${url}/static/img/vehicle/${item.path}`"
                ></image>
              </view>
              <view class="text-box">
                <text class="text">{{ item.name }}</text>
              </view>
            </uni-card>
          </view>
        </uni-grid-item>
      </uni-grid>

      <!-- 常见问题 -->
      <view class="title mt-20 mb-20">常见问题</view>
      <view class="commonQ">
        <view v-for="(item, index) in questionList" :key="index">
          <view class="question">{{ item.q }}</view>
          <view class="answer">{{ item.a }}</view>
        </view>
      </view>

      <view class="other">
        <view>其他问题请咨询客服电话</view>
        <view
          ><text @click="callNumber('15150231777')" class="active"
            >15150231777 &nbsp;&nbsp;欢迎咨询</text
          ></view
        >
      </view>
    </uni-card>
    <OpOnline />
  </view>
</template>

<script setup lang="ts">
import CustomSwiper from "@/components/CustomSwiper/index.vue";
import OpOnline from "@/components/OpOnline/index.vue";
import { url } from "@/utils/data";
import { useMemberStore } from "@/store/index";
import pinia from "@/store";
const store = useMemberStore(pinia);
const bannerList = [
  {
    imgUrl: "v-a1.png",
  },
];

const entryItemList = ref([
  {
    path: "1.png",
    name: "回收流程",
    url: "/pagesVehicle/recycleFlow",
  },
  {
    path: "2.png",
    name: "所需材料",
    url: "/pagesVehicle/requiredMaterials",
  },
  {
    path: "3.png",
    name: "我要询价",
    url: "/pagesVehicle/inquiry",
  },
  {
    path: "4.png",
    name: "我要登记",
    url: "/pagesVehicle/regisList",
  },
]);
const serviceItemList = ref([
  {
    path: "e1.png",
    name: "报废车辆回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e2.png",
    name: "报废工程车回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e3.png",
    name: "报废校车回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e4.png",
    name: "报废中巴回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e5.png",
    name: "报废大巴车回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e6.png",
    name: "报废货车回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e7.png",
    name: "报废油罐车回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "e8.png",
    name: "报废事故车回收",
    url: "/pagesVehicle/index",
  },
]);

const questionList = ref([
  {
    q: "1、车辆达到报废标准后还能继续使用吗？",
    a: "不能。驾驶已达报废标准的机动车在道路上行驶的，处500-2000元罚款，收缴车辆，强制报废，并吊销驾驶证。",
  },
  {
    q: "2、车辆是否可以当作破烂直接卖掉？",
    a: "不可以，机动车报废需到正规的机动车回收拆解企业办理。",
  },
  {
    q: "3、如果车辆在外地，无法开回本地进行报废，应该如何处理？",
    a: "车主持身份证明、行驶证、登记证书及车辆到当地符合资质的机动车回收拆解企业办理。车辆拆解后，注册地车辆管理所在一个工作日内受理并出具《机动车注销证明》。",
  },
  {
    q: "4.如果车辆存在违法或事故信息，可以申请报废吗？",
    a: "存过车辆存在违法或事故信息，需要先处理完毕，才能进一步申请报废。",
  },
  {
    q: "5、如果车主无法联系上，车辆可以如何申请报废？",
    a: "如果车主无法联系上，可以由机动车所有人提出注销申请，并填写承担相关法律责任承诺书，公安交管部门经系统核查2年以内车辆无运行轨迹、无违法信息、无事故信息的，按照灭失情形办理注销登记。",
  },
]);

const handleClick = (item: any) => {
  if (item.name === "我要询价" || item.name === "我要登记") {
    if (!store.profile.token) {
      uni.navigateTo({
        url: '/pagesLogin/index', // 要跳转到的页面路径
      });
      return
    }
  }
  uni.navigateTo({
    url: item.url, // 要跳转到的页面路径
  });
};

const callNumber = (number: any) => {
  // 判断是否为移动端
  if (
    uni.getSystemInfoSync().platform === "android" ||
    uni.getSystemInfoSync().platform === "ios"
  ) {
    // 在移动端使用内置拨号程序进行拨号
    uni.makePhoneCall({
      phoneNumber: number, // 电话号码
      success: function () {
        console.log("拨号成功");
      },
      fail: function (err) {
        console.error("拨号失败：", err);
      },
    });
  } else {
    // 在桌面端或者其他平台，可以直接使用window.open打开拨号链接
    window.open("tel:" + number);
  }
};
</script>

<style lang="scss" scoped>
.entry-card {
  .item {
    text-align: center;
    image {
      width: 74rpx;
      height: 76rpx;
    }
    .text {
      font-size: 28rpx;
      font-weight: 400;
      line-height: 42rpx;
    }
  }
}

.avatar-card {
  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: #282728;
    text-align: center;
    line-height: 80rpx;
  }
  ::v-deep .uni-card--shadow {
    padding: 0px !important;
  }
  ::v-deep .uni-grid {
    justify-content: space-evenly !important;
  }
  .item {
    text-align: center;
    image {
      width: 100%;
      height: 180rpx;
    }
    .text-box {
      background-color: #e8edff;
      font-weight: 400;
      color: #011b7d;
      font-size: 28rpx;
      padding-bottom: 20rpx;
      margin-top: -10rpx;
    }
  }

  .commonQ {
    .question {
      font-size: 32rpx;
      color: #000;
      font-weight: bold;
    }
    .answer {
      font-size: 30rpx;
      color: rgba(0, 0, 0, 0.55);
    }
  }

  .other {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    .active {
      color: $u-primary;
    }
  }
}
</style>