Merge branch 'feature/zl' into 'release'

name reg2

See merge request !275

src/router/index.js

@@ -139,6 +139,14 @@ const routerConfig = [
       title: '惠民保癌筛权益领取',
     },
   },
+  {
+    path: '/tb-public',
+    name: 'tb-public',
+    component: () => import('@/views/tb-public/index.vue'),
+    meta: {
+      title: '太保',
+    },
+  },
   {
     path: '/entitlement',
     name: 'entitlement',

src/views/tb-public/date-picker.vue

+<template>
+  <div class="pica-date-picker">
+    <van-field
+      :border="false"
+      readonly
+      placeholder="请选择出生年月日"
+      :value="value"
+      class="appoint-form-items"
+      @click="handleOpenPopup"
+    />
+    <van-popup
+      v-model="visible"
+      position="bottom"
+      :transition-appear="false"
+    >
+      <van-datetime-picker
+        type="date"
+        title="选择年月日"
+        :value="currentDate"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="handleConfirm"
+        @cancel="visible = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      currentDate: new Date(),
+      minDate: new Date(1900, 0, 1),
+      maxDate: new Date(),
+    };
+  },
+
+  methods: {
+    handleOpenPopup() {
+      if (this.readonly) return;
+      this.visible = true;
+    },
+
+    handleConfirm(value) {
+      this.visible = false;
+      const formatDate = dayjs(value).format('YYYY-MM-DD');
+      this.$emit('input', formatDate);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.pica-date-picker {
+  width: 100%;
+  .van-cell {
+    padding: 0 !important;
+  }
+}
+</style>

src/views/tb-public/index.vue

+<template>
+  <div class="sz-appoint">
+    <page-model
+      v-if="picaWechat != 'wechat'"
+      ref="PageModel"
+      :header-info="headerInfo"
+    />
+    <div class="insurance-register-bg">
+      <div class="bg-img back-img">
+        <img :src="bgPath" />
+      </div>
+      <div class="wrap-reg">
+        <div class="choose-section">
+          <div class="sz-appoint-form-tips">
+            <img
+              src="https://files.yunqueyi.com/image/png/common/20230628155802981.png"
+            />
+          </div>
+          <van-form
+            ref="dectionForm"
+            validate-first
+          >
+            <van-field
+              v-model="dectionForm.name"
+              label="参保人姓名"
+              clearable
+              required
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('name') }"
+              :readonly="isReadonly('name')"
+              placeholder="点击此处输入"
+              :rules="[
+                { required: true, message: '请输入参保人姓名' },
+                {
+                  pattern: /^.{2,40}$/,
+                  message: '参保人姓名请填写2-40位',
+                },
+              ]"
+            />
+            <van-field
+              label="证件类型"
+              required
+              disabled
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('cardTypeName') }"
+              :right-icon="isReadonly('cardTypeName') ? '' : 'arrow'"
+              :readonly="isReadonly('cardTypeName')"
+              @click="
+                !isReadonly('cardTypeName') && (showCardTypeVisible = true)
+              "
+            >
+              <template #input>
+                <van-field
+                  class="van-inner-field"
+                  :value="cardTypeName"
+                  readonly
+                />
+              </template>
+            </van-field>
+            <van-field
+              v-model="dectionForm.idCard"
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('idCard') }"
+              clearable
+              required
+              label="参保人证件号"
+              placeholder="点击此处输入"
+              :rules="rules"
+              :readonly="isReadonly('idCard')"
+            />
+            <van-field
+              v-if="dectionForm.idType != 1"
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('sex') }"
+              required
+              label="参保人性别"
+            >
+              <template #input>
+                <van-radio-group
+                  v-model="dectionForm.sex"
+                  direction="horizontal"
+                  :disabled="isReadonly('sex')"
+                >
+                  <van-radio :name="1"> 男 </van-radio>
+                  <van-radio :name="2"> 女 </van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field
+              v-if="dectionForm.idType != 1"
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('birthTime') }"
+              required
+              label="参保人出生日期"
+              :right-icon="isReadonly('birthTime') ? '' : 'arrow'"
+              :readonly="isReadonly('birthTime')"
+            >
+              <template #input>
+                <DatePicker
+                  v-model="dectionForm.birthTime"
+                  :readonly="isReadonly('birthTime')"
+                />
+              </template>
+            </van-field>
+            <van-field
+              v-model="dectionForm.mobilePhone"
+              class="appoint-form-items"
+              :class="{ 'field-readonly': isReadonly('mobilePhone') }"
+              label="参保人手机号"
+              label-width="100%"
+              clearable
+              required
+              placeholder="点击此处输入"
+              :rules="[
+                { required: true, message: '请输入手机号' },
+                {
+                  pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
+                  message: '手机号格式填写有误',
+                },
+              ]"
+              :readonly="isReadonly('mobilePhone')"
+            >
+              <template #label>
+                <div class="phone-wrap">
+                  参保人手机号
+                  <span class="sm-grey">该手机号将用于接收预约信息</span>
+                </div>
+              </template>
+            </van-field>
+          </van-form>
+        </div>
+        <div
+          v-for="(i, ind) in staticINFO.logoUrlList"
+          :key="ind"
+          class="bg-img mt20"
+        >
+          <img :src="i" />
+        </div>
+      </div>
+    </div>
+    <div class="bottom-btn">
+      <van-button
+        class="btn"
+        :class="canSubmit ? 'appoint-form-submit-active' : ''"
+        @click="appointment"
+      >
+        领取权益
+      </van-button>
+    </div>
+
+    <!-- 选择证件类型弹框 -->
+    <van-popup
+      v-model="showCardTypeVisible"
+      position="bottom"
+      :style="{ height: '280px' }"
+    >
+      <van-cell
+        v-for="(item, index) in cardTypes"
+        :key="index"
+        :title="item.value"
+        style="display: flex; align-items: center"
+        @click="handleChooseCardType(item)"
+      >
+        <template #right-icon>
+          <van-icon
+            v-if="dectionForm.idType == item.no"
+            name="success"
+          />
+        </template>
+      </van-cell>
+    </van-popup>
+
+    <!-- 校验通过弹框 -->
+    <van-overlay :show="showProtocol">
+      <div class="check-popup-wrapper">
+        <van-icon
+          name="close"
+          class="delete-icon"
+          size="25"
+          @click="showProtocol = false"
+        />
+        <p class="title">身份校验通过</p>
+        <span class="content">请点击“下一步”进入权益领取流程</span>
+        <div class="submit-button submit-button-empty" @click="openMini">
+            领取权益
+        </div>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+import {
+  createOrderSzV2,
+  uploadPointData,
+  taiBaoUserInfo,
+} from '@/api/question';
+import { getBanner, getCardTypes } from '@/api/entitlement';
+import DatePicker from './date-picker.vue';
+import { isWeixin } from '@/utils/index';
+
+let that;
+export default {
+  components: { DatePicker },
+  data() {
+    return {
+      projectEquityNo: '',
+      externalOrderNo: '',
+      picaWechat: window._picaWechat,
+      headerInfo: {
+        title: '癌筛权益领取',
+        isBlack: true,
+        backMethod: 'web',
+        style: 'backgroundColor:#ffffff;zIndex:100;',
+        background: '',
+      },
+      dectionForm: {
+        mobilePhone: '',
+        idCard: '',
+        idType: 1 /** 默认为1:身份证 */,
+        name: '',
+        sex: '',
+        birthTime: '',
+      },
+      showProtocol: false,
+      showCardTypeVisible: false,
+      cardTypes: [],
+      // envVersion: process.env.MINI_PROGRAM_ENV,
+      envVersion: process.env.VUE_APP_MINI_PROGRAM_ENV,
+      openWebAppConfigPositive: {
+        username: 'gh_e92f58174364', // 小程序唯一username  1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
+        path: 'pagesInsurance/all-entrance/index', // 打开页面
+        extraData: JSON.stringify({}),
+      },
+      bgPath: '',
+      staticINFO: {
+        logoUrlList: [],
+      },
+      // 太保项目用户信息
+      inherentUserInfo: null,
+    };
+  },
+  computed: {
+    canSubmit() {
+      const normalValidate =
+        this.dectionForm.idCard &&
+        this.dectionForm.name &&
+        this.dectionForm.mobilePhone;
+      if (this.dectionForm.idType != 1) {
+        return (
+          normalValidate && this.dectionForm.birthTime && this.dectionForm.sex
+        );
+      }
+      return normalValidate;
+    },
+    cardTypeName() {
+      const item = this.cardTypes.find(
+        (item) => item.no == this.dectionForm.idType
+      );
+      return item ? item.value : '';
+    },
+    rules() {
+      const rules = [{ required: true, message: '请输入真实证件号' }];
+      if (this.dectionForm.idType === 1) {
+        return [
+          ...rules,
+          {
+            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+            message: '身份证号格式填写有误',
+          },
+        ];
+      }
+
+      return rules;
+    },
+  },
+  created() {
+    if (!isWeixin()) {
+      this.$dialog
+        .alert({
+          type: 'warning',
+          title: '提示',
+          message: '请在微信中扫码打开！',
+          confirmButtonText: '我知道了',
+        })
+        .then(() => {
+          // on close
+        });
+    }
+  },
+  mounted() {
+    document.title = this.headerInfo.title;
+    that = this;
+    const { externalOrderNo, projectEquityNo, channelCode } = this.$route.query;
+    if (channelCode) {
+      this.uploadPointData(channelCode);
+    }
+    this.projectEquityNo = projectEquityNo;
+    this.externalOrderNo = externalOrderNo || '';
+    // this.$loading.show();
+    this.getBanner(7, projectEquityNo);
+    this.loadCardTypes();
+    if (
+      this.projectEquityNo === 'TB202309151004000001' &&
+      this.externalOrderNo
+    ) {
+      this.getTaiBaoUserInfo();
+    }
+    this.$sendBuriedData({
+      action: 'ACTION_WEB_ENTER',
+      component_tag: '7802964#0#0#保险入口页面',
+      web_data: {
+        projectEquityNo: projectEquityNo,
+        externalOrderNo: externalOrderNo,
+        channelCode: channelCode || '',
+      },
+    });
+  },
+  methods: {
+    getTaiBaoUserInfo() {
+      taiBaoUserInfo(this.externalOrderNo)
+        .then((res) => {
+          console.log('taibao userinfo', res);
+          if (!res?.data) return;
+          const { data } = res;
+          // const data = {
+          //   mobilePhone: '17621344556',
+          //   idCard: '411302199009092234',
+          //   idType: 2 /** 默认为1:身份证 */,
+          //   name: '乔先生',
+          //   sex: 1,
+          //   birthTime: '1990-09-09',
+          // };
+
+          this.inherentUserInfo = data;
+          data.mobilePhone && (this.dectionForm.mobilePhone = data.mobilePhone);
+          data.idCard && (this.dectionForm.idCard = data.idCard);
+          data.idType && (this.dectionForm.idType = data.idType);
+          data.name && (this.dectionForm.name = data.name);
+          data.sex && (this.dectionForm.sex = data.sex);
+          data.birthTime && (this.dectionForm.birthTime = data.birthTime);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    isReadonly(fieldName) {
+      if (!this.inherentUserInfo) return false;
+      return (
+        this.inherentUserInfo[fieldName] !== null &&
+        this.inherentUserInfo[fieldName] !== ''
+      );
+    },
+    uploadPointData(channelCode) {
+      uploadPointData({ channelCode });
+    },
+
+    async loadCardTypes() {
+      const { data } = await getCardTypes();
+      this.cardTypes = data || [];
+    },
+
+    handleChooseCardType(item) {
+      this.dectionForm.idType = item.no;
+      this.showCardTypeVisible = false;
+    },
+
+    getBanner(pageType, yunOrderNo) {
+      const self = this;
+      self.$loading.show();
+      getBanner(pageType, yunOrderNo).then((res) => {
+        if (res.code === '000000') {
+          self.bgPath = res.data.logoUrl;
+          self.staticINFO = res.data;
+          self.$loading.hide();
+        }
+      });
+    },
+    // 创建深圳订单
+    createOrderSz() {
+      const { externalOrderNo, projectEquityNo } = this;
+      const data = {
+        ...this.dectionForm,
+        projectEquityNo,
+      };
+      if (externalOrderNo) {
+        data['externalOrderNo'] = externalOrderNo;
+      }
+      createOrderSzV2(data).then((res) => {
+        console.log(res);
+        if (res.code == '000000') {
+          const {
+            yunOrderNo,
+            statusCode,
+            externalOrderNo,
+            versionNumber,
+            projectEquityNo,
+            lanZhouOldflag,
+          } = res.data;
+          if (lanZhouOldflag) {
+            const url = '/home';
+            const l = window.location.origin;
+            const hr =
+              l +
+              `/pica-insurance${url}?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
+            window.location.href = hr;
+          } else if (statusCode == '0103' || [4, 5].includes(versionNumber)) {
+            this.showProtocol = true;
+            this.openWebAppConfigPositive.path = `pagesInsurance/all-entrance/index?channelSource=insurance_channel&projectEquityNo=${projectEquityNo}&yunOrderNo=${yunOrderNo}&externalOrderNo=${externalOrderNo}`;
+            console.log(
+              '-this.openWebAppConfigPositive.path',
+              versionNumber,
+              this.openWebAppConfigPositive.path
+            );
+          } else {
+            this.$router.replace({
+              path: '/entitlement',
+              query: {
+                projectEquityNo: projectEquityNo,
+                externalOrderNo: externalOrderNo,
+              },
+            });
+          }
+        } else {
+          this.$toast(res.message);
+        }
+      });
+    },
+    appointment() {
+      this.$refs.dectionForm
+        .validate()
+        .then((result) => {
+          console.log('this.dectionForm', result);
+          this.createOrderSz();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    handleErrorFn(e) {
+      console.log('handleErrorFn', e);
+    },
+    handleLaunchFn(e) {
+      console.log('handleLaunchFn', e);
+      that.showProtocol = false;
+    },
+    openMini() {
+      if (window._miniprogram) {
+        const appid = 'wx180ede0978486102';
+        const path = this.openWebAppConfigPositive.path;
+        const env = this.envVersion;
+        const content = '即将进入云鹊健康小程序，免费领取癌症早早检权益', buttonText = '立即前往';
+        const params = `appid=${appid}&path=${encodeURIComponent(path)}&content=${content}&buttonText=${buttonText}&env=${env}`;
+
+        const u = `/pages/board/index?${params}`;
+        console.log('--u', u);
+        this.$rocNative.WXInstance.miniProgram.navigateTo({
+          url: u
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sz-appoint {
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding-bottom: 70px;
+  background-color: #bee2fd;
+  .insurance-register-bg {
+    width: 100%;
+    .bg-img {
+      width: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .wrap-reg {
+      width: 350px;
+      border-radius: 20px;
+      margin: 0 auto;
+      margin-top: 280px;
+      position: relative;
+    }
+  }
+  .back-img {
+    position: absolute;
+    top: 0;
+  }
+  .choose-section {
+    padding: 10px 12px;
+    background: #ffffff;
+    border-radius: 11px;
+    font-weight: 600;
+    padding-top: 0px;
+    margin: 0 auto;
+    /deep/ .van-field__label {
+      color: #212121;
+    }
+    /deep/ .van-field__control:disabled {
+      color: #323233;
+      -webkit-text-fill-color: inherit;
+    }
+    .item {
+      color: #212121;
+      font-size: 14px;
+      display: flex;
+      height: 60px;
+      align-items: center;
+      position: relative;
+      .input-key {
+        font-weight: 300;
+        margin-left: 10px;
+      }
+      .input-value {
+        margin-left: 18px;
+        font-weight: 500;
+        overflow: visible;
+      }
+      .right {
+        position: absolute;
+        right: 10px;
+        top: 25px;
+      }
+    }
+    .height60 {
+      height: 30px;
+    }
+    .required {
+      position: relative;
+    }
+    .required::after {
+      position: absolute;
+      content: '*';
+      display: block;
+      left: -10px;
+      top: 0;
+      text-align: center;
+      color: rgba(255, 56, 56, 1);
+    }
+  }
+  .appoint-form-items {
+    .van-inner-field {
+      padding: 0;
+    }
+    /deep/ .van-field__label {
+      color: #212121;
+      width: auto;
+    }
+    &.field-readonly {
+      /deep/ .van-field__label {
+        color: #999999;
+        width: auto;
+      }
+      &::before {
+        color: #999999;
+      }
+      /deep/ .van-field__control {
+        &:disabled,
+        &:read-only {
+          color: #999999;
+          -webkit-text-fill-color: inherit;
+          .van-radio__label {
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
+  .appoint-form-placeholder {
+    color: #999999;
+  }
+  .appoint-form-title::after {
+    display: none;
+  }
+  .appoint-form-submit {
+    margin-top: 30px;
+    height: 40px;
+    background: #d9d9d9;
+    border-radius: 20px;
+    border: none;
+    position: absolute;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .sz-appoint-form-tips {
+    width: 175px;
+    height: 32px;
+    margin: 0 auto;
+    margin-bottom: 10px;
+  }
+  /deep/.van-cell {
+    display: block;
+    font-weight: 300;
+    font-size: 14px;
+  }
+  .phone-wrap {
+    .sm-grey {
+      font-weight: 100;
+      color: #999999;
+      font-size: 12px;
+    }
+  }
+  .protocol-content {
+    padding: 20px;
+    border-radius: 20px;
+  }
+  .block70 {
+    font-size: 14px;
+    color: #212121 !important;
+    text-align: center;
+    margin-top: 15px;
+  }
+  .f20 {
+    font-size: 20px;
+  }
+  .submit-button {
+    position: relative;
+    height: 40px;
+    border-radius: 20px;
+    color: #ffffff;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    background: #00bda5;
+    justify-content: center;
+    width: 242px;
+    margin: 0px auto;
+  }
+  /deep/.van-popup--center {
+    border-radius: 20px;
+  }
+  .bottom-btn {
+    width: 100%;
+    background: #ffffff;
+    box-shadow: inset 0px 1px 0px 0px #e9e9e9;
+    overflow: hidden;
+    text-align: center;
+    padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    .btn {
+      width: 351px;
+      height: 40px;
+      border-radius: 20px;
+      margin: 4px auto;
+      font-size: 16px;
+      background: #cccccc;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 40px;
+      text-align: center;
+    }
+    .appoint-form-submit-active {
+      background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
+    }
+  }
+  .mt20 {
+    margin-top: 10px;
+    background-color: #bee2fd;
+  }
+  .check-popup-wrapper {
+    width: 295px;
+    height: 227px;
+    position: fixed;
+    background: url('https://files.yunqueyi.com/image/png/common/20230830115339979.png')
+      no-repeat center;
+    background-size: 100% 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .delete-icon {
+      // width: 25px;
+      // height: 25px;
+      position: absolute;
+      color: #fff;
+      right: 0;
+      top: -36px;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 800;
+      color: #3c877d;
+      margin-top: 36px;
+      padding: 0 24px;
+    }
+
+    .content {
+      display: inline-block;
+      font-size: 16px;
+      color: #212121;
+      margin: 25px 0 48px 0;
+      padding: 0 24px;
+    }
+
+    .next-btn {
+      width: 247px;
+      height: 39px;
+      margin: 0 auto;
+      background: #00bda5;
+      border-radius: 23px;
+      color: #fff;
+      font-size: 18px;
+      font-weight: 800;
+      line-height: 39px;
+      text-align: center;
+    }
+  }
+}
+</style>