talk_appAmin/pages/mine/myActivity/info.vue

496 lines
11 KiB
Vue
Raw Normal View History

2024-06-09 23:10:23 +08:00
<template class="content">
2024-07-09 12:40:50 +08:00
<view class="fixed-header">
<!-- 顶部导航栏 -->
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick">
<template #center>
<div class="navbarcenter"><span>活动详情</span></div>
</template>
</up-navbar>
</view>
<view style=" overflow: auto;">
<view class="avtivityInfo">
<view>
<view class="cards">
<view class="title"> {{ actiInfoList.acTitle }}</view>
<view class="time">活动时间{{ actiInfoList.startTime }} - {{ actiInfoList.endTime }}</view>
<view class="addrs">活动地点{{ actiInfoList.addres }}</view>
</view>
<view class="cardz">
<up-text size="15" color="#000000" lineHeight="23" :text="actiInfoList.acContent"></up-text>
</view>
<view class="cardx" v-for="(item, index) in toimage(actiInfoList.file)" :key="index">
<image :src="item" class="image"></image>
</view>
</view>
</view>
<view class="qrcode" v-if="actiInfoList.state == '2' & actiInfoList.auditStatus == 0 ">
<image :src="basetoimg(actiInfoList.acQrcode)" style="width: 200rpx; height: 200rpx;"
@click="showqr = true">
</image>
<view class="text">签到二维码</view>
</view>
</view>
<!-- 当前是审核中就展示 -->
<view v-if="actiInfoList.auditStatus == 1 | actiInfoList.auditStatus == 2" class="infox4">
<view class="line"></view>
<view class="text1 text">发布审核时间<span>{{ actiInfoList.startTime }}</span></view>
<view class="text2 text">审核状态<span style="color: #43CE8F">审核中</span></view>
</view>
<!-- 当前是未通过 -->
<view v-else-if="actiInfoList.auditStatus == 3 | actiInfoList.auditStatus == 4 " class="infox4">
<view class="line"></view>
<view class="text1 text">发布审核时间<span>{{ actiInfoList.startTime }}</span></view>
<view class="text1 text">审核状态<span style="color: #F87863">未通过</span></view>
<view class="text2 text">未通过原因<span style="color: #F87863">{{actiInfoList.auditAdvice}}</span></view>
</view>
<!-- 进行中或者报名中就展示 -->
<view v-else-if="actiInfoList.auditStatus == 0">
<view class="infox1" v-if="actiInfoList.state == '1'">
<view>
<view v-if="dataopen">
<!-- <up-avatar-group :urls="participation(participationInfo.elrollAvatars)" size="30"
gap="0.4"></up-avatar-group> -->
<view class="user_imgs">
<image v-for="(item,index) in participation(participationInfo.elrollAvatars)" src="../../../static/images/icon/tu4-1.jpg" mode=""
:style="'transform: translateX('+(index)*(28)+'rpx);'"></image>
<view class="" :style="'transform: translateX('+participationInfo.elrollAvatars.length*(28)+'rpx);'">
更多
</view>
</view>
</view>
</view>
<view class="elroll">已报名{{ actiInfoList.elroll }}</view>
</view>
<!-- 0=已结束
1=报名中
2=进行中 -->
<view class="infox2" v-else>
<view class="footer_left_in" v-if="dataopen">
<!-- <up-avatar-group :urls="participation(participationInfo.elrollAvatars)" size="30"
gap="0.4"></up-avatar-group> -->
<!-- 左侧报名用户头像 -->
<view class="user_imgs">
<image v-for="(item,index) in participation(participationInfo.elrollAvatars)" :src="item" mode=""
:style="'transform: translateX('+(index)*(28)+'rpx);'"></image>
<view class="" :style="'transform: translateX('+participationInfo.elrollAvatars.length*(28)+'rpx);'">
更多
</view>
</view>
<view class="elroll">已报名{{ actiInfoList.elroll }}</view>
</view>
<view v-if="actiInfoList.state != '1'" class="flex justifyCenter alignCenter">
<view v-if="dataopen">
<!-- <up-avatar-group :urls="participation(participationInfo.elrollAvatars)" size="30"
gap="0.4"></up-avatar-group> -->
<view class="user_imgs">
<image v-for="(item,index) in participation(participationInfo.qrcodeElrollAvatars
)" :src="item" mode="" :style="'transform: translateX('+(index)*(28)+'rpx);'"></image>
<view class="" :style="'transform: translateX('+participationInfo.elrollAvatars.length*(28)+'rpx);'">
更多
</view>
</view>
</view>
<view class="elroll">已签到{{ actiInfoList.qrcodeElroll }}</view>
</view>
</view>
</view>
<view style="width: 100%; height: 400rpx;"></view>
<view>
<up-overlay :show="showqr" @click="showqr = false">
<view class="warp">
<image class="rect" @tap.stop :src="basetoimg(actiInfoList.acQrcode)"
style="width: 600rpx; height: 600rpx">
</image>
</view>
</up-overlay>
</view>
2024-06-09 23:10:23 +08:00
</template>
<script setup>
2024-07-09 12:40:50 +08:00
import {
getTakePartsInfoByacId,
gotoQrcode,
gotoSing1,
gotoSing2
} from "@/api/activityInfo/activityTakeInfo";
import {
listInfo,
getInfo,
getInfoall,
delInfo,
addInfo,
updateInfo
} from "@/api/activityInfo/info";
import {
getDicts
} from "@/api/system/dict/data";
import {
onShow,
onLoad
} from '@dcloudio/uni-app';
import {
ref,
reactive,
getCurrentInstance,
toRefs,
computed
} from 'vue';
import {
useStore
} from 'vuex';
const showqr = ref(false)
const {
proxy
} = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const style = ref({
p: 'font-weight: 400;font-size: 24rpx;color: #000000 !important;',
});
const activityState = ref([]); // 字典 activity_state 活动状态
const takePartState = ref([]); // 字典 take_part_state 活动参与状态
const open = ref(false);
const title = ref('确认签到');
const content = ref('请您确认活动签到,祝您玩的愉快!');
const bgColor = ref('');
const store = useStore();
const QNDomain = store.state.user.QNDomain;
const actiInfoList = ref({});
const activityAttendInfo = ref({});
const qrcodeInfo = ref();
//头像组
const dataopen = ref(false)
const urls1 = reactive([])
const participationInfo = ref([])
const participation = (data) => {
// 根据条件决定保留的元素数量
const limit = actiInfoList.state === '1' ? 6 : 4;
// 创建一个新的数组来存储前 limit 个元素
const limitedData = data.slice(0, limit);
// 映射到新的数组
const refObjects = limitedData.map(item => (QNDomain + item.avatar));
console.log(refObjects);
return refObjects;
}
function basetoimg(e) {
return "data:image/png;base64," + e
}
onLoad((options) => {
const _id = options.id;
getInfo(_id).then(response => {
actiInfoList.value = response.data;
console.log("actiInfoList:", actiInfoList.value);
});
getInfoall(_id).then(e => {
participationInfo.value = e.data
dataopen.value = true;
console.log("参与人信息:", e);
})
getDicts('activity_state').then(e => {
activityState.value = e.data;
});
getDicts('take_part_state').then(e => {
takePartState.value = e.data;
});
checkStatus(options.id);
});
const checkStatus = (id) => {
getTakePartsInfoByacId(id).then(e => {
activityAttendInfo.value = e.data;
console.log("个人信息:", activityAttendInfo.value)
});
};
const leftClick = () => {
proxy.$tab.navigateBack(1);
};
const toimage = (url) => {
if (typeof url === 'string') {
let info = url.split(",");
let processedInfo = info.map(item => QNDomain + item);
console.log("processedInfo", processedInfo);
return processedInfo;
}
return null;
};
const goQrcode = () => {
uni.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log('扫描二维码成功,结果:', res);
toqrcode(res);
},
error: (res) => {
console.log('扫描二维码出现错误');
}
});
}
const toqrcode = (e) => {
qrcodeInfo.value = JSON.parse(e.result);
if (actiInfoList.value.id !== qrcodeInfo.value.id) {
proxy.$modal.msgError('二维码不匹配!')
return;
} else {
open.value = !open.value;
console.log("信息:", qrcodeInfo.value);
}
};
2024-06-09 23:10:23 +08:00
</script>
<style lang="scss">
2024-07-09 12:40:50 +08:00
.user_imgs {
position: relative;
padding-right: 20rpx;
image {
position: absolute;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
view {
width: 60rpx;
height: 60rpx;
background: #f4f5f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 18rpx;
}
}
.footer_left_in {
display: flex;
align-items: center;
}
.elroll {
margin-left: 80rpx;
font-size: 24rpx;
color: #999999 !important;
}
page {
background-color: #ffffff;
}
.navbarcenter {
font-weight: 400;
width: 148rpx;
height: 37rpx;
font-size: 36rpx;
text-align: left;
color: #000000;
}
.avtivityInfo {
width: 686rpx;
margin: 44rpx auto;
margin-bottom: 0;
.cards {
.title {
font-weight: 600 !important;
font-size: 32rpx;
text-align: left;
color: #000000 !important;
}
.time {
margin-top: 28rpx;
font-weight: 400;
font-size: 24rpx;
text-align: left;
color: #999999 !important;
}
.addrs {
margin-top: 12rpx;
font-weight: 400;
font-size: 24rpx;
text-align: left;
color: #999999 !important;
}
}
.cardz {
margin-top: 48rpx;
font-weight: 400;
width: 674rpx;
font-size: 24rpx;
text-align: left;
color: #000000 !important;
}
.cardx {
margin-top: 48rpx;
.image {
width: 686rpx;
border-radius: 24rpx;
height: 720rpx;
}
}
}
.infox1 {
display: flex;
justify-content: space-between;
align-items: center;
height: 74rpx;
padding-left: 32rpx;
padding-right: 32rpx;
position: fixed;
/* 固定位置 */
left: 0;
/* 左对齐 */
right: 0;
/* 右对齐 */
bottom: 68rpx;
/* 底部对齐 */
border-top: 1px solid #ccc;
/* 上边框 */
background-color: white;
/* 背景色设置为白色,防止透明背景导致内容重叠可见 */
z-index: 10;
.elroll {
margin-left: 10rpx;
font-size: 24rpx;
color: #999999 !important;
}
}
.infox2 {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14rpx;
padding-bottom: 14rpx;
padding-left: 32rpx;
padding-right: 32rpx;
position: fixed;
/* 固定位置 */
left: 0;
/* 左对齐 */
right: 0;
/* 右对齐 */
bottom: 0rpx;
/* 底部对齐 */
border-top: 1px solid #ccc;
/* 上边框 */
background-color: white;
/* 背景色设置为白色,防止透明背景导致内容重叠可见 */
z-index: 10;
}
.infox3 {
width: 100%;
height: 68rpx;
background-color: #F6F6F6;
position: fixed;
/* 固定位置 */
left: 0;
/* 左对齐 */
right: 0;
/* 右对齐 */
bottom: 0;
}
.acContentstyle {
color: #000000 !important;
font-weight: 400;
font-size: 24rpx;
text-align: left;
line-height: 46rpx;
}
.qrcode {
margin-top: 20rpx;
margin-bottom: 24rpx;
text-align: center;
.text {
font-weight: 600;
font-size: 30rpx;
color: #000000 !important;
}
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.infox4 {
width: 686rpx;
height: 400rpx;
margin: 60rpx auto;
.line {
width: 100%;
height: 4rpx;
background-color: #F4F5F6;
border-radius: 2rpx 2rpx 2rpx 2rpx;
margin-bottom: 60rpx;
}
.text {
font-size: 30rpx;
color: #000000 !important;
}
.text1 {
margin-bottom: 24rpx;
}
.text2 {}
}
2024-06-09 23:10:23 +08:00
</style>