Skip to content

T
tiktok-upload-web
Commit 1d0995cb by haojie
Options

1

parent 50574a24
Showing with 763 additions and 119 deletions
package-lock.json
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
"dependencies": { "dependencies": {
"@vitejs/plugin-legacy": "^3.0.1", "@vitejs/plugin-legacy": "^3.0.1",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"dayjs": "^1.11.7",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"swiper": "^8.4.5",
"tdesign-icons-vue-next": "^0.1.7", "tdesign-icons-vue-next": "^0.1.7",
"tdesign-vue-next": "^1.0.5", "tdesign-vue-next": "^1.0.5",
"uuid": "^9.0.0", "uuid": "^9.0.0",
...@@ -1966,14 +1966,6 @@ ...@@ -1966,14 +1966,6 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
} }
}, },
"node_modules/dom7": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"dependencies": {
"ssr-window": "^4.0.0"
}
},
"node_modules/domelementtype": { "node_modules/domelementtype": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
...@@ -3650,11 +3642,6 @@ ...@@ -3650,11 +3642,6 @@
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"deprecated": "Please use @jridgewell/sourcemap-codec instead" "deprecated": "Please use @jridgewell/sourcemap-codec instead"
}, },
"node_modules/ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"node_modules/stable": { "node_modules/stable": {
"version": "0.1.8", "version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
...@@ -3769,29 +3756,6 @@ ...@@ -3769,29 +3756,6 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/swiper": {
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"hasInstallScript": true,
"dependencies": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
},
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/systemjs": { "node_modules/systemjs": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.13.0.tgz", "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.13.0.tgz",
...@@ -5671,14 +5635,6 @@ ...@@ -5671,14 +5635,6 @@
"entities": "^2.0.0" "entities": "^2.0.0"
} }
}, },
"dom7": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"requires": {
"ssr-window": "^4.0.0"
}
},
"domelementtype": { "domelementtype": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
...@@ -6935,11 +6891,6 @@ ...@@ -6935,11 +6891,6 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
}, },
"ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"stable": { "stable": {
"version": "0.1.8", "version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
...@@ -7017,15 +6968,6 @@ ...@@ -7017,15 +6968,6 @@
"stable": "^0.1.8" "stable": "^0.1.8"
} }
}, },
"swiper": {
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"requires": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
}
},
"systemjs": { "systemjs": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.13.0.tgz", "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.13.0.tgz",
......
package.json
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
"dependencies": { "dependencies": {
"@vitejs/plugin-legacy": "^3.0.1", "@vitejs/plugin-legacy": "^3.0.1",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"dayjs": "^1.11.7",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"swiper": "^8.4.5",
"tdesign-icons-vue-next": "^0.1.7", "tdesign-icons-vue-next": "^0.1.7",
"tdesign-vue-next": "^1.0.5", "tdesign-vue-next": "^1.0.5",
"uuid": "^9.0.0", "uuid": "^9.0.0",
......
src/pages/RaiseNumber/components/Raise/index.less 0 → 100644
.custom-chose-raise {
margin-top: 20px;
.chose-time {
margin: 20px 0;
display: flex;
align-items: center;
.t-date-picker {
.t-input__wrap {
height: 55px;
.t-input {
height: 100%;
}
}
}
.t-time-picker {
margin-left: 20px;
.t-input__wrap {
height: 55px;
.t-input {
height: 100%;
}
}
}
.t-select__wrap {
margin-left: 20px;
.t-input__wrap {
height: 55px;
width: 120px;
.t-input {
height: 100%;
.t-input__inner {
text-align: center;
}
}
}
}
}
}
.select-raise-time {
.t-select__list {
.t-select-option {
display: flex;
align-items: center;
justify-content: center;
}
}
}
src/pages/RaiseNumber/components/Raise/index.tsx 0 → 100644
import { defineComponent, ref, watch } from 'vue';
import './index.less';
import dayjs from 'dayjs';
export default defineComponent({
props: {
modelValue: Number,
raise_duration: Number,
},
emits: ['update:modelValue', 'update:raise_duration'],
setup(props, { emit }) {
// 日期
const DatePicker = ref('');
// 时间
const timePicker = ref('');
// 选择养号时长
const raise_duration = ref(props.raise_duration);
const options = [
{
label: '5分钟',
value: 1000 * 60 * 5,
},
{
label: '10分钟',
value: 1000 * 60 * 10,
},
{
label: '15分钟',
value: 1000 * 60 * 15,
},
{
label: '20分钟',
value: 1000 * 60 * 20,
},
{
label: '25分钟',
value: 1000 * 60 * 25,
},
{
label: '30分钟',
value: 1000 * 60 * 30,
},
];
watch(
() => [DatePicker.value, timePicker.value],
([date, time]) => {
if (date && time) {
let newDate = date + ' ' + time;
let dateValue = dayjs(newDate).valueOf();
// 合并
emit('update:modelValue', dateValue);
}
}
);
watch(
() => props.modelValue,
(v) => {
if (!v) {
DatePicker.value = '';
timePicker.value = '';
}
}
);
watch(
() => raise_duration.value,
(v) => {
emit('update:raise_duration', v);
}
);
watch(
() => props.raise_duration,
(v) => {
raise_duration.value = v;
}
);
return () => (
<div class="custom-chose-raise">
<div class="custom-upload-label">定时养号</div>
<div class="chose-time">
<t-date-picker v-model={DatePicker.value} />
<t-timePicker v-model={timePicker.value} />
<t-select
popupProps={{
overlayClassName: 'select-raise-time',
}}
v-model={raise_duration.value}
options={options}
placeholder="时长"
></t-select>
</div>
</div>
);
},
});
src/pages/RaiseNumber/components/RandomStop/index.less 0 → 100644
.custom-random-stop {
.value {
margin: 20px 0;
display: flex;
align-items: center;
.t-input-number {
width: auto;
display: flex;
padding: 0;
& > * {
height: 55px;
}
& > :not(:nth-child(2)) {
width: 55px;
position: relative;
}
& > :nth-child(1) {
margin-right: 6px;
}
& > :nth-child(2) {
margin: 0;
}
& > :nth-child(3) {
margin-left: 6px;
}
.t-input__wrap {
width: auto;
.t-input {
height: 100%;
width: 100%;
}
}
}
.line {
margin: 0 20px;
}
}
}
src/pages/RaiseNumber/components/RandomStop/index.tsx 0 → 100644
import { defineComponent, watch, ref } from 'vue';
import './index.less';
export default defineComponent({
props: {
modelValue: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
// 最小值
const min_value = ref(null);
// 最大值
const max_value = ref(null);
watch(
() => props.modelValue,
(v) => {
if (!v) {
min_value.value = null;
max_value.value = null;
}
}
);
watch(
() => [min_value.value, max_value.value],
([min, max]) => {
if (min && max) {
// 都选择了才update
emit('update:modelValue', min + '-' + max);
}
}
);
return () => (
<div class="custom-random-stop">
<div class="custom-upload-label">停留时长</div>
<div class="value">
<t-input-number
placeholder="最小停留时间"
v-model={min_value.value}
></t-input-number>
<div class="line">-</div>
<t-input-number
placeholder="最大停留时间"
v-model={max_value.value}
></t-input-number>
</div>
</div>
);
},
});
src/pages/RaiseNumber/index.less
@import '@/style/page/uploadTitle.less';
.custom-raise-number { .custom-raise-number {
.custom-upload-link-page-child {
width: 1270px;
margin: 0 auto;
background: white;
min-height: 300px;
margin-top: 72px;
padding: 30px 60px;
.submit-btn {
margin-top: 20px;
background: #ebebeb;
border-radius: 8px;
color: #9a9a9a;
width: 164px;
height: 46px;
border: none;
--ripple-color: none !important;
cursor: not-allowed;
}
.on-reset {
margin: 20px 0 0 20px;
border-radius: 8px;
border: 1px solid #dbdbdb;
background: none;
font-weight: 500;
font-size: 18px;
color: #000000;
width: 164px;
height: 46px;
--ripple-color: rgba(0, 0, 0, 0.1) !important;
}
.active {
background: #fd1753;
color: #ffffff;
cursor: pointer;
}
}
} }
src/pages/RaiseNumber/index.tsx
import { defineComponent } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import './index.less'; import './index.less';
import Animation from '@/components/Animation.vue';
import SelectAccount from '@/pages/upload/compontent/selectAccount';
import Raise from './components/Raise';
import '@/style/page/uploadTitle.less';
import RandomStop from './components/RandomStop';
import { MessagePlugin } from 'tdesign-vue-next';
import { useSubmitRaiseTask } from '@/utils/api/userApi';
export default defineComponent({ export default defineComponent({
setup(props, ctx) { setup(props, ctx) {
const loading = ref(false);
const accountId = ref(null);
// 选择养号开始时间
const startTime = ref(0);
// 养号时长
const raise_duration = ref(1000 * 60 * 5);
// 随机间隔
const dwell_interval = ref('');
const getparamsList = () => {
let list: any = [
{
startTime: startTime.value,
raise_duration: raise_duration.value,
dwell_interval: dwell_interval.value,
},
];
return list;
};
const submit = async () => {
if (!accountId.value) {
MessagePlugin.closeAll();
MessagePlugin.warning('请选择账户');
return;
}
if (!startTime.value) {
MessagePlugin.closeAll();
MessagePlugin.warning('请选择养号开始时间');
return;
}
// 提交养号任务
try {
// 获取本次提交列表
let list = getparamsList();
let res: any = await useSubmitRaiseTask({
account_id: accountId.value,
parameters: list,
});
} catch (e) {
console.log(e);
}
};
// 重置--清空
const onReset = () => {
startTime.value = 0;
raise_duration.value = 1000 * 60 * 5;
dwell_interval.value = '';
};
return () => ( return () => (
<div class="custom-raise-number"> <div class="custom-raise-number narrow-scrollbar">
1<span></span> <div class="custom-upload-link-page-child">
<SelectAccount
record={false}
hideAll={false}
v-model:accountId={accountId.value}
></SelectAccount>
<Raise
v-model={startTime.value}
v-model:raise_duration={raise_duration.value}
></Raise>
<RandomStop v-model={dwell_interval.value}></RandomStop>
<t-button class={['submit-btn', 1 ? 'active' : '']} onClick={submit}>
确认
</t-button>
<t-button class="on-reset" onClick={onReset}>
重置
</t-button>
<Animation
v-show={loading.value}
poistion="fixed"
background="rgba(200,200,200,0.2)"
></Animation>
</div>
</div> </div>
); );
}, },
......
src/pages/upload/compontent/selectAccount/index.tsx
import { computed, defineComponent, onMounted, ref } from 'vue'; import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import './index.less'; import './index.less';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
export default defineComponent({ export default defineComponent({
props: { props: {
modelValue: String, modelValue: String,
record: Boolean, record: Boolean,
hideAll: {
type: Boolean,
default: true,
},
}, },
emits: ['update:modelValue', 'update:accountId'], emits: ['update:modelValue', 'update:accountId'],
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore(); const store = useStore();
// 选择列表 // 选择列表
const AccountOptions = computed(() => store.getters['user/getOptions']); const AccountOptions = computed(() => store.getters['user/getOptions']);
watch(
() => AccountOptions.value,
(v) => {}
);
const AccountOptions_after = computed(() => {
let list = JSON.parse(JSON.stringify(AccountOptions.value));
if (!props.hideAll) {
// 增加一个all
list.unshift({
label: '所有账号',
value: 'all',
});
}
return list;
});
const value = ref(''); const value = ref('');
const handleBlur = ({ value, e }: any) => { const handleBlur = ({ value, e }: any) => {
console.log('handleBlur: ', value, e); console.log('handleBlur: ', value, e);
...@@ -49,7 +68,7 @@ export default defineComponent({ ...@@ -49,7 +68,7 @@ export default defineComponent({
class="chose-account-select" class="chose-account-select"
v-model={value.value} v-model={value.value}
placeholder={'选择一个账户'} placeholder={'选择一个账户'}
options={AccountOptions.value} options={AccountOptions_after.value}
style="width: 200px; display: inline-block;" style="width: 200px; display: inline-block;"
filterable filterable
onblur={handleBlur} onblur={handleBlur}
......
src/pages/upload/index.tsx
...@@ -18,9 +18,6 @@ export default defineComponent({ ...@@ -18,9 +18,6 @@ export default defineComponent({
// 用户选择的账号 // 用户选择的账号
const accountId = ref(null); const accountId = ref(null);
const loading = ref(false); const loading = ref(false);
onMounted(() => {
store.dispatch('user/AdminConfig');
});
// 根据账户数量循环 // 根据账户数量循环
const uploadList = ref([ const uploadList = ref([
{ {
...@@ -29,31 +26,39 @@ export default defineComponent({ ...@@ -29,31 +26,39 @@ export default defineComponent({
}, },
]); ]);
const uploadList2 = ref<any>({}); const uploadList2 = ref<any>({});
watch(
() => AccountOptions.value,
(v) => {
if (v.length) {
// 每个账号一个数组
for (let i in v) {
uploadList2.value[`r${v[i].account_id}`] = JSON.parse(
JSON.stringify(uploadList.value)
);
}
}
}
);
// 默认展示的内容 // 默认展示的内容
const defaultType = ref('upload'); const defaultType = ref('upload');
let obj = { let obj = {
textValue: '', textValue: '',
files: '', files: '',
}; };
// 每个账号一个数组
const CreateDefault = () => {
if (AccountOptions.value && AccountOptions.value.length) {
for (let i in AccountOptions.value) {
uploadList2.value[`r${AccountOptions.value[i].account_id}`] =
JSON.parse(JSON.stringify(uploadList.value));
}
}
};
onMounted(() => {
store.dispatch('user/AdminConfig');
//
CreateDefault();
});
watch(
() => AccountOptions.value,
(v) => {
CreateDefault();
}
);
const addNewUpload = () => { const addNewUpload = () => {
if (!accountId.value) { if (!accountId.value) {
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.warning('未选择账户'); MessagePlugin.warning('未选择账户');
return; return;
} }
console.log(uploadList2.value);
// 在对应的账户下添加一个box // 在对应的账户下添加一个box
uploadList2.value[`r${accountId.value}`].push( uploadList2.value[`r${accountId.value}`].push(
JSON.parse(JSON.stringify(obj)) JSON.parse(JSON.stringify(obj))
......
src/pages/uploadLink/components/ChangeName/index.tsx
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import './index.less'; import './index.less';
export default defineComponent({ export default defineComponent({
props: { props: {
...@@ -10,6 +10,12 @@ export default defineComponent({ ...@@ -10,6 +10,12 @@ export default defineComponent({
const inputChange = (value: string) => { const inputChange = (value: string) => {
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
watch(
() => props.modelValue,
(v) => {
input_value.value = v;
}
);
return () => ( return () => (
<div class="custom-change-name"> <div class="custom-change-name">
<div class="custom-upload-label">修改名称</div> <div class="custom-upload-label">修改名称</div>
......
src/pages/uploadLink/components/ChangeProfile/index.tsx
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import './index.less'; import './index.less';
export default defineComponent({ export default defineComponent({
props: { props: {
...@@ -10,6 +10,12 @@ export default defineComponent({ ...@@ -10,6 +10,12 @@ export default defineComponent({
const textareaChange = (value: string) => { const textareaChange = (value: string) => {
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
watch(
() => props.modelValue,
(v: string = '') => {
input_area.value = v;
}
);
return () => ( return () => (
<div class="change-Introduction-box"> <div class="change-Introduction-box">
<div class="label">简介</div> <div class="label">简介</div>
......
src/pages/uploadLink/components/HideVideo/index.tsx
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import './index.less'; import './index.less';
export default defineComponent({ export default defineComponent({
props: { props: {
...@@ -11,6 +11,12 @@ export default defineComponent({ ...@@ -11,6 +11,12 @@ export default defineComponent({
const onChange = (value: boolean) => { const onChange = (value: boolean) => {
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
watch(
() => props.modelValue,
(v) => {
status.value = v;
}
);
return () => ( return () => (
<div class="custom-hide-video"> <div class="custom-hide-video">
<div class="custom-upload-label">隐藏视频</div> <div class="custom-upload-label">隐藏视频</div>
......
src/pages/uploadLink/components/UploadLink/index.tsx
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import './index.less'; import './index.less';
export default defineComponent({ export default defineComponent({
props: { props: {
...@@ -10,6 +10,12 @@ export default defineComponent({ ...@@ -10,6 +10,12 @@ export default defineComponent({
const inputChange = (value: string) => { const inputChange = (value: string) => {
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
watch(
() => props.modelValue,
(v) => {
input_value.value = v;
}
);
return () => ( return () => (
<div class="custom-up-link"> <div class="custom-up-link">
<div class="custom-upload-label">上传链接</div> <div class="custom-upload-label">上传链接</div>
......
src/pages/uploadLink/components/uploadAvatar/index.less
.custom-upload-avatar { .custom-upload-avatar {
.upload-avatar-box { .upload-avatar-box {
margin: 20px 0; margin: 20px 0;
// 上传中
.custom-uploading-stauts {
width: 250px;
height: 250px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
border: 1px solid #dbdbdb;
border-radius: 5px;
font-weight: 400;
font-size: 15px;
color: #8b8b8b;
.uploading-title {
margin-top: 20px;
}
.img {
width: 100%;
height: 100%;
}
}
.t-upload { .t-upload {
width: 250px; width: 250px;
height: 250px; height: 250px;
......
src/pages/uploadLink/components/uploadAvatar/index.tsx
import { defineComponent, ref, computed } from 'vue'; import {
defineComponent,
ref,
computed,
reactive,
onMounted,
watch,
} from 'vue';
import './index.less'; import './index.less';
import UploadTip from '@/assets/svg/upload/uploadTip.svg?component'; import UploadTip from '@/assets/svg/upload/uploadTip.svg?component';
import { getUserCookie } from '@/utils/api/userApi'; import { getUserCookie } from '@/utils/api/userApi';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { v4 } from 'uuid';
import request from '@/utils/otherRequest';
import { getConfigPolicy } from '@/utils/api/userApi';
export default defineComponent({ export default defineComponent({
setup(props) { props: {
accountId: Number,
modelValue: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const store = useStore(); const store = useStore();
const files = ref([]); const files = ref([]);
const actionUrl = ref(''); let percentageInterval: any = null;
const userAccount = computed(() => store.getters['user/getAccount']); // 图片上传策略
// 后台配置的地址 const AvatarConfig = ref<any>({});
const adminConfigUrl = computed(() => store.getters['user/getadminConfig']); // 上传进度条
const percentage = ref(0);
// 文件地址
const Curfile = reactive({
url: '',
status: 0,
// 当前上传模块提交的状态
uploadStatus: false,
});
const beforeUpload = (file: File) => { const beforeUpload = (file: File) => {
if (!userAccount.value) { if (file.size > 100 * 1024) {
MessagePlugin.warning('请先选择一个账户'); MessagePlugin.warning('文件不能大于100KB');
return false; return false;
} else if (!adminConfigUrl.value) { }
MessagePlugin.warning('后台配置链接为空'); if (!props.accountId) {
MessagePlugin.warning('请先选择一个账户');
return false; return false;
} }
return true; return true;
}; };
// 第一个上传链接 watch(
const formatResponseOne = (response: any, context: any) => { () => props.modelValue,
console.log(response); (v = '') => {
// return { name: 'FileName', url: response.url }; Curfile.url = v;
if (!v) {
Curfile.status = 0;
Curfile.uploadStatus = false;
}
}
);
// 上传进度定时器
const openpercentage = () => {
// 开启一个定时器，模拟上传进度
percentage.value = 0;
percentageInterval = setInterval(() => {
if (percentage.value == 99) {
return;
}
percentage.value += 1;
}, 100);
};
// 上传成功回调
const UploadSuccessCallback = (uuid: any, url: any) => {
// 关闭定时器
window.clearInterval(percentageInterval);
MessagePlugin.success('上传成功');
// 将将完整url传给父组件
Curfile.url = url;
// 成功2
Curfile.status = 2;
emit('update:modelValue', Curfile.url);
};
// 上传失败回调
const UploadErrorCallback = () => {
// 关闭定时器
window.clearInterval(percentageInterval);
Curfile.url = '';
// 失败0
Curfile.status = 0;
emit('update:modelValue', Curfile.url);
MessagePlugin.warning('上传失败');
};
const ExtranetUpload = (file: any, config: any) => {
openpercentage();
return new Promise((resolve) => {
let uuid = v4();
// 上传中状态
Curfile.status = 1;
let url = '';
if (import.meta.env.MODE != 'development') {
// 线上
url = 'https://' + config.host;
} else {
// 本地
// url = '/files';
url = 'https://' + config.host;
}
setTimeout(() => {
let suffix = file[0].type.replace('image/', '.');
let formData = new FormData();
formData.append('key', config.dir + uuid + suffix);
formData.append('policy', config.policy);
formData.append('OSSAccessKeyId', config.accessid);
formData.append('success_action_status', '200');
formData.append('callback', config.callback);
formData.append('signature', config.signature);
formData.append('file', file[0].raw);
request
.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data;charset=utf-8',
// Accept: '*/*',
},
})
.then((res: any) => {
// resolve 参数为关键代码
if (res == 200) {
// 外网url
let url = config.domain + config.dir + uuid + suffix;
UploadSuccessCallback(uuid, url);
//
Curfile.uploadStatus = true;
resolve({
status: 'success',
response: {
url: Curfile.url,
},
});
} else {
UploadErrorCallback();
Curfile.uploadStatus = false;
resolve({
status: 'fail',
error: '上传失败，请检查文件是否符合规范',
});
}
})
.catch((e) => {
console.log(e);
});
}, 1000);
});
}; };
const handleFail = ({ file }: any) => { const handleFail = ({ file }: any) => {
MessagePlugin.error(`文件 ${file.name} 上传失败`); MessagePlugin.error(`文件 ${file.name} 上传失败`);
}; };
const requestSuccessMethod = async (file: any) => {
await ExtranetUpload(file, AvatarConfig.value);
return {
status: 'success',
response: {
url: Curfile.url,
},
};
};
// 获取图片上传策略
const getAvatarConfig = async () => {
try {
let res: any = await getConfigPolicy({
id: 2,
});
if (res.code == 0) {
AvatarConfig.value = res.data;
}
} catch (e) {
console.log(e);
}
};
// 上传中
const UploadingHtml = () => {
return (
<div class="custom-uploading-stauts">
<t-progress
theme="circle"
percentage={percentage.value}
size={'small'}
/>
<div class="uploading-title">正在上传</div>
</div>
);
};
const UploadSuccess = () => {
return (
<div class="custom-uploading-stauts">
<img class="img" src={Curfile.url} alt="" />
</div>
);
};
// 获取当前上传状态
const currentUploadStatus = () => {
if (Curfile.status == 0) {
return notUploadHtml();
} else if (Curfile.status == 1) {
// 上传中
return UploadingHtml();
} else {
// 上传完成
return UploadSuccess();
}
};
onMounted(() => {
getAvatarConfig();
});
// 未上传 // 未上传
const notUploadHtml = () => { const notUploadHtml = () => {
return ( return (
...@@ -37,7 +216,6 @@ export default defineComponent({ ...@@ -37,7 +216,6 @@ export default defineComponent({
v-model={files.value} v-model={files.value}
method="PUT" method="PUT"
requestMethod={requestSuccessMethod} requestMethod={requestSuccessMethod}
action={actionUrl.value}
headers={{ headers={{
authorization: `Bearer ${getUserCookie()}`, authorization: `Bearer ${getUserCookie()}`,
}} }}
...@@ -47,7 +225,6 @@ export default defineComponent({ ...@@ -47,7 +225,6 @@ export default defineComponent({
multiple multiple
max={1} max={1}
draggable={true} draggable={true}
formatResponse={formatResponseOne}
onfail={handleFail} onfail={handleFail}
> >
<div class="custom-upload-click-box"> <div class="custom-upload-click-box">
...@@ -62,11 +239,10 @@ export default defineComponent({ ...@@ -62,11 +239,10 @@ export default defineComponent({
</t-upload> </t-upload>
); );
}; };
const requestSuccessMethod = async (file: any) => {};
return () => ( return () => (
<div class="custom-upload-avatar"> <div class="custom-upload-avatar">
<div class="custom-upload-label">上传头像</div> <div class="custom-upload-label">上传头像</div>
<div class="upload-avatar-box">{notUploadHtml()}</div> <div class="upload-avatar-box">{currentUploadStatus()}</div>
</div> </div>
); );
}, },
......
src/pages/uploadLink/index.less
...@@ -34,6 +34,18 @@ ...@@ -34,6 +34,18 @@
--ripple-color: none !important; --ripple-color: none !important;
cursor: not-allowed; cursor: not-allowed;
} }
.on-reset {
margin: 20px 0 0 20px;
border-radius: 8px;
border: 1px solid #dbdbdb;
background: none;
font-weight: 500;
font-size: 18px;
color: #000000;
width: 164px;
height: 46px;
--ripple-color: rgba(0, 0, 0, 0.1) !important;
}
.active { .active {
background: #fd1753; background: #fd1753;
color: #ffffff; color: #ffffff;
......
src/pages/uploadLink/index.tsx
import { defineComponent, ref, watch } from 'vue'; import { defineComponent, ref, watch } from 'vue';
import SelectAccount from '@/pages/upload/compontent/selectAccount'; import SelectAccount from '@/pages/upload/compontent/selectAccount';
import './index.less'; import './index.less';
import { SubmitLink } from '@/utils/api/userApi'; import { SubmitMoreTask } from '@/utils/api/userApi';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import Animation from '@/components/Animation.vue'; import Animation from '@/components/Animation.vue';
import UploadAvatar from './components/uploadAvatar'; import UploadAvatar from './components/uploadAvatar';
...@@ -15,7 +15,7 @@ export default defineComponent({ ...@@ -15,7 +15,7 @@ export default defineComponent({
const BtnStatus = ref(false); const BtnStatus = ref(false);
const loading = ref(false); const loading = ref(false);
// 上传的图片 // 上传的图片
const MyAvatar = ref(''); const avatar_url = ref('');
// 名称输入框 // 名称输入框
const InputName = ref(''); const InputName = ref('');
// 简介 // 简介
...@@ -39,30 +39,87 @@ export default defineComponent({ ...@@ -39,30 +39,87 @@ export default defineComponent({
const CanNotSubmit = () => { const CanNotSubmit = () => {
// 任意一项修改了即可提交 // 任意一项修改了即可提交
if ( if (
(MyAvatar.value || (avatar_url.value ||
InputName.value || InputName.value ||
textValue.value || textValue.value ||
inputValue.value) && inputValue.value) &&
accountId.value accountId.value &&
BtnStatus.value
) { ) {
return true; return true;
} }
return false; return false;
}; };
watch(
() => [
avatar_url.value,
InputName.value,
textValue.value,
inputValue.value,
video_is_hide.value,
],
(list) => {
for (let i = 0; i < list.length; i++) {
if (list[i]) {
BtnStatus.value = true;
return;
}
}
}
);
// 过滤出任务列表
const filter_task = () => {
let list: any = [];
if (inputValue.value) {
// 上传链接
let obj: any = {};
obj.url = inputValue.value;
obj.type = 2;
list.push(obj);
}
if (textValue.value) {
// 修改简介
let obj: any = {};
obj.introduction = textValue.value;
obj.type = 3;
list.push(obj);
}
if (avatar_url.value) {
// 上传头像
let obj: any = {};
obj.avatar_url = avatar_url.value;
obj.type = 4;
list.push(obj);
}
if (InputName.value) {
// 修改名称
let obj: any = {};
obj.account_name = InputName.value;
obj.type = 5;
list.push(obj);
}
if (video_is_hide.value) {
// 隐藏视频
let obj: any = {};
obj.hide_video = video_is_hide.value;
obj.type = 6;
list.push(obj);
}
return list;
};
const submit = async () => { const submit = async () => {
if (!accountId.value || !inputValue.value || !BtnStatus.value) { let status = CanNotSubmit();
if (!status) {
return; return;
} }
// 通过 // 通过
try { try {
loading.value = true; loading.value = true;
let res: any = await SubmitLink({ // 要传递的数组
let list = filter_task();
let res: any = await SubmitMoreTask({
account_id: accountId.value, account_id: accountId.value,
parameters: [ parameters: list,
{
url: inputValue.value,
},
],
}); });
if (res.code == 0) { if (res.code == 0) {
// 成功-将提交按钮置灰 // 成功-将提交按钮置灰
...@@ -75,6 +132,15 @@ export default defineComponent({ ...@@ -75,6 +132,15 @@ export default defineComponent({
loading.value = false; loading.value = false;
} }
}; };
// 重置--清空
const onReset = () => {
avatar_url.value = '';
InputName.value = '';
textValue.value = '';
inputValue.value = '';
BtnStatus.value = false;
video_is_hide.value = false;
};
return () => ( return () => (
<div class="custom-upload-link-page narrow-scrollbar"> <div class="custom-upload-link-page narrow-scrollbar">
<div class="custom-upload-link-page-child"> <div class="custom-upload-link-page-child">
...@@ -83,7 +149,10 @@ export default defineComponent({ ...@@ -83,7 +149,10 @@ export default defineComponent({
v-model:accountId={accountId.value} v-model:accountId={accountId.value}
></SelectAccount> ></SelectAccount>
<div class="upload-link-box"> <div class="upload-link-box">
<UploadAvatar></UploadAvatar> <UploadAvatar
accountId={accountId.value ?? 0}
v-model={avatar_url.value}
></UploadAvatar>
<ChangeName v-model={InputName.value}></ChangeName> <ChangeName v-model={InputName.value}></ChangeName>
{/* 上传链接 */} {/* 上传链接 */}
<UploadLink v-model={inputValue.value}></UploadLink> <UploadLink v-model={inputValue.value}></UploadLink>
...@@ -100,6 +169,9 @@ export default defineComponent({ ...@@ -100,6 +169,9 @@ export default defineComponent({
> >
确认 确认
</t-button> </t-button>
<t-button class="on-reset" onClick={onReset}>
重置
</t-button>
</div> </div>
<Animation <Animation
v-show={loading.value} v-show={loading.value}
......
src/store/modules/user.ts
...@@ -102,7 +102,10 @@ const actions = { ...@@ -102,7 +102,10 @@ const actions = {
commit('setadminConfig', res.data.config.intranet_url); commit('setadminConfig', res.data.config.intranet_url);
if (res.data.config.oss) { if (res.data.config.oss) {
// 请求上传配置 // 请求上传配置
let result: any = await getConfigPolicy(); let result: any = await getConfigPolicy({
// 视频上传策略
id: 1,
});
if (result.code == 0) { if (result.code == 0) {
commit('setuploadStrategy', { commit('setuploadStrategy', {
oss: res.data.config.oss, oss: res.data.config.oss,
...@@ -126,7 +129,7 @@ const actions = { ...@@ -126,7 +129,7 @@ const actions = {
let res: any = await ChoseAccount(); let res: any = await ChoseAccount();
if (res.code == 0 && res.data.length) { if (res.code == 0 && res.data.length) {
res.data.forEach((item: any) => { res.data.forEach((item: any) => {
item.label = item.name + '-' + item.region; item.label = item.name + '-' + item.region + '-' + item.port;
item.value = item.account_id; item.value = item.account_id;
}); });
commit('setOptions', res.data); commit('setOptions', res.data);
......
src/utils/Tdesign.ts
...@@ -13,6 +13,9 @@ import { ...@@ -13,6 +13,9 @@ import {
Table as TTable, Table as TTable,
Pagination as TPagination, Pagination as TPagination,
RadioGroup as TRadioGroup, RadioGroup as TRadioGroup,
DatePicker as TDatePicker,
TimePicker as TTimePicker,
InputNumber as TInputNumber,
} from 'tdesign-vue-next'; } from 'tdesign-vue-next';
const components: any[] = [ const components: any[] = [
TSelect, TSelect,
...@@ -25,6 +28,9 @@ const components: any[] = [ ...@@ -25,6 +28,9 @@ const components: any[] = [
TProgress, TProgress,
TPagination, TPagination,
TRadioGroup, TRadioGroup,
TDatePicker,
TTimePicker,
TInputNumber,
]; ];
export default { export default {
install(app: any) { install(app: any) {
......
src/utils/api/userApi.ts
...@@ -52,9 +52,10 @@ export const UserUploadVideo = (data: any) => { ...@@ -52,9 +52,10 @@ export const UserUploadVideo = (data: any) => {
}; };
// 获取阿里云上传策略 // 获取阿里云上传策略
export const getConfigPolicy = () => { export const getConfigPolicy = (data: any) => {
let token = getUserCookie(); let token = getUserCookie();
return request.get('/api/users/config/policy', { return request.get('/api/users/config/policy', {
params: data,
headers: { headers: {
authorization: `Bearer ${token}`, authorization: `Bearer ${token}`,
}, },
...@@ -87,6 +88,21 @@ export const SubmitLink = (data: any) => { ...@@ -87,6 +88,21 @@ export const SubmitLink = (data: any) => {
} }
); );
}; };
// 发布多个任务
export const SubmitMoreTask = (data: any) => {
let token = getUserCookie();
return request.post(
'/api/users/more/upload',
{
...data,
},
{
headers: {
authorization: `Bearer ${token}`,
},
}
);
};
// 退出登录 // 退出登录
export const useLogout = () => { export const useLogout = () => {
...@@ -109,3 +125,12 @@ export const useSubmitIntrod = (data: any) => { ...@@ -109,3 +125,12 @@ export const useSubmitIntrod = (data: any) => {
}, },
}); });
}; };
// 提交养号任务
export const useSubmitRaiseTask = (data: any) => {
return request.post('/api/users/raise/task', data, {
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
vite.config.ts
...@@ -12,7 +12,7 @@ export default defineConfig(({ command, mode }) => { ...@@ -12,7 +12,7 @@ export default defineConfig(({ command, mode }) => {
let newDate = `${date.getFullYear()}-${ let newDate = `${date.getFullYear()}-${
date.getMonth() + 1 date.getMonth() + 1
}-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`; }-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`;
let api = 1 ? 'http://42.194.143.229:90' : 'http://video_publish.test'; let api = 0 ? 'http://42.194.143.229:90' : 'http://videopublish.test';
return { return {
base: '/', base: '/',
resolve: { resolve: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment