rebatedine-mini/src/pagesSub/activity/activityDetail.vue

<template>
  <view class="act-deltail-main"
        :style="{paddingBottom: `${footerHeight}rpx`}">
    <network-error />
    <view class="over-view">
      <image class="detail-img"
             :src="detail.imgs"
             mode="aspectFill"></image>
      <view class="detail-over">
        <text class="detail-title u-line-2 u-font-40 line-56 u-tips-color bold">【{{detail.activity_type | activityTyepFilter}}】{{detail.title}}</text>
        <view class="u-flex u-col-bottom u-p-t-24 u-p-b-28 u-border-bottom">
          <text class="u-primary-color u-font-28 line-40">返利：</text>
          <block v-if="detail.activity_type === 1">
            <text class="u-flex-1 u-primary-color u-font-36 line-50 bold">实付全返</text>
          </block>
          <block v-if="detail.activity_type === 2">
            <view class="u-flex-1 u-primary-color bold">
              <text class="u-font-28 line-40">¥</text>
              <text class="u-font-36 line-50">{{(detail.rebate_amount / 100).toFixed(2)}}</text>
            </view>
          </block>
          <text class="u-primary-color u-font-24 line-34">{{detail.join_count - detail.join_number}}</text>
          <text class="u-content-color u-font-24 line-34">剩余名额</text>
        </view>
        <view class="u-flex u-row-between u-p-t-22">
          <text class="u-content-color">{{detail.join_number}}已参与</text>
          <button class="share-btn u-primary-color u-font-24 line-34"
                  v-if="!userId"
                  @click="jumpToLogin">分享活动</button>
          <button class="share-btn u-primary-color u-font-24 line-34"
                  open-type="share"
                  v-if="userId">分享活动</button>
        </view>
        <image v-if="platBanner"
               :src="platBanner.img"
               class="detail-banner  line-34 u-m-t-32"
               mode="widthFix"
               @click="dealJumpInfo(platBanner)"></image>
      </view>
    </view>
    <view class="shop-info u-m-t-16">
      <view class="u-font-36 line-50 u-tips-color bold">店铺信息</view>
      <view class="u-flex">
        <view class="u-flex-1">
          <text class="shop-name u-font-28 u-tips-color line-40 u-line-1">【{{detail.plat_type | platFilter}}】{{detail.shop_name}}</text>
          <view class="u-flex"
                @click="openMap">
            <view class="icon-map-wh icon-map"></view>
            <view class="u-content-color u-m-l-8 u-m-r-16">{{(detail.distance / 1000).toFixed(1)}}km</view>
            <text class="shop-address u-flex-1 u-content-color u-line-1">{{detail.shop_address}}</text>
          </view>
        </view>
        <view class="divider-right"></view>
        <block v-if="detail.plat_type === 8">
          <view class="to-btn u-p-l-28"
                @click="copyShopName()">
            <view class="icon-mt-wh icon-elm"></view>
            <view class="u-m-t-2 u-font-22 u-content-color line-32">打开饿了么</view>
          </view>
        </block>
        <block v-if="detail.plat_type === 9">
          <view class="to-btn u-p-l-40"
                @click="copyShopName()">
            <view class="icon-mt-wh icon-mt"></view>
            <view class="u-m-t-2 u-font-22 u-content-color line-32">打开美团</view>
          </view>
        </block>
      </view>
    </view>
    <view class="act-able-time u-m-t-16">
      <view class="u-font-36 line-50 u-tips-color bold">活动可用时间</view>
      <view class="u-flex u-m-t-16">
        <text class="u-flex-1 u-content-color line-40 u-line-2 u-p-r-32">{{businessHours}}营业时间可用（当天参与报名，需当天提交资料才能有效返款）</text>
        <view class="divider-right"></view>
        <button class="to-btn contact-btn u-p-l-40"
                @click="copyWx">
          <view class="icon-phone-wh icon-phone"></view>
          <view class="u-m-t-2 u-font-22 u-content-color line-32">联系客服</view>
        </button>
      </view>
    </view>
    <view class="act-desc u-m-t-16">
      <view class="act-tabs u-border-bottom">
        <u-tabs :is-scroll="false"
                :list="[{name: '活动规则'}, {name: '评价要求'}]"
                :current="currentTab"
                height="104"
                font-size="30"
                active-color="#FF6632"
                inactive-color="#111111"
                :bar-style="{
            bottom: '-4rpx',
            marginLeft: '-40rpx',
            width: '120rpx',
            height: '6rpx',
            borderRadius: 0,
            backgroundColor: 'linear-gradient(270deg, #FFB76B 0%, #FE4028 100%)'
          }"
                @change="changeTab">
        </u-tabs>
      </view>
      <view class="u-m-b-18 u-p-t-32 u-p-b-32">
        <block v-if="currentTab === 0">
          <block v-for="(item, index) in detail.content"
                 :key="index">
            <img-text :value="item.content"
                      :type="item.contentType"></img-text>
          </block>
        </block>
        <block v-else>
          <img-text :value="detail.requirement"
                    type="1"></img-text>
        </block>
      </view>
    </view>
    <block v-if="status">
      <fixed-bottom @get-height="getFooterHeight">
        <view class="bottom-footer u-flex">
          <block v-if="(status * 1 === 2)">
            <view class="u-flex-1">
              <view class="line-34 bold">{{'距截止提交还有：'}}</view>
              <view class="u-font-20 u-content-color line-28">{{remainingTime}}</view>
            </view>
            <block v-if="status * 1 === 2">
              <view class="u-flex">
                <button class="canel-btn u-font-28 line-40"
                        @click="cancelJoin"
                        v-show="!isExpire">取消报名</button>
                <button :class="isExpire ? 'sign-up-btn u-font-28 line-40 u-m-l-16' : 'submit-btn u-font-28 line-40 u-m-l-16'"
                        @click="toSubmiteOrder">提交订单</button>
              </view>
            </block>
          </block>
          <block v-if="status * 1 === 1">
            <block v-if="isExpire">
              <button class="end-btn u-m-l-12"
                      disabled
                      v-if="status * 1 === 1">已结束</button>
            </block>
            <view class="u-flex-1"
                  v-if="!isExpire">
              <view class="line-34 bold">{{isStart ? '距活动结束还有：' : '距活动开始还有：'}}</view>
              <view class="u-font-20 u-content-color line-28">{{remainingTime}}</view>
            </view>
            <block v-if="status * 1 === 1 && !isExpire">
              <button :class="isStart ? 'sign-up-btn u-font-30 bold line-42' : 'sign-up-btn u-font-30 bold line-42'"
                      @click="join">{{isStart ? '免费报名' : '即将开始'}}</button>
            </block>
          </block>
          <block v-if="status * 1 === 3 || status * 1 === 4">
            <block v-if="status * 1 === 3">
              <view class="u-flex-1">
                <view class="line-34 bold">等待审核：</view>
                <view class="u-font-20 u-content-color line-28">审核通过后将获得返利金额</view>
              </view>
            </block>
            <block v-if="status * 1 === 4">
              <view class="u-flex-1">
                <view class="line-34 bold">审核通过：</view>
                <view class="u-font-20 u-content-color line-28">返利金额将在第二日到账</view>
              </view>
            </block>
            <button class="sign-up-btn u-font-30 bold line-42"
                    disabled>已提交</button>
          </block>
          <block v-if="status * 1 === 5">
            <view class="u-flex-1">
              <view class="line-34 bold">审核驳回：</view>
              <view class="u-font-20 u-content-color line-28">{{detail.reject_reason}}</view>
            </view>
          </block>
          <block v-if="status * 1 === 6">
            <button class="end-btn u-m-l-12"
                    disabled>已结束</button>
          </block>
          <block v-if="status * 1 === 7">
            <button class="end-btn u-m-l-12"
                    disabled>已抢光</button>
          </block>
        </view>
      </fixed-bottom>
    </block>
    <view class="fixed-copy"
          :style="{marginBottom: `${footerHeight}rpx`}">
      <view class="copy-container">
        <image src="@/static/common/share.png"
               mode="scaleToFill"
               v-if="isCommissionEnable"
               @click="onClickShare" />
        <view class="btn-copy u-font-22"
              v-show="detail.search_key"
              @click.stop="copyShopName">复制店名</view>
      </view>
    </view>
    <activity-join-dialog @onClose="isDialog = false"
                          @onOpen="onDialogOpen()"
                          :title="dlgTitle"
                          :shopName="detail.shop_name"
                          :platType="detail.plat_type*1"
                          :steps="detail.steps"
                          v-if="isDialog"></activity-join-dialog>
  </view>

