diff --git a/app.js b/app.js index 38e250f..f4fc4b8 100644 --- a/app.js +++ b/app.js @@ -718,6 +718,12 @@ App({ resolve(user_info); }; }); + + + + + + }, diff --git a/app.json b/app.json index ef913ec..4976f7b 100644 --- a/app.json +++ b/app.json @@ -54,11 +54,7 @@ "pages/payment/pay_success/pay_success", "pages/user/plus/plus", "pages/user/cardinfo/cardinfo", -<<<<<<< HEAD - "pages/user/Detailed/Detailed", -======= "pages/user/Detailed/Detailed", ->>>>>>> 875625f38c1972869416e1894a992442d54ae75a "pages/user/my_service/appment_main", "pages/user/my_service/i_service", "pages/user/my_service/cosmetology_list", @@ -92,12 +88,6 @@ "pages/user/deposit/prepaid/prepaid", "pages/distribution/distribution" ], - "plugins": { - "live-player-plugin": { - "version": "1.3.0", - "provider": "wx2b03c6e691cd7370" - } - }, "subPackages": [{ "root": "packageA/", "name":"pack1", diff --git a/app.wxss b/app.wxss index 5e585fb..52b691a 100644 --- a/app.wxss +++ b/app.wxss @@ -1,6 +1,9 @@ @import './utils/weapp-icon.wxss'; @import "./utils/wxParse/wxParse.wxss"; +.pdt4 { + padding-top: 4rpx; +} .pd10 { padding: 10rpx; } @@ -703,9 +706,9 @@ background: #ffe3e2; /* 图标字体(ty) */ @font-face { font-family: 'iconfont'; /* Project id 2054717 */ - src: url('//at.alicdn.com/t/font_2054717_nzwl8grylfi.woff2?t=1627287108388') format('woff2'), - url('//at.alicdn.com/t/font_2054717_nzwl8grylfi.woff?t=1627287108388') format('woff'), - url('//at.alicdn.com/t/font_2054717_nzwl8grylfi.ttf?t=1627287108388') format('truetype'); + src: url('//at.alicdn.com/t/font_2054717_3fwbtkdbxhl.woff2?t=1627893975776') format('woff2'), + url('//at.alicdn.com/t/font_2054717_3fwbtkdbxhl.woff?t=1627893975776') format('woff'), + url('//at.alicdn.com/t/font_2054717_3fwbtkdbxhl.ttf?t=1627893975776') format('truetype'); } .iconfont { @@ -716,6 +719,17 @@ background: #ffe3e2; -moz-osx-font-smoothing: grayscale; } +.icon-zhuanfa1:before { + content: "\e614"; +} + + +.icon-zhiwen:before { + content: "\e6aa"; +} + + + .icon-guan:before { content: "\e612"; } diff --git a/components/catch/catch.js b/components/catch/catch.js new file mode 100644 index 0000000..27a6dca --- /dev/null +++ b/components/catch/catch.js @@ -0,0 +1,46 @@ +// pages/user/yhq/qr_code/qr_code.js +const { + barcode, + qrcode +} = require('../../utils/index.js') + +Component({ + data: { + q_show:0, + object:null, + index:0, + is_fw:0, + + barcode_canvas:null, + qrcode_canvas:null, + }, + properties: { + // 这里定义了innerText属性，属性值可以在组件使用时指定 + }, + ready: function () { + }, + + methods: { + //关闭 + close: function (e) { + this.setData({q_show: 0,barcode_canvas:null,qrcode_canvas:null }); + this.triggerEvent('close',{},{bubbles: true}); + }, + + //打开 + open:function (e) { + this.data.index++; + var list=[{index:this.data.index }]; + + this.setData({q_show: 1,object:e,barcode_canvas:list,qrcode_canvas:list,is_fw:e.is_fw }); + var val=e.val; + + // barcode('barcode'+this.data.index,val, 620, 160,this); + qrcode('qrcode'+this.data.index, val, 520, 520,this); + } + }, + + + + +}) \ No newline at end of file diff --git a/pages/user/binding_info/binding_info.json b/components/catch/catch.json index 5d848ff..e8cfaaf 100644 --- a/pages/user/binding_info/binding_info.json +++ b/components/catch/catch.json @@ -1,4 +1,4 @@ { - "navigationBarTitleText": "关联手机号", - "enablePullDownRefresh": false + "component": true, + "usingComponents": {} } \ No newline at end of file diff --git a/components/catch/catch.wxml b/components/catch/catch.wxml new file mode 100644 index 0000000..2710fdf --- /dev/null +++ b/components/catch/catch.wxml @@ -0,0 +1,12 @@ + + + + + + + + 进店逛逛 + + + + diff --git a/components/catch/catch.wxss b/components/catch/catch.wxss new file mode 100644 index 0000000..b6ea155 --- /dev/null +++ b/components/catch/catch.wxss @@ -0,0 +1,39 @@ +@import '../../app.wxss'; + + +.container { + background-color: #f5f5f5; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.container-wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: rgb(173,173,173); +} + +.t-icon { + width: 200rpx; + height: 200rpx; +} + +.btn { + display: inline-block; + padding: 10rpx 50rpx; + border: 2rpx solid red; + color: red; + font-size: 30rpx; + border-radius: 30rpx; + box-sizing: border-box; +} + +.mgt60 { + margin-top: 60rpx; +} \ No newline at end of file diff --git a/components/diy_store_select/diy_store_select.js b/components/diy_store_select/diy_store_select.js index fdc6784..c83e633 100644 --- a/components/diy_store_select/diy_store_select.js +++ b/components/diy_store_select/diy_store_select.js @@ -44,10 +44,6 @@ Component({ //获取顶部的门店 getApp().get_user_store(function(){ - var top_store=getApp().globalData.pk_store; - if(top_store){ - th.setData({top_store:top_store}); - }else{ wx.getLocation({ type: 'gcj02', success: function(res) { @@ -61,9 +57,12 @@ Component({ } } }) - } + }) }, + + + //-- 设置最近的店为默认的店,一开始加载的时候 -- set_fir_store_to_def(){ var th=this; @@ -74,7 +73,13 @@ Component({ page:1, }; dd.lat = th.data.lat; - dd.lon = th.data.lon; + dd.lon = th.data.lon; + + var top_store=getApp().globalData.pk_store; + if(top_store){ + dd.pickup_id=top_store.pickup_id; + } + //----------获取门店,最近的门店---------------- getApp().request.promiseGet("/api/weshop/pickup/list", { data: dd, @@ -173,8 +178,7 @@ Component({ this.deal_pickup(this.data.all_pick_list,func) return false; } - var th = this,that=this; - var i = getApp().request; + var th = this,that=this; var dd = { store_id: o.stoid, isstop: 0, diff --git a/components/diy_store_select/diy_store_select.wxml b/components/diy_store_select/diy_store_select.wxml index 8db133f..b56406c 100644 --- a/components/diy_store_select/diy_store_select.wxml +++ b/components/diy_store_select/diy_store_select.wxml @@ -1,3 +1,5 @@ + + @@ -51,7 +53,7 @@ - 距离：{{item.distance>1000?filters.toFix(item.distance/1000,2)+'km':filters.toFix(item.distance,0)+"m"}} + 距离： {{item.distance>1000?filters.toFix(item.distance/1000,2)+'km':filters.toFix(item.distance,0)+"m"}} 地址:{{item.fulladdress}} diff --git a/components/my_confirm/my_confirm.wxml b/components/my_confirm/my_confirm.wxml index d82fc15..94ba02c 100644 --- a/components/my_confirm/my_confirm.wxml +++ b/components/my_confirm/my_confirm.wxml @@ -6,8 +6,8 @@ ⅹ {{title}} - {{s_text}} - {{c_text}} + {{s_text}} + {{c_text}} diff --git a/components/my_confirm/my_confirm.wxss b/components/my_confirm/my_confirm.wxss index f05f462..55f8f7a 100644 --- a/components/my_confirm/my_confirm.wxss +++ b/components/my_confirm/my_confirm.wxss @@ -1,4 +1,4 @@ - +@import '../../app.wxss'; /* 弹窗样式 */ .xc-pop-up{ width: 100%; @@ -23,19 +23,19 @@ .shut{ display: block; - width: 54rpx; - height: 54rpx; - font-size: 50rpx; - line-height:47rpx; + width: 45rpx; + height: 45rpx; + line-height:36rpx; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; + font-size: 40rpx; color: #fff; text-align: center; position: fixed; - margin-top: -23rpx; z-index: 66666; - right: 60rpx; + right: 75rpx; + top: 465rpx; background: #c8162c; } .xc-qr-frame{ @@ -50,7 +50,7 @@ margin-left: -280rpx; border-radius:10rpx } -.ck_btn{width:44%;height:52rpx;line-height:60rpx;background:#f35e73;border-radius:10rpx;} +.ck_btn{color: #000; width:44%;height:52rpx;line-height:60rpx;background:#f35e73;border-radius:10rpx;} .fs36{ font-size: 36rpx; } .fs30{ font-size: 30rpx; } diff --git a/components/qr_code/qr_code.wxml b/components/qr_code/qr_code.wxml index 216c4fa..5219afc 100644 --- a/components/qr_code/qr_code.wxml +++ b/components/qr_code/qr_code.wxml @@ -24,7 +24,7 @@ - ⅹ + \ No newline at end of file diff --git a/components/qr_code/qr_code.wxss b/components/qr_code/qr_code.wxss index 084783b..d953bbd 100644 --- a/components/qr_code/qr_code.wxss +++ b/components/qr_code/qr_code.wxss @@ -1,3 +1,5 @@ +@import '../../app.wxss'; + .xc-pop-up{ width: 100%; height: 100%; @@ -90,36 +92,39 @@ top: 5rpx; .qrcode{ width:520rpx; height:520rpx; - margin-top:-27rpx + margin-top:-18rpx } .r-code{ font-size:28rpx; - padding-left: 25rpx; -margin-top: -5.5rpx; + margin-top: -5.5rpx; + text-align: center; } .shut{ - display: block; + /* display: block; width: 54rpx; height: 54rpx; border: 2rpx solid #fff; font-size: 50rpx; - z-index:55; - line-height:47rpx; + line-height:54rpx; margin-top: 45rpx; border-radius: 50%; -moz-border-radius: 50%; - -webkit-border-radius: 50%; + -webkit-border-radius: 50%; */ + z-index:55; color: #fff; text-align: center; position: fixed; top:940rpx; - left:345rpx; - - + left:50%; + transform: translateX(-50%); +} +.icon-close:before { + content: "\e62e"; + font-size: 50rpx; } .mt{ margin-top:130rpx} diff --git a/packageA/pages/myGift/myGift.js b/packageA/pages/myGift/myGift.js index 593a01c..d94dd7d 100644 --- a/packageA/pages/myGift/myGift.js +++ b/packageA/pages/myGift/myGift.js @@ -144,8 +144,9 @@ Page({ isShowLoading: true, }) .then(function(res) { + console.log(res); if(res.data.code == 0) { - + self.setData({ isLoading: false }); @@ -154,10 +155,12 @@ Page({ self.setData({ list: res.data.data }); + // console.log(this.data.list); } else { self.setData({ 'list.pageData': self.data.list.pageData.concat(res.data.data.pageData) }); + }; if((res.data.data.pageData.length == 0) || (res.data.data.pageSize * res.data.data.page >= res.data.data.total)) { @@ -312,5 +315,19 @@ Page({ }) }, + + + show_remark:function(e){ + var index=e.currentTarget.dataset.index; + var item=this.data.list.pageData[index]; + this.setData({ + show_rem_pop:1, + pop_remark_text:item.lbintro + }) + }, + + close_remark:function(){ + this.setData({show_rem_pop:0,}) + } }) \ No newline at end of file diff --git a/packageA/pages/myGift/myGift.wxml b/packageA/pages/myGift/myGift.wxml index ccc9103..171e8ef 100644 --- a/packageA/pages/myGift/myGift.wxml +++ b/packageA/pages/myGift/myGift.wxml @@ -8,7 +8,10 @@ - + + + 活动说明:{{item.lbintro}} + {{item.lbtitle}} @@ -33,7 +36,7 @@ 已售{{item.salenum}}件 - 活动截止日期 {{filter.format_time(item.expdate)}} + 活动结束日期 {{filter.format_time(item.endtime)}} @@ -52,10 +55,11 @@ {{item.lbtitle}} - 活动截止日期 {{filter.format_time(item.endtime)}} + 兑换截止日期 {{filter.format_time(item.expdate,1)}} + 活动说明 - *请到线下门店兑换 + 注:请到线下门店兑换 @@ -68,3 +72,13 @@ + + + + + + 活动说明： + {{pop_remark_text}} + + + \ No newline at end of file diff --git a/packageA/pages/myGift/myGift.wxss b/packageA/pages/myGift/myGift.wxss index 04a155b..1e961aa 100644 --- a/packageA/pages/myGift/myGift.wxss +++ b/packageA/pages/myGift/myGift.wxss @@ -164,4 +164,28 @@ page { color: #bbb; text-align: center; font-size: 22rpx; -} \ No newline at end of file +} +.lb_remark{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 50rpx; + line-height: 50rpx; + font-size: 30rpx; + color: #333; + padding-left: 10rpx; + background-color: rgba(250,250,250,0.5); +} + +.rem_pop{ + position: fixed; + top: 30%; + left: 6%; + width: 88%; + margin: 0 auto; + height: 460rpx; + background-color: #fff; + z-index: 100; border-radius: 10rpx; + padding: 10rpx; +} diff --git a/packageA/pages/myGiftDetails/myGiftDetails.js b/packageA/pages/myGiftDetails/myGiftDetails.js index 7fd7754..162a9db 100644 --- a/packageA/pages/myGiftDetails/myGiftDetails.js +++ b/packageA/pages/myGiftDetails/myGiftDetails.js @@ -11,7 +11,7 @@ Page({ data: { qr_code_object: { val: "12121", - content: "请将二维码展示给核销员，服务更快捷！" + content: "当前核销码仅限当面使用！" }, }, @@ -72,7 +72,7 @@ Page({ if(res.data.code==0 && res.data.data && res.data.data.pageData && res.data.data.pageData.length>0){ var da= res.data.data.pageData[0] self.setData({ details:da, }); - + console.log(da); //礼包有俩种类型 if(da.lbtype==1){ app.request.promiseGet('/api/weshop/libao/libaoList/page', { @@ -94,6 +94,7 @@ Page({ }, isShowLoading: true, }).then(function(res) { + console.log(res); if(res.data.code==0){ self.setData({ list: res.data.data, @@ -150,6 +151,7 @@ Page({ }, isShowLoading: true, }).then(function(res) { + console.log(res); // console.log('res4-->', res); if(res.data.code==0 && res.data.data) { self.setData({ @@ -290,6 +292,7 @@ Page({ getApp().request.get("/api/weshop/libao/libaoListvip/getLibaoCode",{ data:data, success:function (res){ + console.log(res); if(res.data.code==0){ th.data.qr_code_object.val=res.data.data; var qc_com = th.selectComponent("#qrcode"); //组件的id diff --git a/packageA/pages/myGiftDetails/myGiftDetails.wxml b/packageA/pages/myGiftDetails/myGiftDetails.wxml index bd8ba1d..1e93278 100644 --- a/packageA/pages/myGiftDetails/myGiftDetails.wxml +++ b/packageA/pages/myGiftDetails/myGiftDetails.wxml @@ -3,7 +3,17 @@ - 兑换结束时间：{{filter.format_time(details.expdate,1)}} + + + 活动结束时间：{{filter.format_time(details.endtime,1)}} + + + + 兑换结束时间：{{filter.format_time(details.expdate,1)}} + + + + @@ -30,7 +40,7 @@ 已售{{details.salenum}}件 - 活动截止日期 {{details.expdate ? filter.format_time(details.expdate):filter.format_time(details.endtime)}} + @@ -71,16 +81,40 @@ - + - 满1000.00使用 - ￥1000 + 满{{item.condition}}使用 + ￥{{item.money}} - 活动结束日期： 2022-06-02 00:00:00 + + + {{index==0?'活动结束日期':'截至时间'}}： + + + + {{filter.format_time(item.use_end_time,1)}} + + + 不限 + + + + + + 有效期{{item.days}}天 + + + 不限 + + + + + + - + @@ -106,7 +140,7 @@ 立即购买 - 已领 + 已领取 一键领取优惠券→ diff --git a/packageB/components/painter/lib/downloader.js b/packageB/components/painter/lib/downloader.js new file mode 100644 index 0000000..0c56cc3 --- /dev/null +++ b/packageB/components/painter/lib/downloader.js @@ -0,0 +1,251 @@ +/** + * LRU 文件存储，使用该 downloader 可以让下载的文件存储在本地，下次进入小程序后可以直接使用 + * 详细设计文档可查看 https://juejin.im/post/5b42d3ede51d4519277b6ce3 + */ +const util = require('./util'); + +const SAVED_FILES_KEY = 'savedFiles'; +const KEY_TOTAL_SIZE = 'totalSize'; +const KEY_PATH = 'path'; +const KEY_TIME = 'time'; +const KEY_SIZE = 'size'; + +// 可存储总共为 6M，目前小程序可允许的最大本地存储为 10M +let MAX_SPACE_IN_B = 6 * 1024 * 1024; +let savedFiles = {}; + +export default class Dowloader { + constructor() { + // app 如果设置了最大存储空间，则使用 app 中的 + if (getApp().PAINTER_MAX_LRU_SPACE) { + MAX_SPACE_IN_B = getApp().PAINTER_MAX_LRU_SPACE; + } + wx.getStorage({ + key: SAVED_FILES_KEY, + success: function (res) { + if (res.data) { + savedFiles = res.data; + } + }, + }); + } + + /** + * 下载文件，会用 lru 方式来缓存文件到本地 + * @param {String} url 文件的 url + */ + download(url, lru) { + return new Promise((resolve, reject) => { + if (!(url && util.isValidUrl(url))) { + resolve(url); + return; + } + if (!lru) { + // 无 lru 情况下直接判断 临时文件是否存在，不存在重新下载 + wx.getFileInfo({ + filePath: url, + success: () => { + resolve(url); + }, + fail: () => { + downloadFile(url, lru).then((path) => { + resolve(path); + }, () => { + reject(); + }); + }, + }) + return + } + + const file = getFile(url); + + if (file) { + // 检查文件是否正常，不正常需要重新下载 + wx.getSavedFileInfo({ + filePath: file[KEY_PATH], + success: (res) => { + resolve(file[KEY_PATH]); + }, + fail: (error) => { + console.error(`the file is broken, redownload it, ${JSON.stringify(error)}`); + downloadFile(url, lru).then((path) => { + resolve(path); + }, () => { + reject(); + }); + }, + }); + } else { + downloadFile(url, lru).then((path) => { + resolve(path); + }, () => { + reject(); + }); + } + }); + } +} + +function downloadFile(url, lru) { + return new Promise((resolve, reject) => { + wx.downloadFile({ + url: url, + success: function (res) { + if (res.statusCode !== 200) { + console.error(`downloadFile ${url} failed res.statusCode is not 200`); + reject(); + return; + } + const { + tempFilePath + } = res; + wx.getFileInfo({ + filePath: tempFilePath, + success: (tmpRes) => { + const newFileSize = tmpRes.size; + lru ? doLru(newFileSize).then(() => { + saveFile(url, newFileSize, tempFilePath).then((filePath) => { + resolve(filePath); + }); + }, () => { + resolve(tempFilePath); + }) : resolve(tempFilePath); + }, + fail: (error) => { + // 文件大小信息获取失败，则此文件也不要进行存储 + console.error(`getFileInfo ${res.tempFilePath} failed, ${JSON.stringify(error)}`); + resolve(res.tempFilePath); + }, + }); + }, + fail: function (error) { + console.error(`downloadFile failed, ${JSON.stringify(error)} `); + reject(); + }, + }); + }); +} + +function saveFile(key, newFileSize, tempFilePath) { + return new Promise((resolve, reject) => { + wx.saveFile({ + tempFilePath: tempFilePath, + success: (fileRes) => { + const totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0; + savedFiles[key] = {}; + savedFiles[key][KEY_PATH] = fileRes.savedFilePath; + savedFiles[key][KEY_TIME] = new Date().getTime(); + savedFiles[key][KEY_SIZE] = newFileSize; + savedFiles['totalSize'] = newFileSize + totalSize; + wx.setStorage({ + key: SAVED_FILES_KEY, + data: savedFiles, + }); + resolve(fileRes.savedFilePath); + }, + fail: (error) => { + console.error(`saveFile ${key} failed, then we delete all files, ${JSON.stringify(error)}`); + // 由于 saveFile 成功后，res.tempFilePath 处的文件会被移除，所以在存储未成功时，我们还是继续使用临时文件 + resolve(tempFilePath); + // 如果出现错误，就直接情况本地的所有文件，因为你不知道是不是因为哪次lru的某个文件未删除成功 + reset(); + }, + }); + }); +} + +/** + * 清空所有下载相关内容 + */ +function reset() { + wx.removeStorage({ + key: SAVED_FILES_KEY, + success: () => { + wx.getSavedFileList({ + success: (listRes) => { + removeFiles(listRes.fileList); + }, + fail: (getError) => { + console.error(`getSavedFileList failed, ${JSON.stringify(getError)}`); + }, + }); + }, + }); +} + +function doLru(size) { + if (size > MAX_SPACE_IN_B) { + return Promise.reject() + } + return new Promise((resolve, reject) => { + let totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0; + + if (size + totalSize <= MAX_SPACE_IN_B) { + resolve(); + return; + } + // 如果加上新文件后大小超过最大限制，则进行 lru + const pathsShouldDelete = []; + // 按照最后一次的访问时间，从小到大排序 + const allFiles = JSON.parse(JSON.stringify(savedFiles)); + delete allFiles[KEY_TOTAL_SIZE]; + const sortedKeys = Object.keys(allFiles).sort((a, b) => { + return allFiles[a][KEY_TIME] - allFiles[b][KEY_TIME]; + }); + + for (const sortedKey of sortedKeys) { + totalSize -= savedFiles[sortedKey].size; + pathsShouldDelete.push(savedFiles[sortedKey][KEY_PATH]); + delete savedFiles[sortedKey]; + if (totalSize + size < MAX_SPACE_IN_B) { + break; + } + } + + savedFiles['totalSize'] = totalSize; + + wx.setStorage({ + key: SAVED_FILES_KEY, + data: savedFiles, + success: () => { + // 保证 storage 中不会存在不存在的文件数据 + if (pathsShouldDelete.length > 0) { + removeFiles(pathsShouldDelete); + } + resolve(); + }, + fail: (error) => { + console.error(`doLru setStorage failed, ${JSON.stringify(error)}`); + reject(); + }, + }); + }); +} + +function removeFiles(pathsShouldDelete) { + for (const pathDel of pathsShouldDelete) { + let delPath = pathDel; + if (typeof pathDel === 'object') { + delPath = pathDel.filePath; + } + wx.removeSavedFile({ + filePath: delPath, + fail: (error) => { + console.error(`removeSavedFile ${pathDel} failed, ${JSON.stringify(error)}`); + }, + }); + } +} + +function getFile(key) { + if (!savedFiles[key]) { + return; + } + savedFiles[key]['time'] = new Date().getTime(); + wx.setStorage({ + key: SAVED_FILES_KEY, + data: savedFiles, + }); + return savedFiles[key]; +} \ No newline at end of file diff --git a/packageB/components/painter/lib/gradient.js b/packageB/components/painter/lib/gradient.js new file mode 100644 index 0000000..13c7258 --- /dev/null +++ b/packageB/components/painter/lib/gradient.js @@ -0,0 +1,102 @@ +/* eslint-disable */ +// 当ctx传入当前文件，const grd = ctx.createCircularGradient() 和 +// const grd = this.ctx.createLinearGradient() 无效，因此只能分开处理 +// 先分析，在外部创建grd，再传入使用就可以 + +!(function () { + + var api = { + isGradient: function(bg) { + if (bg && (bg.startsWith('linear') || bg.startsWith('radial'))) { + return true; + } + return false; + }, + + doGradient: function(bg, width, height, ctx) { + if (bg.startsWith('linear')) { + linearEffect(width, height, bg, ctx); + } else if (bg.startsWith('radial')) { + radialEffect(width, height, bg, ctx); + } + }, + } + + function analizeGrad(string) { + const colorPercents = string.substring(0, string.length - 1).split("%,"); + const colors = []; + const percents = []; + for (let colorPercent of colorPercents) { + colors.push(colorPercent.substring(0, colorPercent.lastIndexOf(" ")).trim()); + percents.push(colorPercent.substring(colorPercent.lastIndexOf(" "), colorPercent.length) / 100); + } + return {colors: colors, percents: percents}; + } + + function radialEffect(width, height, bg, ctx) { + const colorPer = analizeGrad(bg.match(/radial-gradient\((.+)\)/)[1]); + const grd = ctx.createRadialGradient(0, 0, 0, 0, 0, width < height ? height / 2 : width / 2); + for (let i = 0; i < colorPer.colors.length; i++) { + grd.addColorStop(colorPer.percents[i], colorPer.colors[i]); + } + ctx.fillStyle = grd; + //ctx.fillRect(-(width / 2), -(height / 2), width, height); + } + + function analizeLinear(bg, width, height) { + const direction = bg.match(/([-]?\d{1,3})deg/); + const dir = direction && direction[1] ? parseFloat(direction[1]) : 0; + let coordinate; + switch (dir) { + case 0: coordinate = [0, -height / 2, 0, height / 2]; break; + case 90: coordinate = [width / 2, 0, -width / 2, 0]; break; + case -90: coordinate = [-width / 2, 0, width / 2, 0]; break; + case 180: coordinate = [0, height / 2, 0, -height / 2]; break; + case -180: coordinate = [0, -height / 2, 0, height / 2]; break; + default: + let x1 = 0; + let y1 = 0; + let x2 = 0; + let y2 = 0; + if (direction[1] > 0 && direction[1] < 90) { + x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2; + y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1; + x2 = -x1; + y1 = -y2; + } else if (direction[1] > -180 && direction[1] < -90) { + x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2; + y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1; + x2 = -x1; + y1 = -y2; + } else if (direction[1] > 90 && direction[1] < 180) { + x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2; + y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1; + x2 = -x1; + y1 = -y2; + } else { + x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2; + y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1; + x2 = -x1; + y1 = -y2; + } + coordinate = [x1, y1, x2, y2]; + break; + } + return coordinate; + } + + function linearEffect(width, height, bg, ctx) { + const param = analizeLinear(bg, width, height); + const grd = ctx.createLinearGradient(param[0], param[1], param[2], param[3]); + const content = bg.match(/linear-gradient\((.+)\)/)[1]; + const colorPer = analizeGrad(content.substring(content.indexOf(',') + 1)); + for (let i = 0; i < colorPer.colors.length; i++) { + grd.addColorStop(colorPer.percents[i], colorPer.colors[i]); + } + ctx.fillStyle = grd + //ctx.fillRect(-(width / 2), -(height / 2), width, height); + } + + module.exports = { api } + +})(); diff --git a/packageB/components/painter/lib/pen.js b/packageB/components/painter/lib/pen.js new file mode 100644 index 0000000..444f318 --- /dev/null +++ b/packageB/components/painter/lib/pen.js @@ -0,0 +1,750 @@ +const QR = require('./qrcode.js'); +const GD = require('./gradient.js'); + +export default class Painter { + constructor(ctx, data) { + this.ctx = ctx; + this.data = data; + this.globalWidth = {}; + this.globalHeight = {}; + } + + isMoving = false + movingCache = {} + paint(callback, isMoving, movingCache) { + this.style = { + width: this.data.width.toPx(), + height: this.data.height.toPx(), + }; + if (isMoving) { + this.isMoving = true + this.movingCache = movingCache + } + this._background(); + for (const view of this.data.views) { + this._drawAbsolute(view); + } + this.ctx.draw(false, () => { + callback && callback(this.callbackInfo); + }); + } + + _background() { + this.ctx.save(); + const { + width, + height, + } = this.style; + const bg = this.data.background; + this.ctx.translate(width / 2, height / 2); + + this._doClip(this.data.borderRadius, width, height); + if (!bg) { + // 如果未设置背景，则默认使用透明色 + this.ctx.fillStyle = 'transparent'; + this.ctx.fillRect(-(width / 2), -(height / 2), width, height); + } else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') { + // 背景填充颜色 + this.ctx.fillStyle = bg; + this.ctx.fillRect(-(width / 2), -(height / 2), width, height); + } else if (GD.api.isGradient(bg)) { + GD.api.doGradient(bg, width, height, this.ctx); + this.ctx.fillRect(-(width / 2), -(height / 2), width, height); + } else { + // 背景填充图片 + this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height); + } + this.ctx.restore(); + } + + _drawAbsolute(view) { + if (!(view && view.type)) { + // 过滤无效 view + return + } + // 证明 css 为数组形式，需要合并 + if (view.css && view.css.length) { + /* eslint-disable no-param-reassign */ + view.css = Object.assign(...view.css); + } + switch (view.type) { + case 'image': + this._drawAbsImage(view); + break; + case 'text': + this._fillAbsText(view); + break; + case 'rect': + this._drawAbsRect(view); + break; + case 'qrcode': + this._drawQRCode(view); + break; + default: + break; + } + } + + _border({ + borderRadius = 0, + width, + height, + borderWidth = 0, + borderStyle = 'solid' + }) { + let r1 = 0, + r2 = 0, + r3 = 0, + r4 = 0 + const minSize = Math.min(width, height); + if (borderRadius) { + const border = borderRadius.split(/\s+/) + if (border.length === 4) { + r1 = Math.min(border[0].toPx(false, minSize), width / 2, height / 2); + r2 = Math.min(border[1].toPx(false, minSize), width / 2, height / 2); + r3 = Math.min(border[2].toPx(false, minSize), width / 2, height / 2); + r4 = Math.min(border[3].toPx(false, minSize), width / 2, height / 2); + } else { + r1 = r2 = r3 = r4 = Math.min(borderRadius && borderRadius.toPx(false, minSize), width / 2, height / 2); + } + } + const lineWidth = borderWidth && borderWidth.toPx(false, minSize); + this.ctx.lineWidth = lineWidth; + if (borderStyle === 'dashed') { + this.ctx.setLineDash([lineWidth * 4 / 3, lineWidth * 4 / 3]); + // this.ctx.lineDashOffset = 2 * lineWidth + } else if (borderStyle === 'dotted') { + this.ctx.setLineDash([lineWidth, lineWidth]); + } + const notSolid = borderStyle !== 'solid' + this.ctx.beginPath(); + + notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则 + r1 !== 0 && this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1 + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧 + this.ctx.lineTo(r2 === 0 ? notSolid ? width / 2 : width / 2 + lineWidth / 2 : width / 2 - r2, -height / 2 - lineWidth / 2); // 顶边线 + + notSolid && r2 === 0 && this.ctx.moveTo(width / 2 + lineWidth / 2, -height / 2 - lineWidth) // 右边虚线规避重叠规则 + r2 !== 0 && this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2 + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧 + this.ctx.lineTo(width / 2 + lineWidth / 2, r3 === 0 ? notSolid ? height / 2 : height / 2 + lineWidth / 2 : height / 2 - r3); // 右边线 + + notSolid && r3 === 0 && this.ctx.moveTo(width / 2 + lineWidth, height / 2 + lineWidth / 2) // 底边虚线规避重叠规则 + r3 !== 0 && this.ctx.arc(width / 2 - r3, height / 2 - r3, r3 + lineWidth / 2, 0, 0.5 * Math.PI); // 右下角圆弧 + this.ctx.lineTo(r4 === 0 ? notSolid ? -width / 2 : -width / 2 - lineWidth / 2 : -width / 2 + r4, height / 2 + lineWidth / 2); // 底边线 + + notSolid && r4 === 0 && this.ctx.moveTo(-width / 2 - lineWidth / 2, height / 2 + lineWidth) // 左边虚线规避重叠规则 + r4 !== 0 && this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4 + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧 + this.ctx.lineTo(-width / 2 - lineWidth / 2, r1 === 0 ? notSolid ? -height / 2 : -height / 2 - lineWidth / 2 : -height / 2 + r1); // 左边线 + notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则 + + if (!notSolid) { + this.ctx.closePath(); + } + } + + /** + * 根据 borderRadius 进行裁减 + */ + _doClip(borderRadius, width, height, borderStyle) { + if (borderRadius && width && height) { + // 防止在某些机型上周边有黑框现象，此处如果直接设置 fillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会 + // globalAlpha 在 1.9.90 起支持，低版本下无效，但把 fillStyle 设为了 white，相对默认的 black 要好点 + this.ctx.globalAlpha = 0; + this.ctx.fillStyle = 'white'; + this._border({ + borderRadius, + width, + height, + borderStyle + }) + this.ctx.fill(); + // 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性 + if (!(getApp().systemInfo && + getApp().systemInfo.version <= '6.6.6' && + getApp().systemInfo.platform === 'ios')) { + this.ctx.clip(); + } + this.ctx.globalAlpha = 1; + } + } + + /** + * 画边框 + */ + _doBorder(view, width, height) { + if (!view.css) { + return; + } + const { + borderRadius, + borderWidth, + borderColor, + borderStyle + } = view.css; + if (!borderWidth) { + return; + } + this.ctx.save(); + this._preProcess(view, true); + this.ctx.strokeStyle = (borderColor || 'black'); + this._border({ + borderRadius, + width, + height, + borderWidth, + borderStyle + }) + this.ctx.stroke(); + this.ctx.restore(); + } + + _preProcess(view, notClip) { + let width = 0; + let height; + let extra; + const paddings = this._doPaddings(view); + switch (view.type) { + case 'text': { + const textArray = view.text.split('\n'); + // 处理多个连续的'\n' + for (let i = 0; i < textArray.length; ++i) { + if (textArray[i] === '') { + textArray[i] = ' '; + } + } + const fontWeight = view.css.fontWeight || '400'; + const textStyle = view.css.textStyle || 'normal'; + if (!view.css.fontSize) { + view.css.fontSize = '20rpx'; + } + this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px "${view.css.fontFamily || 'sans-serif'}"`; + // 计算行数 + let lines = 0; + const linesArray = []; + for (let i = 0; i < textArray.length; ++i) { + const textLength = this.ctx.measureText(textArray[i]).width; + const minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3]; + let partWidth = view.css.width ? view.css.width.toPx(false, this.style.width) - paddings[1] - paddings[3] : textLength; + if (partWidth < minWidth) { + partWidth = minWidth; + } + const calLines = Math.ceil(textLength / partWidth); + // 取最长的作为 width + width = partWidth > width ? partWidth : width; + lines += calLines; + linesArray[i] = calLines; + } + lines = view.css.maxLines < lines ? view.css.maxLines : lines; + const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx(); + height = lineHeight * lines; + extra = { + lines: lines, + lineHeight: lineHeight, + textArray: textArray, + linesArray: linesArray, + }; + break; + } + case 'image': { + // image的长宽设置成auto的逻辑处理 + const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2; + // 有css却未设置width或height，则默认为auto + if (view.css) { + if (!view.css.width) { + view.css.width = 'auto'; + } + if (!view.css.height) { + view.css.height = 'auto'; + } + } + if (!view.css || (view.css.width === 'auto' && view.css.height === 'auto')) { + width = Math.round(view.sWidth / ratio); + height = Math.round(view.sHeight / ratio); + } else if (view.css.width === 'auto') { + height = view.css.height.toPx(false, this.style.height); + width = view.sWidth / view.sHeight * height; + } else if (view.css.height === 'auto') { + width = view.css.width.toPx(false, this.style.width); + height = view.sHeight / view.sWidth * width; + } else { + width = view.css.width.toPx(false, this.style.width); + height = view.css.height.toPx(false, this.style.height); + } + break; + } + default: + if (!(view.css.width && view.css.height)) { + console.error('You should set width and height'); + return; + } + width = view.css.width.toPx(false, this.style.width); + height = view.css.height.toPx(false, this.style.height); + break; + } + let x; + if (view.css && view.css.right) { + if (typeof view.css.right === 'string') { + x = this.style.width - view.css.right.toPx(true, this.style.width); + } else { + // 可以用数组方式，把文字长度计算进去 + // [right, 文字id, 乘数（默认 1）] + const rights = view.css.right; + x = this.style.width - rights[0].toPx(true, this.style.width) - this.globalWidth[rights[1]] * (rights[2] || 1); + } + } else if (view.css && view.css.left) { + if (typeof view.css.left === 'string') { + x = view.css.left.toPx(true, this.style.width); + } else { + const lefts = view.css.left; + x = lefts[0].toPx(true, this.style.width) + this.globalWidth[lefts[1]] * (lefts[2] || 1); + } + } else { + x = 0; + } + //const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0); + let y; + if (view.css && view.css.bottom) { + y = this.style.height - height - view.css.bottom.toPx(true, this.style.height); + } else { + if (view.css && view.css.top) { + if (typeof view.css.top === 'string') { + y = view.css.top.toPx(true, this.style.height); + } else { + const tops = view.css.top; + y = tops[0].toPx(true, this.style.height) + this.globalHeight[tops[1]] * (tops[2] || 1); + } + } else { + y = 0 + } + } + + const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0; + // 当设置了 right 时，默认 align 用 right，反之用 left + const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left'); + const verticalAlign = view.css && view.css.verticalAlign ? view.css.verticalAlign : 'top'; + // 记录绘制时的画布 + let xa = 0; + switch (align) { + case 'center': + xa = x; + break; + case 'right': + xa = x - width / 2; + break; + default: + xa = x + width / 2; + break; + } + let ya = 0; + switch (verticalAlign) { + case 'center': + ya = y; + break; + case 'bottom': + ya = y - height / 2; + break; + default: + ya = y + height / 2; + break; + } + this.ctx.translate(xa, ya); + // 记录该 view 的有效点击区域 + // TODO ，旋转和裁剪的判断 + // 记录在真实画布上的左侧 + let left = x + if (align === 'center') { + left = x - width / 2 + } else if (align === 'right') { + left = x - width + } + var top = y; + if (verticalAlign === 'center') { + top = y - height / 2; + } else if (verticalAlign === 'bottom') { + top = y - height + } + if (view.rect) { + view.rect.left = left; + view.rect.top = top; + view.rect.right = left + width; + view.rect.bottom = top + height; + view.rect.x = view.css && view.css.right ? x - width : x; + view.rect.y = y; + } else { + view.rect = { + left: left, + top: top, + right: left + width, + bottom: top + height, + x: view.css && view.css.right ? x - width : x, + y: y + }; + } + + view.rect.left = view.rect.left - paddings[3]; + view.rect.top = view.rect.top - paddings[0]; + view.rect.right = view.rect.right + paddings[1]; + view.rect.bottom = view.rect.bottom + paddings[2]; + if (view.type === 'text') { + view.rect.minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3]; + } + + this.ctx.rotate(angle); + if (!notClip && view.css && view.css.borderRadius && view.type !== 'rect') { + this._doClip(view.css.borderRadius, width, height, view.css.borderStyle); + } + this._doShadow(view); + if (view.id) { + this.globalWidth[view.id] = width; + this.globalHeight[view.id] = height; + } + return { + width: width, + height: height, + x: x, + y: y, + extra: extra, + }; + } + + _doPaddings(view) { + const { + padding, + } = view.css ? view.css : {}; + let pd = [0, 0, 0, 0]; + if (padding) { + const pdg = padding.split(/\s+/); + if (pdg.length === 1) { + const x = pdg[0].toPx(); + pd = [x, x, x, x]; + } + if (pdg.length === 2) { + const x = pdg[0].toPx(); + const y = pdg[1].toPx(); + pd = [x, y, x, y]; + } + if (pdg.length === 3) { + const x = pdg[0].toPx(); + const y = pdg[1].toPx(); + const z = pdg[2].toPx(); + pd = [x, y, z, y]; + } + if (pdg.length === 4) { + const x = pdg[0].toPx(); + const y = pdg[1].toPx(); + const z = pdg[2].toPx(); + const a = pdg[3].toPx(); + pd = [x, y, z, a]; + } + } + return pd; + } + + // 画文字的背景图片 + _doBackground(view) { + this.ctx.save(); + const { + width: rawWidth, + height: rawHeight, + } = this._preProcess(view, true); + + const { + background, + } = view.css; + let pd = this._doPaddings(view); + const width = rawWidth + pd[1] + pd[3]; + const height = rawHeight + pd[0] + pd[2]; + + this._doClip(view.css.borderRadius, width, height, view.css.borderStyle) + if (GD.api.isGradient(background)) { + GD.api.doGradient(background, width, height, this.ctx); + } else { + this.ctx.fillStyle = background; + } + this.ctx.fillRect(-(width / 2), -(height / 2), width, height); + + this.ctx.restore(); + } + + _drawQRCode(view) { + this.ctx.save(); + const { + width, + height, + } = this._preProcess(view); + QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background, view.css.color); + this.ctx.restore(); + this._doBorder(view, width, height); + } + + _drawAbsImage(view) { + if (!view.url) { + return; + } + this.ctx.save(); + const { + width, + height, + } = this._preProcess(view); + // 获得缩放到图片大小级别的裁减框 + let rWidth = view.sWidth; + let rHeight = view.sHeight; + let startX = 0; + let startY = 0; + // 绘画区域比例 + const cp = width / height; + // 原图比例 + const op = view.sWidth / view.sHeight; + if (cp >= op) { + rHeight = rWidth / cp; + startY = Math.round((view.sHeight - rHeight) / 2); + } else { + rWidth = rHeight * cp; + startX = Math.round((view.sWidth - rWidth) / 2); + } + if (view.css && view.css.mode === 'scaleToFill') { + this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height); + } else { + this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height); + view.rect.startX = startX / view.sWidth; + view.rect.startY = startY / view.sHeight; + view.rect.endX = (startX + rWidth) / view.sWidth; + view.rect.endY = (startY + rHeight) / view.sHeight; + } + this.ctx.restore(); + this._doBorder(view, width, height); + } + + callbackInfo = {} + _fillAbsText(view) { + if (!view.text) { + return; + } + if (view.css.background) { + // 生成背景 + this._doBackground(view); + } + this.ctx.save(); + const { + width, + height, + extra, + } = this._preProcess(view, view.css.background && view.css.borderRadius); + this.ctx.fillStyle = (view.css.color || 'black'); + if (this.isMoving && JSON.stringify(this.movingCache) !== JSON.stringify({})) { + this.globalWidth[view.id] = this.movingCache.globalWidth + this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left'; + for (const i of this.movingCache.lineArray) { + const { + measuredWith, + text, + x, + y, + textDecoration + } = i + if (view.css.textStyle === 'stroke') { + this.ctx.strokeText(text, x, y, measuredWith); + } else { + this.ctx.fillText(text, x, y, measuredWith); + } + if (textDecoration) { + const fontSize = view.css.fontSize.toPx(); + this.ctx.lineWidth = fontSize / 13; + this.ctx.beginPath(); + this.ctx.moveTo(...textDecoration.moveTo); + this.ctx.lineTo(...textDecoration.lineTo); + this.ctx.closePath(); + this.ctx.strokeStyle = view.css.color; + this.ctx.stroke(); + } + } + } else { + const { + lines, + lineHeight, + textArray, + linesArray, + } = extra; + // 如果设置了id，则保留 text 的长度 + if (view.id) { + let textWidth = 0; + for (let i = 0; i < textArray.length; ++i) { + const _w = this.ctx.measureText(textArray[i]).width + textWidth = _w > textWidth ? _w : textWidth; + } + this.globalWidth[view.id] = width ? (textWidth < width ? textWidth : width) : textWidth; + if (!this.isMoving) { + Object.assign(this.callbackInfo, { + globalWidth: this.globalWidth[view.id] + }) + } + } + let lineIndex = 0; + for (let j = 0; j < textArray.length; ++j) { + const preLineLength = Math.ceil(textArray[j].length / linesArray[j]); + let start = 0; + let alreadyCount = 0; + + for (let i = 0; i < linesArray[j]; ++i) { + // 绘制行数大于最大行数，则直接跳出循环 + if (lineIndex >= lines) { + break; + } + alreadyCount = preLineLength; + let text = textArray[j].substr(start, alreadyCount); + let measuredWith = this.ctx.measureText(text).width; + // 如果测量大小小于width一个字符的大小，则进行补齐，如果测量大小超出 width，则进行减除 + // 如果已经到文本末尾，也不要进行该循环 + while ((start + alreadyCount <= textArray[j].length) && (width - measuredWith > view.css.fontSize.toPx() || measuredWith - width > view.css.fontSize.toPx())) { + if (measuredWith < width) { + text = textArray[j].substr(start, ++alreadyCount); + } else { + if (text.length <= 1) { + // 如果只有一个字符时，直接跳出循环 + break; + } + text = textArray[j].substr(start, --alreadyCount); + // break; + } + measuredWith = this.ctx.measureText(text).width; + } + start += text.length + // 如果是最后一行了，发现还有未绘制完的内容，则加... + if (lineIndex === lines - 1 && (j < textArray.length - 1 || start < textArray[j].length)) { + while (this.ctx.measureText(`${text}...`).width > width) { + if (text.length <= 1) { + // 如果只有一个字符时，直接跳出循环 + break; + } + text = text.substring(0, text.length - 1); + } + text += '...'; + measuredWith = this.ctx.measureText(text).width; + } + this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left'; + let x; + let lineX; + switch (view.css.textAlign) { + case 'center': + x = 0; + lineX = x - measuredWith / 2; + break; + case 'right': + x = (width / 2); + lineX = x - measuredWith; + break; + default: + x = -(width / 2); + lineX = x; + break; + } + const y = -(height / 2) + (lineIndex === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + lineIndex * lineHeight)); + lineIndex++; + if (view.css.textStyle === 'stroke') { + this.ctx.strokeText(text, x, y, measuredWith); + } else { + this.ctx.fillText(text, x, y, measuredWith); + } + const fontSize = view.css.fontSize.toPx(); + let textDecoration; + if (view.css.textDecoration) { + this.ctx.lineWidth = fontSize / 13; + this.ctx.beginPath(); + if (/\bunderline\b/.test(view.css.textDecoration)) { + this.ctx.moveTo(lineX, y); + this.ctx.lineTo(lineX + measuredWith, y); + textDecoration = { + moveTo: [lineX, y], + lineTo: [lineX + measuredWith, y] + } + } + if (/\boverline\b/.test(view.css.textDecoration)) { + this.ctx.moveTo(lineX, y - fontSize); + this.ctx.lineTo(lineX + measuredWith, y - fontSize); + textDecoration = { + moveTo: [lineX, y - fontSize], + lineTo: [lineX + measuredWith, y - fontSize] + } + } + if (/\bline-through\b/.test(view.css.textDecoration)) { + this.ctx.moveTo(lineX, y - fontSize / 3); + this.ctx.lineTo(lineX + measuredWith, y - fontSize / 3); + textDecoration = { + moveTo: [lineX, y - fontSize / 3], + lineTo: [lineX + measuredWith, y - fontSize / 3] + } + } + this.ctx.closePath(); + this.ctx.strokeStyle = view.css.color; + this.ctx.stroke(); + } + if (!this.isMoving) { + this.callbackInfo.lineArray ? this.callbackInfo.lineArray.push({ + text, + x, + y, + measuredWith, + textDecoration + }) : this.callbackInfo.lineArray = [{ + text, + x, + y, + measuredWith, + textDecoration + }] + } + } + } + } + this.ctx.restore(); + this._doBorder(view, width, height); + } + + _drawAbsRect(view) { + this.ctx.save(); + const { + width, + height, + } = this._preProcess(view); + if (GD.api.isGradient(view.css.color)) { + GD.api.doGradient(view.css.color, width, height, this.ctx); + } else { + this.ctx.fillStyle = view.css.color; + } + const { + borderRadius, + borderStyle, + borderWidth + } = view.css + this._border({ + borderRadius, + width, + height, + borderWidth, + borderStyle + }) + this.ctx.fill(); + this.ctx.restore(); + this._doBorder(view, width, height); + } + + // shadow 支持 (x, y, blur, color), 不支持 spread + // shadow:0px 0px 10px rgba(0,0,0,0.1); + _doShadow(view) { + if (!view.css || !view.css.shadow) { + return; + } + const box = view.css.shadow.replace(/,\s+/g, ',').split(/\s+/); + if (box.length > 4) { + console.error('shadow don\'t spread option'); + return; + } + this.ctx.shadowOffsetX = parseInt(box[0], 10); + this.ctx.shadowOffsetY = parseInt(box[1], 10); + this.ctx.shadowBlur = parseInt(box[2], 10); + this.ctx.shadowColor = box[3]; + } + + _getAngle(angle) { + return Number(angle) * Math.PI / 180; + } +} diff --git a/packageB/components/painter/lib/qrcode.js b/packageB/components/painter/lib/qrcode.js new file mode 100644 index 0000000..adf1b64 --- /dev/null +++ b/packageB/components/painter/lib/qrcode.js @@ -0,0 +1,784 @@ +/* eslint-disable */ +!(function () { + + // alignment pattern + var adelta = [ + 0, 11, 15, 19, 23, 27, 31, + 16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24, + 26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28 + ]; + + // version block + var vpat = [ + 0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d, + 0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9, + 0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75, + 0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64, + 0x541, 0xc69 + ]; + + // final format bits with mask: level << 3 | mask + var fmtword = [ + 0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976, //L + 0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0, //M + 0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed, //Q + 0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b //H + ]; + + // 4 per version: number of blocks 1,2; data width; ecc width + var eccblocks = [ + 1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17, + 1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28, + 1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22, + 1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16, + 1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22, + 2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28, + 2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26, + 2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26, + 2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24, + 2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28, + 4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24, + 2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28, + 4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22, + 3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24, + 5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24, + 5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30, + 1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28, + 5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28, + 3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26, + 3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28, + 4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30, + 2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24, + 4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30, + 6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30, + 8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30, + 10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30, + 8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30, + 3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30, + 7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30, + 5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30, + 13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30, + 17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30, + 17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30, + 13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30, + 12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30, + 6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30, + 17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30, + 4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30, + 20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30, + 19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30 + ]; + + // Galois field log table + var glog = [ + 0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b, + 0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71, + 0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45, + 0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6, + 0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88, + 0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40, + 0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d, + 0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57, + 0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18, + 0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e, + 0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61, + 0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2, + 0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6, + 0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a, + 0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7, + 0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf + ]; + + // Galios field exponent table + var gexp = [ + 0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26, + 0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0, + 0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23, + 0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1, + 0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0, + 0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2, + 0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce, + 0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc, + 0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54, + 0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73, + 0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff, + 0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41, + 0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6, + 0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09, + 0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16, + 0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00 + ]; + + // Working buffers: + // data input and ecc append, image working buffer, fixed part of image, run lengths for badness + var strinbuf = [], eccbuf = [], qrframe = [], framask = [], rlens = []; + // Control values - width is based on version, last 4 are from table. + var version, width, neccblk1, neccblk2, datablkw, eccblkwid; + var ecclevel = 2; + // set bit to indicate cell in qrframe is immutable. symmetric around diagonal + function setmask(x, y) { + var bt; + if (x > y) { + bt = x; + x = y; + y = bt; + } + // y*y = 1+3+5... + bt = y; + bt *= y; + bt += y; + bt >>= 1; + bt += x; + framask[bt] = 1; + } + + // enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask) + function putalign(x, y) { + var j; + + qrframe[x + width * y] = 1; + for (j = -2; j < 2; j++) { + qrframe[(x + j) + width * (y - 2)] = 1; + qrframe[(x - 2) + width * (y + j + 1)] = 1; + qrframe[(x + 2) + width * (y + j)] = 1; + qrframe[(x + j + 1) + width * (y + 2)] = 1; + } + for (j = 0; j < 2; j++) { + setmask(x - 1, y + j); + setmask(x + 1, y - j); + setmask(x - j, y - 1); + setmask(x + j, y + 1); + } + } + + //======================================================================== + // Reed Solomon error correction + // exponentiation mod N + function modnn(x) { + while (x >= 255) { + x -= 255; + x = (x >> 8) + (x & 255); + } + return x; + } + + var genpoly = []; + + // Calculate and append ECC data to data block. Block is in strinbuf, indexes to buffers given. + function appendrs(data, dlen, ecbuf, eclen) { + var i, j, fb; + + for (i = 0; i < eclen; i++) + strinbuf[ecbuf + i] = 0; + for (i = 0; i < dlen; i++) { + fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]]; + if (fb != 255) /* fb term is non-zero */ + for (j = 1; j < eclen; j++) + strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])]; + else + for (j = ecbuf; j < ecbuf + eclen; j++) + strinbuf[j] = strinbuf[j + 1]; + strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])]; + } + } + + //======================================================================== + // Frame data insert following the path rules + + // check mask - since symmetrical use half. + function ismasked(x, y) { + var bt; + if (x > y) { + bt = x; + x = y; + y = bt; + } + bt = y; + bt += y * y; + bt >>= 1; + bt += x; + return framask[bt]; + } + + //======================================================================== + // Apply the selected mask out of the 8. + function applymask(m) { + var x, y, r3x, r3y; + + switch (m) { + case 0: + for (y = 0; y < width; y++) + for (x = 0; x < width; x++) + if (!((x + y) & 1) && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + break; + case 1: + for (y = 0; y < width; y++) + for (x = 0; x < width; x++) + if (!(y & 1) && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + break; + case 2: + for (y = 0; y < width; y++) + for (r3x = 0, x = 0; x < width; x++ , r3x++) { + if (r3x == 3) + r3x = 0; + if (!r3x && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + break; + case 3: + for (r3y = 0, y = 0; y < width; y++ , r3y++) { + if (r3y == 3) + r3y = 0; + for (r3x = r3y, x = 0; x < width; x++ , r3x++) { + if (r3x == 3) + r3x = 0; + if (!r3x && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + } + break; + case 4: + for (y = 0; y < width; y++) + for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++ , r3x++) { + if (r3x == 3) { + r3x = 0; + r3y = !r3y; + } + if (!r3y && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + break; + case 5: + for (r3y = 0, y = 0; y < width; y++ , r3y++) { + if (r3y == 3) + r3y = 0; + for (r3x = 0, x = 0; x < width; x++ , r3x++) { + if (r3x == 3) + r3x = 0; + if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + } + break; + case 6: + for (r3y = 0, y = 0; y < width; y++ , r3y++) { + if (r3y == 3) + r3y = 0; + for (r3x = 0, x = 0; x < width; x++ , r3x++) { + if (r3x == 3) + r3x = 0; + if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + } + break; + case 7: + for (r3y = 0, y = 0; y < width; y++ , r3y++) { + if (r3y == 3) + r3y = 0; + for (r3x = 0, x = 0; x < width; x++ , r3x++) { + if (r3x == 3) + r3x = 0; + if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y)) + qrframe[x + y * width] ^= 1; + } + } + break; + } + return; + } + + // Badness coefficients. + var N1 = 3, N2 = 3, N3 = 40, N4 = 10; + + // Using the table of the length of each run, calculate the amount of bad image + // - long runs or those that look like finders; called twice, once each for X and Y + function badruns(length) { + var i; + var runsbad = 0; + for (i = 0; i <= length; i++) + if (rlens[i] >= 5) + runsbad += N1 + rlens[i] - 5; + // BwBBBwB as in finder + for (i = 3; i < length - 1; i += 2) + if (rlens[i - 2] == rlens[i + 2] + && rlens[i + 2] == rlens[i - 1] + && rlens[i - 1] == rlens[i + 1] + && rlens[i - 1] * 3 == rlens[i] + // white around the black pattern? Not part of spec + && (rlens[i - 3] == 0 // beginning + || i + 3 > length // end + || rlens[i - 3] * 3 >= rlens[i] * 4 || rlens[i + 3] * 3 >= rlens[i] * 4) + ) + runsbad += N3; + return runsbad; + } + + // Calculate how bad the masked image is - blocks, imbalance, runs, or finders. + function badcheck() { + var x, y, h, b, b1; + var thisbad = 0; + var bw = 0; + + // blocks of same color. + for (y = 0; y < width - 1; y++) + for (x = 0; x < width - 1; x++) + if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y] + && qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black + || !(qrframe[x + width * y] || qrframe[(x + 1) + width * y] + || qrframe[x + width * (y + 1)] || qrframe[(x + 1) + width * (y + 1)])) // all white + thisbad += N2; + + // X runs + for (y = 0; y < width; y++) { + rlens[0] = 0; + for (h = b = x = 0; x < width; x++) { + if ((b1 = qrframe[x + width * y]) == b) + rlens[h]++; + else + rlens[++h] = 1; + b = b1; + bw += b ? 1 : -1; + } + thisbad += badruns(h); + } + + // black/white imbalance + if (bw < 0) + bw = -bw; + + var big = bw; + var count = 0; + big += big << 2; + big <<= 1; + while (big > width * width) + big -= width * width, count++; + thisbad += count * N4; + + // Y runs + for (x = 0; x < width; x++) { + rlens[0] = 0; + for (h = b = y = 0; y < width; y++) { + if ((b1 = qrframe[x + width * y]) == b) + rlens[h]++; + else + rlens[++h] = 1; + b = b1; + } + thisbad += badruns(h); + } + return thisbad; + } + + function genframe(instring) { + var x, y, k, t, v, i, j, m; + + // find the smallest version that fits the string + t = instring.length; + version = 0; + do { + version++; + k = (ecclevel - 1) * 4 + (version - 1) * 16; + neccblk1 = eccblocks[k++]; + neccblk2 = eccblocks[k++]; + datablkw = eccblocks[k++]; + eccblkwid = eccblocks[k]; + k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9); + if (t <= k) + break; + } while (version < 40); + + // FIXME - insure that it fits insted of being truncated + width = 17 + 4 * version; + + // allocate, clear and setup data structures + v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2; + for (t = 0; t < v; t++) + eccbuf[t] = 0; + strinbuf = instring.slice(0); + + for (t = 0; t < width * width; t++) + qrframe[t] = 0; + + for (t = 0; t < (width * (width + 1) + 1) / 2; t++) + framask[t] = 0; + + // insert finders - black to frame, white to mask + for (t = 0; t < 3; t++) { + k = 0; + y = 0; + if (t == 1) + k = (width - 7); + if (t == 2) + y = (width - 7); + qrframe[(y + 3) + width * (k + 3)] = 1; + for (x = 0; x < 6; x++) { + qrframe[(y + x) + width * k] = 1; + qrframe[y + width * (k + x + 1)] = 1; + qrframe[(y + 6) + width * (k + x)] = 1; + qrframe[(y + x + 1) + width * (k + 6)] = 1; + } + for (x = 1; x < 5; x++) { + setmask(y + x, k + 1); + setmask(y + 1, k + x + 1); + setmask(y + 5, k + x); + setmask(y + x + 1, k + 5); + } + for (x = 2; x < 4; x++) { + qrframe[(y + x) + width * (k + 2)] = 1; + qrframe[(y + 2) + width * (k + x + 1)] = 1; + qrframe[(y + 4) + width * (k + x)] = 1; + qrframe[(y + x + 1) + width * (k + 4)] = 1; + } + } + + // alignment blocks + if (version > 1) { + t = adelta[version]; + y = width - 7; + for (; ;) { + x = width - 7; + while (x > t - 3) { + putalign(x, y); + if (x < t) + break; + x -= t; + } + if (y <= t + 9) + break; + y -= t; + putalign(6, y); + putalign(y, 6); + } + } + + // single black + qrframe[8 + width * (width - 8)] = 1; + + // timing gap - mask only + for (y = 0; y < 7; y++) { + setmask(7, y); + setmask(width - 8, y); + setmask(7, y + width - 7); + } + for (x = 0; x < 8; x++) { + setmask(x, 7); + setmask(x + width - 8, 7); + setmask(x, width - 8); + } + + // reserve mask-format area + for (x = 0; x < 9; x++) + setmask(x, 8); + for (x = 0; x < 8; x++) { + setmask(x + width - 8, 8); + setmask(8, x); + } + for (y = 0; y < 7; y++) + setmask(8, y + width - 7); + + // timing row/col + for (x = 0; x < width - 14; x++) + if (x & 1) { + setmask(8 + x, 6); + setmask(6, 8 + x); + } + else { + qrframe[(8 + x) + width * 6] = 1; + qrframe[6 + width * (8 + x)] = 1; + } + + // version block + if (version > 6) { + t = vpat[version - 7]; + k = 17; + for (x = 0; x < 6; x++) + for (y = 0; y < 3; y++ , k--) + if (1 & (k > 11 ? version >> (k - 12) : t >> k)) { + qrframe[(5 - x) + width * (2 - y + width - 11)] = 1; + qrframe[(2 - y + width - 11) + width * (5 - x)] = 1; + } + else { + setmask(5 - x, 2 - y + width - 11); + setmask(2 - y + width - 11, 5 - x); + } + } + + // sync mask bits - only set above for white spaces, so add in black bits + for (y = 0; y < width; y++) + for (x = 0; x <= y; x++) + if (qrframe[x + width * y]) + setmask(x, y); + + // convert string to bitstream + // 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported) + v = strinbuf.length; + + // string to array + for (i = 0; i < v; i++) + eccbuf[i] = strinbuf.charCodeAt(i); + strinbuf = eccbuf.slice(0); + + // calculate max string length + x = datablkw * (neccblk1 + neccblk2) + neccblk2; + if (v >= x - 2) { + v = x - 2; + if (version > 9) + v--; + } + + // shift and repack to insert length prefix + i = v; + if (version > 9) { + strinbuf[i + 2] = 0; + strinbuf[i + 3] = 0; + while (i--) { + t = strinbuf[i]; + strinbuf[i + 3] |= 255 & (t << 4); + strinbuf[i + 2] = t >> 4; + } + strinbuf[2] |= 255 & (v << 4); + strinbuf[1] = v >> 4; + strinbuf[0] = 0x40 | (v >> 12); + } + else { + strinbuf[i + 1] = 0; + strinbuf[i + 2] = 0; + while (i--) { + t = strinbuf[i]; + strinbuf[i + 2] |= 255 & (t << 4); + strinbuf[i + 1] = t >> 4; + } + strinbuf[1] |= 255 & (v << 4); + strinbuf[0] = 0x40 | (v >> 4); + } + // fill to end with pad pattern + i = v + 3 - (version < 10); + while (i < x) { + strinbuf[i++] = 0xec; + // buffer has room if (i == x) break; + strinbuf[i++] = 0x11; + } + + // calculate and append ECC + + // calculate generator polynomial + genpoly[0] = 1; + for (i = 0; i < eccblkwid; i++) { + genpoly[i + 1] = 1; + for (j = i; j > 0; j--) + genpoly[j] = genpoly[j] + ? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1]; + genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)]; + } + for (i = 0; i <= eccblkwid; i++) + genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step + + // append ecc to data buffer + k = x; + y = 0; + for (i = 0; i < neccblk1; i++) { + appendrs(y, datablkw, k, eccblkwid); + y += datablkw; + k += eccblkwid; + } + for (i = 0; i < neccblk2; i++) { + appendrs(y, datablkw + 1, k, eccblkwid); + y += datablkw + 1; + k += eccblkwid; + } + // interleave blocks + y = 0; + for (i = 0; i < datablkw; i++) { + for (j = 0; j < neccblk1; j++) + eccbuf[y++] = strinbuf[i + j * datablkw]; + for (j = 0; j < neccblk2; j++) + eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))]; + } + for (j = 0; j < neccblk2; j++) + eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))]; + for (i = 0; i < eccblkwid; i++) + for (j = 0; j < neccblk1 + neccblk2; j++) + eccbuf[y++] = strinbuf[x + i + j * eccblkwid]; + strinbuf = eccbuf; + + // pack bits into frame avoiding masked area. + x = y = width - 1; + k = v = 1; // up, minus + /* inteleaved data and ecc codes */ + m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2; + for (i = 0; i < m; i++) { + t = strinbuf[i]; + for (j = 0; j < 8; j++ , t <<= 1) { + if (0x80 & t) + qrframe[x + width * y] = 1; + do { // find next fill position + if (v) + x--; + else { + x++; + if (k) { + if (y != 0) + y--; + else { + x -= 2; + k = !k; + if (x == 6) { + x--; + y = 9; + } + } + } + else { + if (y != width - 1) + y++; + else { + x -= 2; + k = !k; + if (x == 6) { + x--; + y -= 8; + } + } + } + } + v = !v; + } while (ismasked(x, y)); + } + } + + // save pre-mask copy of frame + strinbuf = qrframe.slice(0); + t = 0; // best + y = 30000; // demerit + // for instead of while since in original arduino code + // if an early mask was "good enough" it wouldn't try for a better one + // since they get more complex and take longer. + for (k = 0; k < 8; k++) { + applymask(k); // returns black-white imbalance + x = badcheck(); + if (x < y) { // current mask better than previous best? + y = x; + t = k; + } + if (t == 7) + break; // don't increment i to a void redoing mask + qrframe = strinbuf.slice(0); // reset for next pass + } + if (t != k) // redo best mask - none good enough, last wasn't t + applymask(t); + + // add in final mask/ecclevel bytes + y = fmtword[t + ((ecclevel - 1) << 3)]; + // low byte + for (k = 0; k < 8; k++ , y >>= 1) + if (y & 1) { + qrframe[(width - 1 - k) + width * 8] = 1; + if (k < 6) + qrframe[8 + width * k] = 1; + else + qrframe[8 + width * (k + 1)] = 1; + } + // high byte + for (k = 0; k < 7; k++ , y >>= 1) + if (y & 1) { + qrframe[8 + width * (width - 7 + k)] = 1; + if (k) + qrframe[(6 - k) + width * 8] = 1; + else + qrframe[7 + width * 8] = 1; + } + return qrframe; + } + + + + + var _canvas = null; + + var api = { + + get ecclevel() { + return ecclevel; + }, + + set ecclevel(val) { + ecclevel = val; + }, + + get size() { + return _size; + }, + + set size(val) { + _size = val + }, + + get canvas() { + return _canvas; + }, + + set canvas(el) { + _canvas = el; + }, + + getFrame: function (string) { + return genframe(string); + }, + //这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文 + utf16to8: function (str) { + var out, i, len, c; + + out = ""; + len = str.length; + for (i = 0; i < len; i++) { + c = str.charCodeAt(i); + if ((c >= 0x0001) && (c <= 0x007F)) { + out += str.charAt(i); + } else if (c > 0x07FF) { + out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); + out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); + out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); + } else { + out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); + out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); + } + } + return out; + }, + /** + * 新增$this参数，传入组件的this,兼容在组件中生成 + * @param bg 目前只能设置颜色值 + */ + draw: function (str, ctx, startX, startY, cavW, cavH, bg, color, $this, ecc) { + var that = this; + ecclevel = ecc || ecclevel; + if (!ctx) { + console.warn('No canvas provided to draw QR code in!') + return; + } + var size = Math.min(cavW, cavH); + str = that.utf16to8(str);//增加中文显示 + + var frame = that.getFrame(str); + var px = size / width; + if (bg) { + ctx.fillStyle = bg; + ctx.fillRect(startX, startY, cavW, cavW); + } + ctx.fillStyle = color || 'black'; + for (var i = 0; i < width; i++) { + for (var j = 0; j < width; j++) { + if (frame[j * width + i]) { + ctx.fillRect(startX + px * i, startY + px * j, px, px); + } + } + } + } + } + module.exports = { api } + // exports.draw = api; + +})(); \ No newline at end of file diff --git a/packageB/components/painter/lib/util.js b/packageB/components/painter/lib/util.js new file mode 100644 index 0000000..292df2a --- /dev/null +++ b/packageB/components/painter/lib/util.js @@ -0,0 +1,68 @@ + +function isValidUrl(url) { + return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url); +} + +/** + * 深度对比两个对象是否一致 + * from: https://github.com/epoberezkin/fast-deep-equal + * @param {Object} a 对象a + * @param {Object} b 对象b + * @return {Boolean} 是否相同 + */ +/* eslint-disable */ +function equal(a, b) { + if (a === b) return true; + + if (a && b && typeof a == 'object' && typeof b == 'object') { + var arrA = Array.isArray(a) + , arrB = Array.isArray(b) + , i + , length + , key; + + if (arrA && arrB) { + length = a.length; + if (length != b.length) return false; + for (i = length; i-- !== 0;) + if (!equal(a[i], b[i])) return false; + return true; + } + + if (arrA != arrB) return false; + + var dateA = a instanceof Date + , dateB = b instanceof Date; + if (dateA != dateB) return false; + if (dateA && dateB) return a.getTime() == b.getTime(); + + var regexpA = a instanceof RegExp + , regexpB = b instanceof RegExp; + if (regexpA != regexpB) return false; + if (regexpA && regexpB) return a.toString() == b.toString(); + + var keys = Object.keys(a); + length = keys.length; + + if (length !== Object.keys(b).length) + return false; + + for (i = length; i-- !== 0;) + if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; + + for (i = length; i-- !== 0;) { + key = keys[i]; + if (!equal(a[key], b[key])) return false; + } + + return true; + } + + return a!==a && b!==b; +} + +module.exports = { + isValidUrl, + equal +}; + diff --git a/packageB/components/painter/lib/wx-canvas.js b/packageB/components/painter/lib/wx-canvas.js new file mode 100644 index 0000000..4711390 --- /dev/null +++ b/packageB/components/painter/lib/wx-canvas.js @@ -0,0 +1,611 @@ +// @ts-check +export default class WxCanvas { + ctx; + type; + canvasId; + canvasNode; + stepList = []; + canvasPrototype = {}; + + constructor(type, ctx, canvasId, isNew, canvasNode) { + this.ctx = ctx; + this.canvasId = canvasId; + this.type = type; + if (isNew) { + this.canvasNode = canvasNode || {}; + } + } + + set width(w) { + if (this.canvasNode) this.canvasNode.width = w; + } + + get width() { + if (this.canvasNode) return this.canvasNode.width; + return 0; + } + + set height(h) { + if (this.canvasNode) this.canvasNode.height = h; + } + + get height() { + if (this.canvasNode) return this.canvasNode.height; + return 0; + } + + set lineWidth(args) { + this.canvasPrototype.lineWidth = args; + this.stepList.push({ + action: "lineWidth", + args, + actionType: "set", + }); + } + + get lineWidth() { + return this.canvasPrototype.lineWidth; + } + + set lineCap(args) { + this.canvasPrototype.lineCap = args; + this.stepList.push({ + action: "lineCap", + args, + actionType: "set", + }); + } + + get lineCap() { + return this.canvasPrototype.lineCap; + } + + set lineJoin(args) { + this.canvasPrototype.lineJoin = args; + this.stepList.push({ + action: "lineJoin", + args, + actionType: "set", + }); + } + + get lineJoin() { + return this.canvasPrototype.lineJoin; + } + + set miterLimit(args) { + this.canvasPrototype.miterLimit = args; + this.stepList.push({ + action: "miterLimit", + args, + actionType: "set", + }); + } + + get miterLimit() { + return this.canvasPrototype.miterLimit; + } + + set lineDashOffset(args) { + this.canvasPrototype.lineDashOffset = args; + this.stepList.push({ + action: "lineDashOffset", + args, + actionType: "set", + }); + } + + get lineDashOffset() { + return this.canvasPrototype.lineDashOffset; + } + + set font(args) { + this.canvasPrototype.font = args; + this.ctx.font = args; + this.stepList.push({ + action: "font", + args, + actionType: "set", + }); + } + + get font() { + return this.canvasPrototype.font; + } + + set textAlign(args) { + this.canvasPrototype.textAlign = args; + this.stepList.push({ + action: "textAlign", + args, + actionType: "set", + }); + } + + get textAlign() { + return this.canvasPrototype.textAlign; + } + + set textBaseline(args) { + this.canvasPrototype.textBaseline = args; + this.stepList.push({ + action: "textBaseline", + args, + actionType: "set", + }); + } + + get textBaseline() { + return this.canvasPrototype.textBaseline; + } + + set fillStyle(args) { + this.canvasPrototype.fillStyle = args; + this.stepList.push({ + action: "fillStyle", + args, + actionType: "set", + }); + } + + get fillStyle() { + return this.canvasPrototype.fillStyle; + } + + set strokeStyle(args) { + this.canvasPrototype.strokeStyle = args; + this.stepList.push({ + action: "strokeStyle", + args, + actionType: "set", + }); + } + + get strokeStyle() { + return this.canvasPrototype.strokeStyle; + } + + set globalAlpha(args) { + this.canvasPrototype.globalAlpha = args; + this.stepList.push({ + action: "globalAlpha", + args, + actionType: "set", + }); + } + + get globalAlpha() { + return this.canvasPrototype.globalAlpha; + } + + set globalCompositeOperation(args) { + this.canvasPrototype.globalCompositeOperation = args; + this.stepList.push({ + action: "globalCompositeOperation", + args, + actionType: "set", + }); + } + + get globalCompositeOperation() { + return this.canvasPrototype.globalCompositeOperation; + } + + set shadowColor(args) { + this.canvasPrototype.shadowColor = args; + this.stepList.push({ + action: "shadowColor", + args, + actionType: "set", + }); + } + + get shadowColor() { + return this.canvasPrototype.shadowColor; + } + + set shadowOffsetX(args) { + this.canvasPrototype.shadowOffsetX = args; + this.stepList.push({ + action: "shadowOffsetX", + args, + actionType: "set", + }); + } + + get shadowOffsetX() { + return this.canvasPrototype.shadowOffsetX; + } + + set shadowOffsetY(args) { + this.canvasPrototype.shadowOffsetY = args; + this.stepList.push({ + action: "shadowOffsetY", + args, + actionType: "set", + }); + } + + get shadowOffsetY() { + return this.canvasPrototype.shadowOffsetY; + } + + set shadowBlur(args) { + this.canvasPrototype.shadowBlur = args; + this.stepList.push({ + action: "shadowBlur", + args, + actionType: "set", + }); + } + + get shadowBlur() { + return this.canvasPrototype.shadowBlur; + } + + save() { + this.stepList.push({ + action: "save", + args: null, + actionType: "func", + }); + } + + restore() { + this.stepList.push({ + action: "restore", + args: null, + actionType: "func", + }); + } + + setLineDash(...args) { + this.canvasPrototype.lineDash = args; + this.stepList.push({ + action: "setLineDash", + args, + actionType: "func", + }); + } + + moveTo(...args) { + this.stepList.push({ + action: "moveTo", + args, + actionType: "func", + }); + } + + closePath() { + this.stepList.push({ + action: "closePath", + args: null, + actionType: "func", + }); + } + + lineTo(...args) { + this.stepList.push({ + action: "lineTo", + args, + actionType: "func", + }); + } + + quadraticCurveTo(...args) { + this.stepList.push({ + action: "quadraticCurveTo", + args, + actionType: "func", + }); + } + + bezierCurveTo(...args) { + this.stepList.push({ + action: "bezierCurveTo", + args, + actionType: "func", + }); + } + + arcTo(...args) { + this.stepList.push({ + action: "arcTo", + args, + actionType: "func", + }); + } + + arc(...args) { + this.stepList.push({ + action: "arc", + args, + actionType: "func", + }); + } + + rect(...args) { + this.stepList.push({ + action: "rect", + args, + actionType: "func", + }); + } + + scale(...args) { + this.stepList.push({ + action: "scale", + args, + actionType: "func", + }); + } + + rotate(...args) { + this.stepList.push({ + action: "rotate", + args, + actionType: "func", + }); + } + + translate(...args) { + this.stepList.push({ + action: "translate", + args, + actionType: "func", + }); + } + + transform(...args) { + this.stepList.push({ + action: "transform", + args, + actionType: "func", + }); + } + + setTransform(...args) { + this.stepList.push({ + action: "setTransform", + args, + actionType: "func", + }); + } + + clearRect(...args) { + this.stepList.push({ + action: "clearRect", + args, + actionType: "func", + }); + } + + fillRect(...args) { + this.stepList.push({ + action: "fillRect", + args, + actionType: "func", + }); + } + + strokeRect(...args) { + this.stepList.push({ + action: "strokeRect", + args, + actionType: "func", + }); + } + + fillText(...args) { + this.stepList.push({ + action: "fillText", + args, + actionType: "func", + }); + } + + strokeText(...args) { + this.stepList.push({ + action: "strokeText", + args, + actionType: "func", + }); + } + + beginPath() { + this.stepList.push({ + action: "beginPath", + args: null, + actionType: "func", + }); + } + + fill() { + this.stepList.push({ + action: "fill", + args: null, + actionType: "func", + }); + } + + stroke() { + this.stepList.push({ + action: "stroke", + args: null, + actionType: "func", + }); + } + + drawFocusIfNeeded(...args) { + this.stepList.push({ + action: "drawFocusIfNeeded", + args, + actionType: "func", + }); + } + + clip() { + this.stepList.push({ + action: "clip", + args: null, + actionType: "func", + }); + } + + isPointInPath(...args) { + this.stepList.push({ + action: "isPointInPath", + args, + actionType: "func", + }); + } + + drawImage(...args) { + this.stepList.push({ + action: "drawImage", + args, + actionType: "func", + }); + } + + addHitRegion(...args) { + this.stepList.push({ + action: "addHitRegion", + args, + actionType: "func", + }); + } + + removeHitRegion(...args) { + this.stepList.push({ + action: "removeHitRegion", + args, + actionType: "func", + }); + } + + clearHitRegions(...args) { + this.stepList.push({ + action: "clearHitRegions", + args, + actionType: "func", + }); + } + + putImageData(...args) { + this.stepList.push({ + action: "putImageData", + args, + actionType: "func", + }); + } + + getLineDash() { + return this.canvasPrototype.lineDash; + } + + createLinearGradient(...args) { + return this.ctx.createLinearGradient(...args); + } + + createRadialGradient(...args) { + if (this.type === "2d") { + return this.ctx.createRadialGradient(...args); + } else { + return this.ctx.createCircularGradient(...args.slice(3, 6)); + } + } + + createPattern(...args) { + return this.ctx.createPattern(...args); + } + + measureText(...args) { + return this.ctx.measureText(...args); + } + + createImageData(...args) { + return this.ctx.createImageData(...args); + } + + getImageData(...args) { + return this.ctx.getImageData(...args); + } + + async draw(reserve, func) { + const realstepList = this.stepList.slice(); + this.stepList.length = 0; + if (this.type === "mina") { + if (realstepList.length > 0) { + for (const step of realstepList) { + this.implementMinaStep(step); + } + this.ctx.draw(reserve, func); + realstepList.length = 0; + } + } else if (this.type === "2d") { + if (!reserve) { + this.ctx.clearRect(0, 0, this.canvasNode.width, this.canvasNode.height); + } + if (realstepList.length > 0) { + for (const step of realstepList) { + await this.implement2DStep(step); + } + realstepList.length = 0; + } + if (func) { + func(); + } + } + realstepList.length = 0; + } + + implementMinaStep(step) { + switch (step.action) { + case "textAlign": { + this.ctx.setTextAlign(step.args); + break; + } + case "textBaseline": { + this.ctx.setTextBaseline(step.args); + break; + } + default: { + if (step.actionType === "set") { + this.ctx[step.action] = step.args; + } else if (step.actionType === "func") { + if (step.args) { + this.ctx[step.action](...step.args); + } else { + this.ctx[step.action](); + } + } + break; + } + } + } + + implement2DStep(step) { + return new Promise((resolve) => { + if (step.action === "drawImage") { + const img = this.canvasNode.createImage(); + img.src = step.args[0]; + img.onload = () => { + this.ctx.drawImage(img, ...step.args.slice(1)); + resolve(); + }; + } else { + if (step.actionType === "set") { + this.ctx[step.action] = step.args; + } else if (step.actionType === "func") { + if (step.args) { + this.ctx[step.action](...step.args); + } else { + this.ctx[step.action](); + } + } + resolve(); + } + }); + } +} diff --git a/packageB/components/painter/painter.js b/packageB/components/painter/painter.js new file mode 100644 index 0000000..2c00c0b --- /dev/null +++ b/packageB/components/painter/painter.js @@ -0,0 +1,886 @@ +import Pen from './lib/pen'; +import Downloader from './lib/downloader'; +import WxCanvas from './lib/wx-canvas'; + +const util = require('./lib/util'); + +const downloader = new Downloader(); + +// 最大尝试的绘制次数 +const MAX_PAINT_COUNT = 5; +const ACTION_DEFAULT_SIZE = 24; +const ACTION_OFFSET = '2rpx'; +Component({ + canvasWidthInPx: 0, + canvasHeightInPx: 0, + canvasNode: null, + paintCount: 0, + currentPalette: {}, + movingCache: {}, + outterDisabled: false, + isDisabled: false, + needClear: false, + /** + * 组件的属性列表 + */ + properties: { + use2D: { + type: Boolean, + }, + customStyle: { + type: String, + }, + // 运行自定义选择框和删除缩放按钮 + customActionStyle: { + type: Object, + }, + palette: { + type: Object, + observer: function (newVal, oldVal) { + if (this.isNeedRefresh(newVal, oldVal)) { + this.paintCount = 0; + this.startPaint(); + } + }, + }, + dancePalette: { + type: Object, + observer: function (newVal, oldVal) { + if (!this.isEmpty(newVal) && !this.properties.use2D) { + this.initDancePalette(newVal); + } + }, + }, + // 缩放比，会在传入的 palette 中统一乘以该缩放比 + scaleRatio: { + type: Number, + value: 1 + }, + widthPixels: { + type: Number, + value: 0 + }, + // 启用脏检查，默认 false + dirty: { + type: Boolean, + value: false, + }, + LRU: { + type: Boolean, + value: true, + }, + action: { + type: Object, + observer: function (newVal, oldVal) { + if (newVal && !this.isEmpty(newVal) && !this.properties.use2D) { + this.doAction(newVal, (callbackInfo) => { + this.movingCache = callbackInfo + }, false, true) + } + }, + }, + disableAction: { + type: Boolean, + observer: function (isDisabled) { + this.outterDisabled = isDisabled + this.isDisabled = isDisabled + } + }, + clearActionBox: { + type: Boolean, + observer: function (needClear) { + if (needClear && !this.needClear) { + if (this.frontContext) { + setTimeout(() => { + this.frontContext.draw(); + }, 100); + this.touchedView = {}; + this.prevFindedIndex = this.findedIndex + this.findedIndex = -1; + } + } + this.needClear = needClear + } + }, + }, + + data: { + picURL: '', + showCanvas: true, + painterStyle: '', + }, + + methods: { + + /** + * 判断一个 object 是否为 空 + * @param {object} object + */ + isEmpty(object) { + for (const i in object) { + return false; + } + return true; + }, + + isNeedRefresh(newVal, oldVal) { + if (!newVal || this.isEmpty(newVal) || (this.data.dirty && util.equal(newVal, oldVal))) { + return false; + } + return true; + }, + + getBox(rect, type) { + const boxArea = { + type: 'rect', + css: { + height: `${rect.bottom - rect.top}px`, + width: `${rect.right - rect.left}px`, + left: `${rect.left}px`, + top: `${rect.top}px`, + borderWidth: '4rpx', + borderColor: '#1A7AF8', + color: 'transparent' + } + } + if (type === 'text') { + boxArea.css = Object.assign({}, boxArea.css, { + borderStyle: 'dashed' + }) + } + if (this.properties.customActionStyle && this.properties.customActionStyle.border) { + boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border) + } + Object.assign(boxArea, { + id: 'box' + }) + return boxArea + }, + + getScaleIcon(rect, type) { + let scaleArea = {} + const { + customActionStyle + } = this.properties + if (customActionStyle && customActionStyle.scale) { + scaleArea = { + type: 'image', + url: type === 'text' ? customActionStyle.scale.textIcon : customActionStyle.scale.imageIcon, + css: { + height: `${2 * ACTION_DEFAULT_SIZE}rpx`, + width: `${2 * ACTION_DEFAULT_SIZE}rpx`, + borderRadius: `${ACTION_DEFAULT_SIZE}rpx`, + } + } + } else { + scaleArea = { + type: 'rect', + css: { + height: `${2 * ACTION_DEFAULT_SIZE}rpx`, + width: `${2 * ACTION_DEFAULT_SIZE}rpx`, + borderRadius: `${ACTION_DEFAULT_SIZE}rpx`, + color: '#0000ff', + } + } + } + scaleArea.css = Object.assign({}, scaleArea.css, { + align: 'center', + left: `${rect.right + ACTION_OFFSET.toPx()}px`, + top: type === 'text' ? `${rect.top - ACTION_OFFSET.toPx() - scaleArea.css.height.toPx() / 2}px` : `${rect.bottom - ACTION_OFFSET.toPx() - scaleArea.css.height.toPx() / 2}px` + }) + Object.assign(scaleArea, { + id: 'scale' + }) + return scaleArea + }, + + getDeleteIcon(rect) { + let deleteArea = {} + const { + customActionStyle + } = this.properties + if (customActionStyle && customActionStyle.scale) { + deleteArea = { + type: 'image', + url: customActionStyle.delete.icon, + css: { + height: `${2 * ACTION_DEFAULT_SIZE}rpx`, + width: `${2 * ACTION_DEFAULT_SIZE}rpx`, + borderRadius: `${ACTION_DEFAULT_SIZE}rpx`, + } + } + } else { + deleteArea = { + type: 'rect', + css: { + height: `${2 * ACTION_DEFAULT_SIZE}rpx`, + width: `${2 * ACTION_DEFAULT_SIZE}rpx`, + borderRadius: `${ACTION_DEFAULT_SIZE}rpx`, + color: '#0000ff', + } + } + } + deleteArea.css = Object.assign({}, deleteArea.css, { + align: 'center', + left: `${rect.left - ACTION_OFFSET.toPx()}px`, + top: `${rect.top - ACTION_OFFSET.toPx() - deleteArea.css.height.toPx() / 2}px` + }) + Object.assign(deleteArea, { + id: 'delete' + }) + return deleteArea + }, + + doAction(action, callback, isMoving, overwrite) { + if (this.properties.use2D) { + return; + } + let newVal = null + if (action) { + newVal = action.view + } + if (newVal && newVal.id && this.touchedView.id !== newVal.id) { + // 带 id 的动作给撤回时使用，不带 id，表示对当前选中对象进行操作 + const { + views + } = this.currentPalette; + for (let i = 0; i < views.length; i++) { + if (views[i].id === newVal.id) { + // 跨层回撤，需要重新构建三层关系 + this.touchedView = views[i]; + this.findedIndex = i; + this.sliceLayers(); + break + } + } + } + + const doView = this.touchedView + + if (!doView || this.isEmpty(doView)) { + return + } + if (newVal && newVal.css) { + if (overwrite) { + doView.css = newVal.css + } else if (Array.isArray(doView.css) && Array.isArray(newVal.css)) { + doView.css = Object.assign({}, ...doView.css, ...newVal.css) + } else if (Array.isArray(doView.css)) { + doView.css = Object.assign({}, ...doView.css, newVal.css) + } else if (Array.isArray(newVal.css)) { + doView.css = Object.assign({}, doView.css, ...newVal.css) + } else { + doView.css = Object.assign({}, doView.css, newVal.css) + } + } + if (newVal && newVal.rect) { + doView.rect = newVal.rect; + } + if (newVal && newVal.url && doView.url && newVal.url !== doView.url) { + downloader.download(newVal.url, this.properties.LRU).then((path) => { + if (newVal.url.startsWith('https')) { + doView.originUrl = newVal.url + } + doView.url = path; + wx.getImageInfo({ + src: path, + success: (res) => { + doView.sHeight = res.height + doView.sWidth = res.width + this.reDraw(doView, callback, isMoving) + }, + fail: () => { + this.reDraw(doView, callback, isMoving) + } + }) + }).catch((error) => { + // 未下载成功，直接绘制 + console.error(error) + this.reDraw(doView, callback, isMoving) + }) + } else { + (newVal && newVal.text && doView.text && newVal.text !== doView.text) && (doView.text = newVal.text); + (newVal && newVal.content && doView.content && newVal.content !== doView.content) && (doView.content = newVal.content); + this.reDraw(doView, callback, isMoving) + } + }, + + reDraw(doView, callback, isMoving) { + const draw = { + width: this.currentPalette.width, + height: this.currentPalette.height, + views: this.isEmpty(doView) ? [] : [doView] + } + const pen = new Pen(this.globalContext, draw); + + if (isMoving && doView.type === 'text') { + pen.paint((callbackInfo) => { + callback && callback(callbackInfo); + this.triggerEvent('viewUpdate', { + view: this.touchedView + }); + }, true, this.movingCache); + } else { + // 某些机型（华为 P20）非移动和缩放场景下，只绘制一遍会偶然性图片绘制失败 + // if (!isMoving && !this.isScale) { + // pen.paint() + // } + pen.paint((callbackInfo) => { + callback && callback(callbackInfo); + this.triggerEvent('viewUpdate', { + view: this.touchedView + }); + }) + } + + const { + rect, + css, + type + } = doView + + this.block = { + width: this.currentPalette.width, + height: this.currentPalette.height, + views: this.isEmpty(doView) ? [] : [this.getBox(rect, doView.type)] + } + if (css && css.scalable) { + this.block.views.push(this.getScaleIcon(rect, type)) + } + if (css && css.deletable) { + this.block.views.push(this.getDeleteIcon(rect)) + } + const topBlock = new Pen(this.frontContext, this.block) + topBlock.paint(); + }, + + isInView(x, y, rect) { + return (x > rect.left && + y > rect.top && + x < rect.right && + y < rect.bottom + ) + }, + + isInDelete(x, y) { + for (const view of this.block.views) { + if (view.id === 'delete') { + return (x > view.rect.left && + y > view.rect.top && + x < view.rect.right && + y < view.rect.bottom) + } + } + return false + }, + + isInScale(x, y) { + for (const view of this.block.views) { + if (view.id === 'scale') { + return (x > view.rect.left && + y > view.rect.top && + x < view.rect.right && + y < view.rect.bottom) + } + } + return false + }, + + touchedView: {}, + findedIndex: -1, + onClick() { + const x = this.startX + const y = this.startY + const totalLayerCount = this.currentPalette.views.length + let canBeTouched = [] + let isDelete = false + let deleteIndex = -1 + for (let i = totalLayerCount - 1; i >= 0; i--) { + const view = this.currentPalette.views[i] + const { + rect + } = view + if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isInDelete(x, y, rect)) { + canBeTouched.length = 0 + deleteIndex = i + isDelete = true + break + } + if (this.isInView(x, y, rect)) { + canBeTouched.push({ + view, + index: i + }) + } + } + this.touchedView = {} + if (canBeTouched.length === 0) { + this.findedIndex = -1 + } else { + let i = 0 + const touchAble = canBeTouched.filter(item => Boolean(item.view.id)) + if (touchAble.length === 0) { + this.findedIndex = canBeTouched[0].index + } else { + for (i = 0; i < touchAble.length; i++) { + if (this.findedIndex === touchAble[i].index) { + i++ + break + } + } + if (i === touchAble.length) { + i = 0 + } + this.touchedView = touchAble[i].view + this.findedIndex = touchAble[i].index + this.triggerEvent('viewClicked', { + view: this.touchedView + }) + } + } + if (this.findedIndex < 0 || (this.touchedView && !this.touchedView.id)) { + // 证明点击了背景 或无法移动的view + this.frontContext.draw(); + if (isDelete) { + this.triggerEvent('touchEnd', { + view: this.currentPalette.views[deleteIndex], + index: deleteIndex, + type: 'delete' + }) + this.doAction() + } else if (this.findedIndex < 0) { + this.triggerEvent('viewClicked', {}) + } + this.findedIndex = -1 + this.prevFindedIndex = -1 + } else if (this.touchedView && this.touchedView.id) { + this.sliceLayers(); + } + }, + + sliceLayers() { + const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex) + const topLayers = this.currentPalette.views.slice(this.findedIndex + 1) + const bottomDraw = { + width: this.currentPalette.width, + height: this.currentPalette.height, + background: this.currentPalette.background, + views: bottomLayers + } + const topDraw = { + width: this.currentPalette.width, + height: this.currentPalette.height, + views: topLayers + } + if (this.prevFindedIndex < this.findedIndex) { + new Pen(this.bottomContext, bottomDraw).paint(); + this.doAction(null, (callbackInfo) => { + this.movingCache = callbackInfo + }) + new Pen(this.topContext, topDraw).paint(); + } else { + new Pen(this.topContext, topDraw).paint(); + this.doAction(null, (callbackInfo) => { + this.movingCache = callbackInfo + }) + new Pen(this.bottomContext, bottomDraw).paint(); + } + this.prevFindedIndex = this.findedIndex + }, + + startX: 0, + startY: 0, + startH: 0, + startW: 0, + isScale: false, + startTimeStamp: 0, + onTouchStart(event) { + if (this.isDisabled) { + return + } + const { + x, + y + } = event.touches[0] + this.startX = x + this.startY = y + this.startTimeStamp = new Date().getTime() + if (this.touchedView && !this.isEmpty(this.touchedView)) { + const { + rect + } = this.touchedView + if (this.isInScale(x, y, rect)) { + this.isScale = true + this.movingCache = {} + this.startH = rect.bottom - rect.top + this.startW = rect.right - rect.left + } else { + this.isScale = false + } + } else { + this.isScale = false + } + }, + + onTouchEnd(e) { + if (this.isDisabled) { + return + } + const current = new Date().getTime() + if ((current - this.startTimeStamp) <= 500 && !this.hasMove) { + !this.isScale && this.onClick(e) + } else if (this.touchedView && !this.isEmpty(this.touchedView)) { + this.triggerEvent('touchEnd', { + view: this.touchedView, + }) + } + this.hasMove = false + }, + + onTouchCancel(e) { + if (this.isDisabled) { + return + } + this.onTouchEnd(e) + }, + + hasMove: false, + onTouchMove(event) { + if (this.isDisabled) { + return + } + this.hasMove = true + if (!this.touchedView || (this.touchedView && !this.touchedView.id)) { + return + } + const { + x, + y + } = event.touches[0] + const offsetX = x - this.startX + const offsetY = y - this.startY + const { + rect, + type + } = this.touchedView + let css = {} + if (this.isScale) { + const newW = this.startW + offsetX > 1 ? this.startW + offsetX : 1 + if (this.touchedView.css && this.touchedView.css.minWidth) { + if (newW < this.touchedView.css.minWidth.toPx()) { + return + } + } + if (this.touchedView.rect && this.touchedView.rect.minWidth) { + if (newW < this.touchedView.rect.minWidth) { + return + } + } + const newH = this.startH + offsetY > 1 ? this.startH + offsetY : 1 + css = { + width: `${newW}px`, + } + if (type !== 'text') { + if (type === 'image') { + css.height = `${(newW) * this.startH / this.startW }px` + } else { + css.height = `${newH}px` + } + } + } else { + this.startX = x + this.startY = y + css = { + left: `${rect.x + offsetX}px`, + top: `${rect.y + offsetY}px`, + right: undefined, + bottom: undefined + } + } + this.doAction({ + view: { + css + } + }, (callbackInfo) => { + if (this.isScale) { + this.movingCache = callbackInfo + } + }, !this.isScale) + }, + + initScreenK() { + if (!(getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth)) { + try { + getApp().systemInfo = wx.getSystemInfoSync(); + } catch (e) { + console.error(`Painter get system info failed, ${JSON.stringify(e)}`); + return; + } + } + this.screenK = 0.5; + if (getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth) { + this.screenK = getApp().systemInfo.screenWidth / 750; + } + setStringPrototype(this.screenK, this.properties.scaleRatio); + }, + + initDancePalette() { + if (this.properties.use2D) { + return; + } + this.isDisabled = true; + this.initScreenK(); + this.downloadImages(this.properties.dancePalette).then(async (palette) => { + this.currentPalette = palette + const { + width, + height + } = palette; + + if (!width || !height) { + console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`); + return; + } + this.setData({ + painterStyle: `width:${width.toPx()}px;height:${height.toPx()}px;`, + }); + this.frontContext || (this.frontContext = await this.getCanvasContext(this.properties.use2D, 'front')); + this.bottomContext || (this.bottomContext = await this.getCanvasContext(this.properties.use2D, 'bottom')); + this.topContext || (this.topContext = await this.getCanvasContext(this.properties.use2D, 'top')); + this.globalContext || (this.globalContext = await this.getCanvasContext(this.properties.use2D, 'k-canvas')); + new Pen(this.bottomContext, palette, this.properties.use2D).paint(() => { + this.isDisabled = false; + this.isDisabled = this.outterDisabled; + this.triggerEvent('didShow'); + }); + this.globalContext.draw(); + this.frontContext.draw(); + this.topContext.draw(); + }); + this.touchedView = {}; + }, + + startPaint() { + this.initScreenK(); + + this.downloadImages(this.properties.palette).then(async (palette) => { + const { + width, + height + } = palette; + + if (!width || !height) { + console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`); + return; + } + + let needScale = false; + // 生成图片时，根据设置的像素值重新绘制 + if (width.toPx() !== this.canvasWidthInPx) { + this.canvasWidthInPx = width.toPx(); + needScale = this.properties.use2D; + } + if (this.properties.widthPixels) { + setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx) + this.canvasWidthInPx = this.properties.widthPixels + } + + if (this.canvasHeightInPx !== height.toPx()) { + this.canvasHeightInPx = height.toPx(); + needScale = needScale || this.properties.use2D; + } + this.setData({ + photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`, + }); + if (!this.photoContext) { + this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo'); + } + if (needScale) { + const scale = getApp().systemInfo.pixelRatio; + this.photoContext.width = this.canvasWidthInPx * scale; + this.photoContext.height = this.canvasHeightInPx * scale; + this.photoContext.scale(scale, scale); + } + new Pen(this.photoContext, palette).paint(() => { + this.saveImgToLocal(); + }); + setStringPrototype(this.screenK, this.properties.scaleRatio); + }); + }, + + downloadImages(palette) { + return new Promise((resolve, reject) => { + let preCount = 0; + let completeCount = 0; + const paletteCopy = JSON.parse(JSON.stringify(palette)); + if (paletteCopy.background) { + preCount++; + downloader.download(paletteCopy.background, this.properties.LRU).then((path) => { + paletteCopy.background = path; + completeCount++; + if (preCount === completeCount) { + resolve(paletteCopy); + } + }, () => { + completeCount++; + if (preCount === completeCount) { + resolve(paletteCopy); + } + }); + } + if (paletteCopy.views) { + for (const view of paletteCopy.views) { + if (view && view.type === 'image' && view.url) { + preCount++; + /* eslint-disable no-loop-func */ + downloader.download(view.url, this.properties.LRU).then((path) => { + view.originUrl = view.url; + view.url = path; + wx.getImageInfo({ + src: path, + success: (res) => { + // 获得一下图片信息，供后续裁减使用 + view.sWidth = res.width; + view.sHeight = res.height; + }, + fail: (error) => { + // 如果图片坏了，则直接置空，防止坑爹的 canvas 画崩溃了 + view.url = ""; + // console.error(`getImageInfo ${view.url} failed, ${JSON.stringify(error)}`); + }, + complete: () => { + completeCount++; + if (preCount === completeCount) { + resolve(paletteCopy); + } + }, + }); + }, () => { + completeCount++; + if (preCount === completeCount) { + resolve(paletteCopy); + } + }); + } + } + } + if (preCount === 0) { + resolve(paletteCopy); + } + }); + }, + + saveImgToLocal() { + const that = this; + setTimeout(() => { + wx.canvasToTempFilePath({ + canvasId: 'photo', + canvas: that.properties.use2D ? that.canvasNode : null, + destWidth: that.canvasWidthInPx * getApp().systemInfo.pixelRatio, + destHeight: that.canvasHeightInPx * getApp().systemInfo.pixelRatio, + success: function (res) { + that.getImageInfo(res.tempFilePath); + }, + fail: function (error) { + console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); + that.triggerEvent('imgErr', { + error: error + }); + }, + }, this); + }, 300); + }, + + + getCanvasContext(use2D, id) { + const that = this; + return new Promise(resolve => { + if (use2D) { + const query = wx.createSelectorQuery().in(that); + const selectId = `#${id}`; + query.select(selectId) + .fields({ node: true, size: true }) + .exec((res) => { + that.canvasNode = res[0].node; + const ctx = that.canvasNode.getContext('2d'); + const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode); + resolve(wxCanvas); + }); + } else { + const temp = wx.createCanvasContext(id, that); + resolve(new WxCanvas('mina', temp, id, true)); + } + }) + }, + + getImageInfo(filePath) { + const that = this; + wx.getImageInfo({ + src: filePath, + success: (infoRes) => { + if (that.paintCount > MAX_PAINT_COUNT) { + const error = `The result is always fault, even we tried ${MAX_PAINT_COUNT} times`; + console.error(error); + that.triggerEvent('imgErr', { + error: error + }); + return; + } + // 比例相符时才证明绘制成功，否则进行强制重绘制 + if (Math.abs((infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) / (infoRes.height * that.canvasHeightInPx)) < 0.01) { + that.triggerEvent('imgOK', { + path: filePath + }); + } else { + that.startPaint(); + } + that.paintCount++; + }, + fail: (error) => { + console.error(`getImageInfo failed, ${JSON.stringify(error)}`); + that.triggerEvent('imgErr', { + error: error + }); + }, + }); + }, + }, +}); + + +function setStringPrototype(screenK, scale) { + /* eslint-disable no-extend-native */ + /** + * 是否支持负数 + * @param {Boolean} minus 是否支持负数 + * @param {Number} baseSize 当设置了 % 号时，设置的基准值 + */ + String.prototype.toPx = function toPx(minus, baseSize) { + if (this === '0') { + return 0 + } + let reg; + if (minus) { + reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px|%)$/g; + } else { + reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px|%)$/g; + } + const results = reg.exec(this); + if (!this || !results) { + console.error(`The size: ${this} is illegal`); + return 0; + } + const unit = results[2]; + const value = parseFloat(this); + + let res = 0; + if (unit === 'rpx') { + res = Math.round(value * (screenK || 0.5) * (scale || 1)); + } else if (unit === 'px') { + res = Math.round(value * (scale || 1)); + } else if (unit === '%') { + res = Math.round(value * baseSize / 100); + } + return res; + }; +} \ No newline at end of file diff --git a/packageB/components/painter/painter.json b/packageB/components/painter/painter.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/packageB/components/painter/painter.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/packageB/components/painter/painter.wxml b/packageB/components/painter/painter.wxml new file mode 100644 index 0000000..bd7a3b6 --- /dev/null +++ b/packageB/components/painter/painter.wxml @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/packageB/images/luckDraw/jiang.png b/packageB/images/luckDraw/jiang.png new file mode 100644 index 0000000..78b4218 --- /dev/null +++ b/packageB/images/luckDraw/jiang.png diff --git a/packageB/pages/luckactivity/index/index.js b/packageB/pages/luckactivity/index/index.js index b9d8f7d..21676ac 100644 --- a/packageB/pages/luckactivity/index/index.js +++ b/packageB/pages/luckactivity/index/index.js @@ -35,6 +35,7 @@ Page({ if(index == 0) { data.is_end = 0; + data.timetype = 1; } else if(index == 1) { data.is_end = 1; }; @@ -82,6 +83,7 @@ Page({ store_id: app.globalData.setting.stoid, user_id: app.globalData.userInfo.user_id, is_end: 0, + timetype:1 }; this.setData({ diff --git a/packageB/pages/luckactivity/index/index.wxml b/packageB/pages/luckactivity/index/index.wxml index 2fbe303..d653fc6 100644 --- a/packageB/pages/luckactivity/index/index.wxml +++ b/packageB/pages/luckactivity/index/index.wxml @@ -20,7 +20,7 @@ - + diff --git a/packageB/pages/luckactivity/index/index.wxss b/packageB/pages/luckactivity/index/index.wxss index ea67f4a..97ae442 100644 --- a/packageB/pages/luckactivity/index/index.wxss +++ b/packageB/pages/luckactivity/index/index.wxss @@ -97,15 +97,15 @@ page { } .icon-zhuanpan { - font-size: 120rpx; + font-size: 140rpx; color: #FF6768; } .img-container { /* background-color: #dedede; */ /* height: 300rpx; */ - width: 160rpx; - height: 160rpx; + width: 140rpx; + height: 140rpx; line-height: 160rpx; text-align: center; } diff --git a/packageB/pages/luckactivity/luckinfo/luckinfo.js b/packageB/pages/luckactivity/luckinfo/luckinfo.js index 7485e86..bd87da6 100644 --- a/packageB/pages/luckactivity/luckinfo/luckinfo.js +++ b/packageB/pages/luckactivity/luckinfo/luckinfo.js @@ -1,10 +1,224 @@ +var util = require("../../../../utils/util.js"); var WxParse = require('../../../../utils/wxParse/wxParse.js'); const app = getApp(); let imghost = app.globalData.setting.imghost; let self = null; +let imgDraw = { + "width": "554px", + "height": "899px", + "background": imghost + "miniapp/images/share_bg.png", + "views": [ + { //0.头像 + "type": "image", + // "url": app.globalData.userInfo.head_pic, + "css": { + "background": "white", + "width": "80px", + "height": "80px", + "top": "24px", + "left": "40px", + "borderRadius": "80px", + } + }, + { //1.昵称 + "type": "text", + // "text": "", + "css": { + "color": "#000000", + "width": "400px", + "top": "25px", + "left": "140px", + "fontSize": "26px", + "maxLines": "1", + } + }, + { //2.强烈推荐 + "type": "text", + "text": "强烈推荐", + "css": { + "color": "#fff", + "background": "#FF6768", + "width": "105px", + "height": "26px", + "lineHeight": "26px", + "top": "70px", + "left": "140px", + "borderRadius": "10px", + "fontSize": "18px", + "textAlign": "center" + + } + }, + { //3.分享标题 + "type": "text", + "text": "", + "css": { + "width": "554px", + "padding": "20px", + "left": "20px", + "top": "160px", + "fontSize": "28px", + "textAlign": "left", + "maxLines": "1", + } + }, + { //4.分享内容 + "type": "text", + // "text": "", + "css": { + "color": "#000000", + "width": "554px", + "padding": "20px", + "left": "20px", + "top": "190px", + "fontSize": "26px", + "textAlign": "center", + "maxLines": "1", + } + }, + { //5.分享图片 + "type": "image", + "url": "/packageB/images/luckDraw/jiang.png", + "css": { + "width": "auto", + "height": "380px", + "top": "220px", + "left": "277px", + "align": "center", + "mode": "aspectFill", + } + }, + { //6 + "type": "image", + "url": "/images/share/s_gou.png", + "css": { + "width": "30px", + "height": "30px", + "top": "630px", + "left": "18px", + "rotate": "0", + "borderRadius": "30px", + } + }, + { //7 + "type": "text", + "text": "正品保障", + "css": { + "color": "red", + "width": "110px", + "top": "630px", + "left": "52px", + "fontSize": "22px", + } + }, + { //8 + "type": "image", + "url": "/images/share/s_gou.png", + "css": { + "width": "30px", + "height": "30px", + "top": "630px", + "left": "208px", + "borderRadius": "30px", + } + }, + { //9 + "type": "text", + "text": "纯实体店", + "css": { + "color": "red", + "width": "129px", + "top": "630px", + "left": "243px", + "fontSize": "22px", + } + }, + { //10 + "type": "image", + "url": "/images/share/s_gou.png", + "css": { + "width": "30px", + "height": "30px", + "top": "630px", + "left": "410px", + "borderRadius": "30px", + } + }, + { //11 + "type": "text", + "text": "官方验证", + "css": { + "color": "red", + "width": "121px", + "top": "630px", + "left": "450px", + "fontSize": "22px", + } + }, + { //12.横线 + "type": "rect", + "css": { + "background": "#f8f8f8", + "width": "554px", + "height": "1px", + "top": "676px", + "left": "0px", + } + }, + { //13 + "type": "text", + "text": "特惠活动时间仅限", + "css": { + "color": "#000000", + "width": "245px", + "top": "730px", + "left": "28px", + "fontSize": "24px", + "textAlign": "left" + } + }, + { //14.时间 + "type": "text", + // "text": "", + "css": { + "width": "377px", + "top": "770px", + "left": "28px", + "fontSize": "24px", + } + }, + { //15 + "type": "text", + "text": "长按识别小程序码有惊喜哦！", + "css": { + "color": "#7c7c7c", + "width": "348px", + "top": "820px", + "left": "27px", + "fontSize": "24px", + } + }, + + { //16.码 + "type": "image", + // "url": "", + "css": { + "width": "150px", + "height": "150px", + "top": "715px", + "left": "380px", + "mode": "scaleToFill" + } + }, + + ] + }; + Page({ data: { + imgDraw: {}, + start: false, list: null, isLoading: false, // 检测是否已经发送请求,防止重复发送请求 @@ -12,6 +226,8 @@ Page({ pageNum: 1, // 当前页数 imghost: imghost, num: 3, + canStart: false, + prizes: [], defaultConfig: { @@ -21,75 +237,111 @@ Page({ // fontColor: '#d64737', // fontSize: '14px' // }, - blocks: [ //背景图 - // { padding: '13px', background: '#d64737', top: '20rpx' } - { - padding: '76rpx', - // background: 'pink', - imgs: [{ - src: imghost + 'miniapp/images/luckDraw/weel.png', - width: '700rpx', - height: '700rpx', - rotate: true, - }] - } - ], - buttons: [ - // { radius: '50px', background: '#d64737' }, - // { radius: '45px', background: '#fff' }, - // { radius: '41px', background: '#f6c66f', pointer: true }, - // { - // radius: '35px', background: '#ffdea0', - // fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }] - // } - { - radius: '60rpx', - // background: 'black', - // pointer: true, - imgs: [{ - src: imghost + 'miniapp/images/luckDraw/pointer.png', - width: '188rpx', - height: '230rpx', - top: '-130rpx', - }], - } - ], + blocks: [{ + padding: '76rpx', + imgs: [{ + src: imghost + 'miniapp/images/luckDraw/weel.png?v=3', + width: '700rpx', + height: '700rpx', + rotate: true, + }], + }], + buttons: [{ + radius: '60rpx', + imgs: [{ + src: imghost + 'miniapp/images/luckDraw/pointer.png?v=3', + width: '188rpx', + height: '230rpx', + top: '-130rpx', + }], + }], }, onLoad(options) { - // console.log('imghost+++++', imghost); self = this; + let first_leader = null; this.data.options = options; - // this.setData({ - // options, - // imghost, - // }); - // console.log('this data', this.data.imghost); + + wx.setNavigationBarTitle({ title: options.title, }); + + app.isLogin().then(function(data) {//进入页面前已经授权登录成功 self.setData({ userInfo: data, - // imghost, }); }); + + + + //从分享的跳转过来 + if (options.id == undefined || options.id == null || options.id == '') { + var scene = decodeURIComponent(options.scene); + scene = scene.split('_'); + first_leader = scene[0]; + this.data.options.id = scene[1]; + }; + + if(first_leader) { + // console.log("log---", first_leader); + app.globalData.first_leader = first_leader; + //调用接口判断是不是会员 + app.request.promiseGet("/api/weshop/shoppingGuide/get/" + app.globalData.setting.stoid +"/" + first_leader,{}).then(res=>{ + if(res.data.code==0){ + app.globalData.guide_id = res.data.data.id; + } + }) + }; + }, onShow() { + // console.log('show~~`'); + if(app.globalData.userInfo) { if(!this.data.isLogin) { + // 下载头像 + let path = app.globalData.userInfo.head_pic; + path = path.replace("http://thirdwx.qlogo.cn", "https://wx.qlogo.cn"); + path = path.replace("https://thirdwx.qlogo.cn", "https://wx.qlogo.cn"); + wx.downloadFile({ + url: path, //仅为示例，并非真实的资源 + success (res) { + // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容 + if (res.statusCode === 200) { + self.setData({ + 'imgDraw.views[0].url': res.tempFilePath,//头像 + }); + + } + } + }); + + this.setData({ + imgDraw: imgDraw, userInfo: app.globalData.userInfo, isLogin: true, + 'imgDraw.views[1].text': app.globalData.userInfo.nickname,//昵称 }); - - // console.log('imghost', this.data.imghost); + + + // console.log('imgDraw.views[1].text+++++++++', imgDraw.views[1], app.globalData.userInfo.nickname); let user_id = app.globalData.userInfo.user_id; let store_id = app.globalData.setting.stoid; let id = this.data.options.id; let url = `/api/weshop/marketing/marketingLuckForm/getLuckInfo/${store_id}/${id}/${user_id}`; + + //获取小程序码 + this.getMiniCode({ + url: app.globalData.setting.url, + store_id: app.globalData.setting.stoid, + user_id: app.globalData.userInfo.user_id, + id: this.data.options.id, + }); app.request.get(url, { @@ -105,32 +357,109 @@ Page({ icon: 'none', }); self.data.msg = res.data.msg; + // self.setData({ + // bannerUrl: imghost + 'miniapp/images/luckDraw/bg.png?v=2', + // 'blocks[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/weel.png?v=3', //转盘 + // 'buttons[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/pointer.png?v=3', //指针 + // }); + }; // console.log('luckInfo', res.data.data); let luckInfo = res.data.data; + + + self.setData({ + 'imgDraw.views[3].text': self.data.luckInfo.act_name,//分享标题 + // 'imgDraw.views[4].text': '快来一起抽奖吧，精美奖品等着你！',//分享内容 + 'imgDraw.views[14].text': util.formar_no_full(luckInfo.begindate) + ' 至 ' + util.formar_no_full(luckInfo.enddate),//活动时间 + }); + + + + let luckStyle = null; + if(luckInfo && luckInfo.template_type != null && luckInfo.template_type == 1) { //获取模板 - let url = `/api/weshop/marketing/marketingLuckTemplate/get/${store_id}/${luckInfo.template_id}`; + let url = `/api/weshop/marketing/marketingLuckTemplate/get/0/${luckInfo.template_id}`; app.request.get(url, { success: function(res) { - // console.log('prizes//////', res.data.data); - self.setData({ - template: res.data.data, - bannerUrl: imghost + ((res.data.data&&res.data.data.bannerUrl) ? res.data.data.bannerUrl:'miniapp/images/luckDraw/bg.png'), //背景图 - 'blocks[0].imgs[0].src': imghost + ((res.data.data&&res.data.data.wheelBaseUrl) ? res.data.data.wheelBaseUrl:'miniapp/images/luckDraw/weel.png'), //转盘 - 'buttons[0].imgs[0].src': imghost + ((res.data.data&&res.data.data.wheelPointerUrl) ? res.data.data.wheelPointerUrl:'miniapp/images/luckDraw/pointer.png'), //指针 - }); + let template = null; + if(res.data.code == 0) { + template = res.data.data; + self.setData({ + template, + bannerUrl: imghost + template.bannerUrl, //背景图 + 'blocks[0].imgs[0].src': imghost + ((template&&template.wheelBaseUrl) ? template.wheelBaseUrl:'miniapp/images/luckDraw/weel.png?v=3'), + 'buttons[0].imgs[0].src': imghost + ((template&&template.wheelPointerUrl) ? template.wheelPointerUrl:'miniapp/images/luckDraw/pointer.png?v=3'), //指针 + 'imgDraw.views[3].text': template.share_title ? template.share_title:self.data.luckInfo.act_name, //分享标题 + 'imgDraw.views[5].url': imghost + (template&&template.share_image ? template.share_image:self.data.luckInfo.imageurl), //分享图片 + + }); + + let color = template&&template.colorCode ? template.colorCode:'#da104b'; + luckStyle = `background: ${color} url(${self.data.bannerUrl}) no-repeat;`; + self.setData({ + luckStyle, + + }); + // self.setData({ + // template: res.data.data, + // bannerUrl: imghost + res.data.data.bannerUrl, //背景图 + // //bannerUrl: imghost + ((res.data.data&&res.data.data.bannerUrl) ? res.data.data.bannerUrl:'miniapp/images/luckDraw/bg.png?v=2'), //背景图 + // 'blocks[0].imgs[0].src': imghost + res.data.data&&res.data.data.wheelBaseUrl) ? res.data.data.wheelBaseUrl:'miniapp/images/luckDraw/weel.png?v=2'), //转盘 + // 'buttons[0].imgs[0].src': imghost + ((res.data.data&&res.data.data.wheelPointerUrl) ? res.data.data.wheelPointerUrl:'miniapp/images/luckDraw/pointer.png?v=2'), //指针 + // 'imgDraw.views[3].text': (res.data.data&&res.data.data.title) ? res.data.data.title : self.data.luckInfo.act_name,//分享标题 + // // 'imgDraw.views[4].text': (res.data.data&&res.data.data.share_content) ? res.data.data.share_content : '快来一起抽奖吧，精美奖品等着你！',//分享内容 + // 'imgDraw.views[5].url': (res.data.data&&res.data.data.share_image) ? (imghost + res.data.data.share_image):(self.data.luckInfo.imageurl ? (imghost + self.data.luckInfo.imageurl):'/packpageB/images/luckDraw/jiang.png'),//分享图片 + // 'imgDraw.views[14].text': util.formar_no_full(self.data.luckInfo.begindate) + ' 至 ' + util.formar_no_full(self.data.luckInfo.enddate),//活动时间 + // }); + } else { + luckStyle = `background: #da104b url(${imghost + 'miniapp/images/luckDraw/bg.png?v=2'}) no-repeat;`; + self.setData({ + luckStyle, + 'imgDraw.views[5].url': self.data.luckInfo.imageurl ? (imghost + self.data.luckInfo.imageurl):'/packageB/images/luckDraw/jiang.png', //分享图片 + 'blocks[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/weel.png?v=3', //转盘 + 'buttons[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/pointer.png?v=3', //指针 + }); + // let color = template&&template.colorCode ? template.colorCode:'#da104b'; + + // self.setData({ + // luckStyle, + // }); + }; + }, }); } else { + + if(luckInfo && luckInfo.imageurl) { + self.setData({ + 'imgDraw.views[5].url': imghost + self.data.luckInfo.imageurl, //分享图片 + }); + }; + if(luckInfo && luckInfo.store_bannerUrl) { self.setData({ bannerUrl: imghost + luckInfo.store_bannerUrl, + custom: true, + }); + } else { + self.setData({ + bannerUrl: imghost + 'miniapp/images/luckDraw/bg.png?v=2', + custom: false, }); }; - + + let color = self.data.custom ? '#f0f0f0':'#da104b'; + luckStyle = `background: ${color} url(${self.data.bannerUrl}) no-repeat;`; + self.setData({ + luckStyle, + 'blocks[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/weel.png?v=3', //转盘 + 'buttons[0].imgs[0].src': imghost + 'miniapp/images/luckDraw/pointer.png?v=3', //指针 + }); + }; @@ -139,7 +468,6 @@ Page({ title: self.data.luckInfo.msgInfo, icon: 'none', }); - // return; }; }, @@ -157,7 +485,7 @@ Page({ self.setData({ award, }); - console.log('award', award); + // console.log('award', award); self.prizeLayout(award); }, @@ -178,8 +506,8 @@ Page({ self.setData({ record: res.data.data.pageData, }); - }; - }, + } + }, }); @@ -201,10 +529,27 @@ Page({ }, }); + + + }; }; }, + //获取小程序码 + getMiniCode(objData) { + wx.getImageInfo({ + src: `${objData.url}/api/wx/open/app/user/getWeAppEwm/${objData.store_id}?sceneValue=${objData.user_id}_${objData.id}&pageValue=pages/index/index/index`, + success (res) { + if(res.code != -1) { + self.setData({ + 'imgDraw.views[16].url': res.path, + }); + }; + } + }); + }, + // 设置转盘奖品布局 prizeLayout(award) { let prizes = []; @@ -423,7 +768,6 @@ Page({ // 根据lbtype指定奖品类别图标 prizeSrc(lbtype) { let src = ''; - // let imghost = this.data.imghost; switch(lbtype) { case 1: { //积分 src = imghost + 'miniapp/images/luckDraw/jf.png'; @@ -493,129 +837,184 @@ Page({ return; }; - - if(this.data.luckInfo.user_LuckNumDay > 0 || this.data.luckInfo.vip_act_num == 0) { - // console.log('start choujiang'); - // let start = false; - if(!this.data.start) { - this.data.start = true; - // 获取抽奖组件实例 - const $lucky = this.selectComponent('#myLucky'); - // 调用play方法开始旋转 - $lucky.play(); + // 获取积分 + app.request.promisePost('/api/weshop/marketing/marketingLuckForm/startLuckIntegral', { + isShowLoading: false, + data: { + storeId: app.globalData.setting.stoid, + userId: app.globalData.userInfo.user_id, + LuckId: this.data.options.id, + }, + }) + .then(function(res) { + if(res.data.code == -1) { + //积分不足，弹出提示 + self.data.luckInfo.msgInfo = res.data.msg + wx.showToast({ + title: res.data.msg, + icon: 'none', + }); + return; + }; + + if(res.data.code == 0) { - // 获取抽奖结果 - app.request.post('/api/weshop/marketing/marketingLuckForm/startLuck', { - isShowLoading: false, - data: { - storeId: app.globalData.setting.stoid, - userId: app.globalData.userInfo.user_id, - LuckId: this.data.options.id, - }, - success: function(res) { + if(self.data.luckInfo.user_LuckNumDay > 0 || self.data.luckInfo.vip_act_num == 0) { + // console.log('start choujiang'); + // let start = false; + if(!self.data.start) { + self.data.start = true; + // 获取抽奖组件实例 + const $lucky = self.selectComponent('#myLucky'); + // 调用play方法开始旋转 + $lucky.play(); - if(res.data.code == 0) { - console.log('开始摇奖', res.data.data); - if(self.data.luckInfo.vip_act_num != 0) { - self.setData({ - 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, - // isActive: true, - }); - }; - - self.setData({ - // 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, - isActive: true, - }); - // console.log('请求成功', res.data.data); - let luckyId = res.data.data.id; - let indexArr = self.luckyIndex(self.data.prizes, luckyId); - // console.log('抽奖奖品id', luckyId); - // console.log('奖品列表', self.data.prizes); - // console.log('奖品对应的索引数组', indexArr); - let random = Math.random() * indexArr.length >> 0; - // console.log('random', random); - let index = indexArr[random]; - setTimeout(() => { - $lucky.stop(index); - self.data.start = false; - }, 3000); + // 获取抽奖结果 + app.request.post('/api/weshop/marketing/marketingLuckForm/startLuck', { + isShowLoading: false, + data: { + storeId: app.globalData.setting.stoid, + userId: app.globalData.userInfo.user_id, + LuckId: self.data.options.id, + }, + success: function(res) { + + if(res.data.code == 0) { + // console.log('开始摇奖', res.data.data); + if(self.data.luckInfo.vip_act_num != 0) { + self.setData({ + 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, + // isActive: true, + }); + }; + + self.setData({ + // 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, + isActive: true, + wow: res.data.data, + }); + // console.log('wow', self.data.wow); + // console.log('请求成功', res.data.data); + let luckyId = res.data.data.id; + let indexArr = self.luckyIndex(self.data.prizes, luckyId); + // console.log('抽奖奖品id', luckyId); + // console.log('奖品列表', self.data.prizes); + // console.log('奖品对应的索引数组', indexArr); + let random = Math.random() * indexArr.length >> 0; + // console.log('random', random); + let index = indexArr[random]; + setTimeout(() => { + $lucky.stop(index); + self.data.start = false; + }, 3000); + + + //获取兑奖记录 + // app.request.get('/api/weshop/marketing/marketingLuckRecord/page', { + // isShowLoading: false, + // data: { + // store_id: app.globalData.setting.stoid, + // user_id: app.globalData.userInfo.user_id, + // luck_formid: self.data.options.id, + // luck_state: 1 + // }, + // success: function(res) { + // if(res.data.code == 0) { + // // console.log('res===>', res.data.data.pageData); + // self.setData({ + // record: res.data.data.pageData, + // }); + // }; + // }, + // }); + + + } else { + let thxIndexArr = self.data.thxIndexArr; + const random = Math.random() * thxIndexArr.length >> 0; + const index = thxIndexArr[random]; + // console.log('谢谢参与数组', thxIndexArr); + // console.log('请求出错产生谢谢参与的随机数', index); + setTimeout(() => { + $lucky.stop(index); + self.data.start = false; + }, 3000); + + + + + if(res.data.code == -1) { + wx.showToast({ + title: res.data.msg, + icon: 'none', + }); + self.data.luckInfo.msgInfo = res.data.msg; + return; + // self.data.start = true; + }; + + + if(res.data.code == -2 && self.data.luckInfo.vip_act_num != 0) { + self.setData({ + 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, + }); + }; + + + }; + + }, - //获取兑奖记录 - // app.request.get('/api/weshop/marketing/marketingLuckRecord/page', { - // isShowLoading: false, - // data: { - // store_id: app.globalData.setting.stoid, - // user_id: app.globalData.userInfo.user_id, - // luck_formid: self.data.options.id, - // luck_state: 1 - // }, - // success: function(res) { - // if(res.data.code == 0) { - // // console.log('res===>', res.data.data.pageData); - // self.setData({ - // record: res.data.data.pageData, - // }); - // }; - // }, - // }); + fail: function(res) { + // console.log('出错'); + wx.showToast({ + title: '数据请求失败', + icon: 'error', + }); + let thxIndexArr = self.data.thxIndexArr; + const random = Math.random() * thxIndexArr.length >> 0; + const index = thxIndexArr[random]; + setTimeout(() => { + $lucky.stop(index); + self.data.start = false; + }, 3000); + }, - } else { - // console.log('请求出错'); - if(self.data.luckInfo.vip_act_num != 0) { - self.setData({ - 'luckInfo.user_LuckNumDay': self.data.luckInfo.user_LuckNumDay - 1, - }); - }; - let thxIndexArr = self.data.thxIndexArr; - const random = Math.random() * thxIndexArr.length >> 0; - const index = thxIndexArr[random]; - // console.log('谢谢参与数组', thxIndexArr); - // console.log('请求出错产生谢谢参与的随机数', index); - setTimeout(() => { - $lucky.stop(index); - self.data.start = false; - }, 3000); - }; - }, - - fail: function(res) { - // console.log('出错'); - wx.showToast({ - title: '数据请求失败', - icon: 'error', }); - let thxIndexArr = self.data.thxIndexArr; - const random = Math.random() * thxIndexArr.length >> 0; - const index = thxIndexArr[random]; - setTimeout(() => { - $lucky.stop(index); - self.data.start = false; - }, 3000); - }, + + } - }); + + } else { + wx.showToast({ + title: '你今天的抽奖次数已用完啦！~', + icon: 'none', + }); + }; - } - - - } else { - wx.showToast({ - title: '你今天的抽奖次数已用完啦！~', - icon: 'none', - }); - }; + }; + }); + + + + + }, end (event) { // 中奖奖品详情 - // console.log('zjiangla~~',event.detail.lbtype); + console.log('抽奖结果：',event.detail); let no_luck_urltype = this.data.luckInfo.no_luck_urltype; - let lbtype; + let lbtype = null; + // let good_id = null; let resultTitle = event.detail.fonts[0].text.replace('\n',''); + // if(event.detail.id) { + // console.log('~~~~~~----++++++',event.detail.id); + // good_id = event.detail.id; + // }; if(event.detail.lbtype == 5) { lbtype = 5; } else { @@ -627,13 +1026,15 @@ Page({ showResult: true, showMask: true, resultTitle, + showPopup: false, currentLbtype: lbtype, + // good_id, }); - if(no_luck_urltype == 1) { + if(no_luck_urltype == 1 && resultTitle == '谢谢参与') { if(this.data.luckInfo.no_luck_weappurl) { let num = this.data.num; let url = this.data.luckInfo.no_luck_weappurl; @@ -649,8 +1050,47 @@ Page({ }, 1000); }; + + }; + + + if(self.data.luckInfo.give_user) { + if(resultTitle == '谢谢参与') { + if(self.data.luckInfo.give_type == 1) { + if(self.data.luckInfo.give_integral > 0) { + wx.showToast({ + title: `获得游戏奖励积分${self.data.luckInfo.give_integral}`, + icon: 'none', + }); + }; + } else if((self.data.luckInfo.give_type == 2)) { + if(self.data.luckInfo.give_growth > 0) { + wx.showToast({ + title: `获得游戏奖励成长值${self.data.luckInfo.give_growth}`, + icon: 'none', + }); + }; + }; + }; + } else { + if(self.data.luckInfo.give_type == 1) { + if(self.data.luckInfo.give_integral > 0) { + wx.showToast({ + title: `获得游戏奖励积分${self.data.luckInfo.give_integral}`, + icon: 'none', + }); + }; + } else if((self.data.luckInfo.give_type == 2)) { + if(self.data.luckInfo.give_growth > 0) { + wx.showToast({ + title: `获得游戏奖励成长值${self.data.luckInfo.give_growth}`, + icon: 'none', + }); + }; + }; }; + }, showPopup() { @@ -786,6 +1226,14 @@ Page({ goto(e) { let url = ''; let type = e.currentTarget.dataset.type; + let ordersn = null; + let buyreceive_id = null; + if(e.currentTarget.dataset.ordersn) { + ordersn = e.currentTarget.dataset.ordersn; + }; + if(e.currentTarget.dataset.buyreceiveid) { + buyreceive_id = e.currentTarget.dataset.buyreceiveid; + }; switch(type) { case 1: { url = '/pages/user/integral/integral'; @@ -804,7 +1252,7 @@ Page({ break; }; case 6: { - url = '/packageA/pages/myGift/myGift'; + url = `/pages/giftpack/giftpacklist/giftpacklist?isBuy=0&orderSn=${ordersn}&lbId=${buyreceive_id}`; break; }; }; @@ -812,20 +1260,30 @@ Page({ }, showQr(e) { + let id = null; let store_id = app.globalData.setting.stoid; - let id = e.currentTarget.dataset.id; + if(e && e.currentTarget.dataset.id) { + id = e.currentTarget.dataset.id; + } else { + id = this.data.wow.record_id; + }; let url = `/api/weshop/marketing/marketingLuckList/updateGoodsVerifyCode/${store_id}/${id}`; + // console.log('good_id', id, url); app.request.put(url, { success: function(res) { if(res.data.code == 0) { let data = res.data.data; - console.log('data!!!!', data); let barcode = self.selectComponent("#qrcode"); barcode.open({val: data}); self.setData({ hiddenCanvas: true, showPopup: false, }); + } else { + wx.showToast({ + title: res.data.msg, + icon: 'none', + }); }; }, @@ -843,6 +1301,39 @@ Page({ this.setData({ showResult: false, }); - this.showPopup(); + this.showQr(); + }, + + showPoster() { + wx.showLoading({ + title: '生成海报中', + }); + setTimeout(function() { + self.setData({ + hiddenCanvas: true, + showMask: true, + showPoster: true, + }); + wx.hideLoading(); + }, 3000) + + + }, + + closePoster() { + this.setData({ + showMask: false, + showPoster: false, + hiddenCanvas: false, + }); + }, + + + + onImgOK(e) { + this.setData({ + myimg: e.detail.path, + }); }, + }) \ No newline at end of file diff --git a/packageB/pages/luckactivity/luckinfo/luckinfo.json b/packageB/pages/luckactivity/luckinfo/luckinfo.json index e8748c5..27a7638 100644 --- a/packageB/pages/luckactivity/luckinfo/luckinfo.json +++ b/packageB/pages/luckactivity/luckinfo/luckinfo.json @@ -2,7 +2,8 @@ "usingComponents": { "lucky-wheel":"/packageB/miniprogram_npm/mini-luck-draw/lucky-wheel/index", "qrcode": "/components/my-qrcode/my-qrcode", - "nodata": "/components/nodata/nodata" + "nodata": "/components/nodata/nodata", + "painter": "/packageB/components/painter/painter" }, "enablePullDownRefresh": false, "navigationBarTitleText": "幸运大转盘" diff --git a/packageB/pages/luckactivity/luckinfo/luckinfo.wxml b/packageB/pages/luckactivity/luckinfo/luckinfo.wxml index 62f81f5..e5a3926 100644 --- a/packageB/pages/luckactivity/luckinfo/luckinfo.wxml +++ b/packageB/pages/luckactivity/luckinfo/luckinfo.wxml @@ -1,7 +1,7 @@ - - + + @@ -36,17 +36,17 @@ hiddenCanvas="{{hiddenCanvas}}" /> - 今天你有 不限次 抽奖机会 - 今天你还有 {{filter.show_default(luckInfo.user_LuckNumDay, '0')}} 次抽奖机会 + 今天你有 不限次 抽奖机会 + 今天你还有 {{filter.show_default(luckInfo.user_LuckNumDay < 0 ? 0:luckInfo.user_LuckNumDay, '0')}} 次抽奖机会 - + - + @@ -63,28 +63,24 @@ - + - + -