This commit is contained in:
tianpengcheng 2021-02-24 18:21:41 +08:00
parent 14e3da89c3
commit cdedcb02a6
15 changed files with 561 additions and 0 deletions

View File

@ -65,6 +65,30 @@
"style": {
"navigationBarTitleText": "系统设置"
}
},
{
"path": "pages/info/index",
"style": {
"navigationBarTitleText": "消息通知"
}
},
{
"path": "pages/callphone/index",
"style": {
"navigationBarTitleText": "联系客服"
}
},
{
"path": "pages/extension/index",
"style": {
"navigationBarTitleText": "我的推广"
}
},
{
"path": "pages/request/index",
"style": {
"navigationBarTitleText": "常见问题"
}
}
],
"globalStyle": {

180
pages/callphone/index.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<view class="call-box">
<view class="call-phone" v-for="(item, index) in list" :key="index">
<view class="head">
<view class="imgname">
<image src="../../static/img/fz_icon_gb/fz_icon_gb@2x.png" class="portrait"></image>
<view>{{item.title}}</view>
</view>
<view class="call">
<view class="call-btn" @click="calllPhone">
<image src="../../static/img/kf_icon_dh/kf_icon_dh.png" mode="aspectFit" class="dh-class"></image>
拨打电话
</view>
</view>
</view>
<view class="footer">
<view class="item" v-for="(item1, index1) in item.contact" :key="index1">
<view class="wx-qq">
<image :src="item1.image" class="wx-qq-image"></image>
<view>{{item1.qq}}</view>
</view>
<view class="copy" @click="copy">复制</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
list: [
{
title: '客户主管',
contact: [
{
qq: 'QQ123',
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
},
{
qq: '微信4231',
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
}
]
},
{
title: '客户主管',
contact: [
{
qq: 'QQ123',
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
},
{
qq: '微信4231',
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
}
]
},
{
title: '客户主管',
contact: [
{
qq: 'QQ123',
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
},
{
qq: '微信4231',
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
}
]
},
{
title: '客户主管',
contact: [
{
qq: 'QQ123',
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
},
{
qq: '微信4231',
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
}
]
}
]
}
},
methods: {
//
calllPhone () {
uni.makePhoneCall({
phoneNumber: '18398608857' //
});
},
//
copy () {
uni.setClipboardData({
data: 'hello',
success: function () {
console.log('success');
}
});
}
}
}
</script>
<style scoped lang="scss">
.call-box {
margin: 30rpx 20rpx;
}
.call-phone {
margin-top: 30rpx;
color: #FFFFFF;
font-size: 28rpx;
padding-bottom: 0;
padding: 30rpx;
font-weight: 400;
background: #2B3062;
border-radius: 14rpx;
& .head {
padding-bottom: 20rpx;
border-bottom: 1rpx solid #576699;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& .imgname {
display: flex;
align-items: center;
& .portrait {
margin-right: 20rpx;
width: 80rpx;
height: 80rpx;
}
}
& .call-btn {
width: 151rpx;
height: 50rpx;
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
border-radius: 26rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0 12rpx;
& .dh-class {
width: 20rpx;
height: 20rpx;
}
}
}
& .footer {
margin-top: 20rpx;
& .item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
& .copy {
font-size: 24rpx;
color: #FE192F;
line-height: 33rpx;
}
& .wx-qq {
display: flex;
align-items: center;
font-size: 24rpx;
color: #FFFFFF;
line-height: 33px;
& .wx-qq-image {
margin-right: 24rpx;
width: 28rpx;
height: 30rpx;
}
}
}
}
</style>

125
pages/extension/index.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<view class="ex-box">
<view class="census">
<view class="acount">{{list.length}}</view>
<view>当前粉丝</view>
</view>
<view class="name-list" v-for="(item, index) in list" :key="index">
<u-image :src="item.photo" width="80"
shape="circle"
height="80" class="photo-box"></u-image>
<view>{{item.name}}</view>
</view>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore"/>
</view>
</template>
<script>
export default {
data () {
return {
status: 'loadmore',
iconType: 'flower',
loadText: {
loadmore: '上拉加载更多',
loading: '努力加载中',
nomore: '没有更多了'
},
list: [
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
},
{
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
name: '1234'
}
]
}
},
methods: {
//
loadmore () {
console.log('触发加载更多')
}
},
onReachBottom () {
console.log('onReachBottom')
if(this.page >= 3) return ;
this.status = 'loading';
this.page = ++ this.page;
setTimeout(() => {
this.list += 10;
if(this.page >= 3) this.status = 'nomore';
else this.status = 'loading';
}, 2000)
}
}
</script>
<style scoped lang="scss">
.ex-box {
font-weight: 400;
margin: 0 20rpx;
& .census {
margin-top: 40rpx;
margin-bottom: 54rpx;
height: 180rpx;
background: #2B3062;
border-radius: 14rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 30rpx;
color: #FFFFFF;
letter-spacing: 0.86rpx;
& .acount {
letter-spacing: 1.31rpx;
font-size: 46rpx;
}
}
& .name-list {
display: flex;
align-items: center;
margin: 20rpx 50rpx;
font-size: 28rpx;
color: #FE192F;
line-height: 40rpx;
}
& .photo-box {
margin-right: 32rpx;
// width: 80rpx;
// height: 80rpx;
}
}
</style>

