Skip to content

S
self-support
Commit 5d26111c authored by Facius's avatar Facius
Browse files
Options

首页

parent 479b235f
Hide whitespace changes
Inline Side-by-side
Showing with 226 additions and 95 deletions
src/components/order/index.vue 0 → 100644
View file @ 5d26111c
<template>
<view class="order-view">
<text>订单</text>
</view>
</template>
<script>
export default {
props: {
orderData: {
type: Object,
default: {}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.order-view {
width: 100%;
height: 200rpx;
}
</style>
src/pages/index/index.vue
View file @ 5d26111c
<template> <template>
<view class="content"> <view class="content">
<view class="wrap"> <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" @scroll="handleScroll"
<!-- <u-image width="100%" height="300rpx" src="/static/anime3.jpg" mode="widthFix"></u-image> --> refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh" scroll-anchoring
</view> @refresherrestore="onRestore">
<u-card title="最新消息">
<view class="" slot="body"> <u-swiper :height="250" :list="list" :indicator-pos="indicatorPos" :mode="mode" :interval="3000"
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"> @click="clickSwiper">
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image> </u-swiper>
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view> <view>
</view> <text class="title">最新消息</text>
</view> <view v-for="(item, index) in messageList" :key="index">
</u-card> <text class="title">{{item.body}}</text>
<u-card title="订单推荐"> </view>
<view class="" slot="body"> <view class="order-view">
<view class="u-body-item u-flex u-row-between u-p-b-0"> <!-- 订单推荐吸顶 -->
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view> <u-sticky>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image> <view class="sticky"><text>订单推荐</text></view>
</view> </u-sticky>
</view> <!-- 入驻成功之后显示订单列表 -->
<view class="order-foot" slot="foot"> <view v-if="status > 0 && orderList.length > 0">
<view class="btn-settle"> <view v-for="(item, index) in orderList" :key="index">
<u-button type="primary" shape="circle" @click="immediatelyIn">立即入驻</u-button> <OrderCell :orderData="item">
</view> </OrderCell>
</view> </view>
</u-card> <u-loadmore :status="currentLoadStatus" bgColor="#f2f2f2"></u-loadmore>
</view> </view>
</template> <view v-else-if="status > 0 && orderList.length <= 0">
暂无订单
<script> </view>
const app = getApp() <!-- 入驻前-->
export default { <view v-else>
data() { <text class="title">当前订单{{count}}笔\n入驻通过后，平台将向您推荐订单</text>
return { <u-button class="settle-button" type="primary" shape="circle" @click="immediatelyIn"
:custom-style="buttonStyle">
} 立即入驻</u-button>
}, </view>
onLoad() { </view>
</view>
}, </scroll-view>
methods: { </view>
immediatelyIn() { </template>
if(app.globalData.token) {
uni.navigateTo({ <script>
url: "pages/settle/index" import OrderCell from '@/components/order/index.vue'
}) export default {
} else { components: {
uni.navigateTo({ OrderCell
url: "pages/login/index" },
}) data() {
} return {
} triggered: false,
} list: [{
} image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
</script> },
{
<style scoped lang="scss"> image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
.content { },
display: flex; {
flex-direction: column; image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
align-items: center; }
justify-content: center; ],
} title: false,
.wrap { mode: 'round',
padding: 40rpx; indicatorPos: 'bottomCenter',
} title: 'Hello',
count: 0, // 推荐订单数量
.u-card-wrap { status: 0, // 入驻状态
background-color: $u-bg-color; messageList: [{
padding: 1px; id: 1234,
} type: '',
level: '',
.u-body-item { title: '',
font-size: 32rpx; url: '',
color: #333; body: '好消息',
padding: 20rpx 10rpx; }, {
} id: 1234,
type: '',
.u-body-item image { level: '',
width: 120rpx; title: '',
flex: 0 0 120rpx; url: '',
height: 120rpx; body: '好消息',
border-radius: 8rpx; }, {
margin-left: 12rpx; id: 1234,
margin-right: 12rpx; type: '',
} level: '',
.order-foot { title: '',
display: flex; url: '',
flex-direction: column; body: '好消息',
align-items: center; }],
} loadStatus: ['more', 'loading', 'noMore'],
.btn-settle { currentLoadStatus: 'loading',
orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
width: 400rpx; bottomLoading: false
} }
},
computed: {
buttonStyle() {
return {
'width': '300rpx',
}
}
},
onLoad() {
this._freshing = false;
this.triggered = true;
},
methods: {
onRefresh() {
if (this._freshing) return;
this._freshing = true;
// 加载数据
// ...
setTimeout(() => {
// 数据加载完成
this.triggered = false;
this._freshing = false;
}, 1000)
},
onRestore() {
this.triggered = 'restore';
},
reachBottom() {
console.log('-----bottom will-----')
if (this.bottomLoading || this.currentLoadStatus == this.loadStatus[2]) {
return
}
console.log('-----bottom did-----')
this.bottomLoading = true
setTimeout(() => {
// 加载更多数据
// ...
this.orderList.push(...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}])
// 加载完成
this.currentLoadStatus = this.loadStatus[2]
this.$nextTick(function() {
this.bottomLoading = false
})
}, 1000);
},
clickSwiper(index) {
},
handleScroll() {
console.log('-----scroll-------')
},
immediatelyIn() {
if (getApp().globalData.token) {
uni.navigateTo({
url: "pages/settle/index"
})
} else {
uni.navigateTo({
url: "pages/login/index"
})
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
}
.logo {
height: 200rpx;
width: 100%;
margin: 0rpx auto 50rpx auto;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.sticky {
height: 120rpx;
background-color: #2979ff;
color: #fff;
padding: 24rpx;
text-align: left;
}
.order-view {
text-align: center;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment