活动预览

src/components/activitylink/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="note">
+    <div class="content">
+      <img src="" />
+      <div class="title">{{ form.activityName }}</div>
+      <div class="description">
+        <div><img src="../../assets/images/num.png" />活动人数：{{ form.activityUserCount }}人</div>
+        <div><img src="../../assets/images/time.png" />活动时间：{{ form.activityTime }}</div>
+        <div><img src="../../assets/images/laba.png" />报名截至：{{ form.registrationDeadline }}</div>
+        <div><img src="../../assets/images/moeny.png" />活动费用：{{ form.paymentMethod == 1 ? '发起人收款' : '免费' }}</div>
+        <div><img src="../../assets/images/address.png" />活动地址：{{ form.activityLocation }}</div>
+      </div>
+      <div>
+        <div style="font-size: 14px;font-weight: 600;line-height:30px">活动介绍</div>
+        <div>{{ form.activityDescription }}</div>
+      </div>
+      <div>
+        <div style="font-size: 14px;font-weight: 600;line-height:30px">活动流程</div>
+        <div v-for="(item, index) in listdatatime">
+          <div style="display: flex; align-items: center">
+            <div style="width: 10px; height: 10px; background-color: #000; border-radius: 50%"></div>
+            <div>{{ item.activityTime }}&nbsp;</div>
+            <div>{{ item.planContent }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { string } from 'vue-types';
+import { contentall, tagall } from '@/api/manage/notebook';
+import { hotelall } from '@/api/manage/route';
+const sys_user_tagOptions = ref([]); //标签库
+const sys_user_contentOptions = ref([]); //标签库
+const props = defineProps({
+  form: {
+    type: [String, Object, Array],
+    default: () => {}
+  },
+  listdatatime: {
+    type: [String, Object, Array],
+    default: () => {}
+  }
+});
+const form = ref(props.form);
+const listdatatime = ref(props.listdatatime);
+const getContent = async () => {
+  const res = await contentall({ status: 2 });
+  const arr = await hotelall({ status: 1 });
+  sys_user_contentOptions.value = res.concat(arr); //地点
+};
+const getTag = async () => {
+  const res = await tagall();
+  sys_user_tagOptions.value = res; //标签库
+};
+/**
+ * 标签格式化
+ */
+const formatTag = (tagId: string | null) => {
+  let tagString = '';
+  // for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
+  //   const element = sys_user_tagOptions.value[i];
+  //   if (tagId?.includes(element.id)) {
+  //     tagString += ',' + element.title;
+  //   }
+  // }
+  for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
+    const element = sys_user_tagOptions.value[i];
+    if (tagId != null) {
+      let filteredArray = tagId.split(',').filter((item) => item == element.id);
+      if (filteredArray.length > 0) {
+        tagString += '#' + element.title;
+      }
+    }
+  }
+  return tagString;
+};
+/**
+ * 标记地点格式化
+ */
+const formatlocation = (tagId: string | null) => {
+  let tagString = '';
+  let arrlist = tagId?.split(',').map(Number);
+  for (let i = 0; i < sys_user_contentOptions.value.length; i++) {
+    const element = sys_user_contentOptions.value[i];
+    for (let j = 0; j < arrlist.length; j++) {
+      const conten = arrlist[j];
+      if (conten == element.id) {
+        tagString += ',' + element.name;
+      }
+    }
+  }
+  return tagString.substring(1);
+};
+onMounted(() => {
+  getTag(); //标签库
+  getContent();
+});
+</script>
+
+<style scoped lang="scss">
+.note {
+  margin: 0 auto;
+  width: 350px;
+  height: 700px;
+  background: url('../../assets/images/bgm.png') no-repeat;
+  background-size: 100% 100%;
+  padding-top: 70px;
+  .content {
+    width: 88%;
+    height: 580px;
+    overflow-y: auto;
+    margin: 0 auto;
+    .title {
+      width: 95%;
+      font-weight: 600;
+      padding-top: 300px;
+      margin: 0 auto;
+      font-size: 16px;
+    }
+    .description {
+      margin-top: 15px;
+      border-radius: 20px;
+      padding: 10px;
+      line-height: 30px;
+      background-color: #f3efe8;
+      img {
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+.content::-webkit-scrollbar {
+  display: none;
+}
+.content::-webkit-scrollbar {
+  width: 0px;
+}
+</style>

src/components/note/index.vue

@@ -3,7 +3,6 @@
     <div class="content">
       <img src="" />
       <div class="title">{{ form.title }}</div>
-      <!--                <div>{{ formatlocation(form.location) }}</div>-->
       <div v-html="form.content"></div>
       <div class="tagid">{{ formatTag(form.tagId) }}</div>
       <div class="address" v-if="form.location">

src/views/manage/activity/index.vue

@@ -204,57 +204,8 @@
     </el-dialog>
     <!-- 查看活动流程 -->
     <el-dialog v-model="seedialog.visible" :title="seedialog.title" width="60%" append-to-body>
-      <el-form ref="activityFormRef" :model="form" :rules="rules" label-width="120px">
+      <activitylink :form="form" :listdatatime="listdatatime"></activitylink>
-        <el-form-item label="活动名称">
+
-          <div>{{ form.activityName }}</div>
-        </el-form-item>
-        <el-form-item label="活动描述">
-          <div>{{ form.activityDescription }}</div>
-        </el-form-item>
-        <el-form-item label="活动人数">
-          <div>{{ form.activityUserCount }}人</div>
-        </el-form-item>
-        <div style="display: flex">
-          <el-form-item label="活动时间">
-            <div>{{ form.activityTime }}</div>
-          </el-form-item>
-          <el-form-item label="报名截至时间">
-            <div>{{ form.registrationDeadline }}</div>
-          </el-form-item>
-        </div>
-        <div style="display: flex">
-          <el-form-item label="发布者地址">
-            <div>{{ form.publisherAddress }}</div>
-          </el-form-item>
-          <el-form-item label="活动地点">
-            <div>{{ form.activityLocation }}</div>
-          </el-form-item>
-        </div>
-        <el-form-item label="收费方式">
-          <el-radio-group v-model="form.paymentMethod" disabled>
-            <el-radio :value="1">发起人收款</el-radio>
-            <el-radio :value="0">免费</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="挑选玩友">
-          <el-radio-group v-model="form.isSelected" disabled>
-            <el-radio :value="1">挑选</el-radio>
-            <el-radio :value="0">不挑选</el-radio>
-          </el-radio-group>
-          <span style="margin-left: 30px; font-size: 12px; color: #707070">勾选后，发起人需要逐个审核报名者，确认是否通过报名</span>
-        </el-form-item>
-        <el-form-item label="活动流程"> </el-form-item>
-        <div v-for="(item, index) in listdatatime">
-          <div style="display: flex; align-items: center">
-            <el-form-item label="时间">
-              <div>{{ item.activityTime }}</div>
-            </el-form-item>
-            <el-form-item label="计划的活动内容">
-              <div>{{ item.planContent }}</div>
-            </el-form-item>
-          </div>
-        </div>
-      </el-form>
     </el-dialog>
     <!--    问答弹窗-->
     <el-dialog v-model="wendadialog.visible" title="问答" width="40%" append-to-body>