jje_uniapp/myPages/myActivityDetail/myActivityDetail.vue

<template>
  <view class="page">

    <view class="flex-col content">
      <view class="out1">
        <view class="flex-col top">

          <view class="flex-row justify-between" style="width: 686rpx;">
            <view>
              <view class="flex-row title">
                <text>{{ activity.title }}</text>
              </view>
              <view class="flex-row price">
                <text>￥{{ activity.payAmount }}</text>
              </view>
            </view>
            <view v-if="activity.canShare" class="flex-col">
              <button open-type="share" type="primary" plain="true" size="mini" class="pic_r3">
                <text class="tit">分享活动</text>
                <uni-icons color="#18bc37" type="redo-filled" size="14"></uni-icons>
              </button>
            </view>

          </view>

          <view class="flex-row justify-start">
            <view class="activityKey ">
              <text>购买时间：</text>
            </view>
            <view>
              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至 {{ activity.validEndTime.substring(0, 10) }}
              </text>
              <text v-else>长期有效</text>
            </view>
          </view>
          <view class="flex-row justify-start">
            <view class="activityKey">
              <text>活动门店：</text>
            </view>
            <view class="activityValue">
              <text>{{ activity.useStoreDesc }}</text>
            </view>
          </view>
          <view class="flex-row">
            <view class="activityKey">
              <text>活动描述：</text>
            </view>
            <view class="activityValue">
              <text>{{ activity.description }}</text>
            </view>

          </view>
        </view>

      </view>

      <view class="out2" v-if="activity.couponList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送优惠券</text>
          </view>
          <view v-for="(item,index) in activity.couponList">
            <view class="flex-row ticketList">
              <view class="row-list flex-row justify-start">
                <view class="h-text flex-col justify-center ">
                  <view class="money">
                    <text class="money" v-if="item.discountsType == 2">{{ item.discount }}折</text>
                    <text class="money" v-else>{{ `减` + item.discountsPrice }}</text>
                  </view>
                  <view class="desc">
                    <text>满{{ item.reachPrice }}可用</text>
                  </view>
                </view>
                <view class="h-center-content flex-col justify-around">
                  <view class="h-value">
                    <text>{{ item.name }}</text>
                  </view>
                  <view class="itemTitle">
                    使用次数：{{ item.degree }}
                  </view>
                  <view class="itemTitle">
                    <text v-if="item.validType == 1">领取后{{ item.effectiveDays }}天内有效</text>
                    <view v-else>
                      <view>使用期限：{{ item.startTime.substring(0, 10) }}</view>
                      <view> 至 {{ item.endTime.substring(0, 10) }}</view>
                    </view>
                  </view>
                  <view class="itemTitle flex-row">
                    <text @click.stop="showRemark(item)">使用规则</text>
                    <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
                    <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
              <view>
                可用门店:
                <text>{{ item.useStoreDesc }}</text>
              </view>
              <view>
                适用项目:
                <text>{{ item.useServiceDesc }}</text>
              </view>
              <view v-if="item.remark !=null">
                使用说明:
                <text>{{ item.remark }}</text>
              </view>
              <text v-else class="remarkText">该优惠券暂无使用说明</text>
            </view>
          </view>
        </view>
      </view>
      <view class="out2" v-if="activity.equityList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送权益卡</text>
          </view>
          <view v-for="(i,index) in activity.equityList">
            <view class="flex-row ticketList">
              <view class="h-text flex-col justify-center ">
                <text class="money">{{ i.faceValue }}</text>
                <text class="desc">权益价</text>
              </view>
              <view class="h-center-content flex-col justify-around">
                <view class="h-value">
                  <text>{{ i.title }}</text>
                </view>
                <view class="ticketMsg">
                  领取后{{ i.effectiveDays }}天内有效
                </view>
                <view class="itemTitle flex-row">
                  <text @click.stop="showRemark(i)">使用规则</text>
                  <u-icon v-if="i.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
                  <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
                </view>
              </view>
            </view>
            <view v-if="showRemarkId == i.id" class="remark" style="text-indent:unset">
              <view>
                可用门店:
                <text>{{ i.useStoreDesc }}</text>
              </view>
              <view v-if="i.description !=null">
                使用说明:
                <text>{{ i.description }}</text>
              </view>
              <text v-else class="remarkText">该权益卡暂无使用说明</text>
            </view>
          </view>
        </view>
      </view>
      <view class="out2" v-if="activity.rechargeList">
        <view class="flex-col ticket">
          <view class="flex-row justify-center title">
            <text>赠送储值卡</text>
          </view>

          <view class="flex-row ticketList" v-for="(i,index) in activity.rechargeList">
            <view class="h-text flex-col justify-center ">
              <text class="money">{{ i.reachPrice }}</text>
              <text class="desc">储值额度</text>
            </view>

            <view class="h-center-content flex-col justify-around">
              <view class="h-value">
                <text>{{ i.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      userInfo: {},
      activityOrderId: '',
      activity: {},
      facePhotoUrl: '',
      showRemarkId:''
    }
  },
  computed: {
    isShareAgain() {
      return false;
    }
  },
  onLoad(e) {
    console.log(e)
    this.userInfo = uni.getStorageSync('userInfo')
    this.activityOrderId = e.activityOrderId
    this.myActivityDetail()
  },
  onShareAppMessage(e) {
    //禁止二次转发--
    uni.showShareMenu({
      withShareTicket: this.isShareAgain
    });
    wx.updateShareMenu({
      isPrivateMessage: this.isShareAgain,
      withShareTicket: this.isShareAgain,
      success(res) {
        console.log('updateShareMenu: ', res);
      },
      fail() {
      }
    }); //禁止二次转发--end
    console.log(this.activity)
    let shareActivityId = ''
    if (this.activity.shareActivityId){
       shareActivityId = this.activity.shareActivityId //分享的活动id
    }else {
      shareActivityId = this.activity.activityId //如果没有分享的活动id，则去原活动id
    }
    let inviteActivityId = this.activity.activityId  //邀请活动id

    let shareobj = {
      title: this.activity.shareContext, //分享的标题
      path: '/orderPages/activityDetail/activityDetail?activityId=' + shareActivityId + '&inviteActivityId=' + inviteActivityId + '&inviteUserId=' + this.userInfo.id + '&inviteOrderId=' + this.activity.orderId, //好友点击分享之后跳转的页面
      //imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
      imageUrl: this.facePhotoUrl, //内容图片
    }
    return shareobj //一定要返回对象
  },
  methods: {
    showRemark(item) {
      if (this.showRemarkId == item.id) {
        this.showRemarkId = ''

      } else {
        this.showRemarkId = item.id

      }
    },
    // 获取图片
    getImgUrlByBannerOssId(items) {
      this.$api.getImgUrlByOssId({ossId: items}).then(res => {
        this.facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
      })
    },
    myActivityDetail() {
      this.$api.myActivityDetail({
        activityOrderId: this.activityOrderId,
      }).then(res => {
        console.log(res)
        this.activity = res.data.data
        this.$set(this.activity)
        if(res.data.data.sharePicture){
          this.getImgUrlByBannerOssId(res.data.data.sharePicture)
        }
      })
    },

  }
}
</script>


<style lang="scss" scoped>
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>