wxapp-visitor-invite/src/pages/contact-send-invite-sms/index.vue

<script setup lang="ts">
import { reactive } from 'vue'
import { View } from '@tarojs/components'

import './index.scss'
import {Route, Session, weappAuth} from "../../utils";
import {
  GroupedContactPassRecords,
  useContactPassRecordsStore
} from "../../stores/contact-pass-records";
import {Router} from "tarojs-router-next";
import { BjxHelper } from "../../utils";
import {ContactEditLog, useContactEditLogsStore} from "../../stores/contact-edit-logs";
import {useContactItemStore} from "../../stores/contact-item";
import {useContactVisitRecordStore} from "../../stores/contact-visit-record";
import Taro from "@tarojs/taro";


const contactData = Router.getData()
console.log("contactData", contactData)

const contact = useContactItemStore()
const contactVisitRecord = useContactVisitRecordStore()

const state = reactive({
  isDateSelectorVisible: false,
  isSmsSent: false
});

const goBack = () => {
  Router.back(undefined, { delta: 2 })
}

const openSwitch = (param) => {
  state[`${param}`] = true;
};
const closeSwitch = (param) => {
  state[`${param}`] = false;
}
const setChooseDate = (param) => {

  Taro.showLoading({
    title: 'loading',
  })

  contact.contact.nextVisitDate = param[3]

  if (contact.contact.nextVisitDate !== "") {
    contactVisitRecord.save(contact.contact.id, contact.contact.nextVisitDate).then( visitRecordResult => {
      console.log("save contactVisitRecord DONE")
      Taro.hideLoading()
    })
  }
  else {
    Taro.hideLoading()
  }

}
const onSmsSend = () => {
  console.log(contactVisitRecord.visitRecord)
  if (contactVisitRecord.visitRecord == null){
    Taro.showToast({
      title: '请选择邀请到访的日期',
      icon: 'none',
      duration: 2000})
  }
  else {
    Taro.request({
      method: 'GET',
      url: SERVER_URL + '/system/visitor/sms/send-sms',
      header: {
        Authorization: 'Bearer ' + Session.get('access_token'),
      },
      data: {
        visitRecordId: contactVisitRecord.visitRecord.id,
        staffId: Session.get("staff").id
      },
      success: result => {
        if (result.statusCode === 200 && result.data.code === 200) {
          Taro.showToast({
            title: '发送成功',
            icon: 'success',
            duration: 2000
          })
          state.isSmsSent = true
        } else {
          Taro.showToast({
            title: '网络错误',
            icon: 'error',
            duration: 2000
          })
        }
      },
      fail: res => {
        console.log(res);
      }
    })
  }
}

</script>


<template>
  <view class="h-100 d-flex flex-column">
    <BackgroundBasic/>
    <NutNavbar title=""></NutNavbar>
    <view class="pl-3 pr-3 pt-3 pb-0 d-flex">
      <view class="flex-grow-1">
        <view class="h3">
          <view class="fas fa-chevron-left text-primary" @tap="goBack()" hover-class="btn-hover-primary"/>
        </view>
      </view>
      <view class="d-flex align-items-end">
        <View></View>
      </view>
    </view>

    <View class="d-flex flex-column" >
      <View class="d-flex justify-content-center">
        <Image :src="require('./sms.png')" mode='heightFix' style="height: 30vh"/>
      </View>
    </View>

    <View class="card m-3 mt-5 shadow-lg">
      <View class="card-body">

    <nut-form>
      <nut-form-item>

          <view class="d-flex">
            <view class="mr-4">
              <NutBadge :value="contact.contact.isVIP?'VIP':''">
                <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(contact.contact.name)" class="overflow-hidden">
                  <img  v-if="contact.contact.avatar" :src="contact.contact.avatar" />
                  <view v-else-if="BjxHelper.getBJXFirstChar(contact.contact.name)">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}</view>
                  <view v-else>
                    <Text className='fas fa-user fa-lg'/>
                  </view>
                </NutAvatar>
              </NutBadge>
            </view>


            <view class="flex-grow-1">
              <view class="d-flex flex-row">
                <view v-if="contact.contact.name" class="name text-dark">{{contact.contact.name}}</view>
                <view v-else>
                  <view class="text-black-50 name">
                    <Text className='text-info fas fa-exclamation-circle'/> 无姓名
                  </view>
                </view>
              </view>
              <view class="company text-black-50 small">
                <view v-if="contact.contact.company">{{contact.contact.company}}</view>
                <view v-else>
                  <Text className='text-info fas fa-exclamation-circle'/> 无公司信息
                </view>
              </view>
            </view>

          </view>

      </nut-form-item>

      <nut-form-item label="约定到访日期" v-show="!contact.contact.flexVisit">
        <view class="d-flex calendar">
          <view class="flex-grow-1"></view>
          <view class="text-dark" @tap="openSwitch('isDateSelectorVisible')">
            {{contact.contact.nextVisitDate ? contact.contact.nextVisitDate : '请选择'}}
          </view>
        </view>
      </nut-form-item>

    </nut-form>

      </View>
    </View>


    <view v-if="state.isSmsSent" class="p-3 pb-5">
      <nut-button  block type="info" @tap="goBack">确认</nut-button>
    </view>
    <view v-else class="p-3 pb-5">
      <nut-button  block type="info" @tap="onSmsSend">发送邀约短信</nut-button>
    </view>

    <nut-calendar
        v-model:visible="state.isDateSelectorVisible"
        @close="closeSwitch('isDateSelectorVisible')"
        @choose="setChooseDate"
        :default-value="contact.contact.nextVisitDate"
        :is-auto-back-fill="true"
    >
    </nut-calendar>



  </View>




  <!--    <view class="p-4">-->
  <!--    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">使用电话号码登录</button>-->
  <!--    </view>-->


  <!--  <Counter/>-->


  <!--  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>-->
  <!--  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>-->
  <!--  <View><Text>{{state.msg}}</Text></View>-->
  <!--  <nut-button type="primary" @click="handleClick(state.msg2)">点我</nut-button>-->
  <!--  <Add color="red" />-->
  <!--  <div class="alert alert-primary" role="alert">-->
  <!--    A simple primary alert—check it out!-->
  <!--  </div>-->
  <!--  <h1>Example heading <span class="badge bg-secondary">New</span></h1>-->
  <!--  <button type="button" class="btn btn-primary">-->
  <!--    Notifications <span class="badge text-bg-secondary">4</span>-->
  <!--  </button>-->
  <!--  <button type="button" class="btn btn-primary position-relative">-->
  <!--    Inbox-->
  <!--    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">-->
  <!--    99+-->
  <!--    <span class="visually-hidden">unread messages</span>-->
  <!--  </span>-->
  <!--  </button>-->

  <!--  </view>-->
</template>