A，增加生成分享图的功能

U，轮播图不自动滑动

app.json

@@ -4,6 +4,7 @@
         "pages/app-auth/index",
         "pages/category/index",
         "pages/cart/cart",
+        "pages/share/index",
         "pages/search/search",
         "pages/order-check/index",
         "pages/goods/goods",

components/canvasdrawer/canvasdrawer.js

@@ -0,0 +1,330 @@
+/* global Component wx */
+
+Component({
+    properties: {
+        painting: {
+            type: Object,
+            value: {
+                view: []
+            },
+            observer(newVal, oldVal) {
+                if (!this.data.isPainting) {
+                    if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+                        if (newVal && newVal.width && newVal.height) {
+                            this.setData({
+                                showCanvas: true,
+                                isPainting: true
+                            })
+                            this.readyPigment()
+                        }
+                    } else {
+                        if (newVal && newVal.mode !== 'same') {
+                            this.triggerEvent('getImage', {
+                                errMsg: 'canvasdrawer:samme params'
+                            })
+                        }
+                    }
+                }
+            }
+        }
+    },
+    data: {
+        showCanvas: false,
+        width: 100,
+        height: 100,
+        tempFileList: [],
+        isPainting: false
+    },
+    ctx: null,
+    cache: {},
+    ready() {
+        console.log('ready');
+        wx.removeStorageSync('canvasdrawer_pic_cache')
+        this.cache = wx.getStorageSync('canvasdrawer_pic_cache') || {}
+        this.ctx = wx.createCanvasContext('canvasdrawer', this)
+    },
+    methods: {
+        readyPigment() {
+            const {
+                width,
+                height,
+                views
+            } = this.data.painting
+            this.setData({
+                width,
+                height
+            })
+            const inter = setInterval(() => {
+                if (this.ctx) {
+                    clearInterval(inter)
+                    this.ctx.clearActions()
+                    this.ctx.save()
+                    this.getImagesInfo(views)
+                }
+            }, 100)
+        },
+        getImagesInfo(views) {
+            const imageList = []
+            for (let i = 0; i < views.length; i++) {
+                if (views[i].type === 'image') {
+                    imageList.push(this.getImageInfo(views[i].url))
+                }
+            }
+            const loadTask = []
+            for (let i = 0; i < Math.ceil(imageList.length / 8); i++) {
+                loadTask.push(new Promise((resolve, reject) => {
+                    Promise.all(imageList.splice(i * 8, 8)).then(res => {
+                        resolve(res)
+                    }).catch(res => {
+                        reject(res)
+                    })
+                }))
+            }
+            Promise.all(loadTask).then(res => {
+                let tempFileList = []
+                for (let i = 0; i < res.length; i++) {
+                    tempFileList = tempFileList.concat(res[i])
+                }
+                this.setData({
+                    tempFileList
+                })
+                this.startPainting()
+            })
+        },
+        startPainting() {
+            console.log('startPainting');
+            const {
+                tempFileList,
+                painting: {
+                    views
+                }
+            } = this.data
+            console.log(tempFileList)
+            for (let i = 0, imageIndex = 0; i < views.length; i++) {
+                // console.log(views[i]);
+                // console.log(views[i].type);
+                if (views[i].type === 'image') {
+                    this.drawImage({
+                        ...views[i],
+                        url: tempFileList[imageIndex]
+                    })
+                    imageIndex++
+                } else if (views[i].type === 'text') {
+                    if (!this.ctx.measureText) {
+                        wx.showModal({
+                            title: '提示',
+                            content: '当前微信版本过低，无法使用 measureText 功能，请升级到最新微信版本后重试。'
+                        })
+                        this.triggerEvent('getImage', {
+                            errMsg: 'canvasdrawer:version too low'
+                        })
+                        return
+                    } else {
+                        this.drawText(views[i])
+                    }
+                } else if (views[i].type === 'rect') {
+                    this.drawRect(views[i])
+                }
+            }
+            console.log('????????为什么');
+            this.ctx.draw(false, () => {
+                console.log(this.cache);
+                wx.setStorageSync('canvasdrawer_pic_cache', this.cache)
+                const system = wx.getSystemInfoSync().system
+                if (/ios/i.test(system)) {
+                    this.saveImageToLocal()
+                } else {
+                    // 延迟保存图片，解决安卓生成图片错位bug。
+                    setTimeout(() => {
+                        this.saveImageToLocal()
+                    }, 800)
+                }
+            })
+        },
+        drawImage(params) {
+            console.log('drawImage');
+            this.ctx.save()
+            const {
+                url,
+                top = 0,
+                left = 0,
+                width = 0,
+                height = 0,
+                borderRadius = 0,
+                deg = 0
+            } = params
+            // if (borderRadius) {
+            //   this.ctx.beginPath()
+            //   this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI)
+            //   this.ctx.clip()
+            //   this.ctx.drawImage(url, left, top, width, height)
+            // } else {
+            if (deg !== 0) {
+                this.ctx.translate(left + width / 2, top + height / 2)
+                this.ctx.rotate(deg * Math.PI / 180)
+                this.ctx.drawImage(url, -width / 2, -height / 2, width, height)
+            } else {
+                this.ctx.drawImage(url, left, top, width, height)
+            }
+            // }
+            this.ctx.restore()
+        },
+        drawText(params) {
+            console.log('drawText');
+            this.ctx.save()
+            // console.log('drawText');            
+            const {
+                MaxLineNumber = 2,
+                    breakWord = false,
+                    color = 'black',
+                    content = '',
+                    fontSize = 16,
+                    top = 0,
+                    left = 0,
+                    lineHeight = 20,
+                    textAlign = 'left',
+                    width,
+                    bolder = false,
+                    textDecoration = 'none'
+            } = params
+
+            this.ctx.beginPath()
+            this.ctx.setTextBaseline('top')
+            this.ctx.setTextAlign(textAlign)
+            this.ctx.setFillStyle(color)
+            this.ctx.setFontSize(fontSize)
+
+            if (!breakWord) {
+                this.ctx.fillText(content, left, top)
+                this.drawTextLine(left, top, textDecoration, color, fontSize, content)
+            } else {
+                let fillText = ''
+                let fillTop = top
+                let lineNum = 1
+                for (let i = 0; i < content.length; i++) {
+                    fillText += [content[i]]
+                    if (this.ctx.measureText(fillText).width > width) {
+                        if (lineNum === MaxLineNumber) {
+                            if (i !== content.length) {
+                                fillText = fillText.substring(0, fillText.length - 1) + '...'
+                                this.ctx.fillText(fillText, left, fillTop)
+                                this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+                                fillText = ''
+                                break
+                            }
+                        }
+                        this.ctx.fillText(fillText, left, fillTop)
+                        this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+                        fillText = ''
+                        fillTop += lineHeight
+                        lineNum++
+                    }
+                }
+                this.ctx.fillText(fillText, left, fillTop)
+                this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+            }
+            this.ctx.restore()
+            if (bolder) {
+                this.drawText({
+                    ...params,
+                    left: left + 0.3,
+                    top: top + 0.3,
+                    bolder: false,
+                    textDecoration: 'none'
+                })
+            }
+        },
+        drawTextLine(left, top, textDecoration, color, fontSize, content) {
+            if (textDecoration === 'underline') {
+                this.drawRect({
+                    background: color,
+                    top: top + fontSize * 1.2,
+                    left: left - 1,
+                    width: this.ctx.measureText(content).width + 3,
+                    height: 1
+                })
+            } else if (textDecoration === 'line-through') {
+                this.drawRect({
+                    background: color,
+                    top: top + fontSize * 0.6,
+                    left: left - 1,
+                    width: this.ctx.measureText(content).width + 3,
+                    height: 1
+                })
+            }
+        },
+        drawRect(params) {
+            this.ctx.save()
+            const {
+                background,
+                top = 0,
+                left = 0,
+                width = 0,
+                height = 0
+            } = params
+            this.ctx.setFillStyle(background)
+            this.ctx.fillRect(left, top, width, height)
+            this.ctx.restore()
+        },
+        getImageInfo(url) {
+            return new Promise((resolve, reject) => {
+                if (this.cache[url]) {
+                    resolve(this.cache[url])
+                } else {
+                    const objExp = new RegExp(/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/)
+                    if (objExp.test(url)) {
+                        wx.getImageInfo({
+                            src: url,
+                            complete: res => {
+                                // console.log(res.errMsg);
+                                if (res.errMsg === 'getImageInfo:ok') {
+                                    this.cache[url] = res.path
+                                    resolve(res.path)
+                                } else {
+                                    this.triggerEvent('getImage', {
+                                        errMsg: 'canvasdrawer:download fail'
+                                    })
+                                    reject(new Error('getImageInfo fail'))
+                                }
+                            }
+                        })
+                    } else {
+                        this.cache[url] = url
+                        resolve(url)
+                    }
+                }
+            })
+        },
+        saveImageToLocal() {
+            // console.log('saveImageToLocal');
+            const {
+                width,
+                height
+            } = this.data
+            wx.canvasToTempFilePath({
+                x: 0,
+                y: 0,
+                width,
+                height,
+                canvasId: 'canvasdrawer',
+                complete: res => {
+                    if (res.errMsg === 'canvasToTempFilePath:ok') {
+                        this.setData({
+                            showCanvas: false,
+                            isPainting: false,
+                            tempFileList: []
+                        })
+                        this.triggerEvent('getImage', {
+                            tempFilePath: res.tempFilePath,
+                            errMsg: 'canvasdrawer:ok'
+                        })
+                    } else {
+                        this.triggerEvent('getImage', {
+                            errMsg: 'canvasdrawer:fail'
+                        })
+                    }
+                }
+            }, this)
+        }
+    }
+})

