nk-shop2.0/pages/newActivity/activityDetail/activityDetail.vue

<template>
  <view>
    <view class="bg">
      <image class="bg_img" mode="widthFix"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/detail.webp"></image>
      <image @click="back" class="bg_back"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
      <view class="b_body">
        <view class="b_content">
          <view v-if="info.content" v-html="info.content.content"></view>
        </view>
      </view>
    </view>
    <view class="btn_box">
      <image v-if="show_a1" @click="changeA(show_a1)" class="btn_image" mode="widthFix"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/detail_btn1.webp"></image>
      <image v-if="show_a2" @click="changeA(show_a2)" class="btn_image" mode="widthFix"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/detail_btn2.webp"></image>
    </view>
    <u-modal :show="show" :closeOnClickOverlay="true" :title="`[${activity.title}]`"
      content="选择活动后只有完成活动任务后才可参加另一个活动, 确定要参与这个活动吗" cancelText="我再想想" confirmText="参加活动" confirmColor="#e54841"
      @cancel="show = false" @confirm="joinA()" showCancelButton></u-modal>
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
      :isGoIndex="false"></authorize>
  </view>
</template>

<script>
  import { consumption, chooseConsumption } from "@/api/activity.js"
  import { getArticleList } from "@/api/api.js"
  import { Toast } from "../../../libs/uniApi";
  import authorize from "@/components/Authorize.vue";
  import { getUserInfo } from '@/api/user.js';
  export default {
    components: {
      authorize
    },
    data() {
      return {
        info: {},
        userInfo: {},
        Alist: [],
        activity: {
          title: ''
        },
        show: false,
        isAuto: false, //没有授权的不会自动授权
        isShowAuth: false, //是否隐藏授权
        is_join_activity: 0, //是否已确认参加活动
      }
    },
    onLoad() {
      this.getArticleList();
      this.is_join_activity = uni.getStorageSync('is_join_activity');
    },
    onShow() {
      this.getUserInfo();
      this.consumption();
    },
    computed: {
      show_a1() { //显示活动一
        return this.Alist.find(item => item.title == '用户消费补贴活动')
      },
      show_a2() { //显示活动二
        return this.Alist.find(item => item.title == '用户推荐拉新活动')
      }
    },
    methods: {
      consumption() {
        consumption().then(res => {
          this.Alist = res.data;
        })
      },
      back() {
        uni.navigateBack()
      },
      changeA(item) {
        if (!this.userInfo.account) return this.openAuto();
        this.activity = item;
        if (this.is_join_activity) return this.joinA();
        this.show = true;
      },
      getArticleList() {
        getArticleList(25).then(res => {
          this.info = res.data.list[0]
        })
      },
      // 参加活动
      joinA() {
        chooseConsumption({
          coupon_id: this.activity.coupon_id,
          activity_id: 1, //活动默认传1即可
        }).then(res => {
          this.show = false;
          let url = '';
          if (this.activity.title == '用户消费补贴活动') url = "/pages/redpacket/redpack_type?type=1";
          if (this.activity.title == '用户推荐拉新活动') url = "/pages/newActivity/invitation/invitation";
          if (url) uni.navigateTo({
            url: url
          })
        }).catch(err => {
          this.show = false;
          this.$nextTick(() => {
            Toast('您正在参与活动，暂时不支持切换');
          })
        })
        uni.setStorageSync('is_join_activity', 1);
        this.is_join_activity = 1;
      },
      getUserInfo() {
        getUserInfo().then(res => {
          this.userInfo = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      // 授权回调
      onLoadFun(data) {
        this.getUserInfo();
        this.isShowAuth = false;
      },
      // 打开授权
      openAuto() {
        // console.log('hajhcdsohjcosvjco')
        this.isAuto = true;
        this.isShowAuth = true
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff5dd;
  }

  .bg {
    position: relative;
    padding-bottom: 300rpx;

    .bg_img {
      width: 750rpx;
      height: 652rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .bg_back {
      height: 34rpx;
      width: 20rpx;
      position: absolute;
      top: calc(var(--status-bar-height) + 30rpx);
      left: 30rpx;
    }

    .b_body {
      width: 710rpx;
      margin-left: 21rpx;
      margin-right: 19rpx;
      height: auto;
      background-color: #fff;
      border-radius: 0 0 60rpx 60rpx;
      padding: 28rpx;
      padding-top: 680rpx;
      margin-bottom: 30rpx;

      .b_content {
        width: 100%;
        // height: 800rpx;
        // background-color: #eee;
      }

    }

    
  }
  .btn_box {
    position: fixed;
    bottom: 30rpx;
    left: 50%;
    transform: translate(-50%);
    width: 710rpx;
    .btn_image {
      width: 100%;
    }
  }
</style>