Merge branch 'feature/zjx2' into 'develop'

Feature/zjx2

See merge request !9

src/components/selectHospital/api.js

+//
+import request from 'mn-template/plugins/http';
+export const getHospitalList = (data) => {
+  return request({
+    method: 'POST',
+    data,
+    url: 'store/admin/customer/list/dropdown',
+    withCredentials: true,
+  });
+};

src/components/selectHospital/index.vue

+<template>
+  <van-popup
+    v-show="show"
+    v-model="show"
+    closeable
+    round
+    position="bottom"
+    :style="{ height: '560px',overflow:hidden }"
+    @close="close"
+  >
+    <div class="select-hospital">
+      <div class="select-hospital-title">
+        选择检测机构
+      </div>
+      <div class="select-hospital-input">
+        <van-search
+          v-model="searchValue"
+          shape="round"
+          show-action
+          background="#fff"
+          placeholder="输入检测地点"
+          @blur="getHospitalList(false)"
+        >
+          <template #action>
+            <div @click="cancel">
+              取消
+            </div>
+          </template>
+        </van-search>
+      </div>
+      <div class="select-hospital-list">
+        <van-list
+          v-if="list.length >0"
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell
+            v-for="(item,index) in list"
+            :key="index"
+            class="list-item"
+            @click="selectItem(item)"
+          >
+            <div
+              class="list-item-name"
+              v-html="$commonJs.highLight(item.hospitalName, searchValue)"
+            />
+            <!-- <div class="list-item-name">
+              {{ item.hospitalName }}
+            </div> -->
+            <div class="list-item-address">
+              {{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}{{ item.townName }}
+            </div>
+            <div
+              v-if="hospitalId == item.hospitalId"
+              class="list-item-icon"
+            />
+          </van-cell>
+        </van-list>
+        <div
+          v-else
+          class="select-hospital-nodata"
+        >
+          <img
+            class="img"
+            src="@/assets/images/nodata.png"
+            alt=""
+          >
+          <div class="text">
+            暂未搜索到相关检测点
+          </div>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import {getHospitalList} from './api';
+export default {
+  props: {
+    hospitalId: {
+      type: Number,
+      default:() => null
+    },
+    show: {
+      type: Boolean,
+      default:() => false
+    }
+  },
+  data() {
+    return {
+      hospitalName: '',
+      list: [],
+      loading: false,
+      finished: false,
+      pageNum: 0,
+      pageSize: 50,
+      searchValue:''
+    };
+  },
+  mounted() {
+    this.getHospitalList(false);
+  },
+  methods: {
+    // 获取机构列表
+    getHospitalList(isLoad) {
+      this.finished = false;
+      this.pageNum = isLoad ? this.pageNum + 1 : 1;
+      const data = {
+        certifyStatus: '0',
+        hospitalId: '',
+        hospitalIds: [],
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        searchStr: this.searchValue,
+      };
+      console.log(data);
+      getHospitalList(data).then(res => {
+        console.log(res.data.list);
+        if (isLoad) {
+          this.list = [...this.list, ...res.data.list];
+        } else {
+          this.list = res.data.list;
+        }
+        if (res.data.list.length < this.pageSize) {
+          this.finished = true;
+        }
+        this.loading = false;
+
+      });
+    },
+    selectItem(item) {
+      console.log(item);
+      this.$emit('change', item);
+    },
+    cancel() {
+      this.finished = false;
+      this.searchValue = '';
+      this.pageNum = 0;
+      this.onLoad();
+
+    },
+    onLoad() {
+      this.loading = true;
+      this.finished = false;
+      this.getHospitalList(true);
+    },
+    close() {
+      this.$emit('close', 'showselectHospital');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.select-hospital{
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+}
+.select-hospital-title{
+  position: absolute;
+  width: 100%;
+  top: 0;
+  padding-top: 18px;
+  padding-bottom: 21px;
+  height: 18px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #02120F;
+  line-height: 18px;
+  text-align: center;
+  }
+  .select-hospital-input{
+    position: absolute;
+    width: calc(100% - 15px);
+    top: 58px;
+    padding-right: 15px;
+    border-bottom: 1px solid #ebedf0;
+    /deep/ .van-search__action{
+      padding-left:  13px;
+      padding-right: 0;
+    }
+   }
+   .select-hospital-list{
+    padding-top: 120px;
+    height: calc(100% - 120px);
+    overflow: hidden;
+    // position: absolute;
+    // top: 100px;
+    // left: 0;
+    // right: 0;
+    // bottom: 0;
+    // min-height: 450px;
+    // height: 450px;
+    .van-list{
+      height: 100%;
+      overflow: auto;
+      .list-item{
+        position: relative;
+        padding-top: 14px;
+        padding-bottom: 12px;
+        &-name{
+          height: 15px;
+          font-size: 15px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #212121;
+          line-height: 15px;
+          margin-bottom: 12px;
+        }
+        &-address{
+          height: 12px;
+          font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 12px
+        }
+        &-icon{
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 19px;
+          height: 19px;
+          background: url('~@/assets/images/icon-4.png') 0 0 / 100%
+            100% no-repeat;
+        }
+      }
+    }
+    .select-hospital-nodata{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+
+      .img{
+        width: 155px;
+        height: 85px;
+        margin: 21px auto;
+      }
+      .text{
+        height: 25px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #02120F;
+        line-height: 25px;
+      }
+    }
+   }
+
+</style>

src/components/selectTime/api.js

+//
+import request from 'mn-template/plugins/http';
+export const getHospitalList = (data) => {
+  return request({
+    method: 'POST',
+    data,
+    url: 'store/admin/customer/list/dropdown',
+    withCredentials: true,
+  });
+};

src/components/selectTime/index.vue

+<template>
+  <van-popup
+    v-show="show"
+    v-model="show"
+    closeable
+    round
+    position="bottom"
+    :style="{ height: '560px',overflow:hidden }"
+    @close="close"
+  >
+    <div class="select-time">
+      <div class="select-time-title">
+        预约时间
+      </div>
+      <div class="select-time-list">
+        <div class="time-list-left">
+          <div
+            v-for="item in timsArray"
+            :key="item"
+            class="text"
+            :class="selectTimes === item ?'selected':''"
+            @click="selectTime(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="time-list-right">
+          <div
+            class="text"
+            :class="selectTimeBucket === 'am' ?'selected':''"
+            @click="selectTimeB('am')"
+          >
+            上午
+          </div>
+          <div
+            class="text"
+            :class="selectTimeBucket === 'pm' ?'selected':''"
+            @click="selectTimeB('pm')"
+          >
+            下午
+          </div>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+// import {getHospitalList} from './api';
+export default {
+  props: {
+    hospitalId: {
+      type: Number,
+      default:() => null
+    },
+    show: {
+      type: Boolean,
+      default:() => false
+    }
+  },
+  data() {
+    return {
+      hospitalName: '',
+      timsArray: [],
+      selectTimes: '',
+      selectTimeBucket:'',
+      loading: false,
+      finished: false,
+      pageNum: 0,
+      pageSize: 50,
+      searchValue: '',
+      timeBucket: {
+        am: '上午',
+        pm: '下午',
+      },
+    };
+  },
+  mounted() {
+    this.getTimes();
+  },
+  methods: {
+    // 获取机构列表
+
+    selectItem() {
+      if (this.selectTimes === '') {
+        this.$toast('请选择日期');
+        return;
+      }
+      if (this.selectTimeBucket === '') {
+        this.$toast('请选择时间段');
+        return;
+      }
+      this.$emit('change', this.selectTimes + ' ' + this.timeBucket[this.selectTimeBucket]);
+    },
+    cancel() {
+      this.finished = false;
+      this.searchValue = '';
+      this.pageNum = 0;
+      this.onLoad();
+
+    },
+    close() {
+      this.$emit('close', 'showSelectTime');
+    },
+    getTimes() {
+      this.timsArray = [];
+      const current = new Date().getTime();
+      const ss = 24 * 60 * 60 * 1000;
+      for (let i = 5; i < 35; i++) {
+        var addTime = i * ss + current;
+        var myDate = new Date(addTime);
+        var year = myDate.getFullYear();
+        var month = myDate.getMonth() + 1;
+        var date = myDate.getDate();
+        var timeStr = year + '-' + this.plusZero(month) + '-' + this.plusZero(date);
+        this.timsArray.push(timeStr);
+      }
+    },
+    plusZero(num) {
+      return num > 9 ? num + '' : '0' + num;
+    },
+    selectTime(item) {
+      this.selectTimes = item;
+     this.selectItem();
+    },
+    selectTimeB(item) {
+      this.selectTimeBucket = item;
+      this.selectItem();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.select-time{
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+}
+.select-time-title{
+  position: absolute;
+  width: 100%;
+  top: 0;
+  padding-top: 18px;
+  padding-bottom: 21px;
+  height: 18px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #02120F;
+  line-height: 18px;
+  text-align: center;
+  border-bottom: 1px solid #ebedf0;
+  }
+
+   .select-time-list{
+    padding-top: 59px;
+    height: calc(100% - 59px);
+    overflow: hidden;
+    display: flex;
+    .time-list-left{
+      width: 130px;
+      height: 100%;
+      overflow: auto;
+      background: #F5F6F8;
+      .text{
+        width: 130px;
+        font-size: 16px;
+        text-align: center;
+        height: 38px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #02120F;
+        line-height: 38px;
+      }
+    }
+    .time-list-right{
+      padding: 10px 0;
+      .text{
+        padding-left: 22px;
+        height: 41px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 41px;
+      }
+    }
+   }
+   .selected{
+    color: #00BDA5 !important;
+    background: #FFFFFF
+   }
+
+</style>

src/main.js

@@ -4,9 +4,11 @@ import { PicaArea } from 'pica-area';
 console.log('router, store, vueApp: ', router, store, vueApp);
 const { Vue } = window;
 import Loading from '@/components/loading/loading.js';
+import commonJs from '@/utils/common';
 import '@/assets/js/flexible';
 Vue.use(Loading);
 Vue.use(PicaArea);
+Vue.prototype.$commonJs = commonJs;
 // 禁用双指放大
 var lastTouchEnd = 0;
 document.addEventListener('touchstart', function (event) {

src/utils/common.js

+export default {
+  highLight: function (str, val) {
+    // str 表示原字符串
+    // val 高亮的文本
+    if (str !== '' || !val) {
+      str = str.replace(val, `<span style="color:#00BDA5">${val}</span>`);
+      return str;
+    }
+    return str;
+  },
+  callPhone: function (phone) {
+    window.location.href = `tel:${phone}`;
+  },
+};

src/views/appoint/index.vue

@@ -61,29 +61,49 @@
             @click="showAreaFn"
           />
           <van-field
-            v-model="password"
+            v-model="dectionForm.hospitalName"
             class="appoint-form-items"
-            type="password"
             label="检测地点"
+            disabled
             right-icon="arrow"
             placeholder="请选择检测机构"
             :rules="[{ required: true, message: '请选择检测机构' }]"
-          />
+            @click="showPopup('showselectHospital')"
+          >
+            <template #input>
+              <div
+                v-if="!dectionForm.hospitalName"
+                class="appoint-form-placeholder"
+              >
+                请选择检测机构
+              </div>
+              <div
+                v-else
+                class="appoint-form-value"
+              >
+                {{ dectionForm.hospitalName }}
+              </div>
+            </template>
+          </van-field>
           <van-field
             name="checkboxGroup"
             label="预约时间"
             required
             right-icon="arrow"
+            @click="showPopup('showSelectTime')"
           >
             <template #input>
               <div
-                v-if="false"
+                v-if="!dectionForm.time"
                 class="appoint-form-placeholder"
               >
                 请选择预约时间
               </div>
-              <div class="appoint-form-value">
-                {{ dectionForm.detectName }}
+              <div
+                v-else
+                class="appoint-form-value"
+              >
+                {{ dectionForm.time }}
               </div>
             </template>
           </van-field>
@@ -98,6 +118,17 @@
         提交
       </van-button>
     </div>
+    <SelectHospital
+      :show="showselectHospital"
+      :hospital-id="hospitalId"
+      @change="selectHospital"
+      @close="close"
+    />
+    <SelectTime
+      :show="showSelectTime"
+      @change="selectTimes"
+      @close="close"
+    />
     <PicaArea
       v-model="showArea"
       @confirm="confirm"
@@ -106,9 +137,12 @@
 </template>
 
 <script>
+import SelectHospital from '@/components/selectHospital/index.vue';
+import SelectTime from '@/components/selectTime/index.vue';
 export default {
   components: {
-
+    SelectHospital,
+    SelectTime,
   },
   data() {
     return {
@@ -119,8 +153,10 @@ export default {
         currentDate: '',
         timeBucket: '',
         hospitalId: '',
+        hospitalName:'',
         goodsId: '',
       },
+      showselectHospital:false,
       showArea:false,
       reportShow: false,
       placeList: [],
@@ -138,8 +174,10 @@ export default {
         label: '',
       },
       isShowAddress: false,
+      showSelectTime:false,
       isSelf: false,
       spEquityCode: '',
+      hospitalId:''
     };
   },
   computed: {
@@ -152,14 +190,17 @@ export default {
       );
     },
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     choose() {},
     submit() {},
     chooseHospital() {},
     getMeixinHospitalList() {},
     chooseDate() {},
-    chooseTime() {},
+    selectTimes(times) {
+      console.log(times);
+    },
     getTimes() {
       this.timsArray = [];
       const current = new Date().getTime();
@@ -178,14 +219,25 @@ export default {
     plusZero(num) {
       return num > 9 ? num + '' : '0' + num;
     },
-    inputChange() {},
+    showPopup(name) {
+      console.log(name);
+      this[name] = true;
+    },
+    close(name) {
+      this[name] = false;
+    },
     cancelSearch() {},
     selectAddress() {},
     onConfirm() {},
-    onCancel() {},
+
     getDetailByUnionId() { },
     confirm() {
 
+    },
+    selectHospital({hospitalId, hospitalName}) {
+      this.hospitalId = hospitalId;
+      this.dectionForm.hospitalName = hospitalName;
+      this.showselectHospital = false;
     },
     showAreaFn() {
       this.showArea = true;
@@ -222,8 +274,8 @@ export default {
     font-weight: 600;
   }
   .title-2 {
-    margin-top: 4rpx;
-    font-size: 24rpx;
+    margin-top: 2px;
+    font-size: 12px;
   }
   .appoint-form-title{
     font-size: 14px;
@@ -244,6 +296,10 @@ export default {
     /deep/ .van-field__label{
       color: #212121;
     }
+    /deep/ .van-field__control:disabled{
+      color: #323233;
+      -webkit-text-fill-color: #323233;
+    }
     .item {
       color: #212121;
       font-size: 14px;
@@ -341,7 +397,7 @@ export default {
     }
   }
   .pop-wrap {
-    width: calc(100% - 64rpx);
+    width: calc(100% - 32px);
     padding: 0 16px;
     .tab-list {
       position: relative;
@@ -398,7 +454,7 @@ export default {
       position: absolute;
       top: 58px;
       left: 130px;
-      width: calc(100% - 260rpx);
+      width: calc(100% - 130px);
       .right-item {
         padding-left: 22px;
         width: 100%;
@@ -406,7 +462,7 @@ export default {
         font-size: 16px;
         font-weight: 400;
         color: #666666;
-        line-height: 82rpx;
+        line-height: 41px;
       }
       .right-item-active {
         color: #00bda5;
@@ -419,27 +475,7 @@ export default {
   .disabled {
     background: #d9d9d9 !important;
   }
-  .no-content {
-    font-size: 36rpx;
-    font-weight: 500;
-    color: #02120f;
-    .no-content-img {
-      width: 310rpx;
-      height: 171rpx;
-      margin: 0 auto;
-      margin-top: 169rpx;
-      image {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .mt40 {
-      margin-top: 40rpx;
-      width: 100%;
-      text-align: center;
-      font-size: 36rpx;
-    }
-  }
+
   .appoint-form-submit{
     margin-top: 30px;
     height: 40px;

vue.config.js

@@ -30,7 +30,25 @@ module.exports = {
           });
           config.plugins.delete('prefetch');
           config.plugins.delete('preload');
-        }
+  },
+  devServer: {
+    port: 8083,
+    proxy: {
+      '/proxy': {
+        target: 'https://dev-sc.yunqueyi.com/',
+        // target: 'https://test1-sc.yunqueyi.com/',
+        // target: 'https://uat-sc.yunqueyi.com/',
+        // http://10.241.65.90:3000/mock/1071/cs/route/removeUser
+        // target: 'http://10.241.65.90:3000/mock/1067',
+        ws: false,
+        changeOrigin: true,
+        secure: true,
+        pathRewrite: {
+          '^/proxy': '/',
+        },
+      },
+    },
+  },
 };
 
 module.exports.publicPath = process.env.VUE_APP_ENV === 'development' && process.env.VUE_APP_IS_LOCAL ? process.env.BASE_URL : `${process.env.VUE_APP_OSS_URL}/static${process.env.BASE_URL}`;