增加转盘抽奖页面和编辑
This commit is contained in:
parent
00280e133a
commit
d558c99018
|
|
@ -27,7 +27,7 @@ function get(id) {
|
|||
params: data
|
||||
})
|
||||
}
|
||||
function update(updatedata) {
|
||||
function update(data) {
|
||||
return $http({
|
||||
url: 'discSpinning/updateDiscSpinning',
|
||||
method: 'post',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
v-model="url"
|
||||
action=""
|
||||
:auto-upload="false"
|
||||
:http-request="onFileSubmit"
|
||||
:onChange="onFileChange"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<video
|
||||
v-if="url"
|
||||
:src="url"
|
||||
class="avatar"
|
||||
controls="controls"
|
||||
style="width: 200px; height: 148px"
|
||||
>
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
|
||||
<el-progress
|
||||
type="circle"
|
||||
v-if="percentage > 0 && percentage <= 100"
|
||||
:percentage="percentage"
|
||||
color="#efefef"
|
||||
></el-progress>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
import OSS from "@/utils/oss-upload.js";
|
||||
import { $getCredentials } from "@/api/oss.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: "",
|
||||
ossClient: undefined,
|
||||
percentage: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initOssClient();
|
||||
},
|
||||
methods: {
|
||||
async onFileChange(data) {
|
||||
console.log(data);
|
||||
const date = new Date();
|
||||
const start =
|
||||
date.getFullYear() +
|
||||
"" +
|
||||
(date.getMonth() * 1 + 1) +
|
||||
"" +
|
||||
date.getDate();
|
||||
const houzhui = "." + data.name.substr(data.name.lastIndexOf(".") + 1);
|
||||
const name = start + "/" + getUUID() + houzhui;
|
||||
const fileRes = await this.ossClient.partUpload(name, data.raw, (p) => {
|
||||
this.percentage = Math.floor(p * 100);
|
||||
// 这里可以根据进度做相应的处理，例如更新UI等
|
||||
});
|
||||
console.log(fileRes);
|
||||
if (!fileRes) {
|
||||
this.percentage = 0;
|
||||
this.$notify({
|
||||
title: "失败",
|
||||
message: `上传阿里云失败`,
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (fileRes.name == "cancel") {
|
||||
return;
|
||||
}
|
||||
this.url = fileRes.replace(
|
||||
"https://djvideo.oss-cn-shanghai.aliyuncs.com/",
|
||||
"https://duanju.hnsiyao.cn/"
|
||||
);
|
||||
},
|
||||
onFileSubmit(data) {
|
||||
console.log("data");
|
||||
console.log(data);
|
||||
},
|
||||
async initOssClient() {
|
||||
console.log("initOssClient");
|
||||
const { data } = await $getCredentials();
|
||||
if (data.code == 0) {
|
||||
const res = data.data;
|
||||
console.log(res);
|
||||
this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -7,21 +7,21 @@
|
|||
:close-on-click-modal="true"
|
||||
>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="描述">
|
||||
<el-form-item label="名称" required>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" required>
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio label="1">谢谢惠顾</el-radio>
|
||||
<el-radio label="2">红包</el-radio>
|
||||
<el-radio label="9">其他</el-radio>
|
||||
<el-radio :label="1">谢谢惠顾</el-radio>
|
||||
<el-radio :label="2">红包</el-radio>
|
||||
<el-radio :label="3">物品</el-radio>
|
||||
<!-- <el-radio label="9">其他</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="红包金额比例" v-if="form.type=='2'">
|
||||
<el-input-number v-model="form.ratio"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="中奖概率" v-if="form.type=='2'">
|
||||
<el-input-number v-model="form.odds"></el-input-number>
|
||||
|
||||
<el-form-item label="中奖概率" required>
|
||||
<el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
|
||||
<span>%</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片上传">
|
||||
<el-upload
|
||||
|
|
@ -32,11 +32,7 @@
|
|||
:on-success="uploadSuccess"
|
||||
>
|
||||
<div class="upload-file-box">
|
||||
<img
|
||||
v-if="form.url"
|
||||
:src="form.url"
|
||||
class="avatar"
|
||||
/>
|
||||
<img v-if="form.url" :src="form.url" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
|
@ -61,9 +57,8 @@ export default {
|
|||
form: {
|
||||
name: "",
|
||||
url: "",
|
||||
ratio:1,
|
||||
type:'1',
|
||||
odds:0
|
||||
type: 1,
|
||||
odds: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -72,18 +67,36 @@ export default {
|
|||
this.form.url = file.data;
|
||||
},
|
||||
open(item) {
|
||||
console.log(item);
|
||||
this.dialogVisible = true;
|
||||
this.item = item;
|
||||
this.form = {
|
||||
...item,
|
||||
};
|
||||
},
|
||||
diaClose() {
|
||||
this.dialogVisible = false;
|
||||
this.form = {
|
||||
name: "",
|
||||
url: "",
|
||||
type: 1,
|
||||
odds: 0,
|
||||
};
|
||||
},
|
||||
async confirm() {
|
||||
if (!this.form.name) {
|
||||
return this.$message.error("描述不能为空");
|
||||
return this.$message.error("名称不能为空");
|
||||
}
|
||||
if (this.form.odds === "") {
|
||||
return this.$message.error("中奖概率不能为空！");
|
||||
}
|
||||
const { name, url, type, odds, id } = this.form;
|
||||
const { data } = await $disc.update({ name, url, type, odds, id });
|
||||
if (data.code == 0) {
|
||||
this.$message.success("修改成功");
|
||||
this.$emit("refresh");
|
||||
this.diaClose();
|
||||
}
|
||||
const res = await $disc.add(this.form);
|
||||
console.log(res);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -95,13 +108,19 @@ export default {
|
|||
::v-deep .el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
.upload-file-box{
|
||||
border-radius: 6px; width: 148px; height: 148px;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c0c4cc;
|
||||
img{
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.upload-file-box {
|
||||
border-radius: 6px;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c0c4cc;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1726,7 +1726,6 @@
|
|||
<script>
|
||||
import OSS from "@/utils/oss-upload.js";
|
||||
import { $getCredentials } from "@/api/oss.js";
|
||||
import md5 from "js-md5";
|
||||
|
||||
// 加密结果：aa888a86dca6e9d5ae216c23070e8c47
|
||||
import { quillEditor } from "vue-quill-editor";
|
||||
|
|
|
|||
Loading…
Reference in New Issue