|
|
@@ -1,578 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-dialog title="详情" width="80%" :visible.sync="visible" :close-on-click-modal="false" @close="closeModalDetail">
|
|
|
- <div class="custom_info_page">
|
|
|
- <h2>客户信息</h2>
|
|
|
- <div class="custom_info">
|
|
|
- <div class="info_item">
|
|
|
- <img :src="userObj.headImage" alt>
|
|
|
- </div>
|
|
|
- <div class="info_item">
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in infoList" :key="index">
|
|
|
- <p>
|
|
|
- <span>{{ item.name }} :</span>
|
|
|
- <span>{{ item.value }}</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="custom_tag">
|
|
|
- <h2>客户标签</h2>
|
|
|
- <div class="Tag">
|
|
|
- <p v-for="(item, index) in tagList" :key="index">{{ item.tagName }}</p>
|
|
|
- <p @click="addTag">贴标签</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="custom_data">
|
|
|
- <h2>消费数据</h2>
|
|
|
- <div class="data_list">
|
|
|
- <p>
|
|
|
- <span>
|
|
|
- 下 单 数:
|
|
|
- <font>{{ userObj.orders }}</font>
|
|
|
- </span>
|
|
|
- 支付成功数:
|
|
|
- <font>{{ userObj.pays }}</font>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <span>
|
|
|
- 售后次数:
|
|
|
- <font>{{ userObj.afters }}</font>
|
|
|
- </span>
|
|
|
- 售后单数:
|
|
|
- <font>{{ userObj.afterOrders }}</font>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="tab_list">
|
|
|
- <p
|
|
|
- v-for="(item, index) in tabList" :key="index" :class="[ { active: componentName === item.componentName } ]"
|
|
|
- @click="changeTab(item)"
|
|
|
- >
|
|
|
- {{ item.tabName }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="componentName === 'order'">
|
|
|
- <el-form :inline="true" :model="userForm" class="demo-form-inline">
|
|
|
- <el-form-item label="订单编号">
|
|
|
- <el-input v-model="userForm.orderFormid" maxlength="20" placeholder="请输入订单编号" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" plain @click="searchOrders">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-table
|
|
|
- :data="userObj.orderList" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column prop="orderFormid" label="订单编号" />
|
|
|
- <el-table-column prop="shopName" label="店铺名称" />
|
|
|
- <el-table-column prop="products" label="商品数量">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.products }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price" label="订单金额(元)" />
|
|
|
- <el-table-column label="状态">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span v-if="scope.row.state === 1">待付款</span>
|
|
|
- <span v-if="scope.row.state === 2">待发货</span>
|
|
|
- <span v-if="scope.row.state === 3">待收货</span>
|
|
|
- <span v-if="scope.row.state === 4">已完成</span>
|
|
|
- <span v-if="scope.row.state === 5">已关闭</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div v-if="componentName === 'comment'">
|
|
|
- <el-table
|
|
|
- :data="userObj.comments" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column prop="shopName" label="店铺名称" />
|
|
|
- <el-table-column prop="productName" label="商品名称" />
|
|
|
- <el-table-column prop="comments" label="评论">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="text" @click="seeComment(scope.row.commentId)">查看</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div v-if="componentName === 'addressInfo'">
|
|
|
- <el-table
|
|
|
- :data="userObj.receives" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column prop="receiveName" label="姓名" />
|
|
|
- <el-table-column prop="receivePhone" label="电话" />
|
|
|
- <el-table-column prop="receiveAdress" label="地址">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.receiveAdress }}{{ scope.row.address }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <!-- *************对话框开始************* -->
|
|
|
- <!-- 打标签 -->
|
|
|
- <el-dialog
|
|
|
- title="选择标签" :visible.sync="addFormDialog" width="30%" append-to-body
|
|
|
- center
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <!-- 表单搜索 -->
|
|
|
- <el-form :inline="true" :model="tipsForm" class="demo-form-inline">
|
|
|
- <el-form-item label="标签名称">
|
|
|
- <el-input v-model="tipsForm.labelName" maxlength="20" placeholder="请输入标签名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="searchTips">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="text" @click="runTips">管理标签</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <!-- 多选 -->
|
|
|
- <el-checkbox-group v-model="checkList">
|
|
|
- <el-checkbox
|
|
|
- v-for="(item, index) in tipsList" :key="index" class="checkBoxStyle"
|
|
|
- :label="item.buyerLabelId"
|
|
|
- >
|
|
|
- {{ item.labelName }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="addFormDialog = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="saveTips">确定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <!-- 查看评论弹框 -->
|
|
|
- <el-dialog
|
|
|
- title="评论详情" :visible.sync="comDialogVisible" :close-on-click-modal="false" :before-close="handleClose"
|
|
|
- width="60%" center :append-to-body="true"
|
|
|
- >
|
|
|
- <div class="pinStyle">
|
|
|
- <div class="comment">
|
|
|
- <div class="com_left">评论：</div>
|
|
|
- <div class="com_right">{{ commentDetails.comment }}</div>
|
|
|
- </div>
|
|
|
- <div v-if="commentDetails.images.length != 0" class="comment_imgList">
|
|
|
- <div class="img_left">图片：</div>
|
|
|
- <div class="imgList">
|
|
|
- <el-image
|
|
|
- v-for="(item, index) in commentDetails.images" :key="index" :src="item"
|
|
|
- :preview-src-list="commentDetails.images"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="comment">
|
|
|
- <div v-if="commentDetails.addComment != ''" class="com_left">追评：</div>
|
|
|
- <div class="com_right">{{ commentDetails.addComment }}</div>
|
|
|
- </div>
|
|
|
- <div v-if="commentDetails.addImages.length != 0" class="comment_imgList">
|
|
|
- <div class="img_left">图片</div>
|
|
|
- <div class="imgList">
|
|
|
- <el-image
|
|
|
- v-for="(item, index) in commentDetails.addImages" :key="index" :src="item"
|
|
|
- :preview-src-list="commentDetails.addImages"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button v-if="comState" @click="toShow">允许展示</el-button>
|
|
|
- <el-button v-else @click="noneShow">隐藏</el-button>
|
|
|
- <el-button type="primary" @click="delCom">删除</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button type="text" @click="doCancel">取消</el-button>
|
|
|
- <el-button type="primary" @click="doSubmit">确认</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { customerMageGetById, getLabels, customerSaveUserLabel } from '@/api/customerMage'
|
|
|
-import { commentSysGetById, commentSysUpdate, commentSysDelete, commentAllow } from '@/api/comment'
|
|
|
-export default {
|
|
|
- name: 'Details',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- visible: false,
|
|
|
- infoList: [
|
|
|
- { name: '用户昵称', value: '', fields: 'name' },
|
|
|
- { name: '手 机 号', value: '', fields: 'phone' },
|
|
|
- { name: '性 别', value: '', fields: 'sex' },
|
|
|
- { name: '注册时间', value: '', fields: 'createTime' },
|
|
|
- { name: '生 日', value: '', fields: 'birthday' }
|
|
|
- ],
|
|
|
- tagList: [],
|
|
|
- tabList: [
|
|
|
- { tabName: 'TA的订单', componentName: 'order' },
|
|
|
- { tabName: 'TA的评论', componentName: 'comment' },
|
|
|
- { tabName: 'TA的收货地址', componentName: 'addressInfo' }
|
|
|
- ],
|
|
|
- componentName: 'order',
|
|
|
- customData: {},
|
|
|
- dialog: {},
|
|
|
- user: '',
|
|
|
- userObj: {},
|
|
|
- tipsForm: {
|
|
|
- labelName: ''
|
|
|
- },
|
|
|
- userForm: {
|
|
|
- orderFormid: ''
|
|
|
- },
|
|
|
- checkList: [],
|
|
|
- tipsList: [],
|
|
|
- comDialogVisible: false,
|
|
|
- commentDetails: { images: [], addImages: [] },
|
|
|
- commentId: '',
|
|
|
- comState: 1 // 是否隐藏 1-是 0-否
|
|
|
- }
|
|
|
- },
|
|
|
- // created () {
|
|
|
- // this.user = this.$route.params
|
|
|
- // console.log(this.user)
|
|
|
- // this.getUser(this.user)
|
|
|
- // },
|
|
|
- methods: {
|
|
|
- // 允许展示
|
|
|
- async toShow() {
|
|
|
- const res = await commentAllow({
|
|
|
- commentId: this.commentId,
|
|
|
- state: 1
|
|
|
- })
|
|
|
- if (res.code === '') {
|
|
|
- this.$message.success('成功')
|
|
|
- this.comDialogVisible = false
|
|
|
- this.comState = 0
|
|
|
- this.getUser(this.user)
|
|
|
- }
|
|
|
- },
|
|
|
- // 隐藏
|
|
|
- async noneShow() {
|
|
|
- const res = await commentSysUpdate({
|
|
|
- commentId: this.commentId,
|
|
|
- state: 0
|
|
|
- })
|
|
|
- if (res.code === '') {
|
|
|
- this.comState = 1
|
|
|
- this.$message.success('隐藏成功')
|
|
|
- this.comDialogVisible = false
|
|
|
- this.getUser(this.user)
|
|
|
- }
|
|
|
- },
|
|
|
- // 删除
|
|
|
- async delCom() {
|
|
|
- const res = await commentSysDelete({
|
|
|
- commentId: this.commentId
|
|
|
- })
|
|
|
- if (res.code === '') {
|
|
|
- this.$message.success('删除成功')
|
|
|
- this.comDialogVisible = false
|
|
|
- this.getUser(this.user)
|
|
|
- }
|
|
|
- },
|
|
|
- // 评论详情
|
|
|
- async seeComment(commentId) {
|
|
|
- this.comDialogVisible = true
|
|
|
- const res = await commentSysGetById({ commentId })
|
|
|
- this.commentId = commentId
|
|
|
- this.commentDetails = res.data
|
|
|
- },
|
|
|
- handleClose() {
|
|
|
- this.comDialogVisible = false
|
|
|
- },
|
|
|
- closeModalDetail() {
|
|
|
- this.comState = 1
|
|
|
- this.componentName = 'order'
|
|
|
- },
|
|
|
- // 查询订单
|
|
|
- searchOrders() {
|
|
|
- this.user.orderFormid = this.userForm.orderFormid
|
|
|
- this.getUser(this.user)
|
|
|
- },
|
|
|
- // 查询标签
|
|
|
- searchTips() {
|
|
|
- console.log(this.tipsForm)
|
|
|
- this.getSelect({ labelName: this.tipsForm.labelName })
|
|
|
- },
|
|
|
- // 跳转标签页面
|
|
|
- runTips() {
|
|
|
- this.$router.push({
|
|
|
- path: '/member/tips'
|
|
|
- })
|
|
|
- },
|
|
|
- changeTab(item) {
|
|
|
- this.componentName = item.componentName
|
|
|
- },
|
|
|
- // 客户详情
|
|
|
- async getUser(obj) {
|
|
|
- this.user = obj
|
|
|
- const res = await customerMageGetById({
|
|
|
- buyerUserId: obj.buyerUserId,
|
|
|
- orderFormid: obj.orderFormid
|
|
|
- })
|
|
|
- this.userObj = res.data
|
|
|
- this.visible = true
|
|
|
- this.getInfoList(this.userObj)
|
|
|
- },
|
|
|
- // 获取客户信息
|
|
|
- getInfoList(ob) {
|
|
|
- this.infoList.map((item) => {
|
|
|
- // console.log(item)
|
|
|
- item.value = ob[item.fields] || ''
|
|
|
- if (item.fields === 'sex') {
|
|
|
- item.value = item.value === '1' ? '男' : '女'
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 初始化查询所有标签
|
|
|
- async getSelect(name) {
|
|
|
- const res = await getLabels(name)
|
|
|
- this.tipsList = res.data
|
|
|
- },
|
|
|
- doCancel() {
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- doSubmit() {
|
|
|
- this.visible = false
|
|
|
- this.$emit('success')
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang='scss' scoped>
|
|
|
-// 评论详情
|
|
|
-.comment_manage_page {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.pinStyle {
|
|
|
- .comment {
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .com_left {
|
|
|
- font-size: 20px;
|
|
|
- color: #333333;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .com_right {
|
|
|
- font-size: 18px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .comment_imgList {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 20px;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .img_left {
|
|
|
- font-size: 20px;
|
|
|
- color: #333333;
|
|
|
- margin-right: 20px;
|
|
|
- width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .imgList {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .el-image {
|
|
|
- width: 200px;
|
|
|
- height: 134px;
|
|
|
- border-radius: 4px;
|
|
|
- margin-right: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .line {
|
|
|
- // width: 890px;
|
|
|
- // height: 1px;
|
|
|
- // background: #e0e5eb;
|
|
|
- // margin: 0 auto;
|
|
|
- // margin-bottom: 33px;
|
|
|
- // }
|
|
|
- // .addComment {
|
|
|
- // font-size: 20px;
|
|
|
- // color: #ff7911;
|
|
|
- // margin-bottom: 20px;
|
|
|
- // }
|
|
|
-}
|
|
|
-
|
|
|
-//
|
|
|
-h2 {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- height: 24px;
|
|
|
- width: 4px;
|
|
|
- background-color: #3a68f2;
|
|
|
- position: absolute;
|
|
|
- left: -10px;
|
|
|
- top: 2px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.custom_info_page {
|
|
|
- margin-top: 20px;
|
|
|
- padding: 20px 100px;
|
|
|
- background-color: #fff;
|
|
|
- min-height: 500px;
|
|
|
-
|
|
|
- .custom_info {
|
|
|
- margin-bottom: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .info_item {
|
|
|
- &:nth-child(1) {
|
|
|
- height: 180px;
|
|
|
- width: 100px;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 50px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- margin-left: 100px;
|
|
|
-
|
|
|
- ul {
|
|
|
- overflow: hidden;
|
|
|
- list-style: none;
|
|
|
-
|
|
|
- li {
|
|
|
- float: left;
|
|
|
- width: 50%;
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- span:nth-child(2) {
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .custom_tag {
|
|
|
- margin-bottom: 30px;
|
|
|
-
|
|
|
- .Tag {
|
|
|
- padding-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- display: inline-block;
|
|
|
- background-color: #d8e1fc;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- // margin-right: 20px;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 8px 15px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- background-color: #fff;
|
|
|
- color: #3a68f2;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .custom_data {
|
|
|
- .data_list {
|
|
|
- padding: 20px 0 40px 0;
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- font {
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tab_list {
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- p {
|
|
|
- float: left;
|
|
|
- padding: 0 50px;
|
|
|
- font-size: 16px;
|
|
|
- border: 1px #e0e5eb solid;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #999999;
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
-
|
|
|
- &:nth-child(-n + 2) {
|
|
|
- border-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- border-radius: 4px 0 0 4px;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- border-radius: 0 4px 4px 0;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- background-color: #3a68f2;
|
|
|
- color: #fff;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
GuYun-D