ipad静态开始
王琛
commit
f72d87783e
|
|
@ -0,0 +1,24 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
.history
|
||||||
|
.hbuilderx
|
||||||
|
unpackage
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// onLaunch: function() {
|
||||||
|
// console.log('App Launch')
|
||||||
|
// },
|
||||||
|
// onShow: function() {
|
||||||
|
// console.log('App Show')
|
||||||
|
// },
|
||||||
|
// onHide: function() {
|
||||||
|
// console.log('App Hide')
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "/style/css/layout.css";
|
||||||
|
@import "style/css/main.css";
|
||||||
|
@import "style/css/flex-main.css";
|
||||||
|
@import "/wxcomponents/vant/dist/common/index.wxss";
|
||||||
|
@import "/style/iconfont.css";
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,425 @@
|
||||||
|
// Core code comes from https://github.com/davidshimjs/qrcodejs
|
||||||
|
var QRCode;
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
/**
|
||||||
|
* Get the type by string length
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {String} sText
|
||||||
|
* @param {Number} nCorrectLevel
|
||||||
|
* @return {Number} type
|
||||||
|
*/
|
||||||
|
function _getTypeNumber(sText, nCorrectLevel) {
|
||||||
|
var nType = 1;
|
||||||
|
var length = _getUTF8Length(sText);
|
||||||
|
|
||||||
|
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
|
||||||
|
var nLimit = 0;
|
||||||
|
|
||||||
|
switch (nCorrectLevel) {
|
||||||
|
case QRErrorCorrectLevel.L:
|
||||||
|
nLimit = QRCodeLimitLength[i][0];
|
||||||
|
break;
|
||||||
|
case QRErrorCorrectLevel.M:
|
||||||
|
nLimit = QRCodeLimitLength[i][1];
|
||||||
|
break;
|
||||||
|
case QRErrorCorrectLevel.Q:
|
||||||
|
nLimit = QRCodeLimitLength[i][2];
|
||||||
|
break;
|
||||||
|
case QRErrorCorrectLevel.H:
|
||||||
|
nLimit = QRCodeLimitLength[i][3];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (length <= nLimit) {
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
nType++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (nType > QRCodeLimitLength.length) {
|
||||||
|
throw new Error("Too long data");
|
||||||
|
}
|
||||||
|
|
||||||
|
return nType;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _getUTF8Length(sText) {
|
||||||
|
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
|
||||||
|
return replacedText.length + (replacedText.length != sText ? 3 : 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function QR8bitByte(data) {
|
||||||
|
this.mode = QRMode.MODE_8BIT_BYTE;
|
||||||
|
this.data = data;
|
||||||
|
this.parsedData = [];
|
||||||
|
|
||||||
|
// Added to support UTF-8 Characters
|
||||||
|
for (var i = 0, l = this.data.length; i < l; i++) {
|
||||||
|
var byteArray = [];
|
||||||
|
var code = this.data.charCodeAt(i);
|
||||||
|
|
||||||
|
if (code > 0x10000) {
|
||||||
|
byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
|
||||||
|
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
|
||||||
|
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||||
|
byteArray[3] = 0x80 | (code & 0x3F);
|
||||||
|
} else if (code > 0x800) {
|
||||||
|
byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
|
||||||
|
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||||
|
byteArray[2] = 0x80 | (code & 0x3F);
|
||||||
|
} else if (code > 0x80) {
|
||||||
|
byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
|
||||||
|
byteArray[1] = 0x80 | (code & 0x3F);
|
||||||
|
} else {
|
||||||
|
byteArray[0] = code;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parsedData.push(byteArray);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parsedData = Array.prototype.concat.apply([], this.parsedData);
|
||||||
|
|
||||||
|
if (this.parsedData.length != this.data.length) {
|
||||||
|
this.parsedData.unshift(191);
|
||||||
|
this.parsedData.unshift(187);
|
||||||
|
this.parsedData.unshift(239);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
QR8bitByte.prototype = {
|
||||||
|
getLength: function (buffer) {
|
||||||
|
return this.parsedData.length;
|
||||||
|
},
|
||||||
|
write: function (buffer) {
|
||||||
|
for (var i = 0, l = this.parsedData.length; i < l; i++) {
|
||||||
|
buffer.put(this.parsedData[i], 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// QRCodeModel
|
||||||
|
function QRCodeModel(typeNumber, errorCorrectLevel) {
|
||||||
|
this.typeNumber = typeNumber;
|
||||||
|
this.errorCorrectLevel = errorCorrectLevel;
|
||||||
|
this.modules = null;
|
||||||
|
this.moduleCount = 0;
|
||||||
|
this.dataCache = null;
|
||||||
|
this.dataList = [];
|
||||||
|
}
|
||||||
|
QRCodeModel.prototype = {
|
||||||
|
addData: function (data) { var newData = new QR8bitByte(data); this.dataList.push(newData); this.dataCache = null; }, isDark: function (row, col) {
|
||||||
|
if (row < 0 || this.moduleCount <= row || col < 0 || this.moduleCount <= col) { throw new Error(row + "," + col); }
|
||||||
|
return this.modules[row][col];
|
||||||
|
}, getModuleCount: function () { return this.moduleCount; }, make: function () { this.makeImpl(false, this.getBestMaskPattern()); }, makeImpl: function (test, maskPattern) {
|
||||||
|
this.moduleCount = this.typeNumber * 4 + 17; this.modules = new Array(this.moduleCount); for (var row = 0; row < this.moduleCount; row++) { this.modules[row] = new Array(this.moduleCount); for (var col = 0; col < this.moduleCount; col++) { this.modules[row][col] = null; } }
|
||||||
|
this.setupPositionProbePattern(0, 0); this.setupPositionProbePattern(this.moduleCount - 7, 0); this.setupPositionProbePattern(0, this.moduleCount - 7); this.setupPositionAdjustPattern(); this.setupTimingPattern(); this.setupTypeInfo(test, maskPattern); if (this.typeNumber >= 7) { this.setupTypeNumber(test); }
|
||||||
|
if (this.dataCache == null) { this.dataCache = QRCodeModel.createData(this.typeNumber, this.errorCorrectLevel, this.dataList); }
|
||||||
|
this.mapData(this.dataCache, maskPattern);
|
||||||
|
}, setupPositionProbePattern: function (row, col) { for (var r = -1; r <= 7; r++) { if (row + r <= -1 || this.moduleCount <= row + r) continue; for (var c = -1; c <= 7; c++) { if (col + c <= -1 || this.moduleCount <= col + c) continue; if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (2 <= r && r <= 4 && 2 <= c && c <= 4)) { this.modules[row + r][col + c] = true; } else { this.modules[row + r][col + c] = false; } } } }, getBestMaskPattern: function () {
|
||||||
|
var minLostPoint = 0; var pattern = 0; for (var i = 0; i < 8; i++) { this.makeImpl(true, i); var lostPoint = QRUtil.getLostPoint(this); if (i == 0 || minLostPoint > lostPoint) { minLostPoint = lostPoint; pattern = i; } }
|
||||||
|
return pattern;
|
||||||
|
}, createMovieClip: function (target_mc, instance_name, depth) {
|
||||||
|
var qr_mc = target_mc.createEmptyMovieClip(instance_name, depth); var cs = 1; this.make(); for (var row = 0; row < this.modules.length; row++) { var y = row * cs; for (var col = 0; col < this.modules[row].length; col++) { var x = col * cs; var dark = this.modules[row][col]; if (dark) { qr_mc.beginFill(0, 100); qr_mc.moveTo(x, y); qr_mc.lineTo(x + cs, y); qr_mc.lineTo(x + cs, y + cs); qr_mc.lineTo(x, y + cs); qr_mc.endFill(); } } }
|
||||||
|
return qr_mc;
|
||||||
|
}, setupTimingPattern: function () {
|
||||||
|
for (var r = 8; r < this.moduleCount - 8; r++) {
|
||||||
|
if (this.modules[r][6] != null) { continue; }
|
||||||
|
this.modules[r][6] = (r % 2 == 0);
|
||||||
|
}
|
||||||
|
for (var c = 8; c < this.moduleCount - 8; c++) {
|
||||||
|
if (this.modules[6][c] != null) { continue; }
|
||||||
|
this.modules[6][c] = (c % 2 == 0);
|
||||||
|
}
|
||||||
|
}, setupPositionAdjustPattern: function () {
|
||||||
|
var pos = QRUtil.getPatternPosition(this.typeNumber); for (var i = 0; i < pos.length; i++) {
|
||||||
|
for (var j = 0; j < pos.length; j++) {
|
||||||
|
var row = pos[i]; var col = pos[j]; if (this.modules[row][col] != null) { continue; }
|
||||||
|
for (var r = -2; r <= 2; r++) { for (var c = -2; c <= 2; c++) { if (r == -2 || r == 2 || c == -2 || c == 2 || (r == 0 && c == 0)) { this.modules[row + r][col + c] = true; } else { this.modules[row + r][col + c] = false; } } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, setupTypeNumber: function (test) {
|
||||||
|
var bits = QRUtil.getBCHTypeNumber(this.typeNumber); for (var i = 0; i < 18; i++) { var mod = (!test && ((bits >> i) & 1) == 1); this.modules[Math.floor(i / 3)][i % 3 + this.moduleCount - 8 - 3] = mod; }
|
||||||
|
for (var i = 0; i < 18; i++) { var mod = (!test && ((bits >> i) & 1) == 1); this.modules[i % 3 + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod; }
|
||||||
|
}, setupTypeInfo: function (test, maskPattern) {
|
||||||
|
var data = (this.errorCorrectLevel << 3) | maskPattern; var bits = QRUtil.getBCHTypeInfo(data); for (var i = 0; i < 15; i++) { var mod = (!test && ((bits >> i) & 1) == 1); if (i < 6) { this.modules[i][8] = mod; } else if (i < 8) { this.modules[i + 1][8] = mod; } else { this.modules[this.moduleCount - 15 + i][8] = mod; } }
|
||||||
|
for (var i = 0; i < 15; i++) { var mod = (!test && ((bits >> i) & 1) == 1); if (i < 8) { this.modules[8][this.moduleCount - i - 1] = mod; } else if (i < 9) { this.modules[8][15 - i - 1 + 1] = mod; } else { this.modules[8][15 - i - 1] = mod; } }
|
||||||
|
this.modules[this.moduleCount - 8][8] = (!test);
|
||||||
|
}, mapData: function (data, maskPattern) {
|
||||||
|
var inc = -1; var row = this.moduleCount - 1; var bitIndex = 7; var byteIndex = 0; for (var col = this.moduleCount - 1; col > 0; col -= 2) {
|
||||||
|
if (col == 6) col--; while (true) {
|
||||||
|
for (var c = 0; c < 2; c++) {
|
||||||
|
if (this.modules[row][col - c] == null) {
|
||||||
|
var dark = false; if (byteIndex < data.length) { dark = (((data[byteIndex] >>> bitIndex) & 1) == 1); }
|
||||||
|
var mask = QRUtil.getMask(maskPattern, row, col - c); if (mask) { dark = !dark; }
|
||||||
|
this.modules[row][col - c] = dark; bitIndex--; if (bitIndex == -1) { byteIndex++; bitIndex = 7; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
row += inc; if (row < 0 || this.moduleCount <= row) { row -= inc; inc = -inc; break; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
QRCodeModel.PAD0 = 0xEC;
|
||||||
|
QRCodeModel.PAD1 = 0x11;
|
||||||
|
QRCodeModel.createData = function (typeNumber, errorCorrectLevel, dataList) {
|
||||||
|
var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, errorCorrectLevel); var buffer = new QRBitBuffer(); for (var i = 0; i < dataList.length; i++) { var data = dataList[i]; buffer.put(data.mode, 4); buffer.put(data.getLength(), QRUtil.getLengthInBits(data.mode, typeNumber)); data.write(buffer); }
|
||||||
|
var totalDataCount = 0; for (var i = 0; i < rsBlocks.length; i++) { totalDataCount += rsBlocks[i].dataCount; }
|
||||||
|
if (buffer.getLengthInBits() > totalDataCount * 8) {
|
||||||
|
throw new Error("code length overflow. ("
|
||||||
|
+ buffer.getLengthInBits()
|
||||||
|
+ ">"
|
||||||
|
+ totalDataCount * 8
|
||||||
|
+ ")");
|
||||||
|
}
|
||||||
|
if (buffer.getLengthInBits() + 4 <= totalDataCount * 8) { buffer.put(0, 4); }
|
||||||
|
while (buffer.getLengthInBits() % 8 != 0) { buffer.putBit(false); }
|
||||||
|
while (true) {
|
||||||
|
if (buffer.getLengthInBits() >= totalDataCount * 8) { break; }
|
||||||
|
buffer.put(QRCodeModel.PAD0, 8); if (buffer.getLengthInBits() >= totalDataCount * 8) { break; }
|
||||||
|
buffer.put(QRCodeModel.PAD1, 8);
|
||||||
|
}
|
||||||
|
return QRCodeModel.createBytes(buffer, rsBlocks);
|
||||||
|
};
|
||||||
|
QRCodeModel.createBytes = function (buffer, rsBlocks) {
|
||||||
|
var offset = 0; var maxDcCount = 0; var maxEcCount = 0; var dcdata = new Array(rsBlocks.length); var ecdata = new Array(rsBlocks.length); for (var r = 0; r < rsBlocks.length; r++) {
|
||||||
|
var dcCount = rsBlocks[r].dataCount; var ecCount = rsBlocks[r].totalCount - dcCount; maxDcCount = Math.max(maxDcCount, dcCount); maxEcCount = Math.max(maxEcCount, ecCount); dcdata[r] = new Array(dcCount); for (var i = 0; i < dcdata[r].length; i++) { dcdata[r][i] = 0xff & buffer.buffer[i + offset]; }
|
||||||
|
offset += dcCount; var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount); var rawPoly = new QRPolynomial(dcdata[r], rsPoly.getLength() - 1); var modPoly = rawPoly.mod(rsPoly); ecdata[r] = new Array(rsPoly.getLength() - 1); for (var i = 0; i < ecdata[r].length; i++) { var modIndex = i + modPoly.getLength() - ecdata[r].length; ecdata[r][i] = (modIndex >= 0) ? modPoly.get(modIndex) : 0; }
|
||||||
|
}
|
||||||
|
var totalCodeCount = 0; for (var i = 0; i < rsBlocks.length; i++) { totalCodeCount += rsBlocks[i].totalCount; }
|
||||||
|
var data = new Array(totalCodeCount); var index = 0; for (var i = 0; i < maxDcCount; i++) { for (var r = 0; r < rsBlocks.length; r++) { if (i < dcdata[r].length) { data[index++] = dcdata[r][i]; } } }
|
||||||
|
for (var i = 0; i < maxEcCount; i++) { for (var r = 0; r < rsBlocks.length; r++) { if (i < ecdata[r].length) { data[index++] = ecdata[r][i]; } } }
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
var QRMode = { MODE_NUMBER: 1 << 0, MODE_ALPHA_NUM: 1 << 1, MODE_8BIT_BYTE: 1 << 2, MODE_KANJI: 1 << 3 };
|
||||||
|
var QRErrorCorrectLevel = { L: 1, M: 0, Q: 3, H: 2 };
|
||||||
|
var QRMaskPattern = { PATTERN000: 0, PATTERN001: 1, PATTERN010: 2, PATTERN011: 3, PATTERN100: 4, PATTERN101: 5, PATTERN110: 6, PATTERN111: 7 };
|
||||||
|
var QRUtil = {
|
||||||
|
PATTERN_POSITION_TABLE: [[], [6, 18], [6, 22], [6, 26], [6, 30], [6, 34], [6, 22, 38], [6, 24, 42], [6, 26, 46], [6, 28, 50], [6, 30, 54], [6, 32, 58], [6, 34, 62], [6, 26, 46, 66], [6, 26, 48, 70], [6, 26, 50, 74], [6, 30, 54, 78], [6, 30, 56, 82], [6, 30, 58, 86], [6, 34, 62, 90], [6, 28, 50, 72, 94], [6, 26, 50, 74, 98], [6, 30, 54, 78, 102], [6, 28, 54, 80, 106], [6, 32, 58, 84, 110], [6, 30, 58, 86, 114], [6, 34, 62, 90, 118], [6, 26, 50, 74, 98, 122], [6, 30, 54, 78, 102, 126], [6, 26, 52, 78, 104, 130], [6, 30, 56, 82, 108, 134], [6, 34, 60, 86, 112, 138], [6, 30, 58, 86, 114, 142], [6, 34, 62, 90, 118, 146], [6, 30, 54, 78, 102, 126, 150], [6, 24, 50, 76, 102, 128, 154], [6, 28, 54, 80, 106, 132, 158], [6, 32, 58, 84, 110, 136, 162], [6, 26, 54, 82, 110, 138, 166], [6, 30, 58, 86, 114, 142, 170]], G15: (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0), G18: (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0), G15_MASK: (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1), getBCHTypeInfo: function (data) {
|
||||||
|
var d = data << 10; while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15) >= 0) { d ^= (QRUtil.G15 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15))); }
|
||||||
|
return ((data << 10) | d) ^ QRUtil.G15_MASK;
|
||||||
|
}, getBCHTypeNumber: function (data) {
|
||||||
|
var d = data << 12; while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18) >= 0) { d ^= (QRUtil.G18 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18))); }
|
||||||
|
return (data << 12) | d;
|
||||||
|
}, getBCHDigit: function (data) {
|
||||||
|
var digit = 0; while (data != 0) { digit++; data >>>= 1; }
|
||||||
|
return digit;
|
||||||
|
}, getPatternPosition: function (typeNumber) { return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1]; }, getMask: function (maskPattern, i, j) { switch (maskPattern) { case QRMaskPattern.PATTERN000: return (i + j) % 2 == 0; case QRMaskPattern.PATTERN001: return i % 2 == 0; case QRMaskPattern.PATTERN010: return j % 3 == 0; case QRMaskPattern.PATTERN011: return (i + j) % 3 == 0; case QRMaskPattern.PATTERN100: return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0; case QRMaskPattern.PATTERN101: return (i * j) % 2 + (i * j) % 3 == 0; case QRMaskPattern.PATTERN110: return ((i * j) % 2 + (i * j) % 3) % 2 == 0; case QRMaskPattern.PATTERN111: return ((i * j) % 3 + (i + j) % 2) % 2 == 0; default: throw new Error("bad maskPattern:" + maskPattern); } }, getErrorCorrectPolynomial: function (errorCorrectLength) {
|
||||||
|
var a = new QRPolynomial([1], 0); for (var i = 0; i < errorCorrectLength; i++) { a = a.multiply(new QRPolynomial([1, QRMath.gexp(i)], 0)); }
|
||||||
|
return a;
|
||||||
|
}, getLengthInBits: function (mode, type) { if (1 <= type && type < 10) { switch (mode) { case QRMode.MODE_NUMBER: return 10; case QRMode.MODE_ALPHA_NUM: return 9; case QRMode.MODE_8BIT_BYTE: return 8; case QRMode.MODE_KANJI: return 8; default: throw new Error("mode:" + mode); } } else if (type < 27) { switch (mode) { case QRMode.MODE_NUMBER: return 12; case QRMode.MODE_ALPHA_NUM: return 11; case QRMode.MODE_8BIT_BYTE: return 16; case QRMode.MODE_KANJI: return 10; default: throw new Error("mode:" + mode); } } else if (type < 41) { switch (mode) { case QRMode.MODE_NUMBER: return 14; case QRMode.MODE_ALPHA_NUM: return 13; case QRMode.MODE_8BIT_BYTE: return 16; case QRMode.MODE_KANJI: return 12; default: throw new Error("mode:" + mode); } } else { throw new Error("type:" + type); } }, getLostPoint: function (qrCode) {
|
||||||
|
var moduleCount = qrCode.getModuleCount(); var lostPoint = 0; for (var row = 0; row < moduleCount; row++) {
|
||||||
|
for (var col = 0; col < moduleCount; col++) {
|
||||||
|
var sameCount = 0; var dark = qrCode.isDark(row, col); for (var r = -1; r <= 1; r++) {
|
||||||
|
if (row + r < 0 || moduleCount <= row + r) { continue; }
|
||||||
|
for (var c = -1; c <= 1; c++) {
|
||||||
|
if (col + c < 0 || moduleCount <= col + c) { continue; }
|
||||||
|
if (r == 0 && c == 0) { continue; }
|
||||||
|
if (dark == qrCode.isDark(row + r, col + c)) { sameCount++; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (sameCount > 5) { lostPoint += (3 + sameCount - 5); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var row = 0; row < moduleCount - 1; row++) { for (var col = 0; col < moduleCount - 1; col++) { var count = 0; if (qrCode.isDark(row, col)) count++; if (qrCode.isDark(row + 1, col)) count++; if (qrCode.isDark(row, col + 1)) count++; if (qrCode.isDark(row + 1, col + 1)) count++; if (count == 0 || count == 4) { lostPoint += 3; } } }
|
||||||
|
for (var row = 0; row < moduleCount; row++) { for (var col = 0; col < moduleCount - 6; col++) { if (qrCode.isDark(row, col) && !qrCode.isDark(row, col + 1) && qrCode.isDark(row, col + 2) && qrCode.isDark(row, col + 3) && qrCode.isDark(row, col + 4) && !qrCode.isDark(row, col + 5) && qrCode.isDark(row, col + 6)) { lostPoint += 40; } } }
|
||||||
|
for (var col = 0; col < moduleCount; col++) { for (var row = 0; row < moduleCount - 6; row++) { if (qrCode.isDark(row, col) && !qrCode.isDark(row + 1, col) && qrCode.isDark(row + 2, col) && qrCode.isDark(row + 3, col) && qrCode.isDark(row + 4, col) && !qrCode.isDark(row + 5, col) && qrCode.isDark(row + 6, col)) { lostPoint += 40; } } }
|
||||||
|
var darkCount = 0; for (var col = 0; col < moduleCount; col++) { for (var row = 0; row < moduleCount; row++) { if (qrCode.isDark(row, col)) { darkCount++; } } }
|
||||||
|
var ratio = Math.abs(100 * darkCount / moduleCount / moduleCount - 50) / 5; lostPoint += ratio * 10; return lostPoint;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var QRMath = {
|
||||||
|
glog: function (n) {
|
||||||
|
if (n < 1) { throw new Error("glog(" + n + ")"); }
|
||||||
|
return QRMath.LOG_TABLE[n];
|
||||||
|
}, gexp: function (n) {
|
||||||
|
while (n < 0) { n += 255; }
|
||||||
|
while (n >= 256) { n -= 255; }
|
||||||
|
return QRMath.EXP_TABLE[n];
|
||||||
|
}, EXP_TABLE: new Array(256), LOG_TABLE: new Array(256)
|
||||||
|
}; for (var i = 0; i < 8; i++) { QRMath.EXP_TABLE[i] = 1 << i; }
|
||||||
|
for (var i = 8; i < 256; i++) { QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath.EXP_TABLE[i - 8]; }
|
||||||
|
for (var i = 0; i < 255; i++) { QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i; }
|
||||||
|
function QRPolynomial(num, shift) {
|
||||||
|
if (num.length == undefined) { throw new Error(num.length + "/" + shift); }
|
||||||
|
var offset = 0; while (offset < num.length && num[offset] == 0) { offset++; }
|
||||||
|
this.num = new Array(num.length - offset + shift); for (var i = 0; i < num.length - offset; i++) { this.num[i] = num[i + offset]; }
|
||||||
|
}
|
||||||
|
QRPolynomial.prototype = {
|
||||||
|
get: function (index) { return this.num[index]; }, getLength: function () { return this.num.length; }, multiply: function (e) {
|
||||||
|
var num = new Array(this.getLength() + e.getLength() - 1); for (var i = 0; i < this.getLength(); i++) { for (var j = 0; j < e.getLength(); j++) { num[i + j] ^= QRMath.gexp(QRMath.glog(this.get(i)) + QRMath.glog(e.get(j))); } }
|
||||||
|
return new QRPolynomial(num, 0);
|
||||||
|
}, mod: function (e) {
|
||||||
|
if (this.getLength() - e.getLength() < 0) { return this; }
|
||||||
|
var ratio = QRMath.glog(this.get(0)) - QRMath.glog(e.get(0)); var num = new Array(this.getLength()); for (var i = 0; i < this.getLength(); i++) { num[i] = this.get(i); }
|
||||||
|
for (var i = 0; i < e.getLength(); i++) { num[i] ^= QRMath.gexp(QRMath.glog(e.get(i)) + ratio); }
|
||||||
|
return new QRPolynomial(num, 0).mod(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function QRRSBlock(totalCount, dataCount) { this.totalCount = totalCount; this.dataCount = dataCount; }
|
||||||
|
QRRSBlock.RS_BLOCK_TABLE = [[1, 26, 19], [1, 26, 16], [1, 26, 13], [1, 26, 9], [1, 44, 34], [1, 44, 28], [1, 44, 22], [1, 44, 16], [1, 70, 55], [1, 70, 44], [2, 35, 17], [2, 35, 13], [1, 100, 80], [2, 50, 32], [2, 50, 24], [4, 25, 9], [1, 134, 108], [2, 67, 43], [2, 33, 15, 2, 34, 16], [2, 33, 11, 2, 34, 12], [2, 86, 68], [4, 43, 27], [4, 43, 19], [4, 43, 15], [2, 98, 78], [4, 49, 31], [2, 32, 14, 4, 33, 15], [4, 39, 13, 1, 40, 14], [2, 121, 97], [2, 60, 38, 2, 61, 39], [4, 40, 18, 2, 41, 19], [4, 40, 14, 2, 41, 15], [2, 146, 116], [3, 58, 36, 2, 59, 37], [4, 36, 16, 4, 37, 17], [4, 36, 12, 4, 37, 13], [2, 86, 68, 2, 87, 69], [4, 69, 43, 1, 70, 44], [6, 43, 19, 2, 44, 20], [6, 43, 15, 2, 44, 16], [4, 101, 81], [1, 80, 50, 4, 81, 51], [4, 50, 22, 4, 51, 23], [3, 36, 12, 8, 37, 13], [2, 116, 92, 2, 117, 93], [6, 58, 36, 2, 59, 37], [4, 46, 20, 6, 47, 21], [7, 42, 14, 4, 43, 15], [4, 133, 107], [8, 59, 37, 1, 60, 38], [8, 44, 20, 4, 45, 21], [12, 33, 11, 4, 34, 12], [3, 145, 115, 1, 146, 116], [4, 64, 40, 5, 65, 41], [11, 36, 16, 5, 37, 17], [11, 36, 12, 5, 37, 13], [5, 109, 87, 1, 110, 88], [5, 65, 41, 5, 66, 42], [5, 54, 24, 7, 55, 25], [11, 36, 12], [5, 122, 98, 1, 123, 99], [7, 73, 45, 3, 74, 46], [15, 43, 19, 2, 44, 20], [3, 45, 15, 13, 46, 16], [1, 135, 107, 5, 136, 108], [10, 74, 46, 1, 75, 47], [1, 50, 22, 15, 51, 23], [2, 42, 14, 17, 43, 15], [5, 150, 120, 1, 151, 121], [9, 69, 43, 4, 70, 44], [17, 50, 22, 1, 51, 23], [2, 42, 14, 19, 43, 15], [3, 141, 113, 4, 142, 114], [3, 70, 44, 11, 71, 45], [17, 47, 21, 4, 48, 22], [9, 39, 13, 16, 40, 14], [3, 135, 107, 5, 136, 108], [3, 67, 41, 13, 68, 42], [15, 54, 24, 5, 55, 25], [15, 43, 15, 10, 44, 16], [4, 144, 116, 4, 145, 117], [17, 68, 42], [17, 50, 22, 6, 51, 23], [19, 46, 16, 6, 47, 17], [2, 139, 111, 7, 140, 112], [17, 74, 46], [7, 54, 24, 16, 55, 25], [34, 37, 13], [4, 151, 121, 5, 152, 122], [4, 75, 47, 14, 76, 48], [11, 54, 24, 14, 55, 25], [16, 45, 15, 14, 46, 16], [6, 147, 117, 4, 148, 118], [6, 73, 45, 14, 74, 46], [11, 54, 24, 16, 55, 25], [30, 46, 16, 2, 47, 17], [8, 132, 106, 4, 133, 107], [8, 75, 47, 13, 76, 48], [7, 54, 24, 22, 55, 25], [22, 45, 15, 13, 46, 16], [10, 142, 114, 2, 143, 115], [19, 74, 46, 4, 75, 47], [28, 50, 22, 6, 51, 23], [33, 46, 16, 4, 47, 17], [8, 152, 122, 4, 153, 123], [22, 73, 45, 3, 74, 46], [8, 53, 23, 26, 54, 24], [12, 45, 15, 28, 46, 16], [3, 147, 117, 10, 148, 118], [3, 73, 45, 23, 74, 46], [4, 54, 24, 31, 55, 25], [11, 45, 15, 31, 46, 16], [7, 146, 116, 7, 147, 117], [21, 73, 45, 7, 74, 46], [1, 53, 23, 37, 54, 24], [19, 45, 15, 26, 46, 16], [5, 145, 115, 10, 146, 116], [19, 75, 47, 10, 76, 48], [15, 54, 24, 25, 55, 25], [23, 45, 15, 25, 46, 16], [13, 145, 115, 3, 146, 116], [2, 74, 46, 29, 75, 47], [42, 54, 24, 1, 55, 25], [23, 45, 15, 28, 46, 16], [17, 145, 115], [10, 74, 46, 23, 75, 47], [10, 54, 24, 35, 55, 25], [19, 45, 15, 35, 46, 16], [17, 145, 115, 1, 146, 116], [14, 74, 46, 21, 75, 47], [29, 54, 24, 19, 55, 25], [11, 45, 15, 46, 46, 16], [13, 145, 115, 6, 146, 116], [14, 74, 46, 23, 75, 47], [44, 54, 24, 7, 55, 25], [59, 46, 16, 1, 47, 17], [12, 151, 121, 7, 152, 122], [12, 75, 47, 26, 76, 48], [39, 54, 24, 14, 55, 25], [22, 45, 15, 41, 46, 16], [6, 151, 121, 14, 152, 122], [6, 75, 47, 34, 76, 48], [46, 54, 24, 10, 55, 25], [2, 45, 15, 64, 46, 16], [17, 152, 122, 4, 153, 123], [29, 74, 46, 14, 75, 47], [49, 54, 24, 10, 55, 25], [24, 45, 15, 46, 46, 16], [4, 152, 122, 18, 153, 123], [13, 74, 46, 32, 75, 47], [48, 54, 24, 14, 55, 25], [42, 45, 15, 32, 46, 16], [20, 147, 117, 4, 148, 118], [40, 75, 47, 7, 76, 48], [43, 54, 24, 22, 55, 25], [10, 45, 15, 67, 46, 16], [19, 148, 118, 6, 149, 119], [18, 75, 47, 31, 76, 48], [34, 54, 24, 34, 55, 25], [20, 45, 15, 61, 46, 16]];
|
||||||
|
QRRSBlock.getRSBlocks = function (typeNumber, errorCorrectLevel) {
|
||||||
|
var rsBlock = QRRSBlock.getRsBlockTable(typeNumber, errorCorrectLevel); if (rsBlock == undefined) { throw new Error("bad rs block @ typeNumber:" + typeNumber + "/errorCorrectLevel:" + errorCorrectLevel); }
|
||||||
|
var length = rsBlock.length / 3; var list = []; for (var i = 0; i < length; i++) { var count = rsBlock[i * 3 + 0]; var totalCount = rsBlock[i * 3 + 1]; var dataCount = rsBlock[i * 3 + 2]; for (var j = 0; j < count; j++) { list.push(new QRRSBlock(totalCount, dataCount)); } }
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
QRRSBlock.getRsBlockTable = function (typeNumber, errorCorrectLevel) { switch (errorCorrectLevel) { case QRErrorCorrectLevel.L: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 0]; case QRErrorCorrectLevel.M: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 1]; case QRErrorCorrectLevel.Q: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 2]; case QRErrorCorrectLevel.H: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 3]; default: return undefined; } };
|
||||||
|
function QRBitBuffer() { this.buffer = []; this.length = 0; }
|
||||||
|
QRBitBuffer.prototype = {
|
||||||
|
get: function (index) { var bufIndex = Math.floor(index / 8); return ((this.buffer[bufIndex] >>> (7 - index % 8)) & 1) == 1; }, put: function (num, length) { for (var i = 0; i < length; i++) { this.putBit(((num >>> (length - i - 1)) & 1) == 1); } }, getLengthInBits: function () { return this.length; }, putBit: function (bit) {
|
||||||
|
var bufIndex = Math.floor(this.length / 8); if (this.buffer.length <= bufIndex) { this.buffer.push(0); }
|
||||||
|
if (bit) { this.buffer[bufIndex] |= (0x80 >>> (this.length % 8)); }
|
||||||
|
this.length++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var QRCodeLimitLength = [[17, 14, 11, 7], [32, 26, 20, 14], [53, 42, 32, 24], [78, 62, 46, 34], [106, 84, 60, 44], [134, 106, 74, 58], [154, 122, 86, 64], [192, 152, 108, 84], [230, 180, 130, 98], [271, 213, 151, 119], [321, 251, 177, 137], [367, 287, 203, 155], [425, 331, 241, 177], [458, 362, 258, 194], [520, 412, 292, 220], [586, 450, 322, 250], [644, 504, 364, 280], [718, 560, 394, 310], [792, 624, 442, 338], [858, 666, 482, 382], [929, 711, 509, 403], [1003, 779, 565, 439], [1091, 857, 611, 461], [1171, 911, 661, 511], [1273, 997, 715, 535], [1367, 1059, 751, 593], [1465, 1125, 805, 625], [1528, 1190, 868, 658], [1628, 1264, 908, 698], [1732, 1370, 982, 742], [1840, 1452, 1030, 790], [1952, 1538, 1112, 842], [2068, 1628, 1168, 898], [2188, 1722, 1228, 958], [2303, 1809, 1283, 983], [2431, 1911, 1351, 1051], [2563, 1989, 1423, 1093], [2699, 2099, 1499, 1139], [2809, 2213, 1579, 1219], [2953, 2331, 1663, 1273]];
|
||||||
|
|
||||||
|
// QRCode object
|
||||||
|
QRCode = function (canvasId, vOption) {
|
||||||
|
this._htOption = {
|
||||||
|
width: 256,
|
||||||
|
height: 256,
|
||||||
|
typeNumber: 4,
|
||||||
|
colorDark: "#000000",
|
||||||
|
colorLight: "#ffffff",
|
||||||
|
correctLevel: QRErrorCorrectLevel.H
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof vOption === 'string') {
|
||||||
|
vOption = {
|
||||||
|
text: vOption
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overwrites options
|
||||||
|
if (vOption) {
|
||||||
|
for (var i in vOption) {
|
||||||
|
this._htOption[i] = vOption[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._oQRCode = null;
|
||||||
|
this.canvasId = canvasId
|
||||||
|
|
||||||
|
if (this._htOption.text && this.canvasId) {
|
||||||
|
this.makeCode(this._htOption.text);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
QRCode.prototype.makeCode = function (sText) {
|
||||||
|
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
|
||||||
|
this._oQRCode.addData(sText);
|
||||||
|
this._oQRCode.make();
|
||||||
|
this.makeImage();
|
||||||
|
};
|
||||||
|
|
||||||
|
QRCode.prototype.makeImage = function () {
|
||||||
|
var _oContext
|
||||||
|
if (this._htOption.usingIn) {
|
||||||
|
_oContext = wx.createCanvasContext(this.canvasId, this._htOption.usingIn)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_oContext = wx.createCanvasContext(this.canvasId)
|
||||||
|
}
|
||||||
|
var _htOption = this._htOption;
|
||||||
|
var oQRCode = this._oQRCode
|
||||||
|
|
||||||
|
var nCount = oQRCode.getModuleCount();
|
||||||
|
var nWidth = _htOption.padding ? (_htOption.width - 2 * _htOption.padding) / nCount : _htOption.width / nCount;
|
||||||
|
var nHeight = _htOption.padding ? (_htOption.height - 2 * _htOption.padding) / nCount : _htOption.height / nCount;
|
||||||
|
var nRoundedHeight = Math.round(nHeight);
|
||||||
|
var nRoundedWidth = Math.round(nWidth);
|
||||||
|
|
||||||
|
if (_htOption.image && _htOption.image != '') {
|
||||||
|
_oContext.drawImage(_htOption.image, 0, 0, _htOption.width, _htOption.height)
|
||||||
|
}
|
||||||
|
_oContext.setFillStyle('#fff')
|
||||||
|
_oContext.fillRect(0, 0, _htOption.width, _htOption.height)
|
||||||
|
_oContext.save()
|
||||||
|
for (var row = 0; row < nCount; row++) {
|
||||||
|
for (var col = 0; col < nCount; col++) {
|
||||||
|
var bIsDark = oQRCode.isDark(row, col);
|
||||||
|
var nLeft = _htOption.padding ? col * nWidth + _htOption.padding : col * nWidth;
|
||||||
|
var nTop = _htOption.padding ? row * nHeight + _htOption.padding : row * nHeight;
|
||||||
|
_oContext.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
|
||||||
|
// _oContext.setStrokeStyle('red')
|
||||||
|
_oContext.setLineWidth(1)
|
||||||
|
_oContext.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
|
||||||
|
// _oContext.setFillStyle('red')
|
||||||
|
// if (bIsDark) {
|
||||||
|
_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 안티 앨리어싱 방지 처리
|
||||||
|
// if (bIsDark) {
|
||||||
|
_oContext.strokeRect(
|
||||||
|
Math.floor(nLeft) + 0.5,
|
||||||
|
Math.floor(nTop) + 0.5,
|
||||||
|
nRoundedHeight
|
||||||
|
);
|
||||||
|
|
||||||
|
_oContext.strokeRect(
|
||||||
|
Math.ceil(nLeft) - 0.5,
|
||||||
|
Math.ceil(nTop) - 0.5,
|
||||||
|
nRoundedWidth,
|
||||||
|
nRoundedHeight
|
||||||
|
);
|
||||||
|
// }
|
||||||
|
// _oContext.fillRect(
|
||||||
|
// Math.floor(nLeft) + 0.5,
|
||||||
|
// Math.floor(nTop) + 0.5,
|
||||||
|
// nRoundedWidth,
|
||||||
|
// nRoundedHeight
|
||||||
|
// );
|
||||||
|
// _oContext.fillRect(
|
||||||
|
// Math.ceil(nLeft) - 0.5,
|
||||||
|
// Math.ceil(nTop) - 0.5,
|
||||||
|
// nRoundedWidth,
|
||||||
|
// nRoundedHeight
|
||||||
|
// );
|
||||||
|
// _oContext.clearRect(
|
||||||
|
// Math.floor(nLeft) + 0.5,
|
||||||
|
// Math.floor(nTop) + 0.5,
|
||||||
|
// nRoundedWidth,
|
||||||
|
// nRoundedHeight
|
||||||
|
// );
|
||||||
|
// _oContext.clearRect(
|
||||||
|
// Math.ceil(nLeft) - 0.5,
|
||||||
|
// Math.ceil(nTop) - 0.5,
|
||||||
|
// nRoundedWidth,
|
||||||
|
// nRoundedHeight
|
||||||
|
// );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_oContext.draw(false, () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.exportImage()
|
||||||
|
}, 800)
|
||||||
|
})
|
||||||
|
};
|
||||||
|
// 保存为图片，将临时路径传给回调
|
||||||
|
QRCode.prototype.exportImage = function (callback) {
|
||||||
|
if (this._htOption.callback && typeof this._htOption.callback === 'function') {
|
||||||
|
wx.canvasToTempFilePath({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: this._htOption.width,
|
||||||
|
height: this._htOption.height,
|
||||||
|
destWidth: this._htOption.width,
|
||||||
|
destHeight: this._htOption.height,
|
||||||
|
canvasId: this.canvasId,
|
||||||
|
success: (res) => {
|
||||||
|
this._htOption.callback({path: res.tempFilePath})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
QRCode.CorrectLevel = QRErrorCorrectLevel;
|
||||||
|
})();
|
||||||
|
|
||||||
|
module.exports = QRCode
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
const formatTime = date => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
|
||||||
|
}
|
||||||
|
const formatDate = date => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
|
||||||
|
|
||||||
|
return [year, month, day].map(formatNumber).join('-')
|
||||||
|
}
|
||||||
|
const formatNumber = n => {
|
||||||
|
n = n.toString()
|
||||||
|
return n[1] ? n : '0' + n
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
formatTime: formatTime,
|
||||||
|
formatDate: formatDate
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
id="_drag_button"
|
||||||
|
class="drag"
|
||||||
|
:style="'left: ' + left + 'px; top:' + top + 'px;'"
|
||||||
|
@touchstart="touchstart"
|
||||||
|
@touchmove.stop.prevent="touchmove"
|
||||||
|
@touchend.stop="touchend"
|
||||||
|
@click.stop.prevent="click"
|
||||||
|
:class="{ transition: isDock && !isMove }"
|
||||||
|
>
|
||||||
|
<text>{{ text }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'drag-button',
|
||||||
|
props: {
|
||||||
|
isDock: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
existTabBar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
offsetWidth: 0,
|
||||||
|
offsetHeight: 0,
|
||||||
|
windowWidth: 0,
|
||||||
|
windowHeight: 0,
|
||||||
|
isMove: true,
|
||||||
|
edge: 10,
|
||||||
|
text: '预约' //此处自定义按钮文字(1-3个汉字)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const sys = uni.getSystemInfoSync();
|
||||||
|
|
||||||
|
this.windowWidth = sys.windowWidth;
|
||||||
|
this.windowHeight = sys.windowHeight;
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.existTabBar && (this.windowHeight -= 50);
|
||||||
|
// #endif
|
||||||
|
if (sys.windowTop) {
|
||||||
|
this.windowHeight += sys.windowTop;
|
||||||
|
}
|
||||||
|
// console.log(sys);
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query
|
||||||
|
.select('#_drag_button')
|
||||||
|
.boundingClientRect(data => {
|
||||||
|
this.width = data.width;
|
||||||
|
this.height = data.height;
|
||||||
|
this.offsetWidth = data.width / 2;
|
||||||
|
this.offsetHeight = data.height / 2;
|
||||||
|
this.left = this.windowWidth - this.width - this.edge;
|
||||||
|
this.top = ((this.windowHeight - this.height - this.edge) * 3) / 4;
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
console.log(1);
|
||||||
|
this.$emit('btnClick');
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
this.$emit('btnTouchstart');
|
||||||
|
},
|
||||||
|
touchmove(e) {
|
||||||
|
// 单指触摸
|
||||||
|
if (e.touches.length !== 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isMove = true;
|
||||||
|
|
||||||
|
this.left = e.touches[0].clientX - this.offsetWidth;
|
||||||
|
|
||||||
|
let clientY = e.touches[0].clientY - this.offsetHeight;
|
||||||
|
// #ifdef H5
|
||||||
|
clientY += this.height;
|
||||||
|
// #endif
|
||||||
|
let edgeBottom = this.windowHeight - this.height - this.edge;
|
||||||
|
|
||||||
|
// 上下触及边界
|
||||||
|
if (clientY < this.edge) {
|
||||||
|
this.top = this.edge;
|
||||||
|
} else if (clientY > edgeBottom) {
|
||||||
|
this.top = edgeBottom;
|
||||||
|
} else {
|
||||||
|
this.top = clientY;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchend(e) {
|
||||||
|
if (this.isDock) {
|
||||||
|
let edgeRigth = this.windowWidth - this.width - this.edge;
|
||||||
|
|
||||||
|
if (this.left < this.windowWidth / 2 - this.offsetWidth) {
|
||||||
|
this.left = this.edge;
|
||||||
|
} else {
|
||||||
|
this.left = edgeRigth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isMove = false;
|
||||||
|
|
||||||
|
this.$emit('btnTouchend');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.drag {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
width: 80upx;
|
||||||
|
height: 80upx;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
&.transition {
|
||||||
|
transition: left 0.3s ease, top 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-view style="height: 800rpx;" scroll-y="true" class="padding-top-sm">
|
||||||
|
<template v-if="!informData.length">
|
||||||
|
<u-empty text="当前暂无公告信息" mode="news"></u-empty>
|
||||||
|
</template>
|
||||||
|
<view v-if="!noticeInfo">
|
||||||
|
<block v-for="(item, index) in informData" :key="index">
|
||||||
|
<view class="cu-bar padding solid" @click="clickInfo(item)">
|
||||||
|
<view class="margin-left-sm" style="width: 440rpx;">
|
||||||
|
<view class="text-df text-cut">{{ item.title }}</view>
|
||||||
|
<view class="text-gray text-sm">
|
||||||
|
<view class="text-cut">{{ item.content }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="action"><text class="text-blue text-xs">查看</text></text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="padding-sm" v-if="noticeInfo">
|
||||||
|
<view class="text-left margin-xs text-bold">{{ informInfo.title }}</view>
|
||||||
|
<view class="text-content info">{{ informInfo.content }}</view>
|
||||||
|
<view class="text-right text-df margin-top">发布时间：{{ informInfo.date || '暂无' }}</view>
|
||||||
|
<view class="text-center margin-sm" @click="noticeInfo = false"><text class="cu-btn bg-green sm radius">返回</text></view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var _this;
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
noticeShow: false
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
noticeInfo: false,
|
||||||
|
informData: [
|
||||||
|
{
|
||||||
|
title: '郑州暴雨后人间百态',
|
||||||
|
content:
|
||||||
|
'7月20日，河南省多地遭遇极端强降雨，持续强降雨造成道路、地铁等公共设施被淹，人员被困。有人被困商场，市民组成“人墙”喊口号合力救援；有人被困洪水抱树求救，社区工作人员扔条幅救援；行人不慎被水冲走，市民湍急水流中将人救下……众人在暴雨中积极自救和互助，每一个画面都让人动容。',
|
||||||
|
date: '今天08:50 '
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '郑州暴雨期间酒店竟涨价10倍至2、3千元！希岸酒店道歉称系加盟店所为',
|
||||||
|
content:
|
||||||
|
'7月22日，希岸酒店总部就郑州高铁站涨价10倍一事发布致歉声明称，此次事件是该加盟店不遵守总部规定所致，酒店将积极配合相关部门监督检查，向该客人表示歉意。',
|
||||||
|
date: ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
informInfo: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
/* this.xx = uni.getStorageSync("xx"); */
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
_this = this;
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
clickInfo(item) {
|
||||||
|
this.noticeInfo = true;
|
||||||
|
this.informInfo = item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.info {
|
||||||
|
text-indent: 2em;
|
||||||
|
font-size: 28upx;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
<drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" />
|
||||||
|
<u-modal v-model="noticeShow" title="公告" confirm-text="我已阅读" width="80%"><inform-com></inform-com></u-modal>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import dragButton from '@/components/drag-button';
|
||||||
|
import dragButton from './components/drag-button';
|
||||||
|
import informCom from './inform';
|
||||||
|
var _this;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
dragButton,
|
||||||
|
informCom
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
noticeShow: false //公告显示
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
console.log(this.$u.config.v);
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
_this = this;
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {},
|
||||||
|
methods: {
|
||||||
|
btnClick() {
|
||||||
|
this.noticeShow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<view class="headInfo">
|
||||||
|
<view class="info">
|
||||||
|
<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
|
||||||
|
<text>wchenp</text>
|
||||||
|
<uni-icons type="gear" size="21"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.headInfo {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #999999;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.toux {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<template>
|
||||||
|
<view class="sidebar">
|
||||||
|
<view class="item">
|
||||||
|
装船指令
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
卸船指令
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
船舶作业
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
货物质量
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
场位监控
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sidebar {
|
||||||
|
width: 100px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
.item {
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
.so-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 998
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 25upx 25upx 0 25upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-head {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-type {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-type label {
|
||||||
|
display: inline-block;
|
||||||
|
min-height: 32upx;
|
||||||
|
font-size: 26upx;
|
||||||
|
margin-right: 20upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30upx 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-word {
|
||||||
|
border: 1upx solid #ccc;
|
||||||
|
border-radius: 10upx;
|
||||||
|
height: 0;
|
||||||
|
margin: 0 5upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: calc(4.28571429%);
|
||||||
|
width: calc(4.28571429%);
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-word.active {
|
||||||
|
border-color: #007aff;
|
||||||
|
box-shadow: 0 0 15upx 0 #007aff
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-word text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-dot {
|
||||||
|
width: 15upx;
|
||||||
|
height: 15upx;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 5upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-keyboard {
|
||||||
|
background: #eee;
|
||||||
|
margin-left: -25upx;
|
||||||
|
margin-right: -25upx;
|
||||||
|
padding: 20upx 25upx 10upx 25upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: all .3s;
|
||||||
|
transition: all .3s
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-keyboard>view {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
justify-content: space-between
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-key {
|
||||||
|
display: block;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10upx;
|
||||||
|
box-shadow: 0 0 8upx 0 #bbb;
|
||||||
|
width: 80upx;
|
||||||
|
height: 80upx;
|
||||||
|
margin: 5upx 0;
|
||||||
|
font-size: 32upx;
|
||||||
|
text-align: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-key.hover {
|
||||||
|
background: #efefef
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-key.fill-block {
|
||||||
|
width: 80upx;
|
||||||
|
height: 80upx;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-btn {
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10upx;
|
||||||
|
box-shadow: 0 0 10upx 0 #bbb;
|
||||||
|
font-size: 28upx;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 0 10upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-btn-group {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #eee;
|
||||||
|
margin-left: -25upx;
|
||||||
|
margin-right: -25upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 25upx 10upx 25upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-btn--cancel {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-btn--submit {
|
||||||
|
background: #5773f9;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.so-plate-btn--delete {
|
||||||
|
color: #fd6b6d
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-scale-up {
|
||||||
|
-webkit-animation-duration: .2s;
|
||||||
|
animation-duration: .2s;
|
||||||
|
-webkit-animation-timing-function: ease-out;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
-webkit-animation-name: scale-up;
|
||||||
|
animation-name: scale-up
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes scale-up {
|
||||||
|
0% {
|
||||||
|
opacity: .8;
|
||||||
|
-webkit-transform: scale(.8);
|
||||||
|
transform: scale(.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-up {
|
||||||
|
0% {
|
||||||
|
opacity: .8;
|
||||||
|
-webkit-transform: scale(.8);
|
||||||
|
transform: scale(.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
.so-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
.so-plate {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 25upx 25upx 0 25upx;
|
||||||
|
&-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-type {
|
||||||
|
flex:1;
|
||||||
|
display:block;
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
min-height: 32upx;
|
||||||
|
font-size: 26upx;
|
||||||
|
margin-right: 10upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30upx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-word {
|
||||||
|
border: 1upx solid #ccc;
|
||||||
|
border-radius: 10upx;
|
||||||
|
height: 0;
|
||||||
|
margin: 0 5upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: calc((100% - 70upx) / 7);
|
||||||
|
width: calc((100% - 70upx) / 7);
|
||||||
|
position: relative;
|
||||||
|
&.active {
|
||||||
|
border-color: #007aff;
|
||||||
|
box-shadow: 0 0 15upx 0 #007aff;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-dot {
|
||||||
|
width: 15upx;
|
||||||
|
height: 15upx;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 5upx;
|
||||||
|
}
|
||||||
|
&-keyboard {
|
||||||
|
background: #eee;
|
||||||
|
margin-left: -25upx;
|
||||||
|
margin-right: -25upx;
|
||||||
|
padding: 20upx 25upx 10upx 25upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: all .3s;
|
||||||
|
&>view{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-key {
|
||||||
|
display: block;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10upx;
|
||||||
|
box-shadow: 0 0 8upx 0 #bbb;
|
||||||
|
width: 80upx;
|
||||||
|
height: 80upx;
|
||||||
|
margin: 5upx 0;
|
||||||
|
font-size: 32upx;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
&.hover {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
&.fill-block {
|
||||||
|
width: 80upx;
|
||||||
|
height: 80upx;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-btn {
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10upx;
|
||||||
|
box-shadow: 0 0 10upx 0 #bbb;
|
||||||
|
font-size: 28upx;
|
||||||
|
text-align: center;
|
||||||
|
margin:0 0 0 10upx;
|
||||||
|
padding:0 25upx;
|
||||||
|
&-group{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #eee;
|
||||||
|
margin-left: -25upx;
|
||||||
|
margin-right: -25upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 25upx 10upx 25upx;
|
||||||
|
}
|
||||||
|
&--cancel{
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
&--submit{
|
||||||
|
background:#5773f9;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
&--delete{
|
||||||
|
color:#fd6b6d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.animation-scale-up {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-name: scale-up
|
||||||
|
}
|
||||||
|
@keyframes scale-up {
|
||||||
|
0% {
|
||||||
|
opacity: .8;
|
||||||
|
transform: scale(.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
/**
|
||||||
|
* @author minisola
|
||||||
|
* @version 20190814
|
||||||
|
*/
|
||||||
|
<template>
|
||||||
|
<view class="so-mask">
|
||||||
|
<view class="so-plate animation-scale-up">
|
||||||
|
<view class="so-plate-head">
|
||||||
|
<view class="so-plate-type">
|
||||||
|
<radio-group @change="typeChange">
|
||||||
|
<label>
|
||||||
|
<radio value="1" :checked="type===1" />
|
||||||
|
普通车牌
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<radio value="2" :checked="type===2" />
|
||||||
|
新能源车牌
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-body">
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch" data-index="0">
|
||||||
|
<text>{{ currentInputValue[0] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch" data-index="1">
|
||||||
|
<text>{{ currentInputValue[1] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-dot"></view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch" data-index="2">
|
||||||
|
<text>{{ currentInputValue[2] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch" data-index="3">
|
||||||
|
<text>{{ currentInputValue[3] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch" data-index="4">
|
||||||
|
<text>{{ currentInputValue[4] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch" data-index="5">
|
||||||
|
<text>{{ currentInputValue[5] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch" data-index="6">
|
||||||
|
<text>{{ currentInputValue[6] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch" v-if="type == 2" data-index="7">
|
||||||
|
<text>{{ currentInputValue[7] }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-foot">
|
||||||
|
<view class="so-plate-keyboard" :style="{height:keyboardHeight}">
|
||||||
|
<view id="keyboard">
|
||||||
|
<block v-if="inputType == 1">
|
||||||
|
<view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
||||||
|
</block>
|
||||||
|
<block v-if="inputType == 1">
|
||||||
|
<text class="so-plate-key fill-block"></text>
|
||||||
|
</block>
|
||||||
|
<block v-if="inputType >= 3">
|
||||||
|
<view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
||||||
|
</block>
|
||||||
|
<block v-if="inputType >= 2">
|
||||||
|
<view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
||||||
|
</block>
|
||||||
|
<block v-if="inputType == 3">
|
||||||
|
<text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
|
||||||
|
</block>
|
||||||
|
<block v-if="inputType == 4">
|
||||||
|
<view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
||||||
|
</block>
|
||||||
|
<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="so-plate-btn-group">
|
||||||
|
<view>
|
||||||
|
<button class="so-plate-btn so-plate-btn--cancel" @tap="$emit('close')">取消</button>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
|
||||||
|
<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'uni-plate-input',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: 1, //车牌类型
|
||||||
|
currentInputIndex: 0, //当前编辑的输入框
|
||||||
|
currentInputValue: ['', '', '', '', '', '', ''],
|
||||||
|
fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}], //避免:key报错
|
||||||
|
keyboardHeightInit:false,
|
||||||
|
keyboardHeight:'auto',
|
||||||
|
provinceText: [
|
||||||
|
'粤',
|
||||||
|
'京',
|
||||||
|
'冀',
|
||||||
|
'沪',
|
||||||
|
'津',
|
||||||
|
'晋',
|
||||||
|
'蒙',
|
||||||
|
'辽',
|
||||||
|
'吉',
|
||||||
|
'黑',
|
||||||
|
'苏',
|
||||||
|
'浙',
|
||||||
|
'皖',
|
||||||
|
'闽',
|
||||||
|
'赣',
|
||||||
|
'鲁',
|
||||||
|
'豫',
|
||||||
|
'鄂',
|
||||||
|
'湘',
|
||||||
|
'桂',
|
||||||
|
'琼',
|
||||||
|
'渝',
|
||||||
|
'川',
|
||||||
|
'贵',
|
||||||
|
'云',
|
||||||
|
'藏',
|
||||||
|
'陕',
|
||||||
|
'甘',
|
||||||
|
'青',
|
||||||
|
'宁',
|
||||||
|
'新'
|
||||||
|
],
|
||||||
|
numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
|
||||||
|
wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
|
||||||
|
lastWordText: ['挂', '港', '学', '领', '警']
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
plate: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
//输入框类型
|
||||||
|
inputType() {
|
||||||
|
switch (this.currentInputIndex) {
|
||||||
|
case 0:
|
||||||
|
return 1;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
return 2;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
return 3;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
return 3;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
return 3;
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
return 3;
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
return this.type==2 ? 3 :4 ;
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
return 4;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
currentInputIndex:function(n,o){
|
||||||
|
if(!this.keyboardHeightInit) return
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.changeKeyboardHeight()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//车牌类型切换
|
||||||
|
typeChange(e) {
|
||||||
|
this.$emit("typeChange",e.detail.value);
|
||||||
|
const {value} = e.detail;
|
||||||
|
this.type = parseInt(value)
|
||||||
|
this.currentInputIndex = 0
|
||||||
|
if(value==1){
|
||||||
|
this.currentInputValue = ['','','','','','','']
|
||||||
|
}else{
|
||||||
|
this.currentInputValue = ['','','','','','','','']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inputSwitch(e) {
|
||||||
|
const { index } = e.currentTarget.dataset;
|
||||||
|
this.currentInputIndex = parseInt(index);
|
||||||
|
},
|
||||||
|
chooseKey(e) {
|
||||||
|
const { value } = e.currentTarget.dataset;
|
||||||
|
this.$set(this.currentInputValue, this.currentInputIndex, value);
|
||||||
|
if(this.type==1 && this.currentInputIndex<6){
|
||||||
|
this.currentInputIndex++
|
||||||
|
}
|
||||||
|
if(this.type==2 && this.currentInputIndex<7){
|
||||||
|
this.currentInputIndex++
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteKey(){
|
||||||
|
this.$set(this.currentInputValue,this.currentInputIndex,'')
|
||||||
|
if(this.currentInputIndex!=0) this.currentInputIndex--
|
||||||
|
},
|
||||||
|
exportPlate(){
|
||||||
|
const plate = this.currentInputValue.join('')
|
||||||
|
let err = false
|
||||||
|
if(this.type===1&&plate.length!=7){
|
||||||
|
err = true
|
||||||
|
}else if(this.type===2&&plate.length!=8){
|
||||||
|
err = true
|
||||||
|
}
|
||||||
|
if(err) return uni.showToast({
|
||||||
|
title:'请输入完整的车牌号码',
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
|
||||||
|
this.$emit('export',plate)
|
||||||
|
},
|
||||||
|
changeKeyboardHeight(){
|
||||||
|
const that = this
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query.select('#keyboard').boundingClientRect();
|
||||||
|
query.exec(function(res) {
|
||||||
|
if(res&&res[0]){
|
||||||
|
that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
|
||||||
|
that.keyboardHeightInit = true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(this.plate);
|
||||||
|
const plateKey = this.plate.split('')
|
||||||
|
if(plateKey.length===7){
|
||||||
|
this.type=1
|
||||||
|
}else if(plateKey.length===8){
|
||||||
|
this.type=2
|
||||||
|
}
|
||||||
|
if(plateKey.length===7 || plateKey.length===8){
|
||||||
|
this.currentInputValue = plateKey
|
||||||
|
this.currentInputIndex = plateKey.length-1
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => { //在动画结束之后才开始获取
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.changeKeyboardHeight()
|
||||||
|
})
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import './uni-plate-input';
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
export default {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description secret
|
||||||
|
*/
|
||||||
|
// secret:'0941059588804f6c34535827a4db8f3f',
|
||||||
|
/**
|
||||||
|
* @description appid
|
||||||
|
*/
|
||||||
|
// appid:'wx6f99275e17e83d6b',
|
||||||
|
/**
|
||||||
|
* @description token在Cookie中存储的天数，默认1天
|
||||||
|
*/
|
||||||
|
cookieExpires: 1,
|
||||||
|
/**
|
||||||
|
* @description api请求基础路径
|
||||||
|
*/
|
||||||
|
// local: "http://192.168.0.103:8891",
|
||||||
|
local: "http://61.184.202.72:8891",
|
||||||
|
imgSrc: "http://116.205.142.169/HtRtosResource/assets/",
|
||||||
|
mapkey: "FUFBZ-KBIWW-P63RR-RR4W3-BNV4H-T6BGX"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<script>
|
||||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||||
|
CSS.supports('top: constant(a)'))
|
||||||
|
document.write(
|
||||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
|
</script>
|
||||||
|
<title></title>
|
||||||
|
<!--preload-links-->
|
||||||
|
<!--app-context-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import App from './App'
|
||||||
|
import store from './store'
|
||||||
|
import config from '@/config';
|
||||||
|
const { local, mapkey, imgSrc} = config;
|
||||||
|
Vue.prototype.$local = local;
|
||||||
|
Vue.prototype.$imgSrc = imgSrc;
|
||||||
|
// 配置公共方法
|
||||||
|
import util from './common/util.js';
|
||||||
|
Vue.prototype.$util = util;
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
App.mpType = 'app'
|
||||||
|
|
||||||
|
import uniPop from './uni_modules/uni-popup/components/uni-popup/uni-popup'
|
||||||
|
import liuStepBar from './uni_modules/liu-step-bar/components/liu-step-bar/liu-step-bar'
|
||||||
|
|
||||||
|
Vue.component('uni-pop', uniPop)
|
||||||
|
Vue.component('liu-step-bar', liuStepBar)
|
||||||
|
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
store,
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
|
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
{
|
||||||
|
"name": "gang",
|
||||||
|
"appid": "__UNI__820CEDC",
|
||||||
|
"description": "",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus": {
|
||||||
|
"usingComponents": true,
|
||||||
|
"nvueStyleCompiler": "uni-app",
|
||||||
|
"compilerVersion": 3,
|
||||||
|
"splashscreen": {
|
||||||
|
"alwaysShowBeforeRender": true,
|
||||||
|
"waiting": true,
|
||||||
|
"autoclose": true,
|
||||||
|
"delay": 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules": {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute": {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android": {
|
||||||
|
"permissions": [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios": {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp": {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "wxb5fe43c6c0f0a8da",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"es6": true,
|
||||||
|
"ignoreDevUnusedFiles": false
|
||||||
|
},
|
||||||
|
"usingComponents": true,
|
||||||
|
"permission": {
|
||||||
|
"scope.userLocation": {
|
||||||
|
"desc": "获取当前定位判断距离"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"requiredPrivateInfos": [
|
||||||
|
"getLocation"
|
||||||
|
],
|
||||||
|
"plugins": {
|
||||||
|
"ocr-plugin": {
|
||||||
|
"version": "3.1.1",
|
||||||
|
"provider": "wx4418e3e031e551be"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mp-alipay": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"mp-baidu": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"mp-toutiao": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"uniStatistics": {
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"vueVersion": "2"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tabBar": {
|
||||||
|
"color": "#9A9A9A",
|
||||||
|
"selectedColor": "#000000",
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"globalStyle": {
|
||||||
|
"backgroundTextStyle": "light",
|
||||||
|
"navigationBarBackgroundColor": "#0052A4",
|
||||||
|
"navigationBarTitleText": "港口Ipad",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
"uniIdRouter": {},
|
||||||
|
"condition": { //模式配置，仅开发期间生效
|
||||||
|
"current": 0, //当前激活的模式(list 的索引项)
|
||||||
|
"list": [{
|
||||||
|
"name": "", //模式名称
|
||||||
|
"path": "", //启动页面，必选
|
||||||
|
"query": "" //启动参数，在页面的onLoad函数里面得到
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
<template>
|
||||||
|
<view class="app">
|
||||||
|
<head-info></head-info>
|
||||||
|
<view class="container">
|
||||||
|
<side-bar></side-bar>
|
||||||
|
<view class="content">
|
||||||
|
<view class="form">
|
||||||
|
<input class="input" type="text" placeholder="港区" />
|
||||||
|
<input class="input" type="text" placeholder="船名/航次" />
|
||||||
|
</view>
|
||||||
|
<view class="itemList">
|
||||||
|
<view v-for="(item, index) in ltemList" :key="index" class="item">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SideBar from '@/components/sider-bar/slider-bar';
|
||||||
|
import HeadInfo from '@/components/head-info/head-info';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ltemList:[1,1,1,1,2,1,1,1,1],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
SideBar,
|
||||||
|
HeadInfo
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
border: 1px solid #c9cacb;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemList {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item {
|
||||||
|
width: 32%;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-right: 2%;
|
||||||
|
height: 190px;
|
||||||
|
border: 1px solid #c9cacb;
|
||||||
|
}
|
||||||
|
.item:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,130 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
userInfo: uni.getStorageSync('userInfo'),
|
||||||
|
customInfo: uni.getStorageSync('customInfo'),
|
||||||
|
customer: uni.getStorageSync('customer')
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
set_user_info(state, info) {
|
||||||
|
state.userInfo = info ? info : uni.getStorageSync('userInfo');
|
||||||
|
},
|
||||||
|
set_customer_info(state, info) {
|
||||||
|
state.customInfo = info ? info : uni.getStorageSync('customer');
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
goout(state, data) {
|
||||||
|
if (data.code == '401') {
|
||||||
|
if (uni.getStorageSync('token')) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '当前登录已失效，请重新登录后再试',
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '您暂未登录，请先登录',
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: data.msg,
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
majax(state, {
|
||||||
|
url,
|
||||||
|
params,
|
||||||
|
method
|
||||||
|
}) {
|
||||||
|
if (uni.getStorageSync('networkType') == 'none') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '检查网络是否连接',
|
||||||
|
icon: "none"
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
//返回异步加载结果
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
uni.request({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
data: params,
|
||||||
|
header: {
|
||||||
|
// 'token': uni.getStorageSync('token'),
|
||||||
|
}
|
||||||
|
}).then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
|
||||||
|
let [error, res] = data;
|
||||||
|
if (res) {
|
||||||
|
// let jsRes = JSON.parse(res.data.replace(/'/g,"\""))
|
||||||
|
let jsRes = res.data
|
||||||
|
resolve(jsRes);
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
"msg": "请求失败！"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
najax(state, {
|
||||||
|
url,
|
||||||
|
params,
|
||||||
|
method
|
||||||
|
}) {
|
||||||
|
if (uni.getStorageSync('networkType') == 'none') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '检查网络是否连接',
|
||||||
|
icon: "none"
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
//返回异步加载结果
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
uni.request({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
data: params,
|
||||||
|
header: {
|
||||||
|
// 'token': uni.getStorageSync('token'),
|
||||||
|
'content-type': 'application/x-www-form-urlencoded',
|
||||||
|
// 'content-type': 'multipart/form-data'
|
||||||
|
// 'content-type': 'application/json'
|
||||||
|
}
|
||||||
|
}).then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
|
||||||
|
let [error, res] = data;
|
||||||
|
if (res) {
|
||||||
|
// let jsRes = JSON.parse(res.data.replace(/'/g,"\""))
|
||||||
|
let jsRes = res.data
|
||||||
|
resolve(jsRes);
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
"msg": "请求失败！"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default store
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
/*单行文本溢出省略号*/
|
||||||
|
.one-t {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
transition: all linear 0.2s;
|
||||||
|
}
|
||||||
|
/*多行文本溢出省略号*/
|
||||||
|
.more-t {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
transition: all linear 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==================
|
||||||
|
flex布局(colorui里面也有相关基础样式)
|
||||||
|
==================== */
|
||||||
|
/* 多行排列 */
|
||||||
|
.x-more{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/* x水平排列*/
|
||||||
|
|
||||||
|
.x-f {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
/*x两端且水平居中*/
|
||||||
|
.x-bc {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
/*x平分且水平居中*/
|
||||||
|
.x-ac {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-sc {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*x水平靠上对齐*/
|
||||||
|
.x-start {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
/*x水平靠下对齐*/
|
||||||
|
.x-end {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
/*上下左右居中*/
|
||||||
|
.x-c {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
/*y竖直靠左*/
|
||||||
|
.y-start {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
/*y竖直靠右*/
|
||||||
|
.y-end {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
/*y竖直居中*/
|
||||||
|
.y-f {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
/* y竖直两端 */
|
||||||
|
.y-b {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
/*y竖直两端居中*/
|
||||||
|
.y-bc {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.y-sc{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
}
|
||||||
|
.zhanwei {
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: #e54d42;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
color: #05b578;
|
||||||
|
}
|
||||||
|
.hui {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
color: #1073d7;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
background-color: #fff;
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head .info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head .info .toux {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 120rpx;
|
||||||
|
background-color: #cccccc;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head .info .name {
|
||||||
|
color: #333;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head .info .che {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 25rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head .rqi {
|
||||||
|
color: #ccc;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,67 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
/* Project id 3979772 */
|
||||||
|
src: url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.woff2?t=1679996974313') format('woff2'),
|
||||||
|
url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.woff?t=1679996974313') format('woff'),
|
||||||
|
url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.ttf?t=1679996974313') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-queren:before {
|
||||||
|
content: "\e6bd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dingweixiao:before {
|
||||||
|
content: "\e8ba";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shijian:before {
|
||||||
|
content: "\eb2a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renyuan:before {
|
||||||
|
content: "\e799";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-truck:before {
|
||||||
|
content: "\e606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-custom-finsh:before {
|
||||||
|
content: "\e604";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfonticonfonti2:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfontphone:before {
|
||||||
|
content: "\e634";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfontwujingongju:before {
|
||||||
|
content: "\e641";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfonticon:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfont-shouye:before {
|
||||||
|
content: "\e68d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-iconfont-jiaoyi:before {
|
||||||
|
content: "\e68e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kache:before {
|
||||||
|
content: "\e626";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color:#333;//基本色
|
||||||
|
$uni-text-color-inverse:#fff;//反色
|
||||||
|
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-bg-color-grey:#f8f8f8;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color:#c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-font-size-lg:16;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm:20px;
|
||||||
|
$uni-img-size-base:26px;
|
||||||
|
$uni-img-size-lg:40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2C405A; // 文章标题颜色
|
||||||
|
$uni-font-size-title:20px;
|
||||||
|
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle:26px;
|
||||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph:15px;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
## 1.0.3（2023-03-20）
|
||||||
|
使用说明更新
|
||||||
|
## 1.0.2（2023-03-20）
|
||||||
|
多样化支持
|
||||||
|
## 1.0.1（2023-03-10）
|
||||||
|
初始化发布
|
||||||
|
## 1.0.0（2023-03-10）
|
||||||
|
初始发布
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<template>
|
||||||
|
<view class="step-info">
|
||||||
|
<view class="step-number">
|
||||||
|
<block v-for="(item,index) in stepList" :key="index">
|
||||||
|
<view @click.stop="openItem(item)" class="item-state">
|
||||||
|
<!-- {{step>(index+1)?'':index+1}} -->
|
||||||
|
<image class="state-img" :src="getImg(index) || unCheckedImg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="line" :style="{background:getLine(index) || unCheckedLine}" v-if="index < stepList.length-1"></view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="step-name">
|
||||||
|
<view class="name" :style="{color:getColor(index) || unCheckedColor}" v-for="(item,index) in stepList" :key="index">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import checkedImg from '../../static/checkedImg.png'
|
||||||
|
import unCheckedImg from '../../static/unCheckedImg.png'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
//当前步骤
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
//步骤列表
|
||||||
|
stepList: {
|
||||||
|
type: Array,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
//已完成的图片路径
|
||||||
|
checkedImg: {
|
||||||
|
type: String,
|
||||||
|
default: checkedImg
|
||||||
|
},
|
||||||
|
//未完成的图片路径
|
||||||
|
unCheckedImg: {
|
||||||
|
type: String,
|
||||||
|
default: unCheckedImg
|
||||||
|
},
|
||||||
|
//已完成的字体颜色
|
||||||
|
checkedColor:{
|
||||||
|
type: String,
|
||||||
|
default: '#287BF8'
|
||||||
|
},
|
||||||
|
//未完成的字体颜色
|
||||||
|
unCheckedColor:{
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
//已完成的线条颜色
|
||||||
|
checkedLine:{
|
||||||
|
type: String,
|
||||||
|
default: '#287BF8'
|
||||||
|
},
|
||||||
|
//未完成的线条颜色
|
||||||
|
unCheckedLine:{
|
||||||
|
type: String,
|
||||||
|
default: '#bebebe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取图片
|
||||||
|
getImg(e){
|
||||||
|
let index = Number(e)
|
||||||
|
if(this.step > index) return this.checkedImg
|
||||||
|
},
|
||||||
|
//获取线
|
||||||
|
getLine(e){
|
||||||
|
let index = Number(e)
|
||||||
|
if(this.step > index) return this.checkedLine
|
||||||
|
},
|
||||||
|
//获取颜色
|
||||||
|
getColor(e){
|
||||||
|
let index = Number(e)
|
||||||
|
if(this.step > index) return this.checkedColor
|
||||||
|
},
|
||||||
|
|
||||||
|
openItem(item) {
|
||||||
|
this.$emit('clickStep', item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.step-info {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.step-number {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.item-state{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
|
.state-img{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 6rpx;
|
||||||
|
margin: 0 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.step-name {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
{
|
||||||
|
"id": "liu-step-bar",
|
||||||
|
"displayName": "横向步骤条、多级步骤条、自定义步骤条",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "简单好用的横向步骤条组件",
|
||||||
|
"keywords": [
|
||||||
|
"步骤",
|
||||||
|
"步骤条",
|
||||||
|
"step",
|
||||||
|
"steps"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": "2364518038"
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
### liu-step-bar适用于uni-app项目的步骤条组件
|
||||||
|
### 本组件目前兼容微信小程序、H5
|
||||||
|
### 本组件支持自定义步骤内容、步骤回显、点击
|
||||||
|
### 如使用过程中有问题或有一些好的建议，欢迎qq联系：2364518038
|
||||||
|
|
||||||
|
### 使用方式（uni_modules版本）
|
||||||
|
``` html
|
||||||
|
<liu-step-bar :step="step" :stepList="stepList" @clickStep="clickStep"></liu-step-bar>
|
||||||
|
```
|
||||||
|
``` javascript
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
step: 1, //当前步骤
|
||||||
|
stepList: [{
|
||||||
|
name: '第一步',
|
||||||
|
id: 1
|
||||||
|
}, {
|
||||||
|
name: '第二步',
|
||||||
|
id: 2
|
||||||
|
}, {
|
||||||
|
name: '第三步',
|
||||||
|
id: 3
|
||||||
|
}], //步骤列表
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//点击步骤
|
||||||
|
clickStep(e){
|
||||||
|
this.step = e.id
|
||||||
|
console.log('============:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 属性说明
|
||||||
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
|
| ----------------------------|--------------- | ---------------------- | ---------------|
|
||||||
|
| step | Number | 1 | 当前步骤
|
||||||
|
| stepList | Array | [] | 步骤信息
|
||||||
|
| checkedImg | String | checkedImg | 已完成的图片路径
|
||||||
|
| unCheckedImg | String | unCheckedImg | 未完成的图片路径
|
||||||
|
| checkedColor | String | #287BF8 | 已完成的字体颜色
|
||||||
|
| unCheckedColor | String | #333333 | 未完成的字体颜色
|
||||||
|
| checkedLine | String | #287BF8 | 已完成的线条颜色
|
||||||
|
| unCheckedLine | String | #bebebe | 未完成的线条颜色
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,24 @@
|
||||||
|
## 1.4.9（2023-02-02）
|
||||||
|
- 修复 某些情况切换月份错误问题
|
||||||
|
## 1.4.8（2023-01-30）
|
||||||
|
- 修复 某些情况切换月份错误问题
|
||||||
|
## 1.4.7（2022-09-16）
|
||||||
|
- 可以使用 uni-scss 控制主题色
|
||||||
|
## 1.4.6（2022-09-08）
|
||||||
|
- fix: 表头年月切换，导致改变当前日期为选择月1号，且未触发change事件
|
||||||
|
## 1.4.5（2022-02-25）
|
||||||
|
- 修复 条件编译 nvue 不支持的 css 样式
|
||||||
|
## 1.4.4（2022-02-25）
|
||||||
|
- 修复 条件编译 nvue 不支持的 css 样式
|
||||||
|
## 1.4.3（2021-09-22）
|
||||||
|
- 修复 startDate、 endDate 属性失效的 bug
|
||||||
|
## 1.4.2（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.4.1（2021-08-05）
|
||||||
|
- 修复 弹出层被 tabbar 遮盖 bug
|
||||||
|
## 1.4.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.3.16（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.3.15（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,546 @@
|
||||||
|
/**
|
||||||
|
* @1900-2100区间内的公历、农历互转
|
||||||
|
* @charset UTF-8
|
||||||
|
* @github https://github.com/jjonline/calendar.js
|
||||||
|
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||||
|
* @Time 2014-7-21
|
||||||
|
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||||
|
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||||
|
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||||
|
* @Version 1.0.3
|
||||||
|
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||||
|
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||||
|
*/
|
||||||
|
/* eslint-disable */
|
||||||
|
var calendar = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 农历1900-2100的润大小信息表
|
||||||
|
* @Array Of Property
|
||||||
|
* @return Hex
|
||||||
|
*/
|
||||||
|
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||||
|
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||||
|
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||||
|
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||||
|
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||||
|
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||||
|
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||||
|
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||||
|
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||||
|
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||||
|
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||||
|
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||||
|
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||||
|
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||||
|
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||||
|
/** Add By JJonline@JJonline.Cn**/
|
||||||
|
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||||
|
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||||
|
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||||
|
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||||
|
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||||
|
0x0d520], // 2100
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 公历每个月份的天数普通表
|
||||||
|
* @Array Of Property
|
||||||
|
* @return Number
|
||||||
|
*/
|
||||||
|
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 天干地支之天干速查表
|
||||||
|
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 天干地支之地支速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 天干地支之地支速查表<=>生肖
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 24节气速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1900-2100各年的24节气日期速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @return 0x string For splice
|
||||||
|
*/
|
||||||
|
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||||
|
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||||
|
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||||
|
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||||
|
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||||
|
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||||
|
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||||
|
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||||
|
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||||
|
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||||
|
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||||
|
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||||
|
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||||
|
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||||
|
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||||
|
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||||
|
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||||
|
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||||
|
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||||
|
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||||
|
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||||
|
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||||
|
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||||
|
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||||
|
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||||
|
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||||
|
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||||
|
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||||
|
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||||
|
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||||
|
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||||
|
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||||
|
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||||
|
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||||
|
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||||
|
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||||
|
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||||
|
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||||
|
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 数字转中文速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 日期转农历称呼速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans ['初','十','廿','卅']
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 月份转农历称呼速查表
|
||||||
|
* @Array Of Property
|
||||||
|
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回农历y年一整年的总天数
|
||||||
|
* @param lunar Year
|
||||||
|
* @return Number
|
||||||
|
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||||
|
*/
|
||||||
|
lYearDays: function (y) {
|
||||||
|
var i; var sum = 348
|
||||||
|
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||||
|
return (sum + this.leapDays(y))
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||||
|
* @param lunar Year
|
||||||
|
* @return Number (0-12)
|
||||||
|
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||||
|
*/
|
||||||
|
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||||
|
return (this.lunarInfo[y - 1900] & 0xf)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||||
|
* @param lunar Year
|
||||||
|
* @return Number (0、29、30)
|
||||||
|
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||||
|
*/
|
||||||
|
leapDays: function (y) {
|
||||||
|
if (this.leapMonth(y)) {
|
||||||
|
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||||
|
}
|
||||||
|
return (0)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||||
|
* @param lunar Year
|
||||||
|
* @return Number (-1、29、30)
|
||||||
|
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||||
|
*/
|
||||||
|
monthDays: function (y, m) {
|
||||||
|
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||||
|
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回公历(!)y年m月的天数
|
||||||
|
* @param solar Year
|
||||||
|
* @return Number (-1、28、29、30、31)
|
||||||
|
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||||
|
*/
|
||||||
|
solarDays: function (y, m) {
|
||||||
|
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||||
|
var ms = m - 1
|
||||||
|
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||||
|
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||||
|
} else {
|
||||||
|
return (this.solarMonth[ms])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 农历年份转换为干支纪年
|
||||||
|
* @param lYear 农历年的年份数
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
toGanZhiYear: function (lYear) {
|
||||||
|
var ganKey = (lYear - 3) % 10
|
||||||
|
var zhiKey = (lYear - 3) % 12
|
||||||
|
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||||
|
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||||
|
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 公历月、日判断所属星座
|
||||||
|
* @param cMonth [description]
|
||||||
|
* @param cDay [description]
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
toAstro: function (cMonth, cDay) {
|
||||||
|
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||||
|
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||||
|
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入offset偏移量返回干支
|
||||||
|
* @param offset 相对甲子的偏移量
|
||||||
|
* @return Cn string
|
||||||
|
*/
|
||||||
|
toGanZhi: function (offset) {
|
||||||
|
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||||
|
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||||
|
* @return day Number
|
||||||
|
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||||
|
*/
|
||||||
|
getTerm: function (y, n) {
|
||||||
|
if (y < 1900 || y > 2100) { return -1 }
|
||||||
|
if (n < 1 || n > 24) { return -1 }
|
||||||
|
var _table = this.sTermInfo[y - 1900]
|
||||||
|
var _info = [
|
||||||
|
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||||
|
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||||
|
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||||
|
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||||
|
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||||
|
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||||
|
]
|
||||||
|
var _calday = [
|
||||||
|
_info[0].substr(0, 1),
|
||||||
|
_info[0].substr(1, 2),
|
||||||
|
_info[0].substr(3, 1),
|
||||||
|
_info[0].substr(4, 2),
|
||||||
|
|
||||||
|
_info[1].substr(0, 1),
|
||||||
|
_info[1].substr(1, 2),
|
||||||
|
_info[1].substr(3, 1),
|
||||||
|
_info[1].substr(4, 2),
|
||||||
|
|
||||||
|
_info[2].substr(0, 1),
|
||||||
|
_info[2].substr(1, 2),
|
||||||
|
_info[2].substr(3, 1),
|
||||||
|
_info[2].substr(4, 2),
|
||||||
|
|
||||||
|
_info[3].substr(0, 1),
|
||||||
|
_info[3].substr(1, 2),
|
||||||
|
_info[3].substr(3, 1),
|
||||||
|
_info[3].substr(4, 2),
|
||||||
|
|
||||||
|
_info[4].substr(0, 1),
|
||||||
|
_info[4].substr(1, 2),
|
||||||
|
_info[4].substr(3, 1),
|
||||||
|
_info[4].substr(4, 2),
|
||||||
|
|
||||||
|
_info[5].substr(0, 1),
|
||||||
|
_info[5].substr(1, 2),
|
||||||
|
_info[5].substr(3, 1),
|
||||||
|
_info[5].substr(4, 2)
|
||||||
|
]
|
||||||
|
return parseInt(_calday[n - 1])
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入农历数字月份返回汉语通俗表示法
|
||||||
|
* @param lunar month
|
||||||
|
* @return Cn string
|
||||||
|
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||||
|
*/
|
||||||
|
toChinaMonth: function (m) { // 月 => \u6708
|
||||||
|
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||||
|
var s = this.nStr3[m - 1]
|
||||||
|
s += '\u6708'// 加上月字
|
||||||
|
return s
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入农历日期数字返回汉字表示法
|
||||||
|
* @param lunar day
|
||||||
|
* @return Cn string
|
||||||
|
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||||
|
*/
|
||||||
|
toChinaDay: function (d) { // 日 => \u65e5
|
||||||
|
var s
|
||||||
|
switch (d) {
|
||||||
|
case 10:
|
||||||
|
s = '\u521d\u5341'; break
|
||||||
|
case 20:
|
||||||
|
s = '\u4e8c\u5341'; break
|
||||||
|
break
|
||||||
|
case 30:
|
||||||
|
s = '\u4e09\u5341'; break
|
||||||
|
break
|
||||||
|
default :
|
||||||
|
s = this.nStr2[Math.floor(d / 10)]
|
||||||
|
s += this.nStr1[d % 10]
|
||||||
|
}
|
||||||
|
return (s)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||||
|
* @param y year
|
||||||
|
* @return Cn string
|
||||||
|
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||||
|
*/
|
||||||
|
getAnimal: function (y) {
|
||||||
|
return this.Animals[(y - 4) % 12]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||||
|
* @param y solar year
|
||||||
|
* @param m solar month
|
||||||
|
* @param d solar day
|
||||||
|
* @return JSON object
|
||||||
|
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||||
|
*/
|
||||||
|
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||||
|
// 年份限定、上限
|
||||||
|
if (y < 1900 || y > 2100) {
|
||||||
|
return -1// undefined转换为数字变为NaN
|
||||||
|
}
|
||||||
|
// 公历传参最下限
|
||||||
|
if (y == 1900 && m == 1 && d < 31) {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
// 未传参 获得当天
|
||||||
|
if (!y) {
|
||||||
|
var objDate = new Date()
|
||||||
|
} else {
|
||||||
|
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||||
|
}
|
||||||
|
var i; var leap = 0; var temp = 0
|
||||||
|
// 修正ymd参数
|
||||||
|
var y = objDate.getFullYear()
|
||||||
|
var m = objDate.getMonth() + 1
|
||||||
|
var d = objDate.getDate()
|
||||||
|
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||||
|
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||||
|
temp = this.lYearDays(i)
|
||||||
|
offset -= temp
|
||||||
|
}
|
||||||
|
if (offset < 0) {
|
||||||
|
offset += temp; i--
|
||||||
|
}
|
||||||
|
|
||||||
|
// 是否今天
|
||||||
|
var isTodayObj = new Date()
|
||||||
|
var isToday = false
|
||||||
|
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||||
|
isToday = true
|
||||||
|
}
|
||||||
|
// 星期几
|
||||||
|
var nWeek = objDate.getDay()
|
||||||
|
var cWeek = this.nStr1[nWeek]
|
||||||
|
// 数字表示周几顺应天朝周一开始的惯例
|
||||||
|
if (nWeek == 0) {
|
||||||
|
nWeek = 7
|
||||||
|
}
|
||||||
|
// 农历年
|
||||||
|
var year = i
|
||||||
|
var leap = this.leapMonth(i) // 闰哪个月
|
||||||
|
var isLeap = false
|
||||||
|
|
||||||
|
// 效验闰月
|
||||||
|
for (i = 1; i < 13 && offset > 0; i++) {
|
||||||
|
// 闰月
|
||||||
|
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||||
|
--i
|
||||||
|
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||||
|
} else {
|
||||||
|
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||||
|
}
|
||||||
|
// 解除闰月
|
||||||
|
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||||
|
offset -= temp
|
||||||
|
}
|
||||||
|
// 闰月导致数组下标重叠取反
|
||||||
|
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||||
|
if (isLeap) {
|
||||||
|
isLeap = false
|
||||||
|
} else {
|
||||||
|
isLeap = true; --i
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (offset < 0) {
|
||||||
|
offset += temp; --i
|
||||||
|
}
|
||||||
|
// 农历月
|
||||||
|
var month = i
|
||||||
|
// 农历日
|
||||||
|
var day = offset + 1
|
||||||
|
// 天干地支处理
|
||||||
|
var sm = m - 1
|
||||||
|
var gzY = this.toGanZhiYear(year)
|
||||||
|
|
||||||
|
// 当月的两个节气
|
||||||
|
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||||
|
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||||
|
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||||
|
|
||||||
|
// 依据12节气修正干支月
|
||||||
|
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||||
|
if (d >= firstNode) {
|
||||||
|
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 传入的日期的节气与否
|
||||||
|
var isTerm = false
|
||||||
|
var Term = null
|
||||||
|
if (firstNode == d) {
|
||||||
|
isTerm = true
|
||||||
|
Term = this.solarTerm[m * 2 - 2]
|
||||||
|
}
|
||||||
|
if (secondNode == d) {
|
||||||
|
isTerm = true
|
||||||
|
Term = this.solarTerm[m * 2 - 1]
|
||||||
|
}
|
||||||
|
// 日柱 当月一日与 1900/1/1 相差天数
|
||||||
|
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||||
|
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||||
|
// 该日期所属的星座
|
||||||
|
var astro = this.toAstro(m, d)
|
||||||
|
|
||||||
|
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||||
|
* @param y lunar year
|
||||||
|
* @param m lunar month
|
||||||
|
* @param d lunar day
|
||||||
|
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||||
|
* @return JSON object
|
||||||
|
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||||
|
*/
|
||||||
|
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||||
|
var isLeapMonth = !!isLeapMonth
|
||||||
|
var leapOffset = 0
|
||||||
|
var leapMonth = this.leapMonth(y)
|
||||||
|
var leapDay = this.leapDays(y)
|
||||||
|
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||||
|
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||||
|
var day = this.monthDays(y, m)
|
||||||
|
var _day = day
|
||||||
|
// bugFix 2016-9-25
|
||||||
|
// if month is leap, _day use leapDays method
|
||||||
|
if (isLeapMonth) {
|
||||||
|
_day = this.leapDays(y, m)
|
||||||
|
}
|
||||||
|
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||||
|
|
||||||
|
// 计算农历的时间差
|
||||||
|
var offset = 0
|
||||||
|
for (var i = 1900; i < y; i++) {
|
||||||
|
offset += this.lYearDays(i)
|
||||||
|
}
|
||||||
|
var leap = 0; var isAdd = false
|
||||||
|
for (var i = 1; i < m; i++) {
|
||||||
|
leap = this.leapMonth(y)
|
||||||
|
if (!isAdd) { // 处理闰月
|
||||||
|
if (leap <= i && leap > 0) {
|
||||||
|
offset += this.leapDays(y); isAdd = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
offset += this.monthDays(y, i)
|
||||||
|
}
|
||||||
|
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||||
|
if (isLeapMonth) { offset += day }
|
||||||
|
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||||
|
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||||
|
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||||
|
var cY = calObj.getUTCFullYear()
|
||||||
|
var cM = calObj.getUTCMonth() + 1
|
||||||
|
var cD = calObj.getUTCDate()
|
||||||
|
|
||||||
|
return this.solar2lunar(cY, cM, cD)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default calendar
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"uni-calender.ok": "ok",
|
||||||
|
"uni-calender.cancel": "cancel",
|
||||||
|
"uni-calender.today": "today",
|
||||||
|
"uni-calender.MON": "MON",
|
||||||
|
"uni-calender.TUE": "TUE",
|
||||||
|
"uni-calender.WED": "WED",
|
||||||
|
"uni-calender.THU": "THU",
|
||||||
|
"uni-calender.FRI": "FRI",
|
||||||
|
"uni-calender.SAT": "SAT",
|
||||||
|
"uni-calender.SUN": "SUN"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"uni-calender.ok": "确定",
|
||||||
|
"uni-calender.cancel": "取消",
|
||||||
|
"uni-calender.today": "今日",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"uni-calender.ok": "確定",
|
||||||
|
"uni-calender.cancel": "取消",
|
||||||
|
"uni-calender.today": "今日",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,188 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-calendar-item__weeks-box" :class="{
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
}"
|
||||||
|
@click="choiceDate(weeks)">
|
||||||
|
<view class="uni-calendar-item__weeks-box-item">
|
||||||
|
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
|
<text class="uni-calendar-item__weeks-box-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.date}}</text>
|
||||||
|
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
}">{{todayText}}</text>
|
||||||
|
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
|
||||||
|
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--extra':weeks.extraInfo.info,
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.extraInfo.info}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from './i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
export default {
|
||||||
|
emits:['change'],
|
||||||
|
props: {
|
||||||
|
weeks: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
todayText() {
|
||||||
|
return t("uni-calender.today")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
choiceDate(weeks) {
|
||||||
|
this.$emit('change', weeks)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-text-color:#333;
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-color-error: #e43d33;
|
||||||
|
$uni-opacity-disabled: 0.3;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
.uni-calendar-item__weeks-box {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-text {
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-lunar-text {
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-item {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: $uni-color-error;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--disable {
|
||||||
|
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
|
||||||
|
color: $uni-text-color-disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
opacity: 0.8;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--extra {
|
||||||
|
color: $uni-color-error;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.uni-calendar-item--before-checked {
|
||||||
|
background-color: #ff5a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.uni-calendar-item--after-checked {
|
||||||
|
background-color: #ff5a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,562 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-calendar">
|
||||||
|
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
|
||||||
|
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
|
||||||
|
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
|
||||||
|
<view class="uni-calendar__header-btn-box" @click="close">
|
||||||
|
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__header-btn-box" @click="confirm">
|
||||||
|
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__header">
|
||||||
|
<view class="uni-calendar__header-btn-box" @click.stop="pre">
|
||||||
|
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||||
|
</view>
|
||||||
|
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||||
|
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
|
||||||
|
</picker>
|
||||||
|
<view class="uni-calendar__header-btn-box" @click.stop="next">
|
||||||
|
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||||
|
</view>
|
||||||
|
<text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__box">
|
||||||
|
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||||
|
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks">
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||||
|
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||||
|
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Calendar from './util.js';
|
||||||
|
import calendarItem from './uni-calendar-item.vue'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from './i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
/**
|
||||||
|
* Calendar 日历
|
||||||
|
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||||
|
* @property {String} date 自定义当前时间，默认为今天
|
||||||
|
* @property {Boolean} lunar 显示农历
|
||||||
|
* @property {String} startDate 日期选择范围-开始日期
|
||||||
|
* @property {String} endDate 日期选择范围-结束日期
|
||||||
|
* @property {Boolean} range 范围选择
|
||||||
|
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||||
|
* @value true 弹窗模式
|
||||||
|
* @value false 插入模式
|
||||||
|
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||||
|
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||||
|
* @property {Boolean} showMonth 是否选择月份为背景
|
||||||
|
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||||
|
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||||
|
* @event {Function} monthSwitch 切换月份时触发
|
||||||
|
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
calendarItem
|
||||||
|
},
|
||||||
|
emits:['close','confirm','change','monthSwitch'],
|
||||||
|
props: {
|
||||||
|
date: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
startDate: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
endDate: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
insert: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showMonth: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
clearDate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
weeks: [],
|
||||||
|
calendar: {},
|
||||||
|
nowDate: '',
|
||||||
|
aniMaskShow: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
/**
|
||||||
|
* for i18n
|
||||||
|
*/
|
||||||
|
|
||||||
|
okText() {
|
||||||
|
return t("uni-calender.ok")
|
||||||
|
},
|
||||||
|
cancelText() {
|
||||||
|
return t("uni-calender.cancel")
|
||||||
|
},
|
||||||
|
todayText() {
|
||||||
|
return t("uni-calender.today")
|
||||||
|
},
|
||||||
|
monText() {
|
||||||
|
return t("uni-calender.MON")
|
||||||
|
},
|
||||||
|
TUEText() {
|
||||||
|
return t("uni-calender.TUE")
|
||||||
|
},
|
||||||
|
WEDText() {
|
||||||
|
return t("uni-calender.WED")
|
||||||
|
},
|
||||||
|
THUText() {
|
||||||
|
return t("uni-calender.THU")
|
||||||
|
},
|
||||||
|
FRIText() {
|
||||||
|
return t("uni-calender.FRI")
|
||||||
|
},
|
||||||
|
SATText() {
|
||||||
|
return t("uni-calender.SAT")
|
||||||
|
},
|
||||||
|
SUNText() {
|
||||||
|
return t("uni-calender.SUN")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
date(newVal) {
|
||||||
|
// this.cale.setDate(newVal)
|
||||||
|
this.init(newVal)
|
||||||
|
},
|
||||||
|
startDate(val){
|
||||||
|
this.cale.resetSatrtDate(val)
|
||||||
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
},
|
||||||
|
endDate(val){
|
||||||
|
this.cale.resetEndDate(val)
|
||||||
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
},
|
||||||
|
selected(newVal) {
|
||||||
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 获取日历方法实例
|
||||||
|
this.cale = new Calendar({
|
||||||
|
// date: new Date(),
|
||||||
|
selected: this.selected,
|
||||||
|
startDate: this.startDate,
|
||||||
|
endDate: this.endDate,
|
||||||
|
range: this.range,
|
||||||
|
})
|
||||||
|
// 选中某一天
|
||||||
|
// this.cale.setDate(this.date)
|
||||||
|
this.init(this.date)
|
||||||
|
// this.setDay
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 取消穿透
|
||||||
|
clean() {},
|
||||||
|
bindDateChange(e) {
|
||||||
|
const value = e.detail.value + '-1'
|
||||||
|
console.log(this.cale.getDate(value));
|
||||||
|
this.setDate(value)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化日期显示
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
init(date) {
|
||||||
|
this.cale.setDate(date)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 打开日历弹窗
|
||||||
|
*/
|
||||||
|
open() {
|
||||||
|
// 弹窗模式并且清理数据
|
||||||
|
if (this.clearDate && !this.insert) {
|
||||||
|
this.cale.cleanMultipleStatus()
|
||||||
|
// this.cale.setDate(this.date)
|
||||||
|
this.init(this.date)
|
||||||
|
}
|
||||||
|
this.show = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.aniMaskShow = true
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭日历弹窗
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.aniMaskShow = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.show = false
|
||||||
|
this.$emit('close')
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 确认按钮
|
||||||
|
*/
|
||||||
|
confirm() {
|
||||||
|
this.setEmit('confirm')
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 变化触发
|
||||||
|
*/
|
||||||
|
change() {
|
||||||
|
if (!this.insert) return
|
||||||
|
this.setEmit('change')
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选择月份触发
|
||||||
|
*/
|
||||||
|
monthSwitch() {
|
||||||
|
let {
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
} = this.nowDate
|
||||||
|
this.$emit('monthSwitch', {
|
||||||
|
year,
|
||||||
|
month: Number(month)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 派发事件
|
||||||
|
* @param {Object} name
|
||||||
|
*/
|
||||||
|
setEmit(name) {
|
||||||
|
let {
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
fullDate,
|
||||||
|
lunar,
|
||||||
|
extraInfo
|
||||||
|
} = this.calendar
|
||||||
|
this.$emit(name, {
|
||||||
|
range: this.cale.multipleStatus,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
fulldate: fullDate,
|
||||||
|
lunar,
|
||||||
|
extraInfo: extraInfo || {}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选择天触发
|
||||||
|
* @param {Object} weeks
|
||||||
|
*/
|
||||||
|
choiceDate(weeks) {
|
||||||
|
if (weeks.disable) return
|
||||||
|
this.calendar = weeks
|
||||||
|
// 设置多选
|
||||||
|
this.cale.setMultiple(this.calendar.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.change()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 回到今天
|
||||||
|
*/
|
||||||
|
backtoday() {
|
||||||
|
console.log(this.cale.getDate(new Date()).fullDate);
|
||||||
|
let date = this.cale.getDate(new Date()).fullDate
|
||||||
|
// this.cale.setDate(date)
|
||||||
|
this.init(date)
|
||||||
|
this.change()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 上个月
|
||||||
|
*/
|
||||||
|
pre() {
|
||||||
|
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||||
|
this.setDate(preDate)
|
||||||
|
this.monthSwitch()
|
||||||
|
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 下个月
|
||||||
|
*/
|
||||||
|
next() {
|
||||||
|
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||||
|
this.setDate(nextDate)
|
||||||
|
this.monthSwitch()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置日期
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
setDate(date) {
|
||||||
|
this.cale.setDate(date)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.nowDate = this.cale.getInfo(date)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
$uni-border-color: #EDEDED;
|
||||||
|
$uni-text-color: #333;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-color-subtitle: #555555;
|
||||||
|
$uni-text-color-grey:#999;
|
||||||
|
.uni-calendar {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: $uni-bg-color-mask;
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--mask-show {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
bottom: 0;
|
||||||
|
/* #endif */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: translateY(460px);
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
bottom: calc(var(--window-bottom));
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--ani-show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__content {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed-top {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed-width {
|
||||||
|
width: 50px;
|
||||||
|
// padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__backtoday {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 25rpx;
|
||||||
|
padding: 0 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-top-left-radius: 25px;
|
||||||
|
border-bottom-left-radius: 25px;
|
||||||
|
color: $uni-text-color;
|
||||||
|
background-color: $uni-bg-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-text {
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-btn-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-btn {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-left-color: $uni-text-color-placeholder;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-color: $uni-color-subtitle;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--left {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--right {
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-calendar__weeks {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-day {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
border-bottom-color: #F5F5F5;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-day-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box-bg {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box-bg-text {
|
||||||
|
font-size: 200px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
opacity: 0.1;
|
||||||
|
text-align: center;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
line-height: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,360 @@
|
||||||
|
import CALENDAR from './calendar.js'
|
||||||
|
|
||||||
|
class Calendar {
|
||||||
|
constructor({
|
||||||
|
date,
|
||||||
|
selected,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
range
|
||||||
|
} = {}) {
|
||||||
|
// 当前日期
|
||||||
|
this.date = this.getDate(new Date()) // 当前初入日期
|
||||||
|
// 打点信息
|
||||||
|
this.selected = selected || [];
|
||||||
|
// 范围开始
|
||||||
|
this.startDate = startDate
|
||||||
|
// 范围结束
|
||||||
|
this.endDate = endDate
|
||||||
|
this.range = range
|
||||||
|
// 多选状态
|
||||||
|
this.cleanMultipleStatus()
|
||||||
|
// 每周日期
|
||||||
|
this.weeks = {}
|
||||||
|
// this._getWeek(this.date.fullDate)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 设置日期
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
setDate(date) {
|
||||||
|
this.selectDate = this.getDate(date)
|
||||||
|
this._getWeek(this.selectDate.fullDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清理多选状态
|
||||||
|
*/
|
||||||
|
cleanMultipleStatus() {
|
||||||
|
this.multipleStatus = {
|
||||||
|
before: '',
|
||||||
|
after: '',
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置开始日期
|
||||||
|
*/
|
||||||
|
resetSatrtDate(startDate) {
|
||||||
|
// 范围开始
|
||||||
|
this.startDate = startDate
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置结束日期
|
||||||
|
*/
|
||||||
|
resetEndDate(endDate) {
|
||||||
|
// 范围结束
|
||||||
|
this.endDate = endDate
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取任意时间
|
||||||
|
*/
|
||||||
|
getDate(date, AddDayCount = 0, str = 'day') {
|
||||||
|
if (!date) {
|
||||||
|
date = new Date()
|
||||||
|
}
|
||||||
|
if (typeof date !== 'object') {
|
||||||
|
date = date.replace(/-/g, '/')
|
||||||
|
}
|
||||||
|
const dd = new Date(date)
|
||||||
|
switch (str) {
|
||||||
|
case 'day':
|
||||||
|
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
break
|
||||||
|
case 'month':
|
||||||
|
if (dd.getDate() === 31 && AddDayCount>0) {
|
||||||
|
dd.setDate(dd.getDate() + AddDayCount)
|
||||||
|
} else {
|
||||||
|
const preMonth = dd.getMonth()
|
||||||
|
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
const nextMonth = dd.getMonth()
|
||||||
|
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||||
|
if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
|
||||||
|
dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
|
||||||
|
}
|
||||||
|
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||||
|
if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
|
||||||
|
dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'year':
|
||||||
|
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
break
|
||||||
|
}
|
||||||
|
const y = dd.getFullYear()
|
||||||
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||||
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||||
|
return {
|
||||||
|
fullDate: y + '-' + m + '-' + d,
|
||||||
|
year: y,
|
||||||
|
month: m,
|
||||||
|
date: d,
|
||||||
|
day: dd.getDay()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取上月剩余天数
|
||||||
|
*/
|
||||||
|
_getLastMonthDays(firstDay, full) {
|
||||||
|
let dateArr = []
|
||||||
|
for (let i = firstDay; i > 0; i--) {
|
||||||
|
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||||
|
dateArr.push({
|
||||||
|
date: beforeDate,
|
||||||
|
month: full.month - 1,
|
||||||
|
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
|
||||||
|
disable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取本月天数
|
||||||
|
*/
|
||||||
|
_currentMonthDys(dateData, full) {
|
||||||
|
let dateArr = []
|
||||||
|
let fullDate = this.date.fullDate
|
||||||
|
for (let i = 1; i <= dateData; i++) {
|
||||||
|
let nowDate = full.year + '-' + (full.month < 10 ?
|
||||||
|
full.month : full.month) + '-' + (i < 10 ?
|
||||||
|
'0' + i : i)
|
||||||
|
// 是否今天
|
||||||
|
let isDay = fullDate === nowDate
|
||||||
|
// 获取打点信息
|
||||||
|
let info = this.selected && this.selected.find((item) => {
|
||||||
|
if (this.dateEqual(nowDate, item.date)) {
|
||||||
|
return item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 日期禁用
|
||||||
|
let disableBefore = true
|
||||||
|
let disableAfter = true
|
||||||
|
if (this.startDate) {
|
||||||
|
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||||
|
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||||
|
disableBefore = this.dateCompare(this.startDate, nowDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.endDate) {
|
||||||
|
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||||
|
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||||
|
disableAfter = this.dateCompare(nowDate, this.endDate)
|
||||||
|
}
|
||||||
|
let multiples = this.multipleStatus.data
|
||||||
|
let checked = false
|
||||||
|
let multiplesStatus = -1
|
||||||
|
if (this.range) {
|
||||||
|
if (multiples) {
|
||||||
|
multiplesStatus = multiples.findIndex((item) => {
|
||||||
|
return this.dateEqual(item, nowDate)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (multiplesStatus !== -1) {
|
||||||
|
checked = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let data = {
|
||||||
|
fullDate: nowDate,
|
||||||
|
year: full.year,
|
||||||
|
date: i,
|
||||||
|
multiple: this.range ? checked : false,
|
||||||
|
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
|
||||||
|
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
|
||||||
|
month: full.month,
|
||||||
|
lunar: this.getlunar(full.year, full.month, i),
|
||||||
|
disable: !(disableBefore && disableAfter),
|
||||||
|
isDay
|
||||||
|
}
|
||||||
|
if (info) {
|
||||||
|
data.extraInfo = info
|
||||||
|
}
|
||||||
|
|
||||||
|
dateArr.push(data)
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取下月天数
|
||||||
|
*/
|
||||||
|
_getNextMonthDays(surplus, full) {
|
||||||
|
let dateArr = []
|
||||||
|
for (let i = 1; i < surplus + 1; i++) {
|
||||||
|
dateArr.push({
|
||||||
|
date: i,
|
||||||
|
month: Number(full.month) + 1,
|
||||||
|
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
|
||||||
|
disable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前日期详情
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
getInfo(date) {
|
||||||
|
if (!date) {
|
||||||
|
date = new Date()
|
||||||
|
}
|
||||||
|
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||||
|
return dateInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间大小
|
||||||
|
*/
|
||||||
|
dateCompare(startDate, endDate) {
|
||||||
|
// 计算截止时间
|
||||||
|
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||||
|
if (startDate <= endDate) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间是否相等
|
||||||
|
*/
|
||||||
|
dateEqual(before, after) {
|
||||||
|
// 计算截止时间
|
||||||
|
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||||
|
if (before.getTime() - after.getTime() === 0) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取日期范围内所有日期
|
||||||
|
* @param {Object} begin
|
||||||
|
* @param {Object} end
|
||||||
|
*/
|
||||||
|
geDateAll(begin, end) {
|
||||||
|
var arr = []
|
||||||
|
var ab = begin.split('-')
|
||||||
|
var ae = end.split('-')
|
||||||
|
var db = new Date()
|
||||||
|
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||||
|
var de = new Date()
|
||||||
|
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||||
|
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||||
|
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||||
|
for (var k = unixDb; k <= unixDe;) {
|
||||||
|
k = k + 24 * 60 * 60 * 1000
|
||||||
|
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||||
|
}
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 计算阴历日期显示
|
||||||
|
*/
|
||||||
|
getlunar(year, month, date) {
|
||||||
|
return CALENDAR.solar2lunar(year, month, date)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 设置打点
|
||||||
|
*/
|
||||||
|
setSelectInfo(data, value) {
|
||||||
|
this.selected = value
|
||||||
|
this._getWeek(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取多选状态
|
||||||
|
*/
|
||||||
|
setMultiple(fullDate) {
|
||||||
|
let {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = this.multipleStatus
|
||||||
|
|
||||||
|
if (!this.range) return
|
||||||
|
if (before && after) {
|
||||||
|
this.multipleStatus.before = ''
|
||||||
|
this.multipleStatus.after = ''
|
||||||
|
this.multipleStatus.data = []
|
||||||
|
} else {
|
||||||
|
if (!before) {
|
||||||
|
this.multipleStatus.before = fullDate
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.after = fullDate
|
||||||
|
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._getWeek(fullDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取每周数据
|
||||||
|
* @param {Object} dateData
|
||||||
|
*/
|
||||||
|
_getWeek(dateData) {
|
||||||
|
const {
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
} = this.getDate(dateData)
|
||||||
|
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||||
|
let currentDay = new Date(year, month, 0).getDate()
|
||||||
|
let dates = {
|
||||||
|
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||||
|
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||||
|
nextMonthDays: [], // 下个月开始几天
|
||||||
|
weeks: []
|
||||||
|
}
|
||||||
|
let canlender = []
|
||||||
|
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||||
|
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||||
|
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||||
|
let weeks = {}
|
||||||
|
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||||
|
for (let i = 0; i < canlender.length; i++) {
|
||||||
|
if (i % 7 === 0) {
|
||||||
|
weeks[parseInt(i / 7)] = new Array(7)
|
||||||
|
}
|
||||||
|
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||||
|
}
|
||||||
|
this.canlender = canlender
|
||||||
|
this.weeks = weeks
|
||||||
|
}
|
||||||
|
|
||||||
|
//静态方法
|
||||||
|
// static init(date) {
|
||||||
|
// if (!this.instance) {
|
||||||
|
// this.instance = new Calendar(date);
|
||||||
|
// }
|
||||||
|
// return this.instance;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Calendar
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
{
|
||||||
|
"id": "uni-calendar",
|
||||||
|
"displayName": "uni-calendar 日历",
|
||||||
|
"version": "1.4.9",
|
||||||
|
"description": "日历组件",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"日历",
|
||||||
|
"",
|
||||||
|
"打卡",
|
||||||
|
"日历选择"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Calendar 日历
|
||||||
|
> **组件名：uni-calendar**
|
||||||
|
> 代码块： `uCalendar`
|
||||||
|
|
||||||
|
|
||||||
|
日历组件
|
||||||
|
|
||||||
|
> **注意事项**
|
||||||
|
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||||
|
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
|
||||||
|
> - 仅支持自定义组件模式
|
||||||
|
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
|
||||||
|
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
|
||||||
|
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
|
||||||
|
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||||
|
|
||||||
|
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
在 ``template`` 中使用组件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view>
|
||||||
|
<uni-calendar
|
||||||
|
:insert="true"
|
||||||
|
:lunar="true"
|
||||||
|
:start-date="'2019-3-2'"
|
||||||
|
:end-date="'2019-5-20'"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 通过方法打开日历
|
||||||
|
|
||||||
|
需要设置 `insert` 为 `false`
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view>
|
||||||
|
<uni-calendar
|
||||||
|
ref="calendar"
|
||||||
|
:insert="false"
|
||||||
|
@confirm="confirm"
|
||||||
|
/>
|
||||||
|
<button @click="open">打开日历</button>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open(){
|
||||||
|
this.$refs.calendar.open();
|
||||||
|
},
|
||||||
|
confirm(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Calendar Props
|
||||||
|
|
||||||
|
| 属性名 | 类型 | 默认值| 说明 |
|
||||||
|
| | |
|
||||||
|
| date | String |- | 自定义当前时间，默认为今天 |
|
||||||
|
| lunar | Boolean | false | 显示农历 |
|
||||||
|
| startDate | String |- | 日期选择范围-开始日期 |
|
||||||
|
| endDate | String |- | 日期选择范围-结束日期 |
|
||||||
|
| range | Boolean | false | 范围选择 |
|
||||||
|
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|
||||||
|
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
|
||||||
|
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|
||||||
|
|showMonth | Boolean | true | 是否显示月份为背景 |
|
||||||
|
|
||||||
|
### Calendar Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 |返回值|
|
||||||
|
| | | |
|
||||||
|
| open | 弹出日历组件，`insert :false` 时生效|- |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
## 1.0.5（2023-02-03）
|
||||||
|
- 修复 禁用时会显示清空按钮
|
||||||
|
## 1.0.4（2023-02-02）
|
||||||
|
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
||||||
|
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
||||||
|
## 1.0.3（2023-01-16）
|
||||||
|
- 修复 不关联服务空间报错的问题
|
||||||
|
## 1.0.2（2023-01-14）
|
||||||
|
- 新增 属性 `format` 可用于格式化显示选项内容
|
||||||
|
## 1.0.1（2022-12-06）
|
||||||
|
- 修复 当where变化时，数据不会自动更新的问题
|
||||||
|
## 0.1.9（2022-09-05）
|
||||||
|
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
||||||
|
## 0.1.8（2022-08-29）
|
||||||
|
- 修复 点击的位置不准确
|
||||||
|
## 0.1.7（2022-08-12）
|
||||||
|
- 新增 支持 disabled 属性
|
||||||
|
## 0.1.6（2022-07-06）
|
||||||
|
- 修复 pc端宽度异常的bug
|
||||||
|
## 0.1.5
|
||||||
|
- 修复 pc端宽度异常的bug
|
||||||
|
## 0.1.4（2022-07-05）
|
||||||
|
- 优化 显示样式
|
||||||
|
## 0.1.3（2022-06-02）
|
||||||
|
- 修复 localdata 赋值不生效的 bug
|
||||||
|
- 新增 支持 uni.scss 修改颜色
|
||||||
|
- 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
|
||||||
|
## 0.1.2（2022-05-08）
|
||||||
|
- 修复 当 value 为 0 时选择不生效的 bug
|
||||||
|
## 0.1.1（2022-05-07）
|
||||||
|
- 新增 记住上次的选项（仅 collection 存在时有效）
|
||||||
|
## 0.1.0（2022-04-22）
|
||||||
|
- 初始化
|
||||||
|
|
@ -0,0 +1,502 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-stat__select">
|
||||||
|
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||||
|
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||||
|
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||||
|
<view class="uni-select__input-box" @click="toggleSelector">
|
||||||
|
<view v-if="current" class="uni-select__input-text">{{current}}</view>
|
||||||
|
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||||
|
<uni-icons v-if="current && clear && !disabled" type="clear" color="#c0c4cc" size="24" @click="clearVal" />
|
||||||
|
<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||||
|
<view class="uni-select__selector" v-if="showSelector">
|
||||||
|
<view class="uni-popper__arrow"></view>
|
||||||
|
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||||
|
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||||
|
<text>{{emptyTips}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||||
|
@click="change(item)">
|
||||||
|
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* DataChecklist 数据选择器
|
||||||
|
* @description 通过数据渲染的下拉框组件
|
||||||
|
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||||
|
* @property {String} value 默认值
|
||||||
|
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||||
|
* @property {Boolean} clear 是否可以清空已选项
|
||||||
|
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||||
|
* @property {String} label 左侧标题
|
||||||
|
* @property {String} placeholder 输入框的提示文字
|
||||||
|
* @property {Boolean} disabled 是否禁用
|
||||||
|
* @event {Function} change 选中发生变化触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "uni-stat-select",
|
||||||
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
|
props: {
|
||||||
|
localdata: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择'
|
||||||
|
},
|
||||||
|
emptyTips: {
|
||||||
|
type: String,
|
||||||
|
default: '无选项'
|
||||||
|
},
|
||||||
|
clear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
defItem: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSelector: false,
|
||||||
|
current: '',
|
||||||
|
mixinDatacomResData: [],
|
||||||
|
apps: [],
|
||||||
|
channels: [],
|
||||||
|
cacheKey: "uni-data-select-lastSelectedValue",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.debounceGet = this.debounce(() => {
|
||||||
|
this.query();
|
||||||
|
}, 300);
|
||||||
|
if (this.collection && !this.localdata.length) {
|
||||||
|
this.debounceGet();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
typePlaceholder() {
|
||||||
|
const text = {
|
||||||
|
'opendb-stat-app-versions': '版本',
|
||||||
|
'opendb-app-channels': '渠道',
|
||||||
|
'opendb-app-list': '应用'
|
||||||
|
}
|
||||||
|
const common = this.placeholder
|
||||||
|
const placeholder = text[this.collection]
|
||||||
|
return placeholder ?
|
||||||
|
common + placeholder :
|
||||||
|
common
|
||||||
|
},
|
||||||
|
valueCom(){
|
||||||
|
// #ifdef VUE3
|
||||||
|
return this.modelValue;
|
||||||
|
// #endif
|
||||||
|
// #ifndef VUE3
|
||||||
|
return this.value;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
localdata: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val, old) {
|
||||||
|
if (Array.isArray(val) && old !== val) {
|
||||||
|
this.mixinDatacomResData = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
valueCom(val, old) {
|
||||||
|
this.initDefVal()
|
||||||
|
},
|
||||||
|
mixinDatacomResData: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
if (val.length) {
|
||||||
|
this.initDefVal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
debounce(fn, time = 100){
|
||||||
|
let timer = null
|
||||||
|
return function(...args) {
|
||||||
|
if (timer) clearTimeout(timer)
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
fn.apply(this, args)
|
||||||
|
}, time)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 执行数据库查询
|
||||||
|
query(){
|
||||||
|
this.mixinDatacomEasyGet();
|
||||||
|
},
|
||||||
|
// 监听查询条件变更事件
|
||||||
|
onMixinDatacomPropsChange(){
|
||||||
|
if (this.collection) {
|
||||||
|
this.debounceGet();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initDefVal() {
|
||||||
|
let defValue = ''
|
||||||
|
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||||
|
defValue = this.valueCom
|
||||||
|
} else {
|
||||||
|
let strogeValue
|
||||||
|
if (this.collection) {
|
||||||
|
strogeValue = this.getCache()
|
||||||
|
}
|
||||||
|
if (strogeValue || strogeValue === 0) {
|
||||||
|
defValue = strogeValue
|
||||||
|
} else {
|
||||||
|
let defItem = ''
|
||||||
|
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||||
|
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||||
|
}
|
||||||
|
defValue = defItem
|
||||||
|
}
|
||||||
|
if (defValue || defValue === 0) {
|
||||||
|
this.emit(defValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||||
|
this.current = def ? this.formatItemName(def) : ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {[String, Number]} value
|
||||||
|
* 判断用户给的 value 是否同时为禁用状态
|
||||||
|
*/
|
||||||
|
isDisabled(value) {
|
||||||
|
let isDisabled = false;
|
||||||
|
|
||||||
|
this.mixinDatacomResData.forEach(item => {
|
||||||
|
if (item.value === value) {
|
||||||
|
isDisabled = item.disable
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return isDisabled;
|
||||||
|
},
|
||||||
|
|
||||||
|
clearVal() {
|
||||||
|
this.emit('')
|
||||||
|
if (this.collection) {
|
||||||
|
this.removeCache()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
change(item) {
|
||||||
|
if (!item.disable) {
|
||||||
|
this.showSelector = false
|
||||||
|
this.current = this.formatItemName(item)
|
||||||
|
this.emit(item.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emit(val) {
|
||||||
|
this.$emit('change', val)
|
||||||
|
this.$emit('input', val)
|
||||||
|
this.$emit('update:modelValue', val)
|
||||||
|
if (this.collection) {
|
||||||
|
this.setCache(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleSelector() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showSelector = !this.showSelector
|
||||||
|
},
|
||||||
|
formatItemName(item) {
|
||||||
|
let {
|
||||||
|
text,
|
||||||
|
value,
|
||||||
|
channel_code
|
||||||
|
} = item
|
||||||
|
channel_code = channel_code ? `(${channel_code})` : ''
|
||||||
|
|
||||||
|
if (this.format) {
|
||||||
|
// 格式化输出
|
||||||
|
let str = "";
|
||||||
|
str = this.format;
|
||||||
|
for (let key in item) {
|
||||||
|
str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
} else {
|
||||||
|
return this.collection.indexOf('app-list') > 0 ?
|
||||||
|
`${text}(${value})` :
|
||||||
|
(
|
||||||
|
text ?
|
||||||
|
text :
|
||||||
|
`未命名${channel_code}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取当前加载的数据
|
||||||
|
getLoadData(){
|
||||||
|
return this.mixinDatacomResData;
|
||||||
|
},
|
||||||
|
// 获取当前缓存key
|
||||||
|
getCurrentCacheKey(){
|
||||||
|
return this.collection;
|
||||||
|
},
|
||||||
|
// 获取缓存
|
||||||
|
getCache(name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
return cacheData[name];
|
||||||
|
},
|
||||||
|
// 设置缓存
|
||||||
|
setCache(value, name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
cacheData[name] = value;
|
||||||
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
|
},
|
||||||
|
// 删除缓存
|
||||||
|
removeCache(name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
delete cacheData[name];
|
||||||
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-base-color: #6a6a6a !default;
|
||||||
|
$uni-main-color: #333 !default;
|
||||||
|
$uni-secondary-color: #909399 !default;
|
||||||
|
$uni-border-3: #e5e5e5;
|
||||||
|
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.hide-on-phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-stat__select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-stat-box {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-stat__actived {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
// outline: 1px solid #2979ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-label-text {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $uni-base-color;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select {
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid $uni-border-3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: solid 1px $uni-border-3;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
height: 35px;
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__label {
|
||||||
|
font-size: 16px;
|
||||||
|
// line-height: 22px;
|
||||||
|
height: 35px;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: $uni-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-box {
|
||||||
|
height: 35px;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-plac {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $uni-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 12px);
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 3;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-scroll {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
max-height: 200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-empty,
|
||||||
|
.uni-select__selector-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
/* border-bottom: solid 1px $uni-border-3; */
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-item:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-empty:last-child,
|
||||||
|
.uni-select__selector-item:last-child {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
border-bottom: none;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector__disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* picker 弹出层通用的指示小三角 */
|
||||||
|
.uni-popper__arrow,
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow {
|
||||||
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||||
|
top: -6px;
|
||||||
|
left: 10%;
|
||||||
|
margin-right: 3px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #EBEEF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
content: " ";
|
||||||
|
top: 1px;
|
||||||
|
margin-left: -6px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-text {
|
||||||
|
// width: 280px;
|
||||||
|
width: 100%;
|
||||||
|
color: $uni-main-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-placeholder {
|
||||||
|
color: $uni-base-color;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select--mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
{
|
||||||
|
"id": "uni-data-select",
|
||||||
|
"displayName": "uni-data-select 下拉框选择器",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "通过数据驱动的下拉框选择器",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"select",
|
||||||
|
"uni-data-select",
|
||||||
|
"下拉框",
|
||||||
|
"下拉选"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.1"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-load-more"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
## DataSelect 下拉框选择器
|
||||||
|
> **组件名：uni-data-select**
|
||||||
|
> 代码块： `uDataSelect`
|
||||||
|
|
||||||
|
当选项过多时，使用下拉菜单展示并选择内容
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
## 1.0.4（2023-03-29）
|
||||||
|
- 修复 手动上传删除一个文件后不能再上传的bug
|
||||||
|
## 1.0.3（2022-12-19）
|
||||||
|
- 新增 sourceType 属性, 可以自定义图片和视频选择的来源
|
||||||
|
## 1.0.2（2022-07-04）
|
||||||
|
- 修复 在uni-forms下样式不生效的bug
|
||||||
|
## 1.0.1（2021-11-23）
|
||||||
|
- 修复 参数为对象的情况下，url在某些情况显示错误的bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
|
||||||
|
## 0.2.16（2021-11-08）
|
||||||
|
- 修复 传入空对象 ，显示错误的Bug
|
||||||
|
## 0.2.15（2021-08-30）
|
||||||
|
- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
|
||||||
|
## 0.2.14（2021-08-23）
|
||||||
|
- 新增 参数中返回 fileID 字段
|
||||||
|
## 0.2.13（2021-08-23）
|
||||||
|
- 修复 腾讯云传入fileID 不能回显的bug
|
||||||
|
- 修复 选择图片后，不能放大的问题
|
||||||
|
## 0.2.12（2021-08-17）
|
||||||
|
- 修复 由于 0.2.11 版本引起的不能回显图片的Bug
|
||||||
|
## 0.2.11（2021-08-16）
|
||||||
|
- 新增 clearFiles(index) 方法，可以手动删除指定文件
|
||||||
|
- 修复 v-model 值设为 null 报错的Bug
|
||||||
|
## 0.2.10（2021-08-13）
|
||||||
|
- 修复 return-type="object" 时，无法删除文件的Bug
|
||||||
|
## 0.2.9（2021-08-03）
|
||||||
|
- 修复 auto-upload 属性失效的Bug
|
||||||
|
## 0.2.8（2021-07-31）
|
||||||
|
- 修复 fileExtname属性不指定值报错的Bug
|
||||||
|
## 0.2.7（2021-07-31）
|
||||||
|
- 修复 在某种场景下图片不回显的Bug
|
||||||
|
## 0.2.6（2021-07-30）
|
||||||
|
- 修复 return-type为object下，返回值不正确的Bug
|
||||||
|
## 0.2.5（2021-07-30）
|
||||||
|
- 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
|
||||||
|
## 0.2.3（2021-07-28）
|
||||||
|
- 优化 调整示例代码
|
||||||
|
## 0.2.2（2021-07-27）
|
||||||
|
- 修复 vue3 下赋值错误的Bug
|
||||||
|
- 优化 h5平台下上传文件导致页面卡死的问题
|
||||||
|
## 0.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.1.1（2021-07-02）
|
||||||
|
- 修复 sourceType 缺少默认值导致 ios 无法选择文件
|
||||||
|
## 0.1.0（2021-06-30）
|
||||||
|
- 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改
|
||||||
|
## 0.0.11（2021-06-30）
|
||||||
|
- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
|
||||||
|
## 0.0.10（2021-06-29）
|
||||||
|
- 优化 文件上传后进度条消失时机
|
||||||
|
## 0.0.9（2021-06-29）
|
||||||
|
- 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug
|
||||||
|
## 0.0.8（2021-06-15）
|
||||||
|
- 修复 删除文件时无法触发 v-model 的Bug
|
||||||
|
## 0.0.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.0.6（2021-04-09）
|
||||||
|
- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug
|
||||||
|
## 0.0.5（2021-04-09）
|
||||||
|
- 优化 更新组件示例
|
||||||
|
## 0.0.4（2021-04-09）
|
||||||
|
- 优化 file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔
|
||||||
|
## 0.0.3（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug
|
||||||
|
|
@ -0,0 +1,224 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const ERR_MSG_OK = 'chooseAndUploadFile:ok';
|
||||||
|
const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
|
||||||
|
|
||||||
|
function chooseImage(opts) {
|
||||||
|
const {
|
||||||
|
count,
|
||||||
|
sizeType = ['original', 'compressed'],
|
||||||
|
sourceType,
|
||||||
|
extension
|
||||||
|
} = opts
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.chooseImage({
|
||||||
|
count,
|
||||||
|
sizeType,
|
||||||
|
sourceType,
|
||||||
|
extension,
|
||||||
|
success(res) {
|
||||||
|
resolve(normalizeChooseAndUploadFileRes(res, 'image'));
|
||||||
|
},
|
||||||
|
fail(res) {
|
||||||
|
reject({
|
||||||
|
errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function chooseVideo(opts) {
|
||||||
|
const {
|
||||||
|
camera,
|
||||||
|
compressed,
|
||||||
|
maxDuration,
|
||||||
|
sourceType,
|
||||||
|
extension
|
||||||
|
} = opts;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.chooseVideo({
|
||||||
|
camera,
|
||||||
|
compressed,
|
||||||
|
maxDuration,
|
||||||
|
sourceType,
|
||||||
|
extension,
|
||||||
|
success(res) {
|
||||||
|
const {
|
||||||
|
tempFilePath,
|
||||||
|
duration,
|
||||||
|
size,
|
||||||
|
height,
|
||||||
|
width
|
||||||
|
} = res;
|
||||||
|
resolve(normalizeChooseAndUploadFileRes({
|
||||||
|
errMsg: 'chooseVideo:ok',
|
||||||
|
tempFilePaths: [tempFilePath],
|
||||||
|
tempFiles: [
|
||||||
|
{
|
||||||
|
name: (res.tempFile && res.tempFile.name) || '',
|
||||||
|
path: tempFilePath,
|
||||||
|
size,
|
||||||
|
type: (res.tempFile && res.tempFile.type) || '',
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
duration,
|
||||||
|
fileType: 'video',
|
||||||
|
cloudPath: '',
|
||||||
|
}, ],
|
||||||
|
}, 'video'));
|
||||||
|
},
|
||||||
|
fail(res) {
|
||||||
|
reject({
|
||||||
|
errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function chooseAll(opts) {
|
||||||
|
const {
|
||||||
|
count,
|
||||||
|
extension
|
||||||
|
} = opts;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let chooseFile = uni.chooseFile;
|
||||||
|
if (typeof wx !== 'undefined' &&
|
||||||
|
typeof wx.chooseMessageFile === 'function') {
|
||||||
|
chooseFile = wx.chooseMessageFile;
|
||||||
|
}
|
||||||
|
if (typeof chooseFile !== 'function') {
|
||||||
|
return reject({
|
||||||
|
errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
chooseFile({
|
||||||
|
type: 'all',
|
||||||
|
count,
|
||||||
|
extension,
|
||||||
|
success(res) {
|
||||||
|
resolve(normalizeChooseAndUploadFileRes(res));
|
||||||
|
},
|
||||||
|
fail(res) {
|
||||||
|
reject({
|
||||||
|
errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeChooseAndUploadFileRes(res, fileType) {
|
||||||
|
res.tempFiles.forEach((item, index) => {
|
||||||
|
if (!item.name) {
|
||||||
|
item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
|
||||||
|
}
|
||||||
|
if (fileType) {
|
||||||
|
item.fileType = fileType;
|
||||||
|
}
|
||||||
|
item.cloudPath =
|
||||||
|
Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
|
||||||
|
});
|
||||||
|
if (!res.tempFilePaths) {
|
||||||
|
res.tempFilePaths = res.tempFiles.map((file) => file.path);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadCloudFiles(files, max = 5, onUploadProgress) {
|
||||||
|
files = JSON.parse(JSON.stringify(files))
|
||||||
|
const len = files.length
|
||||||
|
let count = 0
|
||||||
|
let self = this
|
||||||
|
return new Promise(resolve => {
|
||||||
|
while (count < max) {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
|
||||||
|
function next() {
|
||||||
|
let cur = count++
|
||||||
|
if (cur >= len) {
|
||||||
|
!files.find(item => !item.url && !item.errMsg) && resolve(files)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const fileItem = files[cur]
|
||||||
|
const index = self.files.findIndex(v => v.uuid === fileItem.uuid)
|
||||||
|
fileItem.url = ''
|
||||||
|
delete fileItem.errMsg
|
||||||
|
|
||||||
|
uniCloud
|
||||||
|
.uploadFile({
|
||||||
|
filePath: fileItem.path,
|
||||||
|
cloudPath: fileItem.cloudPath,
|
||||||
|
fileType: fileItem.fileType,
|
||||||
|
onUploadProgress: res => {
|
||||||
|
res.index = index
|
||||||
|
onUploadProgress && onUploadProgress(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
fileItem.url = res.fileID
|
||||||
|
fileItem.index = index
|
||||||
|
if (cur < len) {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(res => {
|
||||||
|
fileItem.errMsg = res.errMsg || res.message
|
||||||
|
fileItem.index = index
|
||||||
|
if (cur < len) {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function uploadFiles(choosePromise, {
|
||||||
|
onChooseFile,
|
||||||
|
onUploadProgress
|
||||||
|
}) {
|
||||||
|
return choosePromise
|
||||||
|
.then((res) => {
|
||||||
|
if (onChooseFile) {
|
||||||
|
const customChooseRes = onChooseFile(res);
|
||||||
|
if (typeof customChooseRes !== 'undefined') {
|
||||||
|
return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ?
|
||||||
|
res : chooseRes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res === false) {
|
||||||
|
return {
|
||||||
|
errMsg: ERR_MSG_OK,
|
||||||
|
tempFilePaths: [],
|
||||||
|
tempFiles: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function chooseAndUploadFile(opts = {
|
||||||
|
type: 'all'
|
||||||
|
}) {
|
||||||
|
if (opts.type === 'image') {
|
||||||
|
return uploadFiles(chooseImage(opts), opts);
|
||||||
|
}
|
||||||
|
else if (opts.type === 'video') {
|
||||||
|
return uploadFiles(chooseVideo(opts), opts);
|
||||||
|
}
|
||||||
|
return uploadFiles(chooseAll(opts), opts);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
chooseAndUploadFile,
|
||||||
|
uploadCloudFiles
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,667 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-file-picker">
|
||||||
|
<view v-if="title" class="uni-file-picker__header">
|
||||||
|
<text class="file-title">{{ title }}</text>
|
||||||
|
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
|
||||||
|
</view>
|
||||||
|
<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
|
||||||
|
:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview"
|
||||||
|
:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
|
||||||
|
<slot>
|
||||||
|
<view class="is-add">
|
||||||
|
<view class="icon-add"></view>
|
||||||
|
<view class="icon-add rotate"></view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</upload-image>
|
||||||
|
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly"
|
||||||
|
:list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon"
|
||||||
|
@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
|
||||||
|
<slot><button type="primary" size="mini">选择文件</button></slot>
|
||||||
|
</upload-file>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
chooseAndUploadFile,
|
||||||
|
uploadCloudFiles
|
||||||
|
} from './choose-and-upload-file.js'
|
||||||
|
import {
|
||||||
|
get_file_ext,
|
||||||
|
get_extname,
|
||||||
|
get_files_and_is_max,
|
||||||
|
get_file_info,
|
||||||
|
get_file_data
|
||||||
|
} from './utils.js'
|
||||||
|
import uploadImage from './upload-image.vue'
|
||||||
|
import uploadFile from './upload-file.vue'
|
||||||
|
let fileInput = null
|
||||||
|
/**
|
||||||
|
* FilePicker 文件选择上传
|
||||||
|
* @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=4079
|
||||||
|
* @property {Object|Array} value 组件数据，通常用来回显 ,类型由return-type属性决定
|
||||||
|
* @property {Boolean} disabled = [true|false] 组件禁用
|
||||||
|
* @value true 禁用
|
||||||
|
* @value false 取消禁用
|
||||||
|
* @property {Boolean} readonly = [true|false] 组件只读，不可选择，不显示进度，不显示删除按钮
|
||||||
|
* @value true 只读
|
||||||
|
* @value false 取消只读
|
||||||
|
* @property {String} return-type = [array|object] 限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
|
||||||
|
* @value array 规定 value 属性的类型为数组
|
||||||
|
* @value object 规定 value 属性的类型为对象
|
||||||
|
* @property {Boolean} disable-preview = [true|false] 禁用图片预览，仅 mode:grid 时生效
|
||||||
|
* @value true 禁用图片预览
|
||||||
|
* @value false 取消禁用图片预览
|
||||||
|
* @property {Boolean} del-icon = [true|false] 是否显示删除按钮
|
||||||
|
* @value true 显示删除按钮
|
||||||
|
* @value false 不显示删除按钮
|
||||||
|
* @property {Boolean} auto-upload = [true|false] 是否自动上传，值为true则只触发@select,可自行上传
|
||||||
|
* @value true 自动上传
|
||||||
|
* @value false 取消自动上传
|
||||||
|
* @property {Number|String} limit 最大选择个数 ，h5 会自动忽略多选的部分
|
||||||
|
* @property {String} title 组件标题，右侧显示上传计数
|
||||||
|
* @property {String} mode = [list|grid] 选择文件后的文件列表样式
|
||||||
|
* @value list 列表显示
|
||||||
|
* @value grid 宫格显示
|
||||||
|
* @property {String} file-mediatype = [image|video|all] 选择文件类型
|
||||||
|
* @value image 只选择图片
|
||||||
|
* @value video 只选择视频
|
||||||
|
* @value all 选择所有文件
|
||||||
|
* @property {Array} file-extname 选择文件后缀，根据 file-mediatype 属性而不同
|
||||||
|
* @property {Object} list-style mode:list 时的样式
|
||||||
|
* @property {Object} image-styles 选择文件后缀，根据 file-mediatype 属性而不同
|
||||||
|
* @event {Function} select 选择文件后触发
|
||||||
|
* @event {Function} progress 文件上传时触发
|
||||||
|
* @event {Function} success 上传成功触发
|
||||||
|
* @event {Function} fail 上传失败触发
|
||||||
|
* @event {Function} delete 文件从列表移除时触发
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniFilePicker',
|
||||||
|
components: {
|
||||||
|
uploadImage,
|
||||||
|
uploadFile
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
virtualHost: true
|
||||||
|
},
|
||||||
|
emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
|
||||||
|
props: {
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, Object],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef VUE3
|
||||||
|
value: {
|
||||||
|
type: [Array, Object],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disablePreview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
delIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 自动上传
|
||||||
|
autoUpload: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 最大选择个数 ，h5只能限制单选或是多选
|
||||||
|
limit: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
// 列表样式 grid | list | list-card
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'grid'
|
||||||
|
},
|
||||||
|
// 选择文件类型 image/video/all
|
||||||
|
fileMediatype: {
|
||||||
|
type: String,
|
||||||
|
default: 'image'
|
||||||
|
},
|
||||||
|
// 文件类型筛选
|
||||||
|
fileExtname: {
|
||||||
|
type: [Array, String],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
listStyles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
// 是否显示边框
|
||||||
|
border: true,
|
||||||
|
// 是否显示分隔线
|
||||||
|
dividline: true,
|
||||||
|
// 线条样式
|
||||||
|
borderStyle: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
imageStyles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: 'auto',
|
||||||
|
height: 'auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
returnType: {
|
||||||
|
type: String,
|
||||||
|
default: 'array'
|
||||||
|
},
|
||||||
|
sizeType: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return ['original', 'compressed']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sourceType: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return ['album', 'camera']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
localValue: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// #ifndef VUE3
|
||||||
|
value: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
this.setValue(newVal, oldVal)
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
this.setValue(newVal, oldVal)
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filesList() {
|
||||||
|
let files = []
|
||||||
|
this.files.forEach(v => {
|
||||||
|
files.push(v)
|
||||||
|
})
|
||||||
|
return files
|
||||||
|
},
|
||||||
|
showType() {
|
||||||
|
if (this.fileMediatype === 'image') {
|
||||||
|
return this.mode
|
||||||
|
}
|
||||||
|
return 'list'
|
||||||
|
},
|
||||||
|
limitLength() {
|
||||||
|
if (this.returnType === 'object') {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
if (!this.limit) {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
if (this.limit >= 9) {
|
||||||
|
return 9
|
||||||
|
}
|
||||||
|
return this.limit
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// TODO 兼容不开通服务空间的情况
|
||||||
|
if (!(uniCloud.config && uniCloud.config.provider)) {
|
||||||
|
this.noSpace = true
|
||||||
|
uniCloud.chooseAndUploadFile = chooseAndUploadFile
|
||||||
|
}
|
||||||
|
this.form = this.getForm('uniForms')
|
||||||
|
this.formItem = this.getForm('uniFormsItem')
|
||||||
|
if (this.form && this.formItem) {
|
||||||
|
if (this.formItem.name) {
|
||||||
|
this.rename = this.formItem.name
|
||||||
|
this.form.inputChildrens.push(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 公开用户使用，清空文件
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
clearFiles(index) {
|
||||||
|
if (index !== 0 && !index) {
|
||||||
|
this.files = []
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setEmit()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.files.splice(index, 1)
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setEmit()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 公开用户使用，继续上传
|
||||||
|
*/
|
||||||
|
upload() {
|
||||||
|
let files = []
|
||||||
|
this.files.forEach((v, index) => {
|
||||||
|
if (v.status === 'ready' || v.status === 'error') {
|
||||||
|
files.push(Object.assign({}, v))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.uploadFiles(files)
|
||||||
|
},
|
||||||
|
async setValue(newVal, oldVal) {
|
||||||
|
const newData = async (v) => {
|
||||||
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/
|
||||||
|
let url = ''
|
||||||
|
if(v.fileID){
|
||||||
|
url = v.fileID
|
||||||
|
}else{
|
||||||
|
url = v.url
|
||||||
|
}
|
||||||
|
if (reg.test(url)) {
|
||||||
|
v.fileID = url
|
||||||
|
v.url = await this.getTempFileURL(url)
|
||||||
|
}
|
||||||
|
if(v.url) v.path = v.url
|
||||||
|
return v
|
||||||
|
}
|
||||||
|
if (this.returnType === 'object') {
|
||||||
|
if (newVal) {
|
||||||
|
await newData(newVal)
|
||||||
|
} else {
|
||||||
|
newVal = {}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!newVal) newVal = []
|
||||||
|
for(let i =0 ;i < newVal.length ;i++){
|
||||||
|
let v = newVal[i]
|
||||||
|
await newData(v)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.localValue = newVal
|
||||||
|
if (this.form && this.formItem &&!this.is_reset) {
|
||||||
|
this.is_reset = false
|
||||||
|
this.formItem.setValue(this.localValue)
|
||||||
|
}
|
||||||
|
let filesData = Object.keys(newVal).length > 0 ? newVal : [];
|
||||||
|
this.files = [].concat(filesData)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择文件
|
||||||
|
*/
|
||||||
|
choose() {
|
||||||
|
|
||||||
|
if (this.disabled) return
|
||||||
|
if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType ===
|
||||||
|
'array') {
|
||||||
|
uni.showToast({
|
||||||
|
title: `您最多选择 ${this.limitLength} 个文件`,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chooseFiles()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择文件并上传
|
||||||
|
*/
|
||||||
|
chooseFiles() {
|
||||||
|
const _extname = get_extname(this.fileExtname)
|
||||||
|
// 获取后缀
|
||||||
|
uniCloud
|
||||||
|
.chooseAndUploadFile({
|
||||||
|
type: this.fileMediatype,
|
||||||
|
compressed: false,
|
||||||
|
sizeType: this.sizeType,
|
||||||
|
sourceType: this.sourceType,
|
||||||
|
// TODO 如果为空，video 有问题
|
||||||
|
extension: _extname.length > 0 ? _extname : undefined,
|
||||||
|
count: this.limitLength - this.files.length, //默认9
|
||||||
|
onChooseFile: this.chooseFileCallback,
|
||||||
|
onUploadProgress: progressEvent => {
|
||||||
|
this.setProgress(progressEvent, progressEvent.index)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
this.setSuccessAndError(result.tempFiles)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log('选择失败', err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择文件回调
|
||||||
|
* @param {Object} res
|
||||||
|
*/
|
||||||
|
async chooseFileCallback(res) {
|
||||||
|
const _extname = get_extname(this.fileExtname)
|
||||||
|
const is_one = (Number(this.limitLength) === 1 &&
|
||||||
|
this.disablePreview &&
|
||||||
|
!this.disabled) ||
|
||||||
|
this.returnType === 'object'
|
||||||
|
// 如果这有一个文件 ，需要清空本地缓存数据
|
||||||
|
if (is_one) {
|
||||||
|
this.files = []
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
filePaths,
|
||||||
|
files
|
||||||
|
} = get_files_and_is_max(res, _extname)
|
||||||
|
if (!(_extname && _extname.length > 0)) {
|
||||||
|
filePaths = res.tempFilePaths
|
||||||
|
files = res.tempFiles
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentData = []
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
if (this.limitLength - this.files.length <= 0) break
|
||||||
|
files[i].uuid = Date.now()
|
||||||
|
let filedata = await get_file_data(files[i], this.fileMediatype)
|
||||||
|
filedata.progress = 0
|
||||||
|
filedata.status = 'ready'
|
||||||
|
this.files.push(filedata)
|
||||||
|
currentData.push({
|
||||||
|
...filedata,
|
||||||
|
file: files[i]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$emit('select', {
|
||||||
|
tempFiles: currentData,
|
||||||
|
tempFilePaths: filePaths
|
||||||
|
})
|
||||||
|
res.tempFiles = files
|
||||||
|
// 停止自动上传
|
||||||
|
if (!this.autoUpload || this.noSpace) {
|
||||||
|
res.tempFiles = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批传
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
uploadFiles(files) {
|
||||||
|
files = [].concat(files)
|
||||||
|
return uploadCloudFiles.call(this, files, 5, res => {
|
||||||
|
this.setProgress(res, res.index, true)
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
this.setSuccessAndError(result)
|
||||||
|
return result;
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 成功或失败
|
||||||
|
*/
|
||||||
|
async setSuccessAndError(res, fn) {
|
||||||
|
let successData = []
|
||||||
|
let errorData = []
|
||||||
|
let tempFilePath = []
|
||||||
|
let errorTempFilePath = []
|
||||||
|
for (let i = 0; i < res.length; i++) {
|
||||||
|
const item = res[i]
|
||||||
|
const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index
|
||||||
|
|
||||||
|
if (index === -1 || !this.files) break
|
||||||
|
if (item.errMsg === 'request:fail') {
|
||||||
|
this.files[index].url = item.path
|
||||||
|
this.files[index].status = 'error'
|
||||||
|
this.files[index].errMsg = item.errMsg
|
||||||
|
// this.files[index].progress = -1
|
||||||
|
errorData.push(this.files[index])
|
||||||
|
errorTempFilePath.push(this.files[index].url)
|
||||||
|
} else {
|
||||||
|
this.files[index].errMsg = ''
|
||||||
|
this.files[index].fileID = item.url
|
||||||
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/
|
||||||
|
if (reg.test(item.url)) {
|
||||||
|
this.files[index].url = await this.getTempFileURL(item.url)
|
||||||
|
}else{
|
||||||
|
this.files[index].url = item.url
|
||||||
|
}
|
||||||
|
|
||||||
|
this.files[index].status = 'success'
|
||||||
|
this.files[index].progress += 1
|
||||||
|
successData.push(this.files[index])
|
||||||
|
tempFilePath.push(this.files[index].fileID)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (successData.length > 0) {
|
||||||
|
this.setEmit()
|
||||||
|
// 状态改变返回
|
||||||
|
this.$emit('success', {
|
||||||
|
tempFiles: this.backObject(successData),
|
||||||
|
tempFilePaths: tempFilePath
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errorData.length > 0) {
|
||||||
|
this.$emit('fail', {
|
||||||
|
tempFiles: this.backObject(errorData),
|
||||||
|
tempFilePaths: errorTempFilePath
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取进度
|
||||||
|
* @param {Object} progressEvent
|
||||||
|
* @param {Object} index
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
setProgress(progressEvent, index, type) {
|
||||||
|
const fileLenth = this.files.length
|
||||||
|
const percentNum = (index / fileLenth) * 100
|
||||||
|
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
||||||
|
let idx = index
|
||||||
|
if (!type) {
|
||||||
|
idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid)
|
||||||
|
}
|
||||||
|
if (idx === -1 || !this.files[idx]) return
|
||||||
|
// fix by mehaotian 100 就会消失，-1 是为了让进度条消失
|
||||||
|
this.files[idx].progress = percentCompleted - 1
|
||||||
|
// 上传中
|
||||||
|
this.$emit('progress', {
|
||||||
|
index: idx,
|
||||||
|
progress: parseInt(percentCompleted),
|
||||||
|
tempFile: this.files[idx]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除文件
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
delFile(index) {
|
||||||
|
this.$emit('delete', {
|
||||||
|
tempFile: this.files[index],
|
||||||
|
tempFilePath: this.files[index].url
|
||||||
|
})
|
||||||
|
this.files.splice(index, 1)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setEmit()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件名和后缀
|
||||||
|
* @param {Object} name
|
||||||
|
*/
|
||||||
|
getFileExt(name) {
|
||||||
|
const last_len = name.lastIndexOf('.')
|
||||||
|
const len = name.length
|
||||||
|
return {
|
||||||
|
name: name.substring(0, last_len),
|
||||||
|
ext: name.substring(last_len + 1, len)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理返回事件
|
||||||
|
*/
|
||||||
|
setEmit() {
|
||||||
|
let data = []
|
||||||
|
if (this.returnType === 'object') {
|
||||||
|
data = this.backObject(this.files)[0]
|
||||||
|
this.localValue = data?data:null
|
||||||
|
} else {
|
||||||
|
data = this.backObject(this.files)
|
||||||
|
if (!this.localValue) {
|
||||||
|
this.localValue = []
|
||||||
|
}
|
||||||
|
this.localValue = [...data]
|
||||||
|
}
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.$emit('update:modelValue', this.localValue)
|
||||||
|
// #endif
|
||||||
|
// #ifndef VUE3
|
||||||
|
this.$emit('input', this.localValue)
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理返回参数
|
||||||
|
* @param {Object} files
|
||||||
|
*/
|
||||||
|
backObject(files) {
|
||||||
|
let newFilesData = []
|
||||||
|
files.forEach(v => {
|
||||||
|
newFilesData.push({
|
||||||
|
extname: v.extname,
|
||||||
|
fileType: v.fileType,
|
||||||
|
image: v.image,
|
||||||
|
name: v.name,
|
||||||
|
path: v.path,
|
||||||
|
size: v.size,
|
||||||
|
fileID:v.fileID,
|
||||||
|
url: v.url,
|
||||||
|
// 修改删除一个文件后不能再上传的bug, #694
|
||||||
|
uuid: v.uuid,
|
||||||
|
status: v.status,
|
||||||
|
cloudPath: v.cloudPath
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return newFilesData
|
||||||
|
},
|
||||||
|
async getTempFileURL(fileList) {
|
||||||
|
fileList = {
|
||||||
|
fileList: [].concat(fileList)
|
||||||
|
}
|
||||||
|
const urls = await uniCloud.getTempFileURL(fileList)
|
||||||
|
return urls.fileList[0].tempFileURL || ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniForms') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false;
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-file-picker {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-file-picker__header {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-count {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-add {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add {
|
||||||
|
width: 50px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate {
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-file-picker__files">
|
||||||
|
<view v-if="!readonly" class="files-button" @click="choose">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
<!-- :class="{'is-text-box':showType === 'list'}" -->
|
||||||
|
<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
|
||||||
|
<!-- ,'is-list-card':showType === 'list-card' -->
|
||||||
|
|
||||||
|
<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
|
||||||
|
'files-border':index !== 0 && styles.dividline}"
|
||||||
|
:style="index !== 0 && styles.dividline &&borderLineStyle">
|
||||||
|
<view class="uni-file-picker__item">
|
||||||
|
<!-- :class="{'is-text-image':showType === 'list'}" -->
|
||||||
|
<!-- <view class="files__image is-text-image">
|
||||||
|
<image class="header-image" :src="item.logo" mode="aspectFit"></image>
|
||||||
|
</view> -->
|
||||||
|
<view class="files__name">{{item.name}}</view>
|
||||||
|
<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
|
||||||
|
<view class="icon-del icon-files"></view>
|
||||||
|
<view class="icon-del rotate"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
|
||||||
|
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
|
||||||
|
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
|
||||||
|
</view>
|
||||||
|
<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
|
||||||
|
点击重试
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "uploadFile",
|
||||||
|
emits:['uploadFiles','choose','delFile'],
|
||||||
|
props: {
|
||||||
|
filesList: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
showType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
listStyles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
// 是否显示边框
|
||||||
|
border: true,
|
||||||
|
// 是否显示分隔线
|
||||||
|
dividline: true,
|
||||||
|
// 线条样式
|
||||||
|
borderStyle: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
readonly:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
list() {
|
||||||
|
let files = []
|
||||||
|
this.filesList.forEach(v => {
|
||||||
|
files.push(v)
|
||||||
|
})
|
||||||
|
return files
|
||||||
|
},
|
||||||
|
styles() {
|
||||||
|
let styles = {
|
||||||
|
border: true,
|
||||||
|
dividline: true,
|
||||||
|
'border-style': {}
|
||||||
|
}
|
||||||
|
return Object.assign(styles, this.listStyles)
|
||||||
|
},
|
||||||
|
borderStyle() {
|
||||||
|
let {
|
||||||
|
borderStyle,
|
||||||
|
border
|
||||||
|
} = this.styles
|
||||||
|
let obj = {}
|
||||||
|
if (!border) {
|
||||||
|
obj.border = 'none'
|
||||||
|
} else {
|
||||||
|
let width = (borderStyle && borderStyle.width) || 1
|
||||||
|
width = this.value2px(width)
|
||||||
|
let radius = (borderStyle && borderStyle.radius) || 5
|
||||||
|
radius = this.value2px(radius)
|
||||||
|
obj = {
|
||||||
|
'border-width': width,
|
||||||
|
'border-style': (borderStyle && borderStyle.style) || 'solid',
|
||||||
|
'border-color': (borderStyle && borderStyle.color) || '#eee',
|
||||||
|
'border-radius': radius
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for (let i in obj) {
|
||||||
|
classles += `${i}:${obj[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
borderLineStyle() {
|
||||||
|
let obj = {}
|
||||||
|
let {
|
||||||
|
borderStyle
|
||||||
|
} = this.styles
|
||||||
|
if (borderStyle && borderStyle.color) {
|
||||||
|
obj['border-color'] = borderStyle.color
|
||||||
|
}
|
||||||
|
if (borderStyle && borderStyle.width) {
|
||||||
|
let width = borderStyle && borderStyle.width || 1
|
||||||
|
let style = borderStyle && borderStyle.style || 0
|
||||||
|
if (typeof width === 'number') {
|
||||||
|
width += 'px'
|
||||||
|
} else {
|
||||||
|
width = width.indexOf('px') ? width : width + 'px'
|
||||||
|
}
|
||||||
|
obj['border-width'] = width
|
||||||
|
|
||||||
|
if (typeof style === 'number') {
|
||||||
|
style += 'px'
|
||||||
|
} else {
|
||||||
|
style = style.indexOf('px') ? style : style + 'px'
|
||||||
|
}
|
||||||
|
obj['border-top-style'] = style
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for (let i in obj) {
|
||||||
|
classles += `${i}:${obj[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
uploadFiles(item, index) {
|
||||||
|
this.$emit("uploadFiles", {
|
||||||
|
item,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
},
|
||||||
|
choose() {
|
||||||
|
this.$emit("choose")
|
||||||
|
},
|
||||||
|
delFile(index) {
|
||||||
|
this.$emit('delFile', index)
|
||||||
|
},
|
||||||
|
value2px(value) {
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
value += 'px'
|
||||||
|
} else {
|
||||||
|
value = value.indexOf('px') !== -1 ? value : value + 'px'
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-file-picker__files {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files-button {
|
||||||
|
// border: 1px red solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-file-picker__lists {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__mask {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-file-picker__lists-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-file-picker__item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 10px;
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files-border {
|
||||||
|
border-top: 1px #eee solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files__name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 25px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-files {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
position: static;
|
||||||
|
background-color: initial;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
// .icon-files .icon-del {
|
||||||
|
// background-color: #333;
|
||||||
|
// width: 12px;
|
||||||
|
// height: 1px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
.is-list-card {
|
||||||
|
border: 1px #eee solid;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files__image {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-box {
|
||||||
|
border: 1px #eee solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-text-image {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate {
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
margin: auto 0;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0;
|
||||||
|
right: 5px;
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 2;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del {
|
||||||
|
width: 15px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #333;
|
||||||
|
// border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef H5 */
|
||||||
|
@media all and (min-width: 768px) {
|
||||||
|
.uni-file-picker__files {
|
||||||
|
max-width: 375px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,292 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-file-picker__container">
|
||||||
|
<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
|
||||||
|
<view class="file-picker__box-content" :style="borderStyle">
|
||||||
|
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
|
||||||
|
<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
|
||||||
|
<view class="icon-del"></view>
|
||||||
|
<view class="icon-del rotate"></view>
|
||||||
|
</view>
|
||||||
|
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
|
||||||
|
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
|
||||||
|
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
|
||||||
|
</view>
|
||||||
|
<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
|
||||||
|
点击重试
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
|
||||||
|
<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
|
||||||
|
<slot>
|
||||||
|
<view class="icon-add"></view>
|
||||||
|
<view class="icon-add rotate"></view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "uploadImage",
|
||||||
|
emits:['uploadFiles','choose','delFile'],
|
||||||
|
props: {
|
||||||
|
filesList: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disablePreview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
imageStyles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: 'auto',
|
||||||
|
height: 'auto',
|
||||||
|
border: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
readonly:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles() {
|
||||||
|
let styles = {
|
||||||
|
width: 'auto',
|
||||||
|
height: 'auto',
|
||||||
|
border: {}
|
||||||
|
}
|
||||||
|
return Object.assign(styles, this.imageStyles)
|
||||||
|
},
|
||||||
|
boxStyle() {
|
||||||
|
const {
|
||||||
|
width = 'auto',
|
||||||
|
height = 'auto'
|
||||||
|
} = this.styles
|
||||||
|
let obj = {}
|
||||||
|
if (height === 'auto') {
|
||||||
|
if (width !== 'auto') {
|
||||||
|
obj.height = this.value2px(width)
|
||||||
|
obj['padding-top'] = 0
|
||||||
|
} else {
|
||||||
|
obj.height = 0
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
obj.height = this.value2px(height)
|
||||||
|
obj['padding-top'] = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
if (width === 'auto') {
|
||||||
|
if (height !== 'auto') {
|
||||||
|
obj.width = this.value2px(height)
|
||||||
|
} else {
|
||||||
|
obj.width = '33.3%'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
obj.width = this.value2px(width)
|
||||||
|
}
|
||||||
|
|
||||||
|
let classles = ''
|
||||||
|
for(let i in obj){
|
||||||
|
classles+= `${i}:${obj[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
borderStyle() {
|
||||||
|
let {
|
||||||
|
border
|
||||||
|
} = this.styles
|
||||||
|
let obj = {}
|
||||||
|
const widthDefaultValue = 1
|
||||||
|
const radiusDefaultValue = 3
|
||||||
|
if (typeof border === 'boolean') {
|
||||||
|
obj.border = border ? '1px #eee solid' : 'none'
|
||||||
|
} else {
|
||||||
|
let width = (border && border.width) || widthDefaultValue
|
||||||
|
width = this.value2px(width)
|
||||||
|
let radius = (border && border.radius) || radiusDefaultValue
|
||||||
|
radius = this.value2px(radius)
|
||||||
|
obj = {
|
||||||
|
'border-width': width,
|
||||||
|
'border-style': (border && border.style) || 'solid',
|
||||||
|
'border-color': (border && border.color) || '#eee',
|
||||||
|
'border-radius': radius
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for(let i in obj){
|
||||||
|
classles+= `${i}:${obj[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
uploadFiles(item, index) {
|
||||||
|
this.$emit("uploadFiles", item)
|
||||||
|
},
|
||||||
|
choose() {
|
||||||
|
this.$emit("choose")
|
||||||
|
},
|
||||||
|
delFile(index) {
|
||||||
|
this.$emit('delFile', index)
|
||||||
|
},
|
||||||
|
prviewImage(img, index) {
|
||||||
|
let urls = []
|
||||||
|
if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
|
||||||
|
this.$emit("choose")
|
||||||
|
}
|
||||||
|
if(this.disablePreview) return
|
||||||
|
this.filesList.forEach(i => {
|
||||||
|
urls.push(i.url)
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.previewImage({
|
||||||
|
urls: urls,
|
||||||
|
current: index
|
||||||
|
});
|
||||||
|
},
|
||||||
|
value2px(value) {
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
value += 'px'
|
||||||
|
} else {
|
||||||
|
if (value.indexOf('%') === -1) {
|
||||||
|
value = value.indexOf('px') !== -1 ? value : value + 'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-file-picker__container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__box {
|
||||||
|
position: relative;
|
||||||
|
// flex: 0 0 33.3%;
|
||||||
|
width: 33.3%;
|
||||||
|
height: 0;
|
||||||
|
padding-top: 33.33%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__box-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px #eee solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__progress {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
/* border: 1px red solid; */
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__progress-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-picker__mask {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-add {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add {
|
||||||
|
width: 50px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate {
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
right: 3px;
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 2;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del {
|
||||||
|
width: 15px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
/**
|
||||||
|
* 获取文件名和后缀
|
||||||
|
* @param {String} name
|
||||||
|
*/
|
||||||
|
export const get_file_ext = (name) => {
|
||||||
|
const last_len = name.lastIndexOf('.')
|
||||||
|
const len = name.length
|
||||||
|
return {
|
||||||
|
name: name.substring(0, last_len),
|
||||||
|
ext: name.substring(last_len + 1, len)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取扩展名
|
||||||
|
* @param {Array} fileExtname
|
||||||
|
*/
|
||||||
|
export const get_extname = (fileExtname) => {
|
||||||
|
if (!Array.isArray(fileExtname)) {
|
||||||
|
let extname = fileExtname.replace(/(\[|\])/g, '')
|
||||||
|
return extname.split(',')
|
||||||
|
} else {
|
||||||
|
return fileExtname
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件和检测是否可选
|
||||||
|
*/
|
||||||
|
export const get_files_and_is_max = (res, _extname) => {
|
||||||
|
let filePaths = []
|
||||||
|
let files = []
|
||||||
|
if(!_extname || _extname.length === 0){
|
||||||
|
return {
|
||||||
|
filePaths,
|
||||||
|
files
|
||||||
|
}
|
||||||
|
}
|
||||||
|
res.tempFiles.forEach(v => {
|
||||||
|
let fileFullName = get_file_ext(v.name)
|
||||||
|
const extname = fileFullName.ext.toLowerCase()
|
||||||
|
if (_extname.indexOf(extname) !== -1) {
|
||||||
|
files.push(v)
|
||||||
|
filePaths.push(v.path)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (files.length !== res.tempFiles.length) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 5000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
filePaths,
|
||||||
|
files
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取图片信息
|
||||||
|
* @param {Object} filepath
|
||||||
|
*/
|
||||||
|
export const get_file_info = (filepath) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: filepath,
|
||||||
|
success(res) {
|
||||||
|
resolve(res)
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
reject(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取封装数据
|
||||||
|
*/
|
||||||
|
export const get_file_data = async (files, type = 'image') => {
|
||||||
|
// 最终需要上传数据库的数据
|
||||||
|
let fileFullName = get_file_ext(files.name)
|
||||||
|
const extname = fileFullName.ext.toLowerCase()
|
||||||
|
let filedata = {
|
||||||
|
name: files.name,
|
||||||
|
uuid: files.uuid,
|
||||||
|
extname: extname || '',
|
||||||
|
cloudPath: files.cloudPath,
|
||||||
|
fileType: files.fileType,
|
||||||
|
url: files.path || files.path,
|
||||||
|
size: files.size, //单位是字节
|
||||||
|
image: {},
|
||||||
|
path: files.path,
|
||||||
|
video: {}
|
||||||
|
}
|
||||||
|
if (type === 'image') {
|
||||||
|
const imageinfo = await get_file_info(files.path)
|
||||||
|
delete filedata.video
|
||||||
|
filedata.image.width = imageinfo.width
|
||||||
|
filedata.image.height = imageinfo.height
|
||||||
|
filedata.image.location = imageinfo.path
|
||||||
|
} else {
|
||||||
|
delete filedata.image
|
||||||
|
}
|
||||||
|
return filedata
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"id": "uni-file-picker",
|
||||||
|
"displayName": "uni-file-picker 文件选择上传",
|
||||||
|
"version": "1.0.4",
|
||||||
|
"description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"图片上传",
|
||||||
|
"文件上传"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
## FilePicker 文件选择上传
|
||||||
|
|
||||||
|
> **组件名：uni-file-picker**
|
||||||
|
> 代码块： `uFilePicker`
|
||||||
|
|
||||||
|
|
||||||
|
文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
## 1.3.5（2022-01-24）
|
||||||
|
- 优化 size 属性可以传入不带单位的字符串数值
|
||||||
|
## 1.3.4（2022-01-24）
|
||||||
|
- 优化 size 支持其他单位
|
||||||
|
## 1.3.3（2022-01-17）
|
||||||
|
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
|
||||||
|
## 1.3.2（2021-12-01）
|
||||||
|
- 优化 示例可复制图标名称
|
||||||
|
## 1.3.1（2021-11-23）
|
||||||
|
- 优化 兼容旧组件 type 值
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 新增 更多图标
|
||||||
|
- 优化 自定义图标使用方式
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||||
|
## 1.1.7（2021-11-08）
|
||||||
|
## 1.2.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.5（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.4（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icons from './icons.js';
|
||||||
|
const getVal = (val) => {
|
||||||
|
const reg = /^[0-9]*$/g
|
||||||
|
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
||||||
|
}
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
var domModule = weex.requireModule('dom');
|
||||||
|
import iconUrl from './uniicons.ttf'
|
||||||
|
domModule.addRule('fontFace', {
|
||||||
|
'fontFamily': "uniicons",
|
||||||
|
'src': "url('"+iconUrl+"')"
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Icons 图标
|
||||||
|
* @description 用于展示 icons 图标
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||||
|
* @property {Number} size 图标大小
|
||||||
|
* @property {String} type 图标图案，参考示例
|
||||||
|
* @property {String} color 图标颜色
|
||||||
|
* @property {String} customPrefix 自定义图标
|
||||||
|
* @event {Function} click 点击 Icon 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniIcons',
|
||||||
|
emits:['click'],
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 16
|
||||||
|
},
|
||||||
|
customPrefix:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
icons: icons.glyphs
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
unicode(){
|
||||||
|
let code = this.icons.find(v=>v.font_class === this.type)
|
||||||
|
if(code){
|
||||||
|
return unescape(`%u${code.unicode}`)
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
iconSize(){
|
||||||
|
return getVal(this.size)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@import './uniicons.css';
|
||||||
|
@font-face {
|
||||||
|
font-family: uniicons;
|
||||||
|
src: url('./uniicons.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-icons {
|
||||||
|
font-family: uniicons;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,663 @@
|
||||||
|
.uniui-color:before {
|
||||||
|
content: "\e6cf";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-wallet:before {
|
||||||
|
content: "\e6b1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-settings-filled:before {
|
||||||
|
content: "\e6ce";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-auth-filled:before {
|
||||||
|
content: "\e6cc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-shop-filled:before {
|
||||||
|
content: "\e6cd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-staff-filled:before {
|
||||||
|
content: "\e6cb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-vip-filled:before {
|
||||||
|
content: "\e6c6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plus-filled:before {
|
||||||
|
content: "\e6c7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-folder-add-filled:before {
|
||||||
|
content: "\e6c8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-color-filled:before {
|
||||||
|
content: "\e6c9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-tune-filled:before {
|
||||||
|
content: "\e6ca";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-calendar-filled:before {
|
||||||
|
content: "\e6c0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-notification-filled:before {
|
||||||
|
content: "\e6c1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-wallet-filled:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-medal-filled:before {
|
||||||
|
content: "\e6c3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift-filled:before {
|
||||||
|
content: "\e6c4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-fire-filled:before {
|
||||||
|
content: "\e6c5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refreshempty:before {
|
||||||
|
content: "\e6bf";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-location-filled:before {
|
||||||
|
content: "\e6af";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-person-filled:before {
|
||||||
|
content: "\e69d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-personadd-filled:before {
|
||||||
|
content: "\e698";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-back:before {
|
||||||
|
content: "\e6b9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-forward:before {
|
||||||
|
content: "\e6ba";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-right:before {
|
||||||
|
content: "\e6bb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinright:before {
|
||||||
|
content: "\e6bb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-left:before {
|
||||||
|
content: "\e6bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinleft:before {
|
||||||
|
content: "\e6bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-up:before {
|
||||||
|
content: "\e6bd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinup:before {
|
||||||
|
content: "\e6bd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-down:before {
|
||||||
|
content: "\e6be";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthindown:before {
|
||||||
|
content: "\e6be";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-bottom:before {
|
||||||
|
content: "\e6b8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowdown:before {
|
||||||
|
content: "\e6b8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-right:before {
|
||||||
|
content: "\e6b5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowright:before {
|
||||||
|
content: "\e6b5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-top:before {
|
||||||
|
content: "\e6b6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowup:before {
|
||||||
|
content: "\e6b6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-left:before {
|
||||||
|
content: "\e6b7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowleft:before {
|
||||||
|
content: "\e6b7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye:before {
|
||||||
|
content: "\e651";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-filled:before {
|
||||||
|
content: "\e66a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-slash:before {
|
||||||
|
content: "\e6b3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-slash-filled:before {
|
||||||
|
content: "\e6b4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-info-filled:before {
|
||||||
|
content: "\e649";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-reload:before {
|
||||||
|
content: "\e6b2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-micoff-filled:before {
|
||||||
|
content: "\e6b0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-pin-ellipse:before {
|
||||||
|
content: "\e6ac";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-pin:before {
|
||||||
|
content: "\e6ad";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-location:before {
|
||||||
|
content: "\e6ae";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-starhalf:before {
|
||||||
|
content: "\e683";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-star:before {
|
||||||
|
content: "\e688";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-star-filled:before {
|
||||||
|
content: "\e68f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-calendar:before {
|
||||||
|
content: "\e6a0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-fire:before {
|
||||||
|
content: "\e6a1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-medal:before {
|
||||||
|
content: "\e6a2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-font:before {
|
||||||
|
content: "\e6a3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift:before {
|
||||||
|
content: "\e6a4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-link:before {
|
||||||
|
content: "\e6a5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-notification:before {
|
||||||
|
content: "\e6a6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-staff:before {
|
||||||
|
content: "\e6a7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-vip:before {
|
||||||
|
content: "\e6a8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-folder-add:before {
|
||||||
|
content: "\e6a9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-tune:before {
|
||||||
|
content: "\e6aa";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-auth:before {
|
||||||
|
content: "\e6ab";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-person:before {
|
||||||
|
content: "\e699";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-email-filled:before {
|
||||||
|
content: "\e69a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-phone-filled:before {
|
||||||
|
content: "\e69b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-phone:before {
|
||||||
|
content: "\e69c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-email:before {
|
||||||
|
content: "\e69e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-personadd:before {
|
||||||
|
content: "\e69f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatboxes-filled:before {
|
||||||
|
content: "\e692";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-contact:before {
|
||||||
|
content: "\e693";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatbubble-filled:before {
|
||||||
|
content: "\e694";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-contact-filled:before {
|
||||||
|
content: "\e695";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatboxes:before {
|
||||||
|
content: "\e696";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatbubble:before {
|
||||||
|
content: "\e697";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-upload-filled:before {
|
||||||
|
content: "\e68e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-upload:before {
|
||||||
|
content: "\e690";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-weixin:before {
|
||||||
|
content: "\e691";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-compose:before {
|
||||||
|
content: "\e67f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-qq:before {
|
||||||
|
content: "\e680";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-download-filled:before {
|
||||||
|
content: "\e681";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-pyq:before {
|
||||||
|
content: "\e682";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-sound:before {
|
||||||
|
content: "\e684";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-trash-filled:before {
|
||||||
|
content: "\e685";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-sound-filled:before {
|
||||||
|
content: "\e686";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-trash:before {
|
||||||
|
content: "\e687";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-videocam-filled:before {
|
||||||
|
content: "\e689";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-spinner-cycle:before {
|
||||||
|
content: "\e68a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-weibo:before {
|
||||||
|
content: "\e68b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-videocam:before {
|
||||||
|
content: "\e68c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-download:before {
|
||||||
|
content: "\e68d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-help:before {
|
||||||
|
content: "\e679";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-navigate-filled:before {
|
||||||
|
content: "\e67a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plusempty:before {
|
||||||
|
content: "\e67b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-smallcircle:before {
|
||||||
|
content: "\e67c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-minus-filled:before {
|
||||||
|
content: "\e67d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-micoff:before {
|
||||||
|
content: "\e67e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-closeempty:before {
|
||||||
|
content: "\e66c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-clear:before {
|
||||||
|
content: "\e66d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-navigate:before {
|
||||||
|
content: "\e66e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-minus:before {
|
||||||
|
content: "\e66f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-image:before {
|
||||||
|
content: "\e670";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mic:before {
|
||||||
|
content: "\e671";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperplane:before {
|
||||||
|
content: "\e672";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-close:before {
|
||||||
|
content: "\e673";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-help-filled:before {
|
||||||
|
content: "\e674";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperplane-filled:before {
|
||||||
|
content: "\e675";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plus:before {
|
||||||
|
content: "\e676";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mic-filled:before {
|
||||||
|
content: "\e677";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-image-filled:before {
|
||||||
|
content: "\e678";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-locked-filled:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-info:before {
|
||||||
|
content: "\e669";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-locked:before {
|
||||||
|
content: "\e66b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-camera-filled:before {
|
||||||
|
content: "\e658";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chat-filled:before {
|
||||||
|
content: "\e659";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-camera:before {
|
||||||
|
content: "\e65a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-circle:before {
|
||||||
|
content: "\e65b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkmarkempty:before {
|
||||||
|
content: "\e65c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chat:before {
|
||||||
|
content: "\e65d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-circle-filled:before {
|
||||||
|
content: "\e65e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-flag:before {
|
||||||
|
content: "\e65f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-flag-filled:before {
|
||||||
|
content: "\e660";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gear-filled:before {
|
||||||
|
content: "\e661";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-home:before {
|
||||||
|
content: "\e662";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-home-filled:before {
|
||||||
|
content: "\e663";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gear:before {
|
||||||
|
content: "\e664";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-smallcircle-filled:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-filled:before {
|
||||||
|
content: "\e666";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map:before {
|
||||||
|
content: "\e667";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refresh-filled:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refresh:before {
|
||||||
|
content: "\e657";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-upload:before {
|
||||||
|
content: "\e645";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-download-filled:before {
|
||||||
|
content: "\e646";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-download:before {
|
||||||
|
content: "\e647";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-upload-filled:before {
|
||||||
|
content: "\e648";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-redo:before {
|
||||||
|
content: "\e64a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-images-filled:before {
|
||||||
|
content: "\e64b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-undo-filled:before {
|
||||||
|
content: "\e64c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-more:before {
|
||||||
|
content: "\e64d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-more-filled:before {
|
||||||
|
content: "\e64e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-undo:before {
|
||||||
|
content: "\e64f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-images:before {
|
||||||
|
content: "\e650";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperclip:before {
|
||||||
|
content: "\e652";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-settings:before {
|
||||||
|
content: "\e653";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-search:before {
|
||||||
|
content: "\e654";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-redo-filled:before {
|
||||||
|
content: "\e655";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-list:before {
|
||||||
|
content: "\e644";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mail-open-filled:before {
|
||||||
|
content: "\e63a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-down-filled:before {
|
||||||
|
content: "\e63c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-down:before {
|
||||||
|
content: "\e63d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-up-filled:before {
|
||||||
|
content: "\e63e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-up:before {
|
||||||
|
content: "\e63f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-heart-filled:before {
|
||||||
|
content: "\e641";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mail-open:before {
|
||||||
|
content: "\e643";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-heart:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-loop:before {
|
||||||
|
content: "\e633";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-pulldown:before {
|
||||||
|
content: "\e632";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-scan:before {
|
||||||
|
content: "\e62a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-bars:before {
|
||||||
|
content: "\e627";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cart-filled:before {
|
||||||
|
content: "\e629";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkbox:before {
|
||||||
|
content: "\e62b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkbox-filled:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-shop:before {
|
||||||
|
content: "\e62f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-headphones:before {
|
||||||
|
content: "\e630";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cart:before {
|
||||||
|
content: "\e631";
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"id": "uni-icons",
|
||||||
|
"displayName": "uni-icons 图标",
|
||||||
|
"version": "1.3.5",
|
||||||
|
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"icon",
|
||||||
|
"图标"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.2.14"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
## Icons 图标
|
||||||
|
> **组件名：uni-icons**
|
||||||
|
> 代码块： `uIcons`
|
||||||
|
|
||||||
|
用于展示 icons 图标 。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
## 1.3.3（2022-01-20）
|
||||||
|
- 新增 showText属性 ，是否显示文本
|
||||||
|
## 1.3.2（2022-01-19）
|
||||||
|
- 修复 nvue 平台下不显示文本的bug
|
||||||
|
## 1.3.1（2022-01-19）
|
||||||
|
- 修复 微信小程序平台样式选择器报警告的问题
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
## 1.2.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.2.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.8（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.7（2021-03-30）
|
||||||
|
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
|
||||||
|
## 1.1.6（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "Pull up to show more",
|
||||||
|
"uni-load-more.contentrefresh": "loading...",
|
||||||
|
"uni-load-more.contentnomore": "No more data"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉显示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加载...",
|
||||||
|
"uni-load-more.contentnomore": "没有更多数据了"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉顯示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加載...",
|
||||||
|
"uni-load-more.contentnomore": "沒有更多數據了"
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"id": "uni-load-more",
|
||||||
|
"displayName": "uni-load-more 加载更多",
|
||||||
|
"version": "1.3.3",
|
||||||
|
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"加载更多",
|
||||||
|
"load-more"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
|
||||||
|
### LoadMore 加载更多
|
||||||
|
> **组件名：uni-load-more**
|
||||||
|
> 代码块： `uLoadMore`
|
||||||
|
|
||||||
|
|
||||||
|
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||||
|
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
## 1.8.2（2023-02-02）
|
||||||
|
- uni-popup-dialog 组件新增 inputType 属性
|
||||||
|
## 1.8.1（2022-12-01）
|
||||||
|
- 修复 nvue 下 v-show 报错
|
||||||
|
## 1.8.0（2022-11-29）
|
||||||
|
- 优化 主题样式
|
||||||
|
## 1.7.9（2022-04-02）
|
||||||
|
- 修复 弹出层内部无法滚动的bug
|
||||||
|
## 1.7.8（2022-03-28）
|
||||||
|
- 修复 小程序中高度错误的bug
|
||||||
|
## 1.7.7（2022-03-17）
|
||||||
|
- 修复 快速调用open出现问题的Bug
|
||||||
|
## 1.7.6（2022-02-14）
|
||||||
|
- 修复 safeArea 属性不能设置为false的bug
|
||||||
|
## 1.7.5（2022-01-19）
|
||||||
|
- 修复 isMaskClick 失效的bug
|
||||||
|
## 1.7.4（2022-01-19）
|
||||||
|
- 新增 cancelText \ confirmText 属性 ，可自定义文本
|
||||||
|
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
|
||||||
|
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
|
||||||
|
## 1.7.3（2022-01-13）
|
||||||
|
- 修复 设置 safeArea 属性不生效的bug
|
||||||
|
## 1.7.2（2021-11-26）
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.7.1（2021-11-26）
|
||||||
|
- 修复 vuedoc 文字错误
|
||||||
|
## 1.7.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||||
|
## 1.6.2（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.6.1（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.6.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.5.0（2021-06-23）
|
||||||
|
- 新增 mask-click 遮罩层点击事件
|
||||||
|
## 1.4.5（2021-06-22）
|
||||||
|
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.4（2021-06-18）
|
||||||
|
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.3（2021-06-08）
|
||||||
|
- 修复 错误的 watch 字段
|
||||||
|
- 修复 safeArea 属性不生效的问题
|
||||||
|
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.2（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.4.1（2021-04-29）
|
||||||
|
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||||
|
## 1.4.0 （2021-04-29）
|
||||||
|
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||||
|
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||||
|
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||||
|
- 新增 safeArea 属性，是否适配底部安全区
|
||||||
|
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||||
|
- 修复 App 端弹出等待的Bug
|
||||||
|
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||||
|
- 优化 更简单的组件自定义方式
|
||||||
|
## 1.2.9（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.2.8（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
## 1.2.7（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 PC 端
|
||||||
|
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
this.$once('hook:beforeDestroy', () => {
|
||||||
|
document.removeEventListener('keyup', listener)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
@ -0,0 +1,275 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-dialog">
|
||||||
|
<view class="uni-dialog-title">
|
||||||
|
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-dialog-content-text">{{content}}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-dialog-content">
|
||||||
|
<slot>
|
||||||
|
<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" >
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button-group">
|
||||||
|
<view class="uni-dialog-button" @click="closeDialog">
|
||||||
|
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||||
|
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from '../uni-popup/i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-对话框样式
|
||||||
|
* @description 弹出层-对话框样式
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} value input 模式下的默认值
|
||||||
|
* @property {String} placeholder input 模式下输入提示
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} mode = [base|input] 模式、
|
||||||
|
* @value base 基础对话框
|
||||||
|
* @value input 可输入对话框
|
||||||
|
* @property {String} content 对话框内容
|
||||||
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||||
|
* @event {Function} confirm 点击确认按钮触发
|
||||||
|
* @event {Function} close 点击取消按钮触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "uniPopupDialog",
|
||||||
|
mixins: [popup],
|
||||||
|
emits:['confirm','close'],
|
||||||
|
props: {
|
||||||
|
inputType:{
|
||||||
|
type: String,
|
||||||
|
default: 'text'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'error'
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'base'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
beforeClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
cancelText:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
confirmText:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogType: 'error',
|
||||||
|
focus: false,
|
||||||
|
val: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
okText() {
|
||||||
|
return this.confirmText || t("uni-popup.ok")
|
||||||
|
},
|
||||||
|
closeText() {
|
||||||
|
return this.cancelText || t("uni-popup.cancel")
|
||||||
|
},
|
||||||
|
placeholderText() {
|
||||||
|
return this.placeholder || t("uni-popup.placeholder")
|
||||||
|
},
|
||||||
|
titleText() {
|
||||||
|
return this.title || t("uni-popup.title")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
type(val) {
|
||||||
|
this.dialogType = val
|
||||||
|
},
|
||||||
|
mode(val) {
|
||||||
|
if (val === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value(val) {
|
||||||
|
this.val = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 对话框遮罩不可点击
|
||||||
|
this.popup.disableMask()
|
||||||
|
// this.popup.closeMask()
|
||||||
|
if (this.mode === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
this.val = this.value
|
||||||
|
} else {
|
||||||
|
this.dialogType = this.type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.focus = true
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击确认按钮
|
||||||
|
*/
|
||||||
|
onOk() {
|
||||||
|
if (this.mode === 'input'){
|
||||||
|
this.$emit('confirm', this.val)
|
||||||
|
}else{
|
||||||
|
this.$emit('confirm')
|
||||||
|
}
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击取消按钮
|
||||||
|
*/
|
||||||
|
closeDialog() {
|
||||||
|
this.$emit('close')
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
},
|
||||||
|
close(){
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-popup-dialog {
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 11px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6C6C6C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-group {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
border-top-color: #f5f5f5;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-border-left {
|
||||||
|
border-left-color: #f0f0f0;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-button-color {
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px #eee solid;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
color: #4cd964;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
color: #f0ad4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
color: #dd524d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-message">
|
||||||
|
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-消息提示
|
||||||
|
* @description 弹出层-消息提示
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} message 消息提示文字
|
||||||
|
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uniPopupMessage',
|
||||||
|
mixins:[popup],
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* 主题 success/warning/info/error 默认 success
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'success'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 消息文字
|
||||||
|
*/
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示时间，设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 3000
|
||||||
|
},
|
||||||
|
maskShow:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.popup.maskShow = this.maskShow
|
||||||
|
this.popup.messageChild = this
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
timerClose(){
|
||||||
|
if(this.duration === 0) return
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(()=>{
|
||||||
|
this.popup.close()
|
||||||
|
},this.duration)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-popup-message {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup-message__box {
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-color: #eee;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 500px) {
|
||||||
|
.fixforpc-width {
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex: none;
|
||||||
|
min-width: 380px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
max-width: 50%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
max-width: 500px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup-message-text {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success-text {
|
||||||
|
color: #67C23A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
background-color: #faecd8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn-text {
|
||||||
|
color: #E6A23C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
background-color: #fde2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error-text {
|
||||||
|
color: #F56C6C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info-text {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-share">
|
||||||
|
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||||
|
<view class="uni-share-content">
|
||||||
|
<view class="uni-share-content-box">
|
||||||
|
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||||
|
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||||
|
<text class="uni-share-text">{{item.text}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-share-button-box">
|
||||||
|
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from '../uni-popup/i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
export default {
|
||||||
|
name: 'UniPopupShare',
|
||||||
|
mixins:[popup],
|
||||||
|
emits:['select'],
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
beforeClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bottomData: [{
|
||||||
|
text: '微信',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '支付宝',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'QQ',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||||
|
name: 'qq'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '新浪',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||||
|
name: 'sina'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// text: '百度',
|
||||||
|
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||||
|
// name: 'copy'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '其他',
|
||||||
|
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||||
|
// name: 'more'
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
computed: {
|
||||||
|
cancelText() {
|
||||||
|
return t("uni-popup.cancel")
|
||||||
|
},
|
||||||
|
shareTitleText() {
|
||||||
|
return this.title || t("uni-popup.shareTitle")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 选择内容
|
||||||
|
*/
|
||||||
|
select(item, index) {
|
||||||
|
this.$emit('select', {
|
||||||
|
item,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
this.close()
|
||||||
|
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭窗口
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-popup-share {
|
||||||
|
background-color: #fff;
|
||||||
|
border-top-left-radius: 11px;
|
||||||
|
border-top-right-radius: 11px;
|
||||||
|
}
|
||||||
|
.uni-share-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.uni-share-title-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.uni-share-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item {
|
||||||
|
width: 90px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-image {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-text {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3B4144;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button::after {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "cancel",
|
||||||
|
"uni-popup.ok": "ok",
|
||||||
|
"uni-popup.placeholder": "pleace enter",
|
||||||
|
"uni-popup.title": "Hint",
|
||||||
|
"uni-popup.shareTitle": "Share to"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "取消",
|
||||||
|
"uni-popup.ok": "确定",
|
||||||
|
"uni-popup.placeholder": "请输入",
|
||||||
|
"uni-popup.title": "提示",
|
||||||
|
"uni-popup.shareTitle": "分享到"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "取消",
|
||||||
|
"uni-popup.ok": "確定",
|
||||||
|
"uni-popup.placeholder": "請輸入",
|
||||||
|
"uni-popup.title": "提示",
|
||||||
|
"uni-popup.shareTitle": "分享到"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// document.removeEventListener('keyup', listener)
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue