Merge remote-tracking branch 'origin/dev' into dev
| | |
| | | }) |
| | | } |
| | | |
| | | export const getCustomerInfo= (params) =>{ |
| | | return service({ |
| | | url: '/customerManager/'+ params, |
| | | method: 'GET' |
| | | }) |
| | | } |
| | |
| | | <Button |
| | | type="info" |
| | | size="small" |
| | | @click="detail(row)" |
| | | >详情</Button> |
| | | <Button |
| | | type="info" |
| | | size="small" |
| | | @click="openEdit(row)" |
| | | >编辑</Button> |
| | | <Button |
| | |
| | | </Row> |
| | | </Modal> |
| | | |
| | | <Modal |
| | | v-model="infoModelShow" |
| | | :title="modelTitle" |
| | | @on-cancel="infoModelClose" |
| | | width="800" |
| | | :mask-closable="false" |
| | | > |
| | | <div class="detail-container"> |
| | | <Row :gutter="16"> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>活动名称:</label> |
| | | <span>{{ activityInfo.activityName || '-' }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>活动类型:</label> |
| | | <span>{{activityInfo.activityType === 'online' ? '线上':'线下'}}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>报名时间段:</label> |
| | | <span>{{ activityInfo.reportStartTime }} - {{ activityInfo.reportEndTime }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>活动时间段:</label> |
| | | <span>{{ activityInfo.startTime }} - {{ activityInfo.endTime }}</span> |
| | | </div> |
| | | </Col> |
| | | |
| | | <Col span="24" v-if="coverType === '输入文字封面'"> |
| | | <div class="detail-item"> |
| | | <label>封面文字:</label> |
| | | <span>{{ activityInfo.cover || '-' }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="24" v-if="coverType === '选择文件封面'"> |
| | | <div class="detail-item"> |
| | | <label>上传封面:</label> |
| | | <span>{{ activityInfo.cover }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>人数限制:</label> |
| | | <span>{{ activityInfo.limitUserNum || '无限制' }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="12"> |
| | | <div class="detail-item"> |
| | | <label>活动地点:</label> |
| | | <span>{{ activityInfo.activityLocation || '-' }}</span> |
| | | </div> |
| | | </Col> |
| | | <Col span="24"> |
| | | <div class="detail-item"> |
| | | <label>活动内容:</label> |
| | | <div |
| | | class="activity-content" |
| | | v-html="activityInfo.activityContent || '无内容'" |
| | | ></div> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | </div> |
| | | |
| | | <div slot="footer"> |
| | | <Button @click="infoModelClose">关闭</Button> |
| | | </div> |
| | | </Modal> |
| | | |
| | | |
| | | <!-- 图片预览模态框 --> |
| | | <Modal v-model="previewVisible" title="图片预览" footer-hide> |
| | | <img :src="previewImageUrl" style="width: 100%"> |
| | |
| | | components: {Editor}, |
| | | data() { |
| | | return { |
| | | infoModelShow:false, |
| | | |
| | | loading: false, |
| | | membersLoading: false, |
| | | submitLoading: false, |
| | |
| | | |
| | | // 活动表单 |
| | | activityFrom: { |
| | | id: '', |
| | | activityName: '', |
| | | activityType: '', |
| | | reportTime: [], |
| | | time: [], |
| | | activityContent: '', |
| | | cover: '', |
| | | coverType: '', |
| | | status: '', |
| | | reportStartTime: '', |
| | | reportEndTime: '', |
| | | startTime: '', |
| | | endTime: '', |
| | | recommend: false, |
| | | limitUserNum: 0, |
| | | activityLocation: '', |
| | | }, |
| | | activityInfo: { |
| | | id: '', |
| | | activityName: '', |
| | | activityType: '', |
| | |
| | | this.init() |
| | | }, |
| | | methods: { |
| | | detail(row){ |
| | | this.modelTitle = '活动详情' |
| | | this.infoModelShow = true |
| | | this.activityInfo = row |
| | | }, |
| | | // 获取富文本编辑器的内容 |
| | | getReason(content) { |
| | | this.activityFrom.activityContent = content |
| | |
| | | this.coverType = row.coverType === 'text' ? '输入文字封面' : '选择文件封面' |
| | | }) |
| | | }, |
| | | |
| | | infoModelClose(){ |
| | | this.infoModelShow = false |
| | | }, |
| | | // 关闭模态框 |
| | | modelClose() { |
| | | this.modelShow = false |
| | |
| | | margin-top: 4px; |
| | | } |
| | | } |
| | | .detail-container { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .detail-item { |
| | | margin-bottom: 18px; |
| | | line-height: 1.5; |
| | | |
| | | label { |
| | | display: inline-block; |
| | | width: 100px; |
| | | color: #666; |
| | | font-weight: bold; |
| | | vertical-align: top; |
| | | } |
| | | |
| | | span { |
| | | display: inline-block; |
| | | width: calc(100% - 110px); |
| | | } |
| | | } |
| | | |
| | | .activity-content { |
| | | border: 1px solid #dcdee2; |
| | | border-radius: 4px; |
| | | padding: 12px; |
| | | min-height: 100px; |
| | | margin-top: 8px; |
| | | } |
| | | </style> |
| | |
| | | @on-selection-change="showSelect" |
| | | > |
| | | <template slot-scope="{ row, index }" slot="action"> |
| | | <Button type="info" size="small" style="margin-right: 5px" @click="openInfo(row)">查看详情</Button> |
| | | <Button type="info" size="small" style="margin-right: 5px" @click="openEdit(row)">编辑标签</Button> |
| | | <Button type="error" size="small" style="margin-right: 5px" @click="joinBlack(row)">加入黑名单</Button> |
| | | </template> |
| | |
| | | ></Page> |
| | | </Row> |
| | | |
| | | <Modal |
| | | v-model="showCustomerInfo" |
| | | :title="modelTitle" |
| | | width="700" |
| | | :mask-closable="false" |
| | | > |
| | | <div class="customer-detail"> |
| | | <div class="avatar-section"> |
| | | <Avatar :src="customerInfo.face" size="large" /> |
| | | <div class="basic-info"> |
| | | <h3>{{ customerInfo.nickName || '微信用户' }}</h3> |
| | | <p>ID: {{ customerInfo.id }}</p> |
| | | <p>用户名: {{ customerInfo.username }}</p> |
| | | </div> |
| | | </div> |
| | | |
| | | <Divider /> |
| | | |
| | | <div class="detail-grid"> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">性别:</span> |
| | | <span class="detail-value">{{ customerInfo.sex === 0 ? "女" : "男"}}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">地区:</span> |
| | | <span class="detail-value">{{ customerInfo.region || '未设置' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">手机号:</span> |
| | | <span class="detail-value">{{ customerInfo.mobile || '未绑定' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">当前积分:</span> |
| | | <span class="detail-value">{{ customerInfo.point }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">总积分:</span> |
| | | <span class="detail-value">{{ customerInfo.totalPoint }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">账号状态:</span> |
| | | <span class="detail-value"> |
| | | <Tag :color="customerInfo.disabled ? 'error' : 'success'"> |
| | | {{ customerInfo.disabled ? '已禁用' : '正常' }} |
| | | </Tag> |
| | | </span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">是否关联店铺:</span> |
| | | <span class="detail-value">{{ customerInfo.haveStore ? '是' : '否' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">注册时间:</span> |
| | | <span class="detail-value">{{ customerInfo.createTime }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="detail-label">最后登录时间:</span> |
| | | <span class="detail-value">{{ customerInfo.lastLoginDate }}</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-if="customerInfo.customerTagList && customerInfo.customerTagList.length > 0" class="tags-section"> |
| | | <h4>用户标签</h4> |
| | | <div> |
| | | <Tag v-for="tag in customerInfo.customerTagList" :key="tag" color="default" style="margin-right: 8px;"> |
| | | {{ tag }} |
| | | </Tag> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div slot="footer"> |
| | | <Button type="primary" @click="showCustomerInfo = false">关闭</Button> |
| | | </div> |
| | | </Modal> |
| | | <!-- 标签弹窗--> |
| | | <Modal |
| | | v-model="showCustomerTag" |
| | | :title="modelTitle" |
| | |
| | | |
| | | <script> |
| | | import JsonExcel from "vue-json-excel"; |
| | | import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions} from "@/api/customer"; |
| | | import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions,getCustomerInfo} from "@/api/customer"; |
| | | import {addCustomerBlackByPC} from "@/api/customer-black.js" |
| | | |
| | | export default { |
| | |
| | | }, |
| | | data(){ |
| | | return{ |
| | | customerInfo: { |
| | | birthday: null, |
| | | blackId: null, |
| | | clientEnum: null, |
| | | createTime: "", |
| | | customerTagList: [], |
| | | disabled: true, |
| | | experience: null, |
| | | face: "", |
| | | gradeId: null, |
| | | haveStore: false, |
| | | id: "", |
| | | lastLoginDate: "", |
| | | mobile: null, |
| | | nickName: "", |
| | | openId: null, |
| | | point: 10, |
| | | region: "", |
| | | regionId: "", |
| | | sex: 0, |
| | | storeId: null, |
| | | totalPoint: 0, |
| | | username: "" |
| | | }, |
| | | loading: false, // 表单加载状态 |
| | | //查询客户列表请求参数 |
| | | searchForm:{ |
| | |
| | | selectCount: 0, // 已选数量 |
| | | selectList: [], // 已选数据列表 |
| | | |
| | | //客户详情对话框--- |
| | | showCustomerInfo:false, |
| | | //客户标签对话框--- |
| | | |
| | | showCustomerTag:false, |
| | | submitLoading:false, |
| | | selectLoading:false, |
| | |
| | | this.selectList = e.map(d => d.id); |
| | | this.selectCount = e.length; |
| | | }, |
| | | //查看详情 |
| | | openInfo(row){ |
| | | this.showCustomerInfo = true; |
| | | this.modelTitle = "用户详情" |
| | | getCustomerInfo(row.id).then(res =>{ |
| | | if(res.code === 200){ |
| | | this.customerInfo = { |
| | | birthday: res.data.birthday || null, |
| | | blackId: res.data.blackId || null, |
| | | clientEnum: res.data.clientEnum || null, |
| | | createTime: res.data.createTime || '', |
| | | customerTagList: res.data.customerTagList || [], |
| | | disabled: res.data.disabled || false, |
| | | experience: res.data.experience || null, |
| | | face: res.data.face || '默认头像URL', |
| | | gradeId: res.data.gradeId || null, |
| | | haveStore: res.data.haveStore || false, |
| | | id: res.data.id || '', |
| | | lastLoginDate: res.data.lastLoginDate || '', |
| | | mobile: res.data.mobile || null, |
| | | nickName: res.data.nickName || '微信用户', |
| | | openId: res.data.openId || null, |
| | | point: res.data.point || 0, |
| | | region: res.data.region || '', |
| | | regionId: res.data.regionId || '', |
| | | sex: res.data.sex || 0, |
| | | storeId: res.data.storeId || null, |
| | | totalPoint: res.data.totalPoint || 0, |
| | | username: res.data.username || '' |
| | | }; |
| | | } |
| | | }) |
| | | }, |
| | | // 编辑标签 |
| | | openEdit(row){ |
| | | this.showCustomerTag = true |
| | |
| | | |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .customer-detail { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .avatar-section { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .basic-info { |
| | | margin-left: 16px; |
| | | } |
| | | |
| | | .basic-info h3 { |
| | | margin: 0 0 8px 0; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .basic-info p { |
| | | margin: 6px 0; |
| | | color: #808695; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .tags-section { |
| | | margin-top: 16px; |
| | | padding-top: 16px; |
| | | } |
| | | |
| | | .tags-section h4 { |
| | | margin-bottom: 12px; |
| | | color: #17233d; |
| | | } |
| | | .export { |
| | | margin: 10px 20px 10px 0; |
| | | } |