运营活动

src/project/activeAnalysis/AppWechatActivities/AppWechatActivities.vue

@@ -1,47 +1,47 @@
 <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)">
-        <template #custom>
-          <div class="left">
-            <div class="titles">{{ item.title }}</div>
-
-            <!-- <div class="nums">
-              <span class="specialColor">{{ item.signUpCount }}人</span>
-              <span>已报名</span>
-            </div> -->
-
-            <div class="times">
-              <span class="timesCont">{{ item.createTime }}</span>
-            </div>
-
-            <div class="areaName" v-if="item.areaName || item.address">{{ item.areaName }}{{ item.address }}</div>
+  <div class="AppWechatActivities">
+    <div class="calendar" v-if="tabIndex == 1">
+      <div class="month-item">
+        <div class="title" @click="showTime=true">{{ym}}<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px"></u-icon></div>
+        <div class="day-list">
+          <!-- <div class="week-item">
+            <div v-for="(item, index) in weekList" :key="index">{{item}}</div>
+          </div> -->
+          <div class="day-item" v-for="(item, index) in dayList" :key="index">
+            <div>{{item.day}}</div>
+            <u-icon name="checkbox-mark" color="#5297FF" v-if="item.status == '使用' || item.status == '打开并活跃'"></u-icon>
+            <u-icon name="close" color="#ff4466" v-else></u-icon>
           </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>
-
-    <div class="add-btn" @click="toCalendar">
-      <div>打卡</div>
+        </div>
+      </div>
     </div>
+    
+    <div v-else>
+      <template v-if="datas.length > 0">
+        <AiCard v-for="(item, i) in datas" :key="i" @click.native="toDetail(item)">
+          <template #custom>
+            <div class="left">
+              <div class="titles">{{ item.title }}</div>
+
+              <div class="times">
+                <span class="timesCont">{{ item.createTime }}</span>
+              </div>
+
+              <div class="areaName" v-if="item.areaName || item.address">{{ item.areaName }}{{ item.address }}</div>
+            </div>
+          </template>
+        </AiCard>
+      </template>
+      <AiEmpty description="暂无数据" v-else></AiEmpty>
+    </div>
+    <div class="line-h100"></div>
+    <div class="tabs">
+      <div class="item" v-for="(item, index) in tabs" :key="index" @click="change(index)">
+        <u-icon :name="item.icon" :color="tabIndex == index ? '#3975C6' : '#999'" size="30"></u-icon>
+        <p :class="tabIndex == index ? 'active' : ''">{{item.name}}</p>
+      </div>
+    </div>
+
     <u-modal v-model="show" :show-cancel-button="true" @confirm="bindPhoneConfirm" @cancel="cancel">
       <div class="item">
         <span class="label"><span class="tips">*</span>手机号</span>
@@ -49,13 +49,8 @@
           <u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="11" :clearable="false" />
         </div>
       </div>
-      <!-- <div class="item">
-        <span class="label"><span class="tips">*</span>验证码</span>
-        <div class="value">
-          <u-input type="tel" placeholder="请填写验证码" v-model="form.code" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="6" :clearable="false" />
-        </div>
-      </div> -->
     </u-modal>
+    <u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm" @cancel="show=false"></u-picker>
   </div>
 </template>
 
@@ -68,26 +63,46 @@ export default {
   data() {
     return {
       datas: [],
-      tabList: [{ name: '全部活动'}, { name: '报名中'}],
+      tabs: [{ name: '活动列表', icon: 'home-fill'}, { name: '打卡', icon: 'list'}],
       currentTabs: 0,
       current: 1,
       size: 6,
       total: '',
       show: false,
-      phone: ''
+      phone: '',
+      tabIndex: 0,
+      showTime: false,
+      params: {
+        year: true,
+        month: true,
+        day: false,
+        hour: false,
+        minute: false,
+        second: false
+      },
+      ym: '',
+      dayList: []
     }
   },
   computed: {
     ...mapState(['user']),
   },
-  watch: {},
   onLoad() {
     this.getList()
+    const date = new Date();
+    let year = date.getFullYear()
+    let monNum = date.getMonth() + 1
+    let month = monNum < 10 ? `0${monNum}` : monNum
+    this.ym = `${year}-${month}`
+    this.getDayList()
   },
   onShow() {
     document.title = '运营活动'
   },
   methods: {
+    change(e) {
+      this.tabIndex = e
+    },
     getList() {
       this.$http.post('/app/appactivityinfo/listForWX', null, {
         params: {
@@ -135,8 +150,20 @@ export default {
         }
       })
     },
-    toCalendar() {
-      uni.navigateTo({url: './ActiveCalendar'})
+    getDayList() {
+      // this.$http.post(`/app/wxuseruselog/listForWX?wxUserId=LiuYe&ym=${this.ym}`).then(res => {
+      this.$http.post(`/app/wxuseruselog/listForWX?wxUserId=${this.user.phone}&ym=${this.ym}`).then(res => {
+        if (res.code == 0) {
+          res.data.map((item) => {
+            item.day = item.ymd.substring(8, 10)
+          })
+          this.dayList = res.data
+        }
+      })
+    },
+    confirm(e) {
+      this.ym = `${e.year}-${e.month}`
+      this.getDayList()
     }
   },
   onReachBottom() {
@@ -150,26 +177,42 @@ export default {
 uni-page-body {
   height: 100%;
 }
-.AppActive {
+.AppWechatActivities {
   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;
+  .calendar {
+    background-color: #fff;
+    padding-bottom: 48px;
+    .month-item{
+      .title {
+        line-height: 88px;
+        text-align: center;
+        font-size: 28px;
+        color: #000;
+      }
+      .week-item {
+        div {
+          display: inline-block;
+          width: 107px;
+          text-align: center;
+          color: #666;
+          line-height: 44px;
+        }
+      }
+      .day-list {
+        .day-item {
+          display: inline-block;
+          position: relative;
+          width: 107px;
+          height: 107px;
+          line-height: 107px;
+          text-align: center;
+          color: #333;
+        }
+        .u-icon {
+          position: absolute;
+          top: 70px;
+          left: 40px;
+        }
       }
     }
   }
@@ -239,22 +282,35 @@ uni-page-body {
     }
   }
 
-  .add-btn {
+  .line-h100 {
+    height: 100px;
+  }
+
+  .tabs {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    box-sizing: border-box;
-    div {
-      width: 100%;
-      height: 100px;
-      background: #3975C6;
+    height: 100px;
+    background-color: #fff;
+    display: flex;
+    .item {
+      flex: 1;
       text-align: center;
-      line-height: 100px;
-      color: #fff;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      font-size: 34px;
+      .u-icon {
+        margin: 12px 0 8px 0;
+      }
+      p {
+        font-family: PingFangSC-Regular;
+        letter-spacing: 0;
+        line-height: 28px;
+        font-size: 24px;
+        color: #999;
+      }
+      .active {
+        color: #3975C6;
+        font-weight: 500;
+      }
     }
   }
 }