bnyer
/
bnyer-cloud-hub
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

feature-hub-1.0:完善页面，添加首页跳转逻辑

feature-1.0
chengkun 4 years ago
parent
cea40871e3
commit
d89274b39f
7 changed files with 280 additions and 387 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      pages.json
  2. 216
      pages/index/index.vue
  3. 22
      pages/index/material/material.vue
  4. 22
      pages/index/upload/upload.vue
  5. 99
      pages/profit/profit.vue
  6. 172
      pages/userInfo/notice/notice.vue
  7. 104
      pages/userInfo/userInfo.vue

18
pages.json
View File

@ -62,6 +62,24 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
,{
"path" : "pages/index/upload/upload",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/index/material/material",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

216
pages/index/index.vue
View File

@ -2,22 +2,43 @@
<view class="container"> <view class="container">
<view class="top"> <view class="top">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode" <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
field="content"> field="content">
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="autoplay" <swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="autoplay"
:interval="interval" :duration="duration"> :interval="interval" :duration="duration">
<swiper-item v-for="(item, index) in 3" :key="index"> <swiper-item v-for="(item, index) in 3" :key="index">
<view class="swiper-item" :class="'swiper-item' + index"> <view class="swiper-item" :class="'swiper-item' + index">
<text style="color: #fff; font-size: 32px;">{{index+1}}</text> <text style="color: #fff; font-size: 32px;">{{index+1}}</text>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</uni-swiper-dot> </uni-swiper-dot>
</view> </view>
<view class="middle"> <view class="middle">
素材管理、上传图片 <uni-group mode="card">
<uni-grid :column="2" :square="true" :highlight="false" @change="change" :showBorder="false">
<uni-grid-item v-for="(item, index) in funcList" :index="index" :key="index">
<view class="grid-item-box">
<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
<uni-icons type="image" :size="30" color="#777" />
<text class="text">{{ item.title }}</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-group>
</view> </view>
<view class="foot"> <view class="foot">
表格展示艺术家上传的图片数据 <uni-group mode="card" title="素材数据" style="text-align:center;">
<uni-grid :column="3" :square="true" :highlight="false" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box">
<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
<uni-icons type="image" :size="30" color="#777" />
<text class="text">{{ item.text }}</text>
<text class="text">{{ item.num }}</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-group>
</view> </view>
</view> </view>
</template> </template>
@ -37,18 +58,65 @@
mode: 'nav', mode: 'nav',
swiperDotIndex: 0, swiperDotIndex: 0,
autoplay: true, autoplay: true,
interval: 5000, interval: 5000,
duration: 500 duration: 500,
pageUrl:'',
funcList: [{
title: '素材管理',
url: '/pages/index/material/material'
}, {
title: '上传素材',
url: '/pages/index/upload/upload'
}],
list: [{
url: '/static/c1.png',
text: '头像',
num: '16'
},
{
url: '/static/c2.png',
text: '背景图',
num: '1'
},
{
url: '/static/c3.png',
text: '手机壁纸',
num: '99'
},
{
url: '/static/c4.png',
text: '动态壁纸',
num: '23',
},
{
url: '/static/c5.png',
text: 'apple watch',
num: '15'
},
{
url: '/static/c6.png',
text: '表情包',
num: '31'
}
]
}; };
}, },
methods:{ methods: {
change(e) { change(e) {
this.current = e.detail.current; let {
//console.log('this.current',this.current) index
} = e.detail
this.funcList[index].badge && this.funcList[index].badge++
this.pageUrl = this.funcList[index].url
console.log('this.pageUrl',this.pageUrl)
/** 跳转指定页面*/
uni.navigateTo({
url: this.pageUrl
});
}, },
clickItem(e) { clickItem(e) {
this.swiperDotIndex = e this.swiperDotIndex = e
console.log('this.swiperDotIndex',this.swiperDotIndex) console.log('this.swiperDotIndex', this.swiperDotIndex)
}, },
// 获取用户信息 // 获取用户信息
getUserInfo() { getUserInfo() {
@ -64,7 +132,7 @@
iv: userInfo.iv iv: userInfo.iv
} }
// 用户授权登录 // 用户授权登录
console.log('params',params); console.log('params', params);
loginWx(params).then(res => { loginWx(params).then(res => {
if (res.data.code === 200) { if (res.data.code === 200) {
uni.setStorage({ uni.setStorage({
@ -96,89 +164,35 @@
</script> </script>
<style lang="scss"> <style lang="scss">
// .container { .container{
// .top { font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
// width: 100vw; }
.grid-item-box {
// image { flex: 1;
// width: 100vw; // position: relative;
// height: 400rpx; /* #ifndef APP-NVUE */
// } display: flex;
/* #endif */
// .uni-searchbar { flex-direction: column;
// border: 1px solid #11A8FD; align-items: center;
// margin: 0 40rpx; justify-content: center;
// border-radius: 16rpx; padding: 10px 0;
// padding: 0; }
// .uni-searchbar__box { .grid-item-box-row {
// padding: 0; flex: 1;
// border-radius: 16rpx !important; // position: relative;
// } /* #ifndef APP-NVUE */
// } display: flex;
/* #endif */
// >text { flex-direction: row;
// font-weight: bold; align-items: center;
// font-size: 14px; justify-content: center;
// display: block; padding: 10px 0;
// text-align: center; }
// padding-top: 40rpx;
// padding-bottom: 20rpx; .swiper-box {
// } height: 150px;
// .user-list {
// display: flex;
// justify-content: flex-start;
// align-items: center;
// overflow-x: auto;
// .user-list-box {
// width: 140rpx;
// padding: 20rpx;
// text-align: center;
// image {
// width: 100rpx;
// height: 100rpx;
// border-radius: 100rpx;
// }
// text {
// font-size: 24rpx;
// color: #1E1E1E;
// text-align: center;
// }
// }
// }
// }
// .middle {
// text-align: center;
// height: calc(100vh - 248rpx);
// padding-top: 40rpx;
// text {
// font-weight: bold;
// font-size: 14px;
// display: block;
// }
// image {
// width: 40rpx;
// height: 40rpx;
// }
// }
// }
.middle{
margin-top: 100px;
}
.foot{
margin-top: 100px;
}
.swiper-box {
height: 180px;
} }
.swiper-item { .swiper-item {

22
pages/index/material/material.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
我是素材管理界面
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

22
pages/index/upload/upload.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
我是上传界面
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

99
pages/profit/profit.vue
View File

@ -1,27 +1,28 @@
<template> <template>
<view class="container"> <view class="container">
<view class="top"> <view class="top">
<uni-section title="昨日收益" type="line">
<uni-group mode="card">
<view>啦啦啦</view>
</uni-group>
</uni-section>
</view> </view>
<view class="middle"> <view class="middle">
<uni-section title="收益明细" type="line">
</view> <uni-group mode="card">
<view class="foot"> <view>啦啦啦</view>
</uni-group>
</uni-section>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import {
loginWx
} from '@/api/index.js'
export default { export default {
data() { data() {
return { return {
hotCreatorList: [], nvueWidth: 730,
isTarget: true, list: ['美團外賣', '支付助手', '廣告助手', '上傳圖片', '消息通知', '我的信息', '我的短信', '我的頭像']
showChoiceness:false
} }
}, },
// 下拉刷新 // 下拉刷新
@ -38,78 +39,8 @@
} }
</script> </script>
<style lang="less"> <style lang="scss">
.container { .container{
.top { font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
width: 100vw;
image {
width: 100vw;
height: 400rpx;
}
.uni-searchbar {
border: 1px solid #11A8FD;
margin: 0 40rpx;
border-radius: 16rpx;
padding: 0;
.uni-searchbar__box {
padding: 0;
border-radius: 16rpx !important;
}
}
>text {
font-weight: bold;
font-size: 14px;
display: block;
text-align: center;
padding-top: 40rpx;
padding-bottom: 20rpx;
}
.user-list {
display: flex;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
.user-list-box {
width: 140rpx;
padding: 20rpx;
text-align: center;
image {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
}
text {
font-size: 24rpx;
color: #1E1E1E;
text-align: center;
}
}
}
}
.middle {
text-align: center;
height: calc(100vh - 248rpx);
padding-top: 40rpx;
text {
font-weight: bold;
font-size: 14px;
display: block;
}
image {
width: 40rpx;
height: 40rpx;
}
}
} }
</style> </style>

172
pages/userInfo/notice/notice.vue
View File

@ -5,176 +5,8 @@
</template> </template>
<script> <script>
// export default {
// data() {
// return {
// hotCreatorList: [],
// isTarget: true,
// showChoiceness:false
// }
// },
// // 下拉刷新
// onPullDownRefresh() {
// this.showChoiceness = false
// uni.stopPullDownRefresh()
// },
// created() {
// const userInfo = uni.getStorageSync('userInfo')
// if (!userInfo) {
// console.log('havent userInfo')
// this.getUserInfo()
// } else {
// console.log('have userInfo')
// }
// },
// onPageScroll(e) {
// // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
// if (e.scrollTop > 160) { </style>
// this.showChoiceness = true
// // uni.redirectTo({
// // url: '../index/choiceness'
// // })
// }
// },
// methods: {
// // 搜索
// search(res) {
// if (res.value) {
// console.log('search', res.value)
// this.goCreatorDetail(res.value)
// } else {
// uni.showToast({
// title: '请输入艺术家代号',
// icon: 'none'
// })
// }
// },
// // 获取用户信息
// getUserInfo() {
// wx.login({
// force: true,
// success: res => {
// wx.getUserInfo({
// withCredentials: true,
// success: userInfo => {
// const params = {
// code: res.code,
// encryptedData: userInfo.encryptedData,
// iv: userInfo.iv
// }
// // 用户授权登录
// console.log('params',params);
// loginWx(params).then(res => {
// if (res.data.code === 200) {
// uni.setStorage({
// key: 'userInfo',
// data: res.data.data.userInfo,
// })
// } else {
// uni.showToast({
// title: res.data.msg,
// icon: 'none'
// })
// }
// }).catch(res => {})
// console.log(`getUserInfo 调用成功`, userInfo);
// },
// fail(userInfo) {
// console.log(`getUserInfo 调用失败`);
// },
// });
// },
// fail(res) {
// console.log(`login 调用失败`);
// },
// });
// },
// // 滚动监听
// handleScroll() {
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// console.log(scrollTop)
// },
// },
// }
</script>
<style lang="less">
.container {
.top {
width: 100vw;
image {
width: 100vw;
height: 400rpx;
}
.uni-searchbar {
border: 1px solid #11A8FD;
margin: 0 40rpx;
border-radius: 16rpx;
padding: 0;
.uni-searchbar__box {
padding: 0;
border-radius: 16rpx !important;
}
}
>text {
font-weight: bold;
font-size: 14px;
display: block;
text-align: center;
padding-top: 40rpx;
padding-bottom: 20rpx;
}
.user-list {
display: flex;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
.user-list-box {
width: 140rpx;
padding: 20rpx;
text-align: center;
image {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
}
text {
font-size: 24rpx;
color: #1E1E1E;
text-align: center;
}
}
}
}
.middle {
text-align: center;
height: calc(100vh - 248rpx);
padding-top: 40rpx;
text {
font-weight: bold;
font-size: 14px;
display: block;
}
image { <style lang="scss">
width: 40rpx;
height: 40rpx;
}
}
}
</style> </style>

104
pages/userInfo/userInfo.vue
View File

@ -3,25 +3,35 @@
<view class="top"> <view class="top">
<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" <uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
@getmore="getMore" /> @getmore="getMore" />
<uni-notice-bar show-icon scrollable </view>
text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" /> <view class="my-message">
<view class="left">
<image :src="userInfo.img" mode=""></image>
</view>
<view class="right">
{{userInfo.username}}
</view>
</view> </view>
<view class="middle"> <view class="middle">
<uni-section title="我的資金" type="line" padding> <uni-section title="我的资金" type="line" padding>
<text>錢包餘額</text> <uni-group mode="card">
<view>啦啦啦</view>
</uni-group>
</uni-section> </uni-section>
</view> </view>
<view class="foot"> <view class="foot">
<uni-section title="更多服務" type="line" padding> <uni-section title="更多服务" type="line">
<uni-grid :column="4" :highlight="true" @change="change"> <uni-group mode="card">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index"> <uni-grid :column="3" @change="change" :showBorder="false" :square="true">
<view class="grid-item-box" style="background-color: #fff;" > <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<uni-icons type="image" :size="30" color="#777" /> <view class="grid-item-box" style="background-color: #fff;">
<text class="text">{{item}}</text> <uni-icons type="image" :size="30" color="#777" />
</view> <text class="text">{{item.title}}</text>
</uni-grid-item> </view>
</uni-grid> </uni-grid-item>
</uni-section> </uni-grid>
</uni-group>
</uni-section>
</view> </view>
</view> </view>
</template> </template>
@ -30,35 +40,79 @@
export default { export default {
data() { data() {
return { return {
list:['美團外賣','支付助手','廣告助手','上傳圖片','消息通知','我的信息','我的短信','我的頭像'] list:[{
url: '/pages/userInfo/about/about',
title: '关于节点',
img: ''
},{
url: '/pages/userInfo/contact/contact',
title: '联系我们',
img: ''
},{
url: '/pages/userInfo/extends/extends',
title: '邀请他人',
img: ''
},{
url: '/pages/userInfo/inviteLog/inviteLog',
title: '邀请记录',
img: ''
},{
url: '/pages/userInfo/notice/notice',
title: '通知公告',
img: ''
},{
url: '/pages/userInfo/withdraw/withdraw',
title: '提现记录',
img: ''
}],
pageUrl: ''
} }
}, },
methods: { methods: {
change(e) { change(e) {
// this.index = e.detail.index
let { let {
index index
} = e.detail } = e.detail
this.list[index].badge && this.list[index].badge++ this.list[index].badge && this.list[index].badge++
this.pageUrl = this.list[index].url
uni.showToast({ console.log('this.pageUrl',this.pageUrl)
title: `点击第${index+1}个宫格`, /** 跳转指定页面*/
icon: 'none' uni.navigateTo({
}) url: this.pageUrl
});
}, },
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.middle { .container{
margin-top: 80px; font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
} }
.my-message {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20rpx;
.foot { .left {
margin-top: 80px; width: 100rpx;
height: 100rpx;
margin-right: 20rpx;
>image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.right {
font-size: 12px;
}
} }
// .container { // .container {
// .top { // .top {
// width: 100vw; // width: 100vw;

Write Preview
Loading…
Cancel
Save