种草海报

src/app.json

@@ -100,7 +100,8 @@
     {
       "root": "subPackageA/page",
       "pages": [
-        "pages/deliveryCode/deliveryCode"
+        "pages/deliveryCode/deliveryCode",
+        "pages/shareArticle/shareArticle"
       ]
     }
   ],

src/component/cardModal/cardModal.js

@@ -57,6 +57,7 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    //跳转到海报页面
     gotoPoster(){
       // this.setData({
       //   showCardModal:false
@@ -78,7 +79,7 @@ Component({
         "scene": this.data.scene,
         "width": 100
       }
-      console.log(this.data.pagePath)
+
       wxService.post(`/marketing/quickMark/getAppQrCodePicture`, data).then(res => {
         wx.hideLoading();
         const { result, data } = res.data
@@ -90,17 +91,32 @@ Component({
           console.log(this.data.codeImg)
           if (this.data.codeImg) {
             // this.selectComponent('#getPoster').getAvaterInfo()
-            let obj = {
-              productName: this.data.cardTitle,
-              minSalePrice: this.data.product.minSalePrice,
-              productImg: this.data.cardUrl,
-              qrcodeImg: this.data.codeImg,
-              type: this.data.product.type
-            };
+            if (this.data.product){
+              let obj = {
+                productName: this.data.cardTitle,
+                minSalePrice: this.data.product.minSalePrice,
+                productImg: this.data.cardUrl,
+                qrcodeImg: this.data.codeImg,
+                type: this.data.product.type
+              };
+              wx.setStorageSync('shareInfo', obj)
+              wx.navigateTo({
+                url: '/subPackage/page/pages/shareConfig/shareConfig',
+              });
+            }
+            else{
+              let obj =  {
+                productName: this.data.cardTitle,
+                productImg: this.data.cardUrl,
+                qrcodeImg: this.data.codeImg,
+              }
 
-            wx.navigateTo({
-              url: '/subPackage/page/pages/shareConfig/shareConfig?shareInfo=' + JSON.stringify(obj),
-            });
+              wx.setStorageSync('shareArticle', obj)
+              wx.navigateTo({
+                url: '/subPackageA/page/pages/shareArticle/shareArticle',
+              });
+            }
+            
           }
         }
       })

src/component/waterFlowLayout/waterFlowLayout.wxml

@@ -77,7 +77,7 @@
 			 data-id="{{id}}"
 			 data-current-type="{{currentType}}"
 			>
-				<image class="share-img" src="https://img3.bigaka.com/prd/3001/202003/20200309/3001843570f0-4ff8-4e72-8d69-9710269420bf.png" />
+				<image class="share-img" src="/assets/imgs/7_1_0/08_22/share.png" />
 				<text class="share-number">{{transmitSum || 0}}</text>
 			</view>
 		</view>

src/pages/extendProduct/extendProduct.js

@@ -280,10 +280,10 @@ wxService.page({
               type : 'spread',
             };
 
+            wx.setStorageSync('shareInfo', obj);
             wx.navigateTo({
-              url: '/subPackage/page/pages/shareConfig/shareConfig?shareInfo=' + JSON.stringify(obj),
+              url: '/subPackage/page/pages/shareConfig/shareConfig',
             });
-            // this.selectComponent('#getPoster').getAvaterInfo()
           }
         })
       }

src/pages/myShare/myShare.js

