优化我的足迹部分代码
ran
parent
6f60cc6afb
commit
a9046aded4
|
|
@ -1,342 +1,269 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="myTracks">
|
<view class="myTracks">
|
||||||
<u-navbar title="我的足迹">
|
<u-navbar title="我的足迹">
|
||||||
<div @click="changeRightBtn" slot="right" style="margin-right:32rpx">
|
|
||||||
{{edit}}
|
|
||||||
</div>
|
|
||||||
</u-navbar>
|
|
||||||
<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
|
|
||||||
<div v-else>
|
|
||||||
<view v-for="(item, index) in trackList" :key="index">
|
|
||||||
<view class="myTracks-title" @click="navgaiteToStore(item)">{{item.storeName}}</view>
|
|
||||||
<view class="myTracks-items">
|
|
||||||
<view class="myTracks-item">
|
|
||||||
<u-checkbox-group>
|
|
||||||
<u-checkbox v-model="item.___isDel" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx"
|
|
||||||
@change="changeChecked(item)"></u-checkbox>
|
|
||||||
</u-checkbox-group>
|
|
||||||
<view class="myTracks-item-img" @click.stop="navgaiteToDetail(item)">
|
|
||||||
<image :src="item.thumbnail"></image>
|
|
||||||
</view>
|
|
||||||
<view class="myTracks-item-content" @click.stop="navgaiteToDetail(item)">
|
|
||||||
<view class="myTracks-item-title">
|
|
||||||
{{ item.goodsName }}
|
|
||||||
<view class="myTracks-item-title-desc"> </view>
|
|
||||||
</view>
|
|
||||||
<view class="myTracks-item-price">
|
|
||||||
￥{{ item.price | unitPrice }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="myTracks-divider"></view>
|
|
||||||
|
|
||||||
</view>
|
</u-navbar>
|
||||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
|
||||||
</div>
|
<div v-else>
|
||||||
<view v-if="editFlag">
|
|
||||||
<view class="myTracks-action">
|
|
||||||
<view class="myTracks-action-check">
|
|
||||||
<u-checkbox-group>
|
|
||||||
<u-checkbox v-model="allChecked" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx"
|
|
||||||
@change="checkedAllitem"></u-checkbox>
|
|
||||||
全选
|
|
||||||
</u-checkbox-group>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view>
|
|
||||||
<u-button type="warning" @click="delAllTracks" class="myTracks-action-btn">
|
|
||||||
删除
|
<view v-for="(item, index) in trackList" :key="index">
|
||||||
</u-button>
|
<view class="myTracks-title" @click="navgaiteToStore(item)">{{item.storeName}}</view>
|
||||||
</view>
|
<view class="myTracks-items">
|
||||||
</view>
|
|
||||||
</view>
|
<u-swipe-action style="width: 100%;" :show="item.show" :index="index" :key="item.id" @click="delTracks"
|
||||||
</view>
|
@open="open" :options="options">
|
||||||
|
<view class="myTracks-item">
|
||||||
|
<view class="myTracks-item-img" @click.stop="navgaiteToDetail(item)">
|
||||||
|
<image :src="item.thumbnail"></image>
|
||||||
|
</view>
|
||||||
|
<view class="myTracks-item-content" @click.stop="navgaiteToDetail(item)">
|
||||||
|
<view class="myTracks-item-title">
|
||||||
|
{{ item.goodsName }}
|
||||||
|
<view class="myTracks-item-title-desc"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="myTracks-item-price">
|
||||||
|
￥{{ item.price | unitPrice }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-swipe-action>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="myTracks-divider"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { myTrackList, deleteHistoryListId } from "@/api/members.js";
|
import {
|
||||||
|
myTrackList,
|
||||||
|
deleteHistoryListId
|
||||||
|
} from "@/api/members.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
edit: "编辑",
|
loadStatus: "more", //底部下拉加载状态
|
||||||
editFlag: false, //是否编辑
|
whetherEmpty: false, //是否数据为空
|
||||||
allChecked: false, //是否全选
|
params: {
|
||||||
loadStatus: "more", //底部下拉加载状态
|
pageNumber: 1,
|
||||||
whetherEmpty: false, //是否数据为空
|
pageSize: 10,
|
||||||
params: {
|
order: "desc",
|
||||||
pageNumber: 1,
|
sort: "updateTime",
|
||||||
pageSize: 10,
|
},
|
||||||
order: "desc",
|
options: [
|
||||||
sort: "updateTime",
|
{
|
||||||
},
|
text: '删除',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#dd524d'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
trackList: [], //足迹列表
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
trackList: [], //足迹列表
|
/**
|
||||||
};
|
* 滑到底部加载下一页数据
|
||||||
},
|
*/
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.loadStatus != "noMore") {
|
||||||
|
this.params.pageNumber++;
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.trackList = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 导航到店铺
|
||||||
|
*/
|
||||||
|
navgaiteToStore(val) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/product/shopPage?id=" + val.storeId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
open(index) {
|
||||||
|
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
||||||
|
// 原本为'false'，再次设置为'false'会无效
|
||||||
|
this.trackList[index].show = true;
|
||||||
|
this.trackList.map((val, idx) => {
|
||||||
|
if (index != idx) this.trackList[idx].show = false;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 跳转详情
|
||||||
|
*/
|
||||||
|
navgaiteToDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/product/goods?id=" + item.id + "&goodsId=" + item.goodsId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 滑到底部加载下一页数据
|
* 获取我的足迹列表
|
||||||
*/
|
*/
|
||||||
onReachBottom() {
|
getList() {
|
||||||
if (this.loadStatus != "noMore") {
|
uni.showLoading({
|
||||||
this.params.pageNumber++;
|
title: "加载中",
|
||||||
this.getList();
|
});
|
||||||
}
|
myTrackList(this.params).then((res) => {
|
||||||
},
|
uni.stopPullDownRefresh();
|
||||||
onLoad() {
|
uni.hideLoading();
|
||||||
this.getList();
|
if (res.statusCode == 200) {
|
||||||
},
|
res.data.result &&
|
||||||
onPullDownRefresh() {
|
res.data.result.forEach((item) => {
|
||||||
this.trackList = [];
|
item.show = false;
|
||||||
this.getList();
|
});
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 导航到店铺
|
|
||||||
*/
|
|
||||||
navgaiteToStore(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/product/shopPage?id=" + val.storeId,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
let data = res.data.result;
|
||||||
* 设置右侧导航栏文本
|
if (data.total == 0) {
|
||||||
*/
|
this.whetherEmpty = true;
|
||||||
setStyle(text) {
|
} else if (data.total < 10) {
|
||||||
//导航按钮文本设置
|
this.loadStatus = "noMore";
|
||||||
let pages = getCurrentPages();
|
this.trackList.push(...data);
|
||||||
let page = pages[pages.length - 1];
|
} else {
|
||||||
// #ifdef APP-PLUS
|
this.trackList.push(...data);
|
||||||
let currentWebview = page.$getAppWebview();
|
if (data.length < 10) this.loadStatus = "noMore";
|
||||||
let titleNView = currentWebview.getStyle().titleNView;
|
}
|
||||||
titleNView.buttons[0].text = text;
|
}
|
||||||
if (text == "完成") {
|
});
|
||||||
this.trackList.forEach((key) => {
|
},
|
||||||
key.history.forEach((item) => {
|
|
||||||
this.$set(item, "___isDel", false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
currentWebview.setStyle({
|
|
||||||
titleNView: titleNView,
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
// h5 临时方案
|
|
||||||
document.getElementsByClassName("uni-btn-icon")[1].innerText = text;
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 跳转详情
|
|
||||||
*/
|
|
||||||
navgaiteToDetail(item) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/product/goods?id=" + item.id + "&goodsId=" + item.goodsId,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取我的足迹列表
|
* 删除足迹
|
||||||
*/
|
*/
|
||||||
getList() {
|
delTracks(index) {
|
||||||
uni.showLoading({
|
deleteHistoryListId(this.trackList[index].goodsId).then((res) => {
|
||||||
title: "加载中",
|
if (res.data.code == 200) {
|
||||||
});
|
this.trackList = [];
|
||||||
myTrackList(this.params).then((res) => {
|
this.getList();
|
||||||
uni.stopPullDownRefresh();
|
} else {
|
||||||
uni.hideLoading();
|
uni.showToast({
|
||||||
if (res.statusCode == 200) {
|
title: res.data.message,
|
||||||
res.data.result &&
|
duration: 2000,
|
||||||
res.data.result.forEach((item) => {
|
icon: "none",
|
||||||
item.___isDel = false;
|
});
|
||||||
});
|
}
|
||||||
|
});
|
||||||
let data = res.data.result;
|
},
|
||||||
if (data.total == 0) {
|
},
|
||||||
this.whetherEmpty = true;
|
};
|
||||||
} else if (data.total < 10) {
|
|
||||||
this.loadStatus = "noMore";
|
|
||||||
this.trackList.push(...data);
|
|
||||||
} else {
|
|
||||||
this.trackList.push(...data);
|
|
||||||
if (data.length < 10) this.loadStatus = "noMore";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 点击后判断是不是全选
|
|
||||||
*/
|
|
||||||
|
|
||||||
changeChecked(val) {
|
|
||||||
var opt = null;
|
|
||||||
const isCheckedAll = this.trackList.every((key) => {
|
|
||||||
key.___isDel == val.___isDel;
|
|
||||||
opt = key.___isDel;
|
|
||||||
return opt;
|
|
||||||
});
|
|
||||||
if(opt){
|
|
||||||
this.allChecked = isCheckedAll;
|
|
||||||
}else{
|
|
||||||
this.allChecked = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 右侧标签栏切换
|
|
||||||
*/
|
|
||||||
changeRightBtn(e) {
|
|
||||||
if (!this.editFlag) {
|
|
||||||
this.edit = "完成";
|
|
||||||
} else {
|
|
||||||
this.edit = "编辑";
|
|
||||||
}
|
|
||||||
this.editFlag = !this.editFlag;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 点击全选按钮
|
|
||||||
*/
|
|
||||||
checkedAllitem() {
|
|
||||||
//全选按钮
|
|
||||||
this.trackList.forEach((key) => {
|
|
||||||
this.$set(key, "___isDel", this.allChecked);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除足迹
|
|
||||||
*/
|
|
||||||
delAllTracks() {
|
|
||||||
let way = [];
|
|
||||||
this.trackList.forEach((key) => {
|
|
||||||
if (key.___isDel) {
|
|
||||||
way.push(key.goodsId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (way.length == 0) return false;
|
|
||||||
deleteHistoryListId(way).then((res) => {
|
|
||||||
if (res.data.code == 200) {
|
|
||||||
this.trackList = [];
|
|
||||||
this.allChecked = false;
|
|
||||||
this.getList();
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: res.data.message,
|
|
||||||
duration: 2000,
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.myTracks {
|
.myTracks {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 2rpx;
|
padding-top: 2rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-title {
|
.myTracks-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 110rpx;
|
height: 110rpx;
|
||||||
padding-left: 20rpx;
|
padding-left: 20rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-items {
|
.myTracks-items {
|
||||||
padding-top: 2rpx;
|
padding-top: 2rpx;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-item {
|
.myTracks-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 226rpx;
|
height: 226rpx;
|
||||||
padding-left: 20rpx;
|
padding-left: 20rpx;
|
||||||
padding-right: 20rpx;
|
padding-right: 20rpx;
|
||||||
margin-bottom: 2rpx;
|
margin-bottom: 2rpx;
|
||||||
// border-radius: 6/@px;
|
// border-radius: 6/@px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-item-img {
|
.myTracks-item-img {
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
image {
|
|
||||||
width: 130rpx;
|
|
||||||
height: 130rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.myTracks-item-title {
|
image {
|
||||||
font-size: 28rpx;
|
width: 130rpx;
|
||||||
color: #333;
|
height: 130rpx;
|
||||||
}
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.myTracks-item-title-desc {
|
.myTracks-item-title {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-item-price {
|
.myTracks-item-title-desc {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: $light-color;
|
color: #999;
|
||||||
padding: 10rpx 0 0 0;
|
}
|
||||||
}
|
|
||||||
.myTracks-action{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
height: 75rpx;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.myTracks-action-btn {
|
.myTracks-item-price {
|
||||||
width: 130rpx;
|
font-size: 28rpx;
|
||||||
height: 60rpx;
|
color: $light-color;
|
||||||
line-height: 60rpx;
|
padding: 10rpx 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.myTracks-divider {
|
.myTracks-action {
|
||||||
width: 100%;
|
display: flex;
|
||||||
height: 20rpx;
|
justify-content: space-between;
|
||||||
}
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
height: 75rpx;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myTracks-action-btn {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myTracks-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.myTracks-action-check {
|
.myTracks-action-check {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue