rootandClaude Opus 5
e282bd23e8
node-sass 4.x cannot build on arm64/Node 16. Use sass with ::v-deep instead of /deep/, and only replace the server dist after the upload is unpacked and verified. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<template>
|
|
<div class="tag-box">
|
|
<!--操作栏-->
|
|
<div class="action-bar">
|
|
<el-input
|
|
v-model="params.uid"
|
|
placeholder="请输入用户ID"
|
|
clearable
|
|
size="small"
|
|
class="param-input"
|
|
></el-input>
|
|
<el-select
|
|
placeholder="请选择状态"
|
|
clearable
|
|
size="small"
|
|
v-model="params.status"
|
|
>
|
|
<el-option
|
|
:label="item.label"
|
|
:value="item.value"
|
|
v-for="item in statuses"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-search"
|
|
@click="getList('status')"
|
|
style="margin-right: 20px"
|
|
>搜索</el-button
|
|
>
|
|
</div>
|
|
<!--数据表格-->
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
border
|
|
v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
ref="multipleTable"
|
|
height="600"
|
|
>
|
|
<el-table-column prop="id" label="ID" align="center" min-width="210">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.id || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="eid"
|
|
label="兑换配置id"
|
|
align="center"
|
|
min-width="210"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.eid || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="uid" label="用户id" align="center" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.uid || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="用户头像"
|
|
align="center"
|
|
min-width="120"
|
|
prop="portrait"
|
|
>
|
|
<template slot-scope="scope">
|
|
<img-load
|
|
:width="'80px'"
|
|
:height="'60px'"
|
|
:src="imgUrl + scope.row.portrait"
|
|
>
|
|
</img-load>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="用户名称"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.name || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="tel"
|
|
label="用户电话"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.tel || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="用户地址"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.address || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="remark"
|
|
label="描述"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.remark || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="inKindName"
|
|
label="实物名称"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.inKindName || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="实物图片"
|
|
align="center"
|
|
min-width="120"
|
|
prop="img"
|
|
>
|
|
<template slot-scope="scope">
|
|
<img-load
|
|
:width="'80px'"
|
|
:height="'60px'"
|
|
:src="imgUrl + scope.row.img"
|
|
>
|
|
</img-load>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="状态"
|
|
align="center"
|
|
min-width="120"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag type="info" v-if="scope.row.status == 1">待发货</el-tag>
|
|
<el-tag type="warning" v-else-if="scope.row.status == 2"
|
|
>发货中</el-tag
|
|
>
|
|
<el-tag type="success" v-else-if="scope.row.status == 3"
|
|
>已发货</el-tag
|
|
>
|
|
<el-tag type="danger" v-else-if="scope.row.status == 4"
|
|
>拒绝发货</el-tag
|
|
>
|
|
<el-tag v-else>-</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updateAct"
|
|
label="操作账号"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.updateAct || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updateTime"
|
|
label="修改时间"
|
|
align="center"
|
|
min-width="180"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ changeTime(scope.row.updateTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createTime"
|
|
label="创建时间"
|
|
align="center"
|
|
min-width="180"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ changeTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
min-width="180"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.status == 1"
|
|
size="mini"
|
|
type="success"
|
|
icon="el-icon-edit"
|
|
@click="addAndEdit(scope.row)"
|
|
>审核</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<el-pagination
|
|
:page-sizes="[10, 15, 20, 30]"
|
|
:current-page="params.pageNumber"
|
|
:page-size="params.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
background
|
|
@size-change="changeSize"
|
|
@current-change="changeCurrent"
|
|
></el-pagination>
|
|
<!-- 新增、修改 -->
|
|
<el-dialog
|
|
:title="dialogTitle"
|
|
:visible.sync="dialogVisible"
|
|
width="530px"
|
|
@before-close="handleClose"
|
|
@close="handleClose"
|
|
>
|
|
<el-form :model="form" label-width="140px" ref="form">
|
|
<el-form-item label="状态" prop="status" style="width: 400px">
|
|
<el-select v-model="form.status">
|
|
<el-option
|
|
:label="item.label"
|
|
:value="item.value"
|
|
v-for="item in statuses2"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="拒绝原因"
|
|
prop="remark"
|
|
style="width: 400px"
|
|
v-if="form.status == 4"
|
|
>
|
|
<el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose" size="small">取 消</el-button>
|
|
<el-button type="primary" size="small" @click="onSubmit()"
|
|
>确 定</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import API from "@/api";
|
|
import { uniteDate } from "@/utils/validator.js";
|
|
import baseConfig from "@/utils/serverUrlConfig";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表格数据加载动画
|
|
loading: false,
|
|
// 列表数据
|
|
tableData: [],
|
|
total: 0,
|
|
params: {
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
status: undefined, // 状态
|
|
uid: undefined, // 用户id
|
|
},
|
|
imgUrl: baseConfig.imgUrl,
|
|
statuses: [
|
|
{
|
|
label: "待发货",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "发货中",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "已发货",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "拒绝发货",
|
|
value: 4,
|
|
},
|
|
],
|
|
statuses2: [
|
|
{
|
|
label: "发货中",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "已发货",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "拒绝发货",
|
|
value: 4,
|
|
},
|
|
],
|
|
dialogTitle: "",
|
|
dialogVisible: false,
|
|
form: {
|
|
id: undefined,
|
|
status: undefined, // 状态
|
|
remark: undefined, // 拒绝原因
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList(type) {
|
|
if (type === "status") {
|
|
this.params.pageNumber = 1;
|
|
}
|
|
API.getIntegralExchangeList(this.params)
|
|
.then((res) => {
|
|
if (res.code === 200 && res.data) {
|
|
this.tableData = res.data.list;
|
|
this.total = res.data.total;
|
|
} else {
|
|
this.tableData = [];
|
|
}
|
|
this.loading = false;
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 新增标签配置
|
|
addAndEdit(param) {
|
|
if (param === "add") {
|
|
this.dialogTitle = "新增";
|
|
} else {
|
|
this.dialogTitle = "编辑";
|
|
// 把数据回显给表单
|
|
this.form.id = param.id;
|
|
this.form.status = param.status;
|
|
this.form.remark = param.remark;
|
|
}
|
|
this.dialogVisible = true; // 打开新增、编辑对话框
|
|
},
|
|
// 新增、修改提交
|
|
onSubmit() {
|
|
if (this.dialogTitle === "新增") {
|
|
// this.add();
|
|
} else {
|
|
this.edit();
|
|
}
|
|
},
|
|
// 修改方法
|
|
edit() {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
this.form.type = Number(this.form.type);
|
|
API.updateIntegralExchange(this.form).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "编辑成功",
|
|
});
|
|
this.dialogVisible = false;
|
|
this.getList();
|
|
} else {
|
|
this.$message({
|
|
type: "error",
|
|
message: "编辑失败",
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 关闭窗口清除数据
|
|
handleClose() {
|
|
this.form.id = undefined;
|
|
this.form.status = undefined;
|
|
this.form.remark = undefined;
|
|
this.dialogVisible = false;
|
|
},
|
|
// 分页条数改变回调
|
|
changeSize(size) {
|
|
this.params.pageSize = size;
|
|
this.getList();
|
|
},
|
|
// 分页页码改变回调
|
|
changeCurrent(pageNumber) {
|
|
this.params.pageNumber = pageNumber;
|
|
this.getList();
|
|
},
|
|
// 更换时间格式
|
|
changeTime(time) {
|
|
return uniteDate(time);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dialog-footer {
|
|
position: relative;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%);
|
|
transform: translate(-50%);
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
display: flex;
|
|
}
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
.form-flex-box {
|
|
display: flex;
|
|
.el-form-item {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.tagBox {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|