orchestra-app/src/student/my-orchestra/apply-withdrawal.tsx

import OHeader from '@/components/o-header'
import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
import iconStudent from '@common/images/icon_student.png'
import styles from './apply-withdrawal.module.less'
import { Button, Field, Image, showToast } from 'vant'
import OSticky from '@/components/o-sticky'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import { postMessage } from '@/helpers/native-message'
import ODialog from '@/components/o-dialog'

export default defineComponent({
  name: 'apply-withdrawal',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const headColor = reactive({
      headBg: 'transparent',
      textColor: '#fff'
    })
    const forms = reactive({
      status: false,
      statusMember: false,
      reason: '',
      id: route.query.id,
      dataInfo: {} as any,
      isClick: false
    })

    const getDetails = async () => {
      try {
        const { data } = await request.post('/api-student/student/getOrchestraDate/' + forms.id)
        forms.dataInfo = data
      } catch {
        //
      }
    }

    const onSubmit = async () => {
      if (!forms.reason) {
        showToast('请输入退团原因')
        return
      }

      try {
        const { data } = await request.post('/api-student/student/hasWaitActivateVipOrder', {
          requestType: 'form',
          data: {
            orchestraId: forms.id
          }
        })
        if (data) {
          forms.statusMember = true
        } else {
          forms.status = true
        }
      } catch {
        //
      }
    }

    //
    const onConfirm = async () => {
      try {
        forms.isClick = true
        await request.post('/api-student/orchestra/leaveOrchestra', {
          data: {
            studentId: forms.dataInfo.studentId,
            orchestraId: forms.id,
            reason: forms.reason
          }
        })

        forms.isClick = false
        router.back()
      } catch {
        //
        forms.isClick = false
      }
    }

    onMounted(() => {
      postMessage({ api: 'setStatusBarTextColor', content: { statusBarTextColor: true } })
      getDetails()
    })
    onUnmounted(() => {
      postMessage({ api: 'setStatusBarTextColor', content: { statusBarTextColor: false } })
    })
    return () => (
      <div class={styles.applyWithdrawal}>
        <div class={styles.headers}>
          <OHeader
            background={headColor.headBg}
            color={headColor.textColor}
            border={false}
            backIconColor="white"
          />

          <div class={styles.userInfo}>
            <Image
              src={forms.dataInfo.studentAvatar || iconStudent}
              class={styles.img}
              fit="contain"
            />
            <div class={styles.userName}>{forms.dataInfo.studentName} 同学</div>
            <div class={styles.timer}>
              您已在{forms.dataInfo.orchestraName}训练<span>{forms.dataInfo.joinDays}</span>天
            </div>
          </div>
        </div>
        <div class={styles.content}>
          在乐团训练的日子里，有付出有汗水，有从0到1的喜悦也有攻克难关的坚持。你的付出为你带来成长，你的成长让老师感到欣喜。
        </div>

        <div class={styles.resion}>
          <div class={styles.title}>
            <div class={styles.name}>
              <i></i>退团原因<span>*</span>
            </div>
            <div class={styles.nums}>{forms.reason.length || 0}/400</div>
          </div>
          <Field v-model={forms.reason} placeholder="请输入退团详细原因" type="textarea" rows={3} />
        </div>

        <OSticky position="bottom">
          <div class={'btnGroup'}>
            <Button block round type="primary" onClick={onSubmit} disabled={forms.isClick}>
              确定
            </Button>
          </div>
        </OSticky>

        <ODialog
          v-model:show={forms.status}
          title="提示"
          message={'确定要提交退团申请吗？'}
          messageAlign="left"
          confirmButtonText="确定"
          cancelButtonText="取消"
          showCancelButton
          onConfirm={onConfirm}
        ></ODialog>

        <ODialog
          v-model:show={forms.statusMember}
          title="提示"
          message={'您有待激活的团练宝订单，是否继续退团？'}
          messageAlign="left"
          confirmButtonText="继续"
          cancelButtonText="取消"
          showCancelButton
          onConfirm={onConfirm}
        ></ODialog>
      </div>
    )
  }
})