BUG 30546

src/components/AiGroup/AiGroup.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="AiGroup">
+    <slot/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiGroup"
+}
+</script>
+
+<style lang="scss" scoped>
+.AiGroup {
+  background: #FFFFFF;
+  box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+  padding-left: 32px;
+
+  & + .AiGroup {
+    margin-top: 16px;
+  }
+}
+</style>

src/components/AiItem/AiItem.vue

@@ -0,0 +1,107 @@
+<template>
+  <section class="AiItem" :class="{border}">
+    <div v-if="topLabel" class="topLabel">
+      <div class="labelPane flex">
+        <div class="label" :class="{required,labelBold}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <div class="content">
+        <slot v-if="$slots.default"/>
+        <div v-else v-text="value"/>
+      </div>
+    </div>
+    <div v-else class="normal flex">
+      <div class="fill flex">
+        <div class="label" :class="{required,labelBold}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <div class="flexContent">
+        <slot v-if="$slots.default"/>
+        <div v-else v-text="value"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiItem",
+  props: {
+    value: {default: ""},
+    label: {default: ""},
+    required: Boolean,
+    topLabel: Boolean,
+    border: {default: true},
+    labelBold: Boolean
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiItem {
+  font-family: PingFangSC-Regular, PingFang SC;
+
+  .border {
+    .normal {
+      border-bottom: 2px solid #ddd;
+    }
+
+    .topLabel {
+      border-bottom: 2px solid #ddd;
+    }
+  }
+
+  .normal {
+    width: 100%;
+    padding-right: 32px;
+    box-sizing: border-box;
+    height: 112px;
+
+    .flexContent {
+      max-width: 62vw;
+    }
+  }
+
+  .label {
+    padding-left: 20px;
+    font-weight: 400;
+    color: #333333;
+    margin-right: 20px;
+    position: relative;
+
+    &.required:before {
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "*";
+      color: #f46;
+    }
+
+    &.labelBold {
+      font-weight: bold;
+      font-size: 34px;
+    }
+  }
+
+  ::v-deep.topLabel {
+    padding: 32px 32px 32px 0;
+
+    .labelPane {
+      margin-bottom: 32px;
+    }
+
+    .content {
+      padding-left: 20px;
+
+      .AiMore > .u-icon {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/mods/publicity/AppAgProducts/agDetail.vue

@@ -11,19 +11,13 @@
              v-for="(item,index) in detail.files" :key="index" @click="preview(index)">
       </div>
     </div>
-    <div class="card">
-      <div class="item">
-        <div class="label">联系方式</div>
-        <div class="value" @click="phone">
-          <u-icon name="phone-fill" size="28" color="#4181FF" :custom-style="{marginRight:'6px'}"></u-icon>
-          {{ detail.phone }}
-        </div>
-      </div>
-      <div class="item">
-        <div class="label">地址</div>
-        <div class="address">{{ detail.address }}</div>
-      </div>
-    </div>
+    <AiGroup>
+      <AiItem v-if="detail.contactPerson" label="联系人" :value="detail.contactPerson"/>
+      <AiItem label="联系方式">
+        <u-icon name="phone-fill" size="32" label-size="32" color="#4181FF" labelColor="#4181FF" :label="detail.phone" @click="phone"/>
+      </AiItem>
+      <AiItem label="地址" :value="detail.address"/>
+    </AiGroup>
     <div class="btn-wrapper" v-if="detail.openId == user.openId">
       <div class="btn" @click="unDo" hover-class="text-hover">撤销发布</div>
     </div>
@@ -33,6 +27,7 @@
 
 <script>
 import {mapState} from 'vuex'
+
 export default {
   name: "agDetail",
   appName: "农产品详情",