feat: 意见反馈

project.config.json

@@ -1,5 +1,5 @@
 {
-  "appid": "wx0be424e1d22065a9",
+  "appid": "wx5e79df5996572539",
   "compileType": "miniprogram",
   "libVersion": "3.8.10",
   "packOptions": {

src/components/Feedback/index.vue

@@ -1,50 +1,55 @@
 <template>
   <view class="create-service-order">
-    <view class="create-service-wrapper">
-      <view class="order-header">
-        <text>反馈意见</text>
-      </view>
-      <view class="order-content">
-        <view class="detail-item">
-          <text class="detail-label">联系电话：</text>
+    <view
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
+    >
+      <image
+        class="order-header w-full"
+        src="https://oss.nianxx.cn/mp/static/version_101/home/feedback_1.png"
+        mode="aspectFill"
+      />
+      <view class="order-content border-box p-12">
+        <view
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <text class="font-500 line-height-22 mr-20">联系电话</text>
           <input
             v-if="!isCallSuccess"
-            class="detail-input"
             placeholder="请填写联系电话"
             v-model="contactPhone"
           />
           <text v-else class="detail-value">{{ contactPhone }}</text>
         </view>
-        <view class="detail-item">
-          <text class="detail-label">意见内容：</text>
+        <view
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <view class="font-500 line-height-22 mb-12">意见内容</view>
           <textarea
             v-if="!isCallSuccess"
-            class="detail-textarea"
             placeholder="请输入反馈意见"
+            maxlength="100"
             v-model="contactText"
           />
           <text v-else class="detail-value">{{ contactText }}</text>
         </view>
 
-        <button
+        <view
           v-if="!isCallSuccess"
-          class="order-button submit-button"
+          class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
           @click="handleCall"
         >
           立即提交
-        </button>
-
-        <button v-else class="order-button look-button" @click="viewWorkOrder">
-          查看意见
-        </button>
+        </view>
       </view>
-    </view>
 
-    <view class="footer-help">
-      <image src="./images/icon_volume.png" class="help-icon"></image>
-      <text class="help-text">
-        {{ appName }}收到您的意见将第一时间为您处理!
-      </text>
+      <view
+        class="footer-help flex flex-items-center flex-justify-center mb-12"
+      >
+        <image class="help-icon mr-4" src="./images/icon_volume.png" />
+        <text class="font-size-12 font-500 color-FA7319">
+          {{ appName }}收到您的意见将第一时间为您处理!
+        </text>
+      </view>
     </view>
   </view>
 </template>

src/components/Feedback/styles/index.scss

@@ -1,95 +1,16 @@
-.create-service-wrapper {
-  padding: 6px 0 12px;
-}
-
 .order-header {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: $uni-text-color;
+  height: 48px;
 }
 
 .order-content {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.detail-item {
-  display: flex;
-  align-items: start;
-  margin-bottom: 12px;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.detail-label {
-  width: 70px;
-  white-space: nowrap;
-}
-
-.detail-value {
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.detail-textarea {
-  width: 100%;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
-.detail-input {
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  border-bottom: 1px solid #ddd;
-  padding-left: 8px;
-}
-
-.order-button {
-  width: 300px;
-  height: 42px;
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border-radius: 21px;
-  margin-top: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.submit-button {
-  background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
-}
-
-.look-button {
-  background: linear-gradient(90deg, #0256ff, #00a6ff);
-}
-
-.footer-help {
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  font-size: $uni-font-size-base;
-  color: #ed6a0c;
+  width: 335px;
 }
 
 .help-icon {
   width: 16px;
-  height: 14px;
-  margin-right: 5px;
+  height: 16px;
 }
 
-.help-text {
-  margin-right: 5px;
+.btn {
+  height: 44px;
 }

src/constant/base.js

@@ -40,7 +40,7 @@ const processConfigs = (configs) => {
 export const CLIENT_CONFIGS = processConfigs(rawConfigs);
 
 // 获取当前用户端配置
-export const getCurrentConfig = () => CLIENT_CONFIGS.tianmu;
+export const getCurrentConfig = () => CLIENT_CONFIGS.zhinian;
 export const clientId = getCurrentConfig().clientId;
 export const appId = getCurrentConfig().appId;
 

src/manifest.json

@@ -60,7 +60,7 @@
   朵花：wx23f86d809ae80259
   */
   "mp-weixin": {
-    "appid": "wx0be424e1d22065a9",
+    "appid": "wx5e79df5996572539",
     "setting": {
       "urlCheck": false
     },

src/static/scss/background.scss

@@ -15,6 +15,10 @@
   background-color: #e5e8ee;
 }
 
+.bg-F5F7FA {
+  background-color: #f5f7fa;
+}
+
 .bg-liner {
   background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
     linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
@@ -25,3 +29,7 @@
     ),
     linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, #eef8ff 50%), #eef8ff;
 }
+
+.bg-button {
+  background: linear-gradient(90deg, #2d91ff 0%, #4de4ff 100%);
+}

src/static/scss/border.scss

@@ -6,3 +6,11 @@
 .border-bottom {
   border-bottom: 1px solid #e5e8ee;
 }
+
+.border-ff {
+  border: 1px solid #fff;
+}
+
+.border-none {
+  border: none;
+}

src/static/scss/colors.scss

@@ -51,3 +51,7 @@
 .color-21B466 {
   color: #21b466;
 }
+
+.color-FA7319 {
+  color: #fa7319;
+}

src/static/scss/margin.scss

@@ -70,3 +70,7 @@
 .ml-20 {
   margin-left: 20px;
 }
+
+.mr-20 {
+  margin-right: 20px;
+}