components/canvasdrawer/canvasdrawer.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/canvasdrawer/canvasdrawer.wxml

@@ -0,0 +1 @@
+<canvas canvas-id="canvasdrawer" style="width:{{width}}px;height:{{height}}px;" class="board" wx:if="{{showCanvas}}"></canvas>

components/canvasdrawer/canvasdrawer.wxss

@@ -0,0 +1,4 @@
+.board {
+  position: fixed;
+  top: 2000rpx;
+}

config/api.js

@@ -1,4 +1,5 @@
-const ApiRootUrl = 'http://localhost:8360/api/';
+const ApiRootUrl = 'http://localhost:8300/api/';
+// const ApiRootUrl = 'http://192.168.0.103:8300/api/';
 // const ApiRootUrl = 'https://www.hiolabs.com/api/';
 
 module.exports = {
@@ -22,6 +23,7 @@ module.exports = {
     GoodsCount: ApiRootUrl + 'goods/count', //统计商品总数
     GoodsDetail: ApiRootUrl + 'goods/detail', //获得商品的详情
     GoodsList: ApiRootUrl + 'goods/list', //获得商品列表
+    GoodsShare: ApiRootUrl + 'goods/goodsShare', //获得商品的详情
     SaveUserId: ApiRootUrl + 'goods/saveUserId',
     // 收货地址
     AddressDetail: ApiRootUrl + 'address/addressDetail', //收货地址详情
@@ -50,4 +52,6 @@ module.exports = {
     ShowSettings: ApiRootUrl + 'settings/showSettings',
     SaveSettings: ApiRootUrl + 'settings/save',
     SettingsDetail: ApiRootUrl + 'settings/userDetail',
+    GetBase64: ApiRootUrl + 'qrcode/getBase64', //获取商品详情二维码
+
 };

pages/cart/cart.js

@@ -19,15 +19,11 @@ Page({
         startX: 0, //开始坐标
         startY: 0,
         hasCartGoods: 0
-
     },
     onLoad: function() {
-
     },
-
     onReady: function() {
         // 页面渲染完成
-
     },
     onShow: function() {
         // 页面显示
@@ -43,19 +39,14 @@ Page({
     },
     onHide: function() {
         // 页面隐藏
-
     },
     onUnload: function() {
         // 页面关闭
-
     },
     toIndexPage: function() {
         wx.switchTab({
             url: '/pages/index/index',
         });
-        // wx.redirectTo({
-        //     url: '/pages/payResult/payResult?status=1&orderId=192'
-        // });
     },
     getCartList: function() {
         let that = this;
@@ -80,7 +71,6 @@ Page({
                 checkedAllStatus: that.isCheckedAll()
             });
         });
-
     },
     isCheckedAll: function() {
         //判断购物车商品已全选
@@ -158,8 +148,7 @@ Page({
                 let cartItem = that.data.cartGoods[itemIndex];
                 cartItem.number = number;
                 that.getCartNum();
-            }
+            } else {
-            else{
                 util.showErrorToast('库存不足了')
             }
             that.setData({
@@ -175,20 +164,15 @@ Page({
             util.showErrorToast('删除左滑试试')
         }
         let number = (cartItem.number - 1 > 1) ? cartItem.number - 1 : 1;
-
-        // cartItem.number = number;
         this.setData({
             cartGoods: this.data.cartGoods,
         });
         this.updateCart(itemIndex, cartItem.product_id, number, cartItem.id);
     },
-    clicknone: function() {
-    },
     addNumber: function(event) {
         let itemIndex = event.target.dataset.itemIndex;
         let cartItem = this.data.cartGoods[itemIndex];
         let number = Number(cartItem.number) + 1;
-        // cartItem.number = number;
         this.setData({
             cartGoods: this.data.cartGoods,
         });

pages/goods/goods.js

@@ -9,6 +9,7 @@ Page({
         id: 0,
         goods: {},
         gallery: [],
+        galleryImages:[],
         specificationList: [],
         productList: [],
         cartGoodsCount: 0,
@@ -27,6 +28,39 @@ Page({
         goodsNumber: 0,
         loading: 0,
         current: 0,
+        showShareDialog:0,
+    },
+    hideDialog: function (e) {
+        let that = this;
+        that.setData({
+            showShareDialog: false,
+        });
+    },
+    shareTo:function(){
+        let userInfo = wx.getStorageSync('userInfo');
+        if (userInfo == '') {
+            util.loginNow();
+            return false;
+        } else {
+            this.setData({
+                showShareDialog: !this.data.showShareDialog,
+            });
+        }
+    },
+    
+    createShareImage: function () {
+        let id = this.data.id;
+        wx.navigateTo({
+            url: '/pages/share/index?goodsid=' + id
+        })
+    },
+    previewImage: function (e) {
+        let current = e.currentTarget.dataset.src;
+        let that = this;
+        wx.previewImage({
+            current: current, // 当前显示图片的http链接  
+            urls: that.data.galleryImages // 需要预览的图片http链接列表  
+        })
     },
     saveUserId: function(e) {
         let formId = e.detail.formId;
@@ -68,7 +102,7 @@ Page({
     onShareAppMessage: function(res) {
         let id = this.data.id;
         let name = this.data.goods.name;
-        let image = this.data.goods.primary_pic_url;
+        let image = this.data.goods.list_pic_url;
         let userId = this.data.userId;
         return {
             title: name,
@@ -101,6 +135,10 @@ Page({
                         checkedSpecText: '请选择规格和数量'
                     });
                 }
+                let galleryImages = [];
+                for (const item of res.data.gallery) {
+                    galleryImages.push(item.img_url);
+                }
                 that.setData({
                     goods: res.data.info,
                     goodsNumber: res.data.info.goods_number,
@@ -108,8 +146,9 @@ Page({
                     specificationList: res.data.specificationList,
                     productList: res.data.productList,
                     checkedSpecPrice: res.data.info.retail_price,
+                    galleryImages: galleryImages,
                 });
-                var checkedSpecPrice = res.data.info.retail_price;
+                wx.setStorageSync('goodsImage', res.data.info.https_pic_url);
             }
             wx.hideLoading();
         });
@@ -229,7 +268,6 @@ Page({
                 return;
             }
             let checkedProduct = checkedProductArray[0];
-
             if (checkedProduct.goods_number < this.data.number) {
                 //找不到对应的product信息，提示没有库存
                 this.setData({
@@ -276,11 +314,17 @@ Page({
         });
     },
     onLoad: function(options) {
+        let id = 0;
+        var scene = decodeURIComponent(options.scene);
+        if (scene != 'undefined') {
+            id = scene;
+        } else {
+            id = options.id;
+        }
         this.setData({
-            id: parseInt(options.id), // 这个是商品id
+            id: id, // 这个是商品id
-            valueId: parseInt(options.id),
+            valueId: id,
         });
-
     },
     onShow: function() {
         let userInfo = wx.getStorageSync('userInfo');

pages/goods/goods.wxml

@@ -13,9 +13,9 @@
             </view>
         </view>
         <block wx:if="{{gallery.length > 0}}">
-            <swiper bindchange="bindchange" class="banner banner-style1" indicator-dots="{{false}}" autoplay="{{true}}" current="{{current}}" circular="{{true}}" interval="4000" duration="1000" display-multiple-items="1">
+            <swiper bindchange="bindchange" class="banner banner-style1" indicator-dots="{{false}}" autoplay="{{false}}" current="{{current}}" circular="{{true}}" interval="4000" duration="1000" display-multiple-items="1">
                 <swiper-item class="item" wx:for="{{gallery}}" wx:key="{{item.id}}">
-                    <image src="{{item.img_url}}" class="slide-image" mode="aspectFill" />
+                    <image bindtap="previewImage" data-src="{{item.img_url}}" src="{{item.img_url}}" class="slide-image" mode="aspectFill" />
                 </swiper-item>
             </swiper>
         </block>
@@ -31,10 +31,10 @@
             <view class='goods-intro'>{{goods.goods_brief}}</view>
         </view>
         <view class='r'>
-            <button class='share' hover-class="none" open-type='share'>
+            <view bindtap="shareTo" class='share'>
                 <image class='icon' src='http://lucky-icon.meiweiyuxian.com/hio/share.png'></image>
                 <view class='text'>分享</view>
-            </button>
+            </view>
         </view>
     </view>
     <view class='price-info'>
@@ -92,7 +92,7 @@
                 <view class='spec-item'>
                     <view class='name'>{{specificationList.name}}</view>
                     <view class="values">
-                        <view class="value {{item.checked ? 'selected' : ''}} {{item.goods_number <=0?'out-stock':''}}" bindtap="{{item.goods_number <=0?'':'clickSkuValue'}}" wx:for="{{specificationList.valueList}}" wx:key="{{item.id}}" data-value-id="{{item.id}}" data-index="{{index}}" data-name-id="{{item.specification_id}}">{{item.value}}</view>
+                        <view class="value {{item.checked ? 'selected' : ''}} {{item.goods_number <=0?'out-stock':''}}" bindtap="clickSkuValue" wx:for="{{specificationList.valueList}}" wx:key="{{item.id}}" data-value-id="{{item.id}}" data-index="{{index}}" data-name-id="{{item.specification_id}}">{{item.value}}</view>
                     </view>
                 </view>
                 <view class="number-item">
@@ -147,5 +147,24 @@
             <view class="cart-empty">商品已下架</view>
         </block>
     </view>
-
+    <view class="dialog {{ showShareDialog ? 'dialog_show' : '' }}">
+        <view class="dialog-mask2" bindtap="hideDialog"></view>
+        <view class="dialog-fixed dialog-share">
+            <view class="share-wrap">
+                <view class='content'>
+                    <view class="share-block">
+                        <button class='block share-btn' hover-class="none" open-type='share'>
+                            <image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/weixin.png"></image>
+                            <view class="text">发给好友/发到微信群</view>
+                        </button>
+                        <view class="block" catchtap="createShareImage">
+                            <image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/pyq.png"></image>
+                            <view class="text">保存分享图发朋友圈</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="cancel" bindtap="hideDialog">取消</view>
+        </view>
+    </view>
 </view>

pages/goods/goods.wxss

@@ -524,9 +524,6 @@
     width: 30%;
     line-height: 100rpx;
     color: #192841;
-    background: -webkit-linear-gradient(left, #fdbb43, #ff347d); /* Safari 5.1 - 6.0 */
-    background: -o-linear-gradient(right, #fdbb43, #ff347d); /* Opera 11.1 - 12.0 */
-    background: -moz-linear-gradient(right, #fdbb43, #ff347d); /* Firefox 3.6 - 15 *//* background: linear-gradient(to right, #131313, #000); 标准的语法（必须放在最后） */
     background: linear-gradient(to right, #f8cd4e, #fae277); /* 标准的语法（必须放在最后） */
     font-size: 28rpx;
     text-align: center;
@@ -885,3 +882,139 @@ button::after {
     border-radius: 0;
     border: none;
 }
+
+.dialog_show .dialog-mask2 {
+    display: block;
+}
+
+.dialog-share .share-wrap {
+    background: #fafafa;
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+
+.dialog-fixed {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    transform: translateY(150%);
+    transition: all 0.4s ease;
+    z-index: 33;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.dialog_show .dialog-share {
+    transform: translateY(0);
+    background: #e0e0e0;
+}
+
+.dialog_show .dialog-mask {
+    display: block;
+}
+
+.dialog_show .dialog-mask2 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+}
+
+.dialog_show .dialog-mask2 {
+    display: block;
+}
+
+.dialog-share .share-wrap {
+    background: #fafafa;
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.dialog-share .cancel {
+    padding: 30rpx;
+    color: #333;
+    text-align: center;
+    font-size: 30rpx;
+    background: #fafafa;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 12rpx;
+}
+
+.share-wrap .top {
+    border-bottom: 1rpx solid #f1f1f1;
+    font-size: 28rpx;
+    color: #111;
+    text-align: center;
+    padding-bottom: 30rpx;
+}
+
+.share-wrap .top .img {
+    width: 50rpx;
+    height: 50rpx;
+}
+
+.share-wrap .content {
+    display: flex;
+    flex-direction: column;
+}
+
+.share-wrap .content .tip {
+    font-size: 26rpx;
+    color: #666;
+    text-align: center;
+    padding: 30rpx 0;
+}
+
+.share-wrap .content .share-block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 4rpx;
+}
+
+.share-wrap .content .share-block .block {
+    /* border: 1rpx solid #f0f0f0; */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32rpx;
+    margin: 0 20rpx 0 0;
+    background: #fff;
+    border-radius: 20rpx;
+    box-shadow: 2rpx 2rpx 5rpx #f1f1f1;
+}
+
+.share-wrap .content .share-block .block.share-btn::after {
+    border: 1rpx solid #f0f0f0;
+}
+
+.share-wrap .content .share-block .block:last-child {
+    margin-right: 0;
+}
+
+.share-wrap .content .share-block .block .img {
+    width: 50rpx;
+    height: 50rpx;
+    margin-bottom: 20rpx;
+}
+
+.share-wrap .content .share-block .block .text {
+    text-align: center;
+    color: #555;
+    font-size: 26rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+}

pages/index/index.wxml

@@ -10,7 +10,7 @@
         <text class="txt">搜索, 共{{goodsCount}}款好物</text>
     </view>
     <view class='banner-wrap' wx:if="{{show_banner && banner.length > 0}}">
-        <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+        <swiper class="banner" indicator-dots="true" autoplay="{{false}}" interval="3000" duration="1000">
             <swiper-item wx:for="{{banner}}" wx:key="{{item.id}}">
                 <navigator wx:if="{{item.link_type == 0}}" url="/pages/goods/goods?id={{item.goods_id}}">
                     <image src="{{item.image_url}}" background-size="cover"></image>

pages/order-check/index.js

@@ -113,7 +113,6 @@ Page({
                     goodsCount: res.data.goodsCount,
                     outStock: res.data.outStock
                 });
-
                 let goods = res.data.checkedGoodsList;
                 wx.setStorageSync('addressId', addressId);
                 if (res.data.outStock == 1) {

pages/share/index.js

@@ -0,0 +1,197 @@
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+const app = getApp()
+const fsm = wx.getFileSystemManager();
+const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
+Page({
+    data: {
+        painting: {},
+        shareImage: '',
+        goodsUrl: '',
+        goods: {},
+    },
+    getQrcode: function(id) {
+        let that = this;
+        util.request(api.GetBase64, {
+            goodsId: id
+        }, 'POST').then(function(res) {
+            if (res.errno === 0) {
+                that.getQrcodeJpg(res.data);
+            }
+        });
+    },
+    getQrcodeJpg(code) {
+        let that = this;
+        let promise = new Promise((resolve, reject) => {
+            const filePath = `${wx.env.USER_DATA_PATH}/temp_image.jpeg`;
+            const buffer = wx.base64ToArrayBuffer(code);
+            wx.getFileSystemManager().writeFile({
+                filePath,
+                data: buffer,
+                encoding: 'binary',
+                success() {
+                    that.getGoodsInfo(filePath);
+                },
+                fail() {
+                    reject(new Error('ERROR_BASE64SRC_WRITE'));
+                },
+            });
+        });
+    },
+    onLoad(options) {
+        wx.showLoading({
+            title: '图片生成中',
+        })
+        let goodsid = options.goodsid;
+        let goodsUrl = wx.getStorageSync('goodsImage');
+        this.setData({
+            goodsid: goodsid,
+            goodsUrl: goodsUrl
+        })
+        this.getQrcode(goodsid);
+    },
+    onShow: function() {
+    },
+    getGoodsInfo: function (qrcodeUrl) {
+        let id = this.data.goodsid;
+        let that = this;
+        util.request(api.GoodsShare, {
+            id: id
+        }).then(function(res) {
+            if (res.errno === 0) {
+                console.log(res.data);
+                that.setData({
+                    goods: res.data,
+                });
+                that.eventDraw(qrcodeUrl);
+            }
+        });
+    },
+    eventDraw(qrcodeUrl) {
+        let that = this;
+        let goodsUrl = that.data.goodsUrl;
+        let goods = that.data.goods;
+        that.setData({
+            painting: {
+                width: 375,
+                height: 667,
+                background:'#fff',
+                clear: true,
+                views: [
+                    {
+                        type: 'rect',
+                        top: 0,
+                        left: 0,
+                        width: 375,
+                        height: 667,
+                        background:'#fff'
+                    },
+                    {
+                        type: 'rect',
+                        top: 40,
+                        left: 40,
+                        width: 305,
+                        height: 305,
+                        background: '#f1f1f1'
+                    },
+                    {
+                        type: 'image',
+                        url: goodsUrl,
+                        top: 35,
+                        left: 35,
+                        width: 305,
+                        height: 305,
+                    },
+                    {
+                        type: 'text',
+                        content: goods.name,
+                        fontSize: 18,
+                        lineHeight: 22,
+                        color: '#383549',
+                        textAlign: 'left',
+                        top: 360,
+                        left: 35,
+                        width: 305,
+                        MaxLineNumber: 2,
+                        breakWord: true,
+                        // bolder: true
+                    },
+                    {
+                        type: 'text',
+                        content: '¥',
+                        fontSize: 18,
+                        lineHeight: 16,
+                        color: '#e93237',
+                        textAlign: 'left',
+                        top: 420,
+                        left: 35,
+                        width: 40,
+                        MaxLineNumber: 1,
+                        // breakWord: true,
+                        // bolder: true
+                    },
+                    {
+                        type: 'text',
+                        content: goods.retail_price,
+                        fontSize: 30,
+                        lineHeight: 30,
+                        color: '#e93237',
+                        textAlign: 'left',
+                        top: 410,
+                        left: 50,
+                        width: 200,
+                        MaxLineNumber: 1,
+                        // breakWord: true,
+                        // bolder: true
+                    },
+                    {
+                        type: 'image',
+                        url: qrcodeUrl,
+                        top: 470,
+                        left: 127.5,
+                        width: 120,
+                        height: 120
+                    },
+                    {
+                        type: 'text',
+                        content: '长按识别小程序',
+                        fontSize: 16,
+                        color: '#383549',
+                        textAlign: 'center',
+                        top: 610,
+                        left: 187.5,
+                        lineHeight: 20,
+                        MaxLineNumber: 1,
+                        breakWord: true,
+                        width: 200
+                    }
+                ]
+            }
+        })
+    },
+    eventSave() {
+        wx.saveImageToPhotosAlbum({
+            filePath: this.data.shareImage,
+            success(res) {
+                wx.showToast({
+                    title: '保存图片成功',
+                    icon: 'success',
+                    duration: 2000
+                })
+            }
+        })
+    },
+    eventGetImage(event) {
+        wx.hideLoading()
+        const {
+            tempFilePath,
+            errMsg
+        } = event.detail
+        console.log(errMsg);
+        if (errMsg === 'canvasdrawer:ok') {
+            this.setData({
+                shareImage: tempFilePath
+            })
+        }
+    }
+})

pages/share/index.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "生成分享图",
+  "usingComponents": {
+    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
+  }
+}

pages/share/index.wxml

@@ -0,0 +1,8 @@
+<!--index.wxml-->
+<view class="container">
+    <image src="{{shareImage}}" class="share-image"></image>
+    <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage" />
+    <view class="btn-wrap">
+        <button class="btn" bindtap="eventSave">保存到本地</button>
+    </view>
+</view>

pages/share/index.wxss

@@ -0,0 +1,52 @@
+page {
+    background: #f1f1f1;
+    height: 100%;
+}
+
+.container {
+    background: #f1f1f1;
+    height: 100%;
+    position: relative;
+    padding-top: 40rpx;
+    box-sizing: border-box;
+}
+
+.btn-wrap{
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    padding: 20rpx 30rpx;
+    box-sizing: border-box;
+}
+
+.btn-wrap .btn{
+    height: 90rpx;
+    width: 100%;
+    color: #192841;
+    background: linear-gradient(to right, #f8cd4e, #fae277); 
+    text-align: center;
+    line-height: 90rpx;
+    margin: 0;
+    font-size: 28rpx;
+}
+
+.btn-wrap .btn::after{
+    border: none;
+}
+
+.share-image {
+    width: 580rpx;
+    height: 1032rpx;
+    margin: 0 auto;
+    /* border: 1px solid black; */
+}
+
+button {
+    margin-top: 20rpx;
+    color: #695233;
+}

pages/ucenter/index/index.wxss

@@ -63,7 +63,7 @@ page {
     align-items: center;
     margin: 0 30rpx;
     padding: 30rpx 0;
-    border-bottom: 1rpx solid #f1f1f1;
+    /* border-bottom: 1rpx solid #f1f1f1; */
 }
 
 .head-wrap .no-login-avatar {