VAVABUY/pages/purpose/record.vue

<template>
  <theme>
    <view class="wrap">
      <Navbar title="意向记录" fixed border> </Navbar>
      <view class="content">
        <List url="/rongimcall/froms/lists" ref="listRef" @datas="getList">
          <template #item="{ item }">
            <view class="item_card">
              <ImageGrid
                :images="urlStrToArr(item.goods_imgs)"
                isSeeLarge
                v-if="item.goods_imgs"
              />
              <view class="item_header">
                <view class="goods_info">
                  <view class="goods_name">{{ item.goods_name }}</view>
                  <view class="goods_desc" v-if="item.goods_desc">
                    {{ item.goods_desc }}
                  </view>
                </view>
              </view>

              <view class="item_content">
                <view class="price_section">
                  <view class="price_label"><trans _t="价格区间" />：</view>
                  <view class="price_value">
                    <text v-if="item.min_price && item.max_price">
                      {{ symbol.symbol }}&nbsp;{{ Moneyhtml(item.min_price) }} -
                      {{ symbol.symbol }}&nbsp;{{ Moneyhtml(item.max_price) }}
                    </text>
                    <text v-else-if="item.min_price">
                      <trans _t="最低价" />：{{ symbol.symbol }}&nbsp;{{
                        Moneyhtml(item.min_price)
                      }}
                    </text>
                    <text v-else-if="item.max_price">
                      <trans _t="最高价" />：{{ symbol.symbol }}&nbsp;{{
                        Moneyhtml(item.max_price)
                      }}
                    </text>
                  </view>
                </view>

                <view class="quantity_section" v-if="item.goods_num">
                  <view class="quantity_label"><trans _t="购买数量" />：</view>
                  <view class="quantity_value">{{ item.goods_num }}</view>
                </view>
              </view>

              <!-- 联系人信息 -->
              <view class="item_footer">
                <view class="contact_info">
                  <view class="contact_item">
                    <text class="contact_label"
                      ><trans _t="联系人姓名" />：</text
                    >
                    <text class="contact_value">{{ item.name }}</text>
                  </view>
                  <view class="contact_item">
                    <text class="contact_label"
                      ><trans _t="联系人电话" />：</text
                    >
                    <text class="contact_value">{{ item.mobile }}</text>
                  </view>
                </view>
                <view class="item_time">
                  <text class="time_text">{{
                    useGlobal().$format(item.indate)
                  }}</text>
                </view>
              </view>
            </view>
          </template>
        </List>
      </view>
    </view>
  </theme>
</template>

<script setup>
import Navbar from "@/components/navbar";
import List from "@/components/list";
import ImageGrid from "@/components/ImageGrid";
import { computed, ref, nextTick } from "vue";
import { t } from "@/locale";
import { onShow } from "@dcloudio/uni-app";
import { useGlobal, urlStrToArr, Moneyhtml } from "@/utils";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const listRef = ref(null);
const dataList = ref([]);

const getList = (list) => {
  dataList.value = list;
};

onShow(() => {
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
});
</script>

<style lang="less" scoped>
@import url("@/style.less");
.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    flex-grow: 1;
    height: calc(100vh - 44px);
    flex-direction: column;
    padding: 24rpx;
    box-sizing: border-box;

    .item_card {
      background: var(--card-bg, #fff);
      border-radius: 20rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0px 4rpx 20rpx 0px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-color, #f0f0f0);

      .item_header {
        display: flex;
        margin-bottom: 20rpx;

        .goods_images {
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          border-radius: 12rpx;
          overflow: hidden;
          background: var(--bg-light, #f8f9fa);
          flex-shrink: 0;

          .main_image {
            width: 100%;
            height: 100%;
          }

          .no_image {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-light, #f8f9fa);

            .no_image_text {
              color: var(--text-light, #999);
              .size(20rpx);
            }
          }
        }

        .goods_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .goods_name {
            color: var(--text);
            .size(28rpx);
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 8rpx;
            word-wrap: break-word;
            word-break: break-all;
          }

          .goods_desc {
            color: var(--text-light, #666);
            .size(24rpx);
            line-height: 1.4;
            word-wrap: break-word;
            word-break: break-all;
          }
        }
      }

      .item_content {
        margin-bottom: 20rpx;
        padding: 16rpx 0;
        border-top: 1px solid var(--border-light, #f0f0f0);
        border-bottom: 1px solid var(--border-light, #f0f0f0);

        .price_section {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .price_label {
            color: var(--text-light, #666);
            .size(24rpx);
            margin-right: 12rpx;
            min-width: 120rpx;
          }

          .price_value {
            color: var(--red);
            .size(26rpx);
            font-weight: 600;
          }
        }

        .quantity_section {
          display: flex;
          align-items: center;

          .quantity_label {
            color: var(--text-light, #666);
            .size(24rpx);
            margin-right: 12rpx;
            min-width: 120rpx;
          }

          .quantity_value {
            color: var(--text);
            .size(26rpx);
            font-weight: 500;
          }
        }
      }

      .item_footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .contact_info {
          flex: 1;

          .contact_item {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .contact_label {
              color: var(--text-light, #666);
              .size(22rpx);
              margin-right: 12rpx;
              min-width: 100rpx;
            }

            .contact_value {
              color: var(--text);
              .size(24rpx);
              font-weight: 500;
            }
          }
        }

        .item_time {
          .time_text {
            color: var(--text-light, #999);
            .size(20rpx);
          }
        }
      }
    }

    .null_warp {
      .null_text {
        min-height: 100rpx;
        .flex_center();
        .size(28rpx);
        color: #333;
      }
    }
  }
}
</style>