124
pages/info/index.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<view class="info-box">
<view v-if="list.length === 0" class="nothing-info">
<image src="../../static/img/fz_icon_wc/fz_icon_wc.png" class="image"></image>
<view class="zw">暂无消息</view>
<view class="noinfo">还没有消失通知</view>
</view>
<view v-else class="card-list">
<view v-for="(item, index) in list" :key="index">
<view class="time-class">{{item.time}}</view>
<view v-for="(item1, index1) in item.item" :key="index1">
<u-card :title="item1.title" :thumb="item1.thumb" :border="false">
<view class="" slot="body">
{{item1.content}}
</view>
</u-card>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
list: [
// {
// time: '2021-01-12 14:23:12',
// item: [
// {
// title: '线',
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
// content: 'APP使'
// },
// {
// title: '线',
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
// content: 'APP使'
// }
// ]
// },
// {
// time: '2021-01-12 14:23:12',
// item: [
// {
// title: '线',
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
// content: 'APP使'
// },
// {
// title: '线',
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
// content: 'APP使'
// }
// ]
// }
]
}
}
}
</script>
<style scoped lang="scss">
.info-box {
height: 100%;
}
.nothing-info {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
& .image {
// width: 170rpx;
// height: 200rpx;
}
& .zw {
margin-top: 100rpx;
font-size: 40rpx;
font-weight: 400;
color: #CED6F1;
line-height: 56rpx;
letter-spacing: 1rpx;
}
& .noinfo {
margin-top: 20rpx;
font-size: 28rpx;
font-weight: 400;
color: #9496B1;
line-height: 40rpx;
}
}
.card-list {
.time-class {
color: #FFFFFF;
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
}
& /deep/ .u-card {
font-size: 28rpx;
font-weight: 400;
padding: 30rpx;
background-color: #2B3062;
}
& /deep/ .u-card__head {
margin-bottom: 25rpx;
border-bottom: 1rpx solid #576699;
padding: 0 0 20rpx 0 !important;
& /deep/ .u-card__head--left {
display: flex;
align-items: center;
& /deep/ .u-card__head--left__title {
color: #FFFFFF !important;
}
}
}
& /deep/ .u-card__body {
padding: 0 !important;
color: #9093B7;
}
}
</style>

108
pages/request/index.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<view class="request-box">
<view class="tags">
<view class="tag" @click="click(index)" :class="{'active': checkList(index)}" v-for="(item, index) in list" :key="index">{{item}}</view>
</view>
<view class="all-req">
<view v-for="(item, index) in allList" :key="index">
<view class="item" :class="{'active': checkAllList(index)}" @click="allClick(index)">
<view class="title">{{item}}</view>
<image src="../../static/img/cj_icon_xjt/cj_icon_xjt.png" class="img"></image>
</view>
<view v-if="checkAllList(index)">A 抖达人是一款新媒体服务平台致力于KOL红人孵化用户可以通过抖达人来提升作品曝光指数用户关注帮助更多红人和创作者解决创作难难题让短视频创作没有门槛让创业更简单</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
show: true,
list: [
'关于我们', '关于提现和会员', '关于分站', '关于订单', '关于签到'
],
clickList: [],
allList: [
'Q 关于我们', 'Q 怎么赚钱'
],
allClickList: []
}
},
methods: {
tagClick () {
},
checkList (index) {
return this.clickList.indexOf(index) >= 0
},
click (index) {
let le = this.clickList.indexOf(index)
if (le >= 0) {
this.clickList.splice(le, 1)
} else {
this.clickList.push(index)
}
},
checkAllList (index) {
return this.allClickList.indexOf(index) >= 0
},
allClick (index) {
console.log(index)
let le = this.allClickList.indexOf(index)
if (le >= 0) {
this.allClickList.splice(le, 1)
} else {
this.allClickList.push(index)
}
console.log(this.allClickList)
},
//
loadData () {
}
},
onLoad () {
this.loadData()
}
}
</script>
<style scoped lang="scss">
.request-box {
margin: 20rpx;
}
.tag {
margin: 18rpx 20rpx;
color: #FFFFFF;
display: inline-block;
background: #2B3062;
border-radius: 100rpx;
font-size: 28rpx;
padding: 0 20rpx 10rpx 20rpx;
&.active {
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
}
}
.all-req {
margin-top: 45rpx;
font-size: 32rpx;
color: #FFFFFF;
& .item {
display: flex;
align-items: center;
justify-content: space-between;
margin: 30rpx 0;
color: #9093B7;
&.active {
color: #FE192F;
}
}
& .img {
height: 12rpx;
width: 24rpx;
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 843 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 427 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 833 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB