feat: 新增创建账户页面，公共页面title ， wrapper组件增加默认内边距

components/cwg-page-wrapper.vue

@@ -14,7 +14,7 @@
       <cwg-match-media :max-width="991">
         <cwg-header v-if="!isHeaderFixed" />
       </cwg-match-media>
-      <view class="content-wrapper">
+      <view class="content-wrapper" :class="{ 'content-wrapper-padding': isContentPadding}">
         <slot />
       </view>
       <view :style="{ height: isTabBarPage ? '60px' : '0px' }" />
@@ -48,6 +48,11 @@ const props = defineProps({
   isLoginPage: {
     type: Boolean,
     default: false
+  },
+  // 是否含有padding 默认有
+  isContentPadding: {
+    type: Boolean,
+    default: true
   }
 })
 const isDark = computed(() => globalStore.theme === 'dark')
@@ -97,4 +102,7 @@ onShow(() => {
   box-sizing: border-box;
   overflow-y: auto;
 }
+.content-wrapper-padding{
+  padding: px2rpx(30);
+}
 </style>

pages.json

@@ -250,6 +250,14 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
+		},
+      // 创建账号
+		{
+			"path": "pages/create-account/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"tabBar": {

pages/create-account/index.vue

@@ -0,0 +1,394 @@
+<template>
+  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
+    <uni-card class="create-content" :margin="0" :spacing="0">
+      <view class="content-title">
+        Create A New Account
+      </view>
+      <uni-row class="demo-uni-row">
+        <cwg-match-media :min-width="991">
+        </cwg-match-media>
+        <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
+          <navigator url="/pages/login/regist" class="account-tip">
+            {{ t("signin.words") }}
+            <text>{{ t("signin.signup") }}</text>
+          </navigator>
+          <cwg-match-media :min-width="791">
+
+          </cwg-match-media>
+        </uni-col>
+      </uni-row>
+    </uni-card>
+
+  </cwg-page-wrapper>
+</template>
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import QrCode from "@/components/QrCode.vue";
+import { post } from "@/utils/request";
+import { userToken } from "@/composables/config";
+import { userApi } from "@/api/user";
+import { ucardApi } from "@/api/ucard";
+import useUserStore from "@/stores/use-user-store";
+import useRouter from "@/hooks/useRouter";
+import { useI18n } from "vue-i18n";
+import logoImage from "/static/images/logo3.png";
+const router = useRouter();
+const { t } = useI18n();
+const userStore = useUserStore();
+// 响应式表单数据
+const form = ref({
+  loginName: "",
+  password: "",
+});
+
+function submit() {
+  if (!form.value.loginName) {
+    uni.$u.toast(t("signin.form.email"));
+    return;
+  }
+  if (!form.value.password) {
+    uni.$u.toast(t("signin.form.password"));
+    return;
+  }
+
+  handleLogin();
+}
+
+const fetchUserList = (params) => post("/Login/AcctLogin", params);
+async function handleLogin() {
+  try {
+    const res = await userApi.login({
+      loginName: form.value.loginName,
+      password: form.value.password,
+    });
+    if (res.code === 200) {
+      userToken.value = res.data;
+      uni.$u.toast(t("login.msg0_1"));
+      getUserInfo();
+      reasonsRefusalList();
+      if (remenber.value.length) {
+        userStore.saveAccountInfo({
+          loginName: form.value.loginName,
+          password: form.value.password,
+          rememberPassword: true,
+        });
+      } else {
+        userStore.saveAccountInfo({
+          loginName: "",
+          password: "",
+          rememberPassword: false,
+        });
+      }
+      //  console.log(1111);
+    } else {
+      //  console.log(12112);
+    }
+  } catch (error) {
+    //  console.log(error, 19089);
+  }
+}
+async function getUserInfo() {
+  try {
+    const res = await ucardApi.getSingle();
+    userStore.saveUserInfo(res.data);
+    if (res.code === 200) {
+      if (!res.data || res.data.approveStatus != 2) {
+        router.push("/pages/mine/improve");
+      } else {
+        router.push("/pages/card/index");
+      }
+    } else {
+      uni.$u.toast(res.msg || t("login.msg0"));
+    }
+  } catch (error) {
+    //  console.log(error, 111);
+  }
+}
+async function reasonsRefusalList() {
+  try {
+    const res = await ucardApi.reasonsRefusalList();
+    if (res.code === 200) {
+      pickFields(res.data);
+    } else {
+      uni.$u.toast(res.msg || t("login.msg0"));
+    }
+  } catch (error) {
+    //  console.log(error, 111);
+  }
+}
+function pickFields(source, fields = ['content', 'enContent']) {
+  const result = {}
+
+  Object.entries(source).forEach(([key, value]) => {
+    result[key] = fields.reduce((acc, f) => {
+      acc[f] = value[f] ?? null
+      return acc
+    }, {})
+  })
+  userStore.saveReasonsOptions(result);
+}
+
+onMounted(() => {
+  const accountInfo = userStore.accountInfo;
+  if (accountInfo?.rememberPassword) {
+    form.value.loginName = accountInfo?.loginName || "";
+    form.value.password = accountInfo?.password || "";
+    remenber.value = ["记住我"];
+  } else {
+    form.value.loginName = "";
+    form.value.password = "";
+    remenber.value = [];
+  }
+});
+const inputType = ref("password");
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.create-page {
+  height: 100vh;
+  border: none;
+  padding: 0;
+}
+.create-content{
+  margin: 0;
+}
+
+.demo-uni-row {
+  margin: 0 !important;
+
+  .left-bg {
+    height: calc(100vh - 60px);
+    background-image: url(/static/images/login-bg.gif);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+
+    .left-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .h1 {
+        // text-align: center;
+        line-height: 20px;
+        color: #fff;
+        font-size: 30px;
+        margin-top: 30px;
+        font-size: 700;
+        line-height: 1.5;
+      }
+
+      .h6 {
+        text-align: start;
+        line-height: 20px;
+        color: #fff;
+        font-size: 14px;
+        margin-top: 10px;
+      }
+
+      .company {
+        padding: px2rpx(40) 0 px2rpx(50) 0;
+        position: relative;
+        align-items: flex-start !important;
+      }
+    }
+
+    .left-content {
+      .h1 {
+        // text-align: center;
+        line-height: 20px;
+        color: #fff;
+        font-size: 30px;
+        margin-top: 30px;
+        font-size: 700;
+        line-height: 1.5;
+      }
+
+      .h6 {
+        line-height: 20px;
+        color: #fff;
+        font-size: 14px;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .right-f {
+    background-color: #fff;
+    padding: 0 px2rpx(24);
+    box-sizing: border-box;
+
+    .account {
+      background-color: #ffffff;
+      position: relative;
+      height: calc(100vh - 60px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 10%;
+
+      .company {
+        padding: px2rpx(50) 0 px2rpx(20) 0;
+        position: relative;
+        align-items: center !important;
+      }
+
+      .company-icon {
+        width: px2rpx(234);
+      }
+    }
+  }
+}
+
+.bottom-box {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+
+  .bottom-title {
+
+    text-align: center;
+    font-size: px2rpx(14);
+    font-weight: 500;
+    line-height: 1.5;
+    color: #666666;
+
+  }
+
+  .ellipsis {
+    width: px2rpx(200);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cwg-button {
+    width: 120px !important;
+    padding: px2rpx(4) 0 !important;
+  }
+}
+
+
+
+
+button {
+  background-color: #ea002a;
+  font-size: px2rpx(14);
+  font-weight: normal;
+  height: px2rpx(44);
+  line-height: px2rpx(44);
+}
+
+.company {
+  padding: px2rpx(50) 0 px2rpx(200) 0;
+  position: relative;
+  align-items: flex-start !important;
+}
+
+.logo {
+  margin-left: px2rpx(48);
+}
+
+.title {
+  margin: px2rpx(32) 0;
+  font-size: px2rpx(24);
+  font-weight: bolder;
+  color: #e4e4e4;
+  text-align: center;
+
+  i {
+    margin-right: px2rpx(10);
+  }
+
+  .tit1 {
+    font-size: px2rpx(34);
+    line-height: 1.5;
+    font-weight: bold;
+    color: #000000;
+  }
+
+  .tit2 {
+    font-size: px2rpx(16);
+    line-height: 1.5;
+    color: #cecece;
+    font-weight: 500;
+  }
+}
+
+.qr-title {
+  font-size: px2rpx(16);
+  line-height: 1.5;
+  color: #cecece;
+  font-weight: 500;
+  text-align: center;
+  margin: px2rpx(40) 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .line {
+    flex: 1;
+    height: 1px;
+    background-color: #e4e4e4;
+  }
+
+  .qr-tit2 {
+    margin: 0 px2rpx(12);
+
+  }
+
+}
+
+.input {
+  height: px2rpx(44);
+  border-radius: px2rpx(8);
+  background: #f7f8fa;
+  padding: 0 px2rpx(20) !important;
+  position: relative;
+}
+
+.account-icon {
+  width: px2rpx(12);
+  height: px2rpx(14) !important;
+  margin-right: px2rpx(5);
+}
+
+:deep(.u-input__content__prefix-icon) {
+  height: px2rpx(20);
+}
+
+.regiset-btn {
+  margin: px2rpx(20) 0;
+}
+
+.account-tip {
+  color: #666666;
+  font-size: px2rpx(14);
+  text-align: center;
+
+  text {
+    color: #ea002a;
+  }
+}
+
+:deep(.u-form-item__body) {
+  padding: 0 !important;
+  padding-bottom: px2rpx(24) !important;
+}
+
+:deep(.wcg-checkbox) {
+  padding: 0 !important;
+}
+
+.cwg-button {
+  padding: px2rpx(34) 0 !important;
+}
+</style>

static/scss/global/global.scss

@@ -657,4 +657,16 @@ body {
     .padding-top-bottom {
         padding: 0 !important;
     }
+}
+// 公共title样式
+.content-title{
+  width: 100%;
+  height: px2rpx(40);
+  line-height: px2rpx(40);
+  box-sizing: border-box;
+  color: #fff;
+  background-color: #102047;
+  padding-left: px2rpx(15);
+  font-size: px2rpx(20);
+  font-weight: bold;
 }