JP-ChargeTeam51/pages/temporary/20250625/info4.vue

<template>
	<view class="InviteFriends">
		<ujp-navbar title="朋友圈集赞领优惠券"></ujp-navbar>

		<view class="InviteFriends-head">
			<u-image width="298rpx" class="img1" height="64rpx" src="@/assets/static/img/logo3Ud.png"></u-image>

			<u-image width="350rpx" class="img2" style="margin-top: 28rpx ;" height="142rpx"
				src="@/assets/img/20250625/info3-1.png"></u-image>


		</view>
		<view class="body">
			<view class="title">活动时间：</view>
			<view class="text">2025年7月10日至7月24日</view>

			<view class="title">活动规则：</view>
			<view class="text">转发
				<span style="color: red;">本次活动推文至朋友圈</span>，集齐18个赞，可领<span
					style="color: red;">10元服务费抵扣券</span>，限{{totalNum}}张，领完即止， 先后顺序以上传时间为准。（每个微信仅可参与1次）
			</view>

			<view class="title"><span style="color: red;">*</span>上传截图（仅需上传1张截图）</view>
			<view class="text">
				<view class="cameraImg" v-if="!authImg" @click="uploadPhoto">
					<img class="camera" src="@/assets/img/camera-fill.svg" alt="">
				
				</view>
				<view class="cameraImg2" v-else @click="uploadPhoto">
					<img class="camera" :src="authImg" alt="">
				
				</view>
				
				<u-button type="info" v-if="totalNum<=examineNum"
				 
				 shape="circle">活动已结束</u-button>
				 
				<u-button type="warning" v-else-if="byUser.length==0" @click="submit"
				 
				 shape="circle">提交</u-button>
				
				<u-button type="info" v-else 
				 
				 shape="circle">已提交</u-button>

			</view>


			<view class="title">您的进度：</view>
			<view class="text">
				<u-steps :list="numList" active-color="#00B962" mode="number" :current="current"></u-steps>

			</view>
		</view>

		<view class="body">
			<view class="title">发放记录<span style="color: red;" v-if="totalNum>examineNum">（仅剩{{totalNum-examineNum}}张）</span>  </view>
			<view class="list">
				<view class="item" v-for="(item,index) in informationList" :key="index"  v-show="showBt||index<5">
					<view class="name">
						<u-avatar src="@/assets/img/head.png" size="48"></u-avatar>
						
						{{substringTxt(item.createByName,1)}}******
					</view>
					<view class="phone">
						{{substringTxt(item.phone,3)}}******
					</view>
					<view class="time">
						{{formatTimeAgo(item.createTime)}}
					</view>
				</view>
				
			</view>
			<u-divider margin-top="20" bg-color="#F2F4F4"  @click="showBt=true"  v-if="!showBt&&informationList.length>5">点击查看全部</u-divider>
			

		</view>
	</view>
</template>

