分享微信朋友实现
Step1
onShareAppMessage(res) {
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '自定义分享标题',
path: 'pages/index/index'
}
},
Step2
<button open-type="share">分享</button>
分类
category.vue
<template>
<view class="content">
<scroll-view scroll-y class="left-aside">
<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
{{item.name}}
</view>
</scroll-view>
<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
<text class="s-item">{{item.name}}</text>
<view class="t-list">
<view @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.id">
<image :src="titem.picture"></image>
<text>{{titem.name}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
sizeCalcState: false,
tabScrollTop: 0,
currentId: 1,
flist: [],
slist: [],
tlist: [],
}
},
onLoad(){
this.loadData();
},
methods: {
async loadData(){
// let list = await this.$api.json('cateList');
uni.request({
url: 'http://localhost:9081/mixmall/product/showCategory', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
// dataType:"jsonp",
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res);
let list = res.data.body;
console.log("********** ***********");
console.log(list);
uni.setStorage({//缓存用户登陆状态
key: 'cateList',
data: list
})
list.forEach(item=>{
if(!item.pid){
console.log("********1级分类** ***********");
console.log(item);
this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
}else if(!item.picture){
console.log("********2级分类** ***********");
console.log(item);
this.slist.push(item); //没有图的是2级分类
}else{
console.log("********3级分类** ***********");
console.log(item);
this.tlist.push(item); //3级分类
}
})
}
});
},
//一级分类点击
tabtap(item){
if(!this.sizeCalcState){
this.calcSize();
}
this.currentId = item.id;
let index = this.slist.findIndex(sitem=>sitem.pid === item.id);
this.tabScrollTop = this.slist[index].top;
},
//右侧栏滚动
asideScroll(e){
if(!this.sizeCalcState){
this.calcSize();
}
let scrollTop = e.detail.scrollTop;
let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
if(tabs.length > 0){
this.currentId = tabs[0].pid;
}
},
//计算右侧栏每个tab的高度等信息
calcSize(){
let h = 0;
this.slist.forEach(item=>{
let view = uni.createSelectorQuery().select("#main-" + item.id);
view.fields({
size: true
}, data => {
item.top = h;
h += data.height;
item.bottom = h;
}).exec();
})
this.sizeCalcState = true;
},
navToList(sid, tid){
uni.navigateTo({
url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
})
}
}
}
</script>
<style lang='scss'>
page,
.content {
height: 100%;
background-color: #f8f8f8;
}
.content {
display: flex;
}
.left-aside {
flex-shrink: 0;
width: 200upx;
height: 100%;
background-color: #fff;
}
.f-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100upx;
font-size: 28upx;
color: $font-color-base;
position: relative;
&.active{
color: $base-color;
background: #f8f8f8;
&:before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 36upx;
width: 8upx;
background-color: $base-color;
border-radius: 0 4px 4px 0;
opacity: .8;
}
}
}
.right-aside{
flex: 1;
overflow: hidden;
padding-left: 20upx;
}
.s-item{
display: flex;
align-items: center;
height: 70upx;
padding-top: 8upx;
font-size: 28upx;
color: $font-color-dark;
}
.t-list{
display: flex;
flex-wrap: wrap;
width: 100%;
background: #fff;
padding-top: 12upx;
&:after{
content: '';
flex: 99;
height: 0;
}
}
.t-item{
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 176upx;
font-size: 26upx;
color: #666;
padding-bottom: 20upx;
image{
width: 140upx;
height: 140upx;
}
}
</style>
产品列表
list.vue
<template>
<view class="content">
<view class="navbar" :style="{position:headerPosition,top:headerTop}">
<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
综合排序
</view>
<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
销量优先
</view>
<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
<text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view
v-for="(item, index) in goodsList" :key="index"
class="goods-item"
@click="navToDetailPage(item)"
>
<view class="image-wrapper">
<image :src="item.image" mode="aspectFill"></image>
</view>
<text class="title clamp">{{item.title}}</text>
<view class="price-box">
<text class="price">{{item.price}}</text>
<text>已售 {{item.sales}}</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{item.name}}</view>
<view
v-for="tItem in item.child" :key="tItem.id"
class="cate-item b-b"
:class="{active: tItem.id==cateId}"
@click="changeCate(tItem)">
{{tItem.name}}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition:"fixed",
headerTop:"0px",
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options){
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
// #endif
this.cateId = options.tid;
this.loadCateList(options.fid,options.sid);
this.loadData();
},
onPageScroll(e){
//兼容iOS端下拉时顶部漂移
if(e.scrollTop>=0){
this.headerPosition = "fixed";
}else{
this.headerPosition = "absolute";
}
},
//下拉刷新
onPullDownRefresh(){
this.loadData('refresh');
},
//加载更多
onReachBottom(){
this.loadData();
},
methods: {
//加载分类
async loadCateList(fid, sid){
// let list = await this.$api.json('cateList');
uni.getStorage({
key: 'cateList',
success: (res) => {
console.log("********cateList**********")
console.log(res)
let list = res.data;
let cateList = list.filter(item=>item.pid == fid);
cateList.forEach(item=>{
let tempList = list.filter(val=>val.pid == item.id);
item.child = tempList;
})
this.cateList = cateList;
}
});
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type='add', loading) {
//没有更多直接返回
if(type === 'add'){
if(this.loadingType === 'nomore'){
return;
}
this.loadingType = 'loading';
}else{
this.loadingType = 'more'
}
// let goodsList = await this.$api.json('goodsList');
uni.request({
url: 'http://localhost:9081/mixmall/product/showProduct/'+this.cateId,
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
let goodsList = res.data.body;
if(type === 'refresh'){
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if(this.filterIndex === 1){
goodsList.sort((a,b)=>b.sales - a.sales)
}
if(this.filterIndex === 2){
goodsList.sort((a,b)=>{
if(this.priceOrder == 1){
return a.price - b.price;
}
return b.price - a.price;
})
}
this.goodsList = this.goodsList.concat(goodsList);
}
});
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > 20 ? 'nomore' : 'more';
if(type === 'refresh'){
if(loading == 1){
uni.hideLoading()
}else{
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index){
if(this.filterIndex === index && index !== 2){
return;
}
this.filterIndex = index;
if(index === 2){
this.priceOrder = this.priceOrder === 1 ? 2: 1;
}else{
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
})
this.loadData('refresh', 1);
uni.showLoading({
title: '正在加载'
})
},
//显示分类面板
toggleCateMask(type){
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(()=>{
this.cateMaskState = state;
}, timer)
},
//分类点击
changeCate(item){
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
})
this.loadData('refresh', 1);
uni.showLoading({
title: '正在加载'
})
},
//详情
navToDetailPage(item){
//测试数据没有写id，用title代替
let id = item.title;
uni.navigateTo({
url: `/pages/product/product?id=${id}`
})
},
stopPrevent(){}
},
}
</script>
<style lang="scss">
page, .content{
background: $page-color-base;
}
.content{
padding-top: 96upx;
}
.navbar{
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
z-index: 10;
.nav-item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current{
color: $base-color;
&:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box{
display: flex;
flex-direction: column;
.yticon{
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active{
color: $base-color;
}
}
.xia{
transform: scaleY(-1);
}
}
.cate-item{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask{
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0,0,0,0);
z-index: 95;
transition: .3s;
.cate-content{
width: 630upx;
height: 100%;
background: #fff;
float:right;
transform: translateX(100%);
transition: .3s;
}
&.none{
display: none;
}
&.show{
background: rgba(0,0,0,.4);
.cate-content{
transform: translateX(0);
}
}
}
.cate-list{
display: flex;
flex-direction: column;
height: 100%;
.cate-item{
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two{
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active{
color: $base-color;
}
}
/* 商品列表 */
.goods-list{
display:flex;
flex-wrap:wrap;
padding: 0 30upx;
background: #fff;
.goods-item{
display:flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n+1){
margin-right: 4%;
}
}
.image-wrapper{
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image{
width: 100%;
height: 100%;
opacity: 1;
}
}
.title{
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box{
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price{
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before{
content: '￥';
font-size: 26upx;
}
}
}
</style>
关注公众号，可以获取学习资料和源码
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
