detail.vue

<template>
  <div class="flow">
    <div class="content">
      <div class="left" v-if="customerInfo !== ''">
        <div class="title"><span class="point"></span>客户信息</div>
        <div class="info">
          <div class="item">
            <span class="label">姓名：</span>
            <a-input :value="customerInfo.name" disabled></a-input>
          </div>
          <div class="item">
            <span class="label">性别：</span>
            <a-input :value="customerInfo.sex == 'M' ? '女' : '男'" disabled />
          </div>
          <div class="item">
            <span class="label">婚姻状况</span>
            <a-radio-group v-model="customerInfo.maritalStatus" disabled>
              <a-radio value="01">未婚 </a-radio>
              <a-radio value="02">已婚</a-radio>
            </a-radio-group>
          </div>
          <div class="item">
            <span class="label">身份证：</span>
            <a-input :value="customerInfo.idNo" disabled />
          </div>
          <div class="item">
            <span class="label">手机号码：</span>
            <a-input :value="customerInfo.phone" disabled />
          </div>
          <div class="item">
            <span class="label">出生日期：</span>
            <a-input :value="customerInfo.birthDate" disabled />
          </div>
        </div>
      </div>

      <div class="right">
        <!-- 预约详情 -->
        <div class="detail">
          <div class="title"><span class="point"></span>预约详情</div>
          <ul class="items" v-for="item in appointmentList" :key="item.id">
            <li>
              <div class="label">已选套餐：</div>
              <div class="detail_content">
                {{item.servicepackageName}}
              </div>
            </li>
            <li>
              <div class="label">已选体检中心：</div>
              <div class="detail_content">{{item.checkUnitName}}</div>
            </li>
            <li>
              <div class="label">已选体检中心地址：</div>
              <div class="detail_content">{{item.shopAddress}}</div>
            </li>
            <li>
              <div class="label">预约日期:</div>
              <div class="detail_content">{{item.serviceAppDate}}</div>
            </li>
          </ul>
          <div class="tips">
            <img :src="tips" alt="" />
            <span class="desc"
              >请耐心等待体检确认，预约成功后将发送短信给您，如需改约请致电客服</span
            >
          </div>
          <div class="btns">
            <a-button type="primary" disabled> 预约中 </a-button>
            <a-button type="primary" @click="goIndexPage"> 回首页 </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import AppointmentDetail from './components/appointmentDetail'
import api from '@/api/customer'
import { log } from 'util'
export default {
  name: 'Detail',
  components: {
    // AppointmentDetail,
  },
  data() {
    return {
      id: '', //客户id
      customerInfo: {
        name: '',
        sex: '',
        idNo: '',
        phone: '',
        birthDate: '',
        maritalStatus: '',
      }, //客户信息
      tips: require('../../assets/imgs/detail/tips.png'),
      appointmentList: [], //已预约列表
    }
  },
  created() {
    const { id } = this.$route.query
    this.id = id
    this.getCustomerDetail()//获取客户信息
    this.getAppointmentList()//获取客户的预约详情
  },
  methods: {
    // 获取客户信息
    getCustomerDetail() {
      api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
        if (res.returnCode == '0000') {
          this.customerInfo = res.content
          console.table('客户信息customerInfo=', this.customerInfo)
        } else {
          this.$message.error(res.returnMsg)
        }
      })
    },
    // 回首页
    goIndexPage() {
      this.$router.push({
        name: 'Index',
        query: {
          id: this.id, //客户id
        },
      })
    },
    // 获取预约详情
    getAppointmentList() {
      api.getAppointmentList({ id: parseInt(this.id) }).then((res) => {
        if (res.returnCode == '0000') {
          console.log('111111111111获取已预约列表==', res.content)
          this.appointmentList = res.content
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.flow {
  background: #fafafa;
  min-height: calc(100vh - 300px);
  .btn {
    text-align: center;
    position: relative;
    left: 360px;
    top: -72px;
  }
  .content {
    padding-top: 20px;
    .point {
      display: inline-block;
      border-radius: 5px;
      width: 6px;
      height: 6px;
      background-color: #3f7ffb;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
    display: flex;
    justify-content: center;
    .left {
      max-height: 480px;
      .reset {
        text-align: center;
        margin-top: 25px;
      }
      .info {
        margin-top: 24px;
        ::v-deep .ant-input {
          border: none;
          background-color: #fafafa;
          height: 42px;
        }
        .item {
          display: flex;
          margin-top: 14px;
          .label {
            display: inline-block;
            width: 120px;
            line-height: 42px;
            font-size: 14px;
            color: #aaaaaa;
            padding-left: 12px;
          }
        }
      }
    }
    .left,
    .right {
      background: white;
      box-shadow: 0px 7px 14px 1px rgba(223, 223, 219, 0.18);
      border-radius: 8px;
      padding: 19px 24px 30px 14px;
      margin-left: 24px;
    }
    .right {
      padding-left: 24px;
    }
    .right {
      margin-left: 30px;
    }
  }
}
.detail {
  .point {
    display: inline-block;
    border-radius: 5px;
    width: 6px;
    height: 6px;
    background-color: #3f7ffb;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  .btns {
    text-align: right;
    padding-right: 10px;
    margin-top: 15px;
    .ant-btn {
      &:nth-child(1) {
        margin-right: 30px;
        font-size: 14px;
        color: white;
        border: none;
      }
    }
  }
  .tips {
    padding-left: 8px;
    img {
      position: relative;
      top: -1px;
    }
    .desc {
      color: #cccccc;
      font-size: 14px;
      margin-left: 4px;
    }
  }
  .items {
    margin-top: 21px;
    padding-left: 10px;
    li {
      margin-top: 15px;
    }
    .label {
      font-size: 14px;
      color: #aaaaaa;
    }
    .detail_content {
      width: 700px;
      color: #333333;
      font-size: 14px;
      line-height: 58px;
      background: #fafafa;
      margin-top: 8px;
      border-radius: 2px;
      position: relative;
      left: -10px;
      padding-left: 10px;
    }
  }
}
</style>