h5-colexiu/src/student/home/components/recommend-sage/index.tsx

import { Button, Cell, Icon, Image, Toast } from 'vant'
import styles from './index.module.less'
import { defineComponent } from 'vue'
import request from '@/helpers/request'
import bars from '@common/svg/bars.svg'
import TheTitle from '../the-title'

export default defineComponent({
  name: 'recommend-sage',
  props: {
    title: {
      type: String,
      default: '推荐达人'
    },
    sage: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const onStart = async (item: any) => {
      // 关注与取消关注
      try {
        await request.get('/api-student/teacher/starOrUnStar', {
          params: {
            userId: item.userId,
            starStatus: 1
          }
        })
        setTimeout(() => {
          Toast('关注成功')
          item.watch = true
        }, 100)
      } catch {
        //
      }
    }
    return () => (
      <>
        {props.sage.length > 0 && <TheTitle title={props.title} />}

        <div class={styles.sageContainer}>
          {props.sage.map((item: any) => (
            <div class={styles.sage} key={item.id} onClick={() => {}}>
              {item.living && <Image src={bars} class={styles.animation} />}

              <div class={styles.header}>
                <Image class={styles.img} src={item.avatar} fit="cover" />
                {item.living && <span class={styles.living}>直播中</span>}
              </div>
              <p class={styles.username}>{item.username}</p>
              <p class={styles.cert}>认证达人</p>

              <Button
                round
                size="mini"
                class={styles.btn}
                type={item.watch ? 'default' : 'primary'}
                disabled={item.watch}
                onClick={() => {
                  onStart(item)
                }}
              >
                {item.watch ? '已关注' : '关注'}
              </Button>
            </div>
          ))}
        </div>
      </>
    )
  }
})