任务首页搭建

This commit is contained in:
2022-08-31 09:07:00 +08:00
parent 5d72deb94f
commit 3410132c97
18 changed files with 1900 additions and 531 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -9,8 +9,8 @@ import router from '../router'
// 基础配置
const config = {
apiUrl : 'https://api.gongli.vip/api/', // 正式环境
// apiUrl: 'http://api.gl.shangkelian.cn/api/', // 测试
// apiUrl : 'https://api.gongli.vip/api/', // 正式环境
apiUrl: 'http://api.gl.shangkelian.cn/api/', // 测试
timeout: 60000
}
@@ -46,6 +46,7 @@ const request = (parameter, hideLoding = true) => {
data: parameter.data || {},
method: parameter.method || 'GET',
success: res => {
console.log(res)
if (res.header.Authorization) {
updateToken('token', res.header.Authorization)
}

View File

@@ -598,6 +598,20 @@
}
}
,{
"path" : "pages/mission/mission",
"name":"Mission",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "任务中心",
"app-plus": {
"titleNView": {
"backgroundColor": "#FFFFFF",
"type": "transparent"
}
}
}
}
],
"tabBar": {
"borderStyle": "white",

View File

@@ -19,7 +19,7 @@
<view class="pin">
<view class="title">
<block v-if="collage.down>0 && collage.status == 3">
<u-count-down :time="collage.down" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
<u-count-down :time="collage.down* 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
&nbsp; </u-count-down>
距离结束<span>{{ timeData.days }}</span>&nbsp;
<span>{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;</span>小时<span>{{ timeData.minutes }}&nbsp;</span>分钟<span>{{ timeData.seconds }}&nbsp;</span>

View File

@@ -79,10 +79,10 @@
<image src="../../static/img/house_back.jpg" mode="aspectFill"></image>
</view>
<view class="life-flex-item both">
<view class="both-item team" @click="onToast('共力文娱暂未开放尽情期待')">
<view class="both-item team" @click="onNav({name: 'Mission'}, '')">
<view class="team-content">
<view class="team-title">共力文娱</view>
<view class="team-subtitle">文娱短视频近期开放</view>
<view class="team-title">奖励任务</view>
<view class="team-subtitle">完成任务可获DT积分/奖励</view>
</view>
<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
</view>

336
pages/mission/mission.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<view class="mission">
<!-- 姓名 头像 已领DT积分 已领商品 -->
<view class="top">
<image class="bg" src="/static/mission/diwen.png" mode="widthFix" />
<view class="userinfo">
<view class="nickname">张三丰</view>
</view>
<view class="avatar">
<image src="/static/background/supplier_back.png" mode="aspectFill" />
</view>
<view class="count">
<view class="count-item">
<view class="number">123 </view>
<view class="des"> 已领DT积分 </view>
</view>
<view class="line"></view>
<view class="count-item">
<view class="number">123 </view>
<view class="des"> 已领商品 </view>
</view>
</view>
</view>
<!-- 看视频 得积分 -->
<view class="list-content">
<view class="title">
<image class="bind" src="/static/mission/icon-right.png" mode="widthFix" />
<view class="name">看视频得积分</view>
<image class="bind" src="/static/mission/icon-left.png" mode="widthFix" />
<view class="right-title" @click="change('0')">
<image :class="['change',canRotate0?'rotateChange':'']" src="/static/mission/change.png"
mode="widthFix" />
换一换
</view>
</view>
<block v-if="videos.length>0">
<view class="list" v-for="item in videos" :key="item">
<image class='icon' src="/static/mission/video.png" mode="widthFix" />
<view class="list-item">
<view class="list-item-left">
<view class="item-title">看视频<span>+100</span></view>
<view class="item-des"> 观看2分钟视频可得15DT积分一天封顶150DT积分</view>
</view>
<view class="list-item-right">
<view class="btn">去观看</view>
<view class="count">(0/10</view>
</view>
</view>
</view>
</block>
</view>
<!-- 做任务 得积分 -->
<view class="list-content">
<view class="title" style="margin-top:30rpx;">
<image class="bind" src="/static/mission/icon-right.png" mode="widthFix" />
<view class="name">做任务得积分</view>
<image class="bind" src="/static/mission/icon-left.png" mode="widthFix" />
<view class="right-title" @click="change('1')">
<image :class="['change',canRotate1?'rotateChange':'']" src="/static/mission/change.png"
mode="widthFix" /> 换一换
</view>
</view>
<block v-if="missions.length>0">
<view class="list" v-for="item in missions" :key="item">
<image class='icon' src="/static/mission/mission.png" mode="widthFix" />
<view class="list-item">
<view class="list-item-left">
<view class="item-title">看视频<span>+100</span></view>
<view class="item-des"> 观看2分钟视频可得15DT积分一天封顶150DT积分</view>
</view>
<view class="list-item-right">
<view class="btn">去观看</view>
<view class="count">(0/10</view>
</view>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
videos: [1, 2, 3, 4],
missions: [1, 2, 3, 4],
canRotate0: false,
canRotate1: false,
};
},
methods: {
change(num) {
switch (num) {
case '0':
this.canRotate0 = true;
break;
case '1':
this.canRotate1 = true;
break;
}
this.close();
},
close() {
setTimeout(() => {
this.canRotate0 = false;
this.canRotate1 = false;
}, 3000)
},
}
}
</script>
<style lang="scss">
.top {
width: 100%;
height: 300rpx;
background-color: #e74a45;
position: relative;
padding-top: 140rpx;
margin-bottom: $padding * 5;
// 背景图片
.bg {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
}
// 用户信息
.userinfo {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 40rpx;
font-weight: bold;
.nickname {
padding-bottom: 30rpx;
padding-left: 14rpx;
}
}
// 头像
.avatar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
top: 10rpx;
z-index: 2;
image {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
box-shadow: 0 2rpx 20rpx 2rpx rgba(255, 0, 0, 0.3);
border: solid 10rpx rgba(255, 255, 255, 0.8);
background-color: rgba(255, 0, 0, 0.1);
}
}
// 积分数量
.count {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
background-color: #fff;
margin: 0 $margin;
padding: $padding*3 $padding $padding $padding;
border-radius: 20rpx;
box-shadow: 0 0 20rpx 4rpx rgba(255, 0, 0, 0.1);
position: relative;
top: -$padding * 2;
.line {
width: 2rpx;
height: 60rpx;
background-color: #cacaca;
}
.count-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 26rpx;
.number {
font-size: 40rpx;
font-weight: bold;
color: #333;
}
.des {
color: #626675;
padding-top: 10rpx;
}
}
}
}
.list-content {
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
position: relative;
padding: 0 $padding;
.bind {
width: 100rpx;
}
.right-title {
margin-left: $margin * 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 26rpx;
color: #626675;
.change {
width: 30rpx;
height: 0;
margin-right: 10rpx;
}
.rotateChange {
animation: fadenum1;
animation-duration: 2s;
}
@keyframes fadenum1 {
100% {
transform: rotate(360deg);
}
}
}
.name {
padding:$padding $padding - 10;
font-size: 34rpx;
font-weight: bold;
color: #454545;
}
}
.list {
padding: 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.icon {
width: 60rpx;
height: 0;
}
.list-item {
border-bottom: solid 1rpx #f9f9f9;
flex: 1;
margin-left: $margin;
padding: $padding 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.list-item-left {
flex: 1;
}
.list-item-right {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
align-items: center;
margin-left: $margin;
.btn {
background-color: #e74a45;
color: #fff;
border-radius: 40rpx;
padding: 10rpx $padding;
font-size: 26rpx;
}
.count {
color: #626675;
font-size: 24rpx;
padding-top: 10rpx;
}
}
.item-title {
font-size: 30rpx;
span {
padding-left: $padding - 10;
color: #e74a45;
font-size: 30rpx;
}
}
.item-des {
padding-top: 10rpx;
color: #999;
font-size: 26rpx;
}
}
}
}
</style>

