更新

hdApp/src/pagesPurchase/contact.vue

@@ -1,226 +1,197 @@
 <template>
   <view class="app-content">
-    <!-- 图片说明区域 -->
-    <view class="section-card">
+    <view class="section-card guide-card">
+      <view class="section-label">售后联系</view>
       <view class="section-desc">花材的质量、价格和售后问题，请在下图位置找商家</view>
       <view class="image-box">
-        <image class="logo" :src="`${constant.imgUrl}/shop/contact_shop.png`" mode="widthFix"></image>
+        <image class="guide-image" :src="`${constant.imgUrl}/shop/contact_shop.png`" mode="widthFix"></image>
       </view>
     </view>
 
-    <view class="section-card contact-section">
-      <view class="contact-info">
-        <view class="info-text">零售花店，需要申请商城系统，请加下面微信，添加时请注明：花店，否则可能会不通过。</view>
-        <view class="info-text">微信1号：18259179840</view>
-        <view class="info-text">微信2号：18559200768</view>
+    <view class="section-card contact-card">
+      <view class="section-label">零售花店</view>
+      <view class="contact-tip">
+        需要申请商城系统，请加下面微信。添加时请注明：
+        <text class="contact-highlight">花店</text>
+        ，否则可能会不通过。
       </view>
-      <view class="button-wrapper">
-        <button class="admin-button-com big green" @click="copyWechat('18259179840')" style="margin-right:50upx;">复制微信1号</button>
-        <button class="admin-button-com big green" @click="copyWechat('18559200768')">复制微信2号</button>
+      <view class="wechat-list">
+        <view class="wechat-item">
+          <view class="wechat-info">
+            <text class="wechat-label">微信1号</text>
+            <text class="wechat-number">18259179840</text>
+          </view>
+          <button class="admin-button-com middle blue copy-action" @click="copyWechat('18259179840')">复制</button>
+        </view>
+        <view class="wechat-item">
+          <view class="wechat-info">
+            <text class="wechat-label">微信2号</text>
+            <text class="wechat-number">18559200768</text>
+          </view>
+          <button class="admin-button-com middle blue copy-action" @click="copyWechat('18559200768')">复制</button>
+        </view>
       </view>
     </view>
 
-    <view class="section-card contact-section">
-      <view class="contact-info">
-        <view class="info-text">城市批发和斗南批发，需要申请商城系统，请加微信 15280215347，添加时请注明：批发店，否则可能会不通过。</view>
+    <view class="section-card contact-card">
+      <view class="section-label">城市批发 / 斗南批发</view>
+      <view class="contact-tip">
+        需要申请商城系统，请加下面微信。添加时请注明：
+        <text class="contact-highlight">批发店</text>
+        ，否则可能会不通过。
       </view>
-      <view class="button-wrapper">
-        <button class="admin-button-com big green" @click="copyWechat('15280215347')">复制微信</button>
+      <view class="wechat-list">
+        <view class="wechat-item">
+          <view class="wechat-info">
+            <text class="wechat-label">微信</text>
+            <text class="wechat-number">15280215347</text>
+          </view>
+          <button class="admin-button-com middle blue copy-action" @click="copyWechat('15280215347')">复制</button>
+        </view>
       </view>
     </view>
-
   </view>
 </template>
+
 <script>
 export default {
   name: "contact",
   data() {
     return {
+      constant: this.$constant
     };
   },
   methods: {
-    init(){
-    },
-    copyWechat(wechatId){
+    init() {},
+    copyWechat(wechatId) {
       uni.setClipboardData({
         data: wechatId,
         success: () => {
           // #ifndef MP-WEIXIN
-          this.$msg('复制成功');
+          this.$msg("复制成功");
           // #endif
         },
         fail: () => {
-          this.$msg('复制失败');
+          this.$msg("复制失败");
         }
       });
-    },
+    }
   },
   // #ifdef MP-WEIXIN
   onShareAppMessage() {
     return {
-      title: '公告',
-      path: 'pagesPurchase/contact',
-      imageUrl: ''
-    }
+      title: "公告",
+      path: "pagesPurchase/contact",
+      imageUrl: ""
+    };
   }
   // #endif
 };
 </script>
+
 <style lang="scss" scoped>
 .app-content {
-  min-height: calc(100vh - 20upx);
-  padding-top: 20upx;
-  padding-left: 20upx;
-  padding-right: 20upx;
-  padding-bottom:30upx;
-  background: #f5f7fa;
+  min-height: 100vh;
+  padding: 24upx 24upx 40upx;
+  box-sizing: border-box;
+  background: #f5f7f6;
 }
 
