初始化
This commit is contained in:
魏啾
397
pages/mall/community.vue
Normal file
397
pages/mall/community.vue
Normal file
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="oneindex">
|
||||
<view class="oneindexbox">
|
||||
<view class="oneindexboxswiper" :scroll-y="true" :scroll-with-animation="true"
|
||||
:enable-back-to-top="true" :style="'height:'+hh+'px'">
|
||||
<view v-for="(item,index) in navList" :key="index" class="oneindexswiperitem">
|
||||
<view class="oneindexswiperitem_one" :style="swiperCurrent==index?'background: #fff;':''"
|
||||
:class="swiperCurrent==index?'oneindexswiperitem_ones':''" @click="orderswitch(item,index)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindexbox">
|
||||
<swiper :current="swiperCurrent" :disable-touch='disabletouch' @animationfinish="animationfinish"
|
||||
:duration='0' :vertical='true' :style="'height:'+hh+'px'">
|
||||
<swiper-item v-for="(item,index) in list_" :key="index">
|
||||
<scroll-view :scroll-y="true" @scrolltolower="lower" :style="'height:'+hh+'px'">
|
||||
<view v-for="(item1,index1) in list_[index].data" :key="index1"
|
||||
class="main-item towindexboxscrollview">
|
||||
<view class="towindexboxview_box flex-start">
|
||||
<image class="towindexboxview_boximage" :src="item1.host_img" mode="aspectFill">
|
||||
</image>
|
||||
<view class="towindexboxview_boxtext flex-colum-start">
|
||||
<view class="towindexboxview_boxtextone">
|
||||
{{item1.title}}
|
||||
</view>
|
||||
<view class="towindexboxview_boxtexttow">
|
||||
销量 100+
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-between">
|
||||
<view class="flex-start">
|
||||
<view class="indexboxitemlefttheretextone">
|
||||
<text>¥</text>
|
||||
<text>{{item1.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretexttow">
|
||||
¥{{item1.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
<image src="@/static/mall/cart.png" mode="aspectFill"
|
||||
@click="requestSubscribeMessage(0,item1)"
|
||||
style="width: 40rpx; height: 40rpx;">
|
||||
</image>
|
||||
<!-- <u-number-box v-else v-model="item1.number" :min="0" button-size="12"
|
||||
color="#ffffff" :bgColor="theme.cartpieces" :max="item1.stock"
|
||||
iconStyle="color: #fff" @change="requestSubscribeMessage($event,item1)">
|
||||
</u-number-box> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list_[index].data.length == 0 && list_[index].is_end == true"
|
||||
style="margin-top:200rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="" style="width: 100%;width: 100%;">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<bottombbar class="headinga" v-if="style_type == 2" :valuebbar='1'></bottombbar>
|
||||
<bottombbar class="headinga" v-else :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
style_type: uni.cache.get('loginuser').style_type,
|
||||
hh: 0,
|
||||
navList: [{
|
||||
id: '',
|
||||
title: ''
|
||||
}],
|
||||
navCount: 0,
|
||||
valuenumber: 0,
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
list_: {},
|
||||
like: '', //备注
|
||||
form: {
|
||||
status: 'loadmore',
|
||||
},
|
||||
disabletouch: true, //控制是否可以滑动
|
||||
};
|
||||
},
|
||||
async onLoad() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.navList = res
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindexgoodsclass()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
//计算选中商品的总价
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this._onReadyApi()
|
||||
uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
if (this.list_['list' + current].data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
lower(e) {
|
||||
console.log(e)
|
||||
this.onReachBottom_fn(this.list_['list' + this.swiperCurrent])
|
||||
},
|
||||
onReachBottom_fn(list) {
|
||||
if (!list.is_end) {
|
||||
this.get_order_list(this.current);
|
||||
} else {
|
||||
this.disabletouch = false
|
||||
this.form.status = 'nomore';
|
||||
console.log(this.disabletouch)
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
for (let i = 0; i < this.navList.length; i++) {
|
||||
this.$set(this.list_, 'list' + [i], { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
})
|
||||
this.get_order_list(i);
|
||||
}
|
||||
console.log(this.list_)
|
||||
},
|
||||
async get_order_list(i) {
|
||||
this.form.status = 'loading';
|
||||
let page = null;
|
||||
let order_type = 0
|
||||
order_type = this.navList[i].id
|
||||
page = this.list_['list' + i].page
|
||||
let res = await this.api.shoppingindex({
|
||||
classid: order_type,
|
||||
page: page,
|
||||
like: this.like
|
||||
})
|
||||
this.paging(res, this.list_['list' + i])
|
||||
uni.hideLoading();
|
||||
},
|
||||
paging(res, list) {
|
||||
if (res.length == 0) {
|
||||
this.form.status = 'nomore';
|
||||
list.is_end = true;
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
list.page = list.page + 1;
|
||||
setTimeout(() => {
|
||||
list.data = [...list.data, ...res];
|
||||
if (res.length != 10) {
|
||||
list.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
|
||||
} else {
|
||||
this.disabletouch = true
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
async shoppingindexgoodsclass() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.navList = res
|
||||
this.init_fn();
|
||||
},
|
||||
orderswitch(s, index) {
|
||||
console.log(index, this.list_['list' + index])
|
||||
if (this.list_['list' + index].data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
requestSubscribeMessage(e, s) {
|
||||
console.log(e)
|
||||
// this.valuenumber = e.value
|
||||
// if (e == 0) {
|
||||
|
||||
// } else {
|
||||
|
||||
// }
|
||||
this.$u.debounce(this.shoppingindexgoodindexsaddcar(s), 200);
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar(s) {
|
||||
console.log(s)
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: 1,
|
||||
goods_id: s.id,
|
||||
spec: s.spec_title,
|
||||
})
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
_onReadyApi() {
|
||||
var windowHeight = uni.getSystemInfoSync().windowHeight
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
uni.createSelectorQuery().select('.headinga').boundingClientRect((res) => {
|
||||
this.hh = windowHeight - res.height
|
||||
this.navCount = Math.round(this.hh / 50)
|
||||
}).exec()
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.headinga').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
this.height = (nodeData.height) + "px";
|
||||
})
|
||||
//#endif
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
.oneindex {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.oneindexbox {
|
||||
width: 24%;
|
||||
background-color: #f7f7f7;
|
||||
overflow: auto;
|
||||
|
||||
.oneindexboxswiper {
|
||||
width: 100%;
|
||||
|
||||
.oneindexswiperitem {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
|
||||
.oneindexswiperitem_ones::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(50%);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: #fc821c;
|
||||
width: 8rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
}
|
||||
|
||||
.oneindexswiperitem_one {
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindexbox {
|
||||
width: 76%;
|
||||
|
||||
.towindexboxscrollview {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.towindexboxview_box {
|
||||
width: 100%;
|
||||
padding: 32rpx 0 28rpx 0;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.towindexboxview_boximage {
|
||||
background: #f8f8f8;
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towindexboxview_boxtext {
|
||||
position: relative;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.towindexboxview_boxtextone {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindexboxview_boxtexttow {
|
||||
margin-top: 12rpx;
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
|
||||
.flex-start {
|
||||
.indexboxitemlefttheretextone {
|
||||
text {
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FF5053;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretexttow {
|
||||
margin-top: 10rpx;
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user