vue实现订单气泡提示

需求点:

一句话概括 —— 为营造活动氛围,在主要页面添加订单成功提示,详情参考拼多多;

细分需求 ——

          1. 在首页,商情页,购物车,搜索页和列表页等只要页面添加气氛提醒;
          2. 请求接口拿到对应当前时段的用户下单数据,根据接口记录下次接口的请求参数;
          3. 数据在每个页面均连续展示,一个接口最多五十条数据;
          4. 页面滞留时间超出全部数据弹出完毕也不发送接口,到其他页面之后(或者刷新页面)发送请求;
          5. 添加气泡出现动画.

思路细分 ——

          1.气泡的展示是连续且多页面的,所以制作成组件;
          2.接口数据返回的是多条,但是每一条数据是独立存在的;
          3.需要记录接口返回的数据,当前进行到第几条;
          4.动画需求.

代码展示

<template>
	<div class="bubbleTips">		
		<!-- <transition name="fade" mode="out-in"> -->
			<div :class="['order_info','item'+item.payTime+Math.floor(Math.random()*100)]" v-for="item in currentArr" :key="item.payTime+Math.floor(Math.random()*100)">
				<img class="user_img" :src="item.headimgurl!='' ? item.headimgurl:'https://oss-image.dfs168.com/market/315/normal.png'"
				 alt="" />
				<p v-if="item.text!=''" class="copy_writing">{
   {
   item.text}}</p>
				<p v-if="item.text==''" class="nickname">{
   {
   item.nickname==""?'****':item.nickname}}</p>
				<p class="copy_writing" v-if="item.text==''&&item.goods_name==''">{
   {
   item.payDate}}订单支付成功</p>
				<p class="copy_writing" v-if="item.text==''&&item.goods_name!=''">{
   {
   item.payDate}}购买了{
   {
   item.goods_name|cutOutStr}}</p>
			</div>
		<!-- </transition> -->
	</div>
</template>
<script>
	import Api from "@/api/server";
	export default {
   
		props: {
   
			discharge: {
   
				type: Boolean,
				default: false
			}
		},
		data() {
   
			return</