feat(word): add word lists (e-dialect#193)

* feat(wordList): init wordList system * feat(wordlist):add wordlist feat except upload * feat(wordlist):change some styles and annotate the upload botton * fix(wordlist): fix the error of "10 rpx" * feat(wordList):add feat:upload wordlist. * feat(wordlist):fix some style problems(rpx) and change the picture in tools. * fix(wordlist):delete some unecessary codes --------- Co-authored-by: sheeplin <[email protected]>
Topology2333 · Mar 22, 2024 · 9d3f9c1 · 9d3f9c1
1 parent f00c314
commit 9d3f9c1
Show file tree

Hide file tree

Showing 10 changed files with 1,013 additions and 1 deletion.
diff --git a/src/components/ChooseWordListAdd.vue b/src/components/ChooseWordListAdd.vue
@@ -0,0 +1,95 @@
+<template>
+  <view class="cu-list menu">
+    <view
+      v-for="(item, index1) in words"
+      :key="index1"
+      class="cu-item"
+      style="min-height: 200rpx;border-bottom: 1upx solid rgba(0, 0, 0, 0.07);"
+      :data-index="index1"
+    >
+      <view
+        class="cuIcon-roundadd roundPos"
+        @click="addWord(item.word.id)"
+      />
+      <view class="cu-list menu">
+        <view class="flex flex-direction justify-between">
+          <view class="margin-bottom-xs">
+            <text class="text-xxl text-bold">
+              {{ item.word.word }}
+            </text>
+          </view>
+          <view
+            class="margin-bottom-xs"
+            @tap.stop="playAudio(item.pronunciation.url,false)"
+          >
+            <text>{{ item.word.standard_pinyin }}</text>
+            <text class="text-grey padding-left">
+              /{{ item.word.standard_ipa }}/
+            </text>
+            <text
+              v-if="item.pronunciation.url.length > 4"
+              class="cuIcon-notificationfill text-blue margin-left"
+            />
+          </view>
+          <view class="text-grey definition">
+            {{ item.word.definition }}
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="words.length === 0"
+        class="text-center margin"
+      >
+        <text class="text-lg text-gray">
+          --- 暂无数据 ---
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+
+import { playAudio } from '@/utils/audio';
+
+export default {
+  name: 'ChooseWordListAdd',
+  props: {
+    words: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      chooseID: 0,
+    };
+  },
+  methods: {
+    playAudio,
+    addWord(id) {
+      this.chooseID = id;
+      this.$emit('addCheck', this.chooseID);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.definition {
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.roundPos {
+  display: flex;
+  position: fixed;
+  text-align: centere;
+  font-size: 40 rpx;
+  color: #838383;
+  margin-left: 85%;
+}
+</style>
diff --git a/src/components/ListPage.vue b/src/components/ListPage.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="padding-bottom-lg">
+    <view
+      v-if="wordList && wordList.length === 0"
+      class="text-lg margin"
+    >
+      <text>现在没有词单哦</text>
+    </view>
+    <view
+      v-for="(item, index) in wordList"
+      v-else
+      :key="index"
+      class="word-card padding-xs shadow -gray cu-card article no-card"
+      style="margin: 3vw;"
+      @tap="toWordPage(item.id)"
+    >
+      <view class="cu-item shadow margin-bottom-sm">
+        <view class="flex justify-between">
+          <view
+            class="title flex align-center"
+            style="width: 80%;"
+          >
+            <view class="text-cut">
+              {{ item.name }}
+            </view>
+            <view class="cu-tag bg-blue light sm round margin">
+              <text class="cuIcon-appreciate">
+                {{ item.author.nickname }}
+              </text>
+            </view>
+            <view class="cu-tag bg-orange light sm round margin">
+              <text class="cuIcon-warn">
+                {{ formatDate(item.updateTime) }}
+              </text>
+            </view>
+          </view>
+        </view>
+        <view class="content">
+          <view class="desc">
+            <view
+              class="text-df"
+              style="margin-bottom: 17upx;"
+            >
+              <image
+                class="cu-avatar round ssm"
+                :src="item.author.avatar"
+                mode="aspectFill"
+              />
+              <text
+                :decode="true"
+                class="margin-xs"
+              >
+                &nbsp;{{ item.author.nickname }}&nbsp;&nbsp;
+              </text>
+            </view>
+            <view class="text-content description">
+              {{ item.description }}
+            </view>
+          </view>
+        </view>
+        <view class="time">
+          <text class="text-grey fr margin-right-xl margin-top-xs">
+            {{ formatDate(item.updateTime) }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="wordList.length"
+      class="text-gray margin-top-lg text-center"
+    >
+      <text>—— 暂时没有更多内容了 ——</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { toWordPage } from '@/routers/word';
+
+export default defineComponent({
+  name: 'WordList',
+  props: {
+    wordList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      toWordPage,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.word-card {
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  margin-right: 1vw;
+}
+.description {
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  max-width: 50vw;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
@@ -99,6 +99,19 @@
       "path": "pages/quizzes/tests/answer",
       "style": {}
     },
+	// lists区
+	{
+	  "path": "pages/lists/index",
+	  "style": {}
+	},
+	{
+	  "path": "pages/lists/upload",
+	  "style": {}
+	},
+	{
+	  "path": "pages/lists/details",
+	  "style": {}
+	},
     // articles 区
     {
       "path": "pages/articles/index",
@@ -229,5 +242,15 @@
     "navigationStyle": "custom",
     "navigationBarTitleText": "兴化语记-莆仙方言在线工具"
   },
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
+	},
   "subPackages": []
 }