add radar

src/app.json

@@ -18,7 +18,6 @@
     "pages/privilege/main",
     "pages/volunteer/main",
     "pages/article/main",
-
     "pages/search/main"
   ],
   "window": {

src/components/detail.vue

@@ -119,14 +119,14 @@ export default{
     },
     download () {
       wx.request({
-        url: wx.getStorageSync('domain') + '/lastest/wechatapi/wechat/createqrcode',
+        url: process.env.BaseUrl + '/lastest/wechatapi/wechat/createqrcode',
         method: 'POST',
         data: {},
         header: {
           'content-type': 'application/json'
         },
         success: function (res) {
-          console.log(wx.getStorageSync('domain') + '/lastest/wechatapi/wechat/createqrcode')
+          console.log(process.env.BaseUrl + '/lastest/wechatapi/wechat/createqrcode')
           console.log(res)
           // let imgData = 'data:image/png;base64,' + res.data
           let imgData = res.data

src/components/radar.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="serviceIndex">
       <div class="index-title">成长指标</div>
+
       <canvas class="canvas" canvas-id="radar"></canvas>
     </div>
   </div>
@@ -10,140 +11,11 @@
 <script>
 export default {
   name: 'radar',
+  props: ['items'],
   data () {
     return {
-      radarData: [
-        {desc: '参与', value: '0.6'},
-        {desc: '关注', value: '0.5'},
-        {desc: '发贴', value: '0.8'},
-        {desc: '转发', value: '0.5'},
-        {desc: '粉丝', value: '1.0'},
-        {desc: '捐助', value: '0.3'}
-      ]
-    }
-  },
-  onload: function () {
-    console.log('----xxxx--')
-    var X0 = this.rpx(300)
-    var Y0 = this.rpx(250)
-    var R = this.rpx(180)
-    // 使用 wx.createContext 获取绘图上下文 ctx
-    var ctx = wx.createCanvasContext('radar')
-
-    /* 画圆背景
-    ctx.arc(X0, Y0, R, 0, 2 * Math.PI)
-    ctx.setFillStyle('#eeeeee')
-    ctx.fill() */
-
-    // 画圆线
-    for (var i = 60; i <= 180; i += 60) {
-      ctx.beginPath()
-      R = this.rpx(i)
-      ctx.arc(X0, Y0, R, 0, 2 * Math.PI)
-      ctx.setStrokeStyle('#fff')
-      ctx.setLineWidth(0.5)
-      ctx.stroke()
+      test: 'test222'
     }
-
-    // 计算点位置
-    var point = [
-      {x: X0, y: Y0 - R},
-      {x: X0 - 1.73 * 0.5 * R, y: Y0 - 0.5 * R},
-      {x: X0 + 1.73 * 0.5 * R, y: Y0 - 0.5 * R},
-      {x: X0 - 1.73 * 0.5 * R, y: Y0 + 0.5 * R},
-      {x: X0 + 1.73 * 0.5 * R, y: Y0 + 0.5 * R},
-      {x: X0, y: Y0 + R}
-    ]
-
-    // 画格线
-    ctx.beginPath()
-    for (i = 0; i <= 5; i++) {
-      ctx.moveTo(X0, Y0)
-      ctx.lineTo(point[i].x, point[i].y)
-    }
-    ctx.setLineWidth(0.5)
-    ctx.setStrokeStyle('#fff')
-    ctx.stroke()
-
-    // 写字
-    ctx.setFontSize(16)
-    ctx.setFillStyle('white')
-    ctx.fillText(this.radarData[0].desc, this.rpx(270), this.rpx(60))// 上
-    ctx.fillText(this.radarData[1].desc, this.rpx(80), this.rpx(150))// 左上
-    ctx.fillText(this.radarData[2].desc, this.rpx(455), this.rpx(145))// 右上
-    ctx.fillText(this.radarData[3].desc, this.rpx(80), this.rpx(380))// 左下
-    ctx.fillText(this.radarData[4].desc, this.rpx(450), this.rpx(380))// 右下
-    ctx.fillText(this.radarData[5].desc, this.rpx(270), this.rpx(460))// 下
-
-    // 画点
-    var x, y
-    var valuePoint = [
-      {x: X0, y: Y0},
-      {x: X0, y: Y0},
-      {x: X0, y: Y0},
-      {x: X0, y: Y0},
-      {x: X0, y: Y0},
-      {x: X0, y: Y0}
-    ]
-    for (i = 0; i <= 5; i++) {
-      ctx.beginPath()
-      var temp = Math.abs(X0 - point[i].x) * this.radarData[i].value
-      if (X0 > point[i].x) x = X0 - temp
-      else if (X0 < point[i].x) x = X0 + temp
-      else x = X0
-
-      temp = Math.abs(Y0 - point[i].y) * this.radarData[i].value
-      if (Y0 > point[i].y) y = Y0 - temp
-      else y = Y0 + temp
-
-      ctx.moveTo(x, y)
-      ctx.arc(x, y, this.rpx(8), 0, 2 * Math.PI)
-      ctx.setFillStyle('white')
-      ctx.fill()
-      valuePoint[i].x = x
-      valuePoint[i].y = y
-    }
-
-    // 画折线
-    ctx.beginPath()
-    ctx.moveTo(valuePoint[0].x, valuePoint[0].y)
-    // 上到左上
-    ctx.lineTo(valuePoint[1].x, valuePoint[1].y)
-    // 左上到左下
-    ctx.lineTo(valuePoint[3].x, valuePoint[3].y)
-    // 左下到下
-    ctx.lineTo(valuePoint[5].x, valuePoint[5].y)
-    // 下到右下
-    ctx.lineTo(valuePoint[4].x, valuePoint[4].y)
-    // 右下到右上
-    ctx.lineTo(valuePoint[2].x, valuePoint[2].y)
-    // 右上到上
-    ctx.lineTo(valuePoint[0].x, valuePoint[0].y)
-    ctx.setStrokeStyle('#fff')
-    ctx.setLineWidth(2.5)
-    ctx.stroke()
-    ctx.setFillStyle('rgba(250, 250, 250, 0.2)') // 透明
-    ctx.fill()
-
-    var that = this
-
-    ctx.draw(true, function () {
-      console.log('draw callback success')
-      wx.canvasToTempFilePath({
-        x: 0,
-        y: 0,
-        width: 500,
-        height: 600,
-        canvasId: 'radar',
-        fileType: 'png',
-        success: function (res) {
-          that.tempFilePath = res.tempFilePath
-          that.canvasHidden = true
-          console.log('canvasToTempFilePath callback success')
-          console.log('tempFilePath==', that.tempFilePath)
-        }
-      })
-    })
   }
 }
 </script>

src/pages/list/index.vue

@@ -1,20 +1,6 @@
 <template>
   <div class="page">
-    <!-- 自定义导航栏 -->
-    <div class="navigation">
-      <div class="btn">
-        <navigator open-type="navigateBack">
-          <img src="/static/images/home/back.png" class="back">
-        </navigator>
 
-        <div style="border-left: 1px solid #e2e2e2;margin: 2px 10px 0 4px;height: 18px;"></div>
-
-        <navigator open-type="reLaunch" url="/pages/home/main">
-          <img src="/static/images/home/home.png" class="home">
-        </navigator>
-      </div>
-      <div class="title">宝贝回家</div>
-    </div>
     <!-- 列表信息 -->
     <div class="line"></div>
     <div class="list_box" v-for="(item, index) in database" :key="index" :summary=summary @click="navToDetail" :id="item.UUID">
@@ -25,7 +11,7 @@
           <div class='list_right'>{{item.Title}}</div>
         </div>
     </div>
-    
+
 </div>
 </template>
 

src/pages/profile/index.vue

@@ -48,7 +48,7 @@ export default {
         {
           name: '已关注',
           icon: '/static/images/star.png',
-          page: '/pages/volunteer/main'
+          page: '/pages/list/main'
         },
         {
           name: '收信箱',

src/pages/volunteer/index.less

@@ -65,3 +65,23 @@
   width: 17pt;
   height: 17pt;
 }
+
+
+
+.share{
+  position:fixed;
+  bottom: 60pt;
+  right: 17pt;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #82bb8b;
+  text-align: center;
+  line-height: 50px;
+  z-index: 999;
+}
+.share img{
+  width: 35px;
+  height: 35px;
+  margin-top: 7px;
+}

src/pages/volunteer/index.vue

@@ -8,6 +8,16 @@
     <button type="primary" open-type="share" style="margin:20rpx">微信邀请</button>
     <button type="primary" open-type="share" style="margin:20rpx">二维码邀请</button>
 
+    <!-- 分享按钮 -->
+    <div class="share" v-on:click="download">
+      <img src="/static/images/home/sharetof.png">
+    </div>
+
+    <!-- 分享图片生成的画布 -->
+    <canvas canvas-id="radar2">
+      <cover-view></cover-view>
+    </canvas>
+
     <vfooter></vfooter>
   </div>
 </template>
@@ -31,12 +41,27 @@ export default {
   onShareAppMessage: function () {
     return {
       title: '志愿者',
-      path: '/pages/volunteer/main?from=forward\'',
+      path: '/pages/volunteer/main?from=forward',
       imageUrl: '/static/images/forward/home2.jpg'
     }
   },
   method: {
+    rpx (param) {
+      console.log('2222')
+      // let windowW = wx.getSystemInfoSync().windowWidth
+      // return Number((windowW / 750 * param).toFixed(2))
+    },
     qrcode () {
+    },
+
+    preview () {
+      var that = this
+      wx.previewImage({
+        urls: [that.item.AvatarUrl]
+      })
+    },
+    download () {
+      console.log('xxxxxxx')
       wx.request({
         url: process.env.BaseUrl + '/lastest/wechatapi/wechat/createqrcode',
         method: 'POST',
@@ -77,7 +102,7 @@ export default {
           //   }
           // })
           console.log('filePath', filePath)
-          const ctx = wx.createCanvasContext('myCanvas')
+          const ctx = wx.createCanvasContext('radar2')
           // 填充背景色
           ctx.fillStyle = '#fff'
           ctx.fillRect(0, 0, 420, 615)
@@ -106,16 +131,6 @@ export default {
           ctx.fillText('寻亲编号：3255441', 50, 130)
           ctx.fillText('姓 名：某某', 50, 155)
           ctx.fillText('性 别：女', 50, 180)
-          ctx.fillText('出生日期：1986年05月43日', 50, 205)
-          ctx.fillText('失踪时身高：120厘米左右', 50, 230)
-          ctx.fillText('失踪时间：1994年03月21日', 50, 255)
-          ctx.fillText('失踪人所在地：广东省,云浮市', 50, 280)
-          ctx.fillText('失踪地点：广西壮族自治区,桂林市', 50, 305)
-          ctx.fillText('其他资料：我走丢时身上两件衣服，外', 50, 330)
-          ctx.fillText('面是一件毛衣，里面是一件粉红色的，', 50, 355)
-          ctx.fillText('一条格子裤', 50, 380)
-          ctx.fillText('注册时间：2018/6/23 12:02:34', 50, 430)
-          ctx.fillText('跟进志愿者：淡雅宁静', 50, 455)
           // 二维码关注区域绘制
           ctx.setFontSize(20)
           ctx.setFillStyle('#393939')
@@ -155,13 +170,27 @@ export default {
     }
   },
   onLoad: function () {
+
   },
   onShow: function () {
-    var windowWidth = wx.getSystemInfoSync().windowWidth
-    // 拿到canvas context
-    let ctx = wx.createCanvasContext('share_canvas')
-    ctx.drawImage('/static/images/test_mc/3.jpg', 0, 0, windowWidth, 500)
-    ctx.draw()
+    const context = wx.createCanvasContext('radar')
+
+    context.setStrokeStyle('#00ff00')
+    context.setLineWidth(5)
+    context.rect(0, 0, 200, 200)
+    context.stroke()
+    context.setStrokeStyle('#ff0000')
+    context.setLineWidth(2)
+    context.moveTo(160, 100)
+    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
+    context.moveTo(140, 100)
+    context.arc(100, 100, 40, 0, Math.PI, false)
+    context.moveTo(85, 80)
+    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
+    context.moveTo(125, 80)
+    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
+    context.stroke()
+    context.draw()
   }
 }
 </script>