hzuapps#7 hzuapps#624

students/1714080903223/pages/fortune-result/fortune-result.js

@@ -0,0 +1,218 @@
+// pages/fortune-result.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    pixelRatio: 0,
+    windowWidth: 0,
+    windowHeight: 0,
+    showBgImagePath: '',
+    showBgImagePath2: '../../images/[email protected]',
+    showBgImagePath3: '../../images/[email protected]',
+    dogBgImagePath: '',
+    dogBgImagePath2: '../../images/[email protected]',
+    dogBgImagePath3: '../../images/[email protected]',
+    qrBgImagePath: '../../images/[email protected]',
+    name: '',
+    title: '',
+    desc: ''
+  },
+
+  returnIndex: () => {
+    // 关闭跳转
+    wx.redirectTo({
+      url: '../index/index'
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    let that = this;
+    let arr = wx.getStorageSync('currentFortuneData') || {};
+    this.setData({
+      name: arr.name + '的2019运势',
+      title: arr.title,
+      desc: arr.desc
+    })
+
+    wx: wx.getSystemInfo({
+      success: function (res) {
+        that.setData({
+          pixelRatio: res.pixelRatio,
+          windowWidth: res.windowWidth,
+          windowHeight: res.windowHeight
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    this.drawCanvas();
+  },
+
+  drawCanvas: function () {
+    // 根据像素比绘画不同的图片
+    if (this.data.pixelRatio == 2) {
+      this.setData({
+        showBgImagePath: this.data.showBgImagePath2,
+        dogBgImagePath: this.data.dogBgImagePath2
+      });
+    } else {
+      this.setData({
+        showBgImagePath: this.data.showBgImagePath3,
+        dogBgImagePath: this.data.dogBgImagePath3
+      });
+    }
+    let ctx = wx.createCanvasContext('myCanvas');
+    // 画布宽高
+    let ctxW = this.data.windowWidth;
+    // let ctxH = this.data.windowHeight - 80;
+    let ctxH = 500;
+    // 默认像素比
+    let pixelRatio = this.data.pixelRatio;
+    // 屏幕系数比，以设计稿375*667（iphone7）为例
+    let XS = this.data.windowWidth / 375;
+
+    // 垂直渐变
+    const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
+    grd.addColorStop(0, '#0E128D');
+    grd.addColorStop(1, '#080E3A');
+    ctx.setFillStyle(grd);
+
+    ctx.fillRect(0, 0, ctxW, ctxH);
+
+    ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158 * XS, 34 * XS, 317 * XS, 361 * XS);
+    ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);
+
+    ctx.setFontSize(18 * XS);
+    ctx.setFillStyle('#F7F7FA');
+    ctx.setTextAlign('center');
+    ctx.setTextBaseline('middle');
+    ctx.fillText(this.data.name, ctxW / 2, 58 * XS);
+
+    ctx.setTextAlign('center');
+    ctx.setTextBaseline('middle');
+    ctx.setFontSize(35 * XS);
+    ctx.setFillStyle('#232884');
+    this.fontLineFeed(ctx, this.data.title, 1, 38 * XS, ctxW / 2, 120 * XS);
+
+    ctx.setTextAlign('center');
+    ctx.setTextBaseline('middle');
+    ctx.setFontSize(14);
+    ctx.setFillStyle('#FF72A5');
+    this.fontLineFeed(ctx, this.data.desc, 18 * XS, 20 * XS, 200 * XS, 330 * XS);
+
+    ctx.drawImage(this.data.qrBgImagePath, ctxW / 2 - 46 * XS, 400 * XS, 80 * XS, 80 * XS);
+
+    ctx.stroke();
+    ctx.draw();
+  },
+  // 文字换行
+  /**
+   * ctx,画布对象
+   * str,需要绘制的文字
+   * splitLen,切割的长度字符串
+   * strHeight,每行文字之间的高度
+   * x,位置
+   * y
+   */
+  fontLineFeed: function (ctx, str, splitLen, strHeight, x, y) {
+    let strArr = [];
+    for (let i = 0, len = str.length / splitLen; i < len; i++) {
+      strArr.push(str.substring(i * splitLen, i * splitLen + splitLen));
+    }
+    let s = 0;
+    for (let j = 0, len = strArr.length; j < len; j++) {
+      s = s + strHeight;
+      ctx.fillText(strArr[j], x, y + s);
+    }
+  },
+  // 保存图片
+  saveImage: function (e) {
+
+    wx.canvasToTempFilePath({
+      canvasId: 'myCanvas',
+      success: function (res) {
+        console.log(res);
+        wx.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success(result) {
+            wx.showToast({
+              title: '图片保存成功',
+              icon: 'success',
+              duration: 2000
+            })
+          }
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    return {
+      title: '2019运势小程序',
+      path: 'pages/index/index',
+      success: function (res) {
+        // 转发成功
+        wx.showToast({
+          title: '转发成功',
+          icon: 'success',
+          duration: 2000
+        })
+      },
+      fail: function (res) {
+        // 转发失败
+        wx.showToast({
+          title: '转发失败',
+          icon: 'loading',
+          duration: 2000
+        })
+      }
+    }
+  }
+})

students/1714080903223/pages/fortune-result/fortune-result.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "2019运势"
+}

students/1714080903223/pages/fortune-result/fortune-result.wxml

@@ -0,0 +1,18 @@
+<!--pages/fortune-result.wxml-->
+<view class="result-page">
+  <view class="wrap">
+    <view class="main">
+      <!--margin: 0;padding: 0;解决某些机型有边距出现的问题-->
+      <canvas canvas-id='myCanvas' style='width:100%;height:500px;margin: 0;padding: 0;display: block;'></canvas>
+    </view>
+  </view>
+
+  <view class='footer'>
+    <view class='btn-layout'>
+      <button class='btn-pierced btn-width' bindtap="returnIndex">换个名字测</button>
+    </view>
+    <view class='btn-layout'>
+      <button class='btn btn-layout btn-width' bindtap="saveImage">保存图片</button>
+    </view>
+  </view>
+</view>

students/1714080903223/pages/fortune-result/fortune-result.wxss

@@ -0,0 +1,26 @@
+/* pages/fortune-result.wxss */
+.result-page{
+  height: 100%;
+}
+.wrap {
+  height: auto;
+  min-height: 100%;
+  background-color: #080E3A;
+}
+.main { 
+  padding-bottom: 80px;
+}
+.footer{
+  height:80px;
+  margin-top: -80px;
+  display: flex;
+  /* background-image: linear-gradient(-180deg, #080E3A 98%, #080E3A 100%); */
+  background-color: #080E3A;
+}
+
+.btn-layout{
+  flex: 1;
+}
+.btn-width{
+  width: 306rpx;
+}