feat: 门店评价

project/fengdu/AppOutSource/AppMarkRate/components/Detail.vue

@@ -1,18 +1,129 @@
 <template>
-  <div>
-    Detail
-  </div>
+  <ai-detail class="detail">
+    <template slot="title">
+      <ai-title title="评价详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <ai-wrapper>
+            <ai-info-item label="门店名称" :value="info.applyItemName"></ai-info-item>
+            <ai-info-item label="门店地址" :value="info.integralUserName"></ai-info-item>
+            <ai-info-item label="经营者姓名" :value="info.phone"></ai-info-item>
+            <ai-info-item label="联系电话" :value="info.areaName"></ai-info-item>
+            <ai-info-item label="评价人" :value="info.girdName"></ai-info-item>
+            <ai-info-item label="评价人电话" :value="info.auditTime"></ai-info-item>
+            <ai-info-item label="评价时间" :value="info.auditTime"></ai-info-item>
+            <ai-info-item label="评价人类型" :value="info.auditTime"></ai-info-item>
+            <ai-info-item label="评价类型" isLine :value="info.auditTime"></ai-info-item>
+            <ai-info-item label="评语" isLine :value="info.auditTime"></ai-info-item>
+            <ai-info-item label="现场图片" isLine :value="info.auditTime">
+              <div class="files">
+                <ai-uploader
+                    :instance="instance"
+                    fileType="img"
+                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
+                    v-model="info.images"
+                    :limit="9" :disabled="true">
+                </ai-uploader>
+              </div>
+            </ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card title="打分细则">
+        <label class="aibar-left">1、正面清单</label>
+        <ai-table
+            class="mt-16"
+            :tableData="tableData1"
+            :is-show-pagination="false"
+            :col-configs="colConfigs1">
+        </ai-table>
+        <label class="aibar-left">2、负面清单</label>
+        <ai-table
+            class="mt-16"
+            :tableData="tableData2"
+            :is-show-pagination="false"
+            :col-configs="colConfigs2">
+        </ai-table>
+      </ai-card>
+    </template>
+  </ai-detail>
 </template>
 
 <script>
 export default {
   name: "Detail",
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
   data() {
-    return {}
+    return {
+      info: {},
+      tableData1:[],
+      colConfigs1:[
+        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
+        { prop: 'areaName',  label: '状态', align: 'center' },
+        { prop: 'girdName',  label: '分数', align: 'center' },
+      ],
+      tableData2:[],
+      colConfigs2:[
+        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
+        { prop: 'areaName',  label: '状态', align: 'center' },
+        { prop: 'girdName',  label: '分数', align: 'center' },
+      ]
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: true
+      })
+    }
   },
 }
 </script>
 
 <style lang="scss" scoped>
+.detail{
+  .files {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 
+    .file-item {
+      width: 118px;
+      height: 118px;
+      margin: 0 20px 20px 0;
+
+      img, video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      img {
+        cursor: pointer;
+        transition: all ease 0.3s;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  .aibar-left{
+    color: #222;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .mt-16{
+    margin-top: 16px;
+  }
+}
 </style>