View File

@@ -18,8 +18,7 @@
</view>
</view>
<view class="chainAddress" v-if="userInfo.addr">
<text
@click="copy(userInfo.addr)">区块地址:{{userInfo.addr.substring(0,5) + '****' + userInfo.addr.substring(userInfo.addr.length - 5)}}</text>
<text @click="copy(userInfo.addr)">区块地址:{{userInfo.addr.substring(0,5) + '****' + userInfo.addr.substring(userInfo.addr.length - 5)}}</text>
</view>
</view>
</view>
@@ -114,10 +113,10 @@
</block>
</view>
<view class="btns-box">
<!-- <view class="btns-box-item" @click="onBtn('PinList', {})">
<view class="btns-box-item" @click="onBtn('PinList', {})">
<image class="icon" src="@/static/user/userIcon_15.png" mode="widthFix" />
我的拼单 <uni-icons class="forward" type="forward" color="#999" />
</view> -->
</view>
<view class="btns-box-item" @click="onBtn('MyCard', {})">
<image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" />
我的卡券 <uni-icons class="forward" type="forward" color="#999" />
@@ -137,16 +136,14 @@
</view>
<view class="btns-box">
<view class="btns-box-item" @click="onShare">
<image class="icon" src="@/static/user/userIcon_14.png" mode="widthFix" />
绑定分享关系
<image class="icon" src="@/static/user/userIcon_14.png" mode="widthFix" />绑定分享关系
<block v-if="share == null"> <uni-icons class="forward" type="forward" color="#999" /> </block>
<block v-else> <text class="forward" style="color: gray;">{{share.nickname}}</text> </block>
</view>
</view>
<view class="btns-box">
<view class="btns-box-item" @click="onBtn('Feedback', {})">
<image class="icon" src="@/static/user/userIcon_06.png" mode="widthFix" />
意见反馈
<image class="icon" src="@/static/user/userIcon_06.png" mode="widthFix" />意见反馈
<uni-icons class="forward" type="forward" color="#999" />
</view>
<view class="btns-box-item" @click="updateApp">

BIN
static/mission/change.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/mission/diwen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/mission/mission.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
static/mission/video.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long