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>
<view class="content">
<view class="wrap">
<!-- <u-image width="100%" height="300rpx" src="/static/anime3.jpg" mode="widthFix"></u-image> -->
</view>
<u-card title="最新消息">
<view class="" slot="body">
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
</view>
</view>
</u-card>
<u-card title="订单推荐">
<view class="" slot="body">
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
</view>
</view>
<view class="order-foot" slot="foot">
<view class="btn-settle">
<u-button type="primary" shape="circle" @click="immediatelyIn">立即入驻</u-button>
</view>
</view>
</u-card>
</view>
</template>
<script>
const app = getApp()
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
immediatelyIn() {
if(app.globalData.token) {
uni.navigateTo({
url: "pages/settle/index"
})
} else {
uni.navigateTo({
url: "pages/login/index"
})
}
}
}
}
</script>
<style scoped lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wrap {
padding: 40rpx;
}
.u-card-wrap {
background-color: $u-bg-color;
padding: 1px;
}
.u-body-item {
font-size: 32rpx;
color: #333;
padding: 20rpx 10rpx;
}
.u-body-item image {
width: 120rpx;
flex: 0 0 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-left: 12rpx;
margin-right: 12rpx;
}
.order-foot {
display: flex;
flex-direction: column;
align-items: center;
}
.btn-settle {
width: 400rpx;
}
<template>
<view class="content">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" @scroll="handleScroll"
refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh" scroll-anchoring
@refresherrestore="onRestore">
<u-swiper :height="250" :list="list" :indicator-pos="indicatorPos" :mode="mode" :interval="3000"
@click="clickSwiper">
</u-swiper>
<view>
<text class="title">最新消息</text>
<view v-for="(item, index) in messageList" :key="index">
<text class="title">{{item.body}}</text>
</view>
<view class="order-view">
<!-- 订单推荐吸顶 -->
<u-sticky>
<view class="sticky"><text>订单推荐</text></view>
</u-sticky>
<!-- 入驻成功之后显示订单列表 -->
<view v-if="status > 0 && orderList.length > 0">
<view v-for="(item, index) in orderList" :key="index">
<OrderCell :orderData="item">
</OrderCell>
</view>
<u-loadmore :status="currentLoadStatus" bgColor="#f2f2f2"></u-loadmore>
</view>
<view v-else-if="status > 0 && orderList.length <= 0">
暂无订单
</view>
<!-- 入驻前-->
<view v-else>
<text class="title">当前订单{{count}}笔\n入驻通过后，平台将向您推荐订单</text>
<u-button class="settle-button" type="primary" shape="circle" @click="immediatelyIn"
:custom-style="buttonStyle">
立即入驻</u-button>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import OrderCell from '@/components/order/index.vue'
export default {
components: {
OrderCell
},
data() {
return {
triggered: false,
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
}
],
title: false,
mode: 'round',
indicatorPos: 'bottomCenter',
title: 'Hello',
count: 0, // 推荐订单数量
status: 0, // 入驻状态
messageList: [{
id: 1234,
type: '',
level: '',
title: '',
url: '',
body: '好消息',
}, {
id: 1234,
type: '',
level: '',
title: '',
url: '',
body: '好消息',
}, {
id: 1234,
type: '',
level: '',
title: '',
url: '',
body: '好消息',
}],
loadStatus: ['more', 'loading', 'noMore'],
currentLoadStatus: 'loading',
orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
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>
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