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

<template>
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 介绍 -->
  <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>
      <view class="freight">
        <view v-for="(item, index) in list" :key="index">
          <view>
            <image
              mode="aspectFill"
              :src="`${url}/static/img/steel/${item.path}`"
            ></image>
          </view>
          <view class="text">
            <view>主营业务：{{ item.business }}</view>
            <view>货场名称：{{ item.name }}</view>
            <view>货场地址：{{ item.address }}</view>
            <view
              >联系电话：{{ item.owner }} &nbsp;&nbsp;<text
                @click="callNumber(item.phone)"
                class="active"
                >{{ item.phone }} &nbsp;&nbsp;欢迎询价</text
              ></view
            >
          </view>
        </view>
      </view>

      <view style="margin: 60rpx 0rpx 30rpx 0rpx">
        <up-gap height="10" bgColor="#F8F8F8"></up-gap>
      </view>

      <view class="title">合作案例</view>
      <view class="mt-30 mb-30">
        <uni-grid :column="2" :showBorder="false" :square="false">
          <uni-grid-item
            class="item"
            v-for="(item, index) in serviceItemList"
            :key="index"
          >
            <view>
              <image
                mode="aspectFill"
                :src="`${url}/static/img/steel/${item.path}`"
              ></image>
            </view>
          </uni-grid-item>

          <view class="mt-30 mb-30" style="width: 60%">
            <view
              ><u-button type="primary" shape="circle" @click="handleJoin"
                >加入爱梵达</u-button
              ></view
            >
          </view>
          <view class="mt-30 mb-30">爱梵达智能过磅系统，提升您的经营效率</view>
        </uni-grid>
      </view>
    </uni-card>
  </view>
</template>

<script setup lang="ts">
import { url } from "@/utils/data";
import CustomSwiper from "@/components/CustomSwiper/index.vue";

const bannerList = [
  {
    imgUrl: "s-a1.png",
  },
];

const list = ref([
  {
    path: "f1.png",
    business:
      "长期回收废钢（轻一、轻二、轻三、重废、钢板料等）、废纸、泡沫、塑料等，量大价优，欢迎来电咨询。",
    name: "在生万有-中悦犇站",
    address: "上海市奉贤区川南奉公路8598号",
    owner: "刘先生",
    phone: "13651779998",
  },
  {
    path: "f2.png",
    business:
      "长期回收重废、中废、轻废、小废、岩棉板、花盒等，量大价优，欢迎来电咨询。",
    name: "上海宽钢公司",
    address: "上海市宝山区兰岗路2号门",
    owner: "李女士",
    phone: "13601647155",
  },
]);

const serviceItemList = ref([
  {
    path: "c1.png",
    name: "锂电池包",
    url: "/pagesVehicle/index",
  },
  {
    path: "c2.png",
    name: "锂电模组",
    url: "/pagesVehicle/index",
  },
  {
    path: "c3.png",
    name: "极片",
    url: "/pagesVehicle/index",
  },
  {
    path: "c4.png",
    name: "电芯",
    url: "/pagesVehicle/index",
  },
]);

const handleJoin = () => {
  uni.navigateTo({
    url: "/pagesScrapSteel/registration", // 要跳转到的页面路径
  });
};

const callNumber = (number:any) => {
  // 判断是否为移动端
  if (
    uni.getSystemInfoSync().platform === "android" ||
    uni.getSystemInfoSync().platform === "ios"
  ) {
    // 在移动端使用内置拨号程序进行拨号
    // my.makePhoneCall({ number: '1111111' }); 支付宝
    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>
.avatar-card {
  .freight {
    margin-top: 30rpx;
    > view {
      background: #f3faff;
      box-shadow: 0rpx 7rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 13rpx;
      image {
        width: 100%;
        border-radius: 20rpx;
      }
      .text {
        font-size: 28rpx;
        color: #000000;
        line-height: 42rpx;
        padding: 0px 10px 10px 10px;
        .active {
          color: $u-primary;
        }
      }
    }
    > view + view {
      margin-top: 30rpx;
    }
  }
  .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;
    }
  }
}
</style>