recycle-front/pages/component/home.vue

<template>
  <view class="container safe-area">
    <!-- 顶部banner -->
    <view class="banner">
      <swiper
        :indicator-dots="false"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        circular
        style="width: 100%; height: 380rpx;"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
          <image :src="item.image" mode="aspectFill" style="width: 100%; height: 100%;" />
        </swiper-item>
      </swiper>
    </view>
	<view class="content">
		<!-- 回收流程 -->
		<view class="process-section">
		  <view class="section-header">
		    <text class="title">回收流程</text>

		  </view>
		  <view class="process-grid">
		    <view class="process-item" v-for="(item, index) in processes" :key="index">
		      <image :src="item.icon" mode="aspectFit" class="process-icon"></image>
		      <text class="process-text">{{item.text}}</text>
		      <!-- <text class="process-number">{{index + 1}}</text> -->
		    </view>
		  </view>
		  <button class="submit-btn" hover-class="submit-btn-hover" @click="getPickupto">
		    <text class="submit-btn-hearder">快速免费上门</text>
		    <text class="btn-desc">点击开始预约</text>
		    <image src="/static/home/1745478917401 3.png" mode="aspectFit" class="arrow-icon"></image>
		    <image src="/static/home/1745478917401 4.png" mode="aspectFit" class="arrow-icon-left"></image>
		  </button>
		</view>
		
		<uv-divider  :dashed="true" ></uv-divider>
		<!-- 服务城市 -->
		<view class="city-section" @click="goCity">
		  <view class="city-header">
		    <text>已开通包邮服务城市有哪些？</text>
		    <uni-icons type="right" size="16" color="#999"></uni-icons>
		  </view>
		  <text class="city-list">{{ cityListStr }}</text>
		</view>
		

		<view class="Xiadan-section">
			<image src="/static/home/不会下单.png" alt="" class="process-icon"/>
			<text class="left-text">不会下单？联系客服了解回收流程。</text>
			<view class="right" @click="goService">
				<image src="/static/home/联系客服.png" mode=""></image>
				<text>联系客服</text>
			</view>
		</view>
		
		
		
		<!-- 关于我们 -->
		<view class="about-section">
			<view class="section-header">
			  <text class="title">关于我们</text>
			</view>
			<view class="about-footer" @click="goAbout">
				<view class="about-header">
				  <image src="/static/home/关于我们.png" mode="aspectFit" class="logo"></image>
				  <!-- <text class="about-title">关于我们</text> -->
				</view>
				<view class="about-content">
				  <text>免费寄、送件验、秒到账、助环保</text>
				  <text class="about-desc">让二手交易更轻松，让地球多一份绿意</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 价格概览 -->
		<view class="price-section">
		  <view class="section-header">
		    <text class="title">价格概览</text>
		    <view class="more">
			  <uni-icons type="right" size="14" color="#999"></uni-icons>
		      <text>查看更多</text>
		    </view>
		  </view>
		  <view class="price-grid">
		    <view class="price-item" v-for="(item, index) in priceList" :key="item.id || index" @tap="goToRecycleCategory(item.id)">
		      <image v-if="item.icon" :src="item.icon" mode="aspectFit" class="item-icon"></image>
		      <view v-else class="item-icon placeholder"></view>
		      <text class="item-name">{{item.name}}</text>
		      <text class="item-price">¥ {{item.price}}
			  <text class="item-price-right">/{{item.unit}}</text>
			  </text>
		    </view>
		  </view>
		</view>
		
		<!-- 最近回收 -->
		<view class="recent-section">
		  <view class="section-header">
		    <text class="title">最近回收</text>
		  </view>
		  <view class="records-grid">
		    <view 
		      class="record-item" 
		      v-for="(item, index) in records" 
		      :key="index"
		      @tap="goToInspectionReport(item)"
		    >
			 <image :src="item.image" mode=""></image>
		      <text class="location">{{item.name}}</text>
			  <text class="user-id">****{{item.phone ? item.phone.slice(-4) : ''}}</text>
			  <text class="user-id-f">成功完成衣物回收已到账</text>
		      <text class="amount">+ ¥{{item.price}}</text>
		    </view>
		  </view>
		</view>
		
		<!-- 回收去向 -->
		<view class="destination-section">
		  <view class="section-header">
		    <text class="title">回收去向</text>
		  </view>
		  <view class="destination-grid">
		    <view class="destination-item "  :class="`destination-item${index + 1}`" v-for="(item, index) in destinations" :key="index">
		      <image :src="item.icon" mode="aspectFit" class="dest-icon"></image>
		      <view class="dest-info">
		        <text class="dest-title">{{item.title}}</text>
		        <text class="dest-desc">{{item.desc}}</text>
		      </view>
		    </view>
		  </view>
		</view>
		
	</view>
  <!-- 根据角色显示不同的导航栏 -->
  <uv-tabbar
   :value="value" 
   :fixed="true" 
   @change="changeTo" 
  >
  	<uv-tabbar-item text="首页" >
			<template v-slot:active-icon>
				<image class="icon" src="/static/home/首页-点击.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/home/首页-未点击.png"></image>
			</template>
	</uv-tabbar-item>
  	<uv-tabbar-item text="回收" >
			<template v-slot:active-icon>
				<image class="icon" src="/static/home/回收-点击.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/home/回收-未点击.png"></image>
			</template>
	</uv-tabbar-item>
  	<uv-tabbar-item text="我的" >
			<template v-slot:active-icon>
				<image class="icon" src="/static/home/我的-点击.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/home/我的-未点击.png"></image>
			</template>
	</uv-tabbar-item>
  </uv-tabbar>
  </view>
</template>

<script>
import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
export default {
	mixins: [pullRefreshMixin],
  data() {
    return {
		value:0,
      processes: [
      ],
      priceList: [],
      records: [],
      destinations: [
        { 
          icon: '/static/home/爱心援乡.png', 
          title: '爱心援乡',
          desc: '精准帮扶贫困群体'
        },
        { 
          icon: '/static/home/回塑新源.png',  
          title: '回塑新源',
          desc: '塑料的第二次成型'
        },
        { 
          icon: '/static/home/织物出海.png',
          title: '织物出海',
          desc: '分拣出最高价值'
        },
        { 
          icon: '/static/home/碳循再生.png',
          title: '碳循再生',
          desc: '减碳从出发生系统'
        }
      ],
      bannerList: [],
      pricePreviewList: [],
      cityList: []
    }
  },
  computed: {
    cityListStr() {
      // 只取前8个城市，超出用...结尾
      const names = this.cityList.map(c => c.name)
      const max = 8
      if (names.length > max) {
        return names.slice(0, max).join('、') + '...'
      }
      return names.join('、')
    },
  },
  methods: {
	  changeTo(e){
	  		    this.value = e
	  		  console.log(e,'111')
	  		  if(e==1){
	  			 uni.reLaunch({
	  			   url: '/pages/component/recycle'
	  			 },true);
	  		  }else if(e == 2){
	  			  uni.reLaunch({
	  			    url: '/pages/component/my'
	  			  },true);
	  		  }
	  },
    goAbout(){
      uni.navigateTo({
        url: '/pages/subcomponent/about'
      })
    },
	goCity(){
		uni.navigateTo({
		  url: '/pages/baoyou-city/baoyou-city'
		})
	},
	getPickupto(){
		uni.switchTab({
		  url: '/pages/component/recycle'
		})
	},
    async onRefresh() {
      await new Promise(resolve => setTimeout(resolve, 1000))
    },
    getAreaList() {
      this.$api('getAreaList', {}, (res) => {
        console.log(res,'getAreaList');
        if (res.code == 200 && Array.isArray(res.result)) {
          // 按sort升序排序
          const sorted = res.result.slice().sort((a, b) => a.sort - b.sort)
          this.processes = sorted.map(item => ({
            // id: item.id,
            icon: item.image,
            text: item.title
          }))
        }
      })
    },
	goService(){
		uni.navigateTo({
		  url: '/pages/subcomponent/admin_faq'
		})
	},
    goToRecycleCategory(id) {
      getApp().globalData.targetRecycleCategoryId = id
      console.log(getApp().globalData.targetRecycleCategoryId,'getApp().globalData.targetRecycleCategoryId')
      uni.switchTab({
        url: '/pages/component/recycle'
		})
	},
    getPricePreview() {
      const resList = this.pricePreviewList || []
      if (Array.isArray(resList)) {
          // 只取一级分类，按sort升序
        const firstLevel = resList.filter(item => item.pid === '0').sort((a, b) => a.sort - b.sort)
        // console.log(firstLevel,'firstLevel');
          this.priceList = firstLevel.map(item => {
            // 从静态表中找图片和价格
            // const staticItem = this.priceListStatic.find(s => s.name.replace(/\s/g, '') === item.title.replace(/\s/g, ''))
            // console.log(item,'item');
            return {
              id: item.id, // 保证有id
              icon: item.icon ? item.icon : '',
              name: item.title,
              price: item.priceNo ? item.priceNo : '',
              unit: item.unit ? item.unit : ''
            }
          })
        }
    },
    getRecentGoods() {
      this.$api('getRecentGoodsList', {}, res => {
        if (res && res.code === 200 && Array.isArray(res.result) && res.result.length > 0) {
          this.records = res.result.map(item => ({
            id: item.id,
            image: item.image,
            name: item.name,
            phone: item.phone,
            price: item.price
          }))
        } else {
          this.records = []
        }
      })
    },
    goToInspectionReport(item) {
      uni.navigateTo({
        url: `/pages/subcomponent/inspection-report?id=${item.id}`
      })
    },
    getFreeCityList() {
      this.$api('getFreeCityList', {}, res => {
        if (res && res.code === 200 && Array.isArray(res.result)) {
          // 只取一级城市（有children的name）
          this.cityList = res.result.map(item => ({ name: item.name })).filter(item => item.name)
        } else {
          this.cityList = []
        }
      })
    }
  },
  onLoad() {
      this.getAreaList();
      this.getPricePreview();
      this.getRecentGoods();
      this.pricePreviewList = getApp().globalData.pricePreviewList || []
      this.bannerList = getApp().globalData.bannerList || []
      this.getFreeCityList();
      uni.$on('pricePreviewListUpdated', () => {
        this.pricePreviewList = getApp().globalData.pricePreviewList || []
        this.getPricePreview()
      })
      uni.$on('bannerListUpdated', () => {
        this.bannerList = getApp().globalData.bannerList || []
      })
  },
  onUnload() {
    uni.$off('pricePreviewListUpdated')
    uni.$off('bannerListUpdated')
  },
  onShow() {
    // 移除自动下拉刷新
    // uni.startPullDownRefresh()
    this.getPricePreview();
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--window-bottom) + 70px);
}

