feat: 添加静态资源文件及基础组件
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
This commit is contained in:
432
pages/users/visit_list/index.vue
Normal file
432
pages/users/visit_list/index.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<!-- 浏览记录 -->
|
||||
<view>
|
||||
<view class="record" :style="colorStyle" v-if="visitList.length">
|
||||
<view class="w-full h-96 fixed-lt flex-between-center rd-b-24rpx bg--w111-fff fs-28 px-24 z-10">
|
||||
<view>共 <text class="SemiBold font-num">{{count}}</text> 件商品</view>
|
||||
<view v-if="!isShowChecked" @click="switchTap">管理</view>
|
||||
<view v-else @click="switchTap">取消</view>
|
||||
</view>
|
||||
<view class="h-96"></view>
|
||||
<view class="mt-20">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<view class="rd-24rpx bg--w111-fff mb-20" v-for="(item,index) in visitList" :key="index">
|
||||
<view class="pt-32 pr-24 pl-24 mb-24 fs-32 lh-44rpx fw-500">
|
||||
<text>{{item.time}}</text>
|
||||
</view>
|
||||
<checkbox-group @change="(e)=>{picCheckbox(e,index)}">
|
||||
<view class="px-24">
|
||||
<view class="grid-column-3 grid-gap-x-22rpx grid-gap-y-32rpx pb-32">
|
||||
<view class="w-full" v-for="(j,jindex) in item.picList" :key="jindex" @click.stop="goDetails(j)">
|
||||
<view class="relative">
|
||||
<easy-loadimage :image-src="j.image" width="220rpx" height="220rpx" borderRadius="16rpx"></easy-loadimage>
|
||||
<checkbox v-if="isShowChecked" :value="(j.id).toString()" :checked="j.checked"
|
||||
color="#ffffff" backgroundColor="#ffffff"
|
||||
activeBackgroundColor="var(--view-theme)" activeBorderColor="var(--view-theme)"
|
||||
class="checkbox" />
|
||||
<view class="masks flex-center" v-if="!isShowChecked && j.stock<=0">
|
||||
<view class="bg">
|
||||
<view>暂时</view>
|
||||
<view>售罄</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="masks flex-center" v-if="!isShowChecked && !j.is_show">
|
||||
<view class="bg">
|
||||
<view>暂时</view>
|
||||
<view>下架</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-20">
|
||||
<BaseMoney :money="j.product_price" symbolSize="24" integerSize="30" decimalSize="30" color="#333333"></BaseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
<view class='loadingicon flex-center'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pb-safe" v-if="isShowChecked">
|
||||
<view class="h-96"></view>
|
||||
</view>
|
||||
<view class="w-full fixed-lb pb-safe" v-if="isShowChecked">
|
||||
<view class="w-full px-32 h-96 bg--w111-fff flex-between-center" >
|
||||
<checkbox-group @change="checkboxAllChange">
|
||||
<checkbox value="all" :checked="isAllSelect"
|
||||
color="#ffffff" backgroundColor="#ffffff"
|
||||
activeBackgroundColor="var(--view-theme)" activeBorderColor="var(--view-theme)"/>
|
||||
<text class='checkAll'>全选</text>
|
||||
</checkbox-group>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="bnt flex-center" @click="collect">移至收藏</view>
|
||||
<view class="bnt on flex-center" @click="del">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='px-20 mt-20' v-else-if="!visitList.length">
|
||||
<emptyPage title="暂无记录，去看点别的吧～" src="/statics/images/noOrder.gif"></emptyPage>
|
||||
<recommend :hostProduct="hostProduct"></recommend>
|
||||
</view>
|
||||
<home></home>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getVisitList,
|
||||
getProductHot,
|
||||
deleteVisitList,
|
||||
collectAdd
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import recommend from '@/components/recommend';
|
||||
import BaseMoney from '@/components/BaseMoney.vue';
|
||||
import colors from '@/mixins/color.js';
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
recommend,
|
||||
BaseMoney,
|
||||
emptyPage
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
isShowChecked: 0,
|
||||
count: 0,
|
||||
times: [],
|
||||
isAllSelect: false,
|
||||
hostProduct: [],
|
||||
loadTitle: '加载更多',
|
||||
loading: false,
|
||||
loadend: false,
|
||||
visitList: [],
|
||||
limit: 21,
|
||||
page: 1,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
hotScroll: false,
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
isItemAll: [],
|
||||
imgHost: HTTP_REQUEST_URL
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
onLoad() {
|
||||
this.get_host_product();
|
||||
this.loadend = false;
|
||||
this.page = 1;
|
||||
this.visitList = [];
|
||||
if (this.isLogin) {
|
||||
this.get_user_visit_list();
|
||||
} else {
|
||||
toLogin()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.removeStorageSync('form_type_cart');
|
||||
this.times = [];
|
||||
this.loadend = false;
|
||||
this.page = 1;
|
||||
this.visitList = [];
|
||||
this.get_user_visit_list();
|
||||
},
|
||||
methods: {
|
||||
goDetails(item) {
|
||||
if (this.isShowChecked || !item.is_show) return false;
|
||||
uni.navigateTo({
|
||||
url: '/pages/goods_details/index?id=' + item.product_id
|
||||
})
|
||||
},
|
||||
switchTap() {
|
||||
this.isShowChecked = !this.isShowChecked;
|
||||
},
|
||||
collect() {
|
||||
let ids = [];
|
||||
this.visitList.forEach(item => {
|
||||
item.picList.forEach(j => {
|
||||
if (j.checked) {
|
||||
ids.push(j.product_id)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (!ids.length) {
|
||||
return this.$util.Tips({
|
||||
title: '请选择收藏商品'
|
||||
});
|
||||
}
|
||||
collectAdd(ids).then(res => {
|
||||
return this.$util.Tips({
|
||||
title: res.msg
|
||||
});
|
||||
})
|
||||
},
|
||||
del() {
|
||||
let ids = [];
|
||||
this.visitList.forEach(item => {
|
||||
item.picList.forEach(j => {
|
||||
if (j.checked) {
|
||||
ids.push(j.product_id)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (!ids.length) {
|
||||
return this.$util.Tips({
|
||||
title: '请选择删除商品'
|
||||
});
|
||||
}
|
||||
deleteVisitList({
|
||||
ids
|
||||
}).then(res => {
|
||||
this.times = [];
|
||||
this.loadend = false;
|
||||
this.page = 1;
|
||||
this.$set(this, 'visitList', []);
|
||||
this.get_user_visit_list();
|
||||
return this.$util.Tips({
|
||||
title: res.msg
|
||||
});
|
||||
}).catch(err=>{
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
picCheckbox(event, index) {
|
||||
let that = this,
|
||||
picTime = event.detail.value;
|
||||
that.visitList[index].picList.forEach(j => {
|
||||
if (picTime.indexOf(j.id + '') !== -1) {
|
||||
j.checked = true;
|
||||
} else {
|
||||
j.checked = false;
|
||||
}
|
||||
})
|
||||
if (that.visitList[index].picList.length == picTime.length) {
|
||||
that.visitList[index].checked = true;
|
||||
} else {
|
||||
that.visitList[index].checked = false;
|
||||
}
|
||||
let visitObj = [];
|
||||
that.visitList.forEach(item => {
|
||||
if (item.checked) {
|
||||
visitObj.push(item.time)
|
||||
} else {
|
||||
if (visitObj.indexOf(item.time) !== -1) {
|
||||
visitObj.remove(item.time);
|
||||
}
|
||||
}
|
||||
})
|
||||
if (visitObj.length == that.visitList.length) {
|
||||
that.isAllSelect = true;
|
||||
} else {
|
||||
that.isAllSelect = false;
|
||||
}
|
||||
},
|
||||
checkboxChange(event) {
|
||||
let that = this,
|
||||
timeList = event.detail.value;
|
||||
that.isItemAll = timeList;
|
||||
that.visitList.forEach((item, index) => {
|
||||
if (timeList.indexOf(item.time) !== -1) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
item.checked = false;
|
||||
}
|
||||
item.picList.forEach(j => {
|
||||
if (item.checked) {
|
||||
j.checked = true;
|
||||
} else {
|
||||
j.checked = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
if (timeList.length === that.visitList.length) {
|
||||
that.isAllSelect = true;
|
||||
} else {
|
||||
that.isAllSelect = false;
|
||||
}
|
||||
},
|
||||
forGoods(val) {
|
||||
let that = this;
|
||||
if (!that.visitList.length) return
|
||||
that.visitList.forEach((item) => {
|
||||
if (val) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
item.checked = false;
|
||||
}
|
||||
item.picList.forEach(j => {
|
||||
if (val) {
|
||||
j.checked = true;
|
||||
} else {
|
||||
j.checked = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
checkboxAllChange(event) {
|
||||
let value = event.detail.value;
|
||||
if (value.length) {
|
||||
this.isAllSelect = true;
|
||||
this.forGoods(1)
|
||||
} else {
|
||||
this.isAllSelect = false;
|
||||
this.forGoods(0)
|
||||
}
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
onLoadFun() {
|
||||
this.get_user_visit_list();
|
||||
this.isShowAuth = false
|
||||
},
|
||||
/**
|
||||
* 获取记录产品
|
||||
*/
|
||||
get_user_visit_list: function() {
|
||||
let that = this;
|
||||
if (this.loading) return;
|
||||
if (this.loadend) return;
|
||||
that.loading = true;
|
||||
that.loadTitle = "";
|
||||
getVisitList({
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
}).then(res => {
|
||||
this.count = res.data.count;
|
||||
// const groupedData = this.groupDataByTimeKey(res.data.time, res.data.list);
|
||||
// this.visitList = groupedData;
|
||||
for (let i = 0; i < res.data.time.length; i++) {
|
||||
if (this.times.indexOf(res.data.time[i]) == -1) {
|
||||
this.times.push(res.data.time[i])
|
||||
this.visitList.push({
|
||||
time: res.data.time[i],
|
||||
picList: []
|
||||
})
|
||||
}
|
||||
}
|
||||
for (let x = 0; x < this.times.length; x++) {
|
||||
this.visitList[x].checked = this.isAllSelect ? true : false;
|
||||
for (let j = 0; j < res.data.list.length; j++) {
|
||||
if (this.times[x] === res.data.list[j].time_key) {
|
||||
if (this.isAllSelect) {
|
||||
res.data.list[j].checked = true;
|
||||
} else {
|
||||
res.data.list[j].checked = false;
|
||||
}
|
||||
this.visitList[x].picList.push(res.data.list[j])
|
||||
}
|
||||
}
|
||||
}
|
||||
let loadend = res.data.list.length < that.limit;
|
||||
that.loadend = loadend;
|
||||
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||||
that.page = that.page + 1;
|
||||
that.loading = false;
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = "加载更多";
|
||||
});
|
||||
},
|
||||
groupDataByTimeKey(timeArray, listArray){
|
||||
return timeArray.map(timeKey => {
|
||||
// 筛选出对应时间的所有数据项
|
||||
const filteredList = listArray.filter(item => item.time_key === timeKey);
|
||||
return {
|
||||
checked: false,
|
||||
time: timeKey,
|
||||
picList: filteredList
|
||||
};
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return
|
||||
getProductHot({
|
||||
page:that.hotPage,
|
||||
limit:that.hotLimit,
|
||||
}).then(res => {
|
||||
that.hotPage++
|
||||
that.hotScroll = res.data.list.length < that.hotLimit
|
||||
that.hostProduct = that.hostProduct.concat(res.data.list)
|
||||
});
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.visitList.length) {
|
||||
this.get_user_visit_list();
|
||||
} else {
|
||||
this.get_host_product();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
border: 1px solid var(--view-theme) !important;
|
||||
background-color: var(--view-theme) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.bnt {
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 1rpx solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
transform: rotateZ(360deg);
|
||||
|
||||
&.on {
|
||||
margin-left: 20rpx;
|
||||
background-color: var(--view-theme);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.masks {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10rpx;
|
||||
|
||||
.bg {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
background: #000000;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
border-radius: 50%;
|
||||
padding: 22rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user