</template>

<script>
import fixedBottom from '@/components/fixedBottom'
import imgText from '@/components/imgText'
import { getActivityDetail } from '@/api/activityApi'
import { editJoinActivity, cancelJoinActivity } from '@/api/userApi'
import activityJoinDialog from '@/components/activityJoinDialog'
export default {
  components: { fixedBottom, imgText, activityJoinDialog },
  data () {
    return {
      isDialog: false,
      showErr: false,
      errMsg: '',
      nowTime: '',
      timer: null,
      footerHeight: 0,
      currentTab: 0,
      activityId: '',
      recordId: '',
      dlgTitle: '复制成功',
      dlgType: 1,
      detail: {
        imgs: '',
        activity_type: '',
        title: '',
        rebate_amount: '',
        join_count: 0,
        join_number: 0,
        plat_type: '',
        shop_name: '',
        distance: 0,
        shop_address: '',
        join_status: '',
        start_time: '',
        end_time: '',
        search_key: ''
      }
    }
  },
  computed: {
    platBanner () {
      if (this.detail) {
        const list = this.$store.state.home_minipro
        const mapList = list.filter((item) => {
          return item.plat_type === this.detail.plat_type
        })
        if (mapList.length > 0) {
          return mapList[0]
        } else {
          return null
        }
      } else {
        return null
      }
    },
    isCommissionEnable () {
      return this.$store.state.enable_commission * 1 === 1
    },
    userId () {
      return this.$store.state.userInfo.token
    },
    isStart () {
      if (!this.nowTime) {
        return true
      }
      const now = this.nowTime.format('HH:mm:ss')
      console.log(this.detail.start_time)
      console.log(now)
      if (this.detail.start_time < now) {
        console.log(this.detail.start_time < now)
        return true
      }
      return false
    },
    isExpire () {
      if (!this.nowTime) {
        return false
      }
      const now = this.nowTime.format('HH:mm:ss')
      if (this.detail.end_time < now) {
        return true
      }
      return false
    },
    businessHours () {
      const date = this.$dayjs(`${this.detail.start_date}`).format('YYYY年MM月DD日')
      const start = this.$dayjs(`${this.detail.start_date} ${this.detail.start_time}`).format('HH:mm')
      const end = this.$dayjs(`${this.detail.end_date} ${this.detail.end_time}`).format('HH:mm')
      return `${date} ${start}-${end}`
    },
    status () {
      if (this.detail.join_status === 1) {
        return 2
      } else if (this.detail.join_status === 2) {
        return 3
      } else if (this.detail.join_status === 3) {
        return 4
      } else if (this.detail.join_status === 4) {
        return 5
      } else if (this.detail.join_status === 5) {
        return 1
      } else if (this.detail.join_status === 6) {
        return 6
      } else if (this.detail.join_count === this.detail.join_number && this.detail.join_count) {
        return 7
      } else if (this.detail.join_status === 0) {
        return 1
      } else {
        return 0
      }
    },
    remainingTime () {
      if (!this.detail.end_time) { return }
      if (this.status * 1 === 2) {
        const endTime = this.$dayjs(`${this.$dayjs().format('YYYY-MM-DD 23:59:59')}`)
        if (isNaN(endTime.diff(this.nowTime, 's'))) { return }
        return this.$dayjs(endTime.diff(this.nowTime)).subtract(8, 'h').format('HH小时mm分ss秒')
      }
      if (this.isStart) {
        const endTime = this.$dayjs(`${this.$dayjs().format('YYYY-MM-DD')} ${this.detail.end_time}`)
        if (isNaN(endTime.diff(this.nowTime, 's'))) { return }
        if (!isNaN(endTime.diff(this.nowTime, 's')) && endTime.diff(this.nowTime, 's') === 0) {
          clearTimeout(this.timer)
          return 0
        }
        return this.$dayjs(endTime.diff(this.nowTime)).subtract(8, 'h').format('HH小时mm分ss秒')
      } else {
        const endTime = this.$dayjs(`${this.$dayjs().format('YYYY-MM-DD')} ${this.detail.start_time}`)
        return this.$dayjs(endTime.diff(this.nowTime)).subtract(8, 'h').format('HH小时mm分ss秒')
      }
    }
  },
  // watch: {
  //   userId (e) {
  //     if (!e) {
  //       uni.navigateTo({
  //         url: '/pagesSub/other/login'
  //       })
  //     }
  //   }
  // },
  onLoad (options) {
    this.activityId = options.id
    this.recordId = options.record_id
  },
  onShow () {
    // if (!this.userId) {
    //   uni.navigateTo({
    //     url: '/pagesSub/other/login'
    //   })
    //   return
    // }
    this.getDetailData()
    this.reNowTime()
  },
  onHide () {
    clearTimeout(this.timer)
  },
  onError () {
    clearTimeout(this.timer)
  },
  onPullDownRefresh () {
    clearTimeout(this.timer)
    this.getDetailData()
    this.reNowTime()
  },
  onPageNotFound () {
    clearTimeout(this.timer)
  },
  onShareAppMessage (res) {
    const title = `${this.detail.activity_type === 1 ? '【免费吃】' : '【返利餐】'}${this.detail.title}`
    return {
      title: title,
      path: this.getShareUrl(),
      imageUrl: this.detail.imgs
    }
  },
  onShareTimeline (res) {
    const title = `${this.detail.activity_type === 1 ? '【免费吃】' : '【返利餐】'}${this.detail.title}`
    return {
      title: title,
      path: this.getShareUrl(),
      imageUrl: this.detail.imgs
    }
  },
  methods: {
    jumpToLogin () {
      uni.navigateTo({
        url: '/pagesSub/other/login'
      })
    },
    onDialogOpen () {
      uni.setClipboardData({
        data: this.detail.search_key ? this.detail.search_key : this.detail.shop_name
      })
      this.isDialog = false
      this.getDetailData()
      this.openOtherApplte()
    },
    onClickShare () {
      if (!this.userId) {
        this.jumpToLogin()
        return
      }
      uni.navigateTo({ url: '/pagesSub/commission/invite' })
    },
    getShareUrl () {
      let url = `/pagesSub/activity/activityDetail?id=${this.detail.id}`
      if (this.userInfo) {
        url += '&invite_id=' + this.userInfo.id
      }
      return url
    },
    reNowTime () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.nowTime = this.$dayjs()
        this.reNowTime()
      }, 1000)
    },
    // 获取用户经纬度
    getLocation () {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.$store.commit('changeLocation', { lat: res.latitude, lng: res.longitude })
            resolve(res)
          },
          fail: () => {
            resolve(false)
          }
        })
      })
    },
    // 获取活动详情
    async getDetailData () {
      const location = await this.getLocation()
      if (!location) { return }
      const params = {
        id: this.activityId,
        lng: location.longitude,
        lat: location.latitude
      }
      if (this.recordId) {
        params.record_id = this.recordId
      }
      const { code, data } = await getActivityDetail(params)
      if (code === 200) {
        this.detail = data
        this.nowTime = this.$dayjs()
      }
      uni.stopPullDownRefresh()
    },
    // 报名活动/取消报名
    async joinActivity (type) {
      const params = {
        type: type
      }
      if (type === 1) {
        params.id = this.detail.id
        if (this.$store.state.lat) {
          params.lat = this.$store.state.lat
        }
        if (this.$store.state.lng) {
          params.lng = this.$store.state.lng
        }
        if (this.$store.state.INVITE_ID) {
          params.invite_id = this.$store.state.INVITE_ID
        }
      } else {
        params.record_id = this.detail.user_activity_id
      }
      const { code, msg } = type === 1 ? await editJoinActivity(params) : await cancelJoinActivity(params)
      if (code === 200) {
        if (type === 1) {
          this.isDialog = true
          this.dlgTitle = '报名成功'
          this.getDetailData()
          // uni.navigateTo({
          //   url: `/pagesSub/activity/signUpOutcome?endTime=${this.detail.end_time}&platType=${this.detail.plat_type}`
          // })
        } else {
          this.getDetailData()
        }
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    },
    getFooterHeight (h) {
      this.footerHeight = h * 2
    },
    changeTab (index) {
      this.currentTab = index
    },
    openMap () {
      uni.openLocation({
        latitude: this.detail.shop_lat,
        longitude: this.detail.shop_lng
      })
    },
    // 我要报名
    join () {
      if (!this.isStart) {
        uni.showToast({
          title: '活动还未开始',
          icon: 'none'
        })
        return
      }
      if (!this.userId) {
        this.jumpToLogin()
        return
      }
      uni.requestSubscribeMessage({
        tmplIds: this.$store.state.joinTemplateIds,
        complete: () => {
          this.joinActivity(1)
        }
      })
    },
    // 取消报名
    cancelJoin () {
      uni.showModal({
        title: '提示',
        content: '确定取消报名',
        confirmColor: '#1677FF',
        cancelColor: '#1677FF',
        success: (res) => {
          if (res.confirm) {
            this.joinActivity(2)
          }
        }
      })
    },
    // 提交订单
    toSubmiteOrder () {
      if (!this.$store.state.userInfo.alipay_account) {
        uni.navigateTo({
          url: '/pagesSub/my/userDetail?toastType=1'
        })
        return
      }
      uni.navigateTo({
        url: `/pagesSub/order/submitOrder?activityId=${this.detail.id}&userActivityId=${this.detail.user_activity_id}`
      })
    },
    openOtherApplte () {
      uni.navigateToMiniProgram({
        appId: this.detail.app_info.appid,
        path: this.detail.app_info.path
      })
    },
    copyShopName () {
      this.isDialog = true
      this.dlgTitle = '复制成功'
    },
    copyWx () {
      uni.setClipboardData({
        data: this.detail.kf_wechat,
        success: () => {
          uni.showToast({
            icon: 'none',
            title: '已复制客服微信号，请添加客服反馈'
          })
        }
      })
    }
  },
  filters: {
    activityTyepFilter (e) {
      const typeList = {
        1: '免费吃',
        2: '返利餐'
      }
      return typeList[e] || ''
    },
    platFilter (e) {
      const platList = {
        8: '饿了么',
        9: '美团'
      }
      return platList[e] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.act-deltail-main {
  .fixed-copy {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99;
    padding-bottom: 16rpx;

    .copy-container {
      padding-right: 24rpx;
      align-items: center;
      display: flex;
      flex-direction: column;
      image {
        width: 122rpx;
        height: 122rpx;
      }
      .btn-copy {
        width: 72rpx;
        height: 72rpx;
        text-align: center;
        padding: 8rpx;
        background: #111111;
        box-shadow: 0px 1px 4px 0px rgba(17, 17, 17, 0.6);
        opacity: 0.8;
        color: #eaebec;
        font-weight: 400;
        border-radius: 36rpx;
        margin-top: 32rpx;
      }
    }
  }
  .over-view {
    .detail-img {
      width: 100%;
      height: 424px;
      font-size: 0;
    }
    .detail-over {
      padding: 24px 40px 28px;
      background-color: #fff;
      margin-top: 16rpx;
      .detail-banner {
        width: 100%;
        border-radius: 24rpx;
        box-shadow: 0px 4rpx 16px 0px rgba(0, 0, 0, 0.1);
      }
    }
    .detail-title {
      max-width: 670px;
    }
    .share-btn {
      margin: 0;
      padding-right: 0;
      background-color: #fff;
      &::after {
        border-color: transparent;
      }
    }
  }
  .act-able-time,
  .shop-info {
    padding: 32px 40px 28px;
    background-color: #fff;
    .shop-name {
      display: inline-block;
      margin: 16px 0;
      max-width: 510px;
    }
    .shop-address {
      display: inline-block;
      max-width: 396px;
    }
    .to-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .contact-btn {
      padding-right: 0;
      background-color: #fff;
      &::after {
        border-color: transparent;
      }
    }
    .icon-map-wh {
      width: 20px;
      height: 24px;
    }
    .icon-phone-wh,
    .icon-elm-wh,
    .icon-mt-wh {
      width: 56px;
      height: 56px;
    }
    .divider-right {
      width: 2px;
      height: 54px;
      background-color: $u-border-color;
    }
  }
  .act-desc {
    padding: 0 40px;
    background-color: #fff;
  }
  .bottom-footer {
    padding: 16px 40px 16px 28px;
    width: 100%;
    background-color: #fff;
    .sign-up-btn {
      padding: 24px 128px;
      width: 374px;
      height: 88px;
      border-radius: 44px;
      color: #fff;
      background-color: $u-type-primary;
      white-space: nowrap;
    }

    .sign-up-btn-disable {
      padding: 24px 128px;
      width: 374px;
      height: 88px;
      border-radius: 44px;
      white-space: nowrap;
    }

    .canel-btn,
    .submit-btn {
      padding: 16px 40px;
      width: 192px;
      height: 72px;
      border-radius: 36px;
    }
    .canel-btn {
      position: relative;
      color: $u-type-primary;
      background-color: #fff;
      &::after {
        content: '';
        display: flex;
        align-items: center;
        width: 200%;
        height: 200%;
        border: 2px solid $u-type-primary;
        border-radius: 72px;
        box-sizing: border-box;
        pointer-events: none;
        transform-origin: 0 0;
      }
    }
    .submit-btn {
      color: #fff;
      background-color: $u-type-primary;
    }
    .end-btn {
      width: 670px;
      height: 88px;
      border-radius: 44px;
    }
  }
}
button[disabled] {
  color: #fff !important;
  background-color: #d3d4d5 !important;
}
button[disabled]::after {
  border-color: transparent;
}
</style>

<style >
.act-tabs >>> .u-tab-item + .u-tab-item {
  margin-left: 42px;
}
</style>