Merge pull request #94 from Tianci-King/suitApply

feat(suitApply):新增正装借用

src/app.config.ts

@@ -24,6 +24,11 @@ export default {
     "pages/electricity/subscribe/index",
     "pages/lostfound/index",
     "pages/information/index",
+    "pages/suit/index",
+    "pages/suit/faq/index",
+    "pages/suit/information/index",
+    "pages/suit/apply/index",
+    "pages/suit/myapplication/index"
   ],
   darkmode: true,
   themeLocation: "theme.json",

src/components/AppList/index.scss

@@ -5,7 +5,7 @@ $applit-padding-top: .8rem;
 .applist {
   display: grid;
   justify-content: center;
-  grid-template-columns: repeat(4, 25%);
+  grid-template-columns: repeat(3, 33.3333%);
   width: 90%;
   margin: 0 auto;
   padding-bottom: calc($nav-bar-height + $nav-bar-padding-top + $applit-padding-top);

src/constants/copywriting.ts

@@ -74,4 +74,10 @@ export const helpText = {
     "因各学院实际绩点计算标准不一，微精弘绩点算法将特殊科目（包括通识课和体育课）成绩也纳入计算，且缓考、补考、重修、免修的成绩不纳入计算，计算结果仅供参考，数据来源于正方教务系统。",
   lostfound:
     "首页“失物寻物”模块是由“For You”工程与精弘网络合作共同开发的一项学生服务功能，若丢失或拾得物品请联系界面底部上拉列表的组织管理员。您的参与是对我们工作的最大支持，让我们携手共同营造温暖、团结的校园氛围。",
+  suit: {
+    main: "“正装借用”是由学生事务大厅与精弘网络合作共同开发的一项学生服务功能，您的参与是对我们工作的最大支持，让我们携手共同营造温暖、团结的校园氛围。",
+    help: "感谢您使用由学生事务大厅与精弘网络合作共同开发的“正装借用”，使用时如有疑问请点击您所在的校区，查看详情中“学生事务大厅”的联系方式咨询工作人员。",
+    information: "感谢您使用由学生事务大厅与精弘网络合作共同开发的“正装借用”，请在使用前正确填写您的真实个人信息，以便后续工作的开展。",
+    warn: "请您再次确认是否提交申请！另外，申请完成后，如果您所申请的正装的尺码目前标注“余量不足”，请您尽早前往学生事务大厅领取。\n       “余量不足”的正装可能会被线下借用的同学优先借完，从而导致在“微精弘线上借用”已经申请过的同学无正装可借，微精弘对此概不负责！"
+  }
 };

src/constants/suitFaq.ts

@@ -0,0 +1,11 @@
+/**
+ * 正装借用 借用须知
+ * 默认须知
+ */
+
+export const faqText = [
+  "① -- 确定正装需求\n\n",
+  "② -- 联系管理员\n\n",
+  "③ -- 填写正装申请表\n\n",
+  "④ -- 线下确定尺寸\n\n"
+];

src/pages/bind/ZF/index.vue

@@ -8,7 +8,7 @@ import { ref, computed } from "vue";
 
 const zfpass = ref("");
 const user = computed(() => serviceStore.user);
-const helpContent = helpText.bind.zf;
+const helpContent = helpText.suit;
 const isShowHelp = ref(false);
 
 async function bindZFClick() {

src/pages/suit/ContactMe/index.module.scss

@@ -0,0 +1,34 @@
+@import "@/style/theme.scss";
+
+.container {
+  text-align: center;
+  padding: 8Px;
+  font-size: 1.0rem;
+  color: var(--wjh-color-text-secondary);
+  background-color: var(--wjh-color-primary-light);
+  display: flex;
+  justify-content: center;
+  gap: 8Px;
+  align-items: center;
+  z-index: 1000;
+  @include shadow;
+
+  .arrow {
+    rotate: 90deg;
+    width: 0;
+    height: 0;
+    border: 7Px solid transparent;
+    border-bottom: 12Px solid var(--wjh-color-primary-dark);
+  }
+
+  .helpicon {
+    font-size: 1.2rem;
+    color: var(--wjh-color-primary-dark);
+    line-height: 150%;
+  }
+}
+
+.ios {
+  padding-bottom: 2rem;
+}
+

src/pages/suit/ContactMe/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import styles from "./index.module.scss";
+import { isNewIPhone } from "@/utils";
+import Taro from "@tarojs/taro";
+
+const emit = defineEmits(["showHelp"]);
+const data: Array<{ content: string; extra?: string }> = [
+  {
+    content: "学生事务大厅-朝晖: 综合楼一楼河畔旁",
+    extra: "学生事务大厅-朝晖\r\n电话: 88320868",
+  },
+  {
+    content: "学生事务大厅-屏峰: 西4和东15楼下",
+    extra: "学生事务大厅-屏峰\r\n东15电话: 85290858\r\n西4电话:85290880",
+  },
+  {
+    content: "学生事务大厅-莫干山: 德8德9连廊",
+    extra: "学生事务大厅-莫干山\r\n电话: (0571) 8881 3551",
+  },
+];
+
+const handleClick = () => {
+  Taro.showActionSheet({
+    itemList: data.map((item) => item.content),
+    success: (res) => {
+      if (data[res.tapIndex].extra) {
+        Taro.showModal({
+          title: "详情",
+          content: data[res.tapIndex].extra,
+        });
+      }
+    },
+  });
+};
+
+function handleTapHelp() {
+  emit("showHelp", "lost-found");
+}
+</script>
+
+<template>
+  <view :class="[styles.container, isNewIPhone() ? styles.ios : undefined]">
+      <view @tap="handleClick" :class="styles.arrow" />
+      <text @tap="handleClick" >点击查看学生事务大厅的联系方式</text>
+      <view
+        :class="[styles.helpicon]" class="iconfont icon-help"
+        @tap="handleTapHelp"
+      />
+  </view>
+</template>

src/pages/suit/apply/dark.scss

@@ -0,0 +1,5 @@
+.dark {
+  .record-list-item {
+    color: var(--wjh-color-primary);
+  }
+}

src/pages/suit/apply/index.config.ts

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: "正装查看与申请",
+  backgroundColor: "#F9D8BE",
+  disableScroll: true,
+  navigationStyle: "custom"
+};

src/pages/suit/apply/index.module.scss

@@ -0,0 +1,183 @@
+@import "@/style/theme.scss";
+
+.campus-selector {
+  padding: 12Px;
+
+  .container {
+    display: flex;
+    height: 100%;
+    gap: 16Px;
+  }
+
+  .campus {
+    @include shadow;
+    flex: 0 calc(100% / 3);
+    padding: 6Px 16Px;
+    border-radius: 100Px;
+    background-color: var(--wjh-color-primary-light);
+    color: var(--wjh-color-primary-dark);
+    text-align: center;
+    transition: all .1s;
+  }
+
+  .campus:active {
+    transform: scale(1.05);
+  }
+
+  .active {
+    background-color: var(--wjh-color-primary);
+    color: var(--wjh-color-white);
+  }
+}
+
+.suit-selector {
+  display: flex;
+  flex: 0 0 auto;
+  margin-bottom: 6Px;
+  padding: 6Px;
+  overflow-x: scroll;
+  white-space: nowrap;
+
+  .suits {
+    @include shadow;
+    position: relative;
+    height: 178Px;
+    // height: 142Px;
+    margin: 0 6Px;
+    padding: 0Px 62Px;
+    border-radius: 12Px;
+    background-color: var(--wjh-color-week);
+    background-size:100% 100%;
+
+    .suit-name {
+      height: 36Px;
+      width: 124Px;
+      line-height: 65px;
+      position: absolute;
+      top: 142Px;
+      left: 0Px;
+      text-align: center;
+      border-radius: 0 0 9Px 9Px;
+      background-color: var(--wjh-color-background-container);
+    }
+  }
+
+  .active {
+    border: solid 4Px var(--wjh-color-primary);
+  }
+}
+
+.suit-panel {
+  background-color: var(--wjh-color-background-popup);
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  border-top-right-radius: 20Px;
+  border-top-left-radius: 20Px;
+
+  .container {
+    padding: 12Px 33Px;
+
+    .title {
+      margin: 24Px 0;
+      padding-left: .6rem;
+      border-left: 2Px solid;
+      font-size: 1.1rem;
+      line-height: 100%;
+      color: var(--wjh-color-primary);
+    }
+
+    .size-scroll {
+      display: flex;
+      overflow-x: auto;
+
+      .size-card {
+        @include shadow;
+        display: flex;
+        flex: 0 0 auto;
+        height: 40Px;
+        padding: 0 25Px;
+        margin-right: 16Px;
+        border: solid 2Px var(--wjh-color-week);
+        border-radius: 10Px;
+        color: var(--wjh-color-text-secondary);
+        text-align: center;
+        line-height: 40Px;
+      }
+
+      .active {
+        border: solid 2Px var(--wjh-color-primary);
+        color: var(--wjh-color-primary);
+      }
+    }
+
+    .remain-suit-num {
+      // display: inline-flex;
+      position: relative;
+    }
+
+    .warning {
+      position: absolute;
+      top: -12Px;
+      left: 100Px;
+      display: inline-flex;
+      // margin: -12Px 0 0 40Px;
+      padding: 9Px 13Px 9Px 13Px;
+      border-radius: 8Px;
+      color: var(--wjh-color-orange-600);
+      background-color: var(--wjh-color-orange-400);
+
+      .text {
+        margin-left: 12Px;
+      }
+    }
+
+    .rent-suit-number {
+      transition: all 0.1s; //need test
+
+      .number-symbal {
+        @include shadow;
+        display: inline-block;
+        height: 35Px;
+        width: 35Px;
+        border: solid 1Px var(--wjh-color-week);
+        border-radius: 5Px;
+        color: var(--wjh-color-week);
+        font-size: 1.6rem;
+        font-weight: var(--wjh-font-weight-medium);
+        text-align: center;
+        line-height: 35Px;
+      }
+
+      .number-symbal:hover {
+        color: var(--wjh-color-text-secondary);
+        background-color: var(--wjh-color-light);
+        border: solid 1Px var(--wjh-color-light);
+      }
+
+      .number-num {
+        display: inline-block;
+        margin: 0 30Px;
+      }
+    }
+  }
+
+  .confirm {
+    @include shadow;
+    height: 40Px;
+    margin: 12Px;
+    border-radius: 7Px;
+    text-align: center;
+    line-height: 40Px;
+    background-color: var(--wjh-color-primary);
+    color: var(--wjh-color-white);
+  }
+
+  .unactive {
+    background-color: var(--wjh-color-week);
+  }
+}
+
+.card-alarm {
+  margin: 0 30Px;
+}