merge

apis/interfaces/mine.js

@@ -69,7 +69,7 @@ const browsers = (page) => {
 // 修改用户头像或昵称
 const resetUserInfo= (data) => {
   return request({
-    url: 'user/'+data.key,
+    url: 'user/setting/'+data.key,
     method: 'PUT',
     data:{
 		value:data.value

apis/interfaces/setting.js

@@ -25,7 +25,7 @@ const wechatbind = (data) => {
 // 修改用户头像或昵称
 const resetUserInfo = (data) => {
 	return request({
-		url: 'user/' + data.key,
+		url: 'user/setting/' + data.key,
 		method: 'PUT',
 		data: {
 			value: data.value

pages.json

@@ -218,6 +218,15 @@
 		"style": {
 			"navigationBarTitleText": "营销推广码"
 		}
+	}, {
+		"path": "pages/wallet/fragment",
+		"style": {
+			"navigationBarTitleText": "能量碎片记录",
+			"enablePullDownRefresh": false,
+			"navigationBarBackgroundColor": "#774ffd",
+			"navigationBarTextStyle": "white"
+		},
+		"name": "Fragment"
 	}],
 	"globalStyle": {
 		"navigationStyle": "custom",

pages/user/index.vue

@@ -135,8 +135,8 @@
                             <view class="assets-label-name">能量球钱包<image @click.stop="showHelp('wallet')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
                             <view class="assets-label-number">{{userData.account.coins || 0}}</view>
                         </view>
-                        <view class="assets-label">
+                        <view class="assets-label" @click="$Router.push({name:'Fragment'})">
-                            <view class="assets-label-name">能量碎片<image @click="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
+                            <view class="assets-label-name">能量碎片<image @click.stop="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
                             <view class="assets-label-number">{{userData.account.score || 0}}</view>
                         </view>
                     </view>

pages/wallet/extract.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="WithdrawingCoin ">
     <view class="withdrawing-content">
-      <view class="item-name">账户能量球将提现到银行卡</view>
+      <view class="item-name">能量球提现至银行卡</view>
       <view class="item">
         <view style="flex: 1;">
           <input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
@@ -216,6 +216,11 @@
 </script>
 
 <style lang="scss">
+	page{
+		width: 100%;
+		min-height: 100vh;
+		background-color: #fff;
+	}
   .hasmore {
     color: #808080;
     font-size: $title-size-m;
@@ -254,7 +259,7 @@
   }
 
   .all {
-    color: $mian-color;
+    color: $text-price;
     width: 160rpx;
     text-align: center;
   }
@@ -264,8 +269,8 @@
     background-color: #fff;
     box-shadow: 0 0 30rpx 1rpx rgba($color: #000000, $alpha: 0.2);
     margin: $margin*1.4;
-    border-radius: $radius*1.5;
+    border-radius: 20rpx;
-    padding: $padding*1.4;
+    padding: $padding*1.4 ;
     font-size: $title-size-m;
 
     .item-name {
@@ -274,7 +279,7 @@
       color: #303030;
       font-weight: bold;
       margin-bottom: $margin;
-      font-size: $title-size *1.4;
+      font-size: $title-size *1.2;
     }
 
     .item {
@@ -305,7 +310,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      padding: $padding*2 0 0 0;
+      padding: $padding*1 0 0 0;
       color: #3a3a3a;
 
       .total {
@@ -328,12 +333,11 @@
   }
 
   .btn {
-    // background-color: $text-price;
+	background-image: linear-gradient(to right, #7c52fc, #976dff);
-	background-image: linear-gradient(to right, $text-price, $mian-color);
     color: #fff;
-    border-radius: 50rpx;
+    border-radius: 10rpx;
     text-align: center;
-    padding: $padding ;
+    padding: $padding * .9 ;
     margin: $margin * 2;
     font-size: $title-size;
     font-weight: bold;

pages/wallet/fragment.vue

@@ -0,0 +1,338 @@
+<template>
+	<view class="Record">
+		<view class="record-top">
+			<image src="/static/imgs/account-bg.png" mode="widthFix" class="record-bg" />
+			<view class="record-top-nav">
+				<view :class="['record-top-item',type==='year'?'selectTopItem':'']" 
+				@click="selectType('year')">年账单</view>
+				<view :class="['record-top-item',type==='month'?'selectTopItem':'']" 
+				@click="selectType('month')">月账单</view>
+				<view :class="['record-top-item',type==='day'?'selectTopItem':'']" 
+				@click="selectType('day')">日账单</view>
+			</view>
+			<view class="record-mouth-year">
+				<view class="record-type-right">
+					<view class="record-title">碎片个数</view>
+					<view class="record-money">{{account || '0.00'}} <span>个</span> </view>
+				</view>
+				<view class="record-type-left">
+					<u-picker mode="time" v-model="show" :params="params" 
+					@confirm ='confirm' title ='筛选日期' start-year='2021' :end-year='currentYear'/>
+					<view @click="show = true">
+						{{date?date:'选择日期'}}
+						<uni-icons type="arrowdown" color="#fff" size="12" />
+					</view>
+				</view>
+			</view>
+			<!-- <view class="record-title">碎片个数</view>
+			<view class="record-money"><span>￥</span>{{account || '0.00'}}</view> -->
+		</view>
+		
+		<!-- 列表。。。 -->
+		<view class="record-list" v-if="lists.length>0">
+			<view class="record-list-item" v-for="(item,index) in lists" :key='index'>
+				<image src="/static/imgs/record-icon.png" mode="widthFix" class="record-icon" />
+				<view class="">
+					<view class="record-list-item-top">
+						<view class="title ellipsis-2">完成任务获得碎片</view>
+						<view class="money" >{{cointype==='in'?'+':'-'}}5</view>
+					</view>
+					<view class="record-list-item-date">2021-12-22 12:12:12</view>
+				</view>
+			</view>
+		</view>
+		<!-- 无列表 -->
+		<no-list v-if="lists.length === 0" name='no-record' txt="没有任何碎片记录 ~ " />
+		
+		<!-- <u-toast ref="uToast" /> -->
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import {chaineb} from '@/apis/interfaces/mine';
+	export default {
+		data() {
+			return {
+				lists:[1,1.1,1,1],
+				has_next_page:true,
+				page:1,
+				type:'year', // 统计类型day日，month月，year年
+				cointype:'in',// in 收入 out 支出
+				date:new Date().toISOString().slice(0,4), // 日：Y-m-d，月Y-m，年Y
+				params: {
+					year: true,
+					month: false,
+					day: false
+				},
+				show: false, // 显示
+				currentDay:new Date().toISOString().slice(0,10),
+				currentMonth:new Date().toISOString().slice(0,7),
+				currentYear:new Date().toISOString().slice(0,4),
+				account:''
+			}
+		},
+		onLoad(){
+			this.getList()
+		},
+		onReachBottom(){
+			if (this.has_next_page) {
+			  this.page = this.page + 1
+			  this.getList()
+			} else {
+			  this.$refs.uToast.show({
+			    title: '吼吼吼~我是有底的~',
+			    type: 'primary',
+			    duration: 3000
+			  })
+			}
+		},
+		methods: {
+			// 获取列表
+			getList(){
+				let data = {
+					page:this.page,
+					type:this.type,
+					date:this.date,
+					cointype:this.cointype
+				}
+				chaineb(data).then(res => {
+					this.account = res.account
+					this.lists = this.lists.concat(res.lists)
+					this.has_next_page = res.has_next_page
+				}).catch(err => {
+					this.$refs.uToast.show({
+						title: err.message,
+						type: 'primary',
+						duration: 3000
+					})
+				})
+			},
+			selectCoinType(type){
+				if(this.cointype !== type){
+					this.cointype = type
+					this.reset()
+				}
+			},
+			// 重置
+			reset(){
+				this.page = 1
+				this.lists = []
+				this.has_next_page = true
+				this.getList()
+			},
+			// 选择 年  月  日 切换要重置数据
+			selectType(type){
+				if(this.type !== type){
+					switch(type){
+						case 'year':
+							this.type = type
+							this.params= {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentYear
+							this.reset()
+							break;
+						case 'month':
+							this.type = type
+							this.params= {
+								year: true,
+								month: true,
+								day: false
+							}
+							this.date = this.currentMonth
+							this.reset()
+							break;
+						case 'day':
+							this.type = type
+							this.params= {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentDay
+							this.reset()
+							break;
+					}
+				}
+			},
+			// 点击确认按钮
+			confirm(e){
+				let type = this.type
+				switch(type){
+					case 'year':
+						this.date = e.year
+						this.reset()
+						break;
+					case 'month':
+						this.date = e.year + '-' + e.month
+						this.reset()
+						break;
+					case 'day':
+						this.date = e.year + '-' + e.month + '-' + e.day
+						this.reset()
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.Record {
+		width: 100%;
+		height: 100vh;
+		padding-top: 30rpx;
+		background-color: #fff;
+	}
+
+	.record-top {
+		width: calc(100% - 60rpx);
+		height: 360rpx;
+		background-image: linear-gradient(to right, #7c52fc, #976dff);
+		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #976dff, $alpha: 0.4);
+		margin: 0 30rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		position: relative;
+		padding: 10rpx 50rpx 20rpx 50rpx;
+		z-index: 1;
+
+		.record-bg {
+			position: absolute;
+			width: 100%;
+			bottom: 0;
+			right: 0;
+			z-index: 1;
+			opacity: .5;
+		}
+
+		.record-top-nav {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+
+			.record-top-item {
+				margin: 40rpx 20rpx;
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #fff;
+			}
+			.selectTopItem{
+				border-bottom: solid 4rpx #fff;
+			}
+		}
+
+		.record-mouth-year {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: space-between;
+			box-sizing: border-box;
+			position: relative;
+			z-index: 2;
+			color: #fff;
+			font-size: 30rpx;
+			margin-top: 20rpx;
+
+			.record-type-left {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+
+				uni-icons {
+					margin-left: 4rpx;
+				}
+			}
+
+			.record-type-right {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				justify-content: flex-start;
+				box-sizing: border-box;
+				font-size: 24rpx;
+				flex: 1;
+
+				.pay_type_item {
+					margin: 0 10rpx;
+					padding: 2rpx 20rpx;
+					border-radius: 30rpx;
+					border: solid 1rpx rgba($color: #000000, $alpha: 0);
+				}
+				.pay_type_item_select{
+					border: solid 1rpx #f7f7f7;
+				}
+			}
+		}
+
+		.record-title {
+			font-size: 28rpx;
+			color: #fff;
+			padding:0 0 20rpx 0;
+		}
+
+		.record-money {
+			color: #fff;
+			font-size: 60rpx; 
+			font-weight: bold;
+
+			span {
+				font-size: 24rpx;
+				font-weight: 400;
+				padding-left: 20rpx;
+				margin-right: 4rpx;
+			}
+		}
+	}
+
+	.record-list {
+		padding: 20rpx 30rpx;
+
+		.record-list-item {
+			padding: 20rpx 0;
+			border-bottom: solid 1rpx #f7f7f7;
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: flex-start;
+			box-sizing: border-box;
+			.record-icon{
+				width: 60rpx;
+				margin-right: 20rpx;
+			}
+			.record-list-item-top {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+				width: 600rpx;
+
+				.title {
+					font-size: 28rpx;
+					width: 600rpx;
+					color: #444;
+				}
+
+				.money {
+					color: #ee4c47;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+
+			.record-list-item-date {
+				font-size: 26rpx;
+				color: #a6a6a6;
+				margin-top: 10rpx;
+			}
+		}
+	}
+</style>

pages/wallet/property.vue

@@ -1,13 +1,15 @@
 <template>
 	<view class="propertyIndex">
 		<view class="propery">
+			<image src="/static/imgs/account-bg.png" mode="aspectFill" class="record-bg" />
 			<view class="propery-content">
 				<view class="currency">能量球 (≈ {{ price || '0' }} CNY)</view>
 				<view class="balance">{{ balance.balance || '0' }}</view>
 				<view class="frozen">{{ balance.frozen || '0' }} 冻结中</view>
 				<view class="balance-flex">
 					<view class="balance-flex-item" @click="showAddress">区块链地址</view>
-					<view class="balance-flex-item" @click="showPrivatekey('privatekey')">我的私钥</view>
+					<!-- <view class="balance-flex-item" @click="showPrivatekey('privatekey')">我的私钥</view> -->
+					<view class="balance-flex-item" @click="$Router.push({name: 'Extract'})">能量球提现</view>
 				</view>
 			</view>
 		</view>
@@ -241,18 +243,31 @@
 		position: relative;
 		padding-top: var(--status-bar-height);
 		background-image: linear-gradient(to right, #7c52fc, #976dff);
-
+		position: relative;
-		&::before {
+		overflow: hidden;
+		.record-bg {
 			position: absolute;
-			left: 0;
+			width: 120%;
-			top: 0;
+			height: 300rpx;
-			width: 100%;
+			bottom: -10rpx;
-			height: 100%;
+			right: -20rpx;
-			content: " ";
+			z-index: 1;
-			background-image: url(@/static/background/wallet-back.png);
+			opacity: .5;
-			background-size: 100%;
+			transform:rotate(-7deg);
-			background-repeat: no-repeat;
 		}
+		// &::before {
+		// 	position: absolute;
+		// 	left: 0;
+		// 	top: 0;
+		// 	width: 100%;
+		// 	height: 100%;
+		// 	content: " ";
+		// 	background-image: url(@/static/imgs/account-bg.png);
+		// 	background-size: 100%;
+		// 	background-repeat: no-repeat;
+		// 	opacity: .5;
+		// 	transform:rotate(0deg);
+		// }
 
 		.propery-content {
 			position: relative;
@@ -266,8 +281,8 @@
 			}
 
 			.balance {
-				font-size: $title-size * 2;
+				font-size: $title-size * 2.5;
-				padding: ($padding / 2) 0;
+				padding: $padding 0;
 				color: white;
 			}
 
@@ -275,18 +290,17 @@
 				background: rgba($color: #000000, $alpha: .1);
 				color: rgba($color: white, $alpha: .7);
 				display: inline-block;
-				padding: 0 $padding;
+				font-size: 24rpx;
-				font-size: $title-size-m;
+				padding: 6rpx $padding;
-				height: 50rpx;
-				line-height: 50rpx;
 				border-radius: $radius-m;
 				border: solid 1rpx rgba($color: white, $alpha: .4)
+				
 			}
 
 			.balance-flex {
 				display: flex;
 				justify-content: center;
-				margin-top: $margin * 3;
+				margin-top: $margin * 2;
 
 				.balance-flex-item {
 					background-color: white;
@@ -296,7 +310,7 @@
 					color: $text-price;
 					margin: 0 $margin;
 					border-radius: $radius-m;
-					font-size: $title-size;
+					font-size: 28rpx;
 				}
 			}
 		}