|
|
@@ -1,49 +1,181 @@
|
|
|
<template>
|
|
|
- <cl-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
- <template #slot-tabs="{ scope }">
|
|
|
- <el-tabs class="liu-tabs" type="border-card">
|
|
|
- <el-tab-pane label="全部 (152)"></el-tab-pane>
|
|
|
- <el-tab-pane label="粉丝 (112)"></el-tab-pane>
|
|
|
- <el-tab-pane label="会员(82)"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </template>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <cl-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
+ <template #slot-tabs="{ scope }">
|
|
|
+ <el-tabs
|
|
|
+ class="liu-tabs"
|
|
|
+ type="border-card"
|
|
|
+ v-model="tabIndex"
|
|
|
+ @tab-click="handleClick"
|
|
|
+ >
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in tabsData"
|
|
|
+ :key="index"
|
|
|
+ :label="`${item.text}(${item.val})`"
|
|
|
+ :name="item.key"
|
|
|
+ ></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #table-column-avatarUrl="{scope}">
|
|
|
- <cl-avatar
|
|
|
- shape="square"
|
|
|
- :size="40"
|
|
|
- :src="scope.row.avatarUrl | default_avatar"
|
|
|
- :style="{ margin: 'auto' }"
|
|
|
- ></cl-avatar>
|
|
|
- </template>
|
|
|
+ <template #table-column-avatarUrl="{scope}">
|
|
|
+ <cl-avatar
|
|
|
+ shape="square"
|
|
|
+ :size="40"
|
|
|
+ :src="scope.row.avatarUrl | default_avatar"
|
|
|
+ :style="{ margin: 'auto' }"
|
|
|
+ ></cl-avatar>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #table-column-balance="{scope}">
|
|
|
- <span>{{ scope.row.userAsset.balance }}</span>
|
|
|
- </template>
|
|
|
+ <template #table-column-balance="{scope}">
|
|
|
+ <span>{{ scope.row.userAsset.balance }}</span>
|
|
|
+ </template>
|
|
|
|
|
|
- <template #table-column-growth="{scope}">
|
|
|
- <span>{{ scope.row.userAsset.growth }}</span>
|
|
|
- </template>
|
|
|
+ <template #table-column-growth="{scope}">
|
|
|
+ <span>{{ scope.row.userAsset.growth }}</span>
|
|
|
+ </template>
|
|
|
|
|
|
+ <!-- 充值 -->
|
|
|
+ <template #slot-recharge="{scope}">
|
|
|
+ <el-button type="text" @click="rechageDialog = true">充值</el-button>
|
|
|
+ </template>
|
|
|
+ <!-- 升级 -->
|
|
|
+ <template #slot-upgrade="{scope}">
|
|
|
+ <el-button type="text" @click="upgradDialog = true">升级</el-button>
|
|
|
+ </template>
|
|
|
+ <!-- 发货 -->
|
|
|
+ <template #slot-ship="{scope}">
|
|
|
+ <el-button type="text" @click="$message('开发中...')">发货</el-button>
|
|
|
+ </template>
|
|
|
+ </cl-crud>
|
|
|
<!-- 充值 -->
|
|
|
- <template #slot-recharge="{scope}">
|
|
|
- <el-button type="text">充值</el-button>
|
|
|
- </template>
|
|
|
+ <el-dialog title="充值" :visible.sync="rechageDialog" width="400px">
|
|
|
+ <div class="rechage-modal-content">
|
|
|
+ <el-form
|
|
|
+ :model="rechageForm"
|
|
|
+ :rules="rechageRules"
|
|
|
+ ref="rechageForm"
|
|
|
+ label-width="80px"
|
|
|
+ class="demo-form"
|
|
|
+ >
|
|
|
+ <el-form-item label="充值金额">
|
|
|
+ <el-input
|
|
|
+ v-model="rechageForm.rechargeAmount"
|
|
|
+ placeholder="充值金额"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码">
|
|
|
+ <el-input
|
|
|
+ v-model="rechageForm.confirmPassword"
|
|
|
+ placeholder="确认密码"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="rechageDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="rechageDialog = false"
|
|
|
+ >充值</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
<!-- 升级 -->
|
|
|
- <template #slot-upgrade="{scope}">
|
|
|
- <el-button type="text">升级</el-button>
|
|
|
- </template>
|
|
|
- <!-- 发货 -->
|
|
|
- <template #slot-ship="{scope}">
|
|
|
- <el-button type="text">发货</el-button>
|
|
|
- </template>
|
|
|
- </cl-crud>
|
|
|
+ <el-dialog title="升级" :visible.sync="upgradDialog" width="400px">
|
|
|
+ <div class="rechage-modal-content">
|
|
|
+ <el-form
|
|
|
+ :model="upgradForm"
|
|
|
+ :rules="upgradRules"
|
|
|
+ ref="upgradForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-form"
|
|
|
+ >
|
|
|
+ <el-form-item label="请选择等级">
|
|
|
+ <el-select v-model="upgradForm.member" size="small" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in levelData.list"
|
|
|
+ :key="index"
|
|
|
+ :label="`${item.level}`"
|
|
|
+ :value="item.level"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码">
|
|
|
+ <el-input
|
|
|
+ v-model="upgradForm.confirmPassword"
|
|
|
+ placeholder="确认密码"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="upgradDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="upgradDialog = false"
|
|
|
+ >充值</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // cl-crud
|
|
|
+ app: null,
|
|
|
+ tabIndex: '-1',
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ text: '全部',
|
|
|
+ key: '-1',
|
|
|
+ val: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '粉丝',
|
|
|
+ key: '1',
|
|
|
+ val: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '会员',
|
|
|
+ key: '2',
|
|
|
+ val: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // rechage
|
|
|
+ rechageDialog: false,
|
|
|
+ rechageForm: {
|
|
|
+ rechargeAmount: '',
|
|
|
+ confirmPassword: ''
|
|
|
+ },
|
|
|
+ rechageRules: {},
|
|
|
+ // upgrad
|
|
|
+ upgradDialog: false,
|
|
|
+ upgradForm: {
|
|
|
+ member: '',
|
|
|
+ confirmPassword: ''
|
|
|
+ },
|
|
|
+ upgradRules: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ levelData: 'level' })
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$store.dispatch('getLevel');
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
+ handleClick(tab, e) {
|
|
|
+ console.log(tab, e);
|
|
|
+ this.app.refresh({ type: this.tabIndex });
|
|
|
+ },
|
|
|
+ // crud
|
|
|
onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
ctx.service(this.$service.member)
|
|
|
.set('table', {
|
|
|
columns: [
|
|
|
@@ -111,14 +243,143 @@ export default {
|
|
|
layout: ['slot-recharge', 'slot-upgrade', 'slot-ship']
|
|
|
}
|
|
|
})
|
|
|
+ .set('upsert', {
|
|
|
+ props: {
|
|
|
+ width: '600px',
|
|
|
+ 'label-width': '120px'
|
|
|
+ },
|
|
|
+
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ prop: 'mobile',
|
|
|
+ label: '手机号码',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-input',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请填写手机号码'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ required: true,
|
|
|
+ message: '请填写手机号码'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'confirmMobile',
|
|
|
+ label: '确认手机号码',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-input',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请填写确认手机号码'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ required: true,
|
|
|
+ message: '请填写确认手机号码'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'balance',
|
|
|
+ label: '余额',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-input',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请填写余额'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ required: true,
|
|
|
+ message: '请填写余额'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'memberLevel',
|
|
|
+ label: '会员级别',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-select',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请选择'
|
|
|
+ },
|
|
|
+ options: this.levelData.list.map(e => {
|
|
|
+ e.label = e.level;
|
|
|
+ e.value = e.level;
|
|
|
+ return e;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ required: true,
|
|
|
+ message: '级别不能为空'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'realName',
|
|
|
+ label: '姓名',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-input',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '选填'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'confirmPassword',
|
|
|
+ label: '确认密码',
|
|
|
+ span: 24,
|
|
|
+ component: {
|
|
|
+ name: 'el-input',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请填写确认密码'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ placeholder: '请填写确认密码',
|
|
|
+ type: 'password'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '密码不能为空'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 6,
|
|
|
+ max: 16,
|
|
|
+ message: '密码长度在 6 到 16 个字符'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'tips',
|
|
|
+ component: (
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-warning"></i>
|
|
|
+ <span style="margin-left: 6px">
|
|
|
+ 添加后,申请会员时自动根据手机号识别客户,成长值、等级和余额会自动同步。
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
.set('layout', [
|
|
|
['slot-tabs'],
|
|
|
['search-key', 'flex1', 'refresh-btn', 'add-btn'],
|
|
|
['data-table'],
|
|
|
['flex1', 'pagination']
|
|
|
])
|
|
|
+ .on('refresh', async (params, { next }) => {
|
|
|
+ // 继续执行刷新
|
|
|
+ let { asset } = await next(params);
|
|
|
+ this.tabsData[0].val = asset.totalUser;
|
|
|
+ this.tabsData[1].val = asset.totalMember;
|
|
|
+ this.tabsData[2].val = asset.totalFans;
|
|
|
+ })
|
|
|
.done();
|
|
|
- app.refresh({ status: 0 });
|
|
|
+ app.refresh({ type: this.tabIndex });
|
|
|
}
|
|
|
}
|
|
|
};
|