我的页面，增加活动详情
26947
parent
39d20fd057
commit
ad6dfb3904
|
|
@ -291,6 +291,14 @@
|
|||
"onReachBottomDistance": 100
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path": "pages/mine/myActivity/info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动详情",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#000000",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 顶部导航栏 -->
|
||||
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||||
<template class="img1BOX" #left>
|
||||
<view class="leftinfo">
|
||||
<view class="leftinfo" @click="queryTime">
|
||||
<span class="lefttext">时间</span>
|
||||
<image
|
||||
style=" margin-left: 10rpx; transform: rotate(-45deg); /* 旋转45度 */ width: 15rpx; height: 15rpx;"
|
||||
|
|
@ -43,7 +43,16 @@
|
|||
<view>
|
||||
<ActiInfoList v-model="actiInfoList" @scrolltolower="scrolltolower"></ActiInfoList>
|
||||
</view>
|
||||
|
||||
<view v-if="show">
|
||||
<up-datetime-picker
|
||||
hasInput
|
||||
:show="show"
|
||||
v-model="newData"
|
||||
mode="date"
|
||||
@cancel="close"
|
||||
@confirm="confirm"
|
||||
></up-datetime-picker>
|
||||
</view>
|
||||
<view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -55,14 +64,16 @@ import { onShow, onLoad ,onPullDownRefresh} from '@dcloudio/uni-app'
|
|||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { ref, reactive, getCurrentInstance, toRefs } from 'vue'
|
||||
import { useStore } from 'vuex';
|
||||
import { func } from "uview-plus/libs/function/test";
|
||||
const timeFormat = uni.$u.timeFormat;
|
||||
const { proxy } = getCurrentInstance();
|
||||
const newData = ref(new Date().getTime());
|
||||
const iconConfig = proxy.iconConfig;
|
||||
const tu21 = iconConfig.tu21;
|
||||
const tu22 = iconConfig.tu22;
|
||||
const tu51 = iconConfig.tu51;
|
||||
const tu52 = iconConfig.tu52;
|
||||
const tu53 = iconConfig.tu53;
|
||||
const show = ref(false)
|
||||
const total = ref()
|
||||
const imgInfo = ref("")
|
||||
const search = ref("电音节节日活动")
|
||||
|
|
@ -87,6 +98,7 @@ const data = reactive({
|
|||
acTitle: null,
|
||||
acContent: null,
|
||||
startTime: null,
|
||||
startTime1: null,
|
||||
endTime: null,
|
||||
state: null,
|
||||
addres: null,
|
||||
|
|
@ -127,6 +139,7 @@ function reset() {
|
|||
acTitle: null,
|
||||
acContent: null,
|
||||
startTime: null,
|
||||
startTime1: null,
|
||||
endTime: null,
|
||||
state: null,
|
||||
addres: null,
|
||||
|
|
@ -159,6 +172,19 @@ function reset() {
|
|||
console.log("下拉刷新,",options);
|
||||
getList();
|
||||
})
|
||||
const queryTime = () => {
|
||||
show.value = true
|
||||
}
|
||||
//日期选择
|
||||
const confirm = (e) => {
|
||||
queryParams.value.startTime1 = timeFormat(e.value, 'yyyy-mm-dd');
|
||||
show.value = false
|
||||
getList()
|
||||
}
|
||||
const close = () =>{
|
||||
queryParams.value.startTime1=null
|
||||
show.value = false
|
||||
}
|
||||
//tabs
|
||||
const tabsClick =(e) =>{
|
||||
if(e.state == 9){
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
<image :src="tu51" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
|
||||
活动地点：{{ item.addres }}
|
||||
</view>
|
||||
<view class="statsInfo1">
|
||||
<view class="statsInfo1" v-if="getDictLabelByValue2(item.attendState) != null">
|
||||
<!-- 动态数据 -->
|
||||
<view class="state1" >
|
||||
<span class="text">{{ getDictLabelByValue2(item.attendState).dictLabel }}</span></view>
|
||||
<view class="state1" >
|
||||
<span class="text">{{ getDictLabelByValue2(item.attendState) }}</span></view>
|
||||
|
||||
</view>
|
||||
<view class="statsInfo2">
|
||||
|
|
@ -70,15 +70,16 @@ const getDictLabelByValue = (state) => {
|
|||
return dict ? dict : '未知状态';
|
||||
};
|
||||
const getDictLabelByValue2 = (state) => {
|
||||
if(state == null)return null;
|
||||
const dict = activityState2.value.find((dict) => dict.dictValue === state);
|
||||
if(dict.dictValue == 0){
|
||||
if( dict== undefined | dict.dictValue == 0){
|
||||
return null;
|
||||
}
|
||||
if(dict.dictValue == 1 | dict.dictValue == 2){
|
||||
dict.dictLabel = "已报名"
|
||||
return dict ? dict : '未知状态';
|
||||
return dict ? dict.dictLabel : '未知状态';
|
||||
}
|
||||
return dict ? dict : '未知状态';
|
||||
return dict ? dict.dictLabel : '未知状态';
|
||||
};
|
||||
onLoad((options) => {
|
||||
getDicts('activity_state').then(e => {
|
||||
|
|
|
|||
|
|
@ -191,6 +191,10 @@ const scrolltolower = async () => {
|
|||
console.log("没有更多数据了");
|
||||
}
|
||||
};
|
||||
const toInfo = (item) => {
|
||||
proxy.$tab.navigateTo(`/pages/mine/myActivity/info?id=${item.id}`);
|
||||
}
|
||||
//删除分页信息
|
||||
const removePage = () => {
|
||||
queryParams.pageNum = 1
|
||||
queryParams.pageNum = 5
|
||||
|
|
|
|||
|
|
@ -0,0 +1,337 @@
|
|||
<template class="content">
|
||||
<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="height: 100vh; 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'">
|
||||
<image :src="basetoimg(actiInfoList.acQrcode)" style="width: 200rpx; height: 200rpx;"></image>
|
||||
<view class="text">签到二维码</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%; height: 400rpx;"></view>
|
||||
|
||||
</view>
|
||||
<view class="infox">
|
||||
<view class="infoavatar">
|
||||
<up-avatar size="60rpx" :src="QNDomain + actiInfoList.avatarInfo" />
|
||||
<view style="margin-left: 24rpx;">
|
||||
<view class="launchName">{{ actiInfoList.nickName }}</view>
|
||||
<view class="launchAddres">{{ actiInfoList.infoSchool }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
|
||||
</view>
|
||||
<view class="infox2">
|
||||
<up-modal :show="open" :title="title" width="600rpx" :content='content' confirmText="签到" cancelText="取消"
|
||||
confirmColor="#3477FC" showCancelButton closeOnClickOverlay @confirm="confirm" @cancel="cancel"></up-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getTakePartsInfoByacId, gotoQrcode, gotoSing1, gotoSing2 } from "@/api/activityInfo/activityTakeInfo";
|
||||
import { listInfo, getInfo, 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 { 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();
|
||||
|
||||
function getAvatar() {
|
||||
return QNDomain + actiInfoList.value.avatarInfo;
|
||||
}
|
||||
|
||||
function basetoimg(e) {
|
||||
return "data:image/png;base64," + e
|
||||
}
|
||||
function isHTML(str) {
|
||||
const htmlRegex = /<[^>]*>/;
|
||||
return htmlRegex.test(str);
|
||||
}
|
||||
const textopen = ref(false)
|
||||
onLoad((options) => {
|
||||
const _id = options.id;
|
||||
getInfo(_id).then(response => {
|
||||
actiInfoList.value = response.data;
|
||||
textopen.value = isHTML(actiInfoList.value.acContent);
|
||||
console.log("actiInfoList:", actiInfoList.value);
|
||||
});
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
|
||||
function cancel() {
|
||||
open.value = !open.value;
|
||||
}
|
||||
|
||||
const getDictLabelByValue = (state) => {
|
||||
const dict = activityState.value.find((dict) => dict.dictValue === state);
|
||||
return dict ? dict : '未知状态';
|
||||
};
|
||||
const goSing = (e) => {
|
||||
if (e === 0) {
|
||||
//取消报名
|
||||
gotoSing2(activityAttendInfo.value.id).then(e => {
|
||||
proxy.$modal.msgSuccess("取消报名成功！");
|
||||
actiInfoList.value.elroll -= 1
|
||||
})
|
||||
}
|
||||
if (e === 1) {
|
||||
//报名
|
||||
gotoSing1(activityAttendInfo.value.id).then(e => {
|
||||
proxy.$modal.msgSuccess("报名成功！");
|
||||
actiInfoList.value.elroll += 1
|
||||
})
|
||||
}
|
||||
//简单刷新一下数据
|
||||
checkStatus(actiInfoList.value.id);
|
||||
}
|
||||
const goQrcode = () => {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: (res) => {
|
||||
console.log('扫描二维码成功,结果:', res);
|
||||
toqrcode(res);
|
||||
|
||||
},
|
||||
error: (res) => {
|
||||
console.log('扫描二维码出现错误');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
open.value = !open.value;
|
||||
activityAttendInfo.value.qrcodeInfo = JSON.stringify(qrcodeInfo.value)
|
||||
|
||||
gotoQrcode(activityAttendInfo.value).then(e => {
|
||||
proxy.$modal.msgSuccess("签到成功！");
|
||||
//简单刷新一下数据
|
||||
checkStatus(actiInfoList.value.id);
|
||||
})
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.infox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
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;
|
||||
|
||||
.infoavatar {
|
||||
display: flex;
|
||||
height: 60rpx;
|
||||
|
||||
.launchName {
|
||||
font-size: 26rpx;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.launchAddres {
|
||||
|
||||
font-size: 24rpx;
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.elroll {
|
||||
font-size: 24rpx;
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infox2 {
|
||||
position: fixed;
|
||||
/* 固定位置 */
|
||||
left: 0;
|
||||
/* 左对齐 */
|
||||
right: 0;
|
||||
/* 右对齐 */
|
||||
bottom: 0;
|
||||
/* 底部对齐 */
|
||||
height: 68rpx;
|
||||
width: 100%;
|
||||
background-color: #f6f6f6;
|
||||
z-index: 10002;
|
||||
/* 确保在最上层 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue