You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
8.6 KiB
350 lines
8.6 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="map">
|
|
<image class="map-title" :src="require('@/static/map-title.png')"></image>
|
|
<movable-area style="width:100vw;height:calc(100vh - 198rpx)" class="bg" scale-area>
|
|
<movable-view :x="-area.w/2" :style="{ 'height': 'calc(100vh - 198rpx)', 'width': area.w +40+'px' }" :scale="true"
|
|
out-of-bounds direction="all">
|
|
<view class="map-wrap img100" :style="{ 'height': 'calc(100vh - 198rpx)', 'width': area.w+'px','margin':'0 auto' }">
|
|
<img class="img100" style="height:calc(100vh - 198rpx);display:block;margin:0 auto" mode="heightFix" ref="image"
|
|
:src="require('@/static/map-map.png')" alt="" @load="load">
|
|
<view v-for="item in pointers">
|
|
<view class="map-item" @click="toDetail(item)" :style="{'top':item.y+'%','left':item.x+'%'}" >
|
|
<image class="map-item-flag" v-if="item.has_answer > 0" :src="require('@/static/map-flag.png')"></image>
|
|
<image class="map-item-points" :src="require('@/static/map-point.png')"></image>
|
|
<view class="map-item-title">
|
|
<view v-if="item.nameArr" style="display: flex;flex-wrap:wrap;width:330rpx">
|
|
<view v-for="i in item.nameArr" style="margin-right:6rpx">
|
|
<span class="map-item-title-text" :class="{'map-item-title-text-active':item.has_answer > 0}">{{i}}</span>
|
|
<block v-if="item.lat==='1'">
|
|
<image v-if="i==='通安镇党群服务中心'" class="map-item-title-logo"
|
|
:src="require('@/static/map-logo.png')"></image>
|
|
<image v-if="i==='通安镇新时代文明实践所'" class="map-item-title-logo1"
|
|
:src="require('@/static/map-logo1.png')"></image>
|
|
</block>
|
|
<block v-else>
|
|
<image class="map-item-title-logo"
|
|
:src="require('@/static/map-logo.png')"></image>
|
|
<image class="map-item-title-logo1"
|
|
:src="require('@/static/map-logo1.png')"></image>
|
|
</block>
|
|
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<span class="map-item-title-text" :class="{'map-item-title-text-active':item.has_answer > 0}">{{item.name}}</span>
|
|
<image v-if="item.lat==='0'" class="map-item-title-logo"
|
|
:src="require('@/static/map-logo.png')"></image>
|
|
<image v-if="item.lat==='0'&&item.lng!=1" class="map-item-title-logo1"
|
|
:src="require('@/static/map-logo1.png')"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</movable-view>
|
|
</movable-area>
|
|
</div>
|
|
|
|
<transition name="progress-box" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
<div class="progress" v-show="isShowProgress">
|
|
<div class="close">
|
|
<u-icon name="close-circle" :size="40" color="#555" @click="isShowProgress = false"></u-icon>
|
|
</div>
|
|
<div class="box" @click="$u.throttle(toCertificate)">
|
|
<div class="box__line-progress">
|
|
<u-line-progress :height="11" active-color="#b93736" :striped="true"
|
|
:percent="(done/5)*100" :striped-active="true">
|
|
<template #default>
|
|
<div></div>
|
|
</template>
|
|
</u-line-progress>
|
|
</div>
|
|
<div class="box__text">
|
|
<span>已完成</span>
|
|
<span style="font-style: italic;padding-right: 4rpx;" class="box__text--red">{{done}}</span>
|
|
<span>家打卡</span>
|
|
<template v-if="done <5">
|
|
<!-- <br><span>完成<span style="font-style: italic;padding-right: 4rpx;"
|
|
class="box__text--red">{{pointers.length}}</span>家即可获得</span>
|
|
<span class="box__text--red">荣誉证书</span> -->
|
|
<br><span>完成<span style="font-style: italic;padding-right: 4rpx;"
|
|
class="box__text--red">5</span>家即可解锁</span>
|
|
<span class="box__text--red">打卡记录</span>分享页
|
|
</template>
|
|
<template v-else>
|
|
<br><span>生成我的</span>
|
|
<span class="box__text--red" @click="$u.throttle(toCertificate)">打卡记录</span>分享页
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="expand-progress-box" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
<div class="progress expand-progress" v-show="!isShowProgress" @click="isShowProgress = true">
|
|
<u-icon name="arrow-left-double" color="#C52A34"></u-icon>
|
|
打卡进度
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
signInfo: '',
|
|
isBkgLoad: false,
|
|
done: 0,
|
|
isShowProgress: true,
|
|
area: {
|
|
w: 2212,
|
|
h: 1583,
|
|
x: -2212 / 4.8
|
|
},
|
|
pointers: []
|
|
};
|
|
},
|
|
methods: {
|
|
load(){
|
|
this.area.w = this.$refs['image'].getBoundingClientRect().width
|
|
this.area.h = this.$refs['image'].getBoundingClientRect().height
|
|
|
|
},
|
|
async getPoints() {
|
|
this.pointers = []
|
|
const res = await this.$u.api.getPoints()
|
|
this.done = res.point_answer_total>5?5:res.point_answer_total
|
|
res.points.map(item => {
|
|
if (item.name.indexOf("@") > -1) {
|
|
item.nameArr = item.name.split("@")
|
|
}
|
|
})
|
|
this.pointers = res.points
|
|
},
|
|
|
|
toCertificate() {
|
|
if(this.done < 5){
|
|
return
|
|
}else{
|
|
uni.navigateTo({
|
|
url: '/pages/certificate/certificate'
|
|
})
|
|
}
|
|
},
|
|
toDetail(item) {
|
|
this.$u.vuex('vuex_point_id', item.id)
|
|
uni.navigateTo({
|
|
url: `/pages/detail/detail?id=${item.id}`
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
onLoad() {
|
|
this.getPoints()
|
|
|
|
|
|
},
|
|
onShow() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wrap {
|
|
background-color: #e1f1f2;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
.img100{
|
|
height:calc(100vh - 198rpx)
|
|
}
|
|
.map {
|
|
&-title{
|
|
width:661rpx;
|
|
height:158rpx;
|
|
margin:0 auto;
|
|
padding:20rpx 0;
|
|
display:block;
|
|
}
|
|
&-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
&-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
&-flag{
|
|
width:111rpx;
|
|
height:76rpx;
|
|
position: absolute;
|
|
top:-70rpx;
|
|
left:50%;
|
|
}
|
|
&-points {
|
|
width: 19rpx;
|
|
height: 18rpx;
|
|
margin-right: 6rpx;
|
|
animation: ripple 1s infinite;
|
|
}
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(.5);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1.2);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
&-title {
|
|
background-color: rgba(220, 246, 124, .5);
|
|
border-radius: 10rpx;
|
|
border: 1px solid rgba(0, 0, 0, .5);
|
|
padding: 4rpx 6rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
|
|
&-text {}
|
|
&-text-active{
|
|
color:#c91c1e;
|
|
}
|
|
&-logo {
|
|
width: 30rpx;
|
|
height: 28rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
&-logo1 {
|
|
width: 30rpx;
|
|
height: 29rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.expand-progress {
|
|
color: #D33838;
|
|
background: #67b8be;
|
|
word-break: break-word;
|
|
font-size: 20rpx;
|
|
width: 20rpx;
|
|
border-radius: 10rpx 0 0 10rpx;
|
|
filter: drop-shadow(4rpx 4rpx 4rpx #67b8be) drop-shadow(4rpx 10rpx 8rpx #e1f1f2);
|
|
|
|
padding: 10rpx 18rpx;
|
|
}
|
|
|
|
.progress {
|
|
|
|
z-index: 999;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 40rpx;
|
|
|
|
& .close {
|
|
|
|
transform: translateX(-100%);
|
|
position: absolute;
|
|
top: -2rpx;
|
|
left: 0;
|
|
}
|
|
|
|
& .box {
|
|
background: #67b8be;
|
|
border-radius: 30rpx 0 0 30rpx;
|
|
filter: drop-shadow(4rpx 4rpx 4rpx #e1f1f2) drop-shadow(8rpx 10rpx 8rpx #e1f1f2);
|
|
|
|
padding: 20rpx 22rpx;
|
|
padding-top: 30rpx;
|
|
|
|
::v-deep .u-progress {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
::v-deep .u-active {
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
&__line-progress {
|
|
width: 282rpx;
|
|
height: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
&--bkg {
|
|
display: flex;
|
|
|
|
transform: translateY(calc(-100% - 7rpx));
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
}
|
|
|
|
&--img {
|
|
overflow: auto;
|
|
|
|
transform: translateX(50%);
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
text-align: center;
|
|
zoom: .95;
|
|
font-size: 16rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
|
|
&--red {
|
|
font-size: 30rpx;
|
|
color: #D33838;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade-in .8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out 0.6s ease-out both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |