新增管理台，管理轮播图功能
This commit is contained in:
chinahu-woker
@@ -0,0 +1,488 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "fui-upload",
|
||||
emits: ["success", "error", "complete", "preview", "reupload", "delete"],
|
||||
// components:{
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
fileList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
addColor: {
|
||||
type: String,
|
||||
default: "#333"
|
||||
},
|
||||
addSize: {
|
||||
type: [Number, String],
|
||||
default: 88
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: "#eee"
|
||||
},
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//solid、dashed、dotted
|
||||
borderSytle: {
|
||||
type: String,
|
||||
default: "solid"
|
||||
},
|
||||
isDel: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
delColor: {
|
||||
type: String,
|
||||
default: "rgba(0,0,0,.6)"
|
||||
},
|
||||
confirmDel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//V1.9.8+ 是否调用upload 方法进行上传操作
|
||||
callUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sizeType: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["original", "compressed"];
|
||||
}
|
||||
},
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["album", "camera"];
|
||||
}
|
||||
},
|
||||
//图片后缀名限制
|
||||
suffix: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//单张图片大小限制 MB
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "file"
|
||||
},
|
||||
header: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
param: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urls: [],
|
||||
tempFiles: [],
|
||||
//preupload、uploading、success、error
|
||||
status: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData(this.fileList);
|
||||
},
|
||||
watch: {
|
||||
fileList(vals) {
|
||||
this.initData(vals);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showAdd() {
|
||||
let show = true;
|
||||
let len = this.urls.length;
|
||||
if (!this.isAdd || this.max == -1 && len >= 9 || this.max != -1 && len >= this.max) {
|
||||
show = false;
|
||||
}
|
||||
return show;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initData(urls) {
|
||||
urls = urls || [];
|
||||
this.status = [];
|
||||
let status = [];
|
||||
let tempFiles = [];
|
||||
urls.forEach((item) => {
|
||||
status.push("success");
|
||||
tempFiles.push({
|
||||
path: item
|
||||
});
|
||||
});
|
||||
this.urls = [...urls];
|
||||
this.tempFiles = tempFiles;
|
||||
this.status = status;
|
||||
},
|
||||
reUpload(index) {
|
||||
this.$set(this.status, index, "uploading");
|
||||
if (this.callUpload) {
|
||||
this.$emit("reupload", {
|
||||
index
|
||||
});
|
||||
} else {
|
||||
this.uploadImage(index, this.urls[index]).then((res) => {
|
||||
this._success(res);
|
||||
}).catch((res) => {
|
||||
this._error(res);
|
||||
});
|
||||
}
|
||||
},
|
||||
getStatus() {
|
||||
if (this.status.length === 0)
|
||||
return "";
|
||||
let status = "preupload";
|
||||
if (this.status.indexOf("preupload") === -1) {
|
||||
status = ~this.status.indexOf("uploading") ? "uploading" : "success";
|
||||
if (status !== "uploading" && ~this.status.indexOf("error")) {
|
||||
status = "error";
|
||||
}
|
||||
}
|
||||
return status;
|
||||
},
|
||||
onComplete(action) {
|
||||
let status = this.getStatus();
|
||||
this.$emit("complete", {
|
||||
status,
|
||||
urls: this.urls,
|
||||
tempFiles: this.tempFiles,
|
||||
action,
|
||||
param: this.param
|
||||
});
|
||||
},
|
||||
_success(res) {
|
||||
let status = this.getStatus();
|
||||
this.$emit("success", {
|
||||
status,
|
||||
...res,
|
||||
param: this.param
|
||||
});
|
||||
},
|
||||
_error(res) {
|
||||
let status = this.getStatus();
|
||||
this.$emit("error", {
|
||||
status,
|
||||
...res,
|
||||
param: this.param
|
||||
});
|
||||
},
|
||||
result(url, index) {
|
||||
if (!url || index === void 0)
|
||||
return;
|
||||
this.$set(this.urls, index, url);
|
||||
setTimeout(() => {
|
||||
this.onComplete("upload");
|
||||
}, 0);
|
||||
},
|
||||
toast(text) {
|
||||
text && common_vendor.index.showToast({
|
||||
title: text,
|
||||
icon: "none"
|
||||
});
|
||||
},
|
||||
chooseImage() {
|
||||
let max = Number(this.max);
|
||||
common_vendor.index.chooseImage({
|
||||
count: max === -1 ? 9 : max - this.urls.length,
|
||||
sizeType: this.sizeType,
|
||||
sourceType: this.sourceType,
|
||||
success: (e) => {
|
||||
let imageArr = [];
|
||||
for (let i = 0; i < e.tempFiles.length; i++) {
|
||||
let len = this.urls.length;
|
||||
if (len >= max && max !== -1) {
|
||||
this.toast(`最多可上传${max}张图片`);
|
||||
break;
|
||||
}
|
||||
let path = e.tempFiles[i].path;
|
||||
if (this.suffix.length > 0) {
|
||||
let format = "";
|
||||
format = path.split(".")[path.split(".").length - 1];
|
||||
if (this.suffix.indexOf(format) == -1) {
|
||||
let text = `只能上传 ${this.suffix.join(",")} 格式图片！`;
|
||||
this.toast(text);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
let size = e.tempFiles[i].size;
|
||||
if (Number(this.size) * 1024 * 1024 < size) {
|
||||
let err = `单张图片大小不能超过：${this.size}MB`;
|
||||
this.toast(err);
|
||||
continue;
|
||||
}
|
||||
imageArr.push(path);
|
||||
this.urls.push(path);
|
||||
this.tempFiles.push(e.tempFiles[i]);
|
||||
this.status.push(this.immediate ? "uploading" : "preupload");
|
||||
}
|
||||
this.onComplete("choose");
|
||||
let start = this.urls.length - imageArr.length;
|
||||
if (this.immediate) {
|
||||
for (let j = 0; j < imageArr.length; j++) {
|
||||
let index = start + j;
|
||||
this.uploadImage(index, imageArr[j]).then((res) => {
|
||||
this._success(res);
|
||||
}).catch((res) => {
|
||||
this._error(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadImage(index, imgUrl, url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
common_vendor.index.uploadFile({
|
||||
url: this.url || url,
|
||||
name: this.name,
|
||||
header: this.header,
|
||||
formData: this.formData,
|
||||
filePath: imgUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
this.$set(this.status, index, "success");
|
||||
resolve({
|
||||
res,
|
||||
index
|
||||
});
|
||||
} else {
|
||||
this.$set(this.status, index, "error");
|
||||
reject({
|
||||
res,
|
||||
index
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
this.$set(this.status, index, "error");
|
||||
reject({
|
||||
res,
|
||||
index
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteImage(index) {
|
||||
let status = this.getStatus();
|
||||
if (status === "uploading") {
|
||||
this.toast("请等待上传结束再进行删除！");
|
||||
} else {
|
||||
if (this.confirmDel) {
|
||||
let _this = this;
|
||||
common_vendor.index.showModal({
|
||||
content: "确定将该图片删除吗？",
|
||||
showCancel: true,
|
||||
confirmText: "确定",
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
_this.urls.splice(index, 1);
|
||||
_this.tempFiles.splice(index, 1);
|
||||
_this.status.splice(index, 1);
|
||||
_this.onComplete("delete");
|
||||
_this.$emit("delete", {
|
||||
index
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.urls.splice(index, 1);
|
||||
this.tempFiles.splice(index, 1);
|
||||
this.status.splice(index, 1);
|
||||
this.onComplete("delete");
|
||||
this.$emit("delete", {
|
||||
index
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
previewImage(index) {
|
||||
if (this.status.length === 0)
|
||||
return;
|
||||
common_vendor.index.previewImage({
|
||||
current: this.urls[index],
|
||||
loop: true,
|
||||
urls: this.urls
|
||||
});
|
||||
this.$emit("preview", {
|
||||
index,
|
||||
urls: this.urls
|
||||
});
|
||||
},
|
||||
start() {
|
||||
if (!this.url) {
|
||||
this.toast("请传入服务器接口地址！");
|
||||
return;
|
||||
}
|
||||
let urls = [...this.urls];
|
||||
const len = urls.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (urls[i].startsWith("https")) {
|
||||
continue;
|
||||
} else {
|
||||
this.$set(this.status, i, "uploading");
|
||||
this.uploadImage(i, urls[i], this.url).then((res) => {
|
||||
this._success(res);
|
||||
}).catch((error) => {
|
||||
this._error(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
upload(callback, index) {
|
||||
if (index === void 0 || index === null) {
|
||||
let urls = [...this.urls];
|
||||
const len = urls.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (urls[i].startsWith("https")) {
|
||||
continue;
|
||||
} else {
|
||||
this.$set(this.status, i, "uploading");
|
||||
if (typeof callback === "function") {
|
||||
callback(this.tempFiles[i]).then((res) => {
|
||||
this.$set(this.status, i, "success");
|
||||
this.result(res, i);
|
||||
}).catch((err) => {
|
||||
this.$set(this.status, i, "error");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$set(this.status, index, "uploading");
|
||||
if (typeof callback === "function") {
|
||||
callback(this.tempFiles[index]).then((res) => {
|
||||
this.$set(this.status, index, "success");
|
||||
this.result(res, index);
|
||||
}).catch((err) => {
|
||||
this.$set(this.status, index, "error");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_fui_icon2 = common_vendor.resolveComponent("fui-icon");
|
||||
_easycom_fui_icon2();
|
||||
}
|
||||
const _easycom_fui_icon = () => "../fui-icon/fui-icon.js";
|
||||
if (!Math) {
|
||||
_easycom_fui_icon();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.f($data.urls, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: item,
|
||||
b: common_vendor.o(($event) => $options.previewImage(index), index),
|
||||
c: $data.status[index] !== "success" && $data.status[index] !== "preupload"
|
||||
}, $data.status[index] !== "success" && $data.status[index] !== "preupload" ? common_vendor.e({
|
||||
d: $data.status[index] === "error"
|
||||
}, $data.status[index] === "error" ? {
|
||||
e: "2d5d0fa0-0-" + i0,
|
||||
f: common_vendor.p({
|
||||
name: "warning-fill",
|
||||
color: "#fff",
|
||||
size: 48
|
||||
})
|
||||
} : {}, {
|
||||
g: $data.status[index] === "error"
|
||||
}, $data.status[index] === "error" ? {
|
||||
h: common_vendor.o(($event) => $options.reUpload(index), index)
|
||||
} : {}, {
|
||||
i: $data.status[index] === "uploading"
|
||||
}, $data.status[index] === "uploading" ? {} : {}, {
|
||||
j: $data.status[index] === "uploading"
|
||||
}, $data.status[index] === "uploading" ? {} : {}) : {}, $props.isDel ? {
|
||||
k: "2d5d0fa0-1-" + i0,
|
||||
l: common_vendor.p({
|
||||
name: "close",
|
||||
color: "#fff",
|
||||
size: 32
|
||||
}),
|
||||
m: $props.delColor,
|
||||
n: common_vendor.o(($event) => $options.deleteImage(index), index)
|
||||
} : {}, {
|
||||
o: index
|
||||
});
|
||||
}),
|
||||
b: $props.width + "rpx",
|
||||
c: $props.height + "rpx",
|
||||
d: $props.radius + "rpx",
|
||||
e: $props.isDel,
|
||||
f: $props.width + "rpx",
|
||||
g: $props.height + "rpx",
|
||||
h: $props.radius + "rpx",
|
||||
i: $options.showAdd
|
||||
}, $options.showAdd ? {
|
||||
j: common_vendor.p({
|
||||
name: "plus",
|
||||
size: $props.addSize,
|
||||
color: $props.addColor
|
||||
}),
|
||||
k: common_vendor.n($props.borderColor && $props.borderColor !== true ? "fui-upload__border" : "fui-upload__noborder"),
|
||||
l: $props.width + "rpx",
|
||||
m: $props.height + "rpx",
|
||||
n: $props.background,
|
||||
o: $props.radius + "rpx",
|
||||
p: $props.borderColor,
|
||||
q: $props.borderSytle,
|
||||
r: common_vendor.o((...args) => $options.chooseImage && $options.chooseImage(...args))
|
||||
} : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2d5d0fa0"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"fui-icon": "../fui-icon/fui-icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['fui-upload__wrap', 'data-v-2d5d0fa0', virtualHostClass]}}" style="{{virtualHostStyle}}"><view wx:for="{{a}}" wx:for-item="item" wx:key="o" class="fui-upload__item data-v-2d5d0fa0" style="{{'width:' + f + ';' + ('height:' + g) + ';' + ('border-radius:' + h)}}"><image class="fui-upload__img data-v-2d5d0fa0" style="{{'width:' + b + ';' + ('height:' + c) + ';' + ('border-radius:' + d)}}" src="{{item.a}}" mode="aspectFill" catchtap="{{item.b}}"></image><view wx:if="{{item.c}}" class="fui-upload__mask data-v-2d5d0fa0"><fui-icon wx:if="{{item.d}}" class="data-v-2d5d0fa0" virtualHostClass="data-v-2d5d0fa0" u-i="{{item.e}}" bind:__l="__l" u-p="{{item.f}}"></fui-icon><text wx:if="{{item.g}}" class="fui-reupload__btn data-v-2d5d0fa0" catchtap="{{item.h}}">重新上传</text><view wx:if="{{item.i}}" class="fui-upload__loading data-v-2d5d0fa0" ref="fui_reupload_ld"></view><text wx:if="{{item.j}}" class="fui-upload__text data-v-2d5d0fa0">请稍候...</text></view><view wx:if="{{e}}" class="fui-upload__del data-v-2d5d0fa0" style="{{'background:' + item.m}}" catchtap="{{item.n}}"><fui-icon wx:if="{{item.l}}" class="data-v-2d5d0fa0" virtualHostClass="data-v-2d5d0fa0" u-i="{{item.k}}" bind:__l="__l" u-p="{{item.l}}"></fui-icon></view></view><view wx:if="{{i}}" class="{{['fui-upload__item', 'data-v-2d5d0fa0', k]}}" style="{{'width:' + l + ';' + ('height:' + m) + ';' + ('background:' + n) + ';' + ('border-radius:' + o) + ';' + ('border-color:' + p) + ';' + ('border-style:' + q)}}" catchtap="{{r}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><fui-icon wx:if="{{j}}" class="data-v-2d5d0fa0" virtualHostClass="data-v-2d5d0fa0" u-i="2d5d0fa0-2" bind:__l="__l" u-p="{{j}}"></fui-icon></block></view></view>
|
||||
@@ -0,0 +1,115 @@
|
||||
|
||||
.fui-upload__wrap.data-v-2d5d0fa0 {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fui-upload__item.data-v-2d5d0fa0 {
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fui-upload__noborder.data-v-2d5d0fa0 {
|
||||
border-width: 0;
|
||||
}
|
||||
.fui-upload__border.data-v-2d5d0fa0 {
|
||||
border-width: 1px;
|
||||
}
|
||||
.fui-upload__del.data-v-2d5d0fa0 {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.fui-upload__mask.data-v-2d5d0fa0 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.fui-reupload__btn.data-v-2d5d0fa0 {
|
||||
width: 144rpx;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 4rpx 0;
|
||||
font-size: 24rpx;
|
||||
border: 1px solid #FFFFFF;
|
||||
color: #fff;
|
||||
border-radius: 32rpx;
|
||||
margin-top: 16rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fui-reupload__btn.data-v-2d5d0fa0:active {
|
||||
opacity: .5;
|
||||
}
|
||||
.fui-upload__loading.data-v-2d5d0fa0 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-left-color: #7F7F7F;
|
||||
border-right-color: #7F7F7F;
|
||||
border-bottom-color: #7F7F7F;
|
||||
|
||||
|
||||
|
||||
|
||||
border-radius: 50%;
|
||||
animation: fui-rotate-2d5d0fa0 0.7s linear infinite;
|
||||
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.fui-upload__text.data-v-2d5d0fa0 {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
margin-top: 16rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
@keyframes fui-rotate-2d5d0fa0 {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "fui-vtabs-content",
|
||||
inject: ["vtabs"],
|
||||
props: {
|
||||
tabIndex: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.vtabs && this.vtabs.linkage) {
|
||||
this.vtabs.children.push(this);
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.calcHeight((height) => {
|
||||
this.vtabs.getCalcHeight(height, Number(this.tabIndex));
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
},
|
||||
// TODO vue3
|
||||
beforeUnmount() {
|
||||
this.uninstall();
|
||||
},
|
||||
methods: {
|
||||
calcHeight(callback, index = 0) {
|
||||
common_vendor.index.createSelectorQuery().in(this).select(`#fui-vtabs-content__${this.tabIndex}`).fields({
|
||||
size: true
|
||||
}, (data) => {
|
||||
if (index >= 12)
|
||||
return;
|
||||
if (data && data.height) {
|
||||
callback && callback(data.height);
|
||||
} else {
|
||||
index++;
|
||||
setTimeout(() => {
|
||||
this.calcHeight(callback, index);
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
uninstall() {
|
||||
if (this.vtabs && this.vtabs.linkage) {
|
||||
this.vtabs.uninstall(Number(this.tabIndex), this);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: "fui-vtabs-content__" + $props.tabIndex
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6fc6d1f1"]]);
|
||||
wx.createComponent(Component);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view ref="fui_vtabs__el" id="{{a}}" class="{{['fui-vtabs-content__wrap', 'data-v-6fc6d1f1', virtualHostClass]}}" style="{{virtualHostStyle}}"><slot></slot></view>
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
|
||||
.fui-vtabs-content__wrap.data-v-6fc6d1f1 {
|
||||
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "fui-vtabs",
|
||||
emits: ["click", "change", "scrolltolower"],
|
||||
props: {
|
||||
vtabs: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: "name"
|
||||
},
|
||||
badgeKey: {
|
||||
type: String,
|
||||
default: "badge"
|
||||
},
|
||||
iconKey: {
|
||||
type: String,
|
||||
default: "icon"
|
||||
},
|
||||
activeIconKey: {
|
||||
type: String,
|
||||
default: "activeIcon"
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: "0"
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: "0"
|
||||
},
|
||||
tabWidth: {
|
||||
type: [Number, String],
|
||||
default: 220
|
||||
},
|
||||
tabHeight: {
|
||||
type: [Number, String],
|
||||
default: 110
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
activeSize: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#333333"
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
fontWeight: {
|
||||
type: [Number, String],
|
||||
default: "normal"
|
||||
},
|
||||
activeFontWeight: {
|
||||
type: [Number, String],
|
||||
default: "normal"
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: "#eeeeee"
|
||||
},
|
||||
activeBgColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
isBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
activeTab: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
badgeColor: {
|
||||
type: String,
|
||||
default: "#fff"
|
||||
},
|
||||
badgeBackground: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
isDot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否联动，为false时content只需展示对应索引数据
|
||||
linkage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
vtabs: this
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getActiveColor() {
|
||||
let color = this.activeColor;
|
||||
return color;
|
||||
},
|
||||
getBorderColor() {
|
||||
let color = this.borderColor;
|
||||
return color;
|
||||
},
|
||||
getBadgeBackground() {
|
||||
let color = this.badgeBackground;
|
||||
return color;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vals: [],
|
||||
scrollInto: "",
|
||||
current: 0,
|
||||
contentScrollTop: 0,
|
||||
// contentScrollInto: '',
|
||||
heightRecords: [],
|
||||
contentHeight: {},
|
||||
vtabsW: "320px",
|
||||
vtabsH: "600px",
|
||||
isTap: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
vtabs(vals) {
|
||||
this.initData(vals);
|
||||
},
|
||||
activeTab(newVal, oldVal) {
|
||||
if (this.linkage) {
|
||||
this.setDefaultTab(newVal);
|
||||
} else {
|
||||
this.switchTab(newVal, true);
|
||||
}
|
||||
},
|
||||
current(val) {
|
||||
this.scrollTabBar(val);
|
||||
},
|
||||
height(val) {
|
||||
this.setHeight(val);
|
||||
},
|
||||
width(val) {
|
||||
this.setWidth(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.children = [];
|
||||
this.setWidth(this.width);
|
||||
this.setHeight(this.height);
|
||||
this.calcHeightTimer = null;
|
||||
this.scrollTimer = null;
|
||||
this.initData(this.vtabs);
|
||||
},
|
||||
methods: {
|
||||
setWidth(width) {
|
||||
let res = common_vendor.index.getSystemInfoSync();
|
||||
if (width == 0 || width == "0px" || width == "0rpx") {
|
||||
this.vtabsW = res.windowWidth + "px";
|
||||
} else {
|
||||
this.vtabsW = width;
|
||||
}
|
||||
},
|
||||
setHeight(height) {
|
||||
let res = common_vendor.index.getSystemInfoSync();
|
||||
if (height == 0 || height == "0px" || height == "0rpx") {
|
||||
this.vtabsH = res.windowHeight + "px";
|
||||
} else {
|
||||
this.vtabsH = height;
|
||||
}
|
||||
},
|
||||
setDefaultTab(index, idx = 0) {
|
||||
let len = this.vtabs.length;
|
||||
if (this.heightRecords.length === len && len > 0) {
|
||||
this.switchTab(index, true);
|
||||
} else {
|
||||
if (idx >= 100)
|
||||
return;
|
||||
idx++;
|
||||
setTimeout(() => {
|
||||
this.setDefaultTab(index, idx);
|
||||
}, 250);
|
||||
}
|
||||
},
|
||||
initData(vals) {
|
||||
if (vals && vals.length > 0) {
|
||||
if (typeof vals[0] !== "object") {
|
||||
const key = this.nameKey || "name";
|
||||
vals = vals.map((item) => {
|
||||
return {
|
||||
[key]: item
|
||||
};
|
||||
});
|
||||
}
|
||||
this.vals = vals;
|
||||
this.$nextTick(() => {
|
||||
if (this.linkage) {
|
||||
setTimeout(() => {
|
||||
this.setDefaultTab(this.activeTab);
|
||||
}, 50);
|
||||
} else {
|
||||
this.switchTab(this.activeTab, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
scrollTabBar(index) {
|
||||
let len = this.vtabs.length;
|
||||
if (len === 0)
|
||||
return;
|
||||
index = index < 6 ? 0 : index - 5;
|
||||
if (index >= len)
|
||||
index = len - 1;
|
||||
this.scrollInto = `fui_vtabs_bar_${index}`;
|
||||
},
|
||||
switchTab(index, init) {
|
||||
index = Number(index);
|
||||
const item = {
|
||||
...this.vals[index]
|
||||
};
|
||||
if (item.disable)
|
||||
return;
|
||||
if (this.linkage) {
|
||||
this.contentScrollTop = this.heightRecords[this.current - 1] || 0;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.current = index;
|
||||
this.contentScrollTop = this.heightRecords[index - 1] || 0;
|
||||
}, 50);
|
||||
});
|
||||
} else {
|
||||
this.current = index;
|
||||
}
|
||||
if (!init) {
|
||||
this.isTap = true;
|
||||
this.$emit("click", {
|
||||
index,
|
||||
...item
|
||||
});
|
||||
}
|
||||
},
|
||||
calcHeight() {
|
||||
let len = this.vtabs.length;
|
||||
let _heightRecords = [];
|
||||
let temp = 0;
|
||||
for (let i = 0; i < len; i++) {
|
||||
_heightRecords[i] = temp + (this.contentHeight[i] || 0);
|
||||
temp = _heightRecords[i];
|
||||
}
|
||||
this.heightRecords = _heightRecords;
|
||||
},
|
||||
contentScroll(e) {
|
||||
if (!this.linkage)
|
||||
return;
|
||||
if (this.isTap) {
|
||||
if (this.scrollTimer) {
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
this.scrollTimer = setTimeout(() => {
|
||||
this.isTap = false;
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
let _heightRecords = this.heightRecords;
|
||||
if (_heightRecords.length === 0)
|
||||
return;
|
||||
let len = this.vtabs.length;
|
||||
let scrollTop = e.detail.scrollTop + (len - 1) * 0.19;
|
||||
let index = 0;
|
||||
if (scrollTop >= _heightRecords[0]) {
|
||||
for (let i = 1; i < len; i++) {
|
||||
if (scrollTop >= _heightRecords[i - 1] && scrollTop < _heightRecords[i]) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (index != this.current) {
|
||||
const item = {
|
||||
...this.vals[index]
|
||||
};
|
||||
this.$emit("change", {
|
||||
index,
|
||||
...item
|
||||
});
|
||||
this.current = index;
|
||||
}
|
||||
},
|
||||
getCalcHeight(height, index) {
|
||||
this.contentHeight[index] = height;
|
||||
if (this.calcHeightTimer) {
|
||||
clearTimeout(this.calcHeightTimer);
|
||||
}
|
||||
this.calcHeightTimer = setTimeout(() => {
|
||||
this.calcHeight();
|
||||
}, 150);
|
||||
},
|
||||
uninstall(tabIndex, target) {
|
||||
this.children.forEach((item, index) => {
|
||||
if (item === target) {
|
||||
this.children.splice(index, 1);
|
||||
}
|
||||
});
|
||||
delete this.contentHeight[tabIndex];
|
||||
this.calcHeight();
|
||||
},
|
||||
//重置列表高度信息
|
||||
reset() {
|
||||
if (this.linkage) {
|
||||
this.children.forEach((item, index) => {
|
||||
item.calcHeight((height) => {
|
||||
this.getCalcHeight(height, Number(item.tabIndex));
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
onScrolltolower(e) {
|
||||
if (!this.linkage) {
|
||||
this.$emit("scrolltolower", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.f($data.vals, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: item[$props.iconKey]
|
||||
}, item[$props.iconKey] ? {
|
||||
b: (item.iconWidth || 40) + "rpx",
|
||||
c: (item.iconHeight || 40) + "rpx",
|
||||
d: $data.current === index && item[$props.activeIconKey] ? item[$props.activeIconKey] : item[$props.iconKey]
|
||||
} : {}, {
|
||||
e: common_vendor.t(item[$props.nameKey]),
|
||||
f: item[$props.badgeKey]
|
||||
}, item[$props.badgeKey] ? {
|
||||
g: common_vendor.t($props.isDot ? "" : item[$props.badgeKey]),
|
||||
h: !$options.getBadgeBackground ? 1 : "",
|
||||
i: $props.isDot ? 1 : "",
|
||||
j: !$props.isDot ? 1 : "",
|
||||
k: $props.badgeColor,
|
||||
l: $options.getBadgeBackground
|
||||
} : {}, {
|
||||
m: !$options.getActiveColor && $data.current === index ? 1 : "",
|
||||
n: ($data.current === index ? $props.activeSize : $props.size) + "rpx",
|
||||
o: $data.current === index ? $options.getActiveColor : $props.color,
|
||||
p: $data.current === index ? $props.activeFontWeight : $props.fontWeight,
|
||||
q: !item.disable ? 1 : "",
|
||||
r: item.disable ? 1 : "",
|
||||
s: !$options.getBorderColor && $data.current === index && $props.isBorder ? 1 : "",
|
||||
t: "fui_vtabs_bar_" + index,
|
||||
v: index,
|
||||
w: $data.current === index ? $props.activeBgColor : $props.background,
|
||||
x: $data.current === index && $props.isBorder ? $options.getBorderColor : "transparent",
|
||||
y: common_vendor.o(($event) => $options.switchTab(index), index)
|
||||
});
|
||||
}),
|
||||
b: $props.isBorder ? 1 : "",
|
||||
c: $props.tabWidth + "rpx",
|
||||
d: $props.tabHeight + "rpx",
|
||||
e: $props.tabWidth + "rpx",
|
||||
f: $props.tabWidth + "rpx",
|
||||
g: $data.vtabsH,
|
||||
h: $data.scrollInto,
|
||||
i: $data.isTap,
|
||||
j: $props.tabWidth + "rpx",
|
||||
k: $props.background,
|
||||
l: $data.vtabsH,
|
||||
m: $data.contentScrollTop,
|
||||
n: $props.animation,
|
||||
o: common_vendor.o((...args) => $options.contentScroll && $options.contentScroll(...args)),
|
||||
p: common_vendor.o((...args) => $options.onScrolltolower && $options.onScrolltolower(...args)),
|
||||
q: $data.vtabsW,
|
||||
r: $data.vtabsH
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d30634da"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view style="{{'width:' + q + ';' + ('height:' + r) + ';' + virtualHostStyle}}" class="{{['fui-vtabs__wrap', 'data-v-d30634da', virtualHostClass]}}"><view class="data-v-d30634da" style="{{'width:' + j + ';' + ('background:' + k)}}"><scroll-view show-scrollbar="{{false}}" class="fui-vtabs__scroll-bar data-v-d30634da" style="{{'width:' + f + ';' + ('height:' + g)}}" scroll-y scroll-into-view="{{h}}" scroll-with-animation="{{i}}"><view class="fui-vtabs__item__wrap data-v-d30634da" style="{{'width:' + e}}"><view wx:for="{{a}}" wx:for-item="item" wx:key="v" class="{{['fui-vtabs__item', 'data-v-d30634da', b && 'fui-vtabs__left-border', item.q && 'fui-vtabs__item-hover', item.r && 'fui-vtabs__item-disable', item.s && 'fui-vtabs__border-color']}}" id="{{item.t}}" style="{{'background:' + item.w + ';' + ('border-left-color:' + item.x) + ';' + ('width:' + c) + ';' + ('height:' + d)}}" bindtap="{{item.y}}"><image wx:if="{{item.a}}" class="fui-vtabs__icon data-v-d30634da" style="{{'width:' + item.b + ';' + ('height:' + item.c)}}" src="{{item.d}}"></image><view class="{{['fui-vtabs__text', 'data-v-d30634da', item.m && 'fui-vtabs__selected-color']}}" style="{{'font-size:' + item.n + ';' + ('color:' + item.o) + ';' + ('font-weight:' + item.p)}}">{{item.e}}<text wx:if="{{item.f}}" class="{{['data-v-d30634da', item.h && 'fui-vtabs__badge-color', item.i && 'fui-vtabs__badge-dot', item.j && 'fui-vtabs__badge']}}" style="{{'color:' + item.k + ';' + ('background:' + item.l)}}">{{item.g}}</text></view></view></view></scroll-view></view><scroll-view show-scrollbar="{{false}}" scroll-y="{{true}}" style="{{'height:' + l}}" class="fui-vtabs__content-wrap data-v-d30634da" scroll-top="{{m}}" scroll-with-animation="{{n}}" bindscroll="{{o}}" bindscrolltolower="{{p}}"><view class="fui-vtabs__content data-v-d30634da"><slot></slot></view></scroll-view></view>
|
||||
@@ -0,0 +1,116 @@
|
||||
|
||||
.fui-vtabs__wrap.data-v-d30634da {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
.fui-vtabs__scroll-bar.data-v-d30634da {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.fui-vtabs__item__wrap.data-v-d30634da {
|
||||
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fui-vtabs__item.data-v-d30634da {
|
||||
padding: 0 20rpx;
|
||||
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.fui-vtabs__icon.data-v-d30634da {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.fui-vtabs__item-hover.data-v-d30634da {
|
||||
}
|
||||
.fui-vtabs__item-disable.data-v-d30634da {
|
||||
opacity: .5;
|
||||
}
|
||||
.fui-vtabs__left-border.data-v-d30634da {
|
||||
border-left-width: 8rpx;
|
||||
border-left-style: solid;
|
||||
}
|
||||
.fui-vtabs__text.data-v-d30634da {
|
||||
|
||||
display: block;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.fui-vtabs__badge.data-v-d30634da {
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 100px;
|
||||
|
||||
min-width: 36rpx !important;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: -32rpx;
|
||||
top: -18rpx;
|
||||
transform: scale(0.9);
|
||||
z-index: 10;
|
||||
}
|
||||
.fui-vtabs__badge-dot.data-v-d30634da {
|
||||
height: 8px !important;
|
||||
width: 8px !important;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
display: inline-block;
|
||||
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -3px;
|
||||
z-index: 10;
|
||||
}
|
||||
.fui-vtabs__content-wrap.data-v-d30634da {
|
||||
flex: 1;
|
||||
}
|
||||
.fui-vtabs__content.data-v-d30634da {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.fui-vtabs__selected-color.data-v-d30634da {
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
.fui-vtabs__border-color.data-v-d30634da {
|
||||
border-left-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
.fui-vtabs__badge-color.data-v-d30634da {
|
||||
background: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user