任务首页搭建

apis/index.js

@@ -9,8 +9,8 @@ import router from '../router'
 
 // 基础配置
 const config = {
-    apiUrl	: 'https://api.gongli.vip/api/', // 正式环境
+    // apiUrl	: 'https://api.gongli.vip/api/', // 正式环境
-    // apiUrl: 'http://api.gl.shangkelian.cn/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)
                 }

pages.json

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

pages/group-book/detail/detail.vue

@@ -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>秒

pages/life/life.vue

@@ -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-title">奖励任务</view>
-						<view class="team-subtitle">文娱短视频近期开放</view>
+						<view class="team-subtitle">完成任务可获DT积分/奖励</view>
 					</view>
 					<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
 				</view>

pages/mission/mission.vue

@@ -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>

pages/user/index.vue

@@ -18,8 +18,7 @@
                         </view>
                     </view>
                     <view class="chainAddress" v-if="userInfo.addr">
-                        <text
+                        <text @click="copy(userInfo.addr)">区块地址:{{userInfo.addr.substring(0,5) + '****' + userInfo.addr.substring(userInfo.addr.length - 5)}}</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">