From 139ea9f55793e951f3cc3aef9586cfe79de0effe Mon Sep 17 00:00:00 2001
From: Fox-33 <1466778434@qq.com>
Date: Mon, 30 Jun 2025 19:34:59 +0800
Subject: [PATCH] feat: page-comment;

---
 pages_order/comment/commentCard.vue      |   4 +-
 pages_order/comment/commentWrite.vue     | 241 +++++++++++++++++++++++++++++++
 pages_order/components/formInput.vue     |  35 +++++
 pages_order/components/formTextarea.vue  |  44 ++++++
 pages_order/components/formUpload.vue    | 108 ++++++++++++++
 pages_order/static/comment/icon-plus.png | Bin 0 -> 287 bytes
 6 files changed, 430 insertions(+), 2 deletions(-)
 create mode 100644 pages_order/comment/commentWrite.vue
 create mode 100644 pages_order/components/formInput.vue
 create mode 100644 pages_order/components/formTextarea.vue
 create mode 100644 pages_order/components/formUpload.vue
 create mode 100644 pages_order/static/comment/icon-plus.png

diff --git a/pages_order/comment/commentCard.vue b/pages_order/comment/commentCard.vue
index 2027962..4001475 100644
--- a/pages_order/comment/commentCard.vue
+++ b/pages_order/comment/commentCard.vue
@@ -20,11 +20,11 @@
     <view class="section score">
       <view class="flex score-item">
         <view class="score-item-label">产品服务度</view>
-        <uv-rate :value="data.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" readonly></uv-rate>
+        <uv-rate :value="data.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
       </view>
       <view class="flex score-item">
         <view class="score-item-label">问卷体验</view>
-        <uv-rate :value="data.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" readonly></uv-rate>
+        <uv-rate :value="data.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
       </view>
       <view class="flex score-item">
         <view class="score-item-label">物流速度</view>
