index.vue

<!-- 文字上下滚动 -->
<template>
  <div
    class="marquee-wrap"
    v-if="targetShow"
    :style="{'top':(datas.componentData.yPosition * 16) +'px'}"
  >
    <div class="marquee_box">
      <div class="evaluate" :class="animate?'animation_in':'animation_out'">
        <img :src="selectImg" alt />
        <span>{{subName}}刚刚购买了一单</span>
      </div>
    </div>
  </div>
</template>

<script>
import { DFSImg} from '../../../utils/index.js'
let api;

const app = getApp()
export default {
  name: "shop-popup",
  props: {
    render: {
      type: Boolean,
      default: false
    },
    datas: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      targetShow: false,
      selectIndex: 0,
      animate: true,
      selectImg: "",
      selectname: "小工蚁",
      marqueeList: [],
      setTime1: null,
      setTime2: null,
      subName : ''
    };
  },
  created() {},
  mounted() {
      this.init()
  },
  watch : {
    // 'datas.componentData._tempData' : function(newVal){
    //   this.marqueeList = newVal;
    //   this.targetShow = true;
    //   this.play()
    // }
    
  },
  methods: {
    init() {


        clearTimeout(this.setTime1);
        clearTimeout(this.setTime2);
        try {
          // api = require("~/api/orderinfo").default;
          this.ordercustomerinfo();
        } catch (error) {}
    //   if (this.render) {
    //     clearTimeout(this.setTime1);
    //     clearTimeout(this.setTime2);
    //     try {
    //       // api = require("~/api/orderinfo").default;
    //       this.ordercustomerinfo();
    //     } catch (error) {}
    //   } else {
    //     this.targetShow = true;
    //   }
    },
    subName() {
      if (this.selectname.length > 1) {
        return `${this.selectname.substr(0, 1)}****${this.selectname.charAt(
          this.selectname.length - 1
        )}`;
      } else if (this.selectname.length == 1) {
        return `${this.selectname.substr(0, 1)}****`;
      } else {
        return `****`;
      }
    },
    ordercustomerinfo() {
      app.orderApi.ordercustomerinfo({
          page: 1,
          rows: 100
        })
        .then(res => {
          if (res.data.code == 200 && res.data.data.length > 0) {
            this.targetShow = true;
            this.marqueeList = res.data.data;
            this.play();
          }
        });
    },
    play() {
      //赋值
      this.selectname = this.marqueeList[this.selectIndex].customerNickname;
      this.selectImg = this.marqueeList[this.selectIndex].customerHeadImage;

      this.selectImg = DFSImg(this.selectImg,300,300)

        if (this.selectname.length > 1) {
        this.subName =  `${this.selectname.substr(0, 1)}****${this.selectname.charAt(
          this.selectname.length - 1
        )}`;
      } else if (this.selectname.length == 1) {
        this.subName = `${this.selectname.substr(0, 1)}****`;
      } else {
        this.subName = `****`;
      }
    
      this.animate = true;
      clearTimeout(this.setTime1);
      clearTimeout(this.setTime2);
      this.setTime1 = setTimeout(() => {
        this.animate = false;
        this.setTime2 = setTimeout(() => {
          this.selectImg = "";

          //递增
          this.selectIndex++;
          if (this.selectIndex >= this.marqueeList.length) {
            this.selectIndex = 0;
          }
          this.play();
        }, 2000);
      }, 5000);
    }
  },
  deactivated() {
    clearTimeout(this.setTime1);
    clearTimeout(this.setTime2);
  }
};
</script>
<style scoped lang="scss">
.marquee-wrap {
  font-size: 16px;
  width: 100%;
  align-items: center;
  color: #3a3a3a;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  left: 0px;
  z-index: 1999;
}
.marquee_box {
  display: block;
  position: relative;
  // height: 30px;
  .evaluate {
    height: 23px;
    line-height: 23px;
    font-size: 14px;
    padding: 0 3px;
    text-decoration: none;
    list-style: none;
    background: rgba(0, 0, 0, 0.3);
    margin-left: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 23px;
    img {
      width: 17px;
      height: 17px;
      margin-right: 5px;
      border-radius: 50%;
    }

    opacity: 0;
  }
  .animation_in {
    opacity: 1;
    animation: warn 2s ease;
  }
  .animation_out {
    opacity: 0;
    animation: warn_out 1s ease;
  }
}

@keyframes warn {
  0% {
    opacity: 0;
    margin-top: 30px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}
@keyframes warn_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>