<script>
	
	import * as API from '@/apis/temporary.js'
	
	export default {
		data() {
			return {
				authImg: "",
				current: -1,
				numList: [{
					name: '提交截图'
				}, {
					name: '后台审核'
				}, {
					name: '发放奖券'
				}, ],
				informationList:[],
				acInfo:{},
				byUser:{},
				totalNum:0,
				examineNum:0,
				showBt:false,
				
				
			}
		},
		onReady() {
			this.getInfo()
			this.getList()
		},
		methods: {
			
			formatTimeAgo(inputTime) {
			  // 转换输入为Date对象
			  const inputDate = typeof inputTime === 'string' 
			    ? new Date(inputTime) 
			    : inputTime;
			
			  // 计算时间差（毫秒）
			  const now = new Date();
			  const diffMs = now - inputDate;
			  
			  // 各时间单位的毫秒数
			  const minuteMs = 60 * 1000;
			  const hourMs = 60 * minuteMs;
			  const dayMs = 24 * hourMs;
			
			  // 根据时间差返回不同格式
			  if (diffMs < minuteMs) {
			    return '刚刚';
			  } else if (diffMs < hourMs) {
			    const minutes = Math.floor(diffMs / minuteMs);
			    return `${minutes}分钟前`;
			  } else if (diffMs < dayMs) {
			    const hours = Math.floor(diffMs / hourMs);
			    return `${hours}小时前`;
			  } else {
			    const days = Math.floor(diffMs / dayMs);
			    return `${days}天前`;
			  }
			},
			
			substringTxt(t,num){
				if(t){
					return t.substring(0,num)
				}else{
					return ''
				}
			},
			
			submit(){
				if(this.byUser.length){
					return
				}
				if(!this.authImg){
					uni.showToast({
						title: "请上传朋友圈点赞截图"
					})
					return
				}
				var obj=[{"name":"","value":this.authImg,"type":"img"}]
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.loginSubmit({
					openId:this.carhelp.getOpenId(),
					type:"3",
					content:JSON.stringify(obj)
				}).then((res) => {
					//this.byUser = res.data.helpList
					uni.showModal({
						title:"提示",
						content: "操作成功",
						showCancel: false,
						success: res => {
							
						}
					})
				
					uni.hideLoading()
					this.getInfo()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.informationByUser({
					type:"3"
				}).then((res) => {
					this.byUser = res.data.joinList
				
					if(this.byUser.length){
						this.current=0
						var item= this.byUser[0]
						if(item.examine){
							this.current=1
							if(item.status){
								this.current=2
							}
						}
					}
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getList(){
				
				API.informationList({
					type:"3",
					pageSize:200
				}).then((res) => {
					this.informationList = res.data.joinList
				
				this.informationList =this.informationList.sort((a1,a2)=>{
					
					return a1.createTime>a2.createTime?-1:1
				})
				this.examineNum=res.data.examineNum
				this.totalNum=res.data.totalNum	
				
				// this.examineNum=100
				// this.totalNum=99
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			uploadPhoto() {
				if(this.byUser.length||this.totalNum<=this.examineNum){
					return
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: async (res) => {
						console.log(res)
						var imageSrc = res.tempFilePaths[0]
						this.uploadFile(imageSrc);

					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},

			uploadFile(imageSrc) {
				var action = process.car.BASE_URL + "uploadPicture"
				var token = this.carhelp.getToken()
				var header = {
					'Authorization': token
				}
				var formData = {
					subFolder: "/team51/20250625v4"
				}
				var _this = this
				uni.showLoading({
					title: '上传中'
				})
				uni.uploadFile({
					url: action, //仅为示例，非真实的接口地址
					filePath: imageSrc,
					name: 'photoFile',
					header: header,
					formData: formData,
					success: (res) => {

						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						})

						_this.authImg = JSON.parse(res.data).data
						_this.$forceUpdate()


					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.hideLoading();
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.InviteFriends {

		background: linear-gradient(180deg, rgba(31, 85, 255, 1) 0%, rgba(39, 171, 255, 1) 100%);
		padding-bottom: 160rpx;
	}

	.InviteFriends-head {

		display: flex;
		flex-direction: column;
		align-items: center;

		.img1 {
			margin-top: 52rpx;
		}
	}

	.body {
		border-radius: 16px;
		background-color: rgba(255, 255, 255, 1);
		padding: 40rpx 36rpx;
		margin: 48rpx;

		.title {
			font-size: 36rpx;

			margin-bottom: 16rpx;
			color: rgba(16, 16, 16, 1);
			font-weight: bold;
		}

		.text {
			margin-bottom: 40rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);

		}

		.list {
			margin-top: 24rpx;
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				align-items: center;

				.name {
					display: flex;
					align-items: center;
				}

			}

		}

	}

	.cameraImg {
		background-color: #D5D7D9;
		width: 160rpx;
		height: 160rpx;
		border-radius: 4px;
		padding: 60rpx;
		margin-bottom: 40rpx;
	}
	.cameraImg2 {
		background-color: #D5D7D9;
		
		border-radius: 4px;
		//padding: 60rpx;
		margin-bottom: 40rpx;
		width: 160rpx;
		height: 160rpx;
		.camera{
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>