提交代码

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/my/index copy.vue

@@ -1,36 +1,68 @@
 <template>
   <Page title="我的" styleReset="backNone">
     <template v-slot:body>
-      <div class="w-full h-full flex flex-col items-center">
-        <div class="headPortrait">
-          <img src="/src/assets/image/camera.png" class="w-full h-full">
-        </div>
-        <div class="flex-1">
-          <div class="xinming">
-            <TranslationComponent :openId="userInfo.userInfo.name" />
+      <div class="w-full h-full flex flex-col">
+        <div class="px-4 py-6 flex justify-between items-center">
+          <div class="flex items-center">
+            <div class="bg-[#065985] text-[#fff] flex items-center justify-center profilePicture">
+              <TranslationComponent :openId="userInfo.userInfo.name" />
+            </div>
+            <div class="ml-8 profilePicture-text">
+              <TranslationComponent :openId="userInfo.userInfo.name" />
+            </div>
           </div>
-          <div class="flex flex-col justify-center text-[#5D5D5D] leading-6">
-            <div class="text-center">公司: {{ userInfo.userInfo?.company?.companyName }}</div>
-            <div class="text-center">角色: {{ userInfo.userInfo?.roleName }}</div>
-
-            <div class="text-center text-[#0859d6] mt-2" @click="applicationMarket()">应用市场</div>
+        </div>
 
-            <div class="text-center text-[#0859d6] mt-8"
-              v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
-              {{ `绑定${isCorpWX ? '企业' : ''}微信` }}
-              (
+        <!-- 列表 -->
+        <div class="bg-white flex justify-between px-6 py-2 mb-1">
+          <div>当前版本</div>
+          <div class="text-[#999]">{{ ['', '专业版本', '旗舰版本'][userInfo.userInfo?.company?.versionControl] }}</div>
+        </div>
+        <div class="bg-white flex justify-between px-6 py-2 mb-1">
+          <div>公司名称</div>
+          <div class="text-[#999]">{{ userInfo.userInfo?.company?.companyName }}</div>
+        </div>
+        <div class="bg-white flex justify-between px-6 py-2 mb-1">
+          <div>账号角色</div>
+          <div class="text-[#999]">{{ userInfo.userInfo?.roleName }}</div>
+        </div>
+        <div class="bg-white flex justify-between px-6 py-2 mb-1" v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
+          <div>{{ `绑定${isCorpWX ? '企业' : ''}微信` }}</div>
+          <div class="text-[#999]">
+            (
               <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid == null) || (isWX && userInfo.userInfo.wxOpenid == null)">未绑定</span>
               <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid != null) || (isWX && userInfo.userInfo.wxOpenid != null)">已绑定</span>
               )
-            </div>
+          </div>
+        </div>
+        <div class="bg-white flex justify-between px-6 py-2 mb-1">
+          <div>有效日期</div>
+          <div class="text-[#999]">{{ userInfo.userInfo?.company?.expirationDate }}</div>
+        </div>
+        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="instructions()">
+          <div>使用说明</div>
+          <div class="list-imgs">
+            <img src="/src/assets/image/rightArrow.png">
+          </div>
+        </div>
+        <!-- <div class="bg-white flex justify-between px-6 py-2 mb-1">
+          <div>在线客服</div>
+          <div class="list-imgs">
+            <img src="/src/assets/image/rightArrow.png">
+          </div>
+        </div> -->
+        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="applicationMarket()">
+          <div>应用市场</div>
+          <div class="list-imgs">
+            <img src="/src/assets/image/rightArrow.png">
           </div>
         </div>
 
-        <div class="w-full mb-40 px-24" v-if="!isCorpWX">
+        <!-- 退出登录 -->
+        <div class="w-full mb-40 px-24 mt-20" v-if="!isCorpWX">
           <van-button type="primary" @click="signOut" class="w-full">退出登录</van-button>
         </div>
       </div>
-      <!-- <van-button type="primary" @click="signOut">退出</van-button> -->
     </template>
 
     <template v-slot:footer>
@@ -51,6 +83,12 @@ const userInfo = useInfoStore()
 const isCorpWX = ref(false)
 const isWX = ref(false)
 
