添加评价

src/pages/order/remark.vue

@@ -28,29 +28,15 @@
         />
         <text class="textarea">上传图片/视频</text>
         <wd-upload
+          prop="images"
           class="wdUpload"
-          accept="media"
           multiple
-          :action="fileUPload"
+          :action="action"
           @change="handleFile"
+          :file-list="fileList"
+          :before-remove="beforeRemove"
+          :header="headers"
         ></wd-upload>
-
-        <!-- <view class="tuijian" v-if="show">
-              <view class="tjTitle">
-                <text class="textarea">我要推荐菜</text>
-                <text class="textRight">
-                  查看全部(30)
-                  <wd-icon name="arrow-right"></wd-icon>
-                </text>
-              </view>
-              <view class="itemtuijianList">
-                <wd-checkbox-group shape="button">
-                  <wd-checkbox modelValue="jingmai" checked-color="#f00" shape="button"></wd-checkbox>
-                  <wd-checkbox modelValue="asd" shape="button">沃特</wd-checkbox>
-                </wd-checkbox-group>
-              </view>
-            </view> -->
-
         <wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
           <wd-switch
             size="48rpx"
@@ -63,40 +49,58 @@
       </wd-form>
 
       <wd-button type="error" block @click="handleSubmit">发布</wd-button>
+
+      <wd-overlay :show="overshow">
+        <view class="overlay">
+          <wd-button block type="info" @click="deleteImg">删除图片</wd-button>
+          <wd-button block type="info" @click="overshow = false">取消</wd-button>
+        </view>
+      </wd-overlay>
     </view>
   </view>
 </template>
 <script setup lang="ts">
 import Header from './components/Header/index.vue';
+import { getToken } from '@/utils/auth';
 import { evaluation } from '@/api/order';
+
 const form = ref();
+const token = getToken();
+// 上传图片地址
+const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
+const headers = ref();
 /**
  * options
  */
 const shopname = ref<string>('');
 onLoad((options) => {
+  console.log(options);
   shopname.value = options?.shopName;
   formdata.orderNumber = options?.orderNumber;
+  headers.value = { Authorization: 'Bearer ' + token };
 });
 
 const formdata = reactive<{
   orderNumber: string;
   evaluation: string;
-  images: string[];
+  images: string;
   isAnonymous: number;
   descriptionMatches: number;
   merchantServices: number;
 }>({
   orderNumber: '',
   evaluation: '',
-  images: [],
+  images: '',
   isAnonymous: 0,
   descriptionMatches: 0,
   merchantServices: 0,
 });
-
-const rules = {};
-
+const rules = {
+  // evaluation: [
+  //   { required: true, message: '请填写你的评价' },
+  //   { type: 'array', min: 1, message: '请上传图片/视频' },
+  // ],
+};
 /**
  * 显示推荐菜
  */
@@ -113,19 +117,55 @@ const merList = ref({
   4: '好',
   5: '非常好',
 });
-const handlemerchant = (e) => {
-  merchantServices.value = e.value;
+const handlemerchant = (item: { value: number }) => {
+  merchantServices.value = item.value;
 };
 
 /**
  * 图片上传
  */
-const fileUPload = ref<string>('/');
+const fileList = ref<any[]>([]);
+function handleFile({ fileList: files }) {
+  fileList.value = files;
+}
+/**
+ * 图片地址处理
+ */
+const proImage = () => {
+  const data = fileList.value.map((item) => {
+    return JSON.parse(item.response).data.url;
+  });
+  return data.join(',');
+};
 
-function handleFile({ files }) {}
+const overshow = ref<boolean>(false);
+const resolves = ref();
+const beforeRemove = ({ file, fileList, resolve }) => {
+  overshow.value = true;
+  resolves.value = resolve;
+};
+const deleteImg = () => {
+  console.log(resolves.value(true));
+  overshow.value = false;
+};
+/**
+ * Release提交
+ */
 
 const handleSubmit = async () => {
-  const res = await evaluation();
+  await evaluation({
+    ...formdata,
+    images: proImage(),
+  });
+  xma.showToast({
+    title: '评价成功',
+    duration: 1000,
+    icon: 'none',
+  });
+  xma.redirectTo({
+    url: `/pages/order/order?status=not_eval`,
+  });
+
   console.log(formdata);
 };
 </script>
@@ -139,6 +179,25 @@ const handleSubmit = async () => {
   flex-direction: column;
 }
 
+.overlay {
+  width: 720rpx;
+  margin: 0 auto;
+  height: auto;
+  position: absolute;
+  bottom: 90rpx;
+  left: 50%;
+  transform: translateX(-50%);
+
+  :deep(.wd-button) {
+    margin-top: 14rpx;
+    width: 720rpx;
+    height: 110rpx;
+    background: #ffffff;
+    border-radius: 25rpx 25rpx 25rpx 25rpx;
+    font-size: 36rpx;
+  }
+}
+
 .content {
   margin: 25rpx 20rpx 0;
   padding-top: 88rpx;
@@ -192,6 +251,15 @@ const handleSubmit = async () => {
 
     .wdUpload {
       margin-top: 25rpx;
+
+      :deep(.wd-upload__close) {
+        left: 10rpx;
+        top: 10rpx;
+      }
+
+      :deep(.wd-upload__status-content) {
+        background-color: #000;
+      }
     }
   }
 
@@ -226,3 +294,19 @@ const handleSubmit = async () => {
   --wot-size-side-padding: 0px;
 }
 </style>
+
+<!-- <view class="tuijian" v-if="show">
+              <view class="tjTitle">
+                <text class="textarea">我要推荐菜</text>
+                <text class="textRight">
+                  查看全部(30)
+                  <wd-icon name="arrow-right"></wd-icon>
+                </text>
+              </view>
+              <view class="itemtuijianList">
+                <wd-checkbox-group shape="button">
+                  <wd-checkbox modelValue="jingmai" checked-color="#f00" shape="button"></wd-checkbox>
+                  <wd-checkbox modelValue="asd" shape="button">沃特</wd-checkbox>
+                </wd-checkbox-group>
+              </view>
+            </view> -->