update
This commit is contained in:
@@ -8,9 +8,9 @@
|
||||
</div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div v-for="slide in type_nav" :key="slide.id" class="1231">
|
||||
<div v-for="slide in type_nav" :key="slide.id" class="1231">
|
||||
<div v-if="type_id === slide.id" class="123">
|
||||
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
|
||||
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic"></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,23 +22,22 @@
|
||||
<script>
|
||||
import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
|
||||
export default {
|
||||
name: 'thanks-giving',
|
||||
name: "thanks-giving",
|
||||
props: {
|
||||
templeId: [String, Number],
|
||||
goodsType: {
|
||||
type: String,
|
||||
},
|
||||
goodsId: {
|
||||
type: [String, Number]
|
||||
type: [String, Number],
|
||||
},
|
||||
typeId: {
|
||||
type: [String, Number]
|
||||
type: [String, Number],
|
||||
},
|
||||
agentId: [String, Number],
|
||||
|
||||
},
|
||||
|
||||
data(){
|
||||
|
||||
data() {
|
||||
return {
|
||||
type_id: this.typeId || 1,
|
||||
type_nav: [
|
||||
@@ -47,38 +46,36 @@ export default {
|
||||
{ id: 3, title: "总榜", list: [] },
|
||||
],
|
||||
page: 1,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getOrderCompare();
|
||||
},
|
||||
methods: {
|
||||
onSetType(type){
|
||||
onSetType(type) {
|
||||
this.type_id = type.id;
|
||||
this.getOrderCompare();
|
||||
},
|
||||
async getOrderCompare(){
|
||||
async getOrderCompare() {
|
||||
let res;
|
||||
if(this.templeId){
|
||||
res = await getOrderCompare(this.templeId || '1', this.page, this.type_id, this.goodsId, this.goodsType)
|
||||
if (this.templeId) {
|
||||
res = await getOrderCompare(this.templeId || "1", this.page, this.type_id, this.goodsId, this.goodsType);
|
||||
} else {
|
||||
res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType)
|
||||
res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType);
|
||||
}
|
||||
const current = this.type_nav.find(item => item.id === this.type_id);
|
||||
console.log('current', current)
|
||||
current.list = res.list
|
||||
console.log(this.type_nav)
|
||||
const current = this.type_nav.find((item) => item.id === this.type_id);
|
||||
current.list = res.list;
|
||||
},
|
||||
onThankMore(){
|
||||
onThankMore() {
|
||||
this.$router.push({
|
||||
name: 'merit-box',
|
||||
name: "merit-box",
|
||||
query: {
|
||||
type_id: this.type_id,
|
||||
temple_id: this.templeId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
temple_id: this.templeId,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -109,18 +106,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
|
||||
.swiper-container{
|
||||
.body {
|
||||
.swiper-container {
|
||||
height: 5.33rem;
|
||||
}
|
||||
.thanks-more{
|
||||
.thanks-more {
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,87 +1,83 @@
|
||||
<template>
|
||||
<div class="content-expand">
|
||||
<div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 100) + 'px'}">
|
||||
<div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{ height: (show ? contentHeight : 100) + 'px' }">
|
||||
<div ref="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<span class="expand" v-if="contentOverflow" @click="toggle">
|
||||
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
|
||||
<span class="label">{{show ? '收起全文': '展开全文'}}</span>
|
||||
<span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'content-expand',
|
||||
data(){
|
||||
name: "content-expand",
|
||||
data() {
|
||||
return {
|
||||
wrapperHeight: 0,
|
||||
contentHeight: 0,
|
||||
show: false,
|
||||
wrapperContainerHeight: 0,
|
||||
defaultContentHeight: 0
|
||||
}
|
||||
defaultContentHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contentOverflow: {
|
||||
get(){
|
||||
get() {
|
||||
return this.contentHeight > this.wrapperHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
updated() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight
|
||||
this.contentHeight = this.$refs.content.offsetHeight
|
||||
this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
|
||||
console.log(this.defaultContentHeight)
|
||||
updated() {},
|
||||
mounted() {
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
||||
this.contentHeight = this.$refs.content.offsetHeight;
|
||||
this.defaultContentHeight = this.$refs.content.querySelector(".goods-content").offsetHeight / (3 / 2);
|
||||
this.$nextTick(() => {
|
||||
this.wrapperContainerHeight = this.wrapperHeight;
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
toggle(){
|
||||
this.show = !this.show
|
||||
}
|
||||
}
|
||||
}
|
||||
toggle() {
|
||||
this.show = !this.show;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content-expand{
|
||||
.content{
|
||||
.content-expand {
|
||||
.content {
|
||||
line-height: 1.4;
|
||||
font-size: .35rem;
|
||||
font-size: 0.35rem;
|
||||
color: #888;
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
margin-top: .3rem;
|
||||
margin-top: 0.3rem;
|
||||
overflow: hidden;
|
||||
height: 4em;
|
||||
transition: height .3s linear;
|
||||
transition: height 0.3s linear;
|
||||
}
|
||||
.expand{
|
||||
.expand {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1.07rem;
|
||||
color: #888;
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.iconfont-expand{
|
||||
.iconfont-expand {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
.label{
|
||||
padding-left: .1rem;
|
||||
font-size: .35rem;
|
||||
.label {
|
||||
padding-left: 0.1rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,102 +1,97 @@
|
||||
<template>
|
||||
<div class="detail-content-expand">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
|
||||
<div ref="content" class="ref-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<span class="expand" v-if="contentOverflow" @click="toggle">
|
||||
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
|
||||
<span class="label">{{show ? '收起全文': '展开全文'}}</span>
|
||||
<span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'detail-content-expand',
|
||||
name: "detail-content-expand",
|
||||
props: {
|
||||
selector: {
|
||||
type: String,
|
||||
default: '.goods-content'
|
||||
}
|
||||
default: ".goods-content",
|
||||
},
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
wrapperHeight: 0,
|
||||
contentHeight: 0,
|
||||
show: false,
|
||||
wrapperContainerHeight: 0,
|
||||
defaultContentHeight: 0
|
||||
}
|
||||
defaultContentHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contentOverflow: {
|
||||
get(){
|
||||
get() {
|
||||
return this.contentHeight > this.wrapperHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$slots'(val){
|
||||
console.log('slots val',val)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight
|
||||
|
||||
mounted() {
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
||||
this.$nextTick(() => {
|
||||
this.contentHeight = this.$refs.content.offsetHeight
|
||||
this.contentHeight = this.$refs.content.offsetHeight;
|
||||
this.wrapperContainerHeight = this.wrapperHeight;
|
||||
this.refresh();
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
toggle(){
|
||||
this.show = !this.show
|
||||
toggle() {
|
||||
this.show = !this.show;
|
||||
},
|
||||
refresh(){
|
||||
refresh() {
|
||||
const selector = this.$refs.content.querySelector(this.selector);
|
||||
if(!selector) {
|
||||
if (!selector) {
|
||||
this.defaultContentHeight = 100;
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.defaultContentHeight = selector.offsetHeight / (4/1)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.defaultContentHeight = selector.offsetHeight / (4 / 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail-content-expand{
|
||||
.content{
|
||||
.detail-content-expand {
|
||||
.content {
|
||||
line-height: 1.4;
|
||||
font-size: .35rem;
|
||||
font-size: 0.35rem;
|
||||
color: #888;
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
margin-top: .3rem;
|
||||
margin-top: 0.3rem;
|
||||
overflow: hidden;
|
||||
height: 4em;
|
||||
transition: height .3s linear;
|
||||
transition: height 0.3s linear;
|
||||
}
|
||||
.expand{
|
||||
.expand {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1.07rem;
|
||||
color: #888;
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.iconfont-expand{
|
||||
.iconfont-expand {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
.label{
|
||||
padding-left: .1rem;
|
||||
font-size: .35rem;
|
||||
.label {
|
||||
padding-left: 0.1rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="scroll-wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
|
||||
<div class="scroll-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
|
||||
<div class="scroll-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -10,174 +10,172 @@
|
||||
import BScroll from "better-scroll";
|
||||
|
||||
export default {
|
||||
name: "scroll-view",
|
||||
data(){
|
||||
name: "scroll-view",
|
||||
data() {
|
||||
return {
|
||||
wrapperHeight: 0
|
||||
}
|
||||
wrapperHeight: 0,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* 1 滚动的时候会派发scroll事件，会截流。
|
||||
* 2 滚动的时候实时派发scroll事件，不会截流。
|
||||
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
|
||||
*/
|
||||
probeType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* 点击列表是否派发click事件
|
||||
*/
|
||||
click: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否开启横向滚动
|
||||
*/
|
||||
scrollX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动事件
|
||||
*/
|
||||
listenScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 列表的数据
|
||||
*/
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动到底部的事件，用于上拉加载
|
||||
*/
|
||||
pullup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发顶部下拉的事件，用于下拉刷新
|
||||
*/
|
||||
pulldown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发列表滚动开始的事件
|
||||
*/
|
||||
beforeScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 当数据更新后，刷新scroll的延时。
|
||||
*/
|
||||
refreshDelay: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* 1 滚动的时候会派发scroll事件，会截流。
|
||||
* 2 滚动的时候实时派发scroll事件，不会截流。
|
||||
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
|
||||
*/
|
||||
probeType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* 点击列表是否派发click事件
|
||||
*/
|
||||
click: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否开启横向滚动
|
||||
*/
|
||||
scrollX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动事件
|
||||
*/
|
||||
listenScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 列表的数据
|
||||
*/
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动到底部的事件，用于上拉加载
|
||||
*/
|
||||
pullup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发顶部下拉的事件，用于下拉刷新
|
||||
*/
|
||||
pulldown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发列表滚动开始的事件
|
||||
*/
|
||||
beforeScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 当数据更新后，刷新scroll的延时。
|
||||
*/
|
||||
refreshDelay: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 保证在DOM渲染完毕后初始化better-scroll
|
||||
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
|
||||
setTimeout(() => {
|
||||
this._initScroll();
|
||||
}, 20);
|
||||
},
|
||||
|
||||
methods: {
|
||||
_initScroll() {
|
||||
if (!this.$refs.wrapper) {
|
||||
return;
|
||||
}
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 保证在DOM渲染完毕后初始化better-scroll
|
||||
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight;
|
||||
setTimeout(() => {
|
||||
this._initScroll();
|
||||
}, 20);
|
||||
},
|
||||
|
||||
// better-scroll的初始化
|
||||
this.scroll = new BScroll(this.$refs.wrapper, {
|
||||
probeType: this.probeType,
|
||||
click: this.click,
|
||||
scrollX: this.scrollX,
|
||||
});
|
||||
methods: {
|
||||
_initScroll() {
|
||||
if (!this.$refs.wrapper) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 是否派发滚动事件
|
||||
if (this.listenScroll) {
|
||||
this.scroll.on("scroll", (pos) => {
|
||||
this.$emit("scroll", pos);
|
||||
});
|
||||
}
|
||||
// better-scroll的初始化
|
||||
this.scroll = new BScroll(this.$refs.wrapper, {
|
||||
probeType: this.probeType,
|
||||
click: this.click,
|
||||
scrollX: this.scrollX,
|
||||
});
|
||||
|
||||
// 是否派发滚动到底部事件，用于上拉加载
|
||||
if (this.pullup) {
|
||||
this.scroll.on("scrollEnd", () => {
|
||||
// 滚动到底部
|
||||
console.log(this.scroll.y, this.scroll.maxScrollY + 50)
|
||||
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
|
||||
this.$emit("pullup");
|
||||
}
|
||||
});
|
||||
}
|
||||
// 是否派发滚动事件
|
||||
if (this.listenScroll) {
|
||||
this.scroll.on("scroll", (pos) => {
|
||||
this.$emit("scroll", pos);
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发顶部下拉事件，用于下拉刷新
|
||||
if (this.pulldown) {
|
||||
this.scroll.on("touchEnd", (pos) => {
|
||||
// 下拉动作
|
||||
if (pos.y > 50) {
|
||||
this.$emit("pulldown");
|
||||
}
|
||||
});
|
||||
}
|
||||
// 是否派发滚动到底部事件，用于上拉加载
|
||||
if (this.pullup) {
|
||||
this.scroll.on("scrollEnd", () => {
|
||||
// 滚动到底部
|
||||
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
|
||||
this.$emit("pullup");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发列表滚动开始的事件
|
||||
if (this.beforeScroll) {
|
||||
this.scroll.on("beforeScrollStart", () => {
|
||||
this.$emit("beforeScroll");
|
||||
});
|
||||
}
|
||||
},
|
||||
disable() {
|
||||
// 代理better-scroll的disable方法
|
||||
this.scroll && this.scroll.disable();
|
||||
},
|
||||
enable() {
|
||||
// 代理better-scroll的enable方法
|
||||
this.scroll && this.scroll.enable();
|
||||
},
|
||||
refresh() {
|
||||
// 代理better-scroll的refresh方法
|
||||
this.scroll && this.scroll.refresh();
|
||||
},
|
||||
scrollTo() {
|
||||
// 代理better-scroll的scrollTo方法
|
||||
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
|
||||
},
|
||||
scrollToElement() {
|
||||
// 代理better-scroll的scrollToElement方法
|
||||
this.scroll &&
|
||||
this.scroll.scrollToElement.apply(this.scroll, arguments);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
|
||||
data() {
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, this.refreshDelay);
|
||||
},
|
||||
height: {
|
||||
handler(val){
|
||||
// 是否派发顶部下拉事件，用于下拉刷新
|
||||
if (this.pulldown) {
|
||||
this.scroll.on("touchEnd", (pos) => {
|
||||
// 下拉动作
|
||||
if (pos.y > 50) {
|
||||
this.$emit("pulldown");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发列表滚动开始的事件
|
||||
if (this.beforeScroll) {
|
||||
this.scroll.on("beforeScrollStart", () => {
|
||||
this.$emit("beforeScroll");
|
||||
});
|
||||
}
|
||||
},
|
||||
disable() {
|
||||
// 代理better-scroll的disable方法
|
||||
this.scroll && this.scroll.disable();
|
||||
},
|
||||
enable() {
|
||||
// 代理better-scroll的enable方法
|
||||
this.scroll && this.scroll.enable();
|
||||
},
|
||||
refresh() {
|
||||
// 代理better-scroll的refresh方法
|
||||
this.scroll && this.scroll.refresh();
|
||||
},
|
||||
scrollTo() {
|
||||
// 代理better-scroll的scrollTo方法
|
||||
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
|
||||
},
|
||||
scrollToElement() {
|
||||
// 代理better-scroll的scrollToElement方法
|
||||
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
|
||||
data() {
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, this.refreshDelay);
|
||||
},
|
||||
height: {
|
||||
handler(val) {
|
||||
this.wrapperHeight = val;
|
||||
this.scroll && this.scroll.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,65 +1,60 @@
|
||||
<template>
|
||||
<van-uploader class="custom-uploader" v-bind="$attrs" :max-count="maxCount" v-model="fileList" :after-read="onBeforeUpload"></van-uploader>
|
||||
<!-- <van-uploader class="custom-uploader" v-bind="$attrs" :max-size="isOverSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader> -->
|
||||
<van-uploader class="custom-uploader" v-bind="$attrs" :max-count="maxCount" v-model="fileList" :after-read="onBeforeUpload"></van-uploader>
|
||||
<!-- <van-uploader class="custom-uploader" v-bind="$attrs" :max-size="isOverSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from '@/api'
|
||||
import { uploadFile } from "@/api";
|
||||
export default {
|
||||
name: 'uploader',
|
||||
name: "uploader",
|
||||
props: {
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: Infinity
|
||||
default: Infinity,
|
||||
},
|
||||
maxSize: Number,
|
||||
value: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
fileList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
fileList(val){
|
||||
this.$emit('input', val)
|
||||
}
|
||||
fileList(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isOverSize(){
|
||||
console.log(this.maxCount * this.maxSize * 1024)
|
||||
return 500 * 1024
|
||||
isOverSize() {
|
||||
return 500 * 1024;
|
||||
},
|
||||
onOversize(){
|
||||
console.log(this.$props)
|
||||
this.$toast(`文件大小不能超过${this.isOverSize()}kb`)
|
||||
onOversize() {
|
||||
this.$toast(`文件大小不能超过${this.isOverSize()}kb`);
|
||||
},
|
||||
async onBeforeUpload(obj){
|
||||
console.log(obj.file.size)
|
||||
async onBeforeUpload(obj) {
|
||||
const type = Object.prototype.toString;
|
||||
if(type.call(obj) === '[object Object]'){
|
||||
if (type.call(obj) === "[object Object]") {
|
||||
const formData = new FormData();
|
||||
formData.append('photo', obj.file)
|
||||
const res = await uploadFile(formData)
|
||||
obj.url = res.url
|
||||
formData.append("photo", obj.file);
|
||||
const res = await uploadFile(formData);
|
||||
obj.url = res.url;
|
||||
}
|
||||
|
||||
if(type.call(obj) === '[object Array]'){
|
||||
for(let file of obj){
|
||||
if (type.call(obj) === "[object Array]") {
|
||||
for (let file of obj) {
|
||||
const formData = new FormData();
|
||||
formData.append('photo', file.file)
|
||||
const res = await uploadFile(formData)
|
||||
file.url = res.url
|
||||
formData.append("photo", file.file);
|
||||
const res = await uploadFile(formData);
|
||||
file.url = res.url;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user