需求点:
一句话概括 —— 为营造活动氛围,在主要页面添加订单成功提示,详情参考拼多多;
细分需求 ——
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</