SxsnPC/src/views/modules/member/detail.vue

<template>
    <div class="adffc" style="height: calc(100vh - 80px);">
        <el-card shadow="never" class="aui-card--fill">
            <div class="mod-home">
                <div class="top adfac">
                    <div class="back adfac" @click="handleBack">
                        <img src="@/assets/img/back.png">
                        <span>返回</span>
                    </div>
                    <div class="line"></div>
                    <div class="text">会员详情</div>
                </div>
                <div class="title">基础资料</div>
                <div class="info adfacjb">
                    <div class="info-left adffcac">
                        <img src="@/assets/img/member_avatar.png">
                        <el-button type="primary" @click="handleEdit" v-if="$hasPermission('core:appuser:update')">编辑资料</el-button>
                    </div>
                    <div class="info-right adf" v-if="userInfo">
                        <div class="info-right-pre adf" style="margin-top: 0;">
                            <div class="info-right-pre-title">会员姓名：</div>
                            <div class="info-right-pre-content">{{ userInfo.realName||'' }}</div>
                        </div>
                        <div class="info-right-pre adf" style="margin-top: 0;">
                            <div class="info-right-pre-title">会员手机：</div>
                            <div class="info-right-pre-content">{{ userInfo.phoneCopy||'' }}</div>
                        </div>
                        <div class="info-right-pre adf" style="margin-top: 0;">
                            <div class="info-right-pre-title">善行少年编号：</div>
                            <div class="info-right-pre-content">{{ userInfo.uniqueNo||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">会员性别：</div>
                            <div class="info-right-pre-content">{{ userInfo.genderText||'' }}</div>
                        </div>
                        <!-- <div class="info-right-pre adf">
                            <div class="info-right-pre-title">会员年龄：</div>
                            <div class="info-right-pre-content">{{ userInfo.age||'' }}</div>
                        </div> -->
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">微信昵称：</div>
                            <div class="info-right-pre-content">{{ userInfo.nickName||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">渠道方：</div>
                            <div class="info-right-pre-content">{{ userInfo.channelName||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">成为会员时间：</div>
                            <div class="info-right-pre-content">{{ userInfo.createDate||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">家庭公益口号：</div>
                            <div class="info-right-pre-content">{{ userInfo.welfareSlogan||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">家庭公益名称：</div>
                            <div class="info-right-pre-content">{{ userInfo.welfareName||'' }}</div>
                        </div>
                        <div class="info-right-pre adf">
                            <div class="info-right-pre-title">身份证号：</div>
                            <div class="info-right-pre-content">{{ userInfo.idCardCopy||'' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" class="aui-card--fill">
            <div class="mod-home">
                <div class="title" style="margin-top: 0;">会员资产</div>
                <div class="nums adf" v-if="assetInfo">
                    <div class="nums-pre adffcac">
                        <p>累计捐献爱心值</p>
                        <p class="num">{{ assetInfo.totalDonationValue||0 }}</p>
                    </div>
                    <div class="nums-pre adffcac">
                        <p>家庭累计义工时长</p>
                        <p class="num">{{ assetInfo.totalVolunteerHours||0 }}h</p>
                    </div>
                    <div class="nums-pre adffcac">
                        <p>会员等级</p>
                        <p class="num">Lv.{{ assetInfo.userLevel||1 }}</p>
                    </div>
                    <div class="nums-pre adffcac">
                        <p>剩余爱心值</p>
                        <p class="num">{{ assetInfo.loveValue||0 }}</p>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" class="aui-card--fill" style="flex: 1;">
            <div class="mod-home">
                <div class="tab adfac">
                    <div class="tab-pre" v-for="(item,index) in tabList" :key="index" :class="{'active':tabIndex===index}" @click="changeTab(index)">{{ item }}</div>
                </div>
                <div class="table">
                    <activity-record v-if="tabIndex===0"></activity-record>
                    <heart-recorrd v-else-if="tabIndex===1"></heart-recorrd>
                    <only-self-ticket v-else-if="tabIndex===2"></only-self-ticket>
                    <family-member v-else></family-member>
                </div>
            </div>
        </el-card>
        <el-dialog width="800px" :visible.sync="show" title="编辑会员资料" @close="cancel">
          <el-form ref="memberRef" :model="form" :rules="rules" label-width="120px" style="width: 70%;margin: 0 auto;">
            <el-form-item label="会员昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="善行少年编号" prop="uniqueNo">
              <el-input v-model="form.uniqueNo" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="渠道方" prop="channelId">
              <el-select v-model="form.channelId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in channelOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="家庭公益名称" prop="welfareName">
              <el-input v-model="form.welfareName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="家庭公益口号" prop="welfareSlogan">
              <el-input v-model="form.welfareSlogan" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="累计捐献爱心值" prop="totalInvoicedAmount">
              <el-input type="number" v-model="form.totalInvoicedAmount" disabled placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="剩余爱心值" prop="loveValue">
              <el-input type="number" v-model="form.loveValue" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="参与公益次数" prop="welfareCount">
              <el-input type="number" v-model="form.welfareCount" disabled placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="会员等级" prop="userLevel">
              <el-input type="number" v-model="form.userLevel" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 30px;">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import ActivityRecord from './components/activityRecord.vue'
import HeartRecorrd from './components/heartRecorrd.vue'
import OnlySelfTicket from './components/onlySelfTicket.vue'
import FamilyMember from './components/familyMember.vue'
export default {
  components: {
    ActivityRecord,
    HeartRecorrd,
    OnlySelfTicket,
    FamilyMember
  },
  data () {
    return {
      tabIndex: 0,
      tabList: ['活动记录', '爱心值记录', '专享券', '家庭成员'],
      show: false,
      buttonLoading: false,
      userInfo: null,
      assetInfo: null,
      form: {
        id: '',
        nickName: '',
        uniqueNo: '',
        channelId: '',
        realName: '',
        welfareName: '',
        welfareSlogan: '',
        totalInvoicedAmount: 0,
        loveValue: 0,
        welfareCount: 0,
        userLevel: 0
      },
      rules: {
        nickName: [
          { required: true, message: '请输入会员昵称', trigger: 'blur' }
        ],
        uniqueNo: [
          { required: true, message: '请输入善行少年编号', trigger: 'blur' }
        ],
        channelId: [
          { required: true, message: '请选择渠道方', trigger: 'change' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        welfareName: [
          { required: true, message: '请输入家庭公益名称', trigger: 'blur' }
        ],
        welfareSlogan: [
          { required: true, message: '请输入家庭公益口号', trigger: 'blur' }
        ],
        totalInvoicedAmount: [
          { required: true, message: '请输入累计捐献爱心值', trigger: 'blur' }
        ],
        loveValue: [
          { required: true, message: '请输入剩余爱心值', trigger: 'blur' }
        ],
        welfareCount: [
          { required: true, message: '请输入参与公益次数', trigger: 'blur' }
        ],
        userLevel: [
          { required: true, message: '请输入会员等级', trigger: 'blur' }
        ]
      },
      genderCfg: {
        '0': '男',
        '1': '女',
        '2': '保密'
      },
      channelOptions: []
    }
  },
  created () {
    this.getSupplierOptions()
  },
  mounted () {
    this.getDetail()
    this.getUserAsset()
  },
  methods: {
    getSupplierOptions () {
      this.$http.get('/core/channel/page', { params: { page: 1, limit: -1 } }).then(res => {
        this.channelOptions = res.data.data.list.filter(item => item.type === 1) || []
      })
    },
    getDetail () {
      this.$http.get('/core/app/user/' + this.$route.query.id).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.form = res.data
        this.form.totalInvoicedAmount = res.data.totalInvoicedAmount || 0
        this.form.welfareCount = res.data.welfareCount || 0
        this.form.userLevel = res.data.userLevel || 1

        this.userInfo = res.data
        this.userInfo.phoneCopy = this.userInfo.phone.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
        this.userInfo.idCardCopy = this.userInfo.idCard.replace(/^(\d{6})\d{8}(\w{4})$/, '$1********$2')
        this.userInfo.genderText = this.genderCfg[this.userInfo.gender]
      })
    },
    getUserAsset () {
      this.$http.get('/core/app/user/getUserAsset/' + this.$route.query.id).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.assetInfo = res.data
      })
    },
    handleBack () {
      this.$router.push({ name: 'member-query' })
    },
    changeTab (index) {
      this.tabIndex = index
    },
    handleEdit () {
      this.show = true
      this.getDetail()
    },
    submitForm () {
      this.$refs['memberRef'].validate((valid) => {
        if (valid) {
          this.$http.put('/core/app/user', this.form).then(({ data: res }) => {
            if (res.code === 0) {
              this.$message.success('保存成功！')
              this.show = false
              this.getDetail()
              this.getUserAsset()
            } else {
              this.$message.error(res.msg || '保存失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    cancel () {
      this.form = {
        id: '',
        nickName: '',
        uniqueNo: '',
        channelId: '',
        xxx: '',
        welfareName: '',
        welfareSlogan: '',
        totalInvoicedAmount: 0,
        loveValue: 0,
        welfareCount: 0,
        userLevel: 0
      }
      this.$refs['memberRef'].resetFields()
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.top {
    padding-bottom: 13px;
    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
    .back {
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
        span {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #00AE57;
            line-height: 20px;
            margin-left: 6px;
        }
    }
    .line {
        width: 1px;
        height: 16px;
        background: #F0F1F7;
        margin-left: 14px;
    }
    .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #657588;
        line-height: 20px;
        margin-left: 10px;
    }
}

.title{
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 16px;
  color: #252525;
  line-height: 22px;
  margin-top: 20px;
}

.info{
    margin-top: 20px;
    &-left{
        width: 135px;
        img{
            width: 64px;
            height: 64px;
            margin-bottom: 26px;
        }
    }
    &-right{
        width: calc(100% - 135px);
        flex-wrap: wrap;
        &-pre{
            width: calc(100% / 3);
            margin-top: 20px;
            &-title{
                width: 140px;
                padding-right: 12px;
                box-sizing: border-box;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #646464;
                line-height: 16px;
                text-align: right;
            }
            &-content{
                width: calc(100% - 140px);
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #393939;
                line-height: 16px;
            }
        }
    }
}

.nums{
    margin-top: 16px;
    padding-bottom: 10px;
    .nums-pre{
        width: 25%;
        p{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #646464;
            line-height: 16px;
            text-align: center;
            margin: 0;
            &.num{
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                font-size: 24px;
                color: #252525;
                line-height: 24px;
                margin-top: 12px;
            }
        }
    }
}

.tab{
    padding-bottom: 18px;
    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
    &-pre{
        position: relative;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #252525;
        line-height: 16px;
        margin-left: 64px;
        cursor: pointer;
        &:first-child{
            margin-left: 0;
        }
        &.active{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #252525;
            line-height: 16px;
            &::after{
                content: '';
                width: 48px;
                height: 4px;
                background: #00AE57;
                border-radius: 2px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -18px;
            }
        }
    }
}

.table{
    margin-top: 18px;
}
</style>