+function instructions() {
+  router.navigateTo({
+    pathName: 'pdfPreview',
+  })
+}
+
 function bindWeiXin() {
   //企业微信
   if (isCorpWX.value && userInfo.userInfo.corpwxUserid != null) {
@@ -141,4 +179,22 @@ useLifecycle({
   margin-bottom: 6px;
   text-align: center;
 }
+
+.profilePicture {
+  width: 60px; 
+  height: 60px;
+  border-radius: 50%;
+  font-size: 16px;
+}
+.profilePicture-text {
+  font-size: 16px;
+  color: #065985;
+  font-weight: bold;
+}
+.profilePicture-img {
+  width: 24px;
+}
+.list-imgs {
+  width: 14px;
+}
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/my/index.vue

@@ -1,77 +1,78 @@
 <template>
-  <Page title="我的" styleReset="backNone">
-    <template v-slot:body>
-      <div class="w-full h-full flex flex-col">
-        <div class="px-4 py-6 flex justify-between items-center">
-          <div class="flex items-center">
-            <div class="bg-[#065985] text-[#fff] flex items-center justify-center profilePicture">
-              <TranslationComponent :openId="userInfo.userInfo.name" />
-            </div>
-            <div class="ml-8 profilePicture-text">
-              <TranslationComponent :openId="userInfo.userInfo.name" />
-            </div>
+  <div class="personalCenter">
+    <div class="personalCenter-top flex flex-col">
+      <div class="px-4 flex justify-between items-center avatarSection">
+        <div class="flex items-center">
+          <div
+            class="bg-[#fff] text-[#333] flex items-center justify-center profilePicture"
+          >
+            <TranslationComponent :openId="userInfo.userInfo.name" />
           </div>
-          <div class="profilePicture-img">
-            <!-- <img src="/src/assets/image/rightArrow.png"> -->
+          <div class="ml-8 profilePicture-text">
+            <TranslationComponent :openId="userInfo.userInfo.name" /> <br />
+            <div class="jobIdEtc">工号：{{ userInfo.userInfo.jobNumber }}</div>
           </div>
         </div>
-
-        <!-- 列表 -->
-        <div class="bg-white flex justify-between px-6 py-2 mb-1">
-          <div>当前版本</div>
-          <div class="text-[#999]">{{ ['', '专业版本', '旗舰版本'][userInfo.userInfo?.company?.versionControl] }}</div>
+      </div>
+    </div>
+    <div class="flex-1 overflow-y-auto personalCenter-content">
+      <div class="flex flex-row items-center justify-between">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/dqbb.png" alt="" />
+          <div class="list-tile-text">当前版本</div>
         </div>
-        <div class="bg-white flex justify-between px-6 py-2 mb-1">
-          <div>公司名称</div>
-          <div class="text-[#999]">{{ userInfo.userInfo?.company?.companyName }}</div>
+        <div class="list-text">{{ ['', '专业版本', '旗舰版本'][userInfo.userInfo?.company?.versionControl] }}</div>
+      </div>
+      <div class="flex flex-row items-center justify-between" v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/dqbb.png" alt="" />
+          <div class="list-tile-text">{{ `绑定${isCorpWX ? '企业' : ''}微信` }}</div>
         </div>
-        <div class="bg-white flex justify-between px-6 py-2 mb-1">
-          <div>账号角色</div>
-          <div class="text-[#999]">{{ userInfo.userInfo?.roleName }}</div>
+        <div class="list-text">
+          (
+            <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid == null) || (isWX && userInfo.userInfo.wxOpenid == null)">未绑定</span>
+            <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid != null) || (isWX && userInfo.userInfo.wxOpenid != null)">已绑定</span>
+          )
         </div>
-        <div class="bg-white flex justify-between px-6 py-2 mb-1" v-if="userInfo.userInfo.userNameNeedTranslate != '1' && (isCorpWX || isWX)" @click="bindWeiXin">
-          <div>{{ `绑定${isCorpWX ? '企业' : ''}微信` }}</div>
-          <div class="text-[#999]">
-            (
-              <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid == null) || (isWX && userInfo.userInfo.wxOpenid == null)">未绑定</span>
-              <span v-if="(isCorpWX && userInfo.userInfo.corpwxUserid != null) || (isWX && userInfo.userInfo.wxOpenid != null)">已绑定</span>
-              )
-          </div>
+      </div>
+      <div class="flex flex-row items-center justify-between mt-3">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/gsmc.png" alt="" />
+          <div class="list-tile-text">公司名称</div>
         </div>
