feat(client): 新增帮助中心服务

src/PageMine/serviceCenter/index.vue

@@ -1,12 +1,78 @@
 <template>
   <view class="service-center">
-    <u--image
-      src="/static/pages/mine/mine-bg.png"
-      width="100%"
-      height="550rpx"
-    ></u--image>
-    <page-navbar bgColor="transparent" title="帮助中心"></page-navbar>
-    <div>1111111111</div>
+    <view class="service-bg">
+      <u--image
+        src="/static/pageMine/help/help-bg.png"
+        width="100%"
+        height="550rpx"
+      ></u--image>
+    </view>
+    <view class="service-main">
+      <page-navbar bgColor="transparent" title="帮助中心"></page-navbar>
+
+      <view class="fl-flex-item u-m-t-34 u-m-b-44">
+        <view class="u-m-l-32">
+          <view class="f-s-40 text-primary text-bold u-m-b-24">帮助中心</view>
+          <view class="f-s-24" style="color: #7589b0">快捷查询 解答疑惑 高效解决</view>
+        </view>
+        <view class="u-m-r-64">
+          <u--image
+            src="/static/pageMine/help/customer-service.png"
+            width="176rpx"
+            height="176rpx"
+          ></u--image>
+        </view>
+      </view>
+
+      <base-card padding="32rpx" marginBottom="24rpx">
+        <view class="f-s-32 text-bold text-333 u-m-b-32" style="line-height: 44rpx">
+          快捷入口
+        </view>
+        <view class="fl-flex-item">
+          <view v-for="(item, index) in footerList" :key="index" class="direction">
+            <u--image
+              :src="`/static/pageMine/help/${item.imgs}.png`"
+              width="64rpx"
+              height="64rpx"
+            ></u--image>
+            <view class="f-s-24 text-333 u-m-t-8">{{ item.name }}</view>
+          </view>
+        </view>
+      </base-card>
+      <base-card padding="32rpx" marginBottom="24rpx">
+        <view class="f-s-28 text-333 text-bold u-m-b-32">大家都在问[热门问题]</view>
+        <u-cell-group v-for="(item, index) in LinkList" :key="index" :border="false">
+          <u-cell
+            :title="item.name"
+            @click="handleCell(item)"
+            isLink
+            :border="index !== 5"
+          >
+          </u-cell>
+        </u-cell-group>
+      </base-card>
+    </view>
+    <view class="service-bottom">
+      <view class="fl-flex-item service-bottom-item">
+        <view class="fl-flex">
+          <u--image
+            src="/static/pageMine/help/help-message.png"
+            width="40rpx"
+            height="40rpx"
+          ></u--image>
+          <view class="f-s-28 text-333 u-m-l-16">在线客服</view>
+        </view>
+        <view class="service-bottom-line"></view>
+        <view class="fl-flex">
+          <u--image
+            src="/static/pageMine/help/help-phone.png"
+            width="40rpx"
+            height="40rpx"
+          ></u--image>
+          <view class="f-s-28 text-333 u-m-l-16">联系客服</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -18,19 +84,38 @@ export default {
     return {
       footerList: [
         {
-          name: '反馈建议',
-          imgs: '/static/logo.png',
-          text: '客服热线:888-8888-8888',
+          name: '热门问题',
+          imgs: 'help-hot',
+        },
+        {
+          name: '常见问题',
+          imgs: 'help-familiar',
+        },
+        {
+          name: '平台介绍',
+          imgs: 'help-platform',
+        },
+        {
+          name: '服务指南',
+          imgs: 'help-guide',
+        },
+      ],
+      LinkList: [
+        {
+          name: '1、如何成为商家',
+          url: '',
         },
         {
-          name: '反馈内容',
-          imgs: '/static/logo.png',
-          text: '客服邮箱:kefu@xxx.com',
+          name: '2、如何申请退款',
+          url: '',
         },
         {
-          name: '联系方式',
-          imgs: '/static/logo.png',
-          text: '客服时间:周一至周五9:00-20:00',
+          name: '3、如何进行退换',
+          url: '',
+        },
+        {
+          name: '4、客服官方电话是多少',
+          url: '',
         },
       ],
       queryParams: {
@@ -74,4 +159,45 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.service-center {
+  position: relative;
+  .service-bg {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    top: 0;
+    z-index: -99;
+  }
+
+  .service-main {
+    padding: 0 32rpx;
+  }
+
+  ::v-deep .u-cell__body {
+    padding: 20rpx 0;
+    color: #0c1223;
+    font-size: 34rpx;
+  }
+
+  ::v-deep .u-cell__title-text {
+    line-height: 60rpx !important;
+  }
+
+  .service-bottom {
+    width: 100%;
+    bottom: 0;
+    position: fixed;
+
+    .service-bottom-item {
+      background: #fff;
+      padding: 28rpx 104rpx 68rpx 104rpx;
+    }
+    .service-bottom-line {
+      height: 48rpx;
+      width: 2rpx;
+      background-color: #d8d8d8;
+    }
+  }
+}
 </style>