feat: 完成评论页面基本布局

src/assets/css/common.scss

@@ -1,3 +1,9 @@
 body {
   --primary-color: #c62223;
 }
+// 垂直水平居中
+.wrap-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/assets/css/index.scss

@@ -1,2 +1,2 @@
-@import url(../css/reset.scss);
-@import url(../css/common.scss);
+@import "../css/reset.scss";
+@import "../css/common.scss";

src/assets/css/reset.scss

@@ -2,3 +2,6 @@ div,
 uni-view {
   box-sizing: border-box;
 }
+view {
+  box-sizing: border-box;
+}

src/assets/svg/camera.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  width: {
+    type: [Number, String],
+    default: 12,
+  },
+  height: {
+    type: [Number, String],
+    default: 12,
+  },
+});
+</script>
+
+<template>
+  <svg
+    t="1711347428858"
+    class="icon"
+    viewBox="0 0 1117 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="4428"
+    :width="width"
+    :height="height"
+  >
+    <path
+      d="M292.429576 240.329697a31.030303 31.030303 0 0 1-30.502788 25.351758H62.060606V961.939394h992.969697V265.681455h-199.866182a31.030303 31.030303 0 0 1-30.533818-25.351758L791.58303 62.060606H325.507879L292.398545 240.329697z m-27.958303-189.595152A62.060606 62.060606 0 0 1 325.476848 0H791.58303a62.060606 62.060606 0 0 1 61.036606 50.734545l28.330667 152.917334H1055.030303a62.060606 62.060606 0 0 1 62.060606 62.060606V961.939394a62.060606 62.060606 0 0 1-62.060606 62.060606H62.060606a62.060606 62.060606 0 0 1-62.060606-62.060606V265.681455a62.060606 62.060606 0 0 1 62.060606-62.060607h174.08l28.330667-152.886303zM558.545455 806.787879a248.242424 248.242424 0 1 1 0-496.484849 248.242424 248.242424 0 0 1 0 496.484849z m0-62.060606a186.181818 186.181818 0 1 0 0-372.363637 186.181818 186.181818 0 0 0 0 372.363637z"
+      fill="#8a8a8a"
+      p-id="4429"
+    ></path>
+  </svg>
+</template>
+
+<style lang="scss" scoped></style>

src/assets/svg/index.js

@@ -0,0 +1,2 @@
+import Camera from "./camera.vue";
+export { Camera };

src/components/discuss-card/index.vue

@@ -0,0 +1,42 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "菜品评价",
+  },
+  num1: {
+    type: Number,
+  },
+  num2: {
+    type: Number,
+  },
+});
+</script>
+
+<template>
+  <view class="discuss-card">
+    <view class="card-title">
+      菜品评价
+      <template v-if="num1 !== undefined"> { num1 / num2 } </template>
+    </view>
+    <view class="card-content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.discuss-card {
+  background-color: #fff;
+  width: 100%;
+  padding: 40rpx;
+  border-radius: 20rpx;
+}
+.card-title {
+  font-weight: 700;
+  font-size: 30rpx;
+}
+.card-content {
+  margin-top: 20rpx;
+}
+</style>

src/components/user-discuss/index.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { Camera } from "@/assets/svg";
+
+// 传入信息
+defineProps({
+  avatarUrl: {
+    type: String,
+  },
+  cardName: {
+    type: String,
+  },
+  imgs: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const isFocus = ref(false);
+//
+const formData = reactive({
+  score: "",
+  content: "",
+  filedIds: [],
+});
+const imgsList = ref([]);
+function changeIsFocus(flag) {
+  isFocus.value = flag;
+}
+defineExpose({
+  getFormData() {
+    return formData;
+  },
+});
+</script>
+
+<template>
+  <view class="user-discuss">
+    <view class="user-discuss-header">
+      <view class="user-avatar">
+        <view class="avatar-center-wrap">
+          <image class="avatar-img" mode="aspectFit" :src="avatarUrl" />
+        </view>
+      </view>
+      <view class="user-discuss-info">
+        <view class="user-name">{{ cardName }}</view>
+        <view class="star">
+          <view class="star-text">评分</view>
+          <view class="star-area">
+            <uni-rate
+              :max="5"
+              v-model="formData.score"
+              :size="18"
+              :margin="2"
+              :value="5"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    <view
+      class="user-discuss-content"
+      :class="{ discussContentFocus: isFocus }"
+    >
+      <view class="input-area">
+        <textarea
+          class="textarea"
+          :placeholder="placeholder"
+          :maxlength="1000"
+          @focus="changeIsFocus(true)"
+          @blur="changeIsFocus(false)"
+          v-model="formData.content"
+        >
+        </textarea>
+      </view>
+      <view class="pictures">
+        <view class="picture-list">
+          <view
+            class="picture-list-item"
+            v-for="(item, index) in imgsList"
+            :key="index"
+          >
+            <image mode="aspectFit" class="list-item-img" :src="item" />
+          </view>
+          <view class="picture-list-item">
+            <view class="picture-btn wrap-center">
+              <Camera width="40" height="40" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.user-avatar {
+  border: 2rpx solid #f2f2f2;
+  border-radius: 10rpx;
+  width: 100rpx;
+  height: 100rpx;
+  padding: 10rpx;
+  margin-right: 20rpx;
+  .avatar-center-wrap {
+    background: #000;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.avatar-img,
+.list-item-img {
+  width: 100%;
+  height: 100%;
+}
+.user-discuss-header {
+  display: flex;
+  align-items: center;
+  .star {
+    margin-top: 10rpx;
+    display: flex;
+    align-items: center;
+    .star-area {
+      margin-left: 6rpx;
+    }
+  }
+  .star-text {
+    font-size: 24rpx;
+    color: #888;
+  }
+}
+.user-discuss-content {
+  width: 100%;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+  background-color: #f7f6f9;
+  min-height: 140rpx;
+  padding: 20rpx;
+  transition: 0.4s all linear;
+}
+.picture-list {
+  display: flex;
+  margin: 0 -5rpx;
+  flex-wrap: wrap;
+  .picture-list-item {
+    padding: 0 5rpx;
+    margin-bottom: 20rpx;
+    width: 33.33%;
+    height: 200rpx;
+  }
+}
+
+.discussContentFocus {
+  box-shadow: 0px 0px 2px 2px #edd5d9;
+}
+.textarea {
+  width: 100%;
+}
+.picture-btn {
+  border-radius: 10rpx;
+  border: 2rpx solid #ccc;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/pages.json

@@ -8,6 +8,13 @@
   },
   "pages": [
     //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/discuss/index",
+      "style": {
+        "navigationBarTitleText": "发表评价",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
     {
       "path": "pages/index/index",
       "style": {

src/pages/discuss/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import DiscussCard from "@/components/discuss-card";
+import UserDiscuss from "@/components/user-discuss";
+import CommonButton from "@/components/common-button";
+</script>
+
+<template>
+  <view class="discuss">
+    <DiscussCard>
+      <UserDiscuss />
+    </DiscussCard>
+    <view class="discuss-footer">
+      <CommonButton>确定</CommonButton>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+}
+.discuss {
+  background: #f5f5f5;
+}
+.discuss-footer {
+  position: fixed;
+  padding: 0 40rpx;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+}
+</style>