From 7a37ee72adb05269def0cbcbd40d492b04f5ba2a Mon Sep 17 00:00:00 2001 From: xy <271556543@qq.com> Date: Tue, 27 Jun 2023 13:22:06 +0800 Subject: [PATCH] 2022.6.27 --- App.vue | 125 +++++++++-------- common/http.api.js | 9 +- manifest.json | 2 +- pages/certificate/certificate.vue | 27 +++- pages/map/map.vue | 215 +++++++++++++++++++++++------- store/index.js | 2 +- 6 files changed, 258 insertions(+), 122 deletions(-) diff --git a/App.vue b/App.vue index 69f1c1c..44f0dcf 100644 --- a/App.vue +++ b/App.vue @@ -2,72 +2,71 @@ const jwx = require('jweixin-module') export default { onLaunch: function() { - // let link = window.location.href; - // if (/code=/.test(link) || link.indexOf("code") > -1) { - // let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(link) || - // [, ''])[1].replace(/\+/g, '%20')) || null - // let lifeData = uni.getStorageSync('lifeData') - // if (!lifeData.vuex_token || !lifeData.vuex_userId) { - // this.$u.api.login({ - // code: temp - // }).then(res => { - // uni.setStorageSync('lifeData', { - // vuex_token: res.token, - // vuex_userId: res.user_id - // }) - // this.$u.vuex('vuex_token', res.token) - // this.$u.vuex('vuex_userId', res.user_id) - // }) - // } - // } else { - // this.$u.api.getAppId().then(res => { - // let redirect = encodeURIComponent(link.replace(/#\//, "")) - // window.location.href = - // `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base#wechat_redirect` - // }) - // } - this.$nextTick(() => { - let url = location.href.split('#')[0] - this.$u.api.share({ - url - }).then(res => { - jwx.config({ - debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。 - appId: res.appId, - jsApiList: res.jsApiList, - nonceStr: res.nonceStr, - signature: res.signature, - timestamp: res.timestamp, - }) - jwx.ready(() => { - jwx.updateAppMessageShareData({ - title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 - desc: '我是党史记录人-红色少年行 未成年人研学', - link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 - imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 - }); - jwx.updateTimelineShareData({ - title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 - desc: '我是党史记录人-红色少年行 未成年人研学', - link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 - imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 - }); - jwx.onMenuShareAppMessage({ - title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 - desc: '我是党史记录人-红色少年行 未成年人研学', - link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 - imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 - }); - jwx.onMenuShareTimeline({ - title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 - desc: '我是党史记录人-红色少年行 未成年人研学', - link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 - imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 - }); + let link = window.location.href; + if (/code=/.test(link) || link.indexOf("code") > -1) { + let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(link) || + [, ''])[1].replace(/\+/g, '%20')) || null + let lifeData = uni.getStorageSync('lifeData') + if (!lifeData.vuex_token || !lifeData.vuex_userId) { + this.$u.api.login({ + code: temp + }).then(res => { + this.$u.api.user().then(res => { + this.$u.vuex('vuex_user', res) + }) + this.$u.vuex('vuex_token', res.token) + + let url = location.href.split('#')[0] + this.$u.api.share({ + url + }).then(res => { + jwx.config({ + debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。 + appId: res.appId, + jsApiList: res.jsApiList, + nonceStr: res.nonceStr, + signature: res.signature, + timestamp: res.timestamp, + }) + jwx.ready(() => { + jwx.updateAppMessageShareData({ + title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 + desc: '我是党史记录人-红色少年行 未成年人研学', + link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 + imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 + }); + jwx.updateTimelineShareData({ + title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 + desc: '我是党史记录人-红色少年行 未成年人研学', + link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 + imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 + }); + jwx.onMenuShareAppMessage({ + title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 + desc: '我是党史记录人-红色少年行 未成年人研学', + link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 + imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 + }); + jwx.onMenuShareTimeline({ + title: '我是党史记录人-红色少年行 未成年人研学', // 分享标题 + desc: '我是党史记录人-红色少年行 未成年人研学', + link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 + imgUrl: 'http://h5.ali251.langye.net/res/share-img.jpeg', // 分享图标 + }); + }) + }) + }) + } + } else { + this.$u.api.getAppId().then(res => { + let redirect = encodeURIComponent(link.replace(/#\//, "")) + window.location.href = + `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base#wechat_redirect` }) - }) + } }) + }, onShow: function() { console.log('App Show') diff --git a/common/http.api.js b/common/http.api.js index fd98e52..1f2f948 100644 --- a/common/http.api.js +++ b/common/http.api.js @@ -1,6 +1,8 @@ //api集合 let apiApp = { login: '/api/mobile/user/wechat-login', + user: '/api/mobile/user/show', + saveUser: '/api/mobile/user/save', getAppId: '/api/mobile/user/wechat-login-url', getQuestions: '/api/mobile/quiz/get-questions', getPoints: '/api/mobile/map-point/point-list', @@ -19,6 +21,7 @@ const install = (Vue, vm) => { //api方法 let login = (params = {}) => vm.$u.get(apiApp.login, params); + let user = (params = {}) => vm.$u.get(apiApp.user, params); let getAppId = (params = {}) => vm.$u.get(apiApp.getAppId, params); let getQuestions = (params = {}) => vm.$u.get(apiApp.getQuestions, params); let getPoints = (params = {}) => vm.$u.get(apiApp.getPoints, params) @@ -29,9 +32,11 @@ const install = (Vue, vm) => { let saveQuiz = (params = {}) => vm.$u.post(apiApp.saveQuiz, params); let pointDetail = (params = {}) => vm.$u.get(apiApp.pointDetail, params); let share = (params = {}) => vm.$u.get(apiApp.share, params); - const savePoster = (params = {}) => vm.$u.get(apiApp.savePoster, params); + let savePoster = (params = {}) => vm.$u.get(apiApp.savePoster, params); + + let saveUser = (params = {}) => vm.$u.post(apiApp.saveUser, params); // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下 - vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail, share, savePoster }; + vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail, share, savePoster, user, saveUser }; } export default { diff --git a/manifest.json b/manifest.json index fc3d227..26dc3a9 100644 --- a/manifest.json +++ b/manifest.json @@ -71,7 +71,7 @@ "vueVersion" : "2", "h5" : { "router" : { - "base" : "" + "base" : "h5hssnx" } } } diff --git a/pages/certificate/certificate.vue b/pages/certificate/certificate.vue index 50506f6..1196d29 100644 --- a/pages/certificate/certificate.vue +++ b/pages/certificate/certificate.vue @@ -14,13 +14,13 @@
- 王晓明同学， + {{ vuex_user.name ? vuex_user.name : name }}同学，
你已完成2023年“我是党史记录人——红色少年行”未成年人研学线上打卡。
- 学党史悟精神聚力量，你是第2023位完成者，快邀请你的同学一起完成线上打卡吧! + 学党史悟精神聚力量，你是第{{ vuex_user.address || 0 }}位完成者，快邀请你的同学一起完成线上打卡吧!
@@ -53,6 +53,12 @@ + + + + + + @@ -68,11 +74,17 @@ export default { isShare: false, isHidden: false, imgData: '', + isShowModal: false, + + name: '', }; }, methods: { - showShare () { - this.isShare = true + saveName () { + + this.$u.api.saveUser(Object.assign(this.vuex_user, { + name: this.name + })) }, share() { @@ -90,7 +102,7 @@ export default { scrollX: 0, useCORS: true, ignoreElements:(element) => { - return element.attributes.id == 'share-img' + return element.id == 'share-img' } }).then(cnv => { uni.hideLoading() @@ -161,6 +173,11 @@ export default { xhr.send(form) }) } + }, + onShow() { + if (!this.vuex_user.name) { + this.isShowModal = true + } } } diff --git a/pages/map/map.vue b/pages/map/map.vue index e3c5479..9f34038 100644 --- a/pages/map/map.vue +++ b/pages/map/map.vue @@ -14,18 +14,27 @@ :key="index" :style="{ 'transform': `translate(calc(${area.w * item.x / 100}px - 50%),calc(${area.h * item.y / 100}px - 50%))` }" @click="$u.throttle(() => toDetail(item))"> -
- +
+
+
+ +
+
{{ item.name }}
-
- {{ item.name }} -
+ + + + + + + + + + + +
@@ -129,7 +138,7 @@ export default { this.done = res.point_answer_total || 0 this.pointers = res.points?.map((i, index) => { return { - d: convertToEquivalentAngle(60 * index + 1), + d: convertToEquivalentAngle(70 * index + 1), ...i } }) @@ -137,6 +146,21 @@ export default { }, computed: { + transformBox () { + return function (deg) { + if (deg) { + if ((deg % 360) > -90 && (deg % 360) < 90) { + return `translate(calc(${Math.floor(Math.sin(Math.PI / 180 * deg) * 80)}rpx - 48rpx), calc(${-1 * Math.floor(Math.cos(Math.PI / 180 * deg) * 80)}rpx - 48rpx))` + } else { + return `translate(calc(${Math.floor(Math.sin(Math.PI / 180 * deg) * 80)}rpx - 48rpx), calc(${-1 * Math.floor(Math.cos(Math.PI / 180 * deg) * 80)}rpx - 48rpx))` + } + + } else { + return 'translate(0, 0)' + } + } + }, + translateText () { return function (deg) { if (deg) { @@ -190,72 +214,78 @@ export default { padding: 20rpx 0; margin: 0 auto; + .pointer { width: 16rpx; height: 16rpx; border-radius: 100%; background: #fff; + transform-origin: center; border: 3rpx solid #C52A34; display: inline-block; position: relative; - & .text { + &__horn { + width: 20rpx; + height: 26rpx; + clip-path: polygon(20% 0, 80% 0%, 50% 100%, 20% 0); background: #F5D8AD; - border-radius: 6rpx; - word-break: keep-all; filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF); - color: #C52A34; - font-size: 20rpx; - text-align: center; - transform-origin: 50% 0; + transform-origin: 50% 100%; - padding: 12rpx 10rpx; position: absolute; - &--active { - background: #b93736; - color: #fff; + background: #C52A34; } } & .box { - width: 116rpx; - height: 116rpx; - border-radius: 100%; - box-sizing: border-box; - border: 5rpx #F5D8AD solid; - display: flex; - justify-content: center; - align-items: center; - filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF); - transform-origin: 50% calc(100% + 26rpx + 5rpx); + transform-origin: 0 0; - // overflow: hidden; position: absolute; - top: calc(-116rpx - 26rpx); - left: -50rpx; + &__text { + width: 200rpx; + word-break: break-word; + background: #F5D8AD; + border-radius: 6rpx; + filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF); + color: #C52A34; + font-size: 20rpx; + zoom: .85; + text-align: center; + transform: translate(-50rpx,-100%); - &--active { - border-color: #b93736; + padding: 10rpx 8rpx; + position: absolute; + top: 0; + + &--active { + background: #b93736; + color: #fff; + } } - & > img { - width: 106rpx; - height: 106rpx; + &__image { + width: 116rpx; + height: 116rpx; border-radius: 100%; + box-sizing: border-box; + border: 5rpx #F5D8AD solid; + display: flex; + justify-content: center; + align-items: center; + filter: drop-shadow(2rpx 4rpx 4rpx #90D2CF); + + & > img { + width: 106rpx; + height: 106rpx; + border-radius: 100%; + } } - &::after { - content: ''; - height: 26rpx; - width: 22rpx; - background: #F5D8AD; - clip-path: polygon(0 0, 100% 0, 50% 100%,0 0); - - transform: translate(-50% , 100%); - position: absolute; - bottom: 0; - left: 50%; + &--active { + border-color: #b93736; } + &--active::before { content: '已打卡'; font-size: 20rpx; @@ -276,6 +306,91 @@ export default { } } } + //.pointer { + // width: 16rpx; + // height: 16rpx; + // border-radius: 100%; + // background: #fff; + // border: 3rpx solid #C52A34; + // display: inline-block; + // + // position: relative; + // + // & .text { + // background: #F5D8AD; + // border-radius: 6rpx; + // word-break: keep-all; + // filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF); + // color: #C52A34; + // font-size: 20rpx; + // text-align: center; + // transform-origin: 50% 0; + // + // padding: 12rpx 10rpx; + // position: absolute; + // + // &--active { + // background: #b93736; + // color: #fff; + // } + // } + // & .box { + // width: 116rpx; + // height: 116rpx; + // border-radius: 100%; + // box-sizing: border-box; + // border: 5rpx #F5D8AD solid; + // display: flex; + // justify-content: center; + // align-items: center; + // filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF); + // transform-origin: 50% calc(100% + 26rpx + 5rpx); + // + // position: absolute; + // top: calc(-116rpx - 26rpx); + // left: -50rpx; + // + // &--active { + // border-color: #b93736; + // } + // & > img { + // width: 106rpx; + // height: 106rpx; + // border-radius: 100%; + // + // } + // &::after { + // content: ''; + // height: 26rpx; + // width: 22rpx; + // background: #F5D8AD; + // clip-path: polygon(0 0, 100% 0, 50% 100%,0 0); + // + // transform: translate(-50% , 100%); + // position: absolute; + // bottom: 0; + // left: 50%; + // } + // &--active::before { + // content: '已打卡'; + // font-size: 20rpx; + // color: #fff; + // background: #b93736; + // border-radius: 30rpx; + // zoom: .8; + // clip-path: circle(84rpx at 84% 178%); + // + // padding: 6rpx 14rpx 5rpx 122rpx; + // z-index: 2; + // position: absolute; + // top: -1rpx; + // left: -96rpx; + // } + // &--active::after { + // background: #b93736; + // } + // } + //} } } diff --git a/store/index.js b/store/index.js index 3a4e223..73e7600 100644 --- a/store/index.js +++ b/store/index.js @@ -33,7 +33,7 @@ const store = new Vuex.Store({ // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量 // 加上vuex_前缀，是防止变量名冲突，也让人一目了然 vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {}, - vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '1945|mGcboS5ApGYxvWUUJNk2ytorapfOU18d20AgiXqJ', + vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '', // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式 vuex_version: '1.0.0',