代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
${@view('./admin/head.html')}
</head>
<body class="${@hook_action('theme', 'admin')}">
<div id="app">
<div class="mm_card">
<div class="card_head arrow" @click="show_filter = !show_filter">
<h5>用户账户</h5>
</div>
<div class="card_body">
<div class="mm_form bar_filter" v-show="show_filter">
<div class="title">
<h5><span>筛选条件</span></h5>
</div>
<div class="mm_list list-3">
<div class="mm_item">
<control_input v-model="query.keyword" title="关键词" desc="用户名 / 昵称 / 手机号码"
@blur="search()" @keypress.enter.native="search()" />
</div>
<div class="mm_item">
<control_select v-model="query.state" title="账户状态" :options="$to_kv(arr_state)"
@change="search()" />
</div>
<div class="mm_item">
<button class="mm_btn btn_primary-x" @click="reset();search()">重置</button>
</div>
</div>
</div>
<div class="bar_action">
<h5><span>操作</span></h5>
<div class="btns">
<button class="mm_btn btn_primary-x" @click="add_show()">添加</button>
<button @click="batch_show()" class="mm_btn btn_primary-x"
v-bind:class="{ 'disabled': !selects }">批量修改</button>
<button class="mm_btn btn_primary plr-2" @click="$layout(0)" v-if="layout_style === 1">
<i class="fa fa-table"></i>
</button>
<button class="mm_btn btn_primary plr-2" @click="$layout(1)" v-else>
<i class="fa fa-list"></i>
</button>
</div>
<div class="btns_left">
<control_file class="mm_btn" type="excel" :func="import_db" v-if="url_import">
</control_file>
<button class="mm_btn" @click="export_db()" v-if="url_export">导出</button>
</div>
</div>
<div class="mm_table" :class="{ list_mode: layout_style }">
<table class="table-2">
<thead class="table-sm">
<tr>
<th class="th_selected"><input type="checkbox" :checked="select_state"
@click="select_all()" /></th>
<th class="th_id"><span>UID</span></th>
<th class="th_avatar">
<span>头像</span>
</th>
<th class="th_nickname">
<control_reverse title="昵称" v-model="query.orderby" field="nickname"
:func="search">
</control_reverse>
</th>
<th class="th_username">
<span>账号</span>
</th>
<th class="th_phone">
<control_reverse title="手机号码" v-model="query.orderby" field="phone"
:func="search">
</control_reverse>
</th>
<th class="th_name">
<control_reverse title="用户组" v-model="query.orderby" field="group_id"
:func="search">
</control_reverse>
</th>
<th class="th_name">
<control_reverse title="管理组" v-model="query.orderby" field="admin_id"
:func="search">
</control_reverse>
</th>
<th class="th_name">
<control_reverse title="管理等级" v-model="query.orderby" field="gm" :func="search">
</control_reverse>
</th>
<th class="th_name">
<control_reverse title="商家级别" v-model="query.orderby" field="mc" :func="search">
</control_reverse>
</th>
<th class="th_name">
<control_reverse title="会员级别" v-model="query.orderby" field="vip"
:func="search">
</control_reverse>
</th>
<th class="th_state">
<span>状态</span>
</th>
<th class="th_handle"><span>操作</span></th>
</tr>
</thead>
<tbody>
<tr v-for="(o, idx) in list" :key="idx" :class="{'active': select == idx}"
@click="selected(idx)">
<th class="th_selected">
<input type="checkbox" :checked="select_has(o[field])"
@click="select_change(o[field])" />
</th>
<td class="td_id">{{ o[field] }}</td>
<td class="td_avatar">
<img class="avatar" :src="o.avatar || '/img/avatar.png'" alt="头像"
onerror="this.src='/img/default.png'" />
</td>
<td>
<span class="label">昵称：</span><span>{{ o.nickname }}</span>
</td>
<td>
<span class="label">账号：</span><span>{{ o.username }}</span>
</td>
<td>
<span class="label">手机号码：</span><a
:href="'tel:' + o.phone"><span>{{ o.phone }}</span></a>
</td>
<td>
<span
class="label">用户组：</span><span>{{ $to_name(list_group, o.group_id, 'group_id') }}</span>
</td>
<td>
<span
class="label">管理组：</span><span>{{ $to_name(list_admin, o.admin_id, 'admin_id') }}</span>
</td>
<td>
<span class="label">管理等级：</span><span>{{ o.gm }}</span>
</td>
<td>
<span class="label">商家级别：</span><span>{{ o.mc }}</span>
</td>
<td>
<span class="label">会员级别：</span><span>{{ o.vip }}</span>
</td>
<td>
<span class="label">状态：</span><span
v-bind:class="arr_color[o.state]">{{arr_state[o.state] }}</span>
</td>
<td class="td_handle">
<button class="btn_primary" @click="edit_show(o)">修改</button>
<button class="btn_error" @click="del_show(o, field)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card_foot">
<div class="fl">
<control_select v-model="query.size" :options="$to_size()" @change="search()" />
</div>
<div class="fr">
<span class="mr">共 {{ count }} 条</span>
<span>当前</span>
<input type="number" class="pager_now" v-model.number="page_now" @blur="goTo(page_now)"
@change="page_change" />
<span>/{{ page_count }}页</span>
</div>
<control_pager display="2" v-model="query.page" :count="count / query.size" :func="goTo"
:icons="['首页', '上一页', '下一页', '尾页']"></control_pager>
</div>
</div>
<mm_modal v-model="show_batch" mask="true">
<div class="mm_card">
<div class="card_head">
<h5>批量修改</h5>
</div>
<div class="card_body pa">
<div class="mm_form">
<dl>
<dt>账户状态</dt>
<dd>
<control_select v-model="form.state" :options="$to_kv(arr_state)" />
</dd>
<dt>用户组</dt>
<dd>
<control_select v-model="form.group_id"
:options="$to_kv(list_group, 'group_id', 'name')" />
</dd>
<dt>管理组</dt>
<dd>
<control_select v-model="form.admin_id"
:options="$to_kv(list_admin, 'admin_id', 'name')" />
</dd>
<dt>管理等级</dt>
<dd>
<control_number v-model="form.gm" :min="0" :max="5" />
</dd>
<dt>商家级别</dt>
<dd>
<control_number v-model="form.mc" :min="0" :max="5" />
</dd>
<dt>会员级别</dt>
<dd>
<control_number v-model="form.vip" :min="0" :max="5" />
</dd>
</dl>
</div>
</div>
<div class="card_foot">
<div class="mm_group">
<button class="btn_default" @click="show_batch = false">取消</button>
<button class="btn_primary" type="button" @click="batchSet()">提交</button>
</div>
</div>
</div>
</mm_modal>
<mm_modal v-model="show" mask="true">
<div class="mm_card">
<div class="card_head">
<h5>{{ form[field] ? '修改' : '添加' }}账号</h5>
</div>
<div class="card_body pa">
<div class="mm_form">
<dl>
<dt v-if="form.user_id">头像</dt>
<dd v-if="form.user_id" style="position: relative;">
<control_upload_img width="10rem" height="10rem" name="avatar" type="text"
v-model="form.avatar" bg="/img/bg_avatar.png"></control_upload_img>
<div class="photograph center">
<span class="font_primary" style="margin-left: 1px;"
@click="show_photo = true">拍照</span>
</div>
</dd>
<dt>昵称</dt>
<dd>
<control_input v-model="form.nickname" :minlength="0" :maxlength="16"
placeholder="" />
</dd>
<dt class="required">账号</dt>
<dd>
<control_input v-model="form.username" :minlength="0" :maxlength="16"
placeholder="登录时用的账户" :required="true" />
</dd>
<dt class="required" v-if="!form.user_id">密码</dt>
<dd v-if="!form.user_id">
<control_input v-model="form.password" :minlength="0" :maxlength="16"
placeholder="登录时用的密码" :required="true" />
</dd>
<dt>手机号码</dt>
<dd>
<control_input v-model="form.phone" :minlength="0" :maxlength="11"
placeholder="找回密码或登录时使用" />
</dd>
<dt>用户组</dt>
<dd>
<control_select v-model="form.group_id"
:options="$to_kv(list_group, 'group_id', 'name', '0', false)" />
</dd>
<dt>管理组</dt>
<dd>
<control_select v-model="form.admin_id"
:options="$to_kv(list_admin, 'admin_id', 'name', '0')" />
</dd>
<dt>管理等级</dt>
<dd>
<control_number v-model="form.gm" :min="0" :max="5" />
</dd>
<dt>商家级别</dt>
<dd>
<control_number v-model="form.mc" :min="0" :max="5" />
</dd>
<dt>会员级别</dt>
<dd>
<control_number v-model="form.vip" :min="0" :max="5" />
</dd>
</dl>
</div>
</div>
<div class="card_foot">
<div class="mm_group">
<button class="btn_default" @click="show = false">取消</button>
<button class="btn_primary" @click="submit()">提交</button>
</div>
</div>
</div>
</mm_modal>
<mm_modal class="modal_photo" v-model="show_photo" mask="true">
<div class="mm_card">
<div class="card_head">
<span class="btn_close" @click="show_photo = false">关闭</span>
<h5><span>拍照</span></h5>
</div>
<div class="card_body pa">
<expand_photo @change="change_avatar" :width="320" :height="240" :save_width="480"
:save_height="600" @close="show_photo = false" v-if="show_photo"></expand_photo>
</div>
</div>
</mm_modal>
</div>
${@view('./admin/float.html')}
${@view('./admin/foot.html')}
<script src="/js/require/require.js"></script>
<script>
require({
baseUrl: '/src/',
paths: {
babel: '/js/babel.min',
polyfill: '/js/require/polyfill.min',
css: '/js/require/css.min',
text: '/js/require/text.min',
vue: '/js/require/mm-requirejs-vue',
jquery: '/js/jquery.min',
countup: '/js/countup.umd',
Vue: '/js/vue/vue2',
mm_sdk: '/js/mm/mm_sdk',
mm_vue: '/js/vue/mm_vue',
mm_ui: '/js/mm/mm_ui',
mm_vue_ui: '/js/vue/mm_vue_ui',
mixin_page: '/src/mixins/page',
},
config: {
// vue加载配置
'vue': {
'css': 'inject',
'templateVar': '__template__'
}
},
shim: {
polyfill: {
deps: ['babel']
},
countup: {
deps: ['jquery']
},
mm_sdk: {
deps: ['jquery']
},
mm_vue: {
deps: ['mm_sdk']
},
mm_ui: {
deps: ['mm_sdk']
},
mm_vue_ui: {
deps: ['mm_ui']
}
}
});
require(['mm_vue', 'mm_vue_ui', 'mixin_page', 'vue!/src/components/expand/expand_photo.vue'], function(mm_vue,
mm_vue_ui, mixin_page,
expand_photo) {
Vue.use(mm_vue);
Vue.use(mm_vue_ui);
var app = new Vue({
el: "#app",
mixins: [mixin_page],
components: {
expand_photo
},
data() {
return {
show_photo: false,
// 列表请求地址
url_get_list: "/apis/user/account",
url_del: "/apis/user/account?method=del&",
url_set: "/apis/user/account?method=set&",
url_add: "/apis/user/account?method=add&",
url_import: "/apis/user/account?method=import&",
url_export: "/apis/user/account?method=export&",
field: "user_id",
query_set: {
"user_id": ""
},
// 查询条件
query: {
//页码
page: 1,
//页面大小
size: 10,
// 用户ID
'user_id': 0,
// 账户状态——最小值
'state': '',
// 会员级别——最小值
'vip_min': 0,
// 会员级别——最大值
'vip_max': 0,
// 管理员级别——最小值
'gm_min': 0,
// 管理员级别——最大值
'gm_max': 0,
// 商家级别——最小值
'mc_min': 0,
// 商家级别——最大值
'mc_max': 0,
// 所在用户组
'group_id': '',
// 所在管理组
'admin_id': '',
// 推荐人ID
'referee_id': '',
// 上次登录时间——开始时间
'login_time_min': '',
// 上次登录时间——结束时间
'login_time_max': '',
// 手机认证——最小值
'phone_state_min': '',
// 手机认证——最大值
'phone_state_max': '',
// 用户名
'username': '',
// 昵称
'nickname': '',
// 邮箱认证——最小值
'email_state_min': '',
// 邮箱认证——最大值
'email_state_max': '',
// 创建时间——开始时间
'create_time_min': '',
// 创建时间——结束时间
'create_time_max': '',
// 关键词
'keyword': '',
//排序
orderby: ""
},
form: {
state: 0,
group_id: 0,
admin_id: 0,
gm: '',
mc: ''
},
//颜色
arr_color: ['', 'font_success', 'font_warning', 'font_default', 'font_primary',
'font_info', 'font_default'
],
// 账户状态
'arr_state': ["", "正常", "异常", "已冻结", "已注销"],
// 所在用户组
'list_group': [],
// 所在管理组
'list_admin': [],
// 推荐人
'list_account': [],
// 手机认证
'arr_phone_state': ["未认证", "审核中", "已认证"],
// 邮箱认证
'arr_email_state': ["未认证", "审核中", "已认证"],
// 视图模型
vm: {}
}
},
methods: {
change_avatar(src) {
this.form.avatar = src;
},
batch_show() {
this.form = {
state: 0,
group_id: 0,
admin_id: 0,
gm: ''
}
this.show_batch = true;
},
/**
* 获取所在用户组
* @param {query} 查询条件
*/
get_group(query) {
var _this = this;
if (!query) {
query = {
field: "group_id,name"
};
}
this.$get('~/apis/user/group?size=0', query, function(json) {
if (json.result) {
_this.list_group.clear();
_this.list_group.addList(json.result.list)
}
});
},
/**
* 获取所在管理组
* @param {query} 查询条件
*/
get_admin(query) {
var _this = this;
if (!query) {
query = {
field: "admin_id,name"
};
}
this.$get('~/apis/user/admin?size=0', query, function(json) {
if (json.result) {
_this.list_admin.clear();
_this.list_admin.addList(json.result.list)
}
});
},
/**
* 获取推荐人
* @param {query} 查询条件
*/
get_account(query) {
var _this = this;
if (!query) {
query = {
field: "user_id,nickname"
};
} else {
query.field = "user_id,nickname";
}
this.$get('~/apis/user/account?size=0', query, function(json) {
if (json.result) {
_this.list_account.clear();
_this.list_account.addList(json.result.list)
}
});
},
add_show() {
var str = (new Date()).toString().md5();
var username = str.substring(0, 8).toLocaleUpperCase();
var salt = str.substring(6, 12);
var invite_code = str.substring(6, 14);
this.form = {
user_id: 0,
group_id: 1,
nickname: "",
username,
phone: "",
salt,
invite_code,
password: "888888"
};
this.show = true;
},
edit_show(o) {
this.form = Object.assign({}, o);
this.show = true;
},
submit_before(param) {
delete param.login_time;
delete param.time_create;
delete param.time_update;
if (param.password) {
if (param.password.length < 16) {
param.password = (param.password.md5() + param.salt).md5();
}
}
return param;
},
get_list_after(json) {
if (json.result) {
var list = json.result.list;
var arr = list.map((o) => {
return o.user_id;
});
// 获取推荐人
this.get_account({
user_id: arr.join('|')
});
}
setTimeout(() => {
big_pic(".avatar");
}, 500)
}
},
created() {
// 获取所在用户组
this.get_group();
// 获取所在管理组
this.get_admin();
}
});
});
</script>
<style>
.modal_photo {
z-index: 100;
}
.photograph span:hover {
cursor: pointer;
filter: brightness(1.2);
}
.photograph {
position: absolute;
font-size: 0.875rem;
left: calc(100% - 0.25rem);
top: 50%;
transform: translate(0, -50%);
padding: 0 0.5rem;
white-space: nowrap;
}
.btn_close {
float: right;
font-size: 0.875rem;
color: var(--font_error);
cursor: pointer;
}
.btn_close:hover {
filter: brightness(1.5);
}
</style>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手