.safe-area {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.banner {
  width: 100%;
  height: 380rpx;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 30rpx 30rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.content {
  // flex: 1;
  width: 90%;
  margin: -70rpx auto 0;
  position: relative;
  z-index: 3;
  padding-bottom: 20rpx;
}

.Xiadan-section{
	display: flex;
	// justify-content: space-around;
	align-items: center;
	margin-bottom: 20rpx;
	background: linear-gradient(to bottom, #fff3db 0%,#fffefb 50%);
	image{
		width: 80rpx;
		height: 80rpx;
	}
	.left-text{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 12px;
		line-height: 140%;
		letter-spacing: 0%;
	}
	.right{
		display: flex;
		// flex-direction: row-reverse;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		background-color: #fff0d2;
		color: #da7143;
		font-size: 24rpx;
		// flex-grow: 2;
		border: 1px solid #da7143;
		border-radius: 10rpx;
		width: 25%;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
}
.section-header {
  display: flex;
  // justify-content: space-around;
  align-items: center;
  margin-bottom: 20rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .more {
	// justify-content: right;
    display: flex;
	flex-direction: row-reverse;
    align-items: center;
    color: #999;
    font-size: 24rpx;
	flex-grow: 2;
	// width: 100%;
	// margin-right:  0 auto;
  }
}

.process-section {
  background: #fff;
  border-radius: 50rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(to bottom, #fff5e1 0%,#fffefb 30%);
  .contact-service {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
	border: 1px solid #da7143;
	background-color: #fff0d2;
    .service-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
	
  }

  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    margin: 30rpx 0;
    border: none;
  }
 

  .process-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: #fff8ea;
	// left: 0; right: 0;
    .process-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }

    .process-text {
      font-size: 24rpx;
      color: #333;
    }

    .process-number {
      position: absolute;
      top: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      color: #999;
    }
  }

  .submit-btn {
    background: linear-gradient(to right, #ffd01e, #ff8917);
    border-radius: 70rpx;
    padding: 20rpx;
    text-align: center;
    position: relative;
    border: none;
	display: flex;
	flex-direction: column;
	overflow: visible;
    text {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
	    line-height: 40rpx;
      // display: block;
    }

    .btn-desc {
      font-size: 24rpx;
      font-weight: normal;
      // margin-top: 4rpx;
    }

    .arrow-icon {
      position: absolute;
      right: 10rpx;
      top: 10%;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
	  // z-index: 5;
    }
	
	.arrow-icon-left {
	  position: absolute;
	  left: 1rpx;
	  top: 90%;
	  transform: translateY(-50%);
	  width: 40rpx;
	  height: 40rpx;
	  // z-index: 4;
	}
  }
  .submit-btn::after{
    border: none !important;
  }
}

.city-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .city-list {
    font-size: 24rpx;
    color: #999;
  }
}

.price-section {
  background: #f0f9eb;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fffefb;
  background: linear-gradient(to bottom, #fff3db 0%,#fffefb 5%);
  .section-header{
	  margin-bottom: 40rpx;	
  }
  .price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    background-color: #fff8ea;
    .item-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
      &.placeholder {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
        background: #f5f5f5;
        border-radius: 16rpx;
      }
    }

    .item-name {
      font-size: 26rpx;
      color: #333;
      margin-bottom: 6rpx;
    }

    .item-price {
     font-family: PingFang SC;
     font-weight: 400;
     font-size: 24rpx;
     line-height: 140%;
     letter-spacing: 0%;
     text-align: center;
	  .item-price-right{
		  text-align: center;
		  font-size: 24rpx;
		  color: #666;
		  line-height: 140%;
		  letter-spacing: 0%;
	  }
    }
  }
}

.recent-section {
  background: #f0f9eb;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fffefb;
  background: linear-gradient(to bottom, #e8ffe0 0%,#fffefb 15%);
  .records-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }
  .record-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to top, #e8ffe0 0%,#fffefb 100%);
    border-radius: 16rpx;
    padding: 10rpx;
    background-color: #fff8ea;
	image{
		width: 60rpx;
		height: 60rpx;
	}
    .location {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .amount {
      font-size: 30rpx;
      color: #13ac47;
      font-weight: bold;
      margin: 6rpx 0;
    }

    .user-id {
     font-family: PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
     line-height: 140%;
     letter-spacing: 0%;
     text-align: center;
	 color: #183c5c;
    }
	.user-id-f{
			  font-family: PingFang SC;
			  font-weight: 400;
      font-size: 22rpx;
			  line-height: 140%;
			  letter-spacing: 0%;
			  text-align: center;
			  color: #9b9b9b;
	}
  }
}

.destination-section {
  // background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(to bottom, #f2f0fc 0%,#fffefb 10%);
  padding-bottom: calc(var(--window-bottom) + 60px);
  .destination-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .destination-item {
    display: flex;
    align-items: center;
    // background: #fff9f9;
    border-radius: 16rpx;
    padding: 20rpx;

    .dest-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;
    }

    .dest-info {
      flex: 1;

      .dest-title {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 4rpx;
      }

      .dest-desc {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}
.destination-item1{
	background: linear-gradient(to top, #ffebeb,#fffefb);
}
.destination-item2{
	background: linear-gradient(to top, #ebf8ff,#fffefb);
}
.destination-item3{
	background: linear-gradient(to top, #ebedff,#fffefb);
}
.destination-item4{
	background: linear-gradient(to top, #ebfff2,#fffefb);
}
.about-section {
  background: linear-gradient(to bottom, #fff3db 0%,#fffefb 30%);
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .about-footer{
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	}
  .about-header {
    display: flex;
    align-items: center;

    .logo {
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;
    }

    .about-title {
      font-size: 28rpx;
      color: #333;
    }
  }

  .about-content {
    flex: 1;
    margin-left: 20rpx;
    
    text {
      display: block;
      font-size: 26rpx;
      color: #333;
    }

    .about-desc {
      font-size: 22rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #f5f5f5;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 0;
    transition: all 0.3s ease;
    
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 6rpx;
    }

    text {
      font-size: 22rpx;
      color: #666;
      transition: color 0.3s ease;
    }

    &.active {
      text {
        color: #ff5e00;
      }
    }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



</style>