@@ -75,7 +75,6 @@ wxService.page({
   },
   //根据详情那边过来的点赞分享数据 更改列表中对应的数据
   updateFavoriteAndShareNumById(){
-    console.log(wx.getStorageSync('articleInfo'))
     let articleInfo = wx.getStorageSync('articleInfo');
     if (articleInfo){
       //更新数据
@@ -256,7 +255,8 @@ wxService.page({
 
   // 分享
   _onTapShare(e){
-    const { memberId, member } = wx.getStorageSync('_baseUserInfo')
+    const { memberId, member } = wx.getStorageSync('_baseUserInfo');
+    e.detail.title = e.detail.title ? e.detail.title : e.detail.headline;
     let tentacleInfo = {
       content: JSON.stringify(e.detail),
       contentId: e.detail.id,
@@ -266,7 +266,6 @@ wxService.page({
     }
 
     this.data.currentShareContent = e.detail;
-
     wxService.getTentacleContent(tentacleInfo).then(res =>{
       if (res && res.id){
         this.data.currentShareContent.tentacleId = res.id;

src/pages/myShare/myShare.wxml

@@ -34,7 +34,7 @@
  open-type='getUserInfo'
  hover-class="btn-hover"
 >
-	<view class="add">+</view>
+	<view class="add"><image src='/assets/imgs/icon_plus.png' mode='aspectFit'></image></view>
 </button>
 
 <view wx:if="{{currentHasUserInfo}}">

src/pages/myShare/myShare.wxss

@@ -62,7 +62,7 @@ scroll-view{
   color: #ffffff;
   position: fixed;
   right: 25rpx;
-  bottom: 320rpx;
+  bottom: 230rpx;
   /* bottom: 35rpx; */
   z-index: 99;
   display: flex;

src/pages/wantToBuyDetail/wantToBuyDetail.wxml

@@ -58,7 +58,7 @@
       bindgetuserinfo="_getUserInfo" 
       open-type='getUserInfo' class="clear-btn">
       <view class="share-oprate" bindtap="onTapShare">
-        <image class="share-img" src="https://img3.bigaka.com/prd/3001/202003/20200309/3001843570f0-4ff8-4e72-8d69-9710269420bf.png" />
+        <image class="share-img" src="/assets/imgs/7_1_0/08_22/share.png" />
         <text class="share-number">{{contentInfo.transmitSum || 0}}</text>
       </view>
     </button>
@@ -73,7 +73,7 @@
     </view>
 
     <view class="share-oprate" bindtap="onTapShare">
-      <image class="share-img" src="https://img3.bigaka.com/prd/3001/202003/20200309/3001843570f0-4ff8-4e72-8d69-9710269420bf.png" />
+      <image class="share-img" src="/assets/imgs/7_1_0/08_22/share.png" />
       <text class="share-number">{{contentInfo.transmitSum || 0}}</text>
     </view>
 

src/project.config.json

@@ -43,7 +43,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 65,
+			"current": 15,
 			"list": [
 				{
 					"id": -1,
@@ -149,7 +149,7 @@
 					"id": 16,
 					"name": "商品详情页",
 					"pathName": "pages/productDetail/productDetail",
-					"query": "i=c72c(omX00&t=c8Yp1GGc00",
+					"query": "id=634719195157905408",
 					"scene": null
 				},
 				{
@@ -574,6 +574,13 @@
 					"pathName": "subPackageA/page/pages/deliveryCode/deliveryCode",
 					"query": "id=686957183723900928",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "种草海报",
+					"pathName": "subPackageA/page/pages/shareArticle/shareArticle",
+					"query": "",
+					"scene": null
 				}
 			]
 		}

src/subPackage/page/pages/myValueCard/myValueCard.js

@@ -166,6 +166,9 @@ wxService.page({
       this.generatorBarCode(canvasId);
     });
 
+    //改成跳转到详情页
+
+
   },
 
   //关闭

src/subPackage/page/pages/myValueCard/myValueCard.wxml

@@ -11,7 +11,7 @@
         <view class='card-status'>已过期</view>
       </view>
     </view>
-    <view class='card-top-info' bindtap='onTapShowMoreInfo' data-item="{{item}}" data-index="{{idx}}">
+    <view class='card-top-info' bindtap='onTapToInfoPage' data-item="{{item}}" data-index="{{idx}}">
       <image class='bg-image {{item.isOpen ? "expand" : "unexpand"}}' 
       src='{{item.backGroundUrl}}'
       mode='widthFix'></image>

src/subPackage/page/pages/myValueCardInfo/myValueCardInfo.js

@@ -72,6 +72,7 @@ wxService.page({
           no: obj.supValCardCode
         }, () => {
           this.generatorBarCode();
+          this.startTimer();
         });
       }
     });
@@ -89,9 +90,10 @@ wxService.page({
             no: this.data.no,
           }, () => {
             this.generatorBarCode();
-            wx.showToast({
-              title: '刷新成功!',
-            });
+            // wx.showToast({
+            //   title: '已刷新',
+            //   icon : 'none'
+            // });
           })
         }
         else {
@@ -104,6 +106,20 @@ wxService.page({
     });
   },
 
+  //开始定时任务  每10s调用一下
+  startTimer(){
+    this.timer = setInterval(() => {
+      this.onTapRefreshNo();
+    },10000);
+  },
+
+  //
+  onUnload(){
+    if (this.timer){
+      clearInterval(this.timer);
+    }
+  },
+
   //生成条形码
   generatorBarCode() {
     if (this.data.no) {

src/subPackage/page/pages/shareConfig/shareConfig.js

@@ -85,7 +85,7 @@ wxService.page({
     },
     tempShareLogo: '',
     username: '',
-    height: '1100rpx',
+    height: '1000rpx',
     canvasTempFileUrl: '',
     btnIsDisabled: true,
     isInput: false,
@@ -97,7 +97,7 @@ wxService.page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    let shareInfo = options.shareInfo ? JSON.parse(options.shareInfo) : null;
+    let shareInfo = wx.getStorageSync('shareInfo') ? wx.getStorageSync('shareInfo') : null;
     this.getCurrentUserName();
     wx.hideShareMenu();
     if (shareInfo) {
@@ -112,6 +112,11 @@ wxService.page({
     }
   },
 
+  //頁面销毁
+  onUnload(){
+    wx.removeStorageSync('shareInfo')
+  },
+
   /**
    * 生命周期函数--监听页面显示
    */

src/subPackageA/page/pages/shareArticle/shareArticle.js

+// share/share.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+const envInfo = require('../../../../config/index').envInfo
+const app = getApp()
+const deviceWidth = app.globalData.systemInfo.windowWidth;
+const isIPX = app.globalData.systemInfo.model == 'iPhone X';
+let deviceHeight = app.globalData.systemInfo.windowHeight;
+const ratio = deviceWidth / deviceHeight;
+// 单位转换
+const rpx2px = rpx => deviceWidth / 750 * rpx
+
+/**
+ * 设置文本行数，超出省略
+ * @param {object} ctx canvas实例
+ * @param {string} text 文本数据
+ * @param {number} lineNum 行数
+ * @param {number} width 文字宽度最宽默认 620rpx
+ * 返回 由每一行组成的数组
+ */
+const setTextLine = (ctx, text, lineNum = 1, width = 610) => {
+  const str_arr = String(text).split('')
+  width = rpx2px(width)
+  let temp = ''
+  // 分行
+  let row_arr = str_arr.reduce((arr, word) => {
+    const w = ctx.measureText(temp).width
+    if (w < width) {
+      temp += word;
+    } else {
+      arr.push(temp)
+      temp = word
+    }
+    return arr
+  }, [])
+  row_arr.push(temp)
+  temp = ''
+
+  // 判断需要的行数
+  row_arr = row_arr.slice(0, lineNum)
+  if (row_arr.length > 1) {
+    // 最后一行超出则省略号
+    row_arr[row_arr.length - 1].split().every(v => {
+      temp += v
+      if (ctx.measureText(temp).width > (width - 20)) {
+        temp += '...'
+        return false
+      }
+      return true
+    })
+    row_arr.splice(row_arr.length - 1, 1, temp)
+  }
+
+  return row_arr
+}
+
+//获取图片信息
+function getImageInfo(url) {
+  if (url) {
+    return new Promise((resolve, reject) => {
+      wx.getImageInfo({
+        src: url,
+        success: resolve,
+        fail: reject,
+      })
+    })
+  }
+}
+
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    shareLogo: envInfo.shareLogo,
+    shareTitle: envInfo.shareTitle,
+    productImg: '',
+    qrcodeImg: '',
+    product: {
+      productName: '',
+      price: '',
+      productId: '',
+      type: '',
+    },
+    tempShareLogo: '',
+    username: '',
+    height: '1100rpx',
+    canvasTempFileUrl: '',
+    btnIsDisabled: true,
+    isInput: false,
+    inputText: '',
+    sourceText: '',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    let shareInfo = wx.getStorageSync('shareArticle') ? wx.getStorageSync('shareArticle') : null;
+    this.getCurrentUserName();
+    wx.hideShareMenu();
+    if (shareInfo) {
+      this.data.productImg = shareInfo.productImg;
+      this.data.qrcodeImg = shareInfo.qrcodeImg;
+      this.data.product.productName = shareInfo.productName;
+      this.data.sourceText = shareInfo.productName;
+      this.data.product.price = shareInfo.minSalePrice ? shareInfo.minSalePrice : null;
+      this.data.product.productId = shareInfo.productId;
+      this.data.product.type = shareInfo.type;
+      this.downloadProductImg();
+    }
+  },
+
+  //頁面销毁
+  onUnload() {
+    wx.removeStorageSync('shareArticle')
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+  //获取登录用户系信息
+  getCurrentUserName() {
+    let userInfo = wx.getStorageSync('_baseUserInfo') ? wx.getStorageSync('_baseUserInfo') : null;
+    if (!userInfo) {
+      this.data.username = '匿名';
+    }
+    else {
+      this.data.username = userInfo.member.name ? userInfo.member.name : (userInfo.member.memberWeixin ? userInfo.member.memberWeixin.nickname : '匿名');
+    }
+
+    this.setData({
+      username: this.data.username
+    });
+  },
+  //下载商品图
+  downloadProductImg() {
+    wx.showLoading({
+      title: '生成中...',
+      mask: true,
+    });
+    var that = this;
+    let productImage = this.data.productImg;
+    wx.downloadFile({
+      url: productImage,
+      success: function (res) {
+        if (res.statusCode === 200) {
+          var productSrc = res.tempFilePath;
+          that.calculateImg(productSrc, function (data) {
+            that.getQrCode(productSrc, data);
+          });
+        }
+        else {
+          wx.showToast({
+            title: '产品图片下载失败！',
+            icon: 'none',
+            duration: 2000,
+            success: function () {
+              var productSrc = "";
+              that.getQrCode(productSrc);
+            }
+          })
+        }
+      },
+      fail: function () {
+        wx.hideLoading();
+        wx.showToast({
+          title: '产品图片下载失败！',
+          icon: 'none',
+          duration: 2000
+        });
+      },
+    })
+
+  },
+  //下载二维码图
+  getQrCode(productSrc, productImgInfo = "") {
+    var that = this;
+    let qrcodeImg = this.data.qrcodeImg;
+    wx.downloadFile({
+      url: qrcodeImg,
+      success: function (res) {
+        if (res.statusCode === 200) {
+          var qrcodeUrl = res.tempFilePath;
+          that.downloadShareLogo(function () {
+            that.sharePosteCanvas(productSrc, qrcodeUrl, productImgInfo);
+          });
+        }
+        else {
+          wx.showToast({
+            title: '二维码下载失败！',
+            icon: 'none',
+            duration: 2000,
+            success: function () {
+              var qrcodeUrl = "";
+              that.downloadShareLogo(function () {
+                that.sharePosteCanvas(productSrc, qrcodeUrl, productImgInfo);
+              });
+            }
+          })
+        }
+      },
+      fail: function () {
+        wx.hideLoading();
+        wx.showToast({
+          title: '二维码下载失败！',
+          icon: 'none',
+          duration: 2000
+        });
+      },
+    })
+  },
+  //下载商户logo
+  downloadShareLogo(cb) {
+    let self = this;
+    let shareLogo = self.data.shareLogo;
+    wx.downloadFile({
+      url: shareLogo,
+      success: function (res) {
+        wx.hideLoading();
+        if (res.statusCode === 200) {
+          var codeSrc = res.tempFilePath;
+          self.data.tempShareLogo = codeSrc;
+        }
+        else {
+          self.data.tempShareLogo = '';
+        }
+
+        cb && cb();
+      },
+      fail: function (res) {
+        wx.hideLoading();
+        wx.showToast({
+          title: '二维码下载失败！',
+          icon: 'none',
+          duration: 2000,
+        })
+      }
+    })
+  },
+  //计算图片
+  calculateImg(src, cb) {
+    var that = this;
+    wx.getImageInfo({
+      src: src,
+      success(res) {
+        cb(res);
+      }
+    })
+  },
+  //图片自适应大小
+  getImageSizeByAspectFit(imageSize, w, h) {
+    var scale, imageHeight, imageWidth;
+    scale = imageSize.width / imageSize.height;
+    imageHeight = w / scale;
+    if (imageHeight > h) {
+      imageWidth = h * scale;
+      imageSize.width = imageWidth;
+      imageSize.height = h;
+    } else {
+      imageSize.width = w;
+      imageSize.height = imageHeight;
+    }
+    // console.log('改变imageSize', imageSize.width, imageSize.height)
+    return imageSize;
+  },
+  //生成canvas
+  sharePosteCanvas(productSrc, qrcodeUrl, productImgInfo) {
+    const self = this;
+
+    const ctx = wx.createCanvasContext('myCanvas', this)
+    const canvasWidth = rpx2px(281 * 2)
+    const canvasHeight = rpx2px(550 * 2)
+    // 绘制背景，填充满整个canvas画布
+    ctx.setFillStyle('#fff')
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+
+    //商品图片
+    const proUrlWidth = rpx2px(240 * 2)
+    const proUrlHeight = rpx2px(290 * 2)
+    const proUrlX = rpx2px(15 * 2)
+    const proUrlY = rpx2px(108 * 2)
+    ctx.drawImage(productSrc, proUrlX, proUrlY, proUrlWidth, proUrlHeight)
+    //二维码
+    const proQrWidth = rpx2px(85 * 2)
+    const proQrHeight = rpx2px(85 * 2)
+    const proQrX = rpx2px(175 * 2)
+    const proQrY = rpx2px(410 * 2)
+    ctx.drawImage(qrcodeUrl, proQrX, proQrY, proQrWidth, proQrHeight)
+    ctx.setFillStyle('#666')
+    ctx.setFontSize(rpx2px(11 * 2))
+    ctx.fillText('长按识别小程序码', rpx2px(170 * 2), rpx2px(510 * 2))
+    
+    //顶部显示名称
+    ctx.setFillStyle('#333')  // 昵称
+    ctx.setFontSize(rpx2px(13 * 2)) // 文字字号
+    ctx.setTextAlign('left')
+    ctx.fillText(self.data.username, rpx2px(66 * 2), rpx2px(65 * 2))
+    ctx.setFillStyle('#000')
+    ctx.fillText('跟我一起种草，我们一起收益哟~', rpx2px(66 * 2), rpx2px(85 * 2))
+
+    //商品文字
+    self.data.product.productName = self.data.product.productName ? self.data.product.productName : '暂无分享文本信息~';
+    ctx.setTextAlign('left')    // 
+    ctx.setFillStyle('#333333')  // 文字颜色：黑色
+    ctx.setFontSize(rpx2px(13 * 2))         // 文字字号
+    const proNameX = rpx2px(15 * 2)
+    const proNameFY = rpx2px(447 * 2)
+    const proNameMW = rpx2px(240 * 2)
+    // let proNameShow = self.data.product.productName;
+    let textArr = setTextLine(ctx, self.data.product.productName, 3, rpx2px(240 * 2));
+    // ctx.fillText(textArr[0], proNameX, proNameFY, proNameMW)
+    // console.log(textArr)
+    textArr.forEach((item, index) => {
+      ctx.fillText(item, proNameX, proNameFY + rpx2px(18 * 2) * index, proNameMW)
+    });
+
+    //商户logo
+    if (self.data.tempShareLogo) {
+      // const circleX = rpx2px(40 * 2)
+      // const circleY = rpx2px(55 * 2)
+      // const circleR = rpx2px(25 * 2)
+      // const circleSAngle = rpx2px(0 * 2)
+      // ctx.arc(circleX, circleY, circleR, circleSAngle, Math.PI * 2, false)
+      // ctx.clip()
+      const avatarWidth = rpx2px(50 * 2)
+      const avatarHeight = rpx2px(50 * 2)
+      const avatarTop = rpx2px(70 * 2)
+      ctx.drawImage(self.data.tempShareLogo, rpx2px(38 * 2) - avatarWidth / 2, avatarTop - avatarHeight / 2, avatarWidth, avatarHeight)
+    }
+
+    ctx.stroke()
+    ctx.draw(false, () => {
+      wx.canvasToTempFilePath({
+        canvasId: 'myCanvas',
+        quality: 1,
+        success: result => {
+          self.data.btnIsDisabled = false;
+          self.data.canvasTempFileUrl = result.tempFilePath;
+          self.setData({
+            canvasTempFileUrl: self.data.canvasTempFileUrl,
+            btnIsDisabled: self.data.btnIsDisabled
+          });
+        }
+      }, self);
+    });
+
+    wx.hideLoading();
+  },
+  //按钮保存海报
+  onTapSaveImg() {
+    var that = this;
+    if (this.data.btnIsDisabled) {
+      wx.showToast({
+        title: '请等待海报生成完成',
+        icon: 'none'
+      });
+      return;
+    }
+
+    wx.showLoading({
+      title: '正在保存',
+      mask: true,
+    });
+
+    setTimeout(function () {
+      var tempFilePath = that.data.canvasTempFileUrl;
+      wx.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success(res) {
+          wx.hideLoading();
+          wx.showModal({
+            content: '图片已保存到相册，赶紧晒一下吧~',
+            showCancel: false,
+            confirmText: '好的',
+            confirmColor: '#333',
+            success: function (res) {
+              if (res.confirm) { }
+            },
+            fail: function (res) {
+              console.log(res)
+            }
+          })
+        },
+        fail: function (res) {
+          wx.hideLoading();
+          wx.showToast({
+            title: res.errMsg,
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      })
+    }, 1000);
+  },
+  //编辑文案
+  onTapEditShareContent() {
+    this.data.isInput = true;
+    this.setData({
+      inputText: this.data.product.productName,
+      isInput: this.data.isInput
+    });
+  },
+  //输入
+  onShareTextInput(e) {
+    let value = e.detail.value;
+    this.data.inputText = value;
+  },
+  //取消
+  onTapCancal() {
+    this.setData({
+      isInput: false
+    });
+  },
+  //确认
+  onTapSure() {
+    if (!this.data.inputText) {
+      wx.showToast({
+        title: '请输入分享文案',
+        icon: 'none'
+      });
+      return;
+    }
+
+    this.data.product.productName = this.data.inputText;
+
+    //重新绘制一下图
+    this.setData({
+      isInput: false
+    }, () => {
+      this.downloadProductImg();
+    });
+  },
+  //重置文案
+  onTapReset() {
+    this.data.product.productName = this.data.sourceText;
+    //重新绘制一下图
+    this.setData({
+      isInput: false
+    }, () => {
+      this.downloadProductImg();
+    });
+  }
+});
\ No newline at end of file

src/subPackageA/page/pages/shareArticle/shareArticle.json

+{
+  "navigationBarTitleText": "种草海报",
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackageA/page/pages/shareArticle/shareArticle.wxml

+<!--share/share.wxml-->
+<view hidden="{{isInput}}" class="canvas-container">
+  <canvas class='canvas' canvas-id="myCanvas" style="height:{{height}};"></canvas>
+</view>
+
+<view class="statistic-img" hidden="{{!isInput}}">
+  <image src="{{canvasTempFileUrl}}" mode="widthFix"></image>
+</view>
+
+
+<view class="btns-containers">
+  <view class="edit-btn" bindtap="onTapEditShareContent">编辑文案(限50字)</view>
+  <view class="save-btn {{btnIsDisabled ? 'disabled' : ''}}" bindtap="onTapSaveImg">保存海报至相册</view>
+</view>
+
+<!-- 输入文案 -->
+<view class="input-text" hidden="{{!isInput}}">
+  <view class="input-body">
+    <textarea placeholder="请设置您的个性化分享海报文案(最多50个字)..." 
+    value="{{inputText}}" 
+    maxlength="50" bindinput="onShareTextInput"></textarea>
+    <view class="bot-btns">
+      <view class="mo-btns" bindtap="onTapCancal">取消</view>
+      <view class="mo-btns reset" bindtap="onTapReset">重置</view>
+      <view class="mo-btns sure" bindtap="onTapSure">确认</view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

src/subPackageA/page/pages/shareArticle/shareArticle.wxss

+/* subPackage/page/pages/shareConfig/shareConfig.wxss */
+/* share/share.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.canvas-container{
+  display: flex;
+  justify-content: center;
+  padding-top: 20rpx;
+}
+
+.canvas-container canvas{
+  box-shadow: 0 0 8rpx 3rpx rgba(0, 0, 0, 0.1);
+}
+
+.btns-containers{
+  /* width: 100%; */
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* padding: 30rpx 80rpx; */
+  width: 562rpx;
+  margin: auto;
+  margin-top: 30rpx;
+  padding-bottom: 30rpx;
+}
+
+.btns-containers .save-btn{
+  background: #cb3c3c;
+  color: #ffffff;
+  flex: 1;
+  height: 80rpx;
+  border-radius: 35rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  border: solid 2rpx #cb3c3c;
+}
+
+.btns-containers .save-btn.disabled{
+  opacity:0.6; 
+}
+
+.btns-containers .edit-btn{
+  background: #ffffff;
+  color: #cb3c3c;
+  flex: 0;
+  min-width: 40%;
+  max-width: 40%;
+  height: 80rpx;
+  border-radius: 35rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  border: solid 2rpx #cb3c3c;
+  margin-right: 30rpx;
+}
+
+.btns-containers .edit-btn:active{
+  opacity: 0.7;
+}
+
+.statistic-img{
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.statistic-img image{
+  display: block;
+  width: 562rpx;
+  height: 1000rpx;
+  box-shadow: 0 0 8rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.input-text{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 22;
+  background: rgba(0,0,0,0.5);
+  left: 0;
+  top: 0;
+}
+
+.input-body{
+  position: absolute;
+  width: 80vw;
+  height: 28vh;
+  left: 50%;
+  margin-left: -40vw;
+  top: 50%;
+  margin-top: -20vh;
+  background: #ffffff;
+  border-radius: 8rpx;
+  padding: 30rpx;   
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+
+.input-body textarea{
+  width: 100%;
+  flex: 1;
+  color: #333333;
+}
+
+.input-body .bot-btns{
+  flex: 0;
+  width: 100%;
+  height: auto;
+  /* padding-top: 30rpx; */
+  min-height: 90rpx;
+  max-height: 90rpx;
+  border-top: solid 1rpx #eeeeee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-body .bot-btns .mo-btns{
+  flex: 0;
+  min-width: 33.3%;
+  max-width: 33.3%;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-body .bot-btns .mo-btns.reset{
+  border-left: solid 1rpx #eeeeee;
+  color: #999999;
+}
+
+.input-body .bot-btns .mo-btns.sure{
+  border-left: solid 1rpx #eeeeee;
+  color: #cb3c3c;
+}