feat:常见问题

src/App.vue

@@ -74,4 +74,9 @@ image {
 .transition {
   transition: all 0.3s;
 }
+
+.hover-scale {
+  transition: all 0.3s;
+  transform: scale(0.98);
+}
 </style>

src/pages-common/contact/contact.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class="page">
+    <view class="sheet">
+      <view class="sheet_bar" v-for="(item, index) in questions" :key="index">
+        <view class="head" @click="toggle(index)">
+          <view class="pt-32 pb-32 flex-align-center">
+            <view class="fs-28 fw-500 color-000">{{ item.question }}</view>
+            <view
+              class="width-40 ml-auto flex-end flex-shrink transition"
+              :style="{
+                transform: item.open ? 'rotate(180deg)' : 'rotate(0deg)',
+              }"
+            >
+              <uni-icons
+                type="bottom"
+                size="18"
+                color="rgba(0,0,0,0.4)"
+              ></uni-icons>
+            </view>
+          </view>
+        </view>
+        <view :class="['body', item.open ? 'body-open' : 'body-hidden']">
+          <view
+            v-for="(answerItem, answerIndex) in item.answer"
+            :key="answerIndex"
+            :class="[
+              'fs-28',
+              'lh-48',
+              'color-666',
+              answerIndex === 0 ? 'mt-0' : 'mt-10',
+            ]"
+            >{{ answerItem }}</view
+          >
+        </view>
+      </view>
+    </view>
+    <view
+      class="flex-center flex-column contact mt-20"
+      hover-class="hover-scale"
+      @click="call"
+    >
+      <image
+        class="width-96"
+        mode="widthFix"
+        src="/static/images/contact-servicer.png"
+      />
+      <view class="mt-16 color-666 fs-28">电话客服</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+
+const questions = ref([
+  {
+    question: "预计并充电或开始充电按钮“置灰”无法点击如何处理",
+    answer: [
+      "首先：查看启动页面左上角APP显示信息当显示“请先插抢”时，表示充电抢未完全插好，请双手平直握枪，不要按枪头拔枪按钮，用力插入车内。听到咔哒一声，再进行扫码启动",
+      "当显示“正在充电”时，表示充电枪已开启充电。此时请勿拔枪，同时可查看车内是否充电完成。",
+    ],
+    open: false,
+  },
+  {
+    question: "如何开启充电？",
+    answer: ['TODO'],
+    open: false,
+  },
+  {
+    question: "如何结束充电？",
+    answer: "",
+    open: false,
+  },
+]);
+const servicerPhone = ref("");
+
+const call = () => {
+  uni.makePhoneCall({
+    phoneNumber: servicerPhone.value,
+  });
+};
+
+const toggle = (index) => {
+  questions.value = questions.value.map((item, i) => {
+    return {
+      ...item,
+      open: item.open ? false : i === index,
+    };
+  });
+};
+
+onLoad((options) => {
+  if (options) {
+    servicerPhone.value = options.service;
+  }
+});
+</script>
+
+<style lang="scss">
+.page {
+  min-height: 100vh;
+  background: #f6f7fa;
+  box-sizing: border-box;
+  padding: 40rpx 32rpx;
+}
+.contact {
+  height: 216rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.sheet {
+  box-sizing: border-box;
+  border-radius: 24rpx;
+  background: #fff;
+  overflow: hidden;
+  &_bar {
+    .head {
+      padding: 0rpx 24rpx;
+      box-sizing: border-box;
+      & > view {
+        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+      }
+    }
+    .body {
+      box-sizing: border-box;
+      background-color: rgba(52, 125, 255, 0.06);
+      transition: all 0.3s;
+      padding: 0rpx 24rpx;
+    }
+    .body-hidden {
+      height: 0px;
+      overflow: hidden;
+    }
+    .body-open {
+      height: auto;
+      padding-top: 24rpx;
+      padding-bottom: 24rpx;
+    }
+    &:last-child {
+      .head {
+        & > view {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -105,6 +105,19 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages-common",
+      "pages": [
+        {
+          "path": "contact/contact",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "联系我们",
+            "navigationBarBackgroundColor": "#ffffff"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

src/pages/user/user.vue

@@ -22,20 +22,19 @@
             }"
           ></view>
           <view class="phone fs-40 fw-500">{{ user.mobilePhone }}</view>
-          <view class="money flex-align-center">
-            <view class="fs-40 fw-500" style="margin-top: 10rpx">¥</view>
-            <view class="fw-500 ml-12" style="font-size: 60rpx">{{
+          <view class="money flex-align-center" @click="toPage(-1)">
+            <uni-icons
+              type="wallet-filled"
+              size="24"
+              color="var(--color-primary)"
+            ></uni-icons>
+            <view class="color-primary ml-12" style="font-size: 16px"
+              >我的钱包</view
+            >
+            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
+            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
               user.balance
             }}</view>
-            <view class="ml-auto" style="width: 140rpx">
-              <style-button
-                @click="toPage(0)"
-                size="small"
-                type="primary"
-                height="70"
-                >充值</style-button
-              >
-            </view>
           </view>
         </view>
       </view>
@@ -60,35 +59,6 @@
       </view>
     </view>
   </block>
-
-  <view
-    class="dialog flex-align-end"
-    style="z-index: 999999"
-    v-if="contactDialogVisible"
-    @click="close"
-  >
-    <view class="contact-dialog" @click.stop="emptyTap">
-      <view class="flex-center fs-32 fw-600 pb-40">联系我们</view>
-      <!-- <view class="code" v-if="menu[4].code">
-        <image-proxy
-          style="width: 100%"
-          :src="menu[4].code"
-          mode="widthFix"
-          menu
-        ></image-proxy>
-      </view>
-      <view
-        v-if="menu[4].code"
-        class="fs-22 mt-16"
-        style="color: rgba(0, 0, 0, 0.4)"
-        >长按识别二维码</view
-      > -->
-      <view class="phone flex-align-center flex-between" @click.stop="call">
-        <view class="fs-26 fw-500">联系方式：{{ menu[4].mobile }}</view>
-        <view class="flex-center btn">拨打电话</view>
-      </view>
-    </view>
-  </view>
 </template>
 
 <script setup lang="ts">
@@ -100,11 +70,8 @@ const containerStyle = ref({});
 const user = ref<any>({
   avatar: "",
 });
+const service = ref("");
 const menu = ref([
-  {
-    title: "我的钱包",
-    path: "/pages-user/wallet/wallet",
-  },
   {
     title: "充电订单",
     path: "/pages-charge/orders/orders",
@@ -119,31 +86,32 @@ const menu = ref([
   },
   {
     title: "联系我们",
-    path: "",
-    code: "",
-    mobile: "",
+    path: "/pages-common/contact/contact",
+  },
+  {
+    title: "常见问题",
+    path: "/pages-common/contact/contact",
   },
 ]);
-const contactDialogVisible = ref(false);
 const toPage = (index: number) => {
-  const item = menu.value[index];
-  if (item.mobile) {
-    contactDialogVisible.value = true;
+  if (index < 0) {
+    uni.navigateTo({
+      url: "/pages-user/wallet/wallet",
+    });
+    return
+  }
+  if (index === 3) {
+    uni.makePhoneCall({
+      phoneNumber: service.value,
+    });
     return;
   }
+  const item = menu.value[index];
   uni.navigateTo({
-    url: item.path,
-  });
-};
-const close = () => {
-  contactDialogVisible.value = false;
-};
-const emptyTap = () => {};
-const call = () => {
-  uni.makePhoneCall({
-    phoneNumber: menu.value[4].mobile as string,
+    url: item.path + (index === 4 ? `?service=${service.value}` : ""),
   });
 };
+
 onLoad(() => {
   const bound = uni.getMenuButtonBoundingClientRect();
   containerStyle.value = {
@@ -151,15 +119,14 @@ onLoad(() => {
   };
   fetchContact().then((res) => {
     if (res && res.mobile) {
-      menu.value[4].mobile = res.mobile;
-    }
-    if (res && res.codeUrl) {
-      menu.value[4].code = res.codeUrl;
+      service.value = res.mobile;
     }
   });
 });
 onShow(() => {
   fetchProfile().then((res) => {
+    res.mobilePhone =
+      res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
     res.balance = (Number(res.balance) / 100).toFixed(2);
     res.avatar = res.avatar
       ? res.avatar
@@ -252,42 +219,4 @@ onShow(() => {
     }
   }
 }
-
-.contact-dialog {
-  width: 100%;
-  padding: 40rpx 30rpx 70rpx 30rpx;
-  padding-bottom: 70rpx;
-  background-color: #fff;
-  border-radius: 40rpx 40rpx 0rpx 0rpx;
-  text-align: center;
-
-  .icon {
-    width: 52rpx;
-  }
-
-  .code {
-    width: 320rpx;
-    min-height: 320rpx;
-    margin: 0 auto;
-    margin-bottom: 40rpx;
-  }
-
-  .phone {
-    height: 76rpx;
-    background: var(--color-sec);
-    border-radius: 76rpx;
-    padding: 0 30rpx;
-  }
-
-  .btn {
-    width: 144rpx;
-    height: 56rpx;
-    background: #ffffff;
-    border: 1rpx solid var(--color-primary);
-    border-radius: 56rpx;
-    font-size: 26rpx;
-    line-height: 56rpx;
-    color: var(--color-primary);
-  }
-}
 </style>