OfficeApp/subpkg/archivesDetail/archivesDetail.vue

<template>
  <view class="">
    <view class="top_box">
      <view class="item" :class="current==0?'active':''" @click="current=0">基本信息</view>
      <view class="item" :class="current==1?'active':''"  @click="current=1">商机信息</view>
    </view>
    <view class="card" v-show="current==0">
      <u--form labelPosition="left" :model="formData" ref="archives">
        <view class="item">
          <view class="title">基本信息</view>
          <u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
            <u--input v-model="formData.name" :readonly="readonly" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <u-form-item label="性别" required prop="sex" borderBottom>
            <u-radio-group v-model="formData.sex" :disabled="readonly" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'男'},{value:2,label:'女'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="年龄" required prop="age" borderBottom>
            <u--input v-model="formData.age" :readonly="readonly" placeholder="请输入年龄"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
            <u--input v-model="formData.id_card" :readonly="readonly" placeholder="请输入身份证号" type="idcard"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
            <u--input v-model="formData.phone" :readonly="readonly" placeholder="请输入手机号" type="number"></u--input>
          </u-form-item>
        </view>
        <view class="item">
          <districtSelector ref="districtSelectorRef" :datas="formData" :readonly="true"></districtSelector>
          <u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
            <u--input v-model="formData.address" :readonly="readonly" placeholder="请输入详细地址"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="汽车是否能到家" required prop="highway" borderBottom>
            <u-radio-group v-model="formData.highway" :disabled="readonly" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <block value="智能手机">
            <u-form-item labelWidth="auto" label="是否使用智能手机" required prop="smart_phone" borderBottom>
              <u-radio-group v-model="formData.smart_phone" :disabled="readonly" style="margin: 16rpx;">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <block v-if="formData.smart_phone>0">
              <u-form-item labelWidth="auto" label="微信号" required borderBottom>
                <u--input v-model="formData.wechat" :readonly="readonly" placeholder="请输入微信号"></u--input>
              </u-form-item>
            </block>
          </block>
        </view>
        <residents ref="residentsRef" :readonly="true" :datas="formData"></residents>
        <!-- <breeding ref="breedingRef"></breeding> -->
        
      </u--form>
      <!-- <button @click="addArchives" type="primary" class="btn">完成登记</button> -->
    </view>
    <view class="card" style="padding-top: 1rpx;" v-show="current==1">
      <block v-for="(item, index) in formData.datas" :key="'demand'+index+item.id">
        <block>
          <breeding v-if="item.id==7" :datas="item.datas" :readonly="true" ref="demandRef7"></breeding>
          <store v-if="item.id==8" :datas="item.datas" :readonly="true" ref="demandRef8"></store>
          <deepProcessing v-if="item.id==9" :datas="item.datas" :readonly="true" ref="demandRef9"></deepProcessing>
          <thickProcessing v-if="item.id==10" :datas="item.datas" :readonly="true" ref="demandRef10"></thickProcessing>
        </block>
        <block>
          <houseRepair v-if="item.id==12" :datas="item.datas" :readonly="true" ref="demandRef12"></houseRepair>
          <houseDecoration v-if="item.id==13" :datas="item.datas" :readonly="true" ref="demandRef13"></houseDecoration>
          <houseRenovate v-if="item.id==14" :datas="item.datas" :readonly="true" ref="demandRef14"></houseRenovate>
          <houseTransaction v-if="item.id==15" :datas="item.datas" :readonly="true" ref="demandRef15"></houseTransaction>
        </block>
        <block>
          <banquetMarry v-if="item.id==17" :datas="item.datas" :readonly="true" ref="demandRef17"></banquetMarry>
          <banquetBirthday v-if="item.id==18" :datas="item.datas" :readonly="true" ref="demandRef18"></banquetBirthday>
          <banquetFullMoon v-if="item.id==19" :datas="item.datas" :readonly="true" ref="demandRef19"></banquetFullMoon>
          <banquetOther v-if="item.id==20" :datas="item.datas" :readonly="true" ref="demandRef20"></banquetOther>
          <banquetFuneral v-if="item.id==21" :datas="item.datas" :readonly="true" ref="demandRef21"></banquetFuneral>
        </block>
      </block>
    </view>
  </view>
</template>

<script>
  import { Toast } from "../../libs/uniApi"
  import { informationAdd, informationDetails } from "@/api/information.js"
  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
  import residents from "@/components/newArchives/residents.vue" // 常住人口
  import breeding from "@/components/newArchives/breeding.vue" // 种养殖
  import store from "@/components/newArchives/store.vue" // 开设店铺
  import deepProcessing from "@/components/newArchives/deepProcessing.vue" // 深加工
  import thickProcessing from "@/components/newArchives/thickProcessing.vue" // 粗加工
  import houseRepair from "@/components/newArchives/houseRepair.vue" // 修房
  import houseDecoration from "@/components/newArchives/houseDecoration.vue" // 装房
  import houseRenovate from "@/components/newArchives/houseRenovate.vue" // 翻新
  import houseTransaction from "@/components/newArchives/houseTransaction.vue" // 买卖房子
  import banquetMarry from "@/components/newArchives/banquetMarry.vue" // 婚宴
  import banquetBirthday from "@/components/newArchives/banquetBirthday.vue" // 寿宴
  import banquetFullMoon from "@/components/newArchives/banquetFullMoon.vue" // 满月酒
  import banquetOther from "@/components/newArchives/banquetOther.vue" // 其他庆祝宴
  import banquetFuneral from "@/components/newArchives/banquetFuneral.vue" // 白事
  export default {
    components: { districtSelector, residents, breeding, store, deepProcessing, thickProcessing, houseRepair, houseDecoration, houseRenovate,houseTransaction, banquetMarry, banquetBirthday,banquetFullMoon, banquetOther, banquetFuneral },
    data() {
      return {
        readonly: true,
        current: 0,
        showDemandList: [],
        formData: {
          id_card: '',
          sex: '',
          name: '',
          phone: '', //电话
          highway: '', //汽车是否能到家
          smart_phone: '', //是否使用智能手机
          wechat: '', //微信号
          address: '', //家庭地址
          age: '', //年龄
          category_id: 1,
          category_child: 1,
          data_type: '1',
        },
        
      }
    },
    onLoad(options) {
      this.initInformationDetails({id:options.id})
    },
    onShow() {},
    methods: {
      async initInformationDetails(id){
        let res = await informationDetails(id);
        this.formData = res.data;
      },
      toastShow(){
        Toast('不可修改')
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .top_box{
    background-color: #fff;
    display: flex;
    
    .item{
      width: 175rpx;
      height: 53rpx;
      background: #F5F5F5FF;
      color: #999999FF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 28rpx;
    }
    .active{
      background: $theme-oa-color;
      color: #fff;
    }
  }
  .card {
    background-color: #fff;
    margin: 28rpx;
    padding: 28rpx;
    border-radius: 14rpx;

    .item {
      margin-top: 30rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .title {
        font-weight: 500;
        font-size: 34rpx;

        &::before {
          width: 8rpx;
          height: 26rpx;
          border-radius: 4rpx;
          background-color: #3175f9;
          content: "";
          display: inline-block;
          margin-right: 8rpx;
        }
      }
    }

    .btn {
      margin-top: 32rpx;
      // margin-bottom: 40rpx;
      width: 100%;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }
  }

  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .demand {
    margin-top: 40rpx;
    margin-bottom: 50rpx;
  }
</style>