recycle-front/pages/subcomponent/recycle_rules.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="25"></uni-icons>
      </view>
      <text class="title">回收规则</text>
    </view>

    <!-- 不支持回收提示 -->
    <view class="warning-section">
      <view class="warning-icon-wrap">
        <!-- <image src="/static/icons/red-cross.png" mode="aspectFit" class="cross-icon"></image> -->
     <uni-icons type="close" size="25"></uni-icons>
	  </view>
      <text>以下不支持回收</text>
    </view>

    <!-- 不可回收列表 -->
    <view class="rule-list">
      <view class="rule-item" v-for="(item, index) in ruleList" :key="index" @tap="showDetail(item)">
        <view class="item-left">
          <image :src="item.icon" mode="aspectFit" class="item-icon"></image>
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-desc">{{ item.desc }}</text>
          </view>
        </view>
        <uni-icons type="right" size="25"></uni-icons>
      </view>
    </view>

    <!-- 详情弹窗 -->
    <view class="detail-popup" v-if="showPopup" @tap="closePopup">
      <view class="popup-mask"></view>
      <view class="popup-content" @tap.stop>
        <view class="popup-title">{{ currentItem.title }}</view>
        <view class="popup-desc">{{ currentItem.detailDesc }}</view>
        <image :src="currentItem.detailImage" mode="aspectFit" class="detail-image"></image>
        <view class="popup-btn" @tap="closePopup">我知道了</view>
      </view>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      showPopup: false,
      currentItem: null,
      ruleList: [
        {
          title: '破损衣服',
          desc: '品相较好的旧衣更适合进行二次流转或制作其他产品',
          detailDesc: '品相较好的旧衣更适合进行二次流转制作成其他产品。破损衣物可能无法满足是利用的标准，还请您谅解。',
          icon: '/static/rules/broken-clothes.png',
          detailImage: '/static/rules/broken-clothes-detail.png'
        },
        {
          title: '潮湿异味',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/wet-clothes.png',
          detailImage: '/static/rules/wet-clothes-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        },
        {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        }, {
          title: '单只鞋靴',
          desc: '这类衣物易滋生细菌霉菌，可能传播疾病',
          icon: '/static/rules/single-shoe.png',
          detailImage: '/static/rules/single-shoe-detail.png',
          detailDesc: '这类衣物易滋生细菌霉菌，可能传播疾病。'
        },
      ]
    }
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
    goBack() {
      uni.navigateBack()
    },
    showDetail(item) {
      this.currentItem = item
      this.showPopup = true
    },
    closePopup() {
      this.showPopup = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #FFF1F0;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;

  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
  }

  .right-btns {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .more, .target {
      font-size: 40rpx;
      color: #333;
    }
  }
}

.warning-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  gap: 16rpx;

  .warning-icon-wrap {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .cross-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }

  text {
    color: #333;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.rule-list {
  padding: 0 30rpx;

  .rule-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-left {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .item-icon {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
      }

      .item-info {
        .item-title {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .item-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .arrow {
      color: #999;
      font-size: 32rpx;
    }
  }
}

.detail-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    text-align: center;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .popup-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 30rpx;
    }

    .detail-image {
      width: 400rpx;
      height: 400rpx;
      margin-bottom: 30rpx;
    }

    .popup-btn {
      height: 88rpx;
      background: #FFB74D;
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>