EpicSoul/subPackages/equityGoods/list.vue

<template>
  <view class="equity-goods-page">
    <image
      style="width: 100%"
      mode="widthFix"
      :src="showImg('/uploads/20250728/748adc244fc7db313f569a6005344950.png')"
    ></image>
    <view class="location-selector">
      <text class="location-text">扬州</text>
      <image
        class="dropdown-icon"
        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDEiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
        mode="heightFix"
      ></image>
    </view>
    <!-- 顶部标题区域 -->
    <view class="header-section">
      <view class="title">扬州数字资产权益产品</view>
      <view class="filter-buttons">
        <view class="filter-btn">最新上架</view>
        <view class="filter-btn">销量</view>
      </view>
    </view>

    <!-- 商品网格 -->
    <view class="products-grid">
      <view
        class="product-item"
        :style="{
          'border-width':
            index == productList.length - 1 || index == productList.length - 2
              ? 0
              : '0.5rpx',
        }"
        v-for="(item, index) in productList"
        :key="index"
        @click="goToDetail(item)"
      >
        <image
          class="product-image"
          :src="item.image"
          mode="aspectFill"
        ></image>
        <view class="product-info">
          <view class="product-title">{{ item.title }}</view>
          <view class="product-price-box">
            <view class="product-price">{{ item.price }}</view>
            <view class="">
              <image
                class="heart-icon"
                src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png"
              >
              </image>
              <!-- <image
         		   v-else
         		   class="heart-icon"
         		   src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png"
         		   @click.stop="handleLikeClick(item, index)"
         		 ></image> -->
              <image
                class="shop-icon"
                src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png"
              >
              </image>
              <!-- 	<image
         		 	  v-else
         		 	  class="shop-icon"
         		 	  src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png"
         		 	  @click.isShop="handleLikeClick(item, index)"
         		 	></image> -->
            </view>
          </view>
          <view class="product-details">
            <text class="detail-item">{{ item.limitInfo }}</text>
            <text class="detail-item">{{ item.paymentInfo }}</text>
            <text class="detail-item">{{ item.viewInfo }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部地图区域 -->
    <view class="map-section">
      <view class="map-title" @click="showReservationPopup"
        >业务办理 | 预约参观</view
      >
      <view class="map-container">
        <map
          class="map-component"
          :latitude="mapData.latitude"
          :longitude="mapData.longitude"
          :scale="mapData.scale"
        ></map>
      </view>
      <view class="map-description">
        <view class="location-info">
          <image
            class="location-icon"
            :src="
              showImg('/uploads/20250728/56804fe109efd614ba955d3110cd6750.png')
            "
            mode="widthFix"
          ></image>
          <text class="location-name"
            >国家文化大数据华东区域交易平台扬州运营中心</text
          >
        </view>
      </view>
    </view>

    <!-- 预约参观弹窗 -->
    <uni-popup ref="reservationPopup" type="center">
      <view class="reservation-popup">
        <view class="popup-header">
          <text class="popup-title">预约参观</text>
          <text class="popup-close" @click="closeReservationPopup">×</text>
        </view>
        <view class="popup-content">
          <view class="input-section">
            <text class="input-label">姓名</text>
            <input
              class="reservation-input"
              v-model="reservationForm.name"
              placeholder="请输入您的姓名"
              maxlength="10"
            />
          </view>
          <view class="input-section">
            <text class="input-label">手机号</text>
            <input
              class="reservation-input"
              v-model="reservationForm.phone"
              placeholder="请输入手机号码"
              type="number"
              maxlength="11"
            />
          </view>
          <view class="popup-actions">
            <button class="cancel-btn" @click="closeReservationPopup">
              取消
            </button>
            <button class="confirm-btn" @click="confirmReservation">
              确认预约
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "EquityGoodsList",
  mixins: [require("@/mixins/myMixins.js")],
  data() {
    return {
      productList: [
        {
          id: 1,
          title: "食在扬州｜世界美食之都巡礼",
          price: "699.00",
          image:
            "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800",
          isLiked: false,
          limitInfo: "限量发售 x 1000份",
          paymentInfo: "100+付款",
          viewInfo: "浏览10W",
        },
        {
          id: 2,
          title: "二十四桥｜诗意之城",
          price: "588.00",
          image:
            "https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=800",
          isLiked: true,
          limitInfo: "限量发售 x 1000份",
          paymentInfo: "100+付款",
          viewInfo: "浏览10W",
        },
        {
          id: 3,
          title: "以手抄心｜书法体验",
          price: "699.00",
          image:
            "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?auto=format&fit=crop&w=800",
          isLiked: false,
          limitInfo: "限量发售 x 1000份",
          paymentInfo: "100+付款",
          viewInfo: "浏览10W",
        },
        {
          id: 4,
          title: "世界花园｜诗学之旅",
          price: "588.00",
          image:
            "https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=800",
          isLiked: false,
          limitInfo: "限量发售 x 1000份",
          paymentInfo: "100+付款",
          viewInfo: "浏览10W",
        },
      ],
      heartIcon:
        "https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png",
      heartFilledIcon:
        "https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png",
      cartIcon:
        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=100",
      mapData: {
        latitude: 31.2989,
        longitude: 120.5853,
        scale: 17,
      },
      // 预约表单数据
      reservationForm: {
        name: "",
        phone: "",
      },
    };
  },
  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPackages/equityGoods/detail?id=${item.id}`,
      });
    },
    toggleLike(item, index) {
      this.productList[index].isLiked = !this.productList[index].isLiked;
      uni.showToast({
        title: this.productList[index].isLiked ? "已收藏" : "取消收藏",
        icon: "none",
      });
    },
    addToCart(item) {
      uni.showToast({
        title: "已加入购物车",
        icon: "success",
      });
    },
    // 显示预约弹窗
    showReservationPopup() {
      this.$refs.reservationPopup.open();
    },
    // 关闭预约弹窗
    closeReservationPopup() {
      this.$refs.reservationPopup.close();
      // 清空表单
      this.reservationForm.name = "";
      this.reservationForm.phone = "";
    },
    // 确认预约
    async confirmReservation() {
      // 表单验证
      if (!this.reservationForm.name.trim()) {
        uni.showToast({
          title: "请输入姓名",
          icon: "none",
        });
        return;
      }

      if (!this.reservationForm.phone.trim()) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.reservationForm.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }

      try {
        uni.showLoading({
          title: "提交中...",
        });

        // 提交预约信息
        await this.submitReservation(this.reservationForm);

        uni.hideLoading();
        uni.showToast({
          title: "预约成功！",
          icon: "success",
        });

        this.closeReservationPopup();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: "预约失败，请重试",
          icon: "none",
        });
      }
    },
    // 提交预约信息（模拟API）
    async submitReservation(formData) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟API调用
          console.log("预约信息:", formData);
          resolve({
            success: true,
            message: "预约成功",
          });
        }, 1500);
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.equity-goods-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.header-section {
  padding: 60rpx 30rpx 30rpx;

  .title {
    font-size: 36rpx;
    color: #000000;
    text-align: center;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    font-weight: 500;
    border-bottom: 0.5rpx solid #999999;
  }

  .filter-buttons {
    display: flex;
    justify-content: space-between;
    gap: 40rpx;

    .filter-btn {
      font-size: 28rpx;
      color: #000000;
      border-radius: 20rpx;
      transition: all 0.3s;

      &.active {
        background: #007aff;
        color: white;
      }
    }
  }
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 30rpx;

  .product-item {
    overflow: hidden;
    border-bottom: 0.5rpx solid #999999;
    margin-bottom: 15rpx;
    padding-bottom: 20rpx;
    &:active {
      transform: scale(0.98);
    }

    .product-image {
      width: 100%;
      height: 429rpx;
      object-fit: cover;
      border-radius: 20rpx;
    }

    .product-info {
      padding: 20rpx 0;

      .product-title {
        font-size: 22rpx;
        color: #000000;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
      }

      .product-price {
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
      }

      .product-details {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .detail-item {
          font-size: 16rpx;
          color: #808080;
        }
      }
    }
  }
}

.map-section {
  border-top: 0.5rpx solid #999999;
  margin: 30rpx 30rpx 0;
  overflow: hidden;

  .map-title {
    padding: 30rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #000000;
    text-align: center;
  }

  .map-container {
    position: relative;
    height: 330rpx;
    border: 6rpx solid white;
    border-radius: 20rpx;
    transform: translateY(0);
    overflow: hidden;
    .map-component {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }

  .map-description {
    padding: 30rpx;

    .location-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;

      .location-icon {
        width: 40rpx;
      }

      .location-name {
        font-size: 22rpx;
        color: #808080;
      }
    }
  }
}

.heart-icon {
  width: 35rpx;
  height: 30rpx;
  transition: all 0.3s ease;
  flex-shrink: 0;
  top: -2rpx;
  position: relative;
  margin-right: 6rpx;

  &.liked {
    opacity: 1;
    filter: hue-rotate(320deg) saturate(2);
  }

  &:active {
    transform: scale(1.2);
  }
}

.shop-icon {
  width: 39rpx;
  height: 36rpx;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 10rpx;

  &.liked {
    opacity: 1;
    filter: hue-rotate(320deg) saturate(2);
  }

  &:active {
    transform: scale(1.2);
  }
}

.product-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.location-selector {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  // border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  min-width: 100rpx;
  margin-right: 20rpx;

  .location-text {
    font-size: 30rpx;
    color: white;
    margin-right: 8rpx;
  }

  .dropdown-icon {
    width: 24rpx;
    height: 16rpx;
  }
}

// 预约弹窗样式
.reservation-popup {
  width: 600rpx;
  background: white;
  border-radius: 24rpx;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .popup-close {
      font-size: 40rpx;
      color: #999;
      line-height: 1;
      padding: 8rpx;
      cursor: pointer;
      transition: color 0.3s;

      &:active {
        color: #666;
      }
    }
  }

  .popup-content {
    padding: 32rpx;

    .input-section {
      margin-bottom: 32rpx;

      .input-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        font-weight: 500;
      }

      .reservation-input {
        width: 100%;
        height: 88rpx;
        border: 2rpx solid #e0e0e0;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333;
        background: #fafafa;
        transition: all 0.3s;
        box-sizing: border-box;

        &:focus {
          border-color: #007aff;
          background: white;
        }

        &::placeholder {
          color: #999;
        }
      }
    }

    .popup-actions {
      display: flex;
      gap: 24rpx;
      margin-top: 40rpx;

      .cancel-btn,
      .confirm-btn {
        flex: 1;
        height: 74rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: 600;
        border: none;
        transition: all 0.3s;

        &:active {
          transform: scale(0.98);
        }
      }

      .cancel-btn {
        background: #f5f5f5;
        color: #666;

        &:active {
          background: #e8e8e8;
        }
      }

      .confirm-btn {
        background: #007aff;
        color: white;

        &:active {
          background: #0056cc;
        }
      }
    }
  }
}

// 地图标题点击样式
.map-title {
  cursor: pointer;
  transition: all 0.3s;
}
</style>