初始化
This commit is contained in:
魏啾
369
pages/mall/index.vue
Normal file
369
pages/mall/index.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(item)">
|
||||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<image class="onecontent_tow_itemtextsimges" v-if="swiperCurrent == item.id" :src="selected" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent flex-between">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||||
@click="eeInfo(item)">
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_item ">
|
||||
<view class="towcontentitemtow_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
销量 {{item.sales}}+
|
||||
</view>
|
||||
<view class="towcontentitemtow_there flex-start">
|
||||
<view class="towcontentitemtow_there_one flex-start">
|
||||
¥<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_there_tow">￥{{item.y_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentfixed" @click="clickshopcart" v-if="style_type!=2">
|
||||
<image :src="shoppingcart" mode="widthFix"></image>
|
||||
</view>
|
||||
<bottombbar v-if="style_type == 2" :valuebbar='1'></bottombbar>
|
||||
<bottombbar v-else :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
selected: uni.getStorageSync('selected'),
|
||||
shoppingcart: uni.getStorageSync('shoppingcart'),
|
||||
style_type:uni.cache.get('loginuser').style_type,
|
||||
|
||||
swiperCurrent: 0,
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [],
|
||||
like: '',
|
||||
is_end: false,
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindexgoodsclass()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
this.init_fn()
|
||||
},
|
||||
methods: {
|
||||
async shoppingindexgoodsclass() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.swipercurrentdata = res
|
||||
},
|
||||
async shoppingindex() {
|
||||
let res = await this.api.shoppingindex({
|
||||
page: this.form.page,
|
||||
like: this.like,
|
||||
classid: this.swiperCurrent
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindex()
|
||||
},
|
||||
orderswitch(e) {
|
||||
this.swiperCurrent = e.id
|
||||
this.init_fn()
|
||||
},
|
||||
clickshopcart() {
|
||||
uni.pro.navigateTo('shopcart/index')
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.contentfixed {
|
||||
position: fixed;
|
||||
background-size: cover;
|
||||
bottom: 328rpx;
|
||||
right: 28rpx;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border:1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.onecontent_tow_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
margin-left: 60rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtextsimges{
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20rpx;
|
||||
height: 8rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 24rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
width:48%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
.towcontentitemtow_imge {
|
||||
border-top-left-radius: 18rpx;
|
||||
border-top-right-radius: 18rpx;
|
||||
width: 100%;
|
||||
height: 266rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_item {
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontentitemtow_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there {
|
||||
margin-top: 14rpx;
|
||||
|
||||
.towcontentitemtow_there_one {
|
||||
text {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
font-size: 4rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there_tow {
|
||||
text-decoration: line-through;
|
||||
margin-left: 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user