完成装扮商城版本需求

This commit is contained in:
dragon
2024-11-19 15:07:59 +08:00
parent 559fea9300
commit 02474473bf
5 changed files with 526 additions and 163 deletions

View File

@@ -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
});
};

View 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
}

View File

@@ -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() {

View File

@@ -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() {

View File

@@ -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>