删除部分图片，增加超级会员页面功能
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="isShow">
|
||||
<view class="zhanwei" :class="[direction == 'column' ? 'zhanwei1' : '']"></view>
|
||||
|
||||
<view
|
||||
@@ -21,9 +21,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
const emit = defineEmits(["save", "cancel"]);
|
||||
import { isMainShop } from "@/store/account.js";
|
||||
|
||||
const props = defineProps({
|
||||
isOpenPermission: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//方向 row横向布局 column 纵向布局
|
||||
direction: {
|
||||
type: String,
|
||||
@@ -31,6 +37,14 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const isShow = computed(() => {
|
||||
if (props.isOpenPermission) {
|
||||
return isMainShop();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
function save() {
|
||||
emit("save");
|
||||
}
|
||||
|
||||
597
components/my-components/my-date-pickerview copy.vue
Normal file
597
components/my-components/my-date-pickerview copy.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<view class="mask" v-if="show" @tap="close">
|
||||
<view class="box" @tap.stop="nullFunction">
|
||||
<view
|
||||
class="u-flex u-relative u-row-center u-p-30 top"
|
||||
v-if="props.isArea"
|
||||
>
|
||||
<view class="font-bold u-font-32">{{ props.title }}</view>
|
||||
<view class="close" @tap="close">
|
||||
<uni-icons type="closeempty" size="24"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-p-30 u-flex u-flex-wrap gap-20 fastTime"
|
||||
v-if="props.isArea"
|
||||
>
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in fastTime"
|
||||
:key="index"
|
||||
@tap="changeTime(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<picker-view
|
||||
:immediate-change="true"
|
||||
@pickend="pickend"
|
||||
:value="value"
|
||||
@change="bindChange"
|
||||
class="picker-view"
|
||||
>
|
||||
<template v-if="props.mode === 'all' || props.mode === 'date'">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in years" :key="index"
|
||||
>{{ item }}年</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in months" :key="index"
|
||||
>{{ item }}月</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in days" :key="index"
|
||||
>{{ item }}日</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
<template v-if="props.mode === 'all' || props.mode === 'time'">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in hours" :key="index"
|
||||
>{{ item }}时</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in minutes" :key="index"
|
||||
>{{ item }}分</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in seconds" :key="index"
|
||||
>{{ item }}秒</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
</picker-view>
|
||||
<template v-if="props.isArea">
|
||||
<view class="u-text-center color-999">至</view>
|
||||
<picker-view
|
||||
:immediate-change="true"
|
||||
:value="value1"
|
||||
@pickend="pickend1"
|
||||
@change="bindChange1"
|
||||
class="picker-view"
|
||||
>
|
||||
<template v-if="props.mode === 'all' || props.mode === 'date'">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in years" :key="index"
|
||||
>{{ item }}年</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in months" :key="index"
|
||||
>{{ item }}月</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in days1" :key="index"
|
||||
>{{ item }}日</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
<template v-if="props.mode === 'all' || props.mode === 'time'">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in hours" :key="index"
|
||||
>{{ item }}时</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in minutes" :key="index"
|
||||
>{{ item }}分</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in seconds" :key="index"
|
||||
>{{ item }}秒</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
</picker-view>
|
||||
</template>
|
||||
|
||||
<!-- 占位 -->
|
||||
<view style="height: 80px"></view>
|
||||
<template v-if="props.isArea">
|
||||
<view class="fixed_b">
|
||||
<my-button shape="circle" @tap="confirm">确定</my-button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="fixed_b u-flex u-row-center">
|
||||
<view class="u-m-r-16">
|
||||
<my-button type="cancel" @tap="close" width="240">
|
||||
<view class="color-999">取消</view>
|
||||
</my-button>
|
||||
</view>
|
||||
<view class="u-m-l-16">
|
||||
<button @tap="confirm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, nextTick, ref } from "vue";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
const $time = {
|
||||
// 获取今天的开始和结束时间
|
||||
getTodayTimestamps() {
|
||||
const start = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
|
||||
const end = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss");
|
||||
return { start, end, label: "今日" };
|
||||
},
|
||||
|
||||
// 获取昨天的开始和结束时间
|
||||
getYesterdayTimestamps() {
|
||||
const start = dayjs()
|
||||
.subtract(1, "day")
|
||||
.startOf("day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
const end = dayjs()
|
||||
.subtract(1, "day")
|
||||
.endOf("day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
return { start, end, label: "昨日" };
|
||||
},
|
||||
|
||||
// 获取本周的开始和结束时间
|
||||
getThisWeekTimestamps() {
|
||||
const start = dayjs().startOf("week").format("YYYY-MM-DD HH:mm:ss");
|
||||
const end = dayjs().endOf("week").format("YYYY-MM-DD HH:mm:ss");
|
||||
return { start, end, label: "本周" };
|
||||
},
|
||||
|
||||
// 获取本月的开始和结束时间
|
||||
getThisMonthTimestamps() {
|
||||
const start = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
|
||||
const end = dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss");
|
||||
return { start, end, label: "本月" };
|
||||
},
|
||||
|
||||
// 获取上个月的开始和结束时间
|
||||
getThisLastMonthTimestamps() {
|
||||
const start = dayjs()
|
||||
.subtract(1, "month")
|
||||
.startOf("month")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
const end = dayjs()
|
||||
.subtract(1, "month")
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
return { start, end, label: "上月" };
|
||||
},
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
selTime: {
|
||||
type: [String, Number],
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
defaultTime: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "筛选日期时间",
|
||||
},
|
||||
isArea: {
|
||||
//是否选中范围时间
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mode: {
|
||||
//all date time
|
||||
type: String,
|
||||
default: "time",
|
||||
},
|
||||
yearsLen: {
|
||||
type: Number,
|
||||
default: 30,
|
||||
},
|
||||
});
|
||||
const $nowDate = new Date();
|
||||
const nowDate = {
|
||||
year: $nowDate.getFullYear(),
|
||||
month: $nowDate.getMonth() + 1,
|
||||
day: $nowDate.getDate(),
|
||||
hours: $nowDate.getHours(),
|
||||
minutes: $nowDate.getMinutes(),
|
||||
seconds: $nowDate.getSeconds(),
|
||||
};
|
||||
const yearsLen = props.yearsLen;
|
||||
|
||||
function returnYears() {
|
||||
if (props.isArea) {
|
||||
return new Array(yearsLen)
|
||||
.fill(1)
|
||||
.map((v, index) => {
|
||||
return nowDate.year - index;
|
||||
})
|
||||
.reverse();
|
||||
} else {
|
||||
return new Array(yearsLen).fill(1).map((v, index) => {
|
||||
return nowDate.year - Math.floor(yearsLen / 2) + index;
|
||||
});
|
||||
}
|
||||
}
|
||||
const years = returnYears();
|
||||
|
||||
const months = new Array(12).fill(1).map((v, index) => {
|
||||
return index + 1;
|
||||
});
|
||||
const days = ref(
|
||||
new Array(getMonthArea($nowDate, "end").getDate()).fill(1).map((v, index) => {
|
||||
return index + 1;
|
||||
})
|
||||
);
|
||||
const days1 = ref(
|
||||
new Array(getMonthArea($nowDate, "end").getDate()).fill(1).map((v, index) => {
|
||||
return index + 1;
|
||||
})
|
||||
);
|
||||
const hours = new Array(24).fill(1).map((v, index) => {
|
||||
return index;
|
||||
});
|
||||
const minutes = new Array(60).fill(1).map((v, index) => {
|
||||
return index;
|
||||
});
|
||||
const seconds = new Array(60).fill(1).map((v, index) => {
|
||||
return index;
|
||||
});
|
||||
// const fastTime = reactive([{
|
||||
// title: '今日',
|
||||
// key: 'now'
|
||||
// },
|
||||
// {
|
||||
// title: '昨日',
|
||||
// key: 'prve'
|
||||
// },
|
||||
// {
|
||||
// title: '本月',
|
||||
// key: 'nowMonth'
|
||||
// },
|
||||
// {
|
||||
// title: '上月',
|
||||
// key: 'prveMonth'
|
||||
// }
|
||||
// ])
|
||||
const today = $time.getTodayTimestamps();
|
||||
const yesterday = $time.getYesterdayTimestamps();
|
||||
const thisMonth = $time.getThisMonthTimestamps();
|
||||
const thisLastMonth = $time.getThisLastMonthTimestamps();
|
||||
const fastTime = reactive([today, yesterday, thisMonth, thisLastMonth]);
|
||||
|
||||
function setPrveDay() {}
|
||||
|
||||
function setNowMoneth() {}
|
||||
|
||||
function setprveMoneth() {}
|
||||
|
||||
function setDay(start, end) {
|
||||
value.value = [start.year, start.month, start.day, 0, 0, 0];
|
||||
value1.value = [end.year, end.month, end.day, 23, 59, 59];
|
||||
}
|
||||
|
||||
function changeTime(e) {
|
||||
console.log(e);
|
||||
const start = e.start;
|
||||
const end = e.end;
|
||||
emits("confirm", {
|
||||
text: `${start}——${end}`,
|
||||
start,
|
||||
end,
|
||||
});
|
||||
close();
|
||||
}
|
||||
let value = ref([]);
|
||||
let value1 = ref([]);
|
||||
initValue();
|
||||
|
||||
function returnFindIndex(arr) {
|
||||
const yearIndex = years.findIndex((v) => v == arr[0]);
|
||||
const monthIndex = arr[1];
|
||||
const dayIndex = arr[2] - 1;
|
||||
const hIndex = arr[3];
|
||||
const mIndex = arr[4];
|
||||
const sIndex = arr[5];
|
||||
return [yearIndex, monthIndex, dayIndex, hIndex, mIndex, sIndex];
|
||||
}
|
||||
|
||||
function initValue() {
|
||||
if (props.defaultTime.length && !props.isArea) {
|
||||
value.value = returnFindIndex(props.defaultTime);
|
||||
} else {
|
||||
const yearIndex = years.findIndex((v) => v == nowDate.year);
|
||||
value.value = [yearIndex, nowDate.month - 1, nowDate.day - 1, 0, 0, 0];
|
||||
value1.value = [yearIndex, nowDate.month - 1, nowDate.day - 1, 23, 59, 59];
|
||||
}
|
||||
}
|
||||
|
||||
let show = ref(false);
|
||||
const emits = defineEmits("close", "open", "confirm");
|
||||
|
||||
function toggle() {
|
||||
show.value = !show.value;
|
||||
if (show.value) {
|
||||
open();
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
// emits('close', false)
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (typeof props.selTime === "number") {
|
||||
const d = new Date(props.selTime);
|
||||
value.value[0] = years.findIndex((v) => v === d.getFullYear());
|
||||
value.value[1] = months.findIndex((v) => v === d.getMonth()) + 1;
|
||||
value.value[2] = days.value.findIndex((v) => v === d.getDate());
|
||||
}
|
||||
show.value = true;
|
||||
// emits('open', true)
|
||||
}
|
||||
|
||||
function returnDateString(arr, isObj) {
|
||||
const year = years[arr[0]];
|
||||
const month = arr[1] + 1;
|
||||
const day = arr[2] + 1;
|
||||
const hour = ("0" + (arr[3] || 0)).slice(-2);
|
||||
const min = ("0" + (arr[4] || 0)).slice(-2);
|
||||
const sen = ("0" + (arr[5] || 0)).slice(-2);
|
||||
if (isObj) {
|
||||
return new Date(year, month, day, hour, min, sen);
|
||||
}
|
||||
return `${year}-${month}-${day} ${hour}:${min}:${sen}`;
|
||||
}
|
||||
|
||||
function confirm(e) {
|
||||
const start = returnDateString(value.value);
|
||||
const end = returnDateString(value1.value);
|
||||
if (!props.isArea) {
|
||||
emits("confirm", start);
|
||||
} else {
|
||||
emits("confirm", {
|
||||
text: `${start}——${end}`,
|
||||
start,
|
||||
end,
|
||||
});
|
||||
}
|
||||
|
||||
close();
|
||||
}
|
||||
|
||||
function returnMonthStart(arr) {
|
||||
return new Date(years[arr[0]], months[arr[1]] - 1, 1).getDate();
|
||||
}
|
||||
|
||||
function returnMonthEnd(arr) {
|
||||
return new Date(years[arr[0]], months[arr[1]], 0).getDate();
|
||||
}
|
||||
|
||||
//防抖
|
||||
function debounce(fn, wait) {
|
||||
let timeout = null;
|
||||
return function () {
|
||||
let context = this;
|
||||
let args = arguments;
|
||||
if (timeout) clearTimeout(timeout);
|
||||
let callNow = !timeout;
|
||||
timeout = setTimeout(() => {
|
||||
timeout = null;
|
||||
}, wait);
|
||||
if (callNow) fn.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} isDays1 //是否是结束时间选择
|
||||
* @param {Object} arr
|
||||
*/
|
||||
function changeDays(isDays1, arr) {
|
||||
const end = returnMonthEnd(arr);
|
||||
if (end) {
|
||||
if (isDays1) {
|
||||
days1.value = new Array(end).fill(1).map((v, index) => {
|
||||
return index + 1;
|
||||
});
|
||||
} else {
|
||||
days.value = new Array(end).fill(1).map((v, index) => {
|
||||
return index + 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function bindChange(e) {
|
||||
const startTotal = returnDateString(e.detail.value, true).getTime();
|
||||
const endTotal = returnDateString(value1.value, true).getTime();
|
||||
value.value = e.detail.value;
|
||||
setTimeout(() => {
|
||||
if (props.isArea) {
|
||||
value.value = startTotal > endTotal ? value1.value : e.detail.value;
|
||||
}
|
||||
debounce(changeDays(false, value.value), 100);
|
||||
}, 10);
|
||||
// nextTick(() => {
|
||||
// if (props.isArea) {
|
||||
// value.value = startTotal > endTotal ? value1.value : e.detail.value
|
||||
// }
|
||||
// console.log(value.value);
|
||||
// debounce(changeDays(false, value.value), 100)
|
||||
// })
|
||||
}
|
||||
|
||||
function bindChange1(e) {
|
||||
const startTotal = returnDateString(value.value, true).getTime();
|
||||
const endTotal = returnDateString(e.detail.value, true).getTime();
|
||||
value1.value = e.detail.value;
|
||||
nextTick(() => {
|
||||
if (props.isArea) {
|
||||
value1.value = endTotal < startTotal ? value.value : e.detail.value;
|
||||
}
|
||||
debounce(changeDays(true, value1.value), 100);
|
||||
});
|
||||
}
|
||||
|
||||
function getDayDate(date = new Date(), type) {
|
||||
const now = date;
|
||||
if (type === "start") {
|
||||
const startOfDay = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth(),
|
||||
now.getDate()
|
||||
);
|
||||
return startOfDay;
|
||||
}
|
||||
if (type === "end") {
|
||||
const endOfDay = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth(),
|
||||
now.getDate(),
|
||||
23,
|
||||
59,
|
||||
59,
|
||||
999
|
||||
);
|
||||
return endOfDay;
|
||||
}
|
||||
}
|
||||
|
||||
function getMonthArea(date = new Date(), type) {
|
||||
let now = date;
|
||||
let currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
let currentMonthEnd = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth() + 1,
|
||||
0,
|
||||
23,
|
||||
59,
|
||||
59,
|
||||
999
|
||||
);
|
||||
if (type === "start") {
|
||||
return currentMonthStart;
|
||||
}
|
||||
if (type === "end") {
|
||||
return currentMonthEnd;
|
||||
}
|
||||
return {
|
||||
start: currentMonthStart,
|
||||
end: currentMonthEnd,
|
||||
};
|
||||
}
|
||||
|
||||
function nullFunction() {}
|
||||
|
||||
function pickend(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function pickend1(e) {
|
||||
console.log(e);
|
||||
}
|
||||
defineExpose({
|
||||
close,
|
||||
open,
|
||||
confirm,
|
||||
toggle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fastTime {
|
||||
.item {
|
||||
background-color: rgb(247, 247, 247);
|
||||
padding: 6rpx 40rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
background-color: rgba(51, 51, 51, 0.5);
|
||||
|
||||
.item {
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed_b {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
z-index: 100;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,78 @@
|
||||
<template>
|
||||
<view class="fixed-wrap" :style="{ '--num': showCancel ? '63px' : '0px' }">
|
||||
<view class="fixed-btn" id="targetRef">
|
||||
<div class="btn">
|
||||
<u-button type="primary" :shape="shape" size="large" @click="emits('confirm')">{{ confirmText }}</u-button>
|
||||
</div>
|
||||
<div class="btn" v-if="showCancel">
|
||||
<u-button :shape="shape" size="large" @click="emits('cancel')">取消</u-button>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="fixed-wrap"
|
||||
:style="{ '--num': showCancel ? '63px' : '0px' }"
|
||||
v-if="isShow"
|
||||
>
|
||||
<view class="fixed-btn" id="targetRef">
|
||||
<div class="btn">
|
||||
<u-button
|
||||
type="primary"
|
||||
:shape="shape"
|
||||
size="large"
|
||||
@click="emits('confirm')"
|
||||
>{{ confirmText }}</u-button
|
||||
>
|
||||
</div>
|
||||
<div class="btn" v-if="showCancel">
|
||||
<u-button :shape="shape" size="large" @click="emits('cancel')"
|
||||
>取消</u-button
|
||||
>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||||
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
|
||||
import { isMainShop } from "@/store/account.js";
|
||||
|
||||
const props = defineProps({
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '保存'
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle' // squre circle
|
||||
}
|
||||
isOpenPermission: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "保存",
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: "circle", // squre circle
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['confirm', 'cancel']);
|
||||
const isShow = computed(() => {
|
||||
if (props.isOpenPermission) {
|
||||
return isMainShop();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const emits = defineEmits(["confirm", "cancel"]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fixed-wrap {
|
||||
--height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
.fixed-btn {
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
|
||||
background-color: #fff;
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
--height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
.fixed-btn {
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
|
||||
background-color: #fff;
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,113 +1,125 @@
|
||||
<template>
|
||||
<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :width="width"
|
||||
:height="height" :maxCount="maxCount"></up-upload>
|
||||
<up-upload
|
||||
:fileList="images"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
:multiple="multiple"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:maxCount="maxCount"
|
||||
>
|
||||
<template #default v-if="$slots.default">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</up-upload>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { uploadFile } from '@/http/api/index.js'
|
||||
import { ref, watch } from "vue";
|
||||
import { uploadFile } from "@/http/api/index.js";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 60
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 60
|
||||
},
|
||||
maxCount: {
|
||||
type: [Number],
|
||||
default: 10
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 60,
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 60,
|
||||
},
|
||||
maxCount: {
|
||||
type: [Number],
|
||||
default: 10,
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const images = ref(props.modelValue);
|
||||
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const images = ref(props.modelValue)
|
||||
|
||||
|
||||
|
||||
function uploadfile(par){
|
||||
let file=null;
|
||||
// #ifdef H5
|
||||
file= par.file
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
file= par
|
||||
// #endif
|
||||
return uploadFile(file)
|
||||
}
|
||||
|
||||
function afterRead(e) {
|
||||
console.log(e);
|
||||
if (Array.isArray(e.file)) {
|
||||
for (let i in e.file) {
|
||||
const file = e.file[i]
|
||||
console.log(file);
|
||||
uploadfile(file).then(res => {
|
||||
console.log(res);
|
||||
images.value.push({
|
||||
url: e.file[i].url,
|
||||
serveUrl: res
|
||||
})
|
||||
}).catch(res => {
|
||||
console.log(res);
|
||||
if (res.errMsg) {
|
||||
images.value.splice(i, 1)
|
||||
uni.showToast({
|
||||
title: '图片大小超出限制',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
function uploadfile(par) {
|
||||
let file = null;
|
||||
// #ifdef H5
|
||||
file = par.file;
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
file = par;
|
||||
// #endif
|
||||
return uploadFile(file);
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}else{
|
||||
const i=0
|
||||
uploadfile(e.file).then(res => {
|
||||
console.log(res);
|
||||
images.value.push({
|
||||
url: e.file.url,
|
||||
serveUrl: res
|
||||
})
|
||||
}).catch(res => {
|
||||
console.log(res);
|
||||
if (res.errMsg) {
|
||||
images.value.splice(i, 1)
|
||||
uni.showToast({
|
||||
title: '图片大小超出限制',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
function afterRead(e) {
|
||||
console.log(e);
|
||||
if (Array.isArray(e.file)) {
|
||||
for (let i in e.file) {
|
||||
const file = e.file[i];
|
||||
console.log(file);
|
||||
uploadfile(file)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
images.value.push({
|
||||
url: e.file[i].url,
|
||||
serveUrl: res,
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
console.log(res);
|
||||
if (res.errMsg) {
|
||||
images.value.splice(i, 1);
|
||||
uni.showToast({
|
||||
title: "图片大小超出限制",
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const i = 0;
|
||||
uploadfile(e.file)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
images.value.push({
|
||||
url: e.file.url,
|
||||
serveUrl: res,
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
console.log(res);
|
||||
if (res.errMsg) {
|
||||
images.value.splice(i, 1);
|
||||
uni.showToast({
|
||||
title: "图片大小超出限制",
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
function deletePic(e) {
|
||||
const { index } = e;
|
||||
images.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function deletePic(e) {
|
||||
const {
|
||||
index
|
||||
} = e
|
||||
images.value.splice(index, 1)
|
||||
}
|
||||
|
||||
watch(() => images.value, (newval) => {
|
||||
emits('update:modelValue', newval)
|
||||
})
|
||||
watch(() => props.modelValue, (newval) => {
|
||||
images.value = newval
|
||||
})
|
||||
watch(
|
||||
() => images.value,
|
||||
(newval) => {
|
||||
emits("update:modelValue", newval);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newval) => {
|
||||
images.value = newval;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
89
components/my-components/my-upload-img.vue
Normal file
89
components/my-components/my-upload-img.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="upload-file" @click="chooseImage">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<view class="icon" v-if="!modelValue"> + </view>
|
||||
<image class="img" v-else :src="modelValue"></image>
|
||||
|
||||
<view class="close" @click.stop="()=>{}" v-if="modelValue">
|
||||
<up-icon name="close-circle" color="#333" size="14" @click="clearImg" ></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { uploadFile } from "@/http/api/index.js";
|
||||
|
||||
import { reactive, ref, watch } from "vue";
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
function chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ["album", "camera "],
|
||||
success: async function (res) {
|
||||
uni.showLoading({
|
||||
title: "上传中",
|
||||
});
|
||||
console.log(res);
|
||||
const fileRes = await uploadFile(res.tempFiles[0]);
|
||||
uni.hideLoading();
|
||||
if (fileRes) {
|
||||
modelValue.value = fileRes;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "上传失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function clearImg(){
|
||||
modelValue.value=""
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.upload-file {
|
||||
$size: 128rpx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
.close{
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
}
|
||||
.img {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
.icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 4rpx solid #999;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user