实现留言功能

最新推荐文章于 2025-08-05 22:11:48 发布

原创最新推荐文章于 2025-08-05 22:11:48 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1.html

 <div class="botton" style="max-width: 750px" v-if="tabActive === 2">
          <van-field v-model="value1" left clearable left-icon="smile-o" placeholder="请写下你此刻想法">
            <template #left-icon>
              <span :class="checkFlag ? 'checked' : 'check'" @click="check"></span>
              <span style="font-size: 13px" :class="checkFlag ? 'niming' : ''">匿名</span>
            </template>
            <template #button>
              <van-button size="small" @click="Save" round type="info">发 送</van-button>
            </template>
          </van-field>
        </div>

2.js

    // 匿名
    check() {
      this.checkFlag = !this.checkFlag
    },

 Save() {
      // debugger
      if (this.checkFlag) {
        this.isAnonymity = 1
      } else {
        this.isAnonymity = 0
      }
      if (this.value1.trim() === '') {
        return
      }
      const params = {
        comment: this.value1.trim(),
        courseId: this.id,
        isAnonymity: this.isAnonymity
      }
      culCourseCommentSave(params)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.page = 1
            this.value1 = ''
            this.$refs.liuyan.getCommentStuded(1)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

3.效果