From 49db004ad0187f83b7104baaa05fa6ef988cf5b3 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 22 Sep 2022 16:10:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B8=E9=85=B8=E9=87=87=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pingchang/AppCommunityManagement/Add.vue  |   2 +
 .../pingchang/AppNucleicAcidSampling/Add.vue  | 207 ++++++++++++++
 .../AppNucleicAcidSampling.vue                | 253 ++++++++++++++++++
 .../AppNucleicAcidSampling/Detail.vue         | 222 +++++++++++++++
 4 files changed, 684 insertions(+)
 create mode 100644 src/project/pingchang/AppNucleicAcidSampling/Add.vue
 create mode 100644 src/project/pingchang/AppNucleicAcidSampling/AppNucleicAcidSampling.vue
 create mode 100644 src/project/pingchang/AppNucleicAcidSampling/Detail.vue

diff --git a/src/project/pingchang/AppCommunityManagement/Add.vue b/src/project/pingchang/AppCommunityManagement/Add.vue
index d61c6737..d4632926 100644
--- a/src/project/pingchang/AppCommunityManagement/Add.vue
+++ b/src/project/pingchang/AppCommunityManagement/Add.vue
@@ -195,6 +195,8 @@ export default {
     padding: 24px 32px;
     box-sizing: border-box;
     display: flex;
+    position: fixed;
+    bottom: 0;
     div {
       flex: 1;
       height: 80px;
diff --git a/src/project/pingchang/AppNucleicAcidSampling/Add.vue b/src/project/pingchang/AppNucleicAcidSampling/Add.vue
new file mode 100644
index 00000000..576f9ce7
--- /dev/null
+++ b/src/project/pingchang/AppNucleicAcidSampling/Add.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="Add">
+    <p class="title">已采样<span class="num">3</span>次</p>
+    <div class="item mar-b16">
+      <div class="label">
+        <span class="tips">*</span>管理区域
+      </div>
+      <div class="value">
+        <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+          <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+          <span v-else class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
+        </AiAreaPicker>
+      </div>
+    </div>
+    <div class="info mar-b16">
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>管理对象
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>身份证号
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>手机号码
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>居家状态
+        </div>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
+        </div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>隔离时间
+        </div>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          <span class="tips">*</span>隔离策略
+        </div>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
+        </div>
+      </div>
+    </div>
+    <div class="info mar-b16">
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>采样人员
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>联系方式
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+      <div class="item solid">
+        <div class="label">
+          <span class="tips">*</span>采样时间
+        </div>
+        <div class="value">自动获取</div>
+      </div>
+    </div>
+    <div class="btn-height"></div>
+    <div class="footer">
+      <div class="confirm">保存</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      areaId: '',
+      areaName: '',
+      files: []
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+  },
+  onShow() {
+    document.title = '核酸采样'
+  },
+  methods: {
+    areaSelect(e) {
+      this.areaId = e
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.Add {
+  background-color: #F3F6F9;
+  .title {
+    line-height: 96px;
+    padding-left: 32px;
+    font-size: 30px;
+    color: #666;
+    .num {
+      font-size: 32px;
+      font-weight: 700;
+      color: #f46;
+    }
+  }
+  .item {
+    background-color: #fff;
+    display: flex;
+    padding: 40px 0 40px 32px;
+    .label {
+      width: 200px;
+      line-height: 48px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #666;
+      .tips {
+        display: inline-block;
+        font-family: PingFangSC-Medium;
+        font-weight: 700;
+        font-size: 34px;
+        color: #F46;
+        margin-right: 8px;
+        vertical-align: text-top;
+      }
+    }
+    .value {
+      width: calc(100% - 200px);
+      padding-right: 32px;
+      text-align: right;
+      font-family: PingFangSC-Regular;
+      font-size: 34px;
+      color: #333;
+      .color-999 {
+        color: #999;
+        font-size: 30px;
+      }
+    }
+    textarea {
+      width: 100%;
+    }
+  }
+  ::v-deep uni-textarea{
+    width: calc(100% - 32px);
+  }
+  .info {
+    padding-left: 32px;
+    background-color: #fff;
+    .item {
+      padding-left: 0;
+    }
+    .solid {
+      border-bottom: 1px solid #ddd;
+      box-sizing: border-box;
+    }
+  }
+  .mar-b16 {
+    margin-bottom: 16px;
+  }
+  .btn-height{
+    height: 130px;
+  }
+  .footer {
+    width: 100%;
+    height: 112px;
+    position: fixed;
+    bottom: 0;
+    .confirm {
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      text-align: center;
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      background-color: #1365DD;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/project/pingchang/AppNucleicAcidSampling/AppNucleicAcidSampling.vue b/src/project/pingchang/AppNucleicAcidSampling/AppNucleicAcidSampling.vue
new file mode 100644
index 00000000..aa5875f1
--- /dev/null
+++ b/src/project/pingchang/AppNucleicAcidSampling/AppNucleicAcidSampling.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="AppNucleicAcidSampling">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" 
+        inactive-color="#A1C1E8" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#ffffff " @change="change">
+      </u-tabs>
+      <div class="top-search">
+        <div class="left">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+            <u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
+            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+        <u-search v-model="keyword" :clearabled="true" placeholder="请输入名称、类型或电话" :show-action="false" bg-color="#F5F5F5" 
+          search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear">
+        </u-search>
+      </div>
+    </AiTopFixed>
+    <div class="data-list">
+      <div class="item" @click="toDetail()">
+        <div class="top">
+          <div class="title">
+            <div class="name">
+              李主任
+              <span class="type">返乡登记</span>
+            </div>
+            <div class="status status0"><span></span>核酸待采样</div>
+          </div>
+          <p>429012********2341</p>
+          <p>1834912340</p>
+          <div class="btn" @click="toAdd()">采样</div>
+          <!-- <img src="./components/img/status-img.png" alt="" class="status-img"> -->
+        </div>
+      </div>
+    </div>
+    <!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty> -->
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ appName: '核酸采样',
+  data() {
+    return {
+      keyword: '',
+      currentTabs: 0,
+      tabList: [
+        {
+          name: '待采样',
+        },
+        {
+          name: '已采样',
+        },
+      ],
+      barStyle: {
+        'width': '24px',
+        'height': '2px', 
+        'border-radius': '0',
+        'bottom': '5px'
+      },
+      activeStyle: {
+        'font-weight' : '400',
+      }
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+  },
+  onShow() {
+    document.title = '核酸采样'
+  },
+  methods: {
+    getList() {
+      this.$http.post('/app/appepidemicreportmember/list', null, {
+        params: { size: this.size, current: this.current, status: this.currentTabs == 1 ? '0' : '', areaId: this.areaId, name: this.keyword },
+      }).then((res) => {
+        if (res.code == 0) {
+          this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+        }
+      })
+    },
+
+    toDetail() {
+      uni.navigateTo({url: './Detail'})
+    },
+    toAdd() {
+      uni.navigateTo({url: './Add'})
+    },
+    change(index) {
+      this.keyword = ''
+      this.currentTabs = index
+    },
+    areaSelect(e) {
+      this.areaId = e
+      this.getList()
+    },
+
+    handerSearch(e) {
+      this.keyword = e
+      this.current = 1
+      this.getList()
+    },
+
+    handerClear() {
+      this.keyword = ''
+      this.current = 1
+      this.getList()
+    },
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AppNucleicAcidSampling {
+  height: 100%;
+  ::v-deep .AiTopFixed {
+    .placeholder {
+      .content {
+        padding: 0 !important;
+      }
+    }
+    .fixed {
+      margin: 0 !important;
+      .content {
+        padding: 0 !important;
+      }
+    }
+  }
+  .top-search {
+    padding: 20px 32px;
+    display: flex;
+    .left{
+      width: calc(100% - 402px);
+    }
+  }
+  .data-list {
+    padding: 32px 32px 0;
+    .item {
+      width: 100%;
+      background: #FFF;
+      border-radius: 16px;
+      .top {
+        padding: 32px 32px 24px 32px;
+        position: relative;
+        .title {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 24px;
+          .name {
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            font-size: 32px;
+            color: #000;
+            .type {
+              line-height: 34px;
+              font-family: PingFangSC-Regular;
+              font-weight: 400;
+              font-size: 24px;
+              color: #3975C6;
+              padding: 2px 4px;
+              background-color: #F6F9F5;
+              margin-left: 24px;
+            }
+          }
+          .status {
+            line-height: 20px;
+            font-family: PingFangSC-Regular;
+            font-size: 28px;
+            span {
+              display: inline-block;
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              margin-right: 8px;
+            }
+          }
+          .status0 {
+            color: #FFA938;
+            span {
+              background-color: #FFA938;
+            }
+          }
+          .status0 {
+            color: #1CCEB0;
+            span {
+              background-color: #1CCEB0;
+            }
+          }
+        }
+        p {
+          line-height: 40px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #666;
+          margin-bottom: 8px;
+        }
+        .btn {
+          width: 160px;
+          height: 56px;
+          text-align: center;
+          line-height: 54px;
+          background: #FFF;
+          border: 1px solid #1365DD;
+          border-radius: 4px;
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 32px;
+          right: 32px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #1365DD;
+        }
+        .status-img {
+          position: absolute;
+          bottom: 0;
+          right: 32px;
+          width: 160px;
+          height: 160px;
+        }
+      }
+      .bottom {
+        border-top: 2px solid #D8DDE6;
+        padding: 32px;
+        .text {
+          line-height: 40px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #666;
+          letter-spacing: 0.58px;
+        }
+        span {
+          display: inline-block;
+          color: #3975C6;
+          margin-right: 32px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/pingchang/AppNucleicAcidSampling/Detail.vue b/src/project/pingchang/AppNucleicAcidSampling/Detail.vue
new file mode 100644
index 00000000..5a07315c
--- /dev/null
+++ b/src/project/pingchang/AppNucleicAcidSampling/Detail.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="Detail">
+    <div class="info">
+      <div class="title">基本信息</div>
+      <div class="item-flex">
+        <div class="label">管理区域</div>
+        <div class="value">{{info.name}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">管理对象</div>
+        <div class="value">{{info.idNumber}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">身份证号</div>
+        <div class="value">{{info.idNumber}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">手机号码</div>
+        <div class="value" style="color:#4181FF;" @click="callPhone(info.phone)">
+          <img :src="$cdn + 'common/phone.png'" alt="" class="phone-icon" >
+          {{info.phone}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">居家状态</div>
+        <div class="value">{{info.idNumber}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">隔离时间</div>
+        <div class="value">{{info.idNumber}}</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">隔离策略</div>
+        <div class="value">{{info.idNumber}}</div>
+      </div>
+    </div>
+    <div class="line-bg"></div>
+    <div class="info">
+      <div class="title">核酸采集信息（已采样<span style="color:#f46;">3</span>次）</div>
+      <div class="error-list">
+        <div class="item">
+          <div>
+            <span>采样人：张三</span>
+            <span>联系方式：18164065622</span>
+          </div>
+          <p>采样时间：2022-09-22 16:06:59</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      id: '',
+      info: {},
+      list: []
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onShow() {
+    document.title = '采样信息'
+  },
+  onLoad(option) {
+    // this.$dict.load('epidemicRecentPersonType', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicRecentTestResult', 'epidemicRecentHealth').then(() => {
+    //   this.id = option.id
+    //   this.getDetail()
+    //   this.getList()
+    // })
+    // uni.$on('updateDetail', () => {
+    //   this.getList()
+    //   this.getDetail()
+    // })
+  },
+  methods: {
+    getList() {
+      this.$http.post(`/app/appepidemicunusuallog/list?recordId=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.list = res.data.records
+        }
+      })
+    },
+    getDetail() {
+      this.$http.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          if(res.data.checkTime) {
+            res.data.checkTime = res.data.checkTime.substring(0, 10)
+          }
+          this.info = res.data
+          this.info.checkPhoto = JSON.parse(this.info.checkPhoto)
+          this.info.health = this.info.health.split(',')
+          this.info.idNumber = res.data.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")
+        }
+      })
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map(v => v.url),
+        current: img
+      })
+    },
+    toError() {
+      uni.navigateTo({url: `./ErrorInfo?id=${this.id}`})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Detail {
+  .info{
+    background-color: #fff;
+    padding: 0 32px;
+    .title{
+      line-height: 116px;
+      background: #FFF;
+      font-size: 38px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333;
+    }
+    .item-flex{
+      padding: 34px 0;
+      border-bottom: 1px solid #ddd;
+      display: flex;
+      justify-content: space-between;
+      line-height: 44px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      .label{
+        width: 206px;
+        color: #999;
+      }
+      .value{
+        width: calc(100% - 206px);
+        word-break: break-all;
+        color: #333;
+        text-align: right;
+        .phone-icon{
+          width: 40px;
+          height: 40px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+      .color-0{
+        color: #42D784;
+      }
+      .color-1{
+        color: #f46;
+      }
+      .color-2{
+        color: #1365DD;
+      }
+    }
+    .img-list{
+      padding-bottom: 32px;
+      img{
+        width: 320px;
+        height: 320px;
+      }
+    }
+    .item-flex:nth-last-of-type(1){
+      border-bottom: 0;
+    }
+    .error-list {
+      padding-bottom: 48px;
+      .item {
+        width: 100%;
+        background: #f4f7fe;
+        border-radius: 8px;
+        padding: 24px 24px 18px 24px;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        color: #343d65;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        line-height: 40px;
+        div {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 16px;
+        }
+      }
+    }
+    .text-p{
+      line-height: 44px;
+      color: #333;
+      padding-bottom: 16px;
+    }
+  }
+  .line-bg{
+    width: 100%;
+    height: 24px;
+    background-color: #F3F6F9;
+  }
+  .footer{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365DD;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  .border-none{
+    border-bottom: 0!important;
+  }
+}
+</style>