-        <div class="bg-white flex justify-between px-6 py-2 mb-1">
-          <div>有效日期</div>
-          <div class="text-[#999]">{{ userInfo.userInfo?.company?.expirationDate }}</div>
+        <div class="list-text">{{ userInfo.userInfo?.company?.companyName }}</div>
+      </div>
+      <div class="flex flex-row items-center justify-between mt-3">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/dqzh.png" alt="" />
+          <div class="list-tile-text">账号角色</div>
         </div>
-        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="instructions()">
-          <div>使用说明</div>
-          <div class="list-imgs">
-            <img src="/src/assets/image/rightArrow.png">
-          </div>
+        <div class="list-text">{{ userInfo.userInfo?.roleName }}</div>
+      </div>
+      <div class="flex flex-row items-center justify-between mt-3">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/yxrq.png" alt="" />
+          <div class="list-tile-text">有效日期</div>
         </div>
-        <!-- <div class="bg-white flex justify-between px-6 py-2 mb-1">
-          <div>在线客服</div>
-          <div class="list-imgs">
-            <img src="/src/assets/image/rightArrow.png">
-          </div>
-        </div> -->
-        <div class="bg-white flex justify-between px-6 py-2 mb-1" @click="applicationMarket()">
-          <div>应用市场</div>
-          <div class="list-imgs">
-            <img src="/src/assets/image/rightArrow.png">
-          </div>
+        <div class="list-text">{{ userInfo.userInfo?.company?.expirationDate }}</div>
+      </div>
+      <div class="flex flex-row items-center justify-between mt-3" @click="instructions()">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/sysm.png" alt="" />
+          <div class="list-tile-text">使用说明</div>
         </div>
-
-        <!-- 退出登录 -->
-        <div class="w-full mb-40 px-24 mt-20" v-if="!isCorpWX">
-          <van-button type="primary" @click="signOut" class="w-full">退出登录</van-button>
+        <img src="../../../assets/image/rightArrow.png" class="list-text-img"></img>
+      </div>
+      <div class="flex flex-row items-center justify-between mt-3" @click="applicationMarket()">
+        <div class="list-tile flex">
+          <img src="../../../assets/image/yysc.png" alt="" />
+          <div class="list-tile-text">应用市场</div>
         </div>
+        <img src="../../../assets/image/rightArrow.png" class="list-text-img"></img>
       </div>
-    </template>
-
-    <template v-slot:footer>
-      <Footer />
-    </template>
-  </Page>
+    </div>
+    <div><Footer /></div>
+  </div>
 </template>
 
 <script setup>
@@ -81,15 +82,15 @@ import useRouterStore from "@store/useRouterStore.js";
 import useInfoStore from "@store/useInfoStore.js";
 import Footer from "@components/page/footer.vue";
 
