feats

config/index.js

@@ -23,6 +23,7 @@ const config = {
   alias: {
     '@/layout': path.resolve(__dirname, '..', 'src/layout'),
     '@/components': path.resolve(__dirname, '..', 'src/components'),
+    '@/native': path.resolve(__dirname, '..', 'src/native'),
     '@/assets': path.resolve(__dirname, '..', 'src/assets'),
     '@/service': path.resolve(__dirname, '..', 'src/service'),
     '@/utils': path.resolve(__dirname, '..', 'src/utils'),

src/app.config.js

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   pages: [
     'pages/index/index',
+    'pages/avatar/index',
     'pages/rank/index'
   ],
   window: {

src/pages/index/components/avatar-change.vue → src/pages/avatar/components/avatar-change.vue

@@ -25,7 +25,7 @@ import { useModel } from '@zjxpcyc/vue-tiny-store';
 import defaultAvatar from '@/assets/images/avatar.png';
 import { updatePerson } from '@/service/person';
 import avatarSlider from './avatar-slider.vue';
-import useCanvas from '../useCanvas';
+import useCanvas from '../../avatar/useCanvas';
 
 export default {
   components: {

src/pages/avatar/index.config.js

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '换头像,为祖国母亲庆生',
+  enableShareAppMessage: true
+})

src/pages/avatar/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-layout>
+    <view class="v-flex container avatar-contariner">
+      <banner class="flex-0" />
+      <avatar-change class="flex-1" />
+    </view>
+  </a-layout>
+</template>
+
+<script>
+import { ref } from 'vue';
+import Taro, { useReady } from '@tarojs/taro';
+import { useModel } from '@zjxpcyc/vue-tiny-store';
+import { onShareAppMessage, onShareTimeline } from '@/utils/share'
+import banner from './components/banner.vue';
+import avatarChange from './components/avatar-change.vue';
+
+export default {
+  components: {
+    'avatar-change': avatarChange,
+    banner,
+  },
+  onShareAppMessage,
+  onShareTimeline,
+  setup () {
+    const { user } = useModel('user');
+
+    return {
+      user,
+    }
+  },
+}
+</script>
+
+<style lang="less">
+  .avatar-contariner {
+    background-repeat: no-repeat;
+    background-image: url(http://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/back.jpg);
+    background-position: center bottom;
+    background-size: 100% auto;
+  }
+</style>

src/pages/index/index.config.js

@@ -1,4 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '庆国庆,换头像',
-  enableShareAppMessage: true
-})
+  navigationBarTitleText: '换头像,为祖国母亲庆生',
+  enableShareAppMessage: true,
+})

src/pages/index/index.vue

@@ -1,52 +1,154 @@
 <template>
-  <a-layout>
-    <view class="v-flex container index-contariner">
-      <banner class="flex-0" />
-      <avatar-change class="flex-1" />
+  <view class="page index-page">
+    <map
+      class="index-map"
+      longitude="104.142597"
+      latitude="35.068215"
+      scale="3"
+      subkey="E4UBZ-2H265-WEMI5-QUMH5-VCCVZ-XPBHO"
+      layer-style="1"
+      :enable-zoom="false"
+      :enable-scroll="false"
+      :enable-poi="false"
+    ></map>
+
+    <view class="index-ad">
+      <banner-ad></banner-ad>
+    </view>
+
+    <view class="index-head">
+      <view class="index-title">全国庆生接力图</view>
+      <view class="index-tab flex">
+        <view class="index-tab-item flex-0" @tap="toNav('/pages/avatar/index')">换头像</view>
+        <view class="index-tab-item flex-0" @tap="toNav('/pages/rank/index')">排行榜</view>
+      </view>
     </view>
-  </a-layout>
+  </view>
 </template>
 
 <script>
-import { ref } from 'vue';
-import Taro, { useReady } from '@tarojs/taro';
-import { useModel } from '@zjxpcyc/vue-tiny-store';
-import banner from './components/banner.vue';
-import avatarChange from './components/avatar-change.vue';
-
-export default {
-  components: {
-    'avatar-change': avatarChange,
-    banner,
-  },
-  onShareAppMessage() {
-    return {
-      title: '庆国庆, 邀请好友一起换头像吧~',
-      path: `/pages/index/index?recommender=${this.user.personId}`,
-      imageUrl: 'https://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/avatar_share.jpg',
-    }
-  },
-  onShareTimeline() {
-    return {
-      title: '庆国庆, 邀请好友一起换头像吧~',
-      query: `recommender=${this.user.personId}`
-    }
-  },
-  setup () {
-    const { user } = useModel('user');
+  import { ref } from 'vue';
+  import Taro, { useReady } from '@tarojs/taro';
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
+  import { onShareAppMessage, onShareTimeline } from '@/utils/share';
+  import circleImg from '@/assets/images/star.png';
+
+  export default {
+    onShareAppMessage,
+    onShareTimeline,
+
+    setup () {
+      let markerAdded = false;
+      let drawing = false;
+      const mapCtx = ref();
+      const { list, getList } = useModel('rank');
 
-    return {
-      user,
+      const addMarkers = () => {
+        if (!list.value.length) return;
+        if (!mapCtx.value) return;
+        if (markerAdded) return;
+        if (drawing) return;
+
+        drawing = true;
+        const markers = list.value.map((it, inx) => ({
+          id: inx + 1,
+          longitude: it.location[0],
+          latitude: it.location[1],
+          iconPath: circleImg,
+          width: 12,
+          height: 12,
+          label: {
+            content: it.shorName,
+          }
+        }));
+
+        mapCtx.value.addMarkers({
+          markers,
+          clear: true,
+          success: () => {
+            markerAdded = true;
+          },
+          fail: (err) => {
+            console.error(err);
+          },
+          complete: () => {
+            drawing = false;
+          }
+        })
+      }
+
+      useReady(() => {
+        if (!list.value.length) {
+          getList().then(() => {
+            addMarkers();
+          });
+        }
+        
+        wx.createSelectorQuery().select('.index-map').context(res => {
+          mapCtx.value = res.context;
+          addMarkers();
+        }).exec()
+      });
+
+      const toNav = (url) => {
+        Taro.navigateTo({ url })
+      };
+
+      return {
+        toNav,
+      }
     }
-  },
-}
+    
+  }
+
 </script>
 
+
 <style lang="less">
-  .index-contariner {
-    background-repeat: no-repeat;
-    background-image: url(http://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/back.jpg);
-    background-position: center bottom;
-    background-size: 100% auto;
+.index-page {
+  position: relative;
+
+  map {
+    width: 100%;
+    height: 100%;
   }
-</style>
+
+  .index-head {
+    position: absolute;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 10;
+
+    .index-title {
+      text-align: center;
+      margin-top: 50rpx;
+      font-size: 1.4em;
+    }
+
+    .index-tab {
+      width: 80vw;
+      margin: auto;
+      margin-top: 50rpx;
+      justify-content: space-around;
+
+      .index-tab-item {
+        text-align: center;
+        width: 200rpx;
+        border: 2px solid #fffd00;
+        box-sizing: border-box;
+        border-radius: 16rpx;
+        line-height: 2em;
+        color: #fffd00;
+      }
+    }
+  }
+
+  .index-ad {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+  }
+}
+</style>

src/pages/rank/components/list.vue

@@ -47,7 +47,7 @@
         loading.value = true;
 
         const pageNum = pg ? pg : pageNumber.value + 1;
-        getRank({ pageNum, pageSize: 10, type: props.stType }).then(res => {
+        getRank({ pageNum, pageSize: 20, type: props.stType }).then(res => {
           const { records, current, pages } = res;
           list.value = list.value.concat(records || []);
           pageNumber.value = current;

src/pages/rank/index.config.js

@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '庆国庆,换头像',
+  navigationBarTitleText: '换头像,为祖国母亲庆生',
   enableShareAppMessage: true,
   // disableScroll: true,
 })

src/pages/rank/index.vue

@@ -26,6 +26,7 @@ import Taro, { useReady } from '@tarojs/taro';
 import { useModel } from '@zjxpcyc/vue-tiny-store';
 import BannerBox from '@/components/banner/index.vue'
 import { getMyRank } from '@/service/rank';
+import { onShareAppMessage } from '@/utils/share'
 import ListVue from './components/list.vue';
 
 export default {
@@ -33,13 +34,7 @@ export default {
     // 'banner-box': BannerBox,
     'rank-list': ListVue,
   },
-  onShareAppMessage() {
-    return {
-      title: '庆国庆, 邀请好友一起换头像吧~',
-      path: `/pages/index/index?recommender=${this.user.personId}`,
-      imageUrl: 'https://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/avatar_share.jpg',
-    }
-  },
+  onShareAppMessage,
   setup () {
     const { user } = useModel('user');
     const current = ref(0);

src/store/index.js

@@ -1,5 +1,7 @@
 import createStore from '@zjxpcyc/vue-tiny-store';
-import { ref } from 'vue'
+import { ref } from 'vue';
+import { getRank } from '@/service/rank';
+import { transform } from '@/utils/coordinate';
 
 function useUser() {
   const user = ref()
@@ -12,5 +14,21 @@ function useUser() {
   }
 }
 
-const store = createStore({ user: useUser })
+function useRank() {
+  const list = ref([])
+
+  const getList = () => {
+    return getRank({ pageNum: 1, pageSize: 500, type: 'area' }).then(res => {
+      const { records = [] } = res;
+      list.value = records.map(x => ({ ...x, location: transform(x.location) }));
+    })
+  }
+
+  return {
+    list,
+    getList,
+  }
+}
+
+const store = createStore({ user: useUser, rank: useRank })
 export default store

src/utils/coordinate.js

@@ -0,0 +1,54 @@
+
+/**  
+ * 单点坐标纠偏
+ */
+const pi = 3.14159265358979324;
+const a = 6378245.0;
+const ee = 0.00669342162296594323;
+const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+
+function outOfChina(lat, lon) {
+  if(lon < 72.004 || lon > 137.8347)
+      return true;
+  if(lat < 0.8293 || lat > 55.8271)
+      return true;
+  return false;
+};
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+  return ret;
+};
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+  return ret;
+};
+
+// wgs84 转 gcj02
+export function transform (location) {
+  const [wgLon, wgLat] = location.split(',').map(x => x - 0);
+  const latlng = [];
+  if(outOfChina(wgLat, wgLon)) {
+    latlng[0] = wgLon;
+    latlng[1] = wgLat;
+    return latlng;
+  }
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+  const radLat = wgLat / 180.0 * pi;
+  let magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+  latlng[0] = wgLon + dLon;
+  latlng[1] = wgLat + dLat;
+  return latlng;
+};

src/utils/share.js

@@ -0,0 +1,16 @@
+
+export function onShareAppMessage() {
+  return {
+    title: '换头像, 接力为祖国母亲庆生吧~',
+    path: `/pages/index/index?recommender=${this.user.personId}`,
+    imageUrl: 'https://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/avatar_share.jpg',
+  }
+}
+
+
+export function onShareTimeline() {
+  return {
+    title: '换头像, 接力为祖国母亲庆生吧~',
+    query: `recommender=${this.user.personId}`
+  }
+}