points.vue

<template>
  <view class="int">
    <view
      v-for="item in activityList"
      :key="item.id"
    class="contentBox"
    >
      <view class="int-content"  @click="toDetail(item.id)">
        <view class="int-content-left">
          <view class="content-tag">
            <view class="tag-text">{{ locale === 'zh' ? item.typeZh : item.typeEn }}</view>
          </view>
          <image
            class="content-image"
            :src="locale === 'zh' ? item.coverImageZh : item.coverImageEn"
          ></image>
        </view>
        <view class="int-content-right">
          <view class="content-title">{{ locale === 'zh' ? item.titleZh : item.titleEn }}</view>
          <view class="content-text">{{ locale === 'zh' ? item.descZh : item.descEn }}</view>
        </view>
      </view>
     <view v-if="item.type == 3||item.type == 4" class="btn"  @click="handleCopyBtn(item, $event)">
        {{ $lang.lang.integral.copy }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityList: []
    }
  },
  created() {
    this.getActivityList()
  },
  computed: {
    locale() {
      return this.$lang.locale
    }
  },
  methods: {
    getCopyText(item) {
      if (item.type == 3) {
        return `${this.locale === 'zh' ? item.extraRecommend.shareContentZh : item.extraRecommend.shareContentEn} ${item.recommendUrl} `
      } else if (item.type == 4) {
        return `${this.locale === 'zh' ? item.titleZh
          : item.titleEn} ${item.extraShare.activityUrl}?id=${item.id}&memberId=${this.$store.getters.id}&language=${this.locale}`
      }
    },
    handleCopyBtn(item ,e){
      this.$request
        .post('/app-api/member/score-rule/share-record/create', {  memberId: this.$store.getters.id,
        ruleId: item.id })
        .then(({ code, data }) => {
          if (code == 0) {
             const str =this.getCopyText(item)
              uni.setClipboardData({
                  data:str,
                  success:()=>{
                    uni.showToast({
                      title:this.$lang.lang.notices.copySuccess,
                      icon:"none",
                    })
                  }
                })
          //   uni.navigateTo({
          //   url: '/pages/activityShare/index?id=' + item.id + '&memberId=' + this.$store.getters.id+ '&language='+this.locale
          //  })
          }
        
        })


     
     
    },
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/activity_detail/activity_detail?id=' + id
      })
    },
    // 获取活动列表
    getActivityList() {
      this.$request
        .post('/app-api/member/score-rule/list', { platform: 2,memberId:this.$store.getters.id })
        .then(({ code, data }) => {
          // console.log(res)
          if (code == 0 && data) {
            this.activityList = data
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBox{
  position: relative;
  .btn{
    position: absolute;
    right: 14upx;
    bottom: 10upx;
    padding: 6upx 28upx;
    border-radius: 100px;
    font-size: 24upx;
    border: 1px solid #5382fe;
    color: #5382fe;
  }
}
.int {
  padding: 30upx 0;
  height: inherit;
  overflow-y: auto;
}
.int-content {
  margin-bottom: 20upx;
  width: 100%;
  height: 220upx;
  display: flex;
  padding: 0 30upx;
  box-sizing: border-box;
  border-bottom: 2upx solid #e7e7e7;
  &:last-child {
    margin-bottom: 0;
  }
}
.int-content-left {
  position: relative;
  width: 200upx;
  height: inherit;
  .content-image {
    width: 200upx;
    height: 200upx;
  }
}
.int-content-right {
  flex: 1;
  height: inherit;
  padding-left: 20upx;
  box-sizing: border-box;
  .content-title {
    font-size: 28upx;
    color: #333;
    margin-bottom: 20upx;
  }
  .content-text {
    font-size: 20upx;
    color: #666;
    line-height: 36upx;
  }
}
.content-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  font-size: 24upx;
  min-width: 120upx;
  height: 40upx;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: skewX(15deg);
  background-color: #ff4d4f;
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
.tag-text {
  transform: skewX(-15deg);
}
</style>