daimp-front/sub-operation-service/src/views/farmingService/farmingConsult/agriculturalMachinery.vue

<template>
  <div>
    <common>
      <template #main>
        <el-card style="border-radius: 16px">
          <div class="choose">
            <div class="searchType">整机类型</div>
            <div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">全部</div>
            <div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">收割机</div>
            <div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">插秧机</div>
            <div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">播种机</div>
            <div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">烘干机</div>
            <div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">喷雾机</div>
            <div :class="{ active: chooseMoney === 6 }" class="chooseItem" @click="changeChoose('money', 6)">饲料机</div>
            <div :class="{ active: chooseMoney === 7 }" class="chooseItem" @click="changeChoose('money', 7)">拖拉机</div>
            <div :class="{ active: chooseMoney === 8 }" class="chooseItem" @click="changeChoose('money', 8)">其他</div>
          </div>
          <div style="align-items: center" class="choose">
            <div class="searchType">地理位置</div>
            <div style="margin-left: 20px">
              <el-cascader v-model="postArea" style="width: 100%" :props="props" :options="options" @change="handleChange" />
            </div>
            <div style="margin-left: 20px">
              <el-input v-model="address" placeholder="输入详细位置" />
            </div>
          </div>
          <div style="align-items: center" class="choose">
            <div class="searchType">用车时间</div>
            <div style="margin-left: 20px">
              <el-date-picker v-model="value2" type="date" placeholder="开始日期" :size="size" />
            </div>
            <div style="margin-left: 20px">
              <el-date-picker v-model="value3" type="date" placeholder="结束日期" :size="size" />
            </div>
          </div>
          <div style="align-items: center" class="choose">
            <div class="searchType">价格区间</div>
            <div style="margin-left: 20px">
              <el-input v-model="price1" placeholder="最低价格/天" />
            </div>
            <div style="margin-left: 20px">~</div>
            <div style="margin-left: 20px">
              <el-input v-model="price2" placeholder="最高价格/天" />
            </div>
          </div>
        </el-card>
        <div style="margin-top: 20px">
          <el-card shadow="hover" style="border-radius: 16px; margin-top: 10px; background-color: #f5f5f5">
            <!-- <h2 style="text-align: left">农业政策</h2> -->
            <div style="width: 100%">
              <div v-for="(item, index) in tableData" :key="index" class="card-item">
                <div style="width: 100%; display: flex; align-items: center; justify-content: center">
                  <img :src="item.imgPath" alt="" width="200px" style="height: 200px" />
                </div>
                <div style="width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0 20px">
                  <div>
                    <div style="font-size: 16px; font-weight: bold; margin-top: 5px">{{ item.title }}</div>
                    <div style="font-size: 14px; margin-top: 5px">
                      {{ item.subtext }}
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="font-size: 12px">
                        <text style="color: #25bf82; font-size: 15px; font-weight: bold">{{ item.price }}</text
                        >元/天
                      </div>
                      <div style="font-size: 12px">可用时间：{{ item.time }}</div>
                    </div>
                  </div>
                  <div style="width: 100%; display: flex; justify-content: space-between; margin-top: 5px">
                    <div style="display: flex; align-items: center">
                      <img style="width: 20px; height: 20px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
                      <div style="margin-left: 5px">{{ item.name }}</div>
                    </div>
                    <el-button style="height: 30px; background-color: #25bf82; color: #ffffff; border-radius: 16px" @click="goDetail(item.id)"
                      >立即预约</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </template>
    </common>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import common from '../components/common.vue';
import { getAssetsFile } from '@/utils/index.js';
import { useRouter } from 'vue-router';
import { informationList } from '@/apis/farmingService.js';
import options from '../../../assets/address.json';
import { ElMessage } from 'element-plus';
const router = useRouter();
let postArea = ref('');
let address = ref('');
let value2 = ref('');
let value3 = ref('');
let price1 = ref('');
let price2 = ref('');
const props = ref({
  value: 'label',
});

/* --------------- data --------------- */
// #region

const tableData = ref([
  {
    id: 1,
    title: '东风牌 1204 型拖拉机',
    subtext: '拖拉机·广安市岳池县',
    price: '1800',
    time: '全年',
    name: '王师傅',
    imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/1.png',
  },
  {
    id: 2,
    title: '久保田 4LZ-5A1 收割机',
    subtext: '收割机·广安市武胜县',
    price: '2500',
    time: '7-9月',
    name: '李师傅',
    imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/2.png',
  },
  {
    id: 3,
    title: '洋马 VP6D 高速插秧机',
    subtext: '插秧机·广安市邻水县',
    price: '1600',
    time: '4-5月',
    name: 'w王师傅',
    imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/3.png',
  },
  {
    id: 4,
    title: '约翰迪尔 9B 播种机',
    subtext: '播种机·广安市广安区',
    price: '1200',
    time: '3-4月',
    name: '赵师傅',
    imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/2.png',
  },
]);
const chooseMoney = ref(0);
const chooseDate = ref(0);
const chooseWay = ref(0);
const chooseUse = ref(0);
const chooseType = ref(0);

const pagination = ref({
  total: 0,
  page: 1,
  size: 10,
});

// #endregion

/* --------------- methods --------------- */
// #region
onMounted(() => {
  //   queryList();
});

const extractText = (htmlText, maxChars = 80) => {
  // 去除 HTML 标签
  const cleanText = htmlText.replace(/<[^>]+>/g, '');
  // 去除多余空格和换行
  const trimmedText = cleanText.replace(/\s+/g, ' ').trim();
  // 取前 20 个字
  return trimmedText.substring(0, maxChars);
};

const queryList = () => {
  informationList({ current: pagination.value.page, size: pagination.value.size }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.records;
      for (let i in res.data.records) {
        tableData.value[i].content = extractText(res.data.records[i].content);
        if (tableData.value[i].content.length > 80) {
          tableData.value[i].content += '...';
        }
      }
    }
  });
};

const changeChoose = (type, index) => {
  switch (type) {
    case 'money':
      chooseMoney.value = index;
      break;
    case 'date':
      chooseDate.value = index;
      break;
    case 'way':
      chooseWay.value = index;
      break;
    case 'use':
      chooseUse.value = index;
      break;
    case 'type':
      chooseType.value = index;
      break;
  }
  //   getList();
};

const goDetail = (id) => {
  ElMessage({
    message: '功能正在维护中，请稍后点击',
    type: 'warning',
  });
  // router.push('/sub-operation-service/farmService/consult/laborServicesDel?id=' + id);
};
// #endregion
</script>

<style lang="scss" scoped>
.framing_service_content {
  margin: 0 auto;
  padding: 0 32px;
  width: 1200px;
  min-height: 600px;
  border: 1px solid skyblue;
  box-sizing: border-box;
}
.card-item {
  border-radius: 10px;
  padding: 10px 0;
  background-color: #fff;
  float: left;
  width: 250px;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  margin: 20px 0;
  text-align: left;
  margin-left: 30px;
}
.choose {
  display: flex;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .searchType {
    color: #999999;
  }
  .chooseAll {
    margin: 0 30px;
    cursor: pointer;
  }
  .chooseItem {
    cursor: pointer;
    margin-right: 20px;
  }
}
.active {
  color: #25bf82;
  font-weight: bold;
}
</style>