1

src/pages/client/remark/compare.vue

@@ -0,0 +1,240 @@
+<template>
+  <view class="remark-compare-container">
+    <view class="remark-compare-content">
+      <view class="fs-32 app-fc-main compare-title">
+        洗护前
+        <text class="fs-20 compare-tips">（最多可上传9张）</text>
+      </view>
+      <uni-file-picker
+        limit="9"
+        :imageStyles="{
+          width: '196rpx',
+          height: '196rpx',
+          'border-radius': '20rpx',
+        }"
+        :del-icon="true"
+        :auto-upload="false"
+        @select="onImgChange"
+        @delete="onImgDelete"
+      >
+        <view class="flex-center add-wrapper">
+          <image class="add-icon" src="./static/add_icon.png" />
+          <text class="fs-24 add-text">添加图片</text>
+        </view>
+      </uni-file-picker>
+
+      <view class="fs-32 app-fc-main compare-title compare-after">
+        洗护后
+        <text class="fs-20 compare-tips">（最多可上传9张）</text>
+      </view>
+      <uni-file-picker
+        limit="9"
+        :imageStyles="{
+          width: '196rpx',
+          height: '196rpx',
+          'border-radius': '20rpx',
+        }"
+        :del-icon="true"
+        :auto-upload="false"
+        @select="onAfterImgChange"
+        @delete="onAfterImgDelete"
+      >
+        <view class="flex-center add-wrapper">
+          <image class="add-icon" src="./static/add_icon.png" />
+          <text class="fs-24 add-text">添加图片</text>
+        </view>
+      </uni-file-picker>
+    </view>
+    <view class="place-view"></view>
+    <view class="flex-center confirm-footer">
+      <view class="flex-center fs-30 app-fc-white confirm-btn" @click="submit">
+        上传
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import appConfig from "../../../constants/app.config";
+export default {
+  data() {
+    return {
+      beforeImgList: [],
+      afterImgList: [],
+      orderId: "",
+    };
+  },
+  onLoad(options) {
+    this.orderId = options?.orderId || "";
+  },
+  methods: {
+    onImgChange(e) {
+      uni.showLoading({
+        title: "图片上传中...",
+        icon: "none",
+        mask: true,
+      });
+      const promiseList = [];
+      (e?.tempFilePaths || []).map((path, i) => {
+        promiseList.push(this.uploadFile(path, "before", i));
+      });
+      Promise.all(promiseList).finally(() => {
+        uni.hideLoading();
+      });
+    },
+    onImgDelete(e) {
+      this.beforeImgList.splice(e.index, 1);
+    },
+    onAfterImgChange(e) {
+      const promiseList = [];
+      (e?.tempFilePaths || []).map((path, i) => {
+        promiseList.push(this.uploadFile(path, "after", i));
+      });
+      Promise.all(promiseList).finally(() => {
+        uni.hideLoading();
+      });
+    },
+    onAfterImgDelete(e) {
+      this.afterImgList.splice(e.index, 1);
+    },
+    uploadFile(url, type, index) {
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: appConfig.apiBaseUrl + "/app/upload/upload_file",
+          filePath: url,
+          name: "image",
+          formData: {
+            file_name: "app",
+            pic_name: +new Date() + '_' + index,
+          },
+          header: { token: uni.getStorageSync("token") },
+          success: (res) => {
+            const data = JSON.parse(res.data);
+            const { code, msg, info } = data;
+            const errCode = String(code);
+
+            if (errCode === "0" || errCode === "200") {
+              if (type === "after") {
+                this.afterImgList.push({
+                  fullUrl: info?.[0]?.urlname,
+                  url: info?.[0]?.filename,
+                });
+              } else {
+                this.beforeImgList.push({
+                  fullUrl: info?.[0]?.urlname,
+                  url: info?.[0]?.filename,
+                });
+              }
+              this.$forceUpdate();
+              resolve();
+            } else {
+              uni.showToast({
+                title: msg || "上传失败",
+                icon: "none",
+              });
+              reject();
+            }
+          },
+          fail: () => {
+            uni.showToast({
+              title: "上传失败",
+              icon: "none",
+            });
+            reject();
+          },
+        });
+      });
+    },
+    submit() {
+      if (!this.beforeImgList.length) {
+        uni.showToast({
+          title: "请上传洗护前图片",
+          icon: "none",
+        });
+        return;
+      }
+      if (!this.afterImgList.length) {
+        uni.showToast({
+          title: "请上传洗护后图片",
+          icon: "none",
+        });
+        return;
+      }
+      uni.showToast({
+        icon: "none",
+        title: "接口开发中",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.remark-compare-container {
+  height: 100%;
+  padding: 20rpx 32rpx 0;
+  padding: 20rpx 32rpx constant(safe-area-inset-bottom);
+  padding: 20rpx 32rpx env(safe-area-inset-bottom);
+  background: #f7f8fa;
+
+  .remark-compare-content {
+    background: #fff;
+    border-radius: 30rpx;
+    padding: 52rpx 28rpx 40rpx;
+    box-sizing: border-box;
+
+    .compare-tips {
+      color: #726e71;
+    }
+
+    .compare-title {
+      margin-bottom: 28rpx;
+    }
+
+    .add-wrapper {
+      background: #f8f9fa;
+      width: 196rpx;
+      height: 196rpx;
+      border-radius: 20rpx;
+
+      .add-icon {
+        width: 30rpx;
+        height: 30rpx;
+        margin-bottom: 20rpx;
+      }
+
+      .add-text {
+        color: #d2d4dd;
+      }
+    }
+
+    .compare-after {
+      margin-top: 40rpx;
+    }
+  }
+
+  .confirm-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    background: #fff;
+    padding: 20rpx 0 0;
+    padding: 20rpx 0 constant(safe-area-inset-bottom);
+    padding: 20rpx 0 env(safe-area-inset-bottom);
+  }
+
+  .place-view {
+    height: 166rpx;
+  }
+
+  .confirm-btn {
+    width: 630rpx;
+    height: 90rpx;
+    border-radius: 90rpx;
+    background: $app_color_main;
+    border-radius: 45rpx 45rpx 45rpx 45rpx;
+    color: #fff;
+  }
+}
+</style>

src/pages/client/remark/details.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="remark-details">
+    <remark-item :data="data" />
+  </view>
+</template>
+
+<script>
+import RemarkItem from "@/components/goods/RemarkItem.vue";
+import { getRemarkDetails } from "../../../api/shop";
+
+export default {
+  data() {
+    return {
+      data: {},
+      remarkId: "",
+    };
+  },
+  components: {
+    RemarkItem,
+  },
+  onLoad(options) {
+    const { remarkId = "" } = options;
+    this.remarkId = remarkId;
+    this.getRemarkDetails();
+  },
+  methods: {
+    getRemarkDetails() {
+      getRemarkDetails(this.remarkId).then((res) => {
+        this.data = res?.info;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.remark-details {
+  padding: 20rpx 0;
+  box-sizing: border-box;
+  background: #f7f8fa;
+}
+</style>

src/pages/client/remark/list.vue

@@ -0,0 +1,82 @@
+<template>
+  <view class="remark-list-container">
+    <list-page-temp
+      class="remark-list-inner"
+      :getDataPromise="getRemarkList"
+      :reloadFlag="reloadFlag"
+      :requestData="requestData"
+    >
+      <template v-slot:item="{ data }">
+        <remark-item :data="data" />
+      </template>
+      <view slot="bottom" class="place-view"></view>
+    </list-page-temp>
+  </view>
+</template>
+
+<script>
+import RemarkItem from "@/components/goods/RemarkItem.vue";
+import ListPageTemp from "@/components/ListPageTemp.vue";
+import { getRemarkList } from "@/api/shop";
+
+export default {
+  props: {
+    //  1.商品订单 2.服务券订单
+    type: {
+      type: Number,
+      default: 1,
+    },
+    guanlian_id: {
+      type: String | Number,
+      default: "",
+    },
+  },
+  components: {
+    RemarkItem,
+    ListPageTemp,
+  },
+  data() {
+    return {
+      reloadFlag: 0,
+      remarkList: [],
+      requestData: {
+        type: this.type,
+        guanlian_id: this.guanlian_id,
+      },
+    };
+  },
+  onShow() {
+    this.reloadFlag = Math.random();
+  },
+  onLoad(options) {
+    const { type, shopId } = options;
+    if (type) {
+      this.requestData.type = type;
+    }
+    if (shopId) {
+      this.requestData.guanlian_id = shopId;
+    }
+  },
+  mounted() {},
+  methods: {
+    getRemarkList,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.remark-list-container {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fbf8fc;
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-top: 20rpx;
+
+  .remark-list-inner {
+    height: 100%;
+  }
+}
+</style>