wydy/wy-mobile/pages/success.vue

<template>
  <view class="success-page">
    <!-- 顶部标题区 -->
    <view class="header">
      <text class="header-title">盐龙街道住宅小区物业公司选聘调研</text>
    </view>

    <!-- 提交成功提示 -->
    <view class="success提示">
    <!--  <view class="success-icon">
        <uni-icons type="success" size="60" color="#00B42A"></uni-icons>
      </view> -->
      <text class="success-text">提交成功！</text>
      <text class="sub-text">感谢您的参与，您的意见将被认真对待</text>
    </view>

    <!-- 投票统计区 -->
    <view class="stats-container">
		 <text class="name-text">{{name}}投票进度</text>
      <!-- 已投/未投统计 -->
      <view class="vote-count">
        <view class="count-item">
          <text class="count-num">{{ totalVoted }}</text>
          <text class="count-label">已投票</text>
        </view>
        <view class="count-item">
          <text class="count-num">{{ totalUnvoted }}</text>
          <text class="count-label">未投票</text>
        </view>
        <view class="count-item">
          <text class="count-num">{{ totalVoters }}</text>
          <text class="count-label">总户数</text>
        </view>
      </view>

      <!-- 选项占比统计 -->
      <view class="options-stats">
        <text class="stats-title">各选项占比</text>
        
        <!-- 占比列表 -->
        <view class="option-item" v-for="(item, index) in voteOptions" :key="index">
          <view class="option-info">
            <text class="option-name">{{ item.name }}</text>
            <text class="option-ratio">{{ item.ratio }}%</text>
          </view>
          <!-- 进度条 -->
          <view class="progress-bar">
            <view 
              class="progress" 
              :style="{ 
                width: item.ratio + '%',
                backgroundColor: item.color 
              }"
            ></view>
          </view>
          <!-- 票数详情 -->
          <text class="votes-detail">{{ item.votes }} 票</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
   <!-- <view class="btn-group">
      <button class="back-btn" @click="navigateBack">返回首页</button>
      <button class="share-btn" @click="handleShare">分享结果</button>
    </view> -->
  </view>
</template>

<script>
	import voteRecordService from "@/api/vote/voteRecordService.js"
export default {
  data() {
    return {
		name:'',
      // 总数据（实际项目中从接口获取）
      totalVoters: 568, // 总户数
      totalVoted: 326,  // 已投票数
      totalUnvoted: 242, // 未投票数（计算得出：totalVoters - totalVoted）
      
      // 选项数据（实际项目中从接口获取）
      voteOptions: [
        { name: '续签', value: '1', votes: 185, ratio: 56.7, color: '#1677ff' },
        { name: '公开招标', value: '2', votes: 98, ratio: 30.1, color: '#36d399' },
        { name: '弃权', value: '3', votes: 32, ratio: 9.8, color: '#722ed1' },
        { name: '其他', value: '4', votes: 11, ratio: 3.4, color: '#ff7d00' }
      ]
    };
  },
  onLoad(options) {
	  console.log(options)
	  if(options.id){
		  this.getStatistics(options.id)
	  }
    // 实际项目中从接口获取数据后更新
    // 示例：this.fetchVoteStats();
  },
  methods: {
    // 模拟从接口获取数据
    getStatistics(id) {
		var _this=this
      voteRecordService.getStatistics(id).then((data) => {
		  if(data.length>0){
			  var res=data[0]
			  _this.totalVoters=res.allcount
			  _this.totalVoted=res.ytcount
			  _this.totalUnvoted=res.wtcount
			  _this.voteOptions[0].votes=res.xqCount
			  _this.voteOptions[0].ratio=res.xqPct
				
			_this.voteOptions[1].votes=res.zbCount
			_this.voteOptions[1].ratio=res.zbPct
			
			_this.voteOptions[2].votes=res.qqCount
			_this.voteOptions[2].ratio=res.qqPct
			
			_this.voteOptions[3].votes=res.qtCount
			_this.voteOptions[3].ratio=res.qtPct
			
			_this.name=res.name					
								
			  
		  }
      
     console.log(data)
      }).catch(e => {
      	console.error(e)
      })
     
    },
    
    // 返回首页
    navigateBack() {
      uni.reLaunch({
        url: '/pages/index/index' // 替换为首页路径
      });
    },
    
    // 分享结果
    handleShare() {
      // 调用Uniapp分享API
      uni.share({
        title: '盐龙街道物业选聘投票结果',
        path: '/pages/success/vote-success', // 分享页面路径
        imageUrl: '/static/share-img.png', // 分享图片（需提前准备）
        success: () => {
          uni.showToast({ title: '分享成功', icon: 'none' });
        },
        fail: (err) => {
          console.log('分享失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.success-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30px;
}

/* 顶部标题栏 */
	.header {
		background-color: #00aaff;
		padding: 25rpx 20rpx;
		text-align: center;
	}

	.header-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 1.5;
	}

/* 成功提示区 */
.success提示 {
  padding: 20px 0 20px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 15px;
}
.success-icon {
  margin-bottom: 15px;
}
.success-text {
  font-size: 20px;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.sub-text {
  font-size: 14px;
  color: #666;
}

/* 统计容器 */
.stats-container {
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.name-text{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 10px;
	letter-spacing: 2px;
}
/* 已投/未投统计 */
.vote-count {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.count-item {
  text-align: center;
}
.count-num {
  font-size: 24px;
  font-weight: 700;
  color: #1677ff;
  display: block;
  margin-bottom: 5px;
}
.count-label {
  font-size: 14px;
  color: #666;
}

/* 选项占比统计 */
.options-stats {
  margin-top: 10px;
}
.stats-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 15px;
  padding-left: 5px;
}

/* 单个选项样式 */
.option-item {
  margin-bottom: 20px;
}
.option-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.option-name {
  font-size: 15px;
  color: #444;
}
.option-ratio {
  font-size: 14px;
  font-weight: 500;
  color: #1677ff;
}

/* 进度条样式 */
.progress-bar {
  height: 8px;
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}
.progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* 票数详情 */
.votes-detail {
  font-size: 12px;
  color: #999;
}

/* 底部按钮组 */
.btn-group {
  width: 92%;
  margin: 30px auto 0;
  display: flex;
  gap: 15px;
}
.back-btn, .share-btn {
  flex: 1;
  height: 45px;
  line-height: 45px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}
.back-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #eee;
}
.share-btn {
  background-color: #1677ff;
  color: #fff;
  border: none;
}
</style>