diff --git a/pages_order/comment/commentWrite.vue b/pages_order/comment/commentWrite.vue
new file mode 100644
index 0000000..fb0512d
--- /dev/null
+++ b/pages_order/comment/commentWrite.vue
@@ -0,0 +1,241 @@
+<template>
+  <view class="page__view">
+
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
+
+    <view class="main form">
+
+      <uv-form 
+        ref="form"
+        :model="form"
+        :rules="rules"
+        errorType="toast"
+      >
+        <view class="card info">
+          <view class="card-header">评价信息</view>
+          <view class="form-item">
+            <uv-form-item prop="content" :customStyle="formItemStyle">
+              <view class="form-item-label">评价内容</view>
+              <view class="form-item-content">
+                <formTextarea v-model="form.content"></formTextarea>
+              </view>
+            </uv-form-item>
+          </view>
+          <view class="form-item">
+            <uv-form-item prop="images" :customStyle="formItemStyle">
+              <view class="form-item-label">上传图片/视频（选填）</view>
+              <view class="form-item-content">
+                <formUpload v-model="form.images"></formUpload>
+              </view>
+            </uv-form-item>
+          </view>
+        </view>
+
+        <view class="card">
+          <view class="form-item">
+            <uv-form-item prop="productServeScore" :customStyle="formItemStyle">
+              <view class="flex row">
+                <view class="form-item-label">产品服务度</view>
+                <view class="form-item-content">
+                  <uv-rate v-model="form.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
+                </view>
+              </view>
+            </uv-form-item>
+          </view>
+          <view class="form-item">
+            <uv-form-item prop="questionExperienceScore" :customStyle="formItemStyle">
+              <view class="flex row">
+                <view class="form-item-label">问卷体验</view>
+                <view class="form-item-content">
+                  <uv-rate v-model="form.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
+                </view>
+              </view>
+            </uv-form-item>
+          </view>
+          <view class="form-item">
+            <uv-form-item prop="deliverySpeedScore" :customStyle="formItemStyle">
+              <view class="flex row">
+                <view class="form-item-label">物流速度</view>
+                <view class="form-item-content">
+                  <uv-rate v-model="form.deliverySpeedScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
+                </view>
+              </view>
+            </uv-form-item>
+          </view>
+        </view>
+      </uv-form>
+    </view>
+
+    <view class="bottom">
+      <button class="btn" @click="onSubmit">提交申请</button>
+    </view>
+  </view>
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+
+  import formTextarea from '@/pages_order/components/formTextarea.vue'
+  import formUpload from '@/pages_order/components/formUpload.vue'
+
+  export default {
+    components: {
+      formTextarea,
+      formUpload,
+    },
+    data() {
+      return {
+        form: {
+          content: null,
+          images: [],
+          productServeScore: null,
+          questionExperienceScore: null,
+          deliverySpeedScore: null,
+        },
+        rules: {
+          'content': {
+            type: 'string',
+            required: true,
+            message: '请输入评价',
+          },
+          'productServeScore': {
+            type: 'number',
+            required: true,
+            message: '请为【产品服务度】打分',
+          },
+          'questionExperienceScore': {
+            type: 'number',
+            required: true,
+            message: '请为【问卷体验】打分',
+          },
+          'deliverySpeedScore': {
+            type: 'number',
+            required: true,
+            message: '请为【物流速度】打分',
+          },
+        },
+        formItemStyle: { padding: 0 },
+      }
+    },
+		computed: {
+			...mapState(['userInfo']),
+		},
+    methods: {
+      async onSubmit() {
+        try {
+          const res = await this.$refs.form.validate()
+
+          console.log('onSubmit res', res)
+
+          // todo
+          
+          this.$utils.redirectTo(`/pages_order/comment/commentRecords?creator=${userInfo.id}`)
+
+        } catch (err) {
+          console.log('onSubmit err', err)
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .page__view {
+    width: 100vw;
+		min-height: 100vh;
+    background-color: $uni-bg-color;
+    position: relative;
+    
+    /deep/ .nav-bar__view {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .main {
+    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 236rpx 32rpx;
+	}
+
+  .card {
+    padding: 32rpx;
+    background: #FAFAFF;
+    border: 2rpx solid #FFFFFF;
+    border-radius: 32rpx;
+
+    & + & {
+      margin-top: 40rpx;
+    }
+
+    &-header {
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 1.4;
+      color: #252545;
+      margin-bottom: 32rpx;
+    }
+  }
+
+  .form {
+    &-item {
+      border-bottom: 2rpx solid #EEEEEE;
+
+      &:last-child {
+        border: none;
+      }
+
+      & + & {
+        margin-top: 32rpx;
+      }
+
+      &-label {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 26rpx;
+        line-height: 1.4;
+        color: #181818;
+      }
+    }
+  }
+
+  .info {
+    .form-item + .form-item {
+      margin-top: 40rpx;
+    }
+    .form-item-content {
+      margin-top: 16rpx;
+    }
+  }
+
+  .row {
+    justify-content: space-between;
+  }
+
+  .bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+
+		width: 100vw;
+		height: 200rpx;
+		padding: 24rpx 40rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+
+    .btn {
+      width: 100%;
+      padding: 16rpx 0;
+      box-sizing: border-box;
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 1;
+      color: #FFFFFF;
+      background-image: linear-gradient(to right, #4B348F, #845CFA);
+      border-radius: 41rpx;
+    }
+	}
+
+</style>
\ No newline at end of file
diff --git a/pages_order/components/formInput.vue b/pages_order/components/formInput.vue
new file mode 100644
index 0000000..6ac062a
--- /dev/null
+++ b/pages_order/components/formInput.vue
@@ -0,0 +1,35 @@
+<template>
+  <uv-input 
+    :value="value" 
+    @input="$emit('input', $event)" 
+    :placeholder="placeholder"
+    placeholderStyle="color: #C6C6C6; font-size: 32rpx; font-weight: 400;"
+    :customStyle="{
+      backgroundColor: 'transparent',
+      padding: '0',
+      boxSizing: 'border-box',
+      fontSize: '32rpx',
+      border: 'none',
+      transform: 'translateX(-4px)'
+    }"
+  ></uv-input>
+</template>
+
+
+<script>
+	export default {
+    props: {
+			value: {
+				default: null
+			},
+      placeholder: {
+        type: String,
+				default: '请输入'
+			},
+    },
+		data() {
+      return {
+      }
+    },
+  }
+</script>
diff --git a/pages_order/components/formTextarea.vue b/pages_order/components/formTextarea.vue
new file mode 100644
index 0000000..d80ef45
--- /dev/null
+++ b/pages_order/components/formTextarea.vue
@@ -0,0 +1,44 @@
+<template>
+  <uv-textarea
+    :value="value" 
+    @input="$emit('input', $event)" 
+    :placeholder="placeholder"
+    height="230rpx"
+    border="none"
+    :customStyle="{
+      backgroundColor: 'transparent',
+      padding: 0,
+    }"
+    :placeholderStyle="{
+      color: '#C6C6C6',
+      fontSize: '32rpx',
+    }"
+    :textStyle="{
+      fontSize: '32rpx',
+    }"
+  ></uv-textarea>
+</template>
+
+
+<script>
+	export default {
+    props: {
+			value: {
+				default: null
+			},
+      placeholder: {
+        type: String,
+				default: '请输入'
+			},
+    },
+		data() {
+      return {
+      }
+    },
+    methods: {
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/pages_order/components/formUpload.vue b/pages_order/components/formUpload.vue
new file mode 100644
index 0000000..334d4b4
--- /dev/null
+++ b/pages_order/components/formUpload.vue
@@ -0,0 +1,108 @@
+<template>
+  <view>
+    <uv-upload 
+      :fileList="displayFileList"
+      :accept="accept"
+      :maxCount="maxCount" 
+      :width="width"
+      :height="height"
+      @afterRead="afterRead" 
+      @delete="deleteFile"
+    >
+      <button class="flex btn">
+        <image class="btn-icon" src="@/pages_order/static/comment/icon-plus.png" mode="widthFix" />
+      </button>
+    </uv-upload>
+  </view>
+</template>
+
+
+<script>
+	export default {
+    props: {
+			value: {
+        type: Array,
+				default() {
+          return []
+        }
+			},
+      accept: {
+        type: String,
+        default: 'image' // all | media | image | file | video
+      },
+      width: {
+        type: Number | String,
+        default: 190,
+      },
+      height: {
+        type: Number | String,
+        default: 190,
+      },
+      maxCount: {
+        type: Number | String,
+        default: 100,
+      }
+    },
+		data() {
+      return {
+      }
+    },
+    computed: {
+      fileList: {
+        set(val) {
+          this.$emit('input', val)
+        },
+        get() {
+          return this.value
+        }
+      },
+      displayFileList() {
+        return this.fileList.map(url => ({ url }))
+      },
+    },
+    watch: {
+      fileList: {
+        handler(val) {
+          console.log('watch fileList', val)
+        },
+        deep: true,
+      },
+      displayFileList: {
+        handler(val) {
+          console.log('watch displayFileList', val)
+        },
+        deep: true,
+      },
+    },
+    mounted() {
+      console.log('form upload mounted')
+    },
+    methods: {
+			deleteFile(e){
+        console.log('deleteFile', e)
+        const fileList = [...this.fileList]
+        fileList.splice(e.index, 1)
+				this.fileList = fileList
+			},
+			afterRead(e){
+        this.$Oss.ossUpload(e.file.url).then(url => {
+          this.fileList = this.fileList.concat(url)
+        })
+			},
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .btn {
+    width: 190rpx;
+    height: 190rpx;
+    background: #F3F2F7;
+    border-radius: 16rpx;
+
+    &-icon {
+      width: 61rpx;
+      height: auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/pages_order/static/comment/icon-plus.png b/pages_order/static/comment/icon-plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..312a3cb7878cc9968327c554de459c7ed0acbfb3
GIT binary patch
literal 287
zcmeAS@N?(olHy`uVBq!ia0vp^@*vE?1|rvqSpq4}0*}aI1_o|n5N2eUHAey{$XFcY
z?!>U}oXkrghb7(7*O7r?V?XzwL{=bwi>HfYNCo5DsT+9@83?%U*JVp+={dk*z$nR-
z<usd7AoWsurw@a&0h96u1~YrEP^At_MX7(2_0(O{ZFhe#SNO-vu6%sg&DIVk!)s6L
zq7OE-3w9N6<2koB@rcfUwn^T4Km8?C?-=j=)UuWP+MLqlSheNJIqjYn(&r6~c0ci2
ze)~XC(W#$3_rHI#-h6Ah>$7%s{<j~d|4g(DIm`LC^L*;Y$b${*W<8nY{cqBNHEFvS
dy?0Xi$dJdP?@^ai_yp*F22WQ%mvv4FO#t)jXyX6?

literal 0
HcmV?d00001