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

<template>
  <view>
    <view style="height: var(--status-bar-height);background-color: #e54841;"></view>
    <view class="bg">
      <image class="bg_img" mode="widthFix" src="/static/new_activity/detail.png"></image>
      <image @click="back" class="bg_back" src="/static/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 class="btn">
          <image v-if="show_a1" @click="changeA(show_a1)" class="btn_image" mode="widthFix" src="/static/new_activity/detail_btn1.png"></image>
          <image v-if="show_a2" @click="changeA(show_a2)" class="btn_image" mode="widthFix" src="/static/new_activity/detail_btn2.png"></image>
        </view>
      </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>
  </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/newActivity/subsidy/subsidy";
        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: #ffebc5;
}
.bg{
  position: relative;
  padding-bottom: 30rpx;
  .bg_img{
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg_back{
    height: 34rpx;
    width: 20rpx;
    position: absolute;
    top: 30rpx;
    left: 30rpx;
  }
  .b_body{
    position: absolute;
    width: 710rpx;
    margin-left: 21rpx;
    margin-right: 19rpx;
    height: auto;
    background-color: #fff;
    top: 652rpx;
    left: 0;
    border-radius: 0 0 60rpx 60rpx;
    padding: 28rpx;
    margin-bottom: 30rpx;
    .b_content{
      width: 100%;
      // height: 800rpx;
      // background-color: #eee;
    }
    .btn{
      padding-top: 30rpx;
      .btn_image{
        width: 100%;
      }
    }
  }
}

</style>