认证通v1.7版本页面新增修改

src/views/admin/logistics-licensed/club/detail.vue

@@ -1,9 +1,217 @@
 <template>
-  <div>机构详情</div>
+  <div class="app-container">
+    <div class="audit-content">
+      <div class="grid">
+        <div class="row">
+          <div class="col">机构名称：</div>
+          <div class="col">{{ clubInfo.authParty }}</div>
+        </div>
+        <div class="row">
+          <div class="col">联系电话：</div>
+          <div class="col">{{ clubInfo.mobile }}</div>
+        </div>
+        <div class="row">
+          <div class="col">所在地区：</div>
+          <div class="col">{{ clubInfo.area }}</div>
+        </div>
+        <div class="row">
+          <div class="col">详细地址：</div>
+          <div class="col">{{ clubInfo.address }}</div>
+        </div>
+        <div class="row">
+          <div class="col">所在位置：</div>
+          <div class="col">
+            <div class="map" @click="dialogMapVisible = true">
+              <i class="el-icon-map-location" />
+              <span>点击查看</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">logo：</div>
+        <div class="col">
+          <el-image style="width: 120px; height: 120px" :src="clubInfo.logo" :preview-src-list="[clubInfo.logo]" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">门头照：</div>
+        <div class="col">
+          <template v-for="(image, index) in clubInfo.bannerList">
+            <el-image
+              :key="index"
+              style="width: 120px; height: 120px"
+              :src="image"
+              :preview-src-list="clubInfo.bannerList"
+            />
+          </template>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">机构类型：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.clubType">
+            <el-radio
+              v-for="item in clubTypeList"
+              :key="item.id"
+              :label="item.id"
+              :disabled="clubInfo.clubType !== item.id"
+            >{{ item.name }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">医美类型：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.medicalType">
+            <el-radio
+              v-for="item in medicalTypeList"
+              :key="item.id"
+              :label="item.id"
+              :disabled="clubInfo.clubType !== item.id"
+            >{{ item.name }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">医疗许可证：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="clubInfo.licenseImage"
+            :preview-src-list="[clubInfo.licenseImage]"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">员工人数：</div>
+        <div class="col">{{ clubInfo.memberCount }}人</div>
+      </div>
+
+      <div class="row">
+        <div class="col">自定义属性：</div>
+        <div class="col">
+          <el-radio-group v-model="clubInfo.customFlag">
+            <el-radio :label="1" :disabled="clubInfo.customFlag !== 1">是</el-radio>
+            <el-radio :label="0" :disabled="clubInfo.customFlag !== 0">否</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div v-if="clubInfo.customFlag > 0" class="row">
+        <div class="col">店铺备注：</div>
+        <div class="col">{{ clubInfo.remarks }}人</div>
+      </div>
+    </div>
+
+    <!-- 地图坐标拾取 -->
+    <el-dialog class="map-dialog" title="地图信息" :visible.sync="dialogMapVisible" width="80%">
+      <!-- <location v-if="dialogMapVisible" :init-point="formData.point" @point="handlePointChange" /> -->
+      <map-ui :init-point="clubInfo.lngAndLat" />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-export default {}
+import AMapUI from '@/components/AMapUI'
+export default {
+  components: {
+    [AMapUI.name]: AMapUI
+  },
+  data() {
+    return {
+      dialogMapVisible: false,
+      clubTypeList: [
+        { id: 1, name: '医美' },
+        { id: 2, name: '生美' },
+        { id: 3, name: '项目公司' },
+        { id: 4, name: '个人' },
+        { id: 5, name: '其他' }
+      ],
+      medicalTypeList: [
+        { id: 1, name: '诊所' },
+        { id: 2, name: '门诊' },
+        { id: 3, name: '医院' },
+        { id: 4, name: '其他' }
+      ],
+      clubInfo: {
+        medicalType: 1,
+        clubType: 1,
+        licenseImage: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        memberCount: 10,
+        address: '广东省深圳市龙华区大浪街道',
+        area: '广东省深圳市龙华区',
+        authId: '',
+        authParty: '水柔医美',
+        bannerList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ],
+        cityId: '',
+        lngAndLat: '116.42729,39.904993',
+        logo: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        mobile: '15872950940',
+        provinceId: '',
+        townId: '',
+        customFlag: 0,
+        remarks: ''
+      }
+    }
+  },
+  methods: {
+  }
+}
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.app-container {
+  .audit-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    margin-top: 25px;
+  }
+
+  .map {
+    cursor: pointer;
+    span {
+      margin-left: 4px;
+      color: #409eff;
+    }
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    // grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 25px;
+    .col {
+      font-size: 14px;
+      color: #333;
+      &:first-child {
+        min-width: 100px;
+        text-align: right;
+        margin-right: 8px;
+        font-weight: bold;
+        color: #666;
+      }
+
+      .el-image {
+        margin-left: 12px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .el-button {
+    width: 120px;
+  }
+}
+</style>

src/views/admin/logistics-licensed/club/device/detail.vue

@@ -1,9 +1,147 @@
 <template>
-  <div>设备详情</div>
+  <div class="app-container">
+    <div class="audit-content">
+      <div class="grid">
+        <div class="row">
+          <div class="col">设备名称：</div>
+          <div class="col">{{ productInfo.productName }}</div>
+        </div>
+        <div class="row">
+          <div class="col">设备SN码：</div>
+          <div class="col">{{ productInfo.snCode }}</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">设备图片：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="productInfo.productImage"
+            :preview-src-list="[productInfo.productImage]"
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col">所属品牌：</div>
+        <div class="col">{{ productInfo.brandName }}</div>
+      </div>
+
+      <div class="row">
+        <div class="col">购买渠道：</div>
+        <div class="col">{{ productInfo.buyChannel }}</div>
+      </div>
+
+      <div class="row">
+        <div class="col">发票：</div>
+        <div class="col">
+          <el-image
+            style="width: 120px; height: 120px"
+            :src="productInfo.invoiceImage"
+            :preview-src-list="[productInfo.invoiceImage]"
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col">设备参数：</div>
+        <div class="col">
+          <template v-for="(param, index) in productInfo.paramList">
+            <div :key="index" class="param">
+              <div class="label">{{ param.paramName }}：</div>
+              <div class="content">{{ param.paramContent }}</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      productInfo: {
+        productName: '产品名称产品名称',
+        snCode: 'adsgfadsgdsagasg',
+        productImage: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        certificateImage: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        paramList: [{
+          paramName: '参数名称',
+          paramContent: '参数信息信息'
+        }, {
+          paramName: '参数名称',
+          paramContent: '参数信息信息'
+        }, {
+          paramName: '参数名称',
+          paramContent: '参数信息信息'
+        }],
+        invoiceImage: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        brandName: '品牌名',
+        buyChannel: '购买渠道'
+      }
+    }
+  },
+  methods: {
+  }
+}
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.app-container {
+  .audit-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    margin-top: 25px;
+  }
+  .grid,
+  .param {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    // grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+
+  .param {
+    div {
+      padding-bottom: 16px;
+      text-align: left;
+
+      &:first-child{
+        text-align: right;
+      }
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 25px;
+    .col {
+      font-size: 14px;
+      color: #333;
+      &:first-child {
+        min-width: 100px;
+        text-align: right;
+        margin-right: 8px;
+        font-weight: bold;
+        color: #666;
+      }
+
+      .el-image {
+        margin-left: 12px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .el-button {
+    width: 120px;
+  }
+}
+</style>