wanma-benteng
/
new-admin-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：酒道馆、烟酒馆、超市、省公司门店、联盟商家支持在管理后台绑定资源股东

This commit is contained in:
wuhui_zzw 2024-04-25 17:06:09 +08:00
parent 81dcd5541b
commit 6ef09bf3f8
2 changed files with 701 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
src/views/merchant/list/handle/merEditForm.vue
View File

@ -1,12 +1,6 @@
<template>
<el-form
ref="merDataField"
size="small"
:rules="ruleValidate"
:model="merData"
label-width="130px"
@submit.native.prevent
>
<div>
<el-form ref="merDataField" size="small" :rules="ruleValidate" :model="merData" label-width="130px" @submit.native.prevent>
<el-tabs v-loading="loading" type="border-card" v-model="activeName">
<el-tab-pane label="基本信息" name="detail">
<div class="section">
@ -153,17 +147,17 @@
<el-row :gutter="24" class="mt20">
<el-col v-if="!isAdd" :span="24">
<el-form-item label="店铺保证金：" prop="ot_margin">
<span>{{merData.is_margin == 0 ? '无' : merData.ot_margin+'元'}}</span>
<span>{{ merData.is_margin == 0 ? '无' : merData.ot_margin + '元' }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
<el-form-item label="保证金支付状态：">
<span>{{merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}</span>
<span>{{ merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
<el-form-item label="保证金余额：">
<span>{{merData.margin}}</span>
<span>{{ merData.margin }}</span>
</el-form-item>
</el-col>
<el-col :span="24">
@ -186,7 +180,8 @@
v-model="merData.commission_rate"
controls-position="right"
placeholder="请输入排序"
/>%
/>
%
</el-form-item>
</el-col>
@ -246,8 +241,10 @@
<el-row v-if="!isAdd" :gutter="24">
<el-col :span="12" style="position: relative;">
<el-form-item label="商品采集数：">
<el-input v-model="merData.copy_product_num" disabled ></el-input>
<el-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">修改</el-button>
<el-input v-model="merData.copy_product_num" disabled></el-input>
<el-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">
修改
</el-button>
</el-form-item>
</el-col>
</el-row>
@ -339,6 +336,7 @@
<el-option label="供应商" :value="2" />
<el-option label="烟酒店" :value="3" />
<el-option label="超市" :value="4" />
<el-option label="省公司门店" :value="5" />
</el-select>
</el-form-item>
</el-col>
@ -356,6 +354,26 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="mt20" v-if="defaultMerchantType != 2">
<el-col :span="24">
<el-form-item label="资源股东：" label-width="200">
<div class="top-user">
<div class="user-content" v-if="merData.shareholders">
<div class="user-avatar">
<img :src="merData.shareholders.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">{{ merData.shareholders.nickname }}</div>
<div class="user-id">{{ merData.shareholders.uid }}</div>
</div>
</div>
<el-button size="small" type="warning" round @click="addChildren(1, true)">切换用户</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<!--<el-row :gutter="24" class="mt20">
<el-col :span="24">
<el-form-item label="商户积分兑换平台积分比例：" prop="mer_integral_platform_rate" label-width="200">
@ -373,13 +391,71 @@
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</el-form>
<!-- 用户选择 -->
<el-dialog title="用户选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
<el-card class="box-card">
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
<div class="container">
<el-form inline size="small" label-width="80px">
<el-form-item label="">
<el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
<el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
<el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<!--表格信息-->
<el-table v-loading="userListLoading" :data="userTableData.data" style="width: 100%" size="mini">
<el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
<template slot-scope="scope">
<div class="user-content">
<div class="user-avatar">
<img :src="scope.row.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">{{ scope.row.nickname }}</div>
<div class="user-id">ID：{{ scope.row.uid }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
<!--操作按钮-->
<el-table-column label="操作" min-width="150" align="center">
<template slot-scope="scope">
<el-button type="success" effect="dark" @click="addStaffConfirm(scope.row)">选中</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div class="block">
<el-pagination
:page-sizes="[20, 40, 60, 80]"
:page-size="userTableFrom.limit"
:current-page="userTableFrom.page"
layout="total, sizes, prev, pager, next, jumper"
:total="userTableData.total"
@size-change="handleUserSizeChange"
@current-change="pageUserChange"
/>
</div>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button @click="userSelectVisible = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
<script>
import { merCategoryListApi } from '@/api/product'
import {getstoreTypeApi, merchantUpdate, merchantCreate, merchantListApi, brandListApi} from "@/api/merchant";
import { userLstApi } from '@/api/user'
export default {
props: {
merData: {
@ -406,6 +482,7 @@ export default {
}
}
return {
moren: require("@/assets/images/f.png"),
brand_list: {},
mer_list: {},
mar_type_name: '商户',
@ -430,6 +507,20 @@ export default {
// ],
mer_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
},
// 用户选择弹框
userSelectVisible: false,
userListLoading: true,
userTableFrom: {
page: 1,
limit: 20,
nickname: '',
phone: '',
uid: ''
},
userTableData: {
data: [],
total: 0,
}
};
},
filters: {},
@ -555,15 +646,61 @@ export default {
}).catch(res => {
this.$message.error(res.message);
});
}
},
// 用户选择器 - 弹框显示
addChildren(){
this.getUserList(1);
this.userSelectVisible = true;
},
// 用户选择器 - 弹框关闭
closeStaff() {
this.userSelectVisible = false;
},
// 用户选择器 - 获取用户列表及分页相关
getUserList(num) {
let _this = this;
this.userListLoading = true;
this.userTableFrom.page = num ? num : this.userTableFrom.page;
userLstApi(this.userTableFrom)
.then((res) => {
this.userTableData.data = res.data.list;
this.userTableData.total = res.data.count;
this.userListLoading = false;
})
.catch((res) => {
this.userListLoading = false;
this.$message.error(res.message);
});
},
pageUserChange(page) {
this.userTableFrom.page = page;
this.getUserList('');
},
handleUserSizeChange(val) {
this.userTableFrom.limit = val;
this.getUserList('');
},
// 用户选择器 - 选中用户
addStaffConfirm(item){
this.merData.resource_shareholders_uid = item.uid;
this.merData.shareholders = item;
this.closeStaff();
this.$forceUpdate();
},
},
};
</script>
<style lang="scss" scoped>
.selWidth{
width: 100%;
}
.container{
.selWidth{
width: 300px!important;
margin-bottom: 10px;
}
}
.el-tabs--border-card {
box-shadow: none;
border-bottom: none;
@ -642,4 +779,117 @@ export default {
line-height: 20px;
color: #9d9d9d;
}
.top-user{
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
margin-right: 30px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{}
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
width: max-content!important;
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
}
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{
width: 100%;
height: 25px;
line-height: 25px;
text-align: left;
font-size: 15px;
font-weight: bold;
line-height: calc(var(--user-content-height- * 65%));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
</style>

80
src/views/merchant/list/handle/merInfo.vue
View File

@ -195,11 +195,30 @@
<div class="value" v-else-if="merData.merchant_type == 2">供应商</div>
<div class="value" v-else-if="merData.merchant_type == 3">烟酒店</div>
<div class="value" v-else-if="merData.merchant_type == 4">超市</div>
<div class="value" v-else-if="merData.merchant_type == 4">省公司门店</div>
</li>
<li class="item" v-if="defaultMerchantType == 1">
<div>关联商户：</div>
<div class="value">{{ merData.merShop ? (merData.merShop.mer_name || '') : ''}}</div>
</li>
<li class="item" v-if="defaultMerchantType != 2">
<div>资源股东：</div>
<div class="value">
<div class="top-user">
<div class="user-content" v-if="merData.shareholders">
<div class="user-avatar">
<img :src="merData.shareholders.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">{{ merData.shareholders.nickname }}</div>
<div class="user-id">{{ merData.shareholders.uid }}</div>
</div>
</div>
</div>
</div>
</li>
<!--<li class="item">
<div>商户积分兑换平台积分比例：</div>
<div class="value">
@ -234,6 +253,7 @@ export default {
},
data() {
return {
moren: require("@/assets/images/f.png"),
mar_type_name: '',
loading: true,
merId: '',
@ -343,5 +363,65 @@ export default {
.gary {
color: #aaa;
}
.top-user{
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
margin-right: 30px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{}
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
width: max-content!important;
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
}
</style>