jzmall_uni/pages/ucenter/footprint/footprint.vue

<template>
    <view class="container">
        <view class="no-footprint" v-if="footprintList.length <= 0">
            <view class="c">
                <text>没有浏览足迹</text>
            </view>
        </view>
        <view class="footprint" v-if="footprintList.length > 0">
            <view class="day-item" v-for="(item, index) in footprintList" :key="index">
                <view class="day-hd" v-if="item.length > 0">{{ item[0].addDate }}</view>

                <view class="day-list" v-if="item.length > 0">
                    <view
                        class="item"
                        :data-index="index"
                        :data-iindex="iindex"
                        @touchstart="touchStartFun"
                        @touchend="touchEndFun"
                        @tap="deleteItem"
                        v-for="(iitem, iindex) in item"
                        :key="iindex"
                    >
                        <image class="img" :src="iitem.picUrl"></image>

                        <view class="info">
                            <view class="name">{{ iitem.name }}</view>
                            <view class="subtitle">{{ iitem.brief }}</view>
                            <view class="price">￥{{ iitem.retailPrice }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            footprintList: [],
            page: 1,
            limit: 10,
            totalPages: 1,
            touchStart: '',
            touchEnd: '',
            iindex: 0,

            iitem: {
                picUrl: '',
                name: '',
                brief: '',
                retailPrice: ''
            }
        };
    },
    onLoad: function (options) {
        this.getFootprintList();
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getFootprintList();
        } else {
            uni.showToast({
                title: '没有更多用户足迹了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getFootprintList() {
            uni.showLoading({
                title: '加载中...'
            });
            let that = this;
            util.request(api.FootprintList, {
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    let f1 = that.footprintList;
                    let f2 = res.data.list;
                    for (let i = 0; i < f2.length; i++) {
                        f2[i].addDate = f2[i].addTime.substring(0, 10);
                        let last = f1.length - 1;
                        if (last >= 0 && f1[last][0].addDate === f2[i].addDate) {
                            f1[last].push(f2[i]);
                        } else {
                            let tmp = [];
                            tmp.push(f2[i]);
                            f1.push(tmp);
                        }
                    }
                    that.setData({
                        footprintList: f1,
                        totalPages: res.data.pages
                    });
                }
                uni.hideLoading();
            });
        },

        deleteItem(event) {
            let that = this;
            let index = event.currentTarget.dataset.index;
            let iindex = event.currentTarget.dataset.iindex;
            let footprintId = this.footprintList[index][iindex].id;
            let goodsId = this.footprintList[index][iindex].goodsId;
            var touchTime = that.touchEnd - that.touchStart;
            console.log(touchTime);
            //如果按下时间大于350为长按
            if (touchTime > 350) {
                uni.showModal({
                    title: '',
                    content: '要删除所选足迹？',
                    success: function (res) {
                        if (res.confirm) {
                            util.request(
                                api.FootprintDelete,
                                {
                                    id: footprintId
                                },
                                'POST'
                            ).then(function (res) {
                                if (res.errno === 0) {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'success',
                                        duration: 2000
                                    });
                                    that.footprintList[index].splice(iindex, 1);
                                    if (that.footprintList[index].length == 0) {
                                        that.footprintList.splice(index, 1);
                                    }
                                    that.setData({
                                        footprintList: that.footprintList
                                    });
                                }
                            });
                        }
                    }
                });
            } else {
                uni.navigateTo({
                    url: '/pages/goods/goods?id=' + goodsId
                });
            }
        },

        //按下事件开始
        touchStartFun: function (e) {
            let that = this;
            that.setData({
                touchStart: e.timeStamp
            });
            console.log(e.timeStamp + '- touchStart');
        },

        //按下事件结束
        touchEndFun: function (e) {
            let that = this;
            that.setData({
                touchEnd: e.timeStamp
            });
            console.log(e.timeStamp + '- touchEnd');
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
    min-height: 100%;
}

.container {
    background: #f4f4f4;
    min-height: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.no-footprint {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.no-footprint .c {
    width: 100%;
    height: auto;
    margin-top: 400rpx;
}

.no-footprint .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 29rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 29rpx;
    color: #999;
}

.footprint {
    height: auto;
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #e1e1e1;
}

.day-item {
    height: auto;
    overflow: hidden;
    width: 100%;
    margin-bottom: 20rpx;
}

.day-hd {
    height: 94rpx;
    width: 100%;
    line-height: 94rpx;
    background: #fff;
    padding-left: 30rpx;
    color: #333;
    font-size: 28rpx;
}

.day-list {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #fff;
    padding-left: 30rpx;
    border-top: 1px solid #e1e1e1;
}

.item {
    height: 212rpx;
    width: 720rpx;
    background: #fff;
    padding: 30rpx 30rpx 30rpx 0;
    border-bottom: 1px solid #e1e1e1;
}

.item:last-child {
    border-bottom: 1px solid #fff;
}

.item .img {
    float: left;
    width: 150rpx;
    height: 150rpx;
}

.item .info {
    float: right;
    width: 540rpx;
    height: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20rpx;
}

.item .info .name {
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;
}

.item .info .subtitle {
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #888;
    line-height: 40rpx;
}

.item .info .price {
    margin-top: 8rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;
}
</style>