From 6af974170839fb3ca556075ef116e5f33a2e9d97 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Wed, 15 Mar 2023 09:39:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=AE=E6=B3=95=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../qujing/AppResidentActivitie/Add.vue       | 367 +++++++++++++
 .../qujing/AppResidentActivitie/AddPosts.vue  | 146 ++++++
 .../AppResidentActivities.vue                 | 256 +++++++++
 .../qujing/AppResidentActivitie/Detail.vue    | 488 ++++++++++++++++++
 .../qujing/AppResidentActivitie/user-img.png  | Bin 0 -> 1467 bytes
 5 files changed, 1257 insertions(+)
 create mode 100644 src/project/qujing/AppResidentActivitie/Add.vue
 create mode 100644 src/project/qujing/AppResidentActivitie/AddPosts.vue
 create mode 100644 src/project/qujing/AppResidentActivitie/AppResidentActivities.vue
 create mode 100644 src/project/qujing/AppResidentActivitie/Detail.vue
 create mode 100644 src/project/qujing/AppResidentActivitie/user-img.png

diff --git a/src/project/qujing/AppResidentActivitie/Add.vue b/src/project/qujing/AppResidentActivitie/Add.vue
new file mode 100644
index 00000000..786d905b
--- /dev/null
+++ b/src/project/qujing/AppResidentActivitie/Add.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="add" v-if="isShow">
+    <div class="header-description">
+      <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
+        <u-form-item label="标题" prop="title" required :border-bottom="false" class="titles" label-position="top">
+          <u-input v-model="forms.title" :focus="true" placeholder="请输入标题(30字以内)" type="textarea" auto-height height="60" maxlength="30" />
+        </u-form-item>
+
+        <u-form-item label="活动详情" prop="content" required :border-bottom="false" label-position="top" class="contents">
+          <!-- <u-input v-model="forms.content" placeholder="请输入活动详情(500字以内)" type="textarea" auto-height height="100" maxlength="500" /> -->
+          <AiEditor v-model="forms.content" placeholder="请输入活动详情(500字以内)" :maxlength="500" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="活动封面图" prop="url" required :border-bottom="false" class="avatars" label-position="top">
+          <AiUploader :def.sync="forms.url" multiple placeholder="上传图片" :limit="1" action="/admin/file/add2"></AiUploader>
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="发布地区" prop="areaId" required :border-bottom="false" right-icon="arrow-right" class="addresss">
+          <AiAreaPicker v-model="forms.areaId" :areaId="user.areaId" @select="areaSelect" style="color: #333" selectRoot> </AiAreaPicker>
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="开始时间" prop="beginTime" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.beginTime" disabled placeholder="请选择开始时间" @click="showStartTime = true" />
+
+          <u-picker mode="time" :params="params" v-model="showStartTime" @confirm="confirm"></u-picker>
+        </u-form-item>
+
+        <u-form-item label="结束时间" prop="endTime" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.endTime" disabled placeholder="请选择结束时间" @click="showEndTime = true" />
+
+          <u-picker mode="time" :params="params" v-model="showEndTime" @confirm="confirm"></u-picker>
+        </u-form-item>
+
+        <u-form-item label="活动地点" prop="address" required :border-bottom="false" label-position="top" class="areaNmaes">
+          <u-input v-model="forms.address" placeholder="请输入活动地点(30字以内)" type="textarea" auto-height height="70" maxlength="30" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="联系人" prop="contactPerson" required :border-bottom="false">
+          <u-input v-model="forms.contactPerson" placeholder="请输入联系人" maxlength="30" />
+        </u-form-item>
+
+        <u-form-item label="联系方式" prop="contactPhone" required :border-bottom="false">
+          <u-input v-model="forms.contactPhone" placeholder="请输入联系方式" maxlength="16" />
+        </u-form-item>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      indexDetail: '',
+      forms: {
+        title: '',
+        content: '',
+        url: [],
+        areaId: '',
+        beginTime: '',
+        endTime: '',
+        address: '',
+        contactPerson: '',
+
+        contactPhone: '',
+      },
+      showStartTime: false,
+      showEndTime: false,
+      flag: false,
+      areaId: '',
+      params: {
+        year: true,
+        month: true,
+        day: true,
+        hour: true,
+        minute: true,
+        second: false,
+        timestamp: true,
+      },
+      isShow: false,
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad(o) {
+    this.indexDetail = o.index
+    this.id = o.id ? o.id : ''
+    this.$dict.load('realityStatus').then(() => {
+      this.areaId = this.user.areaId
+      this.forms.areaId = this.user.areaId
+
+      this.getDetail()
+    })
+    if (!o.id) {
+      this.isShow = true
+    }
+    if (!this.indexDetail) {
+      this.forms.contactPhone = this.user.phone
+      this.forms.contactPerson = this.user.name
+    }
+  },
+  onShow() {
+    document.title = '发布活动'
+  },
+
+  mounted() {},
+  methods: {
+    getDetail() {
+      if (this.indexDetail) {
+        this.$http.post(`/app/appvillageactivityinfo/queryDetailById?id=${this.id}`).then((res) => {
+          if (res?.data) {
+            this.forms = res.data
+            if (res.data) {
+              if (res.data.url) {
+                this.forms.url = JSON.parse(res.data.url || '[]')
+              }
+            }
+            this.isShow = true
+          }
+        })
+      }
+    },
+
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.forms.title) {
+            return this.$u.toast('请输入标题')
+          }
+          if (!this.forms.content) {
+            return this.$u.toast('请输入活动详情')
+          }
+          if (this.forms.url.length == 0) {
+            return this.$u.toast('请选择活动封面图')
+          }
+          if (!this.forms.beginTime) {
+            return this.$u.toast('请选择开始时间')
+          }
+          if (!this.forms.endTime) {
+            return this.$u.toast('请选择结束时间')
+          }
+          if (!this.forms.address) {
+            return this.$u.toast('请输入活动地点')
+          }
+          if (!this.forms.contactPerson) {
+            return this.$u.toast('请输入联系人')
+          }
+          if (!this.forms.contactPhone) {
+            return this.$u.toast('请输入联系方式')
+          }
+
+          const imgs = []
+          if (this.forms.url) {
+            this.forms.url.map((e) => {
+              imgs.push({ url: e.url, id: e.id })
+            })
+          }
+
+          this.flag = true
+          this.$http
+            .post(`/app/appvillageactivityinfo/addOrUpdate`, {
+              title: this.forms.title,
+              content: this.forms.content,
+              url: JSON.stringify(imgs) || [],
+              areaId: this.forms.areaId,
+              beginTime: this.forms.beginTime,
+              endTime: this.forms.endTime,
+              address: this.forms.address,
+              contactPerson: this.forms.contactPerson,
+              contactPhone: this.forms.contactPhone,
+              createUserName: this.user.name,
+              createUserId: this.user.id,
+              avatar: this.user.avatar,
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('发布成功')
+                if (!this.indexDetail) {
+                  uni.$emit('updateList')
+                } else {
+                  uni.$emit('updateGetDetail')
+                }
+                setTimeout(() => {
+                  uni.navigateBack()
+                }, 600)
+              }
+            })
+            .catch(() => {
+              this.flag = false
+              this.$u.toast('新增失败')
+            })
+        } else {
+          this.$u.toast('新增失败')
+        }
+      })
+    },
+
+    confirm(e) {
+      if (this.showStartTime == true) {
+        var nowTime = new Date().getTime() * 1
+
+        var beginTimes = new Date(e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute).getTime() * 1
+
+        if (nowTime > beginTimes) {
+          this.forms.beginTime = ''
+          return this.$u.toast('开始时间应大于当前时间')
+        } else {
+          this.forms.beginTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + '00'
+        }
+      }
+      if (this.showEndTime == true) {
+        if (!this.forms.beginTime) {
+          return this.$u.toast('请先选择开始时间')
+        }
+        var beginTimes = new Date(this.forms.beginTime.replaceAll('-', '/')).getTime() * 1
+        var endTimes = new Date(e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute).getTime() * 1
+        if (endTimes > beginTimes && endTimes != beginTimes) {
+          this.forms.endTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + '00'
+        } else {
+          this.forms.endTime = ''
+          return this.$u.toast('结束时间应大于开始时间')
+        }
+      }
+    },
+
+    areaSelect(e) {
+      this.forms.areaId = e
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  padding-bottom: 112px;
+
+  .aiArea {
+    display: flex;
+    align-items: center;
+
+    .label {
+      max-width: 480px;
+      height: 112px;
+      line-height: 112px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #303133 !important;
+      font-size: 30px;
+    }
+
+    i {
+      margin-left: 4px;
+      font-style: normal;
+      color: #999999;
+      font-size: 30px;
+    }
+  }
+
+  .header-description {
+    padding-bottom: 112px;
+    ::v-deep .u-form {
+      .u-form-item {
+        padding: 0 45px !important;
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            padding-bottom: 0;
+            .u-input {
+              text-align: right !important;
+            }
+          }
+        }
+      }
+
+      .u-form-item:last-child {
+        margin-bottom: 40px;
+      }
+
+      .addresss {
+        .u-form-item__body {
+          .u-form-item--right {
+            .u-form-item--right__content {
+              .u-form-item--right__content__slot {
+                .AiAreaPicker {
+                  width: 100%;
+                  display: flex;
+                  justify-content: flex-end;
+                  .areaSelector {
+                    .location {
+                      opacity: 0;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .titles,
+      .contents,
+      .areaNmaes {
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            .u-input {
+              text-align: left !important;
+            }
+          }
+        }
+      }
+
+      .avatars,
+      .areaNmaes,
+      .contents {
+        padding-bottom: 20px !important;
+      }
+
+      .avatars {
+        .u-form-item__body {
+          .default {
+            width: 160px;
+            height: 160px;
+          }
+        }
+      }
+
+      .line {
+        height: 16px;
+        background: #f3f6f9;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+    z-index: 99;
+  }
+}
+</style>
diff --git a/src/project/qujing/AppResidentActivitie/AddPosts.vue b/src/project/qujing/AppResidentActivitie/AddPosts.vue
new file mode 100644
index 00000000..60d0bcd7
--- /dev/null
+++ b/src/project/qujing/AppResidentActivitie/AddPosts.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="page">
+    <div class="textarea-div mar-b16">
+      <div class="title mar-b32"><span></span>帖子内容</div>
+      <div class="pad-l20">
+        <u-input v-model="form.content" type="textarea" :border="false" :height="140" :auto-height="true" placeholder="请输入内容（1000字以内）" placeholder-style="color:#999;font-size:16px;" maxLength="140" />
+      </div>
+    </div>
+    <div class="textarea-div pad-b176">
+      <div class="title mar-b32"><span></span>图片（最多9张）</div>
+      <div class="pad-b24">
+        <AiUploader :def.sync="form.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
+      </div>
+    </div>
+    <div class="footer-btn">
+      <div class="btn" @click="addPost">立即发布</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AddPosts',
+  components: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      files: [],
+      id: '',
+      flag: false,
+      form: {
+        content: '',
+        images: [],
+      },
+    }
+  },
+  onLoad(o) {
+    this.id = o.id || ''
+  },
+  onShow() {
+    document.title = '发布动态'
+  },
+  methods: {
+    addPost() {
+      if (this.flag) return
+
+      if (!this.form.content && !this.form.images.length) {
+        return this.$u.toast('帖子内容或图片不能为空')
+      }
+      this.flag = true
+
+      let imagesList = []
+      if (this.form.images) {
+        this.form.images.map((item) => {
+          imagesList.push({ id: item.id, url: item.url })
+        })
+      }
+
+      this.$http
+        .post(`/app/appvillageactivitypost/addOrUpdate`, {
+          content: this.form.content,
+          avatar: this.user.avatar,
+          name: this.user.name,
+          phone: this.user.phone ? this.user.phone : '',
+          userId: this.user.id,
+          activityId: this.id,
+          images: JSON.stringify(imagesList),
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('发布成功')
+            uni.$emit('refresh')
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 600)
+          }
+        })
+        .catch(() => {
+          this.flag = false
+          this.$u.toast('发布失败')
+        })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.textarea-div {
+  width: 100%;
+  padding: 32px 32px 38px 32px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.title {
+  font-size: 32px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  color: #333;
+  line-height: 44px;
+  span {
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #ff4466;
+    margin-right: 4px;
+  }
+}
+.border {
+  border-bottom: 2px solid #ddd;
+}
+.mar-b32 {
+  margin-bottom: 32px;
+}
+.pad-l20 {
+  padding-left: 20px;
+}
+.mar-b16 {
+  margin-bottom: 16px;
+}
+
+.pad-b176 {
+  padding-bottom: 176px;
+}
+.footer-btn {
+  width: 100%;
+  padding: 0 32px 32px 32px;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #f3f6f9;
+  z-index: 99;
+  .btn {
+    width: 100%;
+    height: 92px;
+    line-height: 92px;
+    text-align: center;
+    background: #1365dd;
+    border-radius: 8px;
+    font-size: 34px;
+    color: #fff;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/project/qujing/AppResidentActivitie/AppResidentActivities.vue b/src/project/qujing/AppResidentActivitie/AppResidentActivities.vue
new file mode 100644
index 00000000..a68a3d9c
--- /dev/null
+++ b/src/project/qujing/AppResidentActivitie/AppResidentActivities.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="AppActive">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="dataTop">
+      <div class="dataLeft">活动列表</div>
+
+      <div class="dataRight">
+        <span>共</span>
+        <span class="specialColor">{{ total }}</span>
+        <span>个活动</span>
+      </div>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="toDetail(item, 1)">
+        <template #custom>
+          <div class="left">
+            <div class="titles">{{ item.title }}</div>
+
+            <div class="nums">
+              <span class="specialColor">{{ item.realNum }}人</span>
+              <span>已报名</span>
+            </div>
+
+            <div class="times">
+              <span class="timesCont">{{ item.beginTime }}</span>
+
+              <span>至 {{ item.endTime }}</span>
+            </div>
+
+            <div class="areaNmae" v-if="item.areaName || item.address">{{ item.areaName }}{{ item.address }}</div>
+          </div>
+
+          <img :src="items.url" alt="" v-for="(items, index) in JSON.parse(item.url || '[]')" :key="index" @click.stop="previewImage(JSON.parse(item.url || '[]'), item.url[0].url)" />
+
+          <div class="hints" :style="{ background: item.status == 0 ? '#000000' : item.status == 1 ? '#42D784' : '#E4E4E4' }">{{ $dict.getLabel('villageActivityStatus', item.status) }}</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <AiFixedBtn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
+    </AiFixedBtn>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppResidentActivities',
+  appName: '普法活动',
+  components: {},
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部活动',
+        },
+        {
+          name: '我发布的',
+        },
+      ],
+      currentTabs: 0,
+      current: 1,
+      size: 6,
+      total: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+  onLoad() {
+    this.$dict.load(['villageActivityStatus']).then(() => {
+      this.getList()
+    })
+
+    uni.$on('updateList', () => {
+      this.current = 1
+      this.getList()
+    })
+  },
+  onShow() {
+    document.title = '居民活动'
+  },
+  mounted() {},
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvillageactivityinfo/listUp', null, {
+          params: {
+            size: this.size,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+            areaId: this.user.areaId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.$forceUpdate()
+
+            this.total = res.data.total
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    change(index) {
+      this.datas = []
+      this.current = 1
+      this.currentTabs = index
+      this.getList()
+    },
+
+    toAdd() {
+      uni.navigateTo({ url: `./Add` })
+    },
+
+    toDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}&createUserId=${item.createUserId}` })
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.AppActive {
+  height: 100%;
+  // background: #f3f6f9;
+
+  .dataTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 48px;
+    margin-bottom: 8px;
+    padding: 0 32px;
+    .dataLeft {
+      font-size: 38px;
+      font-weight: 600;
+    }
+    .dataRight {
+      font-size: 28px;
+      color: #666666;
+      .specialColor {
+        color: #4181ff;
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      background: #fff;
+      padding: 32px;
+      border-radius: 16px;
+      .fill {
+        display: flex;
+        justify-content: space-between;
+        // align-items: center;
+        .left {
+          width: calc(100% - 205px);
+          // background: pink;
+          .titles {
+            margin-bottom: 8px;
+            color: #333333;
+            font-weight: 500;
+            font-size: 30px;
+            line-height: 1.3;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+          .nums {
+            margin-top: 8px;
+            .specialColor {
+              color: #4181ff;
+            }
+          }
+          .times {
+            margin-top: 8px;
+            .timesCont {
+              margin-right: 10px;
+            }
+          }
+          .areaNmae {
+            margin-top: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        img {
+          position: relative;
+          width: 182px;
+          height: 182px;
+        }
+
+        .hints {
+          position: absolute;
+          right: 52px;
+          width: 96px;
+          height: 44px;
+          font-size: 26px;
+          color: #ffffff;
+          line-height: 44px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .AiFixedBtn {
+    .movableArea {
+      .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 96px;
+        height: 96px;
+        flex-shrink: 0;
+        background: $uni-color-primary;
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        font-size: 48px;
+        background: #fff;
+        color: #1365dd;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/qujing/AppResidentActivitie/Detail.vue b/src/project/qujing/AppResidentActivitie/Detail.vue
new file mode 100644
index 00000000..647900a4
--- /dev/null
+++ b/src/project/qujing/AppResidentActivitie/Detail.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="page">
+    <div class="header-content">
+      <div class="header-top">
+        <img :src="detail.url && detail.url[0].url" alt="" @click.stop="previewImage(detail.url, detail.url[0].url)" />
+      </div>
+
+      <div class="header-middle">
+        <div class="img-title">{{ detail.title }}</div>
+
+        <div class="header-middle-bottom">
+          <div class="left">
+            <div class="left-btn" :class="'status' + detail.status">{{ $dict.getLabel('villageActivityStatus', detail.status) }}</div>
+          </div>
+          <div class="right">
+            <img :src="detail.avatar" alt="" v-if="detail.avatar" />
+            <img src="./user-img.png" alt="" v-else />
+
+            <span v-if="detail.createUserName">{{ detail.createUserName }}</span>
+          </div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动时间</div>
+          <div class="cards-right">{{ detail.beginTime && detail.beginTime.substring(0, detail.beginTime.length - 3) }}</div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动人数</div>
+          <div class="cards-right" @click="toSignUser()">
+            <span style="color: #1c6bdf">{{ detail.realNum }}</span>
+          </div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动地点</div>
+          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
+        </div>
+      </div>
+
+      <div class="header-bottom">
+        <!-- v-if="detail.status == 1 || detail.status == 2 || detail.status == 3" -->
+        <div class="tab-title">
+          <span :class="current == 0 ? 'active' : ''" @click="change(0)">活动详情</span>
+          <span :class="current == 1 ? 'active' : ''" @click="change(1)">活动动态</span>
+        </div>
+        <!-- <div class="info-title" v-else>活动详情</div> -->
+        <div class="content-details" v-if="current == 0">
+          <div v-html="detail.content"></div>
+        </div>
+
+        <div class="content-trends" v-if="current == 1">
+          <div class="details" v-if="activeList.length > 0">
+            <div class="card" v-for="(item, index) in activeList" :key="index">
+              <div class="card-nav">
+                <div class="avatar">
+                  <img :src="item.avatar" alt="" style="width: 100%; height: 100%" v-if="item.avatar" />
+                  <span v-else>
+                    <span v-if="item.name">{{ item.name.substring(item.name.length, item.name.length - 2) }}</span>
+                  </span>
+                </div>
+
+                <div class="right">
+                  <span class="name">{{ item.name }}</span>
+                  <span class="time">{{ item.createTime }}</span>
+                </div>
+              </div>
+
+              <div class="card-font">
+                {{ item.content }}
+              </div>
+
+              <div class="card-img">
+                <img :src="e.url" v-for="(e, i) in imgList[index]" :key="i" alt="" @click.stop="previewImage(imgList[index], e.url)" />
+              </div>
+
+              <!-- <div class="card-icon">
+                <div>
+                  <i class="iconfont">&#xe69d;</i>
+                  <span>{{ item.viewNum ? item.viewNum : 0 }}</span>
+                </div>
+
+                <div>
+                  <i class="iconfont">&#xe6a2;</i>
+                  <span>{{ item.replyNum ? item.replyNum : 0 }}</span>
+                </div>
+
+                <div>
+                  <i class="iconfont">&#xe698;</i>
+                  <span>{{ item.supportNum ? item.supportNum : 0 }}</span>
+                </div>
+              </div> -->
+            </div>
+
+            <!-- <div class="card-bottom"></div> -->
+          </div>
+
+          <AiEmpty v-else />
+        </div>
+      </div>
+
+      <div class="fixedBtns" v-if="this.current == 0 && detail.status == 0 && this.createUserId == this.user.id" @click="toAdd">编辑活动</div>
+    </div>
+
+    <AiFixedBtn v-if="detail.status != 0 && this.createUserId == this.user.id && this.timeNow * 1 - this.timeEnd * 1 < 24 * 60 * 60 * 1000">
+      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="AddPosts()" />
+    </AiFixedBtn>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Detail',
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      id: '',
+      createUserId: '',
+      detail: {},
+      activeList: [],
+      imgList: [],
+      list: [
+        {
+          name: '活动详情',
+        },
+        {
+          name: '活动动态',
+        },
+      ],
+      current: 0,
+      timeEndTime: '',
+      timeEnd: '',
+      timeNow: '',
+    }
+  },
+  onLoad(option) {
+    this.id = option.id
+    this.createUserId = option.createUserId
+    this.$dict.load(['villageActivityStatus']).then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {
+    document.title = '活动详情'
+    uni.$on('refresh', () => {
+      this.getListInit()
+    })
+
+    uni.$on('updateGetDetail', () => {
+      this.getDetail()
+    })
+  },
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appvillageactivityinfo/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.detail = res.data
+          console.log('结束时间', this.detail.endTime)
+          this.timeEnd = new Date(this.detail.endTime).getTime()
+          console.log('过去时间戳', this.timeEnd)
+          this.timeNow = new Date().getTime()
+          console.log('当前时间戳', this.timeNow)
+          console.log('过去时间戳加上24小时', this.timeEnd * 1 + 24 * 60 * 60 * 1000)
+
+          if (this.timeNow * 1 - this.timeEnd * 1 < 24 * 60 * 60 * 1000) {
+            console.log('可以添加')
+          }
+
+          if (this.detail) {
+            if (this.detail.url) {
+              this.detail.url = JSON.parse(res.data.url || '[]')
+            }
+          }
+        }
+      })
+    },
+
+    getListInit() {
+      this.current = 1
+      this.getActiveList()
+    },
+
+    getActiveList() {
+      this.$http.post(`/app/appvillageactivitypost/list?activityId=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.activeList = res.data.records
+          if (this.activeList) {
+            let imagesList = []
+            this.activeList.map((item) => {
+              if (item.images) {
+                item.images = JSON.parse(item.images || '[]')
+                imagesList.push(item.images)
+              }
+              return item
+            })
+            this.imgList = imagesList
+          }
+        }
+      })
+    },
+
+    change(index) {
+      this.current = index
+      if (this.current == 1) {
+        this.getActiveList()
+      }
+    },
+
+    toAdd() {
+      uni.navigateTo({ url: `./Add?id=${this.id}&index=11` })
+    },
+
+    AddPosts() {
+      uni.navigateTo({ url: `./AddPosts?id=${this.id}` })
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.page {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+
+  .info-title {
+    padding-left: 32px;
+    line-height: 108px;
+    font-size: 32px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+  }
+  .tab-title {
+    line-height: 108px;
+    font-size: 32px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+    span {
+      display: inline-block;
+      width: 192px;
+      text-align: center;
+    }
+    .active {
+      color: #3671ee;
+      border-bottom: 4px solid #3671ee;
+    }
+  }
+  .status0 {
+    background: #000;
+  }
+  .status1 {
+    background: #42d784;
+  }
+  .status2 {
+    background: #e4e4e4;
+  }
+  .status3 {
+    background: #1aaaff;
+  }
+
+  .status4,
+  .status5 {
+    background: #e4e4e4;
+  }
+  .header-content {
+    // padding-bottom: 80px;
+    .header-top {
+      width: 100%;
+      height: 440px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .header-middle {
+      padding: 32px 32px 0 32px;
+
+      .img-title {
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .header-middle-bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 32px;
+        .left {
+          .left-btn {
+            padding: 4px 8px;
+            border-radius: 8px;
+
+            font-size: 26px;
+            color: #ffffff;
+            text-align: center;
+          }
+        }
+        .right {
+          img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            vertical-align: text-top;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      .cards {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 2px solid #eee;
+        padding: 36px 0;
+        line-height: 40px;
+        font-size: 28px;
+
+        .cards-left {
+          color: #999;
+        }
+
+        .cards-right {
+          color: #333;
+        }
+      }
+    }
+
+    .header-bottom {
+      // background: #fff;
+
+      .content-details {
+        padding: 32px 32px 130px 32px;
+        .font {
+          margin-top: 32px;
+          font-size: 30px;
+          line-height: 1.5;
+        }
+        .font-img {
+          margin-top: 26px;
+          width: 100%;
+          height: 480px;
+        }
+      }
+
+      .content-trends {
+        // padding-bottom: 40px;
+        background: #f3f6f9;
+        .details {
+          .card {
+            background: #fff;
+            padding: 26px 32px 28px 32px;
+            margin-bottom: 20px;
+            .card-nav {
+              display: flex;
+              .avatar {
+                width: 64px;
+                height: 64px;
+                line-height: 60px;
+                background: #4e8eee;
+                border-radius: 50%;
+                text-align: center;
+
+                font-size: 24px;
+                font-weight: 500;
+                color: #ffffff;
+                margin-right: 16px;
+              }
+              .right {
+                // display: inline;
+                display: flex;
+                flex-direction: column;
+
+                .name {
+                  font-size: 26px;
+                  font-weight: 500;
+                }
+                .time {
+                  font-size: 22px;
+                  color: #999999;
+                }
+              }
+            }
+
+            .card-font {
+              margin-top: 36px;
+              line-height: 1.6;
+              text-overflow: -o-ellipsis-lastline;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              line-clamp: 2;
+              -webkit-box-orient: vertical;
+            }
+
+            .card-img {
+              margin-top: 16px;
+              img {
+                width: 224px;
+                height: 224px;
+                margin-right: 8px;
+              }
+              img:nth-child(3n + 0) {
+                margin-right: 0;
+              }
+            }
+
+            .card-icon {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 28px;
+              div {
+                display: flex;
+                align-items: center;
+                span {
+                  font-size: 24px;
+                }
+              }
+            }
+          }
+        }
+
+        ::v-deep .emptyWrap {
+          // background-color: pink;
+          padding-bottom: 50px;
+        }
+
+        .noDeatil {
+          background-color: #f3f6f9;
+          img {
+            width: 400px;
+            height: 240px;
+            transform: translate(50%, 25%);
+            padding-bottom: 156px;
+          }
+        }
+
+        .card-bottom {
+          height: 20px;
+          background-color: #f3f6f9;
+        }
+      }
+    }
+
+    .fixedBtns {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      background: #1365dd;
+      text-align: center;
+      font-size: 32px;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+
+  .AiFixedBtn {
+    .movableArea {
+      .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 96px;
+        height: 96px;
+        flex-shrink: 0;
+        background: #fff;
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        font-size: 48px;
+        color: #1365dd;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/qujing/AppResidentActivitie/user-img.png b/src/project/qujing/AppResidentActivitie/user-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9620e086f8e6738ca671aacc434531257ce7add
GIT binary patch
literal 1467
zcmV;s1w{IZP)<h;3K|Lk000e1NJLTq002q=002q|1^@s69MHmX00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91N}vM(1ONa40RR91N&o-=06xuyNB{r@B}qg<RCodHoLg@jMHI)+?#7oG
z$B9YYCQX5orWFtf^Z^Nac_~t=z963Z2@n#md=TDHC4|I#zd)rvR8(rAZ-`1oh(am7
zL349UT(@>=FXz9hrE2YUXJ=>6#`Yd*W$$?Q>^Z+VGdr_09*cbP?d6T7Hnlz{*IjYR
zdY#BE`mzk^sa3Pcy-k*N!6xUsFOE-Nf6-B^b8_ywo87FgeeDu`$&l<$`bd6SR-3_`
zeYITq>dcbW1OpEgAZ=7v&y!0hM-ohs(-vKvF7G)FSYG5Hl2S-LXmQ|pY!FdslUmfe
zHuBZ22PZFytD!^Avi-c_9_=<M2oln{y#^y2Pq%*g(%(E-EA~zoAjQ#-02pzV8<l=i
zKNK(f%`K*F)5{n=|2+kjf>I=)m@SPcMNngk`C`kKaV%P_<Y@m?mMX;zjc0bs?#XtW
z)@s{y_hFO%SZmOBi$|deN@AdF9%UZcU!djr0_DcK13Tk5RLVPaa3)V59ca_Fdv*Hx
zZk^f*@k#_#F=x~1ccy6i6}8&~<cDt*X@Q}g|Mel&8g22|>MqKdO_<2r^x1M*8Pbd9
z04%PB4rvj+BdXiVTa#4GIof{W+Ec6px+Fyu)cf2Xp}~$SGpyqS)+H%opwM2U;Wj1E
z)#DjpN`03eF;MgT`0qUWyR6Vi$a6OWI;BJo)TDW*=3~$q1YQgj`b4H>a@@SmAREO%
z6|&}U6^G8D1ZA?#3j)+hH($&h&A!h#oEplAvV=Q`zH*9uDi%?3jQ-=$8ALP%6-36D
zo`UiL2|5)6Rd1SqH4=x;#6hh;eimedcKSvPI)jW6i>TGD?I0Vp(;vj3GsqY*P<N_L
zevNDHJuY-Xr<90+YVzcONynfII;BJm6dd}6CkRZ5NnI*7iGsTSXlMFK#jt*P?(q~B
zbV-URC^&ZM#(z9Vr{7gTZ~O<=AuZydws@-P%FUX#pI2^f5p+n4I4C&y+k>a{_huus
zuebRcT$_X>0t${^y%j#HbgnT4H8D`tdW*tzLXmfquSrT00|kexb@gFQn7nboOcYd@
z35Sy4L_#mniGg}|Zk*;qOgGJyvh?1*@m@ZNq$L7si6I?Z2>)NCqi+^zX*L;HYU^$c
zm05vjcRyx8hbnn3jTXOnKe0GLv!x9E_*adv*i1@d2ZcF>z3dp^9Nv>BtgwqJhgi>n
z=^XvO`jl?)f!8f@507I3RW3L*$8h#>8}wQ^+jB)-R9FCxDvYD?tnIy-xc{h0|L_>F
z`ow%U!Wby5!Cailc_obn6q14!d5aveI3TE!w>BE|=X%3i18TyS$e?B?GG4p0mp^xl
zV6ydXZuD`WTK>di%YP%j4UJUvSk3$C@)YeRNdCftZLkrxMiFgLh@?*rmw1U_^u{@g
z11i_TM%W6QbwwN0@q<PFpYra9)ByuqVY9AifkHn9>nI0JU^8sj5iL*)+=m%d(Y0L*
zRAnOa!!j|>y0&Y9n#>O_C|%pNK;^~;rxEvuuCDD`pa$q+=jX&v>aHZE1T9dK3%HcL
z2$4zGcCE(d`>X3AOdF1@S`jrIu7~p?1*OO<1(kwQB%qj$BgzUtWvi%sc(PeF{v#!C
zSC&d&0$^lgPq)6g(jU3f@xFK1_>RBG&HD@*cxD4eHg*T(Uj5lYvtP<yumK~ldw|^m
zd0W7XQa2x%`!Exa4IAu%!mfbW9gts_ev?*1rh@GynMG&EL=<e-SUTOXwD*Rk{{wHl
VVH*lAC%^yz002ovPDHLkV1jT#mkR&@

literal 0
HcmV?d00001