Commit 162955ff by wangyalan-git

增加分销中心页面/确认订单支付页面/邀请页面

parent 8dadca82
......@@ -26,14 +26,14 @@ App({
data;
if (view) {
data = view.data;
console.log('是否重写分享方法', data.isOverShare);
console.log('是否重写分享方法', this.globalData.userInfo);
if (!data.isOverShare) {
data.isOverShare = true;
view.onShareAppMessage = function () {
//你的分享配置
return {
title: '中厦全供',
path: '/pages/index/index'
path: '/pages/index/index?shareCode='+ this.globalData.userInfo.shareCode
};
}
}
......@@ -41,6 +41,7 @@ App({
})
},
globalData: {
userInfo: '',
// 定义全局请求队列
requestQueue: [],
// 是否正在进行登陆
......
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/user/user",
......@@ -20,7 +19,14 @@
"pages/login/login",
"pages/prod-classify/prod-classify",
"pages/recent-news/recent-news",
"pages/news-detail/news-detail"
"pages/news-detail/news-detail",
"pages/invite/invite",
"pages/distribution/index",
"pages/userAccount/comDetails/index",
"pages/userAccount/distributionOrder/index",
"pages/userAccount/myTeam/index",
"pages/userAccount/withdrawalRecord/index",
"pages/userAccount/balanceWithdraw/index"
],
"window": {
"backgroundTextStyle": "light",
......
/**
* 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
/* 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.createCircularGradient(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 }
})();
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 === 'bold' ? 'bold' : 'normal';
const textStyle = view.css.textStyle === 'italic' ? 'italic' : 'normal';
if (!view.css.fontSize) {
view.css.fontSize = '20rpx';
}
this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? 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;
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.setTextAlign(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.setTextAlign(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;
}
}
/* 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.setFillStyle(bg)
ctx.fillRect(startX, startY, cavW, cavW);
}
ctx.setFillStyle(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
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
};
import Pen from './lib/pen';
import Downloader from './lib/downloader';
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,
paintCount: 0,
currentPalette: {},
movingCache: {},
outterDisabled: false,
isDisabled: false,
needClear: false,
/**
* 组件的属性列表
*/
properties: {
customStyle: {
type: String,
},
// 运行自定义选择框和删除缩放按钮
customActionStyle: {
type: Object,
},
palette: {
type: Object,
observer: function (newVal, oldVal) {
console.log('开始绘制图片看看')
if (this.isNeedRefresh(newVal, oldVal)) {
this.paintCount = 0;
console.log('画画')
this.startPaint();
}
},
},
dancePalette: {
type: Object,
observer: function (newVal, oldVal) {
console.log("newVal",newVal)
if (!this.isEmpty(newVal)) {
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.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) {
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() {
this.isDisabled = true;
this.initScreenK();
this.downloadImages(this.properties.dancePalette).then((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 = wx.createCanvasContext('front', this));
this.bottomContext || (this.bottomContext = wx.createCanvasContext('bottom', this));
this.topContext || (this.topContext = wx.createCanvasContext('top', this));
this.globalContext || (this.globalContext = wx.createCanvasContext('k-canvas', this));
new Pen(this.bottomContext, palette).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((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.canvasWidthInPx = width.toPx();
if (this.properties.widthPixels) {
setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
this.canvasWidthInPx = this.properties.widthPixels
}
this.canvasHeightInPx = height.toPx();
this.setData({
photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
});
this.photoContext || (this.photoContext = wx.createCanvasContext('photo', this));
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',
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);
},
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
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<view style='position: relative;{{customStyle}};{{painterStyle}}'>
<canvas canvas-id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" />
<canvas canvas-id="bottom" style="{{painterStyle}};position: absolute;" />
<canvas canvas-id="k-canvas" style="{{painterStyle}};position: absolute;" />
<canvas canvas-id="top" style="{{painterStyle}};position: absolute;" />
<canvas
canvas-id="front"
style="{{painterStyle}};position: absolute;"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd"
bindtouchcancel="onTouchCancel"
disable-scroll="{{true}}" />
</view>
// pages/person/person2.js
// var util = require('../../config/util.js');
// var api = require('../../config/api.js');
// var user = require('../../services/user.js');
Page({
/**
* 页面的初始数据
*/
data: {
userLevel: 0, // 0二维码不显示,1显示
islogin: false,
username: '请登录/注册',
picture: '',
user_level: 0,//中厦全供认证判断 3已认证
integral: 0,//积分
},
// 获取分销基础信息
distribution(token) {
var that = this;
util.request(api.distribution, { token: token }).then(res => {
console.log(res)
that.setData({
pageInfo: res.data
})
})
},
// 提现信息
myAccount(token) {
var that = this;
var token = wx.getStorageSync('token');
util.request(api.myAccount, { 'token': token }).then(res => {
that.setData({
myAccountInfo: res.data
})
})
},
// 页面跳转
goPage(data) {
wx.navigateTo({
url: data.currentTarget.dataset.page,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// let that = this;
// var token = wx.getStorageSync('token');
// that.distribution(token);
// that.myAccount(token);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
clickLogin() {
user.checkLogin().then(res => {
console.log('has login');
}).catch(() => {
wx.navigateTo({
url: '/pages/auth/login/login',
});
});
},
toset() {
// wx.navigateTo({
// url: "/pages/baoming/baoming"
// });
// return;
user.checkLogin().then(res => {
wx.navigateTo({
url: '/pages/person/personSet/personSet'
});
}).catch(() => {
wx.navigateTo({
url: '/pages/auth/login/login',
});
});
},
clickOrder(event) {
let idx = event.currentTarget.dataset.index;
user.checkLogin().then(res => {
if (idx == 5) {
wx.navigateTo({
url: '/pages/orders/addressSelect/address',
})
} else {
wx.navigateTo({
url: '/pages/orders/orderList/index?index=' + idx,
});
}
}).catch(() => {
wx.navigateTo({
url: '/pages/auth/login/login',
});
});
},
})
{
"usingComponents": {},
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "分销中心",
"navigationBarTextStyle": "black"
}
\ No newline at end of file
<!--pages/me/me.wxml-->
<view class="view-page">
<!-- 用户信息-背景 -->
<image class="background-img-head" src="../../images/bg@2x.png"></image>
<!-- 用户信息 -->
<view class="user-info-box">
<!-- 信息 -->
<view class="user-info-show">
<image class="user-portrait" src="{{pageInfo.userInfo.picture}}"></image>
<view class="user-name">
<view>{{pageInfo.userInfo.userName}}</view>
<view>推荐人:您是由{{pageInfo.userInfo.parentName}}推荐</view>
</view>
</view>
<!-- 数字 -->
<view class="user-info-num">
<view>
<text>{{myAccountInfo ? myAccountInfo.withdrawalSuccessful : 0}}</text>
<text>成功提现佣金</text>
</view>
<view>
<text>{{myAccountInfo ? myAccountInfo.incomeTotal : 0}}</text>
<text>可提现佣金</text>
</view>
</view>
</view>
<!-- 菜单展示 -->
<view class="menu-box-show">
<view class="menu-li" bindtap="goPage" data-page="/pages/userAccount/myTeam/index">
<image src="../../images/icon/team@2x.png"></image>
<view>
<text>我的团队</text>
<text>{{pageInfo.teamNum}}人</text>
</view>
</view>
<view class="menu-li" bindtap="goPage" data-page="/pages/userAccount/distributionOrder/index">
<image src="../../images/icon/management@2x.png"></image>
<view>
<text>分销订单</text>
<text>{{pageInfo.distributionOrderNum}}笔</text>
</view>
</view>
</view>
<view class="menu-box-show">
<view class="menu-li" bindtap="goPage" data-page="/pages/userAccount/comDetails/index">
<image src="../../images/icon/commission@2x.png"></image>
<view>
<text>佣金明细</text>
<text>{{pageInfo.commissionNum}}笔</text>
</view>
</view>
<view class="menu-li" bindtap="goPage" data-page="/pages/userAccount/withdrawalRecord/index">
<image src="../../images/icon/detaileds@2x.png"></image>
<view>
<text>提现明细</text>
<text>{{pageInfo.withdrawalSuccessful}}笔</text>
</view>
</view>
</view>
<view class="menu-box-show">
<view class="menu-li" bindtap="goPage" data-page="/pages/invite/invite">
<image src="../../images/icon/Notice@2x.png"></image>
<view>
<text>我要推广</text>
<text>点击推广</text>
</view>
</view>
<view class="menu-li" bindtap="goPage" data-page="/pages/userAccount/balanceWithdraw/index">
<image src="../../images/icon/cash.png"></image>
<view>
<text>我要提现</text>
<text>{{pageInfo.toBeWithdrawal}}元</text>
</view>
</view>
</view>
</view>
\ No newline at end of file
/* pages/me/me.wxss */
page {
background: #f4f4f4;
}
.view-page{
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
}
.background-img-head{
width: 100%;
height: 400rpx;
margin-bottom: 40rpx;
}
.user-info-box{
width: 690rpx;
height: 330rpx;
border-radius: 20rpx;
background: white;
position: absolute;
top: 80rpx;
left: 30rpx;
display: flex;
align-items: center;
flex-direction: column;
}
.user-info-show{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
margin: 44rpx 0 0 0;
}
.user-portrait{
width: 112rpx;
height: 112rpx;
border-radius: 50%;
margin: 0 33rpx 0 40rpx;
}
.user-name{
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
}
.user-name view:nth-child(1){
width: 100%;
font-size: 40rpx;
font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
font-weight: 600;
text-align: left;
color: #020202;
}
.user-name view:nth-child(2){
width: 100%;
font-size: 24rpx;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
text-align: left;
color: #999999;
margin-top: 10rpx;
}
.rule{
width: 120rpx;
height: 50rpx;
background: #030521;
border-radius: 25rpx;
text-align: center;
line-height: 50rpx;
margin-right: 30rpx;
font-size: 26rpx;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
color: #ffffff;
}
.user-info-num{
width: 75%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 44rpx 0 0 0;
}
.user-info-num view{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.user-info-num view text:nth-child(1){
font-size: 40rpx;
font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
font-weight: 600;
color: #020202;
width: 100%;
text-align: center;
}
.user-info-num view text:nth-child(2){
font-size: 26rpx;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
width: 100%;
text-align: center;
color: #999999;
}
.menu-box-show{
width: 690rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 20rpx 0;
}
.menu-li{
width: 49%;
background: #ffffff;
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 20rpx 0;
}
.menu-li image{
width: 67rpx;
height: 64rpx;
margin: 20rpx 0 0 20rpx;
}
.menu-li view{
display: flex;
align-items: center;
justify-content: space-between;
width: 85%;
font-size: 26rpx;
margin: 0 25rpx;
}
.menu-li view text:nth-child(2){
font-size: 24rpx;
color: #999999;
}
\ No newline at end of file
......@@ -83,14 +83,35 @@ Page({
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userInfo']) {
wx.navigateTo({
url: '/pages/login/login',
})
if (this.options.shareCode) {
wx.navigateTo({
url: '/pages/login/login?shareCode=' + this.options.shareCode,
})
} else {
wx.navigateTo({
url: '/pages/login/login',
})
}
} else {
if (this.options.shareCode) {
this.boundParentByShareCode(options.shareCode); // 绑定内容获取
}
}
}
})
},
boundParentByShareCode(code) {
var params = {
url: "/p/user/boundParentByShareCode",
method: "POST",
data: {
shareCode: code
},
callBack: (res) => {
console.log("绑定成功", res)
}
};
http.request(params);
},
getAllData() {
http.getCartCount(); //重新计算购物车总数量
......
// pages/ininvite/ininvite.js
var http = require("../../utils/http.js");
var config = require("../../utils/config.js");
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
finishh: false,
smsCode: null,
avatar: null,
popBox: 0, // 弹窗启动
inviteTemplate: ''
},
onImgOK(e) {
this.imagePath = e.detail.path;
this.setData({
image: this.imagePath
})
if (this.isSave) {
this.saveImage(this.imagePath);
}
console.log('imageok', this.data.image)
},
template() {
return {
"width": "200px",
"height": "320px",
"background": "#f8f8f8",
"views": [
{
"type": "rect",
"css": {
"background": "#DF001B",
"width": "200px",
"height": "40px",
"top": "0px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"shadow": "",
"color": "#DF001B"
}
},
{
"type": "text",
"text": "车理狗",
"css": {
"color": "#fff",
"background": "",
"width": "200px",
"height": "22.88px",
"top": "4.999999999999998px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "16px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "23.088000000000005px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "center"
}
},
{
"type": "rect",
"css": {
"background": "#fff",
"width": "200px",
"height": "80px",
"top": "27px",
"left": "0px",
"rotate": "0",
"borderRadius": "10px",
"shadow": "",
"color": "#fff"
}
},
{
"type": "text",
"text": "稀世宅品 欧儿童房灯LED灯卧室灯房间灯具灯饰男孩女孩稀世宅 北欧儿童房灯LED灯卧室灯房间灯具灯饰男孩女孩",
"css": {
"color": "#333",
"background": "#fff",
"width": "180px",
"height": "34.788000000000004px",
"top": "36px",
"left": "10px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "12px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "17.316000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "¥259.00",
"css": {
"color": "#DF001B",
"background": "",
"width": "100px",
"height": "22.88px",
"top": "70px",
"left": "7px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "16px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "23.088000000000005px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "c"
}
},
{
"type": "image",
"url": "/images/banner@2x.png",
"css": {
"width": "200px",
"height": "150px",
"top": "93px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "aspectFill"
}
},
// {
// "type": "qrcode",
// "content": "哈哈哈",
// "css": {
// "color": "#000000",
// "background": "#ffffff",
// "width": "50px",
// "height": "50px",
// "top": "254px",
// "left": "33px",
// "rotate": "0",
// "borderRadius": ""
// }
// },
{
"type": "text",
"text": "卡车行小程序",
"css": {
"color": "#333",
"background": "",
"width": "100px",
"height": "17.16px",
"top": "262px",
"left": "89px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "12px",
"fontWeight": "bold",
"maxLines": "2",
"lineHeight": "17.316000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "c"
}
},
{
"type": "text",
"text": "长按识别 去逛逛",
"css": {
"color": "#999",
"background": "",
"width": "100px",
"height": "11.44px",
"top": "281.02px",
"left": "92px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "8px",
"fontWeight": "bold",
"maxLines": "2",
"lineHeight": "11.544000000000002px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": ""
}
}
]
}
},
// 用户信息
getUserInfo() {
var params = {
url: "/p/user/getUserInfo",
method: "GET",
data: {},
callBack: (res) => {
console.log('用户信息', res.result)
this.setData({
userInfo: res.result,
}, function () {
this.getMiniAppQrcode()
});
}
};
http.request(params);
},
// 二维码
getMiniAppQrcode() {
var params = {
url: "/wechatCommon/getMiniAppQrcode",
method: "GET",
data: {},
callBack: (res) => {
let img = 'data:image/png;base64,' + res.result
this.send_code(img)
// console.log('二维码', img)
}
};
http.request(params);
},
//将base64图片转网络图片
send_code: function (base64data) {
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
console.log(new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
console.log("path",filePath)
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
},
// 保存图片
saveImage(imagePath = '') {
if (!this.isSave) {
this.isSave = true;
this.setData({
paintPallette: this.data.template,
});
} else if (imagePath) {
this.isSave = false;
wx.saveImageToPhotosAlbum({
filePath: imagePath,
success: function (data) {
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showToast({
title: '请重新点击保存',
})
} else {
}
}
})
}
}
});
}
},
// 获取小程序图片
getInvite: function () {
var that = this
return new Promise(resolve => {
api.getInvite({}, {
suc: function (res) {
console.log('小程序吗', res)
that.setData({
smsCode: res.data.data
})
return resolve();
}
})
});
},
// 保存图片
save: function () {
let that = this;
//注意这个地方因为我绘制的大小就是我要保存的区域,所以我直接用了默认的横纵坐标和画布区域
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success(res) {
console.log(res.tempFilePath);
saveImg(res)
},
fail: function () {
wx.showToast({
title: '请重新生成在保存图片'
})
}
})
let saveImg = function (resourse) {
console.log("保存图片:", resourse);
wx.saveImageToPhotosAlbum({
filePath: resourse.tempFilePath,
success: function (res) {
console.log(res)
wx.showToast({
title: '保存成功'
})
},
fail: function (err) {
console.log('err', err)
if (err.errMsg) { //重新授权弹框确认
wx.showModal({
title: '提示',
content: '您好,请先授权,在保存此图片。',
showCancel: false,
success(res) {
if (res.confirm) { //重新授权弹框用户点击了确定
wx.openSetting({ //进入小程序授权设置页面
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) { //用户打开了保存图片授权开关
wx.saveImageToPhotosAlbum({
filePath: benUrl,
success: function (data) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
})
} else { //用户未打开保存图片到相册的授权开关
wx.showModal({
title: '温馨提示',
content: '授权失败,请稍后重新获取',
showCancel: false,
})
}
}
})
}
}
})
}
}
})
}
},
// 绘制图片
drawImage: function () {
// 绘制图片
var that = this
wx.showLoading({
title: '生成中',
})
//设个定时器防止异步的问题
setTimeout(function () {
//初始化画布背景宽高及内容宽高变量
var myCanvasWidth
var myCanvasHeight
var myCanvasWidth1
var myCanvasHeight1
//获取手机屏幕尺寸并给画布宽高赋值
var res = wx.getSystemInfoSync()
console.log(res)
myCanvasWidth = res.windowWidth - 80
myCanvasHeight = res.windowHeight - 120
myCanvasWidth1 = res.windowWidth
myCanvasHeight1 = res.windowHeight
console.log(myCanvasWidth, myCanvasHeight)
console.log("宽:" + parseInt(myCanvasWidth / 5), "高:" + parseInt(myCanvasHeight / 7.88))
// var avatarurl_width = parseInt (myCanvasWidth / 5); //绘制的头像宽度
//将方形图片处理成圆形头像
var avatarurl_heigth = parseInt(myCanvasHeight / 8); //绘制的头像高度
var avatarur2_heigth = parseInt(myCanvasHeight / 4.5); //小程序高度
var avatarurl_width = avatarurl_heigth
var avatarur2_width = avatarur2_heigth
var avatarurl_x = myCanvasWidth / 2 - (avatarurl_width / 2); //绘制的头像在画布上的位置
var avatarurl_y = myCanvasHeight / 6 - (avatarurl_heigth / 2); //绘制的头像在画布上的位置
var avatarur2_x = myCanvasWidth / 2 - (avatarur2_width / 2); //小程序在画布上的位置
var avatarur2_y = myCanvasHeight / 2 - (avatarur2_heigth / 2); //小程序在画布上的位置
that.setData({
canvasWidth: myCanvasWidth,
canvasHeight: myCanvasHeight,
canvasWidth1: myCanvasWidth1,
canvasHeight1: myCanvasHeight1
})
//初始化画布
var context = wx.createCanvasContext('firstCanvas')
context.fillRect(0, 0, myCanvasWidth, myCanvasHeight)
context.drawImage("../../images/icon/poster@2x.png", myCanvasWidth / 2 - (myCanvasWidth / 2), myCanvasHeight / 2 - (myCanvasHeight / 2), myCanvasWidth, myCanvasHeight)
//下载头像变为本地地址
wx.getImageInfo({
src: that.data.userInfo.pic,
success: function (res) {
var avatar = res.path;
context.save();
context.beginPath();
//先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针
context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
context.clip();
if (avatar) {
context.drawImage(avatar, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片,
// 必须是https图片
context.restore();
context.draw(true);
}
}
})
context.setFontSize(14)
context.setTextAlign('center')
context.setFillStyle('#E5E5E5')
context.fillText(that.data.userInfo.nickName, myCanvasWidth / 2, myCanvasHeight / 3.5)
context.setFillStyle('#E5E5E5')
context.fillText("邀请您使用【中厦全供】", myCanvasWidth / 2, myCanvasHeight / 2.9);
console.log('二维码', that.data.code)
// wx.getImageInfo({
// src: that.data.code,
// success: function (res) {
// console.log('图片', res)
// var smsCode = res.path;
// context.save();
// context.beginPath();
// //先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针
// context.arc(avatarur2_width / 2 + avatarur2_x, avatarur2_heigth / 2 + avatarur2_y, avatarur2_width / 2, 0, Math.PI * 2, false);
// context.clip();
// context.drawImage(smsCode, avatarur2_x, avatarur2_y, avatarur2_width, avatarur2_heigth);
// // 必须是https图片
// context.restore();
// context.draw(true);
// },
// fail: function (err) {
// console.log('失败', err)
// }
// })
//定时器作用同上
setTimeout(function () {
wx.hideLoading();
that.setData({
finishh: true
})
}, 1000)
}, 1000)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getUserInfo()
this.setData({
inviteTemplate: this.template()
})
console.log('inviteTemplate', this.data.inviteTemplate)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
}
})
\ No newline at end of file
{
"usingComponents": {
"painter": "/components/painter/painter"
},
"navigationBarTitleText": "邀请海报",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white"
}
\ No newline at end of file
<!--pages/ininvite/ininvite.wxml-->
<view class='box'>
<canvas style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="firstCanvas"></canvas>
<view class="bomBtn">
<button class='btn' bindtap='save'>保存图片</button>
<button class='btn' open-type="share">邀请好友</button>
</view>
</view>
\ No newline at end of file
/* pages/ininvite/ininvite.wxss */
page{
background-color: #000000;
}
.box{
width: 100%;
}
canvas{
margin: 20rpx auto;
}
/* 底部按钮 */
.bomBtn{
width: 100%;
height: 81rpx;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
flex-direction: row;
}
.bomBtn .btn{
width: 50%;
font-size: 28rpx;
color: #fff;
background: #FC9F48;
border-radius: 0;
border: 0;
height: 100%;
line-height: 81rpx;
}
.bomBtn .btn:nth-child(2){
background: #C20C0C;
border-radius: 0;
}
\ No newline at end of file
......@@ -9,12 +9,24 @@ Page({
},
onGotUserInfo: function (res) {
http.updateUserInfo();
wx.navigateBack({
delta: 1
})
},
boundParentByShareCode(code) {
var params = {
url: "/p/user/boundParentByShareCode",
method: "POST",
data: {
shareCode: code
},
callBack: (res) => {
console.log("绑定成功",res)
}
};
http.request(params);
},
/**
* 生命周期函数--监听页面加载
*/
......
......@@ -51,7 +51,7 @@ Page({
littleCommPage: [],
evaluate: -1,
isCollection: false,
isOverShare: true
// isOverShare: true
},
/**
......
......@@ -26,20 +26,35 @@ Page({
remark: "",
couponIds: [],
payType: 1,
balance: 100
balance: 0,
disabledBalance: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
onLoad: function (options) {
this.getUserAccount()
this.setData({
orderEntry: options.orderEntry,
});
},
getUserAccount: function () {
var params = {
url: "/p/user/userAccount",
method: "GET",
data: {},
callBack: res => {
this.setData({
balance: res.result.amount
})
console.log("res", res, this)
}
};
http.request(params);
},
//加载订单数据
loadOrderData: function() {
loadOrderData: function () {
var addrId = 0;
if (this.data.userAddr != null) {
addrId = this.data.userAddr.addrId;
......@@ -82,7 +97,6 @@ Page({
}
})
}
this.setData({
orderItems: orderItems,
actualTotal: res.actualTotal,
......@@ -91,6 +105,7 @@ Page({
userAddr: res.userAddr,
transfee: res.shopCartOrders[0].transfee,
shopReduce: res.shopCartOrders[0].shopReduce,
disabledBalance: this.data.balance < res.actualTotal ? true : false
});
},
errCallBack: res => {
......@@ -101,7 +116,7 @@ Page({
http.request(params);
},
payTypeChange(e){
payTypeChange(e) {
console.log(e.detail.value)
this.setData({
payType: e.detail.value
......@@ -132,7 +147,7 @@ Page({
/**
* 提交订单
*/
toPay: function() {
toPay: function () {
if (!this.data.userAddr) {
wx.showToast({
title: '请选择地址',
......@@ -140,12 +155,10 @@ Page({
})
return;
}
this.submitOrder();
},
submitOrder: function() {
submitOrder: function () {
wx.showLoading({
mask: true
});
......@@ -160,7 +173,16 @@ Page({
},
callBack: res => {
wx.hideLoading();
this.calWeixinPay(res.orderNumbers);
if (this.data.payType == 1) {
this.calWeixinPay(res.orderNumbers);
} else if (this.data.payType == 3) {
this.balancePay(res.orderNumbers)
} else {
wx.showToast({
title: '暂无此支付方式',
icon: "none"
})
}
}
};
http.request(params);
......@@ -169,7 +191,7 @@ Page({
/**
* 唤起微信支付
*/
calWeixinPay: function(orderNumbers) {
calWeixinPay: function (orderNumbers) {
wx.showLoading({
mask: true
});
......@@ -180,7 +202,7 @@ Page({
payType: 1,
orderNumbers: orderNumbers
},
callBack: function(res) {
callBack: function (res) {
wx.hideLoading();
wx.requestPayment({
timeStamp: res.timeStamp,
......@@ -205,18 +227,46 @@ Page({
};
http.request(params);
},
/**
* 余额支付
*/
balancePay: function (orderNumbers) {
wx.showLoading({
mask: true
});
var params = {
url: "/p/order/balancePay",
method: "POST",
data: {
payType: 3,
orderNumbers: orderNumbers
},
callBack: function (res) {
wx.hideLoading();
// console.log("支付成功");
wx.navigateTo({
url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
})
},
errCallBack: function () {
wx.navigateTo({
url: '/pages/pay-result/pay-result?sts=0&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
})
}
};
http.request(params);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
onShow: function () {
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
if (currPage.data.selAddress == "yes") {
......@@ -231,51 +281,51 @@ Page({
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
onShareAppMessage: function () {
},
changeCouponSts: function(e) {
changeCouponSts: function (e) {
this.setData({
couponSts: e.currentTarget.dataset.sts
});
},
showCouponPopup: function() {
showCouponPopup: function () {
this.setData({
popupShow: true
});
},
closePopup: function() {
closePopup: function () {
this.setData({
popupShow: false
});
......@@ -284,7 +334,7 @@ Page({
/**
* 去地址页面
*/
toAddrListPage: function() {
toAddrListPage: function () {
wx.navigateTo({
url: '/pages/delivery-address/delivery-address?order=0',
})
......@@ -292,7 +342,7 @@ Page({
/**
* 确定选择好的优惠券
*/
choosedCoupon: function() {
choosedCoupon: function () {
this.loadOrderData();
this.setData({
popupShow: false
......@@ -302,7 +352,7 @@ Page({
/**
* 优惠券子组件发过来
*/
checkCoupon: function(e) {
checkCoupon: function (e) {
var ths = this;
let index = ths.data.couponIds.indexOf(e.detail.couponId);
if (index === -1) {
......
......@@ -148,7 +148,7 @@
</view>
<view class="btn">
<label>
<radio value="3" checked="{{payType == 3}}" disabled="{{!balance}}" color="#eb2444" />
<radio value="3" checked="{{payType == 3}}" disabled="{{disabledBalance}}" color="#eb2444" />
</label>
</view>
</view>
......
......@@ -9,27 +9,28 @@ Page({
data: {
orderAmount: '',
sts: '',
collectionCount: 0
collectionCount: 0,
userAccount: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
onShow: function () {
//加载订单数字
var ths = this;
......@@ -39,7 +40,7 @@ Page({
url: "/p/myOrder/orderCount",
method: "GET",
data: {},
callBack: function(res) {
callBack: function (res) {
wx.hideLoading();
ths.setData({
orderAmount: res
......@@ -48,78 +49,82 @@ Page({
};
http.request(params);
this.showCollectionCount();
this.getUserAccount()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
onShareAppMessage: function () {
},
toDistCenter: function () {
wx.showToast({
icon: "none",
title: '正在开发中'
wx.navigateTo({
url: '/pages/distribution/index',
})
},
toCouponCenter: function() {
toCouponCenter: function () {
wx.showToast({
icon: "none",
title: '正在开发中'
})
},
toMyCouponPage: function() {
toMyCouponPage: function () {
wx.showToast({
icon: "none",
title: '正在开发中'
})
},
toAddressList: function() {
toInvitePage: function () {
wx.navigateTo({
url: '/pages/invite/invite',
})
},
toAddressList: function () {
wx.navigateTo({
url: '/pages/delivery-address/delivery-address',
})
},
// 跳转绑定手机号
toBindingPhone: function() {
toBindingPhone: function () {
wx.navigateTo({
url: '/pages/binding-phone/binding-phone',
})
},
toOrderListPage: function(e) {
toOrderListPage: function (e) {
var sts = e.currentTarget.dataset.sts;
wx.navigateTo({
url: '/pages/orderList/orderList?sts=' + sts,
......@@ -128,14 +133,14 @@ Page({
/**
* 查询所有的收藏量
*/
showCollectionCount: function() {
showCollectionCount: function () {
var ths = this;
wx.showLoading();
var params = {
url: "/p/user/collection/count",
method: "GET",
data: {},
callBack: function(res) {
callBack: function (res) {
wx.hideLoading();
ths.setData({
collectionCount: res
......@@ -144,10 +149,25 @@ Page({
};
http.request(params);
},
// 用户余额/积分
getUserAccount: function () {
var params = {
url: "/p/user/userAccount",
method: "GET",
data: {},
callBack: res => {
this.setData({
userAccount: res.result,
})
console.log("res", res, this)
}
};
http.request(params);
},
/**
* 我的收藏跳转
*/
myCollectionHandle: function() {
myCollectionHandle: function () {
var url = '/pages/prod-classify/prod-classify?sts=5';
var id = 0;
var title = "我的收藏商品";
......
......@@ -9,10 +9,20 @@
<open-data type="userNickName"></open-data>
</view>
</view>
<view class='binding-phone'>
<view class="prod-col" style="margin-top: 0;padding-top: 0;">
<view class="col-item" bindtap=''>
<view class="num">{{userAccount.amount || 0}}</view>
<view class="tit">余额</view>
</view>
<view class="col-item">
<view class="num">{{userAccount.integral || 0}}</view>
<view class="tit">积分</view>
</view>
</view>
<!-- <view class='binding-phone'>
<text class='show-tip'>绑定手机号后可查看订单和领取优惠券,</text>
<text class='gotobinding' bindtap='toBindingPhone'>去绑定</text>
</view>
</view> -->
<!-- end 用户信息 -->
<view class='list-cont'>
......@@ -87,6 +97,13 @@
</view>
<view class='arrowhead'></view>
</view>
<view class='memu-item' bindtap='toInvitePage'>
<view class="i-name">
<image src='../../images/icon/toDelivery.png'></image>
<text>我要邀请</text>
</view>
<view class='arrowhead'></view>
</view>
<view class='memu-item' bindtap='toAddressList'>
<view class="i-name">
<image src='../../images/icon/myAddr.png'></image>
......
// pages/newly/redpacket.js
// var util = require('../../config/util.js');
// var api = require('../../config/api.js');
Page({
/**
* 页面的初始数据
*/
data: {
imgStr: '',
amount: '',
name: '',
actualAmount: '',
how: false,//是否显示如何上传收款码提示框
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.getData();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
getData() {
},
gotoShow: function() {
var that = this
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function(res) {
// success
var tempFilePaths = res.tempFilePaths;
// that.setData({
// imgStr: wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
// })
that.setData({
imgStr: res.tempFilePaths
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
amountinput(e) {
let value = e.detail.value
let actualAmount = (value * 0.92).toFixed(2);
console.log(value, actualAmount)
this.setData({
amount: value,
actualAmount: actualAmount
})
},
nameinput(e) {
let value = e.detail.value
console.log(value)
this.setData({
name: value
})
},
bankinput(e) {
let value = e.detail.value
console.log(value)
this.setData({
bank: value
})
},
bankCardinput(e) {
let value = e.detail.value
console.log(value)
this.setData({
bankCard: value
})
},
//最新提现做法
inputimg: function() {
let that = this;
var token = wx.getStorageSync('token');
var openid = wx.getStorageSync('openid')
util.request(api.newly_balanceWithdraw, {
token: token,
openid: openid,
amount: that.data.amount,
name: that.data.name,
bank: that.data.bank,
bankCard: that.data.bankCard
}).then(function (res) {
if (res.status === 200) {
wx.hideLoading()
wx.showToast({
title: '操作成功,我们将尽快为您提现',
icon: 'none'
})
} else {
wx.hideLoading()
wx.showToast({
title: res.desc,
icon: 'none'
})
}
});
},
//之前提现做法
inputimg2: function() {
let that = this;
if (that.data.imgStr != '' && that.data.amount > 0 && that.data.name != '') {
console.log(that.data.imgStr)
wx.showLoading({
title: '正在上传图片,请等待...'
});
var token = wx.getStorageSync('token');
if (token) {
wx.uploadFile({
url: api.newly_balanceWithdraw, //仅为示例,非真实的接口地址
filePath: that.data.imgStr[0],
name: 'file',
formData: {
token: token,
amount: that.data.amount,
name: that.data.name
},
success: function(res) {
console.log(res)
wx.hideLoading()
if (res.statusCode == 200) {
var obj = JSON.parse(res.data)
console.log(obj, obj.status)
if (obj.status==200){
wx.showToast({
title: '操作成功,我们将尽快为您提现',
icon: 'none'
})
that.setData({
imgStr: '',
amount: '',
name: ''
})
}else{
wx.showToast({
title: obj.desc,
icon: 'none'
})
}
} else {
wx.showToast({
title: '操作失败,请稍后重试',
icon: 'none'
})
}
}
})
// util.request(api.newly_balanceWithdraw, {
// token: token,
// file: that.data.imgStr,
// amount: that.data.amount,
// name: that.data.name
// }).then(function (res) {
// if (res.status === 200) {
// wx.hideLoading()
// wx.showToast({
// title: '操作成功,我们将尽快为您提现',
// icon: 'none'
// })
// } else {
// wx.hideLoading()
// wx.showToast({
// title: res.desc,
// icon: 'none'
// })
// }
// });
}
} else {
wx.showToast({
title: '请填写完整的提现信息',
icon: 'none'
})
}
},
//点击如何上传收款码
showHow(){
this.setData({
how: true,
});
},
hideHow(){
this.setData({
how: false,
})
}
})
\ No newline at end of file
{
"navigationBarTitleText": "余额提现"
}
\ No newline at end of file
<!--pages/newly/redpacket.wxml-->
<view class="container">
<view class='content'>
<view class='top'>
<view class='li'>
<text class='txt'>收款人</text>
<input class='input' type='text' value="{{name}}" bindinput="nameinput" placeholder-class='phcolor' placeholder='请输入收款人姓名'></input>
</view>
<view class='li'>
<text class='txt'>开户行</text>
<input class='input' type='text' value="{{bank}}" bindinput="bankinput" placeholder-class='phcolor' placeholder='请输入开户行'></input>
</view>
<view class='li'>
<text class='txt'>银行卡号</text>
<input class='input' type='text' value="{{bankCard}}" bindinput="bankCardinput" placeholder-class='phcolor' placeholder='请输入银行卡号'></input>
</view>
<view class='li'>
<text class='txt'>提现金额</text>
<input class='input' type='text' value="{{amount}}" bindinput="amountinput" placeholder-class='phcolor' placeholder='请输入提现金额'></input>
</view>
<view class='li'>
<text class='txt'>到账金额</text>
<text class='input' wx:if="{{amount>=50}}">{{actualAmount}}</text>
</view>
</view>
</view>
<view class="botton-container">
<!-- <view class='inputimg' type="default" bindtap="gotoShow">点击上传您的收款码</view> -->
<view class='inputimg' type="default" bindtap="inputimg">48小时内到账,确认提现</view>
<!-- <view class='how-container' bindtap="showHow">
<image class='how-img' src="/images/newly/notice.png"></image>
<text class='how-txt'>如何上传收款码?</text>
</view> -->
</view>
<view class="notice-container">
<text class='txt-notice-title'>【温馨提醒】</text>
<text class='txt-notice'></text>
<text class='txt-notice'>1、金额满200元方可提现;\n2、提现收0.6%手续费;\n3、购物可全额抵扣;</text>
</view>
<view class="coupon-notice-window" wx:if="{{how}}">
<view class="container">
<view class="root-corner"></view>
<view class="root">
<view class="content-container">
<text class="title">提示</text>
<!-- 微信 -->
<view class="row-container margin-top">
<image class="logo" src="/images/newly/wechat.png"></image>
<text class="logo-text">如何传微信收款码?</text>
</view>
<text class="logo-desc">1、打开微信,点击右上角“+”\n2、点击收款码,再点二维码收款\n3、保存收款码即可上传</text>
<!-- 支付宝 -->
<view class="row-container margin-top">
<image class="logo" src="/images/newly/alipay.png"></image>
<text class="logo-text">如何传支付宝收款码?</text>
</view>
<text class="logo-desc">1、打开支付宝,点击收钱”\n2、保存收款码即可上传</text>
</view>
<view class="btn" bindtap="hideHow">
<text class="btn-text">知道啦</text>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
page {
background: #f4f4f4;
}
.container {
background: #f4f4f4;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
padding: 40rpx 20rpx 0 20rpx;
display: flex;
flex-direction: column;
}
.top {
float: left;
width: 95%;
background-color: #fff;
border-radius: 20rpx;
box-sizing: border-box;
padding: 10rpx 40rpx;
}
.top .li-line {
width: 100%;
height: 3rpx;
background-color: #CCCCCC;
}
.top .li {
float: left;
width: 100%;
height: 120rpx;
line-height: 120rpx;
position: relative;
box-sizing: border-box;
padding-left: 180rpx;
font-size: 34rpx;
}
.top .li .txt {
position: absolute;
left: 0;
top: 0;
width: 180rpx;
font-size: 37rpx;
color: #333;
}
.top .li .input {
float: left;
width: 100%;
border: 0;
height: 120rpx;
line-height: 120rpx;
font-size: 30rpx;
}
.phcolor {
font-size: 30rpx;
color: #C4C4C4;
}
.top .showimg {
float: left;
width: 100%;
}
.botton-container{
width: 100%;
margin-top: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.botton-container .inputimg {
width: 95%;
font-size: 30rpx;
height: 76rpx;
line-height: 76rpx;
margin-top: 10rpx;
background-color: #E4BC98;
text-align: center;
border-radius: 15rpx;
color: rgb(83, 37, 3);
}
.botton-container .inputimg2 {
width: 95%;
font-size: 30rpx;
height: 76rpx;
line-height: 76rpx;
margin-top: 30rpx;
background-color: rgb(235, 84, 1);
color: #fff;
text-align: center;
border-radius: 15rpx;
}
.how-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 30rpx;
}
.how-container .how-img{
width: 30rpx;
height: 30rpx;
}
.how-container .how-txt{
color: black;
font-size: 28rpx;
margin-left: 10rpx;
}
.notice-container{
width: 100%;
display: flex;
flex-direction: column;
margin-left: 100rpx;
margin-top: 50rpx;
}
.txt-notice{
font-size: 26rpx;
line-height: 50rpx;
color: rgba(0, 0, 0, 1);
}
.txt-notice-title{
font-size: 26rpx;
line-height: 50rpx;
color: rgb(235, 84, 1);
}
.coupon-notice-window{
position: fixed;
z-index: 998;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.coupon-notice-window .container{
background-color: rgba(0, 0, 0, 0);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.coupon-notice-window .container .root-corner{
position: absolute;
z-index: 666;
width: 600rpx;
height: 800rpx;
margin-top: 20rpx;
border-radius: 25rpx;
background-color: white;
}
.coupon-notice-window .container .root{
position: absolute;
z-index: 667;
width: 600rpx;
height: 800rpx;
}
.coupon-notice-window .container .content-container{
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 50rpx;
margin-right: 10rpx;
}
.coupon-notice-window .container .content-container .title{
color: black;
font-size: 40rpx;
width: 100%;
text-align: center;
margin-top: 70rpx;
margin-left: -20rpx;
font-weight: bold;
}
.coupon-notice-window .container .content-container .row-container{
display: flex;
flex-direction: row;
align-items: center
}
.margin-top{
margin-top: 20rpx;
}
.logo {
width: 50rpx;
height: 50rpx;
}
.logo-text{
margin-left: 15rpx;
color: black;
font-size: 35rpx;
font-weight: bold;
}
.logo-desc{
font-size: 33rpx;
color: rgb(62, 62, 62);
margin-top: 20rpx;
margin-bottom: 40rpx;
}
.coupon-notice-window .container .btn{
width: 450rpx;
height: 70rpx;
margin-top: 20rpx;
border-radius: 15rpx;
background-color: rgb(235, 84, 1);
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.coupon-notice-window .container .btn .btn-text{
font-size: 34rpx;
color: white;
}
\ No newline at end of file
// pages/userAccount/comDetails/index.js
// var util = require('../../../config/util.js');
// var api = require('../../../config/api.js');
// var user = require('../../../services/user.js');
// var utils = require('../../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
},
// 获取页面数据
myAccount(){
var that = this;
var token = wx.getStorageSync('token');
util.request(api.myAccount, {'token': token}).then(res => {
that.setData({
pageInfo: res.data
})
})
},
// 页面跳转
goPage(data){
wx.navigateTo({
url: data.currentTarget.dataset.page,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.myAccount();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {},
"navigationBarTitleText": "佣金明细"
}
\ No newline at end of file
<!--pages/userAccount/comDetails/index.wxml-->
<view class="page-view">
<!-- 头部数据 -->
<view class="head-box">
<view class="title-text">累计收入(元)</view>
<view class="title-num">¥{{pageInfo.incomeTotal}}</view>
<view class="title-li">
<view>
<text>可提现佣金</text>
<text>¥{{pageInfo.toBeWithdrawal}}</text>
</view>
<view>
<text>待打款佣金</text>
<text>¥{{pageInfo.pendingPayment}}</text>
</view>
<view>
<text>累计提现金额</text>
<text>¥{{pageInfo.withdrawalSuccessful}}</text>
</view>
</view>
</view>
<!-- 菜单列表 -->
<view class="menu-box">
<view bindtap="goPage" data-page="/pages/newly/balanceWithdraw">
<image src="../../../images/icon/cash.png"></image>
<text>提现申请</text>
</view>
<view bindtap="goPage" data-page="/pages/userAccount/distributionOrder/index">
<image src="../../../images/icon/management@2x.png"></image>
<text>账户明细</text>
</view>
<view bindtap="goPage" data-page="/pages/userAccount/withdrawalRecord/index">
<image src="../../../images/icon/detaileds@2x.png"></image>
<text>提现记录</text>
</view>
</view>
</view>
\ No newline at end of file
/* pages/userAccount/comDetails/index.wxss */
page {
background: #f4f4f4;
}
.page-view {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.head-box {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
color: white;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
}
.title-text {
margin-top: 40rpx;
font-size: 32rpx;
}
.title-num {
margin: 10rpx 0 0 0;
font-size: 30rpx;
}
.title-li {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 40rpx 0 40rpx 0;
}
.title-li view {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.title-li view text {
width: 100%;
text-align: center;
font-size: 30rpx;
margin: 10rpx 0 0 0;
}
.menu-box {
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0rpx 1rpx 15rpx #bababa;
width: 690rpx;
padding: 30rpx 0;
background: white;
border-radius: 20rpx;
margin: 40rpx 0;
}
.menu-box view {
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
}
.menu-box view image {
width: 67rpx;
height: 64rpx;
margin: 20rpx 0 0 20rpx;
}
.menu-box view text {
font-size: 28rpx;
}
\ No newline at end of file
// var util = require('../../../config/util.js');
// var api = require('../../../config/api.js');
// var user = require('../../../services/user.js');
// var utils = require('../../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
// pageImgHead: api.Url_URI,
tabs: [
{ name: '全部', type: 0 },
{ name: '待分成', type: 1 },
{ name: '已分成', type: 2 },
{ name: '取消分成', type: 3 }
],
getTabs: 0,
pageNo: 1,
list: [],
total: 0
},
// 选项卡切换
tabsGet(data) {
this.setData({ getTabs: data.currentTarget.dataset.index, list: [] })
this.userMyTeam(data.currentTarget.dataset.index)
},
// 列表内容
userMyTeam(type) {
var that = this;
var token = wx.getStorageSync('token');
var userInfo = JSON.parse(wx.getStorageSync('userinfo'));
util.request(api.distributionOrder, {
'type': that.data.tabs[type].type,
'token': token,
'pageNo': that.data.pageNo,
'pageSize': 10
}).then(res => {
var info = res.data.pageBean.list;
// debugger
for (var i in info) {
info[i].amountAll = (info[i].amount * info[i].goodsNum).toFixed(2)
that.data.list.push(info[i])
}
that.setData({
list: that.data.list,
total: res.data.pageBean.totalCount
})
console.log(that.data.list)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.userMyTeam(0);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.total > this.data.list.length) {
that.setData({
pageNo: pageNo++
})
// this.userMyTeam(this.data.tabs[this.data.getTabs].type)
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {},
"navigationBarTitleText": "分销订单"
}
\ No newline at end of file
<view class="page">
<!-- 选项卡 -->
<view class="tabs">
<view wx:for="{{tabs}}" wx:key="index" bindtap="tabsGet" data-index="{{index}}"
class="{{getTabs == index ? 'tabsTrue' : 'tabsFalse'}}">{{item.name}}</view>
</view>
<!-- 列表展示 -->
<view class="list-box">
<!-- 列表展示 -->
<view class="li-box" wx:for="{{list}}" wx:key="index">
<view class="li-head">
<text>分销等级:{{item.distributionLevel}}</text>
<text>下单人:{{item.userName}}</text>
</view>
<view class="li-body">
<image src="{{pageImgHead}}{{item.bannerJson}}"></image>
<view class="li-user">
<text>{{item.goodsName}}</text>
<text>x{{item.goodsNum}}</text>
</view>
<view class="li-num">¥{{item.goodsAmount}}</view>
</view>
<view class="li-bottom">
<view>
<text>订单编号:{{item.subOrderId}}</text>
<text>下单时间:{{item.insertTime}}</text>
</view>
<view>佣金:¥{{item.amountAll}}</view>
</view>
</view>
<!-- 暂无内容 -->
<view class="offList" wx:if="{{list.length == 0}}">—— 暂无内容 ——</view>
</view>
</view>
\ No newline at end of file
page {
background: #f4f4f4;
}
.tabs{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
background: white;
position: fixed;
top: 0;
}
.tabs view{
width: 100%;
text-align: center;
}
.tabsTrue{
font-size: 32rpx;
font-weight: bold;
}
.tabsFalse{
font-size: 28rpx;
color: #999999;
}
.list-box{
margin-top: 90rpx;
display: flex;
align-items: center;
flex-direction: column;
min-height: 80vh;
}
.li-box{
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0rpx 1rpx 15rpx #bababa;
width: 690rpx;
padding: 30rpx 0;
background: white;
border-radius: 20rpx;
margin: 20rpx 0;
}
.li-box image{
width: 130rpx;
height: 130rpx;
margin: 0 20rpx 0 20rpx;
}
.li-body{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
margin: 20rpx 0
}
.li-user{
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
font-size: 30rpx;
margin: 0 0 0 20rpx;
height: 130rpx;
}
.li-user text{
width: 100%;
}
.li-user text:nth-child(1){
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.li-user text:nth-child(2){
color: #999999;
}
.li-num{
color: #030521;
font-size: 32rpx;
margin: 0 20rpx;
font-weight: bold;
}
.offList{
font-size: 30rpx;
color: #999999;
}
.li-head{
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
border-bottom: 1rpx solid #F2F2F2;
padding: 0 0 20rpx 0;
}
.li-head text:nth-child(1){
flex: 1;
font-size: 30rpx;
margin-left: 20rpx;
}
.li-head text:nth-child(2){
font-size: 30rpx;
margin-right: 20rpx;
}
.li-bottom{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
border-top: 1rpx solid #F2F2F2;
padding: 20rpx 0 0 0;
}
.li-bottom view:nth-child(1){
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 0 0 20rpx;
}
.li-bottom view:nth-child(1) text{
width: 100%;
font-size: 24rpx;
color: #999999;
}
.li-bottom view:nth-child(2){
font-size: 32rpx;
color: #030521;
font-weight: bold;
margin: 0 20rpx;
}
\ No newline at end of file
// pages/userAccount/myTeam/index.js
// var util = require('../../../config/util.js');
// var api = require('../../../config/api.js');
// var user = require('../../../services/user.js');
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [{name: '一级会员'}, {name: '二级会员'}],
getTabs: 0,
list: []
},
// 选项卡切换
tabsGet(data){
this.setData({ getTabs: data.currentTarget.dataset.index, list: [] })
this.userMyTeam(data.currentTarget.dataset.index)
},
// 列表内容
userMyTeam(type){
var that = this;
var token = wx.getStorageSync('token');
var userInfo = JSON.parse(wx.getStorageSync('userinfo'));
util.request(api.userMyTeam, {
'type': type + 1,
'token': token
}).then(res => {
that.setData({
list: res.data.teamParamList
})
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.userMyTeam(0);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {},
"navigationBarTitleText": "我的团队"
}
\ No newline at end of file
<!--pages/userAccount/myTeam/index.wxml-->
<view class="page">
<!-- 选项卡 -->
<view class="tabs">
<view wx:for="{{tabs}}" wx:key="index" bindtap="tabsGet" data-index="{{index}}"
class="{{getTabs == index ? 'tabsTrue' : 'tabsFalse'}}">{{item.name}}</view>
</view>
<!-- 列表展示 -->
<view class="list-box">
<!-- 列表展示 -->
<view class="li-box" wx:for="{{list}}" wx:key="index">
<image src="{{item.picture}}"></image>
<view class="li-user">
<text>会员名称:{{item.userName}}</text>
<text>成为会员:{{itme.registerTime}}</text>
</view>
<view class="li-num">
<text>¥{{item.amount}}</text>
<view>{{item.teamNum}}个成员</view>
</view>
</view>
<!-- 暂无内容 -->
<view class="offList" wx:if="{{list.length == 0}}">—— 暂无内容 ——</view>
</view>
</view>
\ No newline at end of file
/* pages/userAccount/myTeam/index.wxss */
page {
background: #f4f4f4;
}
.tabs{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
background: white;
position: fixed;
top: 0;
}
.tabs view{
width: 100%;
text-align: center;
}
.tabsTrue{
font-size: 32rpx;
font-weight: bold;
}
.tabsFalse{
font-size: 28rpx;
color: #999999;
}
.list-box{
margin-top: 90rpx;
display: flex;
align-items: center;
flex-direction: column;
min-height: 80vh;
}
.li-box{
display: flex;
align-items: center;
flex-direction: row;
box-shadow: 0rpx 1rpx 15rpx #bababa;
width: 690rpx;
padding: 30rpx 0;
background: white;
border-radius: 20rpx;
margin: 20rpx 0;
}
.li-box image{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin: 0 20rpx 0 20rpx;
}
.li-user{
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
font-size: 30rpx;
}
.li-user text{
width: 100%;
}
.li-user text:nth-child(2){
color: #999999;
}
.li-num{
display: flex;
align-items: center;
flex-direction: column;
margin: 0 20rpx 0 0;
}
.li-num text{
font-size: 30rpx;
}
.li-num view{
color: white;
background: #030521;
font-size: 22rpx;
height: 40rpx;
line-height: 40rpx;
padding: 0 10rpx;
border-radius: 10rpx;
}
.offList{
font-size: 30rpx;
color: #999999;
}
\ No newline at end of file
// var util = require('../../../config/util.js');
// var api = require('../../../config/api.js');
// var user = require('../../../services/user.js');
// var utils = require('../../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [
{ name: '全部', type: 3 },
{ name: '待审核', type: 0 },
{ name: '已审核', type: 1 },
{ name: '未通过', type: 2 }
],
getTabs: 0,
pageNo: 1,
list: [],
total: 0
},
// 选项卡切换
tabsGet(data) {
this.setData({ getTabs: data.currentTarget.dataset.index, list: [] })
this.userMyTeam(data.currentTarget.dataset.index)
},
// 列表内容
userMyTeam(type) {
var that = this;
var token = wx.getStorageSync('token');
var userInfo = JSON.parse(wx.getStorageSync('userinfo'));
util.request(api.listWithdraw, {
'type': that.data.tabs[type].type,
'token': token,
'pageNo': that.data.pageNo,
'pageSize': 10
}).then(res => {
var info = res.data.withdrawList.list;
// debugger
for(var i in info){
info[i].createTime = utils.formatTimeTwo(info[i].createTime.time, 'Y:M:D h:m:s')
that.data.list.push(info[i])
}
that.setData({
list: that.data.list,
total: res.data.withdrawList.totalCount
})
console.log(that.data.list)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.userMyTeam(0);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.total > this.data.list.length){
that.setData({
pageNo: pageNo++
})
this.userMyTeam(this.data.tabs[this.data.getTabs].type)
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {},
"navigationBarTitleText": "提现记录"
}
\ No newline at end of file
<view class="page">
<!-- 选项卡 -->
<view class="tabs">
<view wx:for="{{tabs}}" wx:key="index" bindtap="tabsGet" data-index="{{index}}"
class="{{getTabs == index ? 'tabsTrue' : 'tabsFalse'}}">{{item.name}}</view>
</view>
<!-- 列表展示 -->
<view class="list-box">
<!-- 列表展示 -->
<view class="li-box" wx:for="{{list}}" wx:key="index">
<view class="li-head">
<text wx:if="{{item.status == 0}}">待审核</text>
<text wx:if="{{item.status == 1}}">已审核</text>
<text wx:if="{{item.status == 0}}">未通过</text>
<text>-</text>
</view>
<view class="li-body">
<view class="li-user">
<text>姓名:{{item.name}}</text>
<text>提现时间:{{item.createTime}}</text>
</view>
<view class="li-num">¥{{item.amount}}</view>
</view>
</view>
<!-- 暂无内容 -->
<view class="offList" wx:if="{{list.length == 0}}">—— 暂无内容 ——</view>
</view>
</view>
\ No newline at end of file
page {
background: #f4f4f4;
}
.tabs{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
background: white;
position: fixed;
top: 0;
}
.tabs view{
width: 100%;
text-align: center;
}
.tabsTrue{
font-size: 32rpx;
font-weight: bold;
}
.tabsFalse{
font-size: 28rpx;
color: #999999;
}
.list-box{
margin-top: 90rpx;
display: flex;
align-items: center;
flex-direction: column;
min-height: 80vh;
}
.li-box{
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0rpx 1rpx 15rpx #bababa;
width: 690rpx;
padding: 30rpx 0;
background: white;
border-radius: 20rpx;
margin: 20rpx 0;
}
.li-box image{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin: 0 20rpx 0 20rpx;
}
.li-body{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
}
.li-user{
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
font-size: 30rpx;
margin: 0 0 0 20rpx;
}
.li-user text{
width: 100%;
}
.li-user text:nth-child(2){
color: #999999;
}
.li-num{
color: #030521;
font-size: 32rpx;
margin-right: 20rpx;
}
.offList{
font-size: 30rpx;
color: #999999;
}
.li-head{
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
border-bottom: 1rpx solid #F2F2F2;
padding: 0 0 20rpx 0;
}
.li-head text:nth-child(1){
flex: 1;
font-size: 30rpx;
margin-left: 20rpx;
}
.li-head text:nth-child(2){
font-size: 30rpx;
margin-right: 20rpx;
}
\ No newline at end of file
var domain = "http://192.168.31.105:8086/capi"; //统一接口域名,测试环境
var domain = "http://192.168.31.110:8086/capi"; //统一接口域名,测试环境
exports.domain = domain;
......@@ -19,7 +19,7 @@ function request(params, isGetTonken) {
method: params.method == undefined ? "POST" : params.method,
dataType: 'json',
responseType: params.responseType == undefined ? 'text' : params.responseType,
success: function(res) {
success: function (res) {
if (res.statusCode == 200) {
//如果有定义了params.callBack,则调用 params.callBack(res.data)
if (params.callBack) {
......@@ -56,7 +56,7 @@ function request(params, isGetTonken) {
wx.hideLoading();
}
},
fail: function(err) {
fail: function (err) {
wx.hideLoading();
wx.showToast({
title: "服务器出了点小差",
......@@ -67,7 +67,7 @@ function request(params, isGetTonken) {
}
//通过code获取token,并保存到缓存
var getToken = function() {
var getToken = function () {
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
......@@ -91,6 +91,7 @@ var getToken = function() {
wx.setStorageSync('token', '');
} else {
wx.setStorageSync('token', 'bearer' + result.access_token); //把token存入缓存,请求接口数据时要用
this.getUserInfo()
}
var globalData = getApp().globalData;
globalData.isLanding = false;
......@@ -103,7 +104,19 @@ var getToken = function() {
}
})
}
// 用户信息
function getUserInfo() {
var params = {
url: "/p/user/getUserInfo",
method: "GET",
data: {},
callBack: (res) => {
console.log('用户信息', res.result)
app.globalData.userInfo = res.result
}
};
http.request(params);
}
// 更新用户头像昵称
function updateUserInfo() {
wx.getUserInfo({
......@@ -127,7 +140,7 @@ function getCartCount() {
url: "/p/shopCart/prodCount",
method: "GET",
data: {},
callBack: function(res) {
callBack: function (res) {
if (res > 0) {
wx.setTabBarBadge({
index: 2,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment