评论组件

src/components/AiComment.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="AiComment">
+    <div class="comments flex-row">
+      <div class="comments-box" @click="showCommentBox">{{ boxContent }}</div>
+      <img src="AiComment/comment.svg" @click="showCommentList" alt=""/>
+      <text>{{ commentCount || 0 }}</text>
+    </div>
+    <div class="modalWrapper" v-if="commentBoxPopup" :class="{clickClose:!modelClickClose}"
+         @click="commentBoxPopup=false"/>
+    <div class="commentBox" v-if="commentBoxPopup" :style="{bottom:marginBottom+ 'px'}">
+      <textarea v-model="content" placeholder="写下你的想法…" maxlength="300" :focus="focus" @focus="getMarginBottom"
+                @blur="marginBottom=0" :adjust-position="false" fixed/>
+      <view class="flex-row form-submit">
+        <div>{{ `字数 ${wordCount || 0} / 300` }}</div>
+        <button @click="submitComment" :disabled="wordCount == 0">发布</button>
+      </view>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "AiComment",
+  props: {
+    needLogin: Boolean,
+    customLogin: Boolean,
+    commentCount: Number,
+    modelClickClose: {type: Boolean, default: true}
+  },
+  computed: {
+    wordCount() {
+      return this.content.length || 0
+    },
+    boxContent() {
+      return this.content || "我也说两句..."
+    },
+    isLogin() {
+      return Boolean(uni.getStorageSync('token'))
+    },
+  },
+  data() {
+    return {
+      content: "",
+      marginBottom: 0,
+      commentBoxPopup: false,
+      focus: false
+    }
+  },
+  methods: {
+    showCommentBox() {
+      if (this.customLogin) {
+        this.$emit("login", flag => this.commentBoxPopup = flag)
+      } else if (this.needLogin) {
+        if (this.isLogin) {
+          this.commentBoxPopup = true
+        } else {
+          this.$dialog.confirm({
+            content: '您还未登陆',
+            confirmText: '去登录'
+          }).then(() => {
+            uni.switchTab({url: '/pages/mine/mine'})
+          }).catch(() => {
+          })
+        }
+      } else {
+        this.commentBoxPopup = true
+      }
+    },
+    submitComment() {
+      this.commentBoxPopup = false
+      this.$emit("submitComment", this.content)
+      this.content = ""
+    },
+    showCommentList() {
+      this.commentBoxPopup = false
+      this.$emit("showCommentList")
+    },
+    getMarginBottom({detail}) {
+      this.marginBottom = detail.height
+      this.focus = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.AiComment {
+  .comments {
+    width: 100%;
+    height: 112px;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+    background: #f7f7f7;
+
+    .comments-box {
+      width: 580px;
+      height: 64px;
+      line-height: 64px;
+      background-color: #fff;
+      color: #666;
+      font-size: 26px;
+      padding-left: 16px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    image {
+      width: 52px;
+      height: 52px;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+
+    text {
+      color: #666666;
+      font-size: 28px;
+      line-height: 60px;
+    }
+  }
+
+  .modalWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .6);
+    z-index: 9;
+
+    &.clickClose {
+      pointer-events: none;
+    }
+  }
+
+  .commentBox {
+    width: 100%;
+    height: 288px;
+    background-color: #fff;
+    padding: 32px 32px 24px 26px;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+    z-index: 99;
+
+    textarea {
+      width: 100%;
+      height: 144px;
+      color: #666;
+      font-size: 26px;
+      background: #F7F7F7;
+      border-radius: 16px;
+      padding: 16px;
+      box-sizing: border-box;
+
+      &::placeholder {
+        font-size: inherit;
+      }
+    }
+
+    .form-submit {
+      margin-top: 24px;
+      height: 64px;
+      justify-content: space-between;
+      align-items: center;
+      color: #999;
+      font-size: 24px;
+
+      button {
+        width: 144px;
+        height: 64px;
+        background-color: #135AB8;
+        color: #fff;
+        font-size: 24px;
+        border-radius: 32px;
+        line-height: 64px;
+        text-align: center;
+        margin: unset;
+
+        &[disabled] {
+          color: #999;
+          background-color: #f7f7f7;
+          font-size: 28px;
+          border: 0;
+        }
+
+        &:active {
+          opacity: .8;
+        }
+
+        &:after {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+}
+</style>

src/components/AiComment/comment.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>icon/tab_bar/Comment</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icon/tab_bar/Comment" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4.75,21.7864745 L9.45344419,19.4347524 C9.6964412,19.3132539 9.96438906,19.25 10.236068,19.25 L20,19.25 C20.6903559,19.25 21.25,18.6903559 21.25,18 L21.25,8 C21.25,7.30964406 20.6903559,6.75 20,6.75 L6,6.75 C5.30964406,6.75 4.75,7.30964406 4.75,8 L4.75,21.7864745 Z" id="矩形" stroke="#333333" stroke-width="1.5"></path>
+        <rect id="矩形" fill="#999999" x="8" y="10.5" width="10" height="1.5" rx="0.75"></rect>
+        <rect id="矩形备份" fill="#999999" x="8" y="14" width="10" height="1.5" rx="0.75"></rect>
+    </g>
+</svg>