-const router = useRouterStore()
-const userInfo = useInfoStore()
-const isCorpWX = ref(false)
-const isWX = ref(false)
+const router = useRouterStore();
+const userInfo = useInfoStore();
+const isCorpWX = ref(false);
+const isWX = ref(false);
 
 function instructions() {
   router.navigateTo({
-    pathName: 'pdfPreview',
-  })
+    pathName: "pdfPreview",
+  });
 }
 
 function bindWeiXin() {
@@ -102,97 +103,66 @@ function bindWeiXin() {
     return;
   }
 
-  var appId = "wx1c1d8fc81bc073a8";//智能客户管家公众号
-  var url = "https://mobcrm.ttkuaiban.com/api/wechat/bindWeiXin2?userId=" + userInfo.userInfo.id;//工时管家公众号授权回调页面
+  var appId = "wx1c1d8fc81bc073a8"; //智能客户管家公众号
+  var url =
+    "https://mobcrm.ttkuaiban.com/api/wechat/bindWeiXin2?userId=" +
+    userInfo.userInfo.id; //工时管家公众号授权回调页面
   if (isCorpWX.value) {
     appId = "ww4e237fd6abb635af"; //企业微信第三方的SUIT ID
-    url = "https://crm.ttkuaiban.com/api/wxcorp/bindCorpWeiXin?userId=" + userInfo.userInfo.id;//授权回调页面
+    url =
+      "https://crm.ttkuaiban.com/api/wxcorp/bindCorpWeiXin?userId=" +
+      userInfo.userInfo.id; //授权回调页面
   }
 
-  var weixinUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + encodeURI(url) + "&response_type=code&scope=snsapi_base&state=0#wechat_redirect";
+  var weixinUrl =
+    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
+    appId +
+    "&redirect_uri=" +
+    encodeURI(url) +
+    "&response_type=code&scope=snsapi_base&state=0#wechat_redirect";
   window.location.href = weixinUrl;
 }
 
 function signOut() {
   router.redirectTo({
-    pathName: 'login',
+    pathName: "login",
     success: () => {
-      localStorage.clear()
-      sessionStorage.clear()
+      localStorage.clear();
+      sessionStorage.clear();
       window.location.reload();
-    }
-  })
+    },
+  });
 }
 
 function judgingTheEnvironment() {
   const currentEnvironment = navigator.userAgent.toLowerCase();
-  isCorpWX.value = currentEnvironment.indexOf("wxwork") > 0 ? true : false
-  isWX.value = currentEnvironment.indexOf("micromessenger") > 0 ? true : false
+  isCorpWX.value = currentEnvironment.indexOf("wxwork") > 0 ? true : false;
+  isWX.value = currentEnvironment.indexOf("micromessenger") > 0 ? true : false;
 }
 
 const applicationMarket = () => {
-  window.location.href = 'https://www.ttkuaiban.com/appMarket.html'
-  // window.open('https://www.ttkuaiban.com/appMarket.html', '_blank'); 
-}
+  window.location.href = "https://www.ttkuaiban.com/appMarket.html";
+  // window.open('https://www.ttkuaiban.com/appMarket.html', '_blank');
+};
 
 useLifecycle({
   load: () => {
-    judgingTheEnvironment()
-  }
+    judgingTheEnvironment();
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.backNone {
-  background: linear-gradient(to bottom, #E0EFFF, #F8F8F8 30%) !important;
-
-  :deep(.van-nav-bar) {
-    background: none;
-  }
-}
-
-.headPortrait {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  position: relative;
-  margin-top: 20px;
-  margin-bottom: 10px;
-
-  &::after {
-    content: "";
-    width: 24px;
-    height: 24px;
-    background-image: url('@/assets/image/camera.png');
-    background-size: cover;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-}
-
-.xinming {
-  color: #000000;
-  font-family: PingFang SC;
-  font-weight: semibold;
-  font-size: 18px;
-  line-height: normal;
-  letter-spacing: 0px;
-  text-align: left;
-  margin-bottom: 6px;
-  text-align: center;
-}
-
 .profilePicture {
-  width: 60px; 
-  height: 60px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   font-size: 16px;
+  font-weight: bold;
 }
 .profilePicture-text {
-  font-size: 16px;
-  color: #065985;
-  font-weight: bold;
+  font-size: 18px;
+  color: #fff;
 }
 .profilePicture-img {
   width: 24px;
@@ -200,4 +170,61 @@ useLifecycle({
 .list-imgs {
   width: 14px;
 }
+.personalCenter {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+.personalCenter-top {
+  width: 100%;
+  height: 180px;
+  background-image: url("../../../assets/image/grzxbjs.png");
+  background-size: cover;
+}
+.avatarSection {
+  padding: 52px 30px 0 30px;
+}
+.jobIdEtc {
+  font-size: 13px;
+  color: #92bdee;
+  margin-top: 4px;
+}
+.personalCenter-content {
+  width: 100%;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  background-color: #fff;
+  position: relative;
+  padding: 20px 26px 0 26px;
+  top: -18px;
+}
+.list-text {
+  color: #A6A6A6;
+  font-weight: medium;
+  font-size: 12px;
+  line-height: normal;
+  position: relative;
+  top: -3px;
+}
+.list-tile {
+  color: #000000;
+  font-weight: medium;
+  font-size: 12px;
+  line-height: normal;
+}
+.list-tile img {
+  width: 28px;
+}
+.list-tile-text{
+  position: relative;
+  top: 2px;
+  margin-left: 10px;
+}
+.list-text-img {
+  width: 16px;
+  position: relative;
+  top: -3px;
+}
 </style>