|
@@ -0,0 +1,380 @@
|
|
|
+// pages/order_receipt/index.js
|
|
|
+import { getUserInfo } from '../../api/user.js';
|
|
|
+import { getOrderDetail } from '../../api/order.js';
|
|
|
+const app = getApp()
|
|
|
+
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ parameter: {
|
|
|
+ 'navbar': '1',
|
|
|
+ 'return': '1',
|
|
|
+ 'title': '订单回执',
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ // orderId:'wx159384742516922741',
|
|
|
+ orderId: 'wx159374726502329057',
|
|
|
+ cartInfo: [],//购物车产品
|
|
|
+ orderInfo: { system_store: {} },//订单详情
|
|
|
+ windowW: '',
|
|
|
+ windowH: '',
|
|
|
+ order_id: '',
|
|
|
+ img: ''
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 登录回调
|
|
|
+ *
|
|
|
+ */
|
|
|
+ onLoadFun: function () {
|
|
|
+ this.getOrderInfo();
|
|
|
+ this.setData({
|
|
|
+ show: true
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取订单详细信息
|
|
|
+ *
|
|
|
+ */
|
|
|
+ getOrderInfo: function () {
|
|
|
+
|
|
|
+ var that = this;
|
|
|
+ wx.showLoading({ title: "正在加载中" });
|
|
|
+
|
|
|
+ getOrderDetail(that.data.orderId).then(res => {
|
|
|
+ var e = res.data;
|
|
|
+ that.CreateCanvas(e)
|
|
|
+ // console.log(productimg)
|
|
|
+ wx.hideLoading();
|
|
|
+ that.setData({
|
|
|
+ orderInfo: res.data,
|
|
|
+ order_id: res.data.order_id,
|
|
|
+ cartInfo: res.data.cartInfo,
|
|
|
+ evaluate: _type == 3 ? 3 : 0,
|
|
|
+ system_store: res.data.system_store
|
|
|
+ });
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad: function (options) {
|
|
|
+ var that = this
|
|
|
+ var orderId =options.orderId;
|
|
|
+ that.setData({
|
|
|
+ orderId:orderId
|
|
|
+ })
|
|
|
+ // 获取设备宽高,以备海报全屏显示
|
|
|
+ wx.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ that.setData({
|
|
|
+ windowW: res.windowWidth,
|
|
|
+ windowH: res.windowHeight
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ // 海报背景图线上地址
|
|
|
+ var url = '/images/bg.png'
|
|
|
+ // 头部背景图片
|
|
|
+ var urll = '/images/receipt_bgcolor.png'
|
|
|
+ var orderimg = '/images/icon_receipt.png'
|
|
|
+ var adressimg = '/images/address_icon_location.png'
|
|
|
+
|
|
|
+ // 头部背景图片
|
|
|
+ var urlqCord = 'http://pic.qqtn.com/up/2019-7/2019073010080912409.jpg'
|
|
|
+
|
|
|
+
|
|
|
+ that.setData({
|
|
|
+ bgpic: url
|
|
|
+ })
|
|
|
+
|
|
|
+ // that.getBG(urll).then(function (locationData) {
|
|
|
+ that.setData({
|
|
|
+ propic: urll
|
|
|
+ })
|
|
|
+ that.setData({
|
|
|
+ orderimg: orderimg
|
|
|
+ })
|
|
|
+ that.setData({
|
|
|
+ adressimg: adressimg
|
|
|
+ })
|
|
|
+ // })
|
|
|
+ that.getBG(urlqCord).then(function (locationData) {
|
|
|
+ that.setData({
|
|
|
+ qCord: locationData
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ CreateCanvas: function (e) {
|
|
|
+ var that = this;
|
|
|
+ var productimg = e.cartInfo[0].productInfo.image;
|
|
|
+ console.log(productimg);
|
|
|
+ that.getBG(productimg).then(function (locationData) {
|
|
|
+ that.setData({
|
|
|
+ product: locationData
|
|
|
+ })
|
|
|
+ that.drawCanvas(e)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 绘制canvas
|
|
|
+ drawCanvas(e) {
|
|
|
+ var that = this
|
|
|
+
|
|
|
+ var windowW = that.data.windowW
|
|
|
+ var windowH = that.data.windowH
|
|
|
+ var text = e.cartInfo[0].productInfo.store_name
|
|
|
+ if (e.cartInfo[0].productInfo.attrInfo == undefined) {
|
|
|
+ var texta = '';
|
|
|
+ console.log("1")
|
|
|
+ } else {
|
|
|
+ var texta = e.cartInfo[0].productInfo.attrInfo.suk;
|
|
|
+ console.log("2")
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用 wx.createContext 获取绘图上下文 context
|
|
|
+ var context = wx.createCanvasContext('firstCanvas')
|
|
|
+
|
|
|
+ // 海报背景图
|
|
|
+ context.drawImage(that.data.bgpic, (windowW - 380) / 2, (windowH - 560) / 2, 380, 580)
|
|
|
+ // 商品图片
|
|
|
+ context.drawImage(that.data.propic, (windowW - 380) / 2, (windowH - 560) / 2, 380, 125)
|
|
|
+ //支付成功icon
|
|
|
+ context.drawImage(that.data.orderimg, (windowW - 340) / 2, (windowH - 530) / 2, 36, 36)
|
|
|
+ //地址icon
|
|
|
+ context.drawImage(that.data.adressimg, (windowW - 348) / 2, (windowH - 250) / 2, 15, 20)
|
|
|
+
|
|
|
+ // context.drawImage(that.data.product, (windowW - 348) / 2, (windowH - 250) / 2, 15, 20)
|
|
|
+ context.drawImage(that.data.product, (windowW - 348) / 2, (windowH - 45) / 2, 85, 85)
|
|
|
+ // 商品文字描述
|
|
|
+ context.setFontSize(20)
|
|
|
+ context.setFillStyle("#fff")
|
|
|
+ context.fillText('下单成功', (windowW - 240) / 2, (windowH - 480) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#fff")
|
|
|
+ context.fillText('订单号', (windowW - 340) / 2, (windowH - 405) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#fff")
|
|
|
+ context.fillText(e.order_id, (windowW - 180) / 2, (windowH - 405) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#fff")
|
|
|
+ context.fillText('下单时间', (windowW - 340) / 2, (windowH - 345) / 2)
|
|
|
+
|
|
|
+
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#fff")
|
|
|
+ context.fillText(e._add_time, (windowW - 180) / 2, (windowH - 345) / 2)
|
|
|
+
|
|
|
+ context.font = 'bold 1px sans-serif'
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#333333")
|
|
|
+ context.fillText(e.real_name, (windowW - 270) / 2, (windowH - 245) / 2)
|
|
|
+
|
|
|
+ context.font = 'normal 1px sans-serif'
|
|
|
+ context.setFontSize(14)
|
|
|
+ context.setFillStyle("#333333")
|
|
|
+ context.fillText(e.user_phone, (windowW - 170) / 2, (windowH - 245) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(14)
|
|
|
+ context.setFillStyle("#CCCCCC")
|
|
|
+ context.fillText(e.user_address, (windowW - 270) / 2, (windowH - 188) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(10)
|
|
|
+ context.setFillStyle("#727C8E")
|
|
|
+ // context.fillText('¥99.99', (windowW + 50) / 2, (windowH + 55) / 2)
|
|
|
+ context.setLineWidth(0.1)
|
|
|
+ context.moveTo((windowW - 350) / 2, (windowH - 145) / 2); //设置线条的起始路径坐标
|
|
|
+ context.lineTo((windowW + 350) / 2, (windowH - 145) / 2); //设置线条的终点路径坐标
|
|
|
+ context.stroke(); //对当前路径进行描边
|
|
|
+
|
|
|
+ context.font = 'bold 1px sans-serif'
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#333333")
|
|
|
+ context.fillText('商品', (windowW - 345) / 2, (windowH - 80) / 2)
|
|
|
+
|
|
|
+ // 商品名字,名字很长调用方法将文字折行,传参 文字内容text,画布context
|
|
|
+ var row = that.newLine(text, context)
|
|
|
+ var a = 24//定义行高25
|
|
|
+ for (var i = 0; i < row.length; i++) {
|
|
|
+ context.font = 'normal 1px sans-serif'
|
|
|
+ context.setFontSize(16)
|
|
|
+ context.setFillStyle("#333333")
|
|
|
+ context.fillText(row[i], (windowW - 150) / 2, (windowH - 0) / 2 + a * i, 320)
|
|
|
+ }
|
|
|
+
|
|
|
+ context.setFontSize(13)
|
|
|
+ context.setFillStyle("#999999")
|
|
|
+ context.fillText(texta, (windowW - 150) / 2, (windowH + 100) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(10)
|
|
|
+ context.setFillStyle("#727C8E")
|
|
|
+ // context.fillText('¥99.99', (windowW + 50) / 2, (windowH + 55) / 2)
|
|
|
+ context.setLineWidth(0.1)
|
|
|
+ context.moveTo((windowW - 350) / 2, (windowH + 170) / 2); //设置线条的起始路径坐标
|
|
|
+ context.lineTo((windowW + 350) / 2, (windowH + 170) / 2); //设置线条的终点路径坐标
|
|
|
+ context.stroke(); //对当前路径进行描边
|
|
|
+
|
|
|
+ context.setFontSize(15)
|
|
|
+ context.setFillStyle("#B1B1B1")
|
|
|
+ context.fillText('商品数量', (windowW - 350) / 2, (windowH + 240) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(15)
|
|
|
+ context.setFillStyle("#1D1D1D")
|
|
|
+ context.fillText("x" + e.cartInfo[0].cart_num, (windowW + 290) / 2, (windowH + 240) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(15)
|
|
|
+ context.setFillStyle("#B1B1B1")
|
|
|
+ context.fillText('商品总额', (windowW - 350) / 2, (windowH + 320) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(15)
|
|
|
+ context.setFillStyle("#1D1D1D")
|
|
|
+ context.fillText("¥" + e.cartInfo[0].now_price, (windowW + 200) / 2, (windowH + 320) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(15)
|
|
|
+ context.setFillStyle("#B1B1B1")
|
|
|
+ context.fillText('实际付款', (windowW - 350) / 2, (windowH + 390) / 2)
|
|
|
+
|
|
|
+ context.setFontSize(18)
|
|
|
+ context.setFillStyle("#D0021B")
|
|
|
+ context.fillText("¥" + e.pay_price, (windowW + 180) / 2, (windowH +390) / 2)
|
|
|
+ context.draw()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击保存按钮,同时将画布转化为图片
|
|
|
+ daochu: function () {
|
|
|
+ var that = this;
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ canvasId: 'firstCanvas',
|
|
|
+ fileType: 'jpg',
|
|
|
+ quality: 1,
|
|
|
+ success: function (res) {
|
|
|
+ that.setData({
|
|
|
+ shareImage: res.tempFilePath
|
|
|
+ })
|
|
|
+ setTimeout(function () {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '将生成的海报保存到手机相册,可以发送给微信好友或分享到朋友圈',
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ that.eventSave()
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 将商品分享图片保存到本地
|
|
|
+ eventSave() {
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: this.data.shareImage,
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '保存图片成功',
|
|
|
+ icon: 'success',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //将线上图片地址下载到本地,此函数进行了封装,只有在需要转换url的时候调用即可
|
|
|
+ getBG(url) {
|
|
|
+ console.log(url + '111')
|
|
|
+ // Promise函数给我很大的帮助,让我能return出回调函数中的值
|
|
|
+ return new Promise(function (resolve) {
|
|
|
+ wx.downloadFile({
|
|
|
+ url: url,
|
|
|
+ success: function (res) {
|
|
|
+ url = res.tempFilePath
|
|
|
+ resolve(url);
|
|
|
+ console.log(url)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // canvas多文字换行
|
|
|
+ newLine(txt, context) {
|
|
|
+ var txtArr = txt.split('')
|
|
|
+ var temp = ''
|
|
|
+ var row = []
|
|
|
+ for (var i = 0; i < txtArr.length; i++) {
|
|
|
+ if (context.measureText(temp).width < 210) {
|
|
|
+ temp += txtArr[i]
|
|
|
+ } else {
|
|
|
+ i--
|
|
|
+ row.push(temp)
|
|
|
+ temp = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ row.push(temp)
|
|
|
+
|
|
|
+ //如果数组长度大于3 则截取前三个
|
|
|
+ if (row.length > 2) {
|
|
|
+ var rowCut = row.slice(0, 2);
|
|
|
+ var rowPart = rowCut[1];
|
|
|
+ var test = "";
|
|
|
+ var empty = [];
|
|
|
+ for (var a = 0; a < rowPart.length; a++) {
|
|
|
+ if (context.measureText(test).width < 0) {
|
|
|
+ test += rowPart[a];
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ empty.push(test);
|
|
|
+ var group = empty[0] //这里只显示三行,超出的用...表示
|
|
|
+ rowCut.splice(2, 1, group);
|
|
|
+ row = rowCut;
|
|
|
+ }
|
|
|
+
|
|
|
+ return row
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function () {
|
|
|
+ var that = this
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload: function () {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|