完成装扮商城版本需求
This commit is contained in:
@@ -9,4 +9,36 @@ export const listPartitionInfo = query => {
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 个人主页资源管理列表
|
||||
export const pesonalBackgroundListByPage = query => {
|
||||
return request({
|
||||
url: '/admin/pesonalBackground/listByPage',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 个人主页资源管理赠送
|
||||
export const pesonalBackgroundListSend = query => {
|
||||
return request({
|
||||
url: '/admin/pesonalBackground/send',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 个人主页资源管理保存
|
||||
export const pesonalBackgroundSaveOrUpdate = query => {
|
||||
return request({
|
||||
url: '/admin/pesonalBackground/saveOrUpdate',
|
||||
method: 'post',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 个人主页记录管理&个人赠送记录
|
||||
export const pesonalBackgroundListRecordByPage = query => {
|
||||
return request({
|
||||
url: '/admin/pesonalBackground/listRecordByPage',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
20
src/utils/partitionDesc.js
Normal file
20
src/utils/partitionDesc.js
Normal file
@@ -0,0 +1,20 @@
|
||||
const partitionInfoMap = {
|
||||
1: '英语区',
|
||||
2: '阿拉伯语区',
|
||||
4: '华语区',
|
||||
8: '土耳其区',
|
||||
}
|
||||
|
||||
export const partitionDesc = (val) => {
|
||||
return Object.keys(partitionInfoMap).filter(k=>{
|
||||
return(Number(val) & Number(k)) != 0
|
||||
}).map(k=>partitionInfoMap[k]).join(",");
|
||||
}
|
||||
|
||||
export const partitionIdArr = (val) => {
|
||||
var arr =[];
|
||||
Object.keys(partitionInfoMap).filter(k=>{
|
||||
return(Number(val) & Number(k)) != 0
|
||||
}).map(k=>arr.push(Number(k)));
|
||||
return arr
|
||||
}
|
@@ -16,43 +16,14 @@
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="x" align="center" label="个人主页id" />
|
||||
<el-table-column prop="x" align="center" label="个人主页名称" />
|
||||
<el-table-column prop="x" align="center" label="用户uID" />
|
||||
<el-table-column prop="x" align="center" label="用户昵称" />
|
||||
<el-table-column prop="x" align="center" label="赠送天数" />
|
||||
<el-table-column prop="x" align="center" label="备注" />
|
||||
<el-table-column prop="x" align="center" label="操作时间" />
|
||||
<el-table-column prop="x" align="center" label="操作人" />
|
||||
<!-- <el-table-column align="center" label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
@click="
|
||||
operationDialog = true;
|
||||
operationValue.partitionId = scope.row.x;
|
||||
operationValue.nameZh = scope.row.x;
|
||||
operationValue.nameEn = scope.row.x;
|
||||
operationValue.nameAr = scope.row.x;
|
||||
operationValue.nameTr = scope.row.x;
|
||||
operationValue.price = scope.row.x;
|
||||
operationValue.day = scope.row.x;
|
||||
operationValue.imageUrl = scope.row.x;
|
||||
operationValue.status = scope.row.x;
|
||||
"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="send()"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
>赠送</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="backgroundId" align="center" label="个人主页id" />
|
||||
<el-table-column prop="backgroundName" align="center" label="个人主页名称" />
|
||||
<el-table-column prop="uid" align="center" label="用户uID" />
|
||||
<el-table-column prop="nick" align="center" label="用户昵称" />
|
||||
<el-table-column prop="days" align="center" label="赠送天数" />
|
||||
<el-table-column prop="remake" align="center" label="备注" />
|
||||
<el-table-column prop="createTime" align="center" label="操作时间" />
|
||||
<el-table-column prop="optUser" align="center" label="操作人" />
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@@ -69,13 +40,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
import { pesonalBackgroundListRecordByPage } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
// @ts-ignore
|
||||
import { dateFormat } from "@/utils/system-helper";
|
||||
// @ts-ignore
|
||||
import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
name: "personalHomepageGiftRecordManagement",
|
||||
name: "personalHomepageRecordManagementSend",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
@@ -84,29 +55,38 @@ export default {
|
||||
id: "",
|
||||
},
|
||||
// 表格
|
||||
tableData: [{ x: "x" }],
|
||||
tableData: [],
|
||||
// 分页
|
||||
total: 10, //总页数
|
||||
currentPage: 1, //页码
|
||||
pageSize: 10, //条数
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 查询接口
|
||||
getData() {
|
||||
this.loading = true;
|
||||
// get({}).then((res) => {
|
||||
// if (res.code == 200) {
|
||||
// this.loading = false;
|
||||
// } else {
|
||||
// ElMessage({
|
||||
// showClose: true,
|
||||
// message: res.message,
|
||||
// type: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
pesonalBackgroundListRecordByPage({
|
||||
erbanNo: this.inquire.id,
|
||||
page: this.currentPage,
|
||||
comeFrom: 2,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.loading = false;
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.rows;
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 分页导航
|
||||
handleSizeChange() {
|
||||
|
@@ -16,44 +16,14 @@
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="x" align="center" label="个人主页id" />
|
||||
<el-table-column prop="x" align="center" label="个人主页名称" />
|
||||
<el-table-column prop="x" align="center" label="用户uID" />
|
||||
<el-table-column prop="x" align="center" label="用户昵称" />
|
||||
<el-table-column prop="x" align="center" label="拥有个人主页" />
|
||||
<el-table-column prop="x" align="center" label="个人主页状态" />
|
||||
<el-table-column prop="x" align="center" label="购买时间" />
|
||||
<el-table-column prop="x" align="center" label="有效时间" />
|
||||
<el-table-column prop="x" align="center" label="过期时间" />
|
||||
<!-- <el-table-column align="center" label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
@click="
|
||||
operationDialog = true;
|
||||
operationValue.partitionId = scope.row.x;
|
||||
operationValue.nameZh = scope.row.x;
|
||||
operationValue.nameEn = scope.row.x;
|
||||
operationValue.nameAr = scope.row.x;
|
||||
operationValue.nameTr = scope.row.x;
|
||||
operationValue.price = scope.row.x;
|
||||
operationValue.day = scope.row.x;
|
||||
operationValue.imageUrl = scope.row.x;
|
||||
operationValue.status = scope.row.x;
|
||||
"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="send()"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
>赠送</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="backgroundId" align="center" label="个人主页id" />
|
||||
<el-table-column prop="backgroundName" align="center" label="个人主页名称" />
|
||||
<el-table-column prop="uid" align="center" label="用户uID" />
|
||||
<el-table-column prop="nick" align="center" label="用户昵称" />
|
||||
<el-table-column prop="status" align="center" label="个人主页状态" />
|
||||
<el-table-column prop="createTime" align="center" label="购买天数" />
|
||||
<el-table-column prop="days" align="center" label="有效时间" />
|
||||
<el-table-column prop="expireTime" align="center" label="过期时间" />
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@@ -70,7 +40,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
import { pesonalBackgroundListRecordByPage } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
// @ts-ignore
|
||||
import { dateFormat } from "@/utils/system-helper";
|
||||
// @ts-ignore
|
||||
@@ -85,29 +55,37 @@ export default {
|
||||
id: "",
|
||||
},
|
||||
// 表格
|
||||
tableData: [{ x: "x" }],
|
||||
tableData: [],
|
||||
// 分页
|
||||
total: 10, //总页数
|
||||
currentPage: 1, //页码
|
||||
pageSize: 10, //条数
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 查询接口
|
||||
getData() {
|
||||
this.loading = true;
|
||||
// get({}).then((res) => {
|
||||
// if (res.code == 200) {
|
||||
// this.loading = false;
|
||||
// } else {
|
||||
// ElMessage({
|
||||
// showClose: true,
|
||||
// message: res.message,
|
||||
// type: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
pesonalBackgroundListRecordByPage({
|
||||
erbanNo: this.inquire.id,
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.loading = false;
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.rows;
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 分页导航
|
||||
handleSizeChange() {
|
||||
|
@@ -38,8 +38,7 @@
|
||||
class="primary"
|
||||
type="primary"
|
||||
@click="
|
||||
operationDialog = true;
|
||||
operationValue.partitionId = '';
|
||||
operationValue.partitionVal = [];
|
||||
operationValue.nameZh = '';
|
||||
operationValue.nameEn = '';
|
||||
operationValue.nameAr = '';
|
||||
@@ -48,6 +47,13 @@
|
||||
operationValue.day = '';
|
||||
operationValue.imageUrl = '';
|
||||
operationValue.status = '';
|
||||
operationType = 1;
|
||||
filePreview: null; // 文件预览 URL
|
||||
isImage = false;
|
||||
isVideo = false;
|
||||
isSVGA = false;
|
||||
operationDialogTitle = '新增';
|
||||
operationDialog = true;
|
||||
"
|
||||
>新增</el-button
|
||||
>
|
||||
@@ -58,47 +64,116 @@
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="x" align="center" label="地区" />
|
||||
<el-table-column prop="x" align="center" label="名称" />
|
||||
<el-table-column prop="x" align="center" label="阿语名称" />
|
||||
<el-table-column prop="x" align="center" label="英语名称" />
|
||||
<el-table-column prop="x" align="center" label="土耳其名称" />
|
||||
<el-table-column prop="x" align="center" label="价格" />
|
||||
<el-table-column prop="x" align="center" label="有效期" />
|
||||
<el-table-column prop="x" align="center" label="图片">
|
||||
<el-table-column prop="partitionFlag" align="center" label="地区">
|
||||
<template v-slot="scope">
|
||||
{{ partitionDesc(scope.row.partitionFlag) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="中文名称">
|
||||
<template v-slot="scope">
|
||||
{{ jsonFun(scope.row.name).zh }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="阿语名称">
|
||||
<template v-slot="scope">
|
||||
{{ jsonFun(scope.row.name).ar }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="英语名称"
|
||||
><template v-slot="scope">
|
||||
{{ jsonFun(scope.row.name).en }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="土耳其名称"
|
||||
><template v-slot="scope">
|
||||
{{ jsonFun(scope.row.name).tr }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="图片">
|
||||
<template v-slot="scope">
|
||||
<el-image
|
||||
style="width: 200px; height: 200px"
|
||||
:src="scope.row.x"
|
||||
:src="scope.row.pic"
|
||||
:zoom-rate="1.1"
|
||||
:preview-src-list="[scope.row.x]"
|
||||
fit="scale-down"
|
||||
:preview-src-list="[scope.row.pic]"
|
||||
fit="contain"
|
||||
preview-teleported="true"
|
||||
hide-on-click-modal="true"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="x" align="center" label="状态">
|
||||
<el-table-column prop="" align="center" label="装扮动效图片类型">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.x }}
|
||||
{{
|
||||
scope.row.effectType == 0
|
||||
? "无"
|
||||
: scope.row.effectType == 1
|
||||
? "MP4"
|
||||
: "SVGA"
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="x" align="center" label="操作人" />
|
||||
<el-table-column prop="x" align="center" label="操作时间" />
|
||||
<el-table-column
|
||||
prop=""
|
||||
width="300"
|
||||
max-height="100"
|
||||
align="center"
|
||||
label="装扮动效图片"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<div v-if="scope.row.effectType == 0">无</div>
|
||||
<!-- 视频预览 -->
|
||||
<video
|
||||
v-if="scope.row.effectType == 1"
|
||||
:src="scope.row.effect"
|
||||
controls
|
||||
style="width: 300px; max-height: 300px; display: block"
|
||||
></video>
|
||||
<!-- SVGA 预览 -->
|
||||
<div
|
||||
v-if="scope.row.effectType == 2"
|
||||
:id="`svga-player${scope.row.id}`"
|
||||
style="width: 300px; max-height: 300px; display: block"
|
||||
>
|
||||
{{ initSVGAList(scope.row.effect, scope.row.id) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="状态">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.status == 1 ? "有效" : "无效" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" align="center" label="贵族限定">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.type == 1 ? "普通" : "贵族" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateTime" align="center" label="操作时间" />
|
||||
<el-table-column align="center" label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
@click="
|
||||
operationValue.partitionVal = partitionIdArr(
|
||||
scope.row.partitionFlag
|
||||
);
|
||||
operationValue.nameZh = jsonFun(scope.row.name).zh;
|
||||
operationValue.nameEn = jsonFun(scope.row.name).en;
|
||||
operationValue.nameAr = jsonFun(scope.row.name).ar;
|
||||
operationValue.nameTr = jsonFun(scope.row.name).tr;
|
||||
operationValue.imageUrl = scope.row.pic;
|
||||
operationValue.status = scope.row.status;
|
||||
operationType = 2;
|
||||
operationValueId = scope.row.id;
|
||||
operationDialogTitle = '编辑';
|
||||
filePreview: scope.row.effect; // 文件预览 URL
|
||||
scope.row.effectType == 1
|
||||
? (isVideo = true)
|
||||
: scope.row.effectType == 2
|
||||
? (isSVGA = true)
|
||||
: (isImage = true);
|
||||
operationValue.effectType = scope.row.effectType;
|
||||
initSVGA(scope.row.effect);
|
||||
operationDialog = true;
|
||||
operationValue.partitionId = scope.row.x;
|
||||
operationValue.nameZh = scope.row.x;
|
||||
operationValue.nameEn = scope.row.x;
|
||||
operationValue.nameAr = scope.row.x;
|
||||
operationValue.nameTr = scope.row.x;
|
||||
operationValue.price = scope.row.x;
|
||||
operationValue.day = scope.row.x;
|
||||
operationValue.imageUrl = scope.row.x;
|
||||
operationValue.status = scope.row.x;
|
||||
"
|
||||
class="primary"
|
||||
type="primary"
|
||||
@@ -106,7 +181,11 @@
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="send()"
|
||||
@click="
|
||||
sendDialog = true;
|
||||
sendObj.erbanNos = send.days = send.remark = null;
|
||||
sendObj.personalBackgroundId = scope.row.id;
|
||||
"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
@@ -115,14 +194,14 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 新增&操作弹窗 -->
|
||||
<!-- 新增&编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="operationDialog"
|
||||
:title="operationDialogTitle"
|
||||
width="28%"
|
||||
center
|
||||
>
|
||||
<div class="operation">
|
||||
<!-- <div class="operation">
|
||||
<span style="margin-right: 20px">地区</span>
|
||||
<el-select v-model="operationValue.partitionId" placeholder="请选择">
|
||||
<el-option
|
||||
@@ -133,6 +212,18 @@
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div> -->
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">地区</span>
|
||||
<el-checkbox-group
|
||||
v-model="operationValue.partitionVal"
|
||||
v-for="(val, i) in inquire.partitionArr"
|
||||
:key="i"
|
||||
>
|
||||
<el-checkbox style="margin-right: 10px" :label="val.id">{{
|
||||
val.desc
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">华语名称</span>
|
||||
@@ -166,7 +257,7 @@
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<!-- <div class="operation">
|
||||
<span style="margin-right: 20px">价格</span>
|
||||
<el-input
|
||||
v-model="operationValue.price"
|
||||
@@ -181,7 +272,7 @@
|
||||
style="width: 200px"
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="operation">
|
||||
<span class="left" style="margin-right: 20px">图片</span>
|
||||
<el-upload
|
||||
@@ -200,6 +291,56 @@
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">装扮动效图片类型</span>
|
||||
<el-select v-model="operationValue.effectType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in operationValue.effectTypeArr"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span class="left" style="margin-right: 20px">装扮动效图片</span>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="/admin/tencent/cos/upload/file"
|
||||
accept="image/*,.mp4,.svga"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess1"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:on-error="handleAvatarError"
|
||||
>
|
||||
<!-- 文件预览 -->
|
||||
<div style="margin-top: 20px">
|
||||
<!-- 图片预览 -->
|
||||
<img
|
||||
v-if="isImage"
|
||||
:src="filePreview"
|
||||
alt="Uploaded Image"
|
||||
style="max-width: 300px"
|
||||
/>
|
||||
|
||||
<!-- 视频预览 -->
|
||||
<video
|
||||
v-else-if="isVideo"
|
||||
:src="filePreview"
|
||||
controls
|
||||
style="max-width: 300px"
|
||||
></video>
|
||||
|
||||
<!-- SVGA 预览 -->
|
||||
<div
|
||||
v-else-if="isSVGA"
|
||||
:id="`svga-player`"
|
||||
style="width: 200px; height: 200px"
|
||||
></div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">状态</span>
|
||||
<el-select v-model="operationValue.status" placeholder="请选择">
|
||||
@@ -214,8 +355,21 @@
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="operationDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="operation()"> 确认 </el-button>
|
||||
<el-button
|
||||
@click="
|
||||
operationDialog = false;
|
||||
isImage = false;
|
||||
isVideo = false;
|
||||
isSVGA = false;
|
||||
"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="operation(type == 1 ? null : operationValueId)"
|
||||
>
|
||||
确认
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -231,18 +385,74 @@
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<!-- 赠送 -->
|
||||
<el-dialog v-model="sendDialog" title="赠送" width="28%" center>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">用户平台ID</span>
|
||||
<el-input
|
||||
v-model="sendObj.erbanNos"
|
||||
style="width: 200px"
|
||||
class="input"
|
||||
placeholder="多个请用英文“,”隔开"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">天数</span>
|
||||
<el-input
|
||||
v-model="sendObj.days"
|
||||
style="width: 200px"
|
||||
class="input"
|
||||
placeholder=""
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<span style="margin-right: 20px">备注</span>
|
||||
<el-input
|
||||
v-model="sendObj.remark"
|
||||
style="width: 200px"
|
||||
class="input"
|
||||
placeholder=""
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="sendDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="send()"> 确认 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listPartitionInfo } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
import {
|
||||
listPartitionInfo,
|
||||
pesonalBackgroundListByPage,
|
||||
pesonalBackgroundSaveOrUpdate,
|
||||
pesonalBackgroundListSend,
|
||||
} from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
|
||||
// @ts-ignore
|
||||
import { dateFormat } from "@/utils/system-helper";
|
||||
import { partitionDesc, partitionIdArr } from "@/utils/partitionDesc.js";
|
||||
// @ts-ignore
|
||||
import { ElMessage } from "element-plus";
|
||||
import SVGA from "svgaplayerweb";
|
||||
export default {
|
||||
name: "personalHomepageResourceManagement",
|
||||
created() {
|
||||
listPartitionInfo().then((res) => {
|
||||
this.inquire.partitionArr = this.operationValue.partitionArr = res.data;
|
||||
this.inquire.partitionId = this.inquire.partitionArr[0].id;
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
file: null, // 当前上传的文件对象
|
||||
filePreview: null, // 文件预览 URL
|
||||
isImage: false,
|
||||
isVideo: false,
|
||||
isSVGA: false,
|
||||
loading: false,
|
||||
//查询所需条件对象
|
||||
inquire: {
|
||||
@@ -252,14 +462,16 @@ export default {
|
||||
status: "",
|
||||
options: [
|
||||
{ label: "有效", value: 1 },
|
||||
{ label: "无效", value: 0 },
|
||||
{ label: "无效", value: 2 },
|
||||
{ label: "全部", value: 3 },
|
||||
],
|
||||
},
|
||||
operationDialog: false,
|
||||
operationType: null,
|
||||
operationDialogTitle: "新增%编辑",
|
||||
operationValueId: null,
|
||||
operationValue: {
|
||||
partitionId: "",
|
||||
partitionArr: [],
|
||||
partitionVal: [],
|
||||
nameZh: "",
|
||||
nameEn: "",
|
||||
nameAr: "",
|
||||
@@ -270,43 +482,113 @@ export default {
|
||||
status: "",
|
||||
options: [
|
||||
{ label: "有效", value: 1 },
|
||||
{ label: "无效", value: 0 },
|
||||
{ label: "无效", value: 2 },
|
||||
],
|
||||
effectType: "",
|
||||
effectTypeArr: [
|
||||
{ label: "无", value: 0 },
|
||||
{ label: "MP4", value: 1 },
|
||||
{ label: "SVGA", value: 2 },
|
||||
],
|
||||
},
|
||||
sendDialog: false,
|
||||
sendObj: {
|
||||
erbanNos: null,
|
||||
days: null,
|
||||
personalBackgroundId: null,
|
||||
remark: null,
|
||||
},
|
||||
// 表格
|
||||
tableData: [{ x: "x" }],
|
||||
tableData: [],
|
||||
// 分页
|
||||
total: 10, //总页数
|
||||
currentPage: 1, //页码
|
||||
pageSize: 10, //条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
listPartitionInfo().then((res) => {
|
||||
this.inquire.partitionArr = this.operationValue.partitionArr = res.data;
|
||||
// this.getData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
partitionDesc,
|
||||
partitionIdArr,
|
||||
// 查询接口
|
||||
getData() {
|
||||
this.loading = true;
|
||||
// get({}).then((res) => {
|
||||
// if (res.code == 200) {
|
||||
// this.loading = false;
|
||||
// } else {
|
||||
// ElMessage({
|
||||
// showClose: true,
|
||||
// message: res.message,
|
||||
// type: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
pesonalBackgroundListByPage({
|
||||
partitionId: this.inquire.partitionId,
|
||||
name: this.inquire.name,
|
||||
status: this.inquire.status,
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.loading = false;
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.list;
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
operation(id) {
|
||||
var obj = {};
|
||||
obj.partitionFlag = this.operationValue.partitionVal.reduce(
|
||||
(accumulator, currentValue) => accumulator + currentValue,
|
||||
0
|
||||
);
|
||||
obj.name = JSON.stringify({
|
||||
ar: this.operationValue.nameAr,
|
||||
zh: this.operationValue.nameZh,
|
||||
en: this.operationValue.nameEn,
|
||||
tr: this.operationValue.nameTr,
|
||||
});
|
||||
obj.pic = this.operationValue.imageUrl;
|
||||
obj.effectType = this.operationValue.effectType;
|
||||
obj.effect = this.filePreview;
|
||||
obj.status = this.operationValue.status;
|
||||
obj.type = 1; //资料卡类型 1:普通 2:贵族
|
||||
obj.id = id;
|
||||
console.log(obj);
|
||||
pesonalBackgroundSaveOrUpdate(obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.operationDialog = false;
|
||||
this.getData();
|
||||
this.isImage = false;
|
||||
this.isVideo = false;
|
||||
this.isSVGA = false;
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
send() {
|
||||
pesonalBackgroundListSend(this.sendObj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.sendDialog = false;
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "赠送成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeAvatarUpload() {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "上传中~",
|
||||
message: "上传中可能较慢,请等待上传成功后在进行下一步~",
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
@@ -319,13 +601,81 @@ export default {
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(file);
|
||||
this.ediObj.imageUrl1 = file.response.data;
|
||||
this.operationValue.imageUrl = file.response.data;
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "上传成功!",
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
handleAvatarSuccess1(res, files) {
|
||||
console.log(files.raw);
|
||||
const selectedFile = files.raw;
|
||||
if (!selectedFile) return;
|
||||
// 清除旧的预览数据
|
||||
this.resetFile();
|
||||
const fileType = selectedFile.type;
|
||||
const fileName = selectedFile.name;
|
||||
// 创建预览 URL
|
||||
console.log(res, 22222222222222222);
|
||||
this.filePreview = res.data;
|
||||
this.file = selectedFile;
|
||||
// 根据文件类型判断
|
||||
if (fileType.startsWith("image/")) {
|
||||
this.isImage = true;
|
||||
} else if (fileType === "video/mp4") {
|
||||
this.isVideo = true;
|
||||
} else if (fileName.endsWith(".svga")) {
|
||||
this.isSVGA = true;
|
||||
this.initSVGA(res.data);
|
||||
}
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "上传成功!",
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
resetFile() {
|
||||
this.file = null;
|
||||
this.filePreview = null;
|
||||
this.isImage = false;
|
||||
this.isVideo = false;
|
||||
this.isSVGA = false;
|
||||
// 清除 SVGA 容器内容
|
||||
const svgaPlayer = document.getElementById("svga-player");
|
||||
if (svgaPlayer) {
|
||||
svgaPlayer.innerHTML = "";
|
||||
}
|
||||
},
|
||||
initSVGA(url) {
|
||||
this.$nextTick(() => {
|
||||
const container = document.getElementById("svga-player");
|
||||
if (container) {
|
||||
const player = new SVGA.Player(container);
|
||||
const parser = new SVGA.Parser();
|
||||
parser.load(url, (videoItem) => {
|
||||
player.setVideoItem(videoItem);
|
||||
player.startAnimation();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
initSVGAList(url, id) {
|
||||
this.$nextTick(() => {
|
||||
const container = document.getElementById("svga-player" + id);
|
||||
if (container) {
|
||||
const player = new SVGA.Player(container);
|
||||
const parser = new SVGA.Parser();
|
||||
parser.load(url, (videoItem) => {
|
||||
player.setVideoItem(videoItem);
|
||||
player.startAnimation();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
jsonFun(val) {
|
||||
return JSON.parse(val);
|
||||
},
|
||||
// 分页导航
|
||||
handleSizeChange() {
|
||||
this.getData();
|
||||
@@ -366,4 +716,7 @@ export default {
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.avatar {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user