feat(publish/tags): 添加标签页面

src/components/section-heading.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     default: () => undefined,
     required: false,
   },
+  size: {
+    type: String as PropType<'base' | 'xl'>,
+    default: () => 'xl',
+  },
 })
 const handleMore = async () => {
   await uni.navigateTo({ url: props.path })
@@ -22,7 +26,10 @@ const handleMore = async () => {
 </script>
 <template>
   <view class="flex justify-between items-center" :class="[customClass]">
-    <div class="text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
+    <div
+      class="font-normal font-['PingFang SC']"
+      :class="[`text-${size}`, { base: 'text-black/90', xl: 'text-black' }[size]]"
+    >
       {{ title }}
     </div>
     <div

src/layouts/default.vue

@@ -9,6 +9,10 @@ const themeVars: ConfigProviderThemeVars = {
   buttonMediumHeight: '92rpx',
   // buttonLargeRadius: '8px',
   // buttonSmallRadius: '8px',
+  tagPrimaryBg: '#000',
+  tagPrimaryColor: '#fff',
+  tagInfoBg: '#efefef',
+  tagRoundRadius: '8rpx',
 }
 </script>
 <template>

src/pages.json

@@ -218,6 +218,14 @@
         "navigationBarTitleText": "个人动态",
         "navigationBarBackgroundColor": "#fff"
       }
+    },
+    {
+      "path": "pages/publish/tags/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "添加标签",
+        "navigationBarBackgroundColor": "#fff"
+      }
     }
   ],
   "subPackages": []

src/pages/publish/tags/index.vue

@@ -0,0 +1,40 @@
+<route lang="yaml">
+style:
+  navigationBarTitleText: 添加标签
+  navigationBarBackgroundColor: '#fff'
+</route>
+<script setup lang="ts">
+import SectionHeading from '@/components/section-heading.vue'
+import { ref } from 'vue'
+
+const tags = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
+const tags2 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
+const tags3 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
+</script>
+<template>
+  <div class="bg-white flex-grow p-3.5 flex flex-col">
+    <SectionHeading title="游学标签" custom-class="my-6" size="base"></SectionHeading>
+    <div class="flex flex-wrap">
+      <template v-for="(it, i) in tags" :key="i">
+        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
+      </template>
+    </div>
+    <SectionHeading title="活动标签" custom-class="my-6" size="base"></SectionHeading>
+    <div class="flex flex-wrap">
+      <template v-for="(it, i) in tags2" :key="i">
+        <wd-tag custom-class="m-1" type="primary">{{ it }}</wd-tag>
+      </template>
+    </div>
+    <SectionHeading title="自定义标签" custom-class="my-6" size="base"></SectionHeading>
+    <div class="flex flex-wrap">
+      <template v-for="(it, i) in tags3" :key="i">
+        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
+      </template>
+      <wd-tag custom-class="m-1">
+        <wd-icon name="add"></wd-icon>
+      </wd-tag>
+    </div>
+    <div class="flex-1"></div>
+    <div><wd-button block :round="false">确定</wd-button></div>
+  </div>
+</template>

src/style/index.scss

@@ -18,6 +18,22 @@ page {
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
   min-height: 100%;
+  --wot-tag-small-fs: 14px;
+  // :deep(.wd-tag) {
+  //   padding: 12rpx 36rpx !important;
+  // }
+  // :deep(.wd-tag) {
+  //   padding: 12rpx 36rpx !important;
+  // }
+}
+// :deep(.wd-tag) {
+//   padding: 12rpx 36rpx !important;
+// }
+.wd-tag {
+  padding: 12rpx 36rpx !important;
+  &.is-default {
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
 }
 /* ifdef(MP-WEIXIN) */
 // 微信小程序填充最小高度

src/types/uni-pages.d.ts

@@ -23,7 +23,8 @@ interface NavigateToOptions {
        "/pages/material/calculator/index" |
        "/pages/material/detail/index" |
        "/pages/material/recommend/index" |
-       "/pages/publish/moment/index";
+       "/pages/publish/moment/index" |
+       "/pages/publish/tags/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}