<template>
|
<view class="activity-user-detail" :data-theme='theme()' :class="theme() || ''" v-if="!loading">
|
<view class="top-status p30">
|
<view class="status-text" v-if="detail.is_verify == 0">
|
<view class="f40 fb"><text class="iconfont icon-daojishi f40 mr10"></text>待签到</view>
|
<view class="f26 gray3 pt10">请在{{ detail.activity.status_text.act_start_time }}前到活动地点进行签到</view>
|
</view>
|
<view class="status-text" v-else-if="detail.is_verify == 1">
|
<view class="f40 fb">已签到</view>
|
<view class="f26 gray3 pt10">感谢您参与活动，希望您在活动中有所收获</view>
|
</view>
|
<view class="status-text" v-else>
|
<view class="f40 fb">已缺席</view>
|
<view class="f26 gray3 pt10">您未能按时参与活动，下次要努力哦</view>
|
</view>
|
<view class="friend-info d-b-c mt20 p20 radius24" v-if="detail.is_friend">
|
<view class="d-s-c">
|
<text class="iconfont icon-gantanhao mr10"></text>
|
<text>帮朋友报名：</text>
|
</view>
|
<view>{{detail.real_name}}({{detail.mobile}})</view>
|
</view>
|
</view>
|
<view class="detail-section radius24">
|
<view class="bg-white detail-info-box" @click="gotoDetail">
|
<view class="pr20">
|
<image :src="detail.activity.image.file_path" mode="aspectFill"></image>
|
</view>
|
<view class="detail-info d-c pl20">
|
<view class="gray3 f28 text-ellipsis-2">{{detail.activity.name}}</view>
|
<view class="d-b-c">
|
<view class="gray6">活动开始时间：{{detail.activity.status_text.act_start_time}}</view>
|
</view>
|
</view>
|
</view>
|
<!-- 核销码 -->
|
<!-- <view class="qrcode-box circle-mask tc" v-if="codeImg">
|
<view class="codeimg pr">
|
<image :class="{'code-opacity':detail.is_verify>0}" :src="codeImg" mode="aspectFit"></image>
|
<view class="verify-image">
|
<image :src="remoteImg('verify_ok')" v-if="detail.is_verify==1"></image>
|
<image :src="remoteImg('expire')" v-if="detail.is_verify==2"></image>
|
</view>
|
</view>
|
</view> -->
|
<!-- <view class="qrcode-box circle-mask p30 f28" v-if="codeImg">
|
<view class="gray6 tc">
|
<text v-if="detail.is_verify==0">请将核销码出示给工作人员进行核销</text>
|
<text v-else-if="detail.is_verify==1">已核销完成</text>
|
<text v-else>已超过核销时间，无法核销</text>
|
</view>
|
</view> -->
|
</view>
|
<!-- 活动地址及导航 -->
|
<view class="detail-section contact-box radius24 bg-white p20 d-b-c">
|
<view class="flex-1 pr10">
|
<view class="f28 fb">活动地点</view>
|
<view class="gray6 pt10 f26">{{detail.activity.address}}</view>
|
</view>
|
<view class="d-s-c contact ml20">
|
<view class="d-c-c d-c" @click="openLocation(detail.activity)">
|
<text class="iconfont icon-dizhi"></text>
|
<text class="text">导航</text>
|
</view>
|
<view class="d-c-c d-c ml20" @click="callPhone(detail.activity.phone)">
|
<text class="iconfont icon-002dianhua"></text>
|
<text class="text">电话</text>
|
</view>
|
</view>
|
</view>
|
<!-- 报名信息 -->
|
<view class="detail-section radius24 bg-white f26 p20">
|
<view class="f28 fb">报名信息</view>
|
<view class="d-b-c pt30">
|
<view class="gray6">报名编号</view>
|
<view>{{detail.order_no}}</view>
|
</view>
|
<view class="d-b-c pt30">
|
<view class="gray6">报名费用</view>
|
<view>{{detail.total_price>0?'￥'+detail.total_price:'免费'}}</view>
|
</view>
|
<view class="d-b-c pt30">
|
<view class="gray6">报名时间</view>
|
<view>{{detail.create_time}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
loading: true,
|
order_id: 0,
|
detail: {},
|
codeImg: '',
|
};
|
},
|
|
onLoad(e) {
|
this.order_id = e.id;
|
},
|
onShow() {
|
this.getData();
|
this.getQRCode();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
self._get('branch.activityUser/detail', {order_id: self.order_id}, function(res) {
|
self.loading = false;
|
self.detail = res.data.detail;
|
});
|
},
|
|
/*核销码*/
|
getQRCode() {
|
let self = this;
|
self._get(
|
'branch.activityUser/qrcode', {
|
order_id: self.order_id,
|
source: self.getPlatform()
|
},
|
function(res) {
|
self.codeImg = res.data.qrcode;
|
}
|
);
|
},
|
|
// 跳转到活动详情页
|
gotoDetail() {
|
this.gotoPage('/pages/branch/activity/detail/detail?activity_id=' + this.detail.activity_id);
|
},
|
|
callPhone(phone){
|
uni.makePhoneCall({
|
phoneNumber: phone + ''
|
});
|
},
|
|
/*导航*/
|
openLocation(item) {
|
let self = this;
|
uni.openLocation({
|
latitude: Number(item.latitude),
|
longitude: Number(item.longitude),
|
address: item.address
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-user-detail {
|
.top-status {
|
.status-text {
|
.iconfont {
|
color: #333333;
|
}
|
}
|
|
.friend-info {
|
background: #FDF0DE;
|
}
|
}
|
|
.detail-section {
|
margin: 0 30rpx;
|
overflow: hidden;
|
|
+ .detail-section {
|
margin-top: 30rpx;
|
}
|
}
|
|
.detail-info-box {
|
display: flex;
|
padding: 20rpx;
|
|
image {
|
width: 230rpx;
|
height: 120rpx;
|
border-radius: 12rpx;
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
|
.detail-info {
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
|
.qrcode-box {
|
&.circle-mask {
|
position: relative;
|
-webkit-mask: radial-gradient(circle at 16rpx 16rpx, transparent 16rpx, tomato 0px);
|
-webkit-mask-position: -16rpx 0;
|
-webkit-mask-size: 100% 120%;
|
background: #ffffff;
|
|
&::after {
|
position: absolute;
|
content: ' ';
|
border-top: 1rpx dashed #ddd;
|
top: 16rpx;
|
left: 24rpx;
|
right: 24rpx;
|
}
|
}
|
.codeimg {
|
padding-top: 50rpx;
|
padding-bottom: 30rpx;
|
display: inline-block;
|
|
>image {
|
width: 240rpx;
|
height: 240rpx;
|
display: inline-block;
|
|
&.code-opacity {
|
opacity: .4;
|
}
|
}
|
|
.verify-image {
|
position: absolute;
|
bottom: -10rpx;
|
right: -130rpx;
|
|
image {
|
width: 180rpx;
|
height: 180rpx;
|
opacity: .3;
|
}
|
}
|
}
|
}
|
|
.contact-box {
|
.contact {
|
.iconfont {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.text {
|
font-size: 24rpx;
|
}
|
}
|
}
|
}
|
|
</style>
|
