|
|
@@ -57,10 +57,12 @@
|
|
|
</el-col>
|
|
|
<el-col :md="12" :sm="12">
|
|
|
<div class="ele-form-actions">
|
|
|
- <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search"
|
|
|
- class="ele-btn-icon">查询</el-button>
|
|
|
- <el-button @click="handleReset">重置</el-button>
|
|
|
- </div>
|
|
|
+ <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search"
|
|
|
+ class="ele-btn-icon">查询</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ <el-button type="success" @click="showAdd" icon="el-icon-plus"
|
|
|
+ v-if="permission.includes('sys:store:add')">新增商家</el-button>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
@@ -82,6 +84,11 @@
|
|
|
<el-table-column prop="category_name" label="商家分类" min-width="120" show-overflow-tooltip />
|
|
|
<el-table-column prop="real_name" label="联系姓名" min-width="120" show-overflow-tooltip />
|
|
|
<el-table-column prop="phone" label="电话" min-width="130" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="bonus_rate" label="佣金比例" min-width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.bonus_rate || 0 }}%</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="order_count" label="累计订单销量" min-width="130" show-overflow-tooltip />
|
|
|
<el-table-column prop="order_total" label="累计销售额" min-width="130" show-overflow-tooltip />
|
|
|
<el-table-column prop="create_time" label="入驻时间" min-width="160" show-overflow-tooltip />
|
|
|
@@ -108,6 +115,8 @@
|
|
|
<template slot-scope="{row}">
|
|
|
<el-link @click="showInfo(row)" icon="el-icon-view" type="primary" :underline="false"
|
|
|
v-if="permission.includes('store:store:index')">详情</el-link>
|
|
|
+ <el-link @click="showEdit(row)" icon="el-icon-edit" type="warning" :underline="false"
|
|
|
+ v-if="permission.includes('sys:store:edit')">编辑</el-link>
|
|
|
<el-link @click="showConfirm(row)" icon="el-icon-check" type="success" :underline="false"
|
|
|
v-if="row.status == STORE_STATUS.PENDING && permission.includes('sys:store:edit')">审核</el-link>
|
|
|
<el-link @click="setStatus(row)" icon="el-icon-switch-button"
|
|
|
@@ -125,78 +134,120 @@
|
|
|
</ele-data-table>
|
|
|
</el-card>
|
|
|
|
|
|
- <!-- 详情弹窗 -->
|
|
|
- <el-dialog title="商家详情" :visible.sync="showInfoDialog" width="800px" @closed="infoForm = {}"
|
|
|
- :destroy-on-close="true" top="20px" :close-on-click-modal="false">
|
|
|
- <el-form :model="infoForm" label-width="120px" v-if="infoForm.id">
|
|
|
- <el-row :gutter="15">
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="商家ID:">
|
|
|
- <span>{{ infoForm.id }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="店铺名称:">
|
|
|
- <span>{{ infoForm.name }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="联系姓名:">
|
|
|
- <span>{{ infoForm.real_name }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="联系电话:">
|
|
|
- <span>{{ infoForm.phone }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="商家分类:">
|
|
|
- <span>{{ infoForm.category_name || '未分类' }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="24">
|
|
|
- <el-form-item label="所在地址:">
|
|
|
- <span>{{ infoForm.address || '未填写' }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="24" v-if="infoForm.logo">
|
|
|
- <el-form-item label="门头照:">
|
|
|
- <el-image :src="infoForm.logo" style="width: 200px; height: auto;"
|
|
|
- :preview-src-list="[infoForm.logo]" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="入驻时间:">
|
|
|
- <span>{{ infoForm.create_time }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="12">
|
|
|
- <el-form-item label="商家状态:">
|
|
|
- <ele-dot :type="getStatusType(infoForm.status)" :text="getStatusText(infoForm.status)" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="24" v-if="infoForm.business_license">
|
|
|
- <el-form-item label="营业执照:">
|
|
|
- <el-image :src="infoForm.business_license" style="width: 200px; height: auto;"
|
|
|
- :preview-src-list="[infoForm.business_license]" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="24" v-if="infoForm.other_photo">
|
|
|
- <el-form-item label="其他证件照:">
|
|
|
- <el-image :src="infoForm.other_photo" style="width: 200px; height: auto;"
|
|
|
- :preview-src-list="[infoForm.other_photo]" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :sm="24" v-if="infoForm.confirm_remark">
|
|
|
- <el-form-item label="审核备注:">
|
|
|
- <span>{{ infoForm.confirm_remark }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div slot="footer">
|
|
|
- <el-button @click="showInfoDialog = false">关闭</el-button>
|
|
|
+ <!-- 通用弹窗（详情/添加/编辑） -->
|
|
|
+ <el-dialog :title="dialogTitle" :visible.sync="showDialog" width="900px" @closed="resetForm"
|
|
|
+ :destroy-on-close="true" top="5vh" :close-on-click-modal="false" class="store-dialog">
|
|
|
+ <div slot="title" class="dialog-header">
|
|
|
+ <i :class="dialogIcon" class="dialog-icon"></i>
|
|
|
+ <span class="dialog-title">{{ dialogTitle }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-content">
|
|
|
+ <el-form :model="form" ref="storeForm" :rules="formRules" label-width="120px" class="store-form">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :sm="12" v-if="dialogMode === 'detail'">
|
|
|
+ <el-form-item label="商家ID:">
|
|
|
+ <span class="detail-text">{{ form.id }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="店铺名称:" prop="name">
|
|
|
+ <el-input v-if="dialogMode !== 'detail'" v-model="form.name" placeholder="请输入店铺名称" size="medium" />
|
|
|
+ <span v-else class="detail-text">{{ form.name }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="联系姓名:" prop="real_name">
|
|
|
+ <el-input v-if="dialogMode !== 'detail'" v-model="form.real_name" placeholder="请输入联系姓名" size="medium" />
|
|
|
+ <span v-else class="detail-text">{{ form.real_name }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="联系电话:" prop="phone">
|
|
|
+ <el-input v-if="dialogMode !== 'detail'" v-model="form.phone" placeholder="请输入联系电话" size="medium" />
|
|
|
+ <span v-else class="detail-text">{{ form.phone }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="商家分类:" prop="category_id">
|
|
|
+ <el-select v-if="dialogMode !== 'detail'" v-model="form.category_id" placeholder="请选择商家分类" clearable filterable size="medium" style="width: 100%">
|
|
|
+ <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <span v-else class="detail-text">{{ form.category_name || '未分类' }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="佣金比例:" prop="bonus_rate">
|
|
|
+ <div v-if="dialogMode !== 'detail'" class="bonus-rate-input">
|
|
|
+ <el-input-number v-model="form.bonus_rate" :min="0" :max="100" :precision="2" placeholder="请输入佣金比例" size="medium" class="rate-number" />
|
|
|
+ <span class="unit-text">%</span>
|
|
|
+ </div>
|
|
|
+ <span v-else class="detail-text bonus-rate">{{ form.bonus_rate || 0 }}%</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="24">
|
|
|
+ <el-form-item label="所在地址:" prop="address">
|
|
|
+ <el-input v-if="dialogMode !== 'detail'" v-model="form.address" placeholder="请输入所在地址" size="medium" />
|
|
|
+ <span v-else class="detail-text">{{ form.address || '未填写' }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="24">
|
|
|
+ <el-form-item label="门头照:">
|
|
|
+ <div v-if="dialogMode !== 'detail'" class="upload-section">
|
|
|
+ <upload-image v-model="form.logo" :limit="1" :type="1" @upload-success="handleUploadSuccess" />
|
|
|
+ <div class="upload-tip">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 支持 JPG、PNG 格式，文件大小不超过 10MB
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="form.logo" class="image-preview">
|
|
|
+ <el-image :src="form.logo" class="preview-image"
|
|
|
+ :preview-src-list="[form.logo]" />
|
|
|
+ </div>
|
|
|
+ <span v-else class="detail-text empty-text">未上传</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12" v-if="dialogMode === 'detail'">
|
|
|
+ <el-form-item label="入驻时间:">
|
|
|
+ <span class="detail-text time-text">{{ form.create_time }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12" v-if="dialogMode === 'detail'">
|
|
|
+ <el-form-item label="商家状态:">
|
|
|
+ <div class="status-wrapper">
|
|
|
+ <ele-dot :type="getStatusType(form.status)" :text="getStatusText(form.status)" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="24" v-if="dialogMode === 'detail' && form.business_license">
|
|
|
+ <el-form-item label="营业执照:">
|
|
|
+ <div class="image-preview">
|
|
|
+ <el-image :src="form.business_license" class="preview-image"
|
|
|
+ :preview-src-list="[form.business_license]" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="24" v-if="dialogMode === 'detail' && form.other_photo">
|
|
|
+ <el-form-item label="其他证件照:">
|
|
|
+ <div class="image-preview">
|
|
|
+ <el-image :src="form.other_photo" class="preview-image"
|
|
|
+ :preview-src-list="[form.other_photo]" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="24" v-if="dialogMode === 'detail' && form.confirm_remark">
|
|
|
+ <el-form-item label="审核备注:">
|
|
|
+ <div class="remark-text">{{ form.confirm_remark }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showDialog = false" size="medium">{{ dialogMode === 'detail' ? '关闭' : '取消' }}</el-button>
|
|
|
+ <el-button v-if="dialogMode !== 'detail'" type="primary" @click="saveStore" size="medium" :loading="saveLoading">
|
|
|
+ <i class="el-icon-check" style="margin-right: 5px;"></i>
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -236,9 +287,13 @@ import {
|
|
|
} from "@/constants/storeConstants";
|
|
|
|
|
|
import { STATUS, STATUS_TYPE } from "@/constants/commonConstants";
|
|
|
+import UploadImage from "@/components/uploadImage.vue";
|
|
|
|
|
|
export default {
|
|
|
name: "StoreManage",
|
|
|
+ components: {
|
|
|
+ UploadImage
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
STORE_STATUS,
|
|
|
@@ -287,10 +342,35 @@ export default {
|
|
|
},
|
|
|
choose: [],
|
|
|
categoryOptions: [], // 商家分类选项
|
|
|
- showInfoDialog: false,
|
|
|
+ // 通用弹窗相关
|
|
|
+ showDialog: false,
|
|
|
+ dialogMode: 'detail', // detail: 详情, add: 添加, edit: 编辑
|
|
|
+ form: {},
|
|
|
+ // 审核弹窗相关
|
|
|
showConfirmDialog: false,
|
|
|
- infoForm: {},
|
|
|
confirmForm: {},
|
|
|
+ // 保存加载状态
|
|
|
+ saveLoading: false,
|
|
|
+ // 表单验证规则
|
|
|
+ formRules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入店铺名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ real_name: [
|
|
|
+ { required: true, message: '请输入联系姓名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ { required: true, message: '请输入联系电话', trigger: 'blur' },
|
|
|
+ { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ category_id: [
|
|
|
+ { required: true, message: '请选择商家分类', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ bonus_rate: [
|
|
|
+ { required: true, message: '请输入佣金比例', trigger: 'blur' },
|
|
|
+ { type: 'number', min: 0, max: 100, message: '佣金比例必须在0-100之间', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
confirmRules: {
|
|
|
status: [
|
|
|
{ required: true, message: '请选择审核结果', trigger: 'change' }
|
|
|
@@ -311,7 +391,25 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(["permission"])
|
|
|
+ ...mapGetters(["permission"]),
|
|
|
+ // 弹窗标题
|
|
|
+ dialogTitle() {
|
|
|
+ const titleMap = {
|
|
|
+ detail: '商家详情',
|
|
|
+ add: '新增商家',
|
|
|
+ edit: '编辑商家'
|
|
|
+ };
|
|
|
+ return titleMap[this.dialogMode] || '商家信息';
|
|
|
+ },
|
|
|
+ // 弹窗图标
|
|
|
+ dialogIcon() {
|
|
|
+ const iconMap = {
|
|
|
+ detail: 'el-icon-view',
|
|
|
+ add: 'el-icon-plus',
|
|
|
+ edit: 'el-icon-edit'
|
|
|
+ };
|
|
|
+ return iconMap[this.dialogMode] || 'el-icon-info';
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
// 初始化时，根据 URL 参数或默认值设置状态
|
|
|
@@ -379,14 +477,58 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ /* 重置表单 */
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ name: '',
|
|
|
+ real_name: '',
|
|
|
+ phone: '',
|
|
|
+ category_id: null,
|
|
|
+ bonus_rate: 0,
|
|
|
+ address: '', // 确保 address字段始终为空字符串而不是null或undefined
|
|
|
+ logo: ''
|
|
|
+ };
|
|
|
+ if (this.$refs.storeForm) {
|
|
|
+ this.$refs.storeForm.clearValidate();
|
|
|
+ }
|
|
|
+ console.log('表单重置后的数据:', this.form);
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 显示新增 */
|
|
|
+ showAdd() {
|
|
|
+ this.dialogMode = 'add';
|
|
|
+ this.resetForm();
|
|
|
+ this.showDialog = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 显示编辑 */
|
|
|
+ showEdit(row) {
|
|
|
+ const loading = this.$loading({ lock: true });
|
|
|
+ this.$http.get('/store/info', { params: { id: row.id } }).then(res => {
|
|
|
+ loading.close();
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.form = res.data.data || {};
|
|
|
+ this.dialogMode = 'edit';
|
|
|
+ this.showDialog = true;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ loading.close();
|
|
|
+ this.$message.error(e.message);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
/* 显示详情 */
|
|
|
showInfo(row) {
|
|
|
const loading = this.$loading({ lock: true });
|
|
|
this.$http.get('/store/info', { params: { id: row.id } }).then(res => {
|
|
|
loading.close();
|
|
|
if (res.data.code === 0) {
|
|
|
- this.infoForm = res.data.data || {};
|
|
|
- this.showInfoDialog = true;
|
|
|
+ this.form = res.data.data || {};
|
|
|
+ this.dialogMode = 'detail';
|
|
|
+ this.showDialog = true;
|
|
|
} else {
|
|
|
this.$message.error(res.data.msg);
|
|
|
}
|
|
|
@@ -396,6 +538,49 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ /* 上传成功回调 */
|
|
|
+ handleUploadSuccess(data) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '图片上传成功',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ console.log('上传成功:', data);
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 保存商家 */
|
|
|
+ saveStore() {
|
|
|
+ this.$refs['storeForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.saveLoading = true;
|
|
|
+ const url = this.dialogMode === 'add' ? '/store/add' : '/store/edit';
|
|
|
+
|
|
|
+ // 确保所有字段都被包含，包括空字符串
|
|
|
+ const formData = {
|
|
|
+ ...this.form,
|
|
|
+ // 确保 address字段始终存在，即使是空字符串
|
|
|
+ address: this.form.address || ''
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('提交的表单数据:', formData);
|
|
|
+
|
|
|
+ this.$http.post(url, formData).then(res => {
|
|
|
+ this.saveLoading = false;
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.showDialog = false;
|
|
|
+ this.$message({ type: 'success', message: res.data.msg });
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ this.saveLoading = false;
|
|
|
+ this.$message.error(e.message);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
/* 显示审核 */
|
|
|
showConfirm(row) {
|
|
|
this.confirmForm = {
|
|
|
@@ -560,4 +745,437 @@ export default {
|
|
|
color: #909399;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
+/* 弹窗样式优化 */
|
|
|
+.store-dialog {
|
|
|
+ ::v-deep .el-dialog {
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-dialog__footer {
|
|
|
+ padding: 16px 24px;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ background-color: #fafafa;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗头部 */
|
|
|
+.dialog-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ .dialog-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 12px;
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗内容 */
|
|
|
+.dialog-content {
|
|
|
+ padding: 32px 24px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ // 为整个表单区域添加间距
|
|
|
+ .el-row {
|
|
|
+ margin-left: -10px !important;
|
|
|
+ margin-right: -10px !important;
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding-left: 10px !important;
|
|
|
+ padding-right: 10px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单样式 */
|
|
|
+.store-form {
|
|
|
+ // 确保表单项之间有足够的间距
|
|
|
+ ::v-deep .el-form-item {
|
|
|
+ margin-bottom: 24px !important;
|
|
|
+ padding-bottom: 8px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ line-height: normal;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input, .el-select {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1.5px solid #e4e7ed;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select {
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input-number {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &:not(.rate-number) {
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1.5px solid #e4e7ed;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 为每个栏目添加间距
|
|
|
+ .el-row {
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 详情文本样式 */
|
|
|
+.detail-text {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ padding: 10px 12px;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ &.time-text {
|
|
|
+ color: #909399;
|
|
|
+ font-family: 'Monaco', 'Menlo', monospace;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bonus-rate {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 15px;
|
|
|
+ background-color: #fef7e6;
|
|
|
+ border-color: #f4d77a;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.empty-text {
|
|
|
+ color: #c0c4cc;
|
|
|
+ font-style: italic;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 佣金比例输入 */
|
|
|
+.bonus-rate-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ height: 40px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .rate-number {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 0;
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border-radius: 6px 0 0 6px !important;
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input-number__increase,
|
|
|
+ ::v-deep .el-input-number__decrease {
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input-number__increase {
|
|
|
+ border-radius: 0;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit-text {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ min-width: 32px;
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border: 1.5px solid #e4e7ed;
|
|
|
+ border-left: none;
|
|
|
+ border-radius: 0 6px 6px 0;
|
|
|
+ padding: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 上传区域 */
|
|
|
+.upload-section {
|
|
|
+ padding: 10px 0;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ // 优化上传组件样式
|
|
|
+ ::v-deep .finish_room {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .finish_room2 {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .room_add_img {
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 0;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ background-color: #f0f8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .room_img {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .im-button {
|
|
|
+ top: -8px;
|
|
|
+ right: -8px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background-color: #ff4757;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #ff3742;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .im-close,
|
|
|
+ ::v-deep .im-close1 {
|
|
|
+ width: 12px;
|
|
|
+ height: 2px;
|
|
|
+ left: 4px;
|
|
|
+ bottom: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-tip {
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片预览 */
|
|
|
+.image-preview {
|
|
|
+ padding: 10px 0;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .preview-image {
|
|
|
+ width: 200px;
|
|
|
+ height: auto;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.02);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态包装 */
|
|
|
+.status-wrapper {
|
|
|
+ padding: 10px 12px;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 备注文本 */
|
|
|
+.remark-text {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-left: 4px solid #409eff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 0;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗底部 */
|
|
|
+.dialog-footer {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.el-button--primary {
|
|
|
+ background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(.el-button--primary) {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1.5px solid #dcdfe6;
|
|
|
+ color: #606266;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-color: #c0c4cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式优化 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .store-dialog {
|
|
|
+ ::v-deep .el-dialog {
|
|
|
+ width: 95% !important;
|
|
|
+ margin: 5vh auto !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-content {
|
|
|
+ padding: 20px 16px;
|
|
|
+
|
|
|
+ .el-row {
|
|
|
+ margin-left: -8px !important;
|
|
|
+ margin-right: -8px !important;
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding-left: 8px !important;
|
|
|
+ padding-right: 8px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-form {
|
|
|
+ ::v-deep .el-form-item {
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ width: 100px !important;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bonus-rate-input {
|
|
|
+ .unit-text {
|
|
|
+ min-width: 28px;
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
罗永浩