-/* 卡片样式 */
 .section-card {
-  background: #ffffff;
-  border-radius: 14upx;
-  padding: 28upx 24upx;
+  background: #fff;
+  border-radius: 24upx;
+  padding: 32upx 28upx;
+  margin-bottom: 24upx;
+  box-shadow: 0 10upx 28upx rgba(24, 37, 30, 0.06);
+}
+
+.section-label {
+  color: #18251e;
+  font-size: 34upx;
+  font-weight: 700;
+  line-height: 48upx;
   margin-bottom: 20upx;
-  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.04);
-
-  .section-title {
-    font-size: 32upx;
-    font-weight: 700;
-    color: #333;
-    margin-bottom: 16upx;
-    display: flex;
-    align-items: center;
-    gap: 8upx;
-  }
+}
 
-  .section-desc {
-    font-size: 32upx;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 16upx;
-    line-height: 1.5;
-  }
+.section-desc {
+  color: #333;
+  font-size: 30upx;
+  line-height: 46upx;
+  margin-bottom: 24upx;
 }
 
-/* 图片盒子 */
-.image-box {
+.guide-card .image-box {
   width: 100%;
-  border-radius: 10upx;
+  border-radius: 16upx;
   overflow: hidden;
-  border: 1upx solid #f0f0f0;
-
-  .logo {
-    width: 100%;
-    display: block;
-  }
+  border: 1upx solid #eef1ef;
 }
 
-/* 常见问题区域 */
-.faq-item {
-  padding: 20upx 0;
-  border-bottom: 1upx solid #f5f5f5;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .faq-question {
-    font-size: 30upx;
-    color: #0066cc;
-    font-weight: 600;
-    margin-bottom: 12upx;
-    line-height: 1.4;
-  }
+.guide-image {
+  width: 100%;
+  display: block;
+}
 
-  .faq-answer {
-    font-size: 30upx;
-    color: #666;
-    line-height: 1.6;
-  }
+.contact-tip {
+  color: #5c6661;
+  font-size: 28upx;
+  line-height: 44upx;
+  margin-bottom: 24upx;
 }
 
-/* 警告区域 */
-.alert-section {
-  margin-bottom: 20upx;
+.contact-highlight {
+  color: #09c567;
+  font-weight: 600;
 }
 
-.alert-warning {
-  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
-  border: 2upx solid #ff6b6b;
-  border-radius: 14upx;
-  padding: 24upx 20upx;
+.wechat-list {
   display: flex;
-  gap: 16upx;
-
-  .alert-icon {
-    font-size: 36upx;
-    flex-shrink: 0;
-  }
-
-  .alert-text {
-    font-size:36upx;
-    color: #c41d2a;
-    font-weight: 600;
-    line-height: 1.6;
-    flex: 1;
-  }
+  flex-direction: column;
 }
 
-/* 联系区域 */
-.contact-section {
-  .contact-info {
-    background: #f9fafb;
-    border-radius: 10upx;
-    margin-bottom: 24upx;
-    .info-text {
-      font-size:34upx;
-      color: #333;
-      margin-bottom: 12upx;
-      line-height: 1.5;
-    }
-
-    .phone-number {
-      font-size: 36upx;
-      color: #049E2C;
-      font-weight: 700;
-      letter-spacing: 2upx;
-    }
+.wechat-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24upx 28upx;
+  border-radius: 18upx;
+  background: #f7faf8;
+  margin-top: 20upx;
+
+  &:first-child {
+    margin-top: 0;
   }
+}
 
-  .button-wrapper {
-    display: flex;
-    justify-content: center;
-  }
+.wechat-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  margin-right: 24upx;
 }
 
-.prompt-text {
-  color: $fontColor3;
-  padding-left: 30upx;
-  margin-bottom: 30upx;
+.wechat-label {
+  color: #77817c;
+  font-size: 24upx;
+  line-height: 34upx;
+  margin-bottom: 8upx;
 }
 
-.module-com {
-  margin-bottom: 20upx;
-  .member-wrap {
-    .member-det {
-      font-size: 24upx;
-      margin-left: 20upx;
-    }
-  }
-  .remark-wrap {
-    align-items: flex-start;
-    .remark {
-      height: 240upx;
-    }
-  }
+.wechat-number {
+  color: #18251e;
+  font-size: 34upx;
+  font-weight: 600;
+  line-height: 48upx;
+  letter-spacing: 1upx;
+  word-break: break-all;
 }
 
-.confirm-btn {
-  width: calc(100% - 60upx);
-  margin: 60upx 30upx 20upx;
-  .admin-button-com {
-    width: 100%;
-  }
+.copy-action {
+  flex-shrink: 0;
+  min-width: 128upx;
+  padding-left: 28upx;
+  padding-right: 28upx;
 }
-</style>
+</style>