679 lines
21 KiB
Vue
679 lines
21 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<div id="toolbar">
|
||
<el-form-item label="装扮类型" prop="dateCycle">
|
||
<el-select placeholder="请选择" v-model="dressTypeVal">
|
||
<el-option
|
||
v-for="(item, i) in dressTypeArr"
|
||
:key="i"
|
||
:label="item.desc"
|
||
:value="item.val"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="获得方式" prop="dateCycle">
|
||
<el-select placeholder="请选择" v-model="obtainWayVal">
|
||
<el-option
|
||
v-for="(item, i) in obtainWayArr"
|
||
:key="i"
|
||
:label="item.desc"
|
||
:value="item.val"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<div class="col-sm-12">
|
||
<button
|
||
id="btnAdd"
|
||
class="btn btn-default"
|
||
style="margin-right: 20px"
|
||
>
|
||
<i class="glyphicon glyphicon-plus"></i>增加
|
||
</button>
|
||
<button @click="initData" id="getData" class="btn btn-default">
|
||
查询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- .content -->
|
||
<div id="table"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div
|
||
class="modal fade"
|
||
id="roomTagModal"
|
||
tabindex="-1"
|
||
role="dialog"
|
||
aria-labelledby="modalLabel"
|
||
>
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button
|
||
type="button"
|
||
class="close"
|
||
data-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabel">新增</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal" id="addForm">
|
||
<input type="hidden" name="id" id="id" />
|
||
<div class="form-group">
|
||
<label for="dressType" class="col-sm-3 control-label"
|
||
>装扮类型:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<select name="dressType" id="dressType">
|
||
<option value="">-- 请选择 --</option>
|
||
<option value="0">头饰</option>
|
||
<option value="1">座驾</option>
|
||
<option value="2">铭牌</option>
|
||
<option value="3">资料卡</option>
|
||
<option value="4">聊天气泡</option>
|
||
<option value="5">个人装扮</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="obtainWay" class="col-sm-3 control-label"
|
||
>获得方式:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<select name="obtainWay" id="obtainWay">
|
||
<option value="">-- 请选择 --</option>
|
||
<option value="1">普通</option>
|
||
<option value="2">活动</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="txtBox">
|
||
<label for="dressId" class="col-sm-3 control-label"
|
||
>装扮id<font color="red">*</font>：</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<input
|
||
type="text"
|
||
class="form-control validate[required]"
|
||
name="dressId"
|
||
id="dressId"
|
||
placeholder="请输入对应的装扮id"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dressSeq" class="col-sm-3 control-label"
|
||
>展示排序<font color="red">*</font>：</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<input
|
||
type="text"
|
||
class="form-control validate[required]"
|
||
name="dressSeq"
|
||
id="dressSeq"
|
||
placeholder="数字小的排前面，必填"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dressPrice" class="col-sm-3 control-label"
|
||
>装扮价格:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<input
|
||
type="text"
|
||
class="form-control validate[required]"
|
||
name="dressPrice"
|
||
id="dressPrice"
|
||
placeholder="请输入价格"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dressDay" class="col-sm-3 control-label"
|
||
>有效期（天）:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<input
|
||
type="text"
|
||
class="form-control validate[required]"
|
||
name="dressDay"
|
||
id="dressDay"
|
||
placeholder="请输入天数"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dressLimitStatus" class="col-sm-3 control-label"
|
||
>装扮限时状态:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<select name="dressType" id="dressLimitStatus">
|
||
<option value="0">是</option>
|
||
<option value="1">否</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="vipLimit" class="col-sm-3 control-label"
|
||
>贵族限定:</label
|
||
>
|
||
<div class="col-sm-9">
|
||
<select name="dressType" id="vipLimit">
|
||
<option value="0">无限制</option>
|
||
<option value="1">VIP1</option>
|
||
<option value="2">VIP2</option>
|
||
<option value="3">VIP3</option>
|
||
<option value="4">VIP4</option>
|
||
<option value="5">VIP5</option>
|
||
<option value="6">VIP6</option>
|
||
<option value="7">VIP7</option>
|
||
<option value="8">VIP8</option>
|
||
<option value="9">VIP9</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||
关闭
|
||
</button>
|
||
<button type="button" class="btn btn-primary" id="add">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from "@/utils/bootstrap-table-helper";
|
||
import { serverError } from "@/utils/maintainer";
|
||
|
||
export default {
|
||
name: "DressShopAdminView",
|
||
data() {
|
||
return {
|
||
dressTypeVal: "",
|
||
dressTypeArr: [
|
||
{ desc: "全部", val: "" },
|
||
{ desc: "头饰", val: "0" },
|
||
{ desc: "座驾", val: "1" },
|
||
{ desc: "铭牌", val: "2" },
|
||
{ desc: "资料卡", val: "3" },
|
||
{ desc: "聊天气泡", val: "4" },
|
||
{ desc: "个人装扮", val: "5" },
|
||
],
|
||
obtainWayVal: "",
|
||
obtainWayArr: [
|
||
{ desc: "全部", val: "" },
|
||
{ desc: "普通", val: "1" },
|
||
{ desc: "活动", val: "2" },
|
||
],
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
var dressTypeVal = this.dressTypeVal;
|
||
var obtainWayVal = this.obtainWayVal;
|
||
$("#table").bootstrapTable("destroy");
|
||
$("#table").bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: "id",
|
||
title: "ID",
|
||
align: "center",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "dressId",
|
||
title: "装扮id",
|
||
align: "center",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "name.zh",
|
||
title: "装扮名称",
|
||
align: "left",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "name.ar",
|
||
title: "阿语装扮名称",
|
||
align: "left",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "name.en",
|
||
title: "英语装扮名称",
|
||
align: "left",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "pic",
|
||
title: "装扮图片",
|
||
align: "left",
|
||
valign: "middle",
|
||
width: "10%",
|
||
formatter: function (val, row, index) {
|
||
if (null != val && val != "") {
|
||
return (
|
||
'<img src="' +
|
||
val +
|
||
'" alt="" style="width: 30px; height: 30px;">'
|
||
);
|
||
}
|
||
return "-";
|
||
},
|
||
},
|
||
{
|
||
field: "dressType",
|
||
title: "装扮类型",
|
||
align: "center",
|
||
width: "5%",
|
||
valign: "middle",
|
||
formatter: function (val, row, index) {
|
||
if (val == "0") {
|
||
return "头饰";
|
||
} else if (val == "1") {
|
||
return "座驾";
|
||
} else if (val == "2") {
|
||
return "铭牌";
|
||
} else if (val == "3") {
|
||
return "资料卡";
|
||
} else if (val == "4") {
|
||
return "聊天气泡";
|
||
} else if (val == "5") {
|
||
return "个人装扮";
|
||
} else {
|
||
return "-";
|
||
}
|
||
},
|
||
},
|
||
{
|
||
field: "obtainWay",
|
||
title: "获得方式",
|
||
align: "center",
|
||
width: "5%",
|
||
valign: "middle",
|
||
formatter: function (val, row, index) {
|
||
if (val == "1") {
|
||
return "普通";
|
||
} else if (val == "2") {
|
||
return "活动";
|
||
} else {
|
||
return "-";
|
||
}
|
||
},
|
||
},
|
||
{
|
||
field: "dressSeq",
|
||
title: "装扮排序",
|
||
align: "center",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "dressPrice",
|
||
title: "装扮展示价值",
|
||
align: "center",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "dressDay",
|
||
title: "装扮有效期（天）",
|
||
align: "center",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "buyNum",
|
||
title: "购买数量",
|
||
align: "购买数量 ",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "userDonateNum",
|
||
title: "购买赠送用户数量",
|
||
align: "购买数量",
|
||
valign: "middle",
|
||
width: "10%",
|
||
},
|
||
{
|
||
field: "dressLimitStatus",
|
||
title: "装扮限时状态",
|
||
align: "center",
|
||
width: "5%",
|
||
valign: "middle",
|
||
formatter: function (val, row, index) {
|
||
if (val == "0") {
|
||
return "有效";
|
||
} else {
|
||
return "无效";
|
||
}
|
||
},
|
||
},
|
||
{
|
||
field: "vipLimit",
|
||
title: "贵族限定",
|
||
align: "center",
|
||
width: "5%",
|
||
valign: "middle",
|
||
formatter: function (val, row, index) {
|
||
if (val == "1") {
|
||
return "VIP1";
|
||
}
|
||
if (val == "2") {
|
||
return "VIP2";
|
||
}
|
||
if (val == "3") {
|
||
return "VIP3";
|
||
}
|
||
if (val == "4") {
|
||
return "VIP4";
|
||
}
|
||
if (val == "5") {
|
||
return "VIP5";
|
||
}
|
||
if (val == "6") {
|
||
return "VIP6";
|
||
}
|
||
if (val == "7") {
|
||
return "VIP7";
|
||
}
|
||
if (val == "8") {
|
||
return "VIP8";
|
||
}
|
||
if (val == "9") {
|
||
return "VIP9";
|
||
} else {
|
||
return "无限制";
|
||
}
|
||
},
|
||
},
|
||
{
|
||
field: "id",
|
||
title: "操作",
|
||
align: "center",
|
||
width: "10%",
|
||
formatter: function (val, row, index) {
|
||
return (
|
||
'<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' +
|
||
val +
|
||
">" +
|
||
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
|
||
' <button class="btn btn-sm btn-danger opt-remove" data-id=' +
|
||
val +
|
||
" data-new-status=" +
|
||
2 +
|
||
'><i class="glyphicon glyphicon-remove"></i>删除</button>'
|
||
);
|
||
},
|
||
},
|
||
],
|
||
undefinedText: "-",
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 50,
|
||
pagination: true,
|
||
pageList: [20, 50, 100],
|
||
search: false,
|
||
sidePagination: "server", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams(params) {
|
||
//设置查询参数
|
||
var param = {
|
||
pageNum: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
dressType: dressTypeVal,
|
||
obtainWay: obtainWayVal,
|
||
};
|
||
return param;
|
||
},
|
||
ajax: function (request) {
|
||
//使用ajax请求
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "/admin/dress/shop/list",
|
||
contentType: "application/json;charset=utf-8",
|
||
dataType: "json",
|
||
data: request.data,
|
||
success: function (res) {
|
||
apiResult(res);
|
||
console.log(res);
|
||
request.success({
|
||
total: res.data.total,
|
||
rows: res.data.rows.map((i) => {
|
||
let value = i.name;
|
||
if (value.startsWith("{") && value.endsWith("}")) {
|
||
i.name = JSON.parse(i.name);
|
||
} else {
|
||
i.name = {
|
||
zh: i.name,
|
||
ar: i.name,
|
||
en: i.name,
|
||
};
|
||
}
|
||
return i;
|
||
}),
|
||
});
|
||
},
|
||
error: function (req) {
|
||
serverError(req);
|
||
},
|
||
});
|
||
},
|
||
toolbar: "#toolbar",
|
||
onLoadSuccess: function () {
|
||
//加载成功时执行
|
||
console.log("load success");
|
||
},
|
||
onLoadError: function () {
|
||
//加载失败时执行
|
||
console.log("load fail");
|
||
},
|
||
});
|
||
|
||
// 查询刷新
|
||
$("#btnSearch").on("click", function () {
|
||
TableHelper.doRefresh("#table");
|
||
});
|
||
|
||
//新建标签
|
||
$("#btnAdd").click(function () {
|
||
clearModal();
|
||
$("#roomTagModal").modal("show");
|
||
});
|
||
|
||
$("#add").click(function () {
|
||
var id = $("#id").val();
|
||
var dressType = $("#dressType").val();
|
||
var obtainWay = $("#obtainWay").val();
|
||
var dressId = $("#dressId").val();
|
||
var dressSeq = $("#dressSeq").val();
|
||
var dressPrice = $("#dressPrice").val();
|
||
var dressDay = $("#dressDay").val();
|
||
var dressLimitStatus = $("#dressLimitStatus").val();
|
||
var vipLimit = $("#vipLimit").val();
|
||
|
||
if ($("#addForm").validationEngine("validate")) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/dress/shop/saveOrUpdate",
|
||
data: {
|
||
id: id,
|
||
dressId: dressId,
|
||
dressType: dressType,
|
||
obtainWay: obtainWay,
|
||
dressSeq: dressSeq,
|
||
dressPrice: dressPrice,
|
||
dressDay: dressDay,
|
||
dressLimitStatus: dressLimitStatus,
|
||
vipLimit: vipLimit,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.code == 200) {
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal("show");
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTagModal").modal("hide");
|
||
} else {
|
||
$("#tipMsg").text("保存失败." + json.message);
|
||
$("#tipModal").modal("show");
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTagModal").modal("hide");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
$("#table").on("click", ".opt-edit", function () {
|
||
var id = $(this).attr("data-id");
|
||
clearModal();
|
||
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/dress/shop/getById",
|
||
data: { id: id },
|
||
dataType: "json",
|
||
success: function (res) {
|
||
var json = res.data;
|
||
if (json) {
|
||
$("#id").val(id);
|
||
$("#dressId").val(json.dressId);
|
||
$("#dressType").val(json.dressType);
|
||
$("#obtainWay").val(json.obtainWay);
|
||
$("#dressSeq").val(json.dressSeq);
|
||
$("#dressPrice").val(json.dressPrice);
|
||
$("#dressDay").val(json.dressDay);
|
||
$("#dressLimitStatus").val(json.dressLimitStatus);
|
||
$("#vipLimit").val(json.vipLimit);
|
||
// 打开编辑弹窗
|
||
$("#roomTagModal").modal("show");
|
||
$("#modalLabel").text("编辑");
|
||
} else {
|
||
$("#tipMsg").text("获取信息出错");
|
||
$("#tipModal").modal("show");
|
||
}
|
||
},
|
||
});
|
||
});
|
||
|
||
$("#table").on("click", ".opt-remove", function () {
|
||
var id = $(this).attr("data-id");
|
||
|
||
if (
|
||
confirm("你确认删除该记录吗? \r\n 删除后再也不能找回，请谨慎操作！")
|
||
) {
|
||
const requestParam = {
|
||
id: id,
|
||
};
|
||
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/dress/shop/delById",
|
||
data: requestParam,
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
success: function (json) {
|
||
if (json.code == 200) {
|
||
$("#tipMsg").text("修改成功");
|
||
$("#tipModal").modal("show");
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("修改失败." + json.message);
|
||
$("#tipModal").modal("show");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
function apiResult(json) {
|
||
if (json.code == 200 && json.message == "success") {
|
||
return true;
|
||
}
|
||
$("#tipMsg").text("请求失败，错误信息：" + json.message);
|
||
$("#tipModal").modal("show");
|
||
return false;
|
||
}
|
||
|
||
$("#iconBtn").on("click", function () {
|
||
if ($("#iconFile").val() == "") {
|
||
$("#tipMsg").text("上传图片为空");
|
||
$("#tipModal").modal("show");
|
||
return;
|
||
}
|
||
$.ajaxFileUpload({
|
||
fileElementId: "iconFile", //需要上传的文件域的ID，即<input type="file">的ID。
|
||
url: "/admin/upload/img", //后台方法的路径
|
||
type: "post", //当要提交自定义参数时，这个参数要设置成post
|
||
dataType: "json", //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
|
||
secureuri: false, //是否启用安全提交，默认为false。
|
||
async: true, //是否是异步
|
||
success: function (json) {
|
||
//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
|
||
if (json.path) {
|
||
$("#iconUrl").val(json.path);
|
||
$("#iconImgUrl").attr("src", json.path);
|
||
|
||
console.log(json.path);
|
||
} else {
|
||
$("#tipMsg").text(json.msg);
|
||
$("#tipModal").modal("show");
|
||
}
|
||
},
|
||
error: function (data, status, e) {
|
||
//提交失败自动执行的处理函数。
|
||
console.error(e);
|
||
},
|
||
});
|
||
});
|
||
|
||
function clearModal() {
|
||
$("#iconImgUrl").attr("src", "");
|
||
|
||
$("#addForm")
|
||
.find("input[type=text],input[type=hidden],input[type=file]")
|
||
.each(function () {
|
||
$(this).val("");
|
||
});
|
||
|
||
$("#type").val(1);
|
||
}
|
||
|
||
$("#type").change(function () {
|
||
var optVal = $(this).val();
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |