优化功能

src/app.json

@@ -108,6 +108,12 @@
         "pages/pointExchangeCoupon/pointExchangeCoupon",
         "pages/pointExchangeGoods/pointExchangeGoods"
       ]
+    },
+    {
+      "root": "subPackageMarketing/page",
+      "pages": [
+        "pages/scratch/scratch"
+      ]
     }
   ],
   "usingComponents": {

src/config/index.js

@@ -272,7 +272,7 @@ const prod_brand_config = {
   //2015花在花园里 
   2015 : {
     appId: 'wx8a35f9a57afd13e9',
-    tunnelToken: '50a322b1d197d6213a2bbe75016da3d9',
+    tunnelToken: 'fa2816369abd2726d18b2a0dd51736f4',
     brandId: 2015,
     plusIsOpen: false,
     contactUsIsOpen: false,

src/pages/order/order.js

@@ -247,6 +247,9 @@ wxService.page({
   handelRequestRefund(e) {
     let orderId = e.currentTarget.dataset.id;
     let packageInfo = e.currentTarget.dataset.package;
+    if(packageInfo.totalCanRefundCount <= 0 || !packageInfo.totalCanRefundCount){
+      return ;
+    }
 
     let detail = {
       id : orderId,
@@ -554,16 +557,20 @@ wxService.page({
           this.data.orderList.forEach(item => {
             let parcelList = item.parcelList;
             parcelList.forEach(p => {
-              let totalCount = 0, totalPrice = 0;
+              let totalCount = 0, totalPrice = 0 , totalCanRefundCount = 0;
               p.sendOutList.forEach(s => {
                 totalCount = totalCount + s.count;
                 totalPrice = totalPrice + s.amount;
+                totalCanRefundCount = totalCanRefundCount +  s.canRefundNum ;
               });
 
               p.totalCount = totalCount;
               p.totalPrice = parseFloat(totalPrice).toFixed(2);
+              //处理每个包裹的可退货数量是否大于0
+              p.totalCanRefundCount = totalCanRefundCount;
             })
           });
+
           this.setData({
             orderList: this.data.pageNo == 1 ? [...data] : [...this.data.orderList, ...data],
             noMoreFlag: data.length < pageSize ? true : false,

src/pages/order/order.wxml

@@ -96,8 +96,8 @@
 					data-package="{{packageInfo}}" 
 					bindtap="handelConfirmReceipt">确认收货</view>
 
-					<view class="btns normal-btn" 
-					wx:if="{{packageInfo.orderCanRefund && packageInfo.status != 'RE'}}"
+					<view class="btns normal-btn {{packageInfo.totalCanRefundCount > 0 ? '' : 'disabled'}}" 
+					wx:if="{{packageInfo.orderCanRefund && packageInfo.status != 'RE' }}"
 					data-id="{{item.id}}" 
 					data-package="{{packageInfo}}"
 					bindtap="handelRequestRefund">申请退款</view>

src/pages/order/order.wxss

@@ -382,6 +382,12 @@ scroll-view{
   color: #ffffff;
 }
 
+.package-btns .btns.disabled{
+  background: #eeeeee;
+  color: #ccc !important;
+  cursor: not-allowed;
+}
+
 .package-btns .btns.sure-get-goods{
   border: solid 1px #cb3c3c;
   color: #cb3c3c;

src/pages/orderDetail/orderDetail.js

@@ -196,13 +196,16 @@ wxService.page({
   calcuPackageProductCountAndTotalPrice(data){
     let parcelList = data.parcelList;
     parcelList.forEach(p => {
-      let totalCount = 0, totalPrice = 0;
+      let totalCount = 0, totalPrice = 0 , totalCanRefundCount = 0;
       p.sendOutList.forEach(s => {
         totalCount = totalCount + s.count;
         totalPrice = totalPrice + s.amount;
+        totalCanRefundCount = totalCanRefundCount +  s.canRefundNum ;
       });
       p.totalCount = totalCount;
       p.totalPrice = parseFloat(totalPrice).toFixed(2);
+      //处理每个包裹的可退货数量是否大于0
+      p.totalCanRefundCount = totalCanRefundCount;
     });
   },
   
@@ -407,10 +410,12 @@ wxService.page({
   },
   // 申请退款
   handelRequestRefund(e) {
-    console.log(e)
     let orderId = e.currentTarget.dataset.id;
     let packageInfo = e.currentTarget.dataset.package;
-
+    if(packageInfo.totalCanRefundCount <= 0 || !packageInfo.totalCanRefundCount){
+      return ;
+    }
+    
     let detail = {
       id : orderId,
       skuVOList :packageInfo.sendOutList, 

src/pages/orderDetail/orderDetail.wxml

@@ -105,7 +105,7 @@
 					<view class="btns pay-now" wx:if="{{item.status == 'N'}}" 
 					data-id="{{detail.id}}" bindtap="handelToPay">立即支付</view>
 
-					<view class="btns normal-btn" 
+					<view class="btns normal-btn {{item.totalCanRefundCount > 0 ? '' : 'disabled'}}" 
 					wx:if="{{item.orderCanRefund && item.status != 'RE'}}" 
 					data-id="{{detail.id}}" 
 					data-package="{{item}}"

src/pages/orderDetail/orderDetail.wxss

@@ -53,6 +53,12 @@ page{
   color: #333333;
 }
 
+.package-btns .btns.disabled{
+  background: #eeeeee;
+  color: #ccc !important;
+  cursor: not-allowed;
+}
+
 .pacakge-price text{
   font-weight: bold;
   /* color: #333333; */

src/project.config.json

@@ -630,6 +630,12 @@
 					"pathName": "shoppingGuid/page/pages/selectProductList/selectProductList",
 					"query": "",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "刮刮卡",
+					"pathName": "subPackageMarketing/page/pages/scratch/scratch",
+					"scene": null
 				}
 			]
 		}

src/subPackageMarketing/page/components/scratch/scratch.js

+/**
+ * Class Scratch
+ * @class
+ * @classdesc 九宫格翻纸牌组件逻辑部分
+ * @author pfan
+ * @todo 1.drawImage 与 clearRect 清除展示移动端和模拟器不一致
+ * @todo 2.小程序无globalCompositeOperation = 'destination-out'属性
+ * @todo 3.小程序无getImageData获取像素点对比擦除范围
+ * @todo 4.使用 downloadFile 这种方式来先加载图片再绘制
+ *
+ * @example
+ *  new Scratch(this,{
+ *    canvasWidth: 197,   //画布宽带
+ *    canvasHeight: 72,  //画布高度
+ *    imageResource: './images/placeholder.png', //遮罩层图片
+ *    r: 4, //笔触半径
+ *    awardTxt: '中大奖', //底部抽奖文字奖项
+ *    awardTxtColor: "#1AAD16", //底部抽奖文字颜色
+ *    awardTxtFontSize: "24px", //底部抽奖文字大小
+ *    maskColor: "red",  //没有图片遮罩层颜色
+ *    callback: () => {
+ *      //清除画布回调
+ *    }
+ *  })
+ */
+class Scratch {
+    /**
+   * @constructs Scratch构造函数
+   * @param  {Object} pageContext page路由指针
+   * @param  {Object} opts      组件所需参数
+   * @param  {Number} opts.canvasWidth  画布宽带
+   * @param  {Number} opts.canvasHeight  画布高度
+   * @param  {String} opts.imageResource  遮罩层图片
+   * @param  {Number} opts.r    笔触半径
+   * @param  {String} opts.awardTxt    底部抽奖文字奖项
+   * @param  {String} opts.awardTxtColor    底部抽奖文字颜色
+   * @param  {String} opts.awardTxtFontSize    底部抽奖文字大小
+   * @param  {String} opts.maskColor     没有图片遮罩层颜色
+   * @param  {Function} opts.callback    结束回调
+   */
+    constructor (pageContext, opts) {
+        this.page = pageContext
+        this.canvasWidth = opts.canvasWidth
+        this.canvasHeight = opts.canvasHeight
+        this.imageResource = opts.imageResource
+        this.maskColor = opts.maskColor
+        // this.canvasId = opts.canvasId
+        this.r = opts.r || 4
+        this.endCallBack = opts.callback
+        this.lastX = 0
+        this.lastY = 0
+        this.minX = ''
+        this.minY = ''
+        this.maxX = ''
+        this.maxY = ''
+        this.isStart = false
+        this.init()
+
+        this.page.touchStart = this.touchStart.bind(this)
+        this.page.touchMove = this.touchMove.bind(this)
+        this.page.touchEnd = this.touchEnd.bind(this)
+        this.page.imgOnLoad = this.imgOnLoad.bind(this)
+
+        this.page.setData({
+            scratch: {
+                'awardTxt': opts.awardTxt,
+                'awardTxtColor': opts.awardTxtColor,
+                'awardTxtFontSize': opts.awardTxtFontSize,
+                'awardTxtLineHeight': opts.canvasHeight,
+                'width': opts.canvasWidth,
+                'height': opts.canvasHeight,
+                'imageResource': opts.imageResource
+            },
+            'isScroll': true
+        })
+    }
+
+    init () {
+        const { canvasWidth, canvasHeight, imageResource, maskColor } = this
+        const self = this
+        this.ctx = wx.createCanvasContext('scratch')
+        this.ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+        if (imageResource && imageResource != '') {
+            wx.downloadFile({
+                url: imageResource,
+                success: res => {
+                    self.ctx.drawImage(res.tempFilePath, 0, 0, canvasWidth, canvasHeight)
+                    self.ctx.draw()
+                }
+            })
+        } else {
+            self.ctx.setFillStyle(maskColor)
+            self.ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+            self.ctx.draw()
+        }
+    }
+
+    drawRect (x, y) {
+        const { r, minX, minY, maxX, maxY } = this
+        const x1 = x - r > 0 ? x - r : 0
+        const y1 = y - r > 0 ? y - r : 0
+        if ('' != minX) {
+            this.minX = minX > x1 ? x1 : minX
+            this.minY = minY > y1 ? y1 : minY
+            this.maxX = maxX > x1 ? maxX : x1
+            this.maxY = maxY > y1 ? maxY : y1
+        } else {
+            this.minX = x1
+            this.minY = y1
+            this.maxX = x1
+            this.maxY = y1
+        }
+        this.lastX = x1
+        this.lastY = y1
+
+        return [x1, y1, 2 * r]
+    }
+
+    start () {
+        this.isStart = true
+        this.page.setData({
+            'isScroll': false
+        })
+    }
+
+    restart () {
+        this.init()
+        this.lastX = 0
+        this.lastY = 0
+        this.minX = ''
+        this.minY = ''
+        this.maxX = ''
+        this.maxY = ''
+        this.isStart = true
+        this.page.setData({
+            'isScroll': false
+        })
+    }
+
+    touchStart (e) {
+        if (!this.isStart) return
+        const pos = this.drawRect(e.touches[0].x, e.touches[0].y)
+        this.ctx.clearRect(pos[0], pos[1], pos[2], pos[2])
+        this.ctx.draw(true)
+    }
+
+    touchMove (e) {
+        if (!this.isStart) return
+        const pos = this.drawRect(e.touches[0].x, e.touches[0].y)
+        this.ctx.clearRect(pos[0], pos[1], pos[2], pos[2])
+        this.ctx.draw(true)
+    }
+
+    touchEnd (e) {
+        if (!this.isStart) return
+        // 自动清楚采用点范围值方式判断
+        const { canvasWidth, canvasHeight, minX, minY, maxX, maxY } = this
+        if (maxX - minX > .7 * canvasWidth && maxY - minY > .7 * canvasHeight) {
+            this.ctx.draw()
+            this.endCallBack && this.endCallBack()
+            this.isStart = false
+            this.page.setData({
+                'isScroll': true
+            })
+        }
+    }
+
+    reset () {
+        this.init()
+    }
+
+    imgOnLoad () {
+
+    }
+}
+
+export default Scratch

src/subPackageMarketing/page/components/scratch/scratch.wxml

+<template name="scratch" >
+	<view class="scratch_wp" style="position:relative;width: {{scratch.width}}px; height: {{scratch.height}}px;margin: 0 auto;" >
+		<canvas style="margin: 0 auto;width: {{scratch.width}}px; height: {{scratch.height}}px; background: transparent" canvas-id="scratch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" disable-scroll ="{{isScroll}}"></canvas>
+		<view class="scratch_txt" style="position:absolute;top:0;left:0;width: 100%;height:100%;text-align: center;line-height: {{scratch.awardTxtLineHeight}}px;color: {{scratch.awardTxtColor}};font-size: {{scratch.awardTxtFontSize}};pointer-events:none;z-index: -1">{{scratch.awardTxt}}</view>
+	</view>
+</template> 
\ No newline at end of file

src/subPackageMarketing/page/pages/scratch/scratch.js

+// subPackageMarketing/page/pages/scratch/scratch.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+import Scratch from '../../components/scratch/scratch.js'
+
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.initScratch();
+  },
+
+  //初始化刮刮卡
+  initScratch(){
+    this.scratch = new Scratch(this, {
+        canvasWidth: 197,
+        canvasHeight: 72,
+        imageResource: 'https://img3.bigaka.com/test/1002/202004/20200413/100208b0fbce-b73d-4af9-bd74-47d1ea5311d5.png',
+        maskColor: 'red',
+        r: 4,
+        awardTxt: '中大奖',
+        awardTxtColor: '#3985ff',
+        awardTxtFontSize: '24px',
+        callback: () => {
+            wx.showModal({
+                title: '提示',
+                content: `您中奖了`,
+                showCancel: false,
+                success: res => {
+                    // this.scratch.reset()
+                    if (res.confirm) {
+                        console.log('用户点击确定')
+                    } else if (res.cancel) {
+                        console.log('用户点击取消')
+                    }
+                }
+            })
+        }
+    });
+    //this.scratch.start()
+
+    this.scratch.start()
+    //this.scratch.restart()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

src/subPackageMarketing/page/pages/scratch/scratch.json

+{
+  "navigationBarTitleText": "刮刮卡",
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackageMarketing/page/pages/scratch/scratch.wxml

+<!--subPackageMarketing/page/pages/scratch/scratch.wxml-->
+<import src="../../components/scratch/scratch.wxml" />
+<!--  布局 -->
+<view class="acticity-bg"></view>
+
+<view class="index">
+  <view class="index-hd">
+    <view class="index-desc">以下是小程序刮刮乐组件，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见开发文档。</view>
+  </view>
+
+  <template is = "scratch" data = "{{scratch, isScroll}}"></template> 
+  <button bindtap = "onStart">{{txt}}</button> 
+</view>

src/subPackageMarketing/page/pages/scratch/scratch.wxss

+/* subPackageMarketing/page/pages/scratch/scratch.wxss */
+
+page{
+  background: #f2f2f2;
+   box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.acticity-bg{
+  width: 100vw;
+  height: 100vh;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.index-hd {
+  padding: 80rpx;
+  text-align: center;
+  padding: 20rpx 26rpx 40rpx;
+}
+
+.index-desc {
+  margin-top: 20rpx;
+  color: #888888;
+  font-size: 28rpx;
+}
+
+button{
+  margin-top: 40rpx;
+  width: 400rpx;
+}