<!-- 文字上下滚动 --> <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>