no message

components/dgex-tantan/dgex-tantan.vue

@@ -300,7 +300,6 @@
 				this.y.start = e.touches[0].pageY;
 			},
 			touchMove(e, index) {
-
 				if (this.slideing) return
 				if (this.isSlide) return
 				// 滑动状态/最后一个就不滑动

main.js

@@ -10,8 +10,8 @@ Vue.use(router)
 import Vue from 'vue'
 import store from './store'
 import Nav from './components/en-utils/en-nav/en-nav.vue'
+Vue.component('Nav', Nav);
 
-Vue.component('Nav', Nav)
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({

pages.json

@@ -369,6 +369,14 @@
 	    "navigationBarTitleText": "",
 	    "enablePullDownRefresh": false
 	  }
+	},
+	{
+	  "path": "pages/wallet/gift-wall",
+	  "style": {
+	    "navigationBarTitleText": "",
+	    "enablePullDownRefresh": false,
+		"navigationBarTextStyle": "white"
+	  }
 	}
   ],
   "globalStyle": {

pages/my/index.vue

@@ -35,7 +35,7 @@
               </view>
             </view>
             <view class="content-statistics">
-              <view class="statistics-item">
+              <view class="statistics-item" @click="goToUrl(4)">
                 <view class="statistics-num sys-color-black sys-weight-600">431
                   <view class="statistics-dot sys-color-white">1</view>
                 </view>
@@ -146,6 +146,11 @@ export default {
 		  })
 	  }else if(type === 3){
 		  // 波点兑换
+	  }else if(type === 4){
+		  // 礼物墙
+		  uni.navigateTo({
+		    'url':'/pages/wallet/gift-wall'
+		  })
 	  }
     }
   }

pages/wallet/bill.vue

@@ -1,15 +1,213 @@
 <template>
-	<view>
-		账单
+	<view class="bill-box flex-common-css box-sizing-border iPhone-bottom">
+		<Nav title='账单' titleColor='#333'></Nav>
+		<view class="box-head">
+			<view class="box-head-1">
+				<view class="sys-size-32 view-box" :class="navId === item.id?'sys-color-black-3 sys-weight-600':'sys-color-gray-9'"
+				v-for="(item,i) in navList" :key="i" @click="selectTo(1,item,i)">{{item.name}}</view>
+				<view class="xian" :class="navIndex === 0?'left-1':'left-2'"></view>
+			</view>
+			<view class="box-head-2 box-sizing-border">
+				<view class="date-view sys-size-28 sys-color-gray-3" @click="selectTo(2)">
+					{{fromData.time}}
+					<uni-icons class='ml-4' type="bottom" size="12" color="#333"></uni-icons>
+				</view>
+				<view class="sys-size-28 sys-color-gray-9">仅展示当月订单</view>
+			</view>
+		</view>
+		<view v-if="false" class="no-view sys-size-40 sys-color-gray-9">暂无数据</view>
+		<scroll-view v-else scroll-y="true" class="box-sizing-border list-scroll">
+			<view class="list-box" v-for="(item,i) in 10" :key="i">
+				<image v-if="navIndex===0" src="@/static/img/wallet/j.png" mode=""></image>
+				<image v-else src="@/static/img/wallet/bb.png" mode=""></image>
+				<view class="box-right">
+					<view class="box-right-1 mb-4">
+						<view class="sys-size-32 sys-color-gray-3">收益</view>
+						<view class="sys-size-36 sys-color-4BC285 sys-weight-600">+100</view>
+						<!-- <view class="sys-size-36 sys-color-gray-3 sys-weight-600">-100</view> -->
+					</view>
+					<view class="sys-size-24 sys-color-gray-9">4月23日 12:06</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		
+		<view class="pop-view" v-if="isPop">
+			<view class="pop-1"></view>
+			<view class="pop-title sys-size-32 sys-color-gray-3 sys-weight-600 sys-background-gray-f">
+				选择时间
+				<uni-icons class='close-icon' type="closeempty" size="14" color="#333" @click="selectTo(2)"></uni-icons>
+			</view>
+			<view class="pop-list sys-background-gray-f">
+				<view class="list-box sys-size-26" v-for="(item,i) in dateList" @click="selectTo(2,item)">{{item}}</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import tools from "@/service/tools";
 	export default {
-		
+		data(){
+			return{
+				isPop:false,
+				page:1,
+				total:0,
+				list:[],
+				navId:1,
+				navIndex:0,
+				navList:[{name:'JM币',id:1},{name:'波点',id:2},],
+				dateList:[],
+				endTime:'',
+				fromData:{
+					time:'',
+				},
+			}
+		},
+		mounted() {
+			this.endTime = tools.getDateYM();
+			this.fromData.time = this.endTime;
+			this.dateList = tools.getCustomTimeList('2020-01',this.endTime,'y-m')
+		},
+		methods:{
+			selectTo(type,item,i){
+				if(type === 1){
+					if(this.navId != item.id){
+						this.navId = item.id;
+						this.navIndex = i;
+						this.fromData.time = this.endTime;
+						this.page = 1;
+						this.list = [];
+					}
+				}else if(type === 2){
+					if(item){
+						this.fromData.time = item;
+						this.page = 1;
+						this.list = [];
+					}
+					this.isPop = !this.isPop;
+				}
+			},
+		},
 	}
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+	.bill-box{
+		.ml-4{
+			margin-left: 4rpx;
+		}
+		.mb-4{
+			margin-bottom: 4rpx;
+		}
+		
+		.pop-view{
+			width: 100%;
+			height: 100vh;
+			background-color: rgba(0, 0, 0, 0.5);
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 201;
+			display: flex;
+			flex-direction: column;
+			.pop-1{
+				height: 30%;
+			}
+			.pop-title{
+				height: 90rpx;
+				line-height: 90rpx;
+				text-align: center;
+				border-bottom: 1px solid #e3e3e3;
+				position: relative;
+				border-radius: 16rpx 16rpx 0 0;
+				.close-icon{
+					position: absolute;
+					right: 32rpx;
+				}
+			}
+			.pop-list{
+				flex: 1;
+				overflow: auto;
+				.list-box{
+					height: 90rpx;
+					line-height: 90rpx;
+					text-align: center;
+					border-bottom: 1px solid #e3e3e3;
+				}
+			}
+		}
+		
+		.no-view{
+			text-align: center;
+			margin-top: 200rpx;
+		}
+		.list-scroll{
+			flex: 1;
+			overflow: auto;
+			padding: 8rpx 32rpx;
+			.list-box{
+				box-sizing:  border-box;
+				padding: 32rpx 0;
+				border-bottom: 1rpx solid #EEEEEE;
+				display: flex;
+				image{
+					width: 96rpx;
+					height: 96rpx;
+					margin-right: 20rpx;
+				}
+				.box-right{
+					flex: 1;
+					.box-right-1{
+						display: flex;
+						justify-content: space-between;
+					}
+					
+				}
+			}
+		}
+		.box-head{
+			.box-head-1{
+				width: 100%;
+				height: 94rpx;
+				display: flex;
+				position: relative;
+				border-bottom: 1rpx solid #EEEEEE;
+				.view-box{
+					flex: 1;
+					line-height: 94rpx;
+					text-align: center;
+				}
+				.xian{
+					width: 40rpx;
+					height: 4rpx;
+					background-color: #333;
+					position: absolute;
+					bottom: 0;
+				}
+				.left-1{
+					left: 168rpx;
+					transition: all 0.5s;  
+				}
+				.left-2{
+					left: 545rpx;
+					transition: all 0.5s;  
+				}
+			}
+			.box-head-2{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 38rpx 32rpx 0 32rpx;
+				.date-view{
+					width: 200rpx;
+					height: 56rpx;
+					line-height: 56rpx;
+					text-align: center;
+					background: #F2F2F2;
+					border-radius: 200rpx;
+				}
+			}
+		}
+	}
 </style>

pages/wallet/gift-wall.vue

@@ -0,0 +1,46 @@
+<template>
+	<view class="gift-wall-box flex-common-css box-sizing-border iPhone-bottom sys-background-black">
+		<Nav title='礼物墙' titleColor='#fff' bgckgroundBox='#141414'></Nav>
+		<view class="info-box box-sizing-border">
+			<view class="box-head">
+				
+			</view>
+			<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="scrolltolower">
+				<view></view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				info:{},
+				list:[],
+				total:0,
+				page:1,
+			}
+		},
+		methods:{
+			scrolltolower(){
+				console.log('触底');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.gift-wall-box{
+		.info-box{
+			flex: 1;
+			overflow: auto;
+			padding: 32rpx;
+			display: flex;
+			flex-direction: column;
+			.box-head{
+				
+			}
+		}
+	}
+</style>

pages/wallet/model/income.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="index">
-			<image class="index-bg" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
+			<image class="index-bg" src="@/static/img/wallet/bg.png" mode="scaleToFill"></image>
 			<view class="head-money">
 				<view class="sys-color-794B06 sys-size-28">我的波点（个）</view>
 				<view class="head-mongy-1">
@@ -19,7 +19,7 @@
 					<ColumnEcharts ref="columnEcharts"></ColumnEcharts>
 				</view>
 			</view>
-			<image class="crad-f" src="@/static/img/perfect/img2.png" mode="scaleToFill" @click="selectFun(1)"></image>
+			<image class="crad-f" src="@/static/img/wallet/ad-1.png" mode="scaleToFill" @click="selectFun(1)"></image>
 			<view class="card-b">
 				<view class="sys-background-FE6915 sys-radius-16 sys-size-32 sys-color-white sys-weight-600" @click="selectFun(2)">兑换JM币</view>
 				<view class="sys-radius-16 tx-view sys-size-32 sys-color-FE6915 sys-weight-600" @click="selectFun(3)">提现</view>
@@ -105,6 +105,7 @@
 			width: 100%;
 			height: 160rpx;
 			border-radius: 20rpx;
+			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
 		}
 		.card-b{
 			margin-top: 20rpx;

pages/wallet/model/recharge.vue

@@ -1,11 +1,11 @@
 <template>
 	<view>
 		<view class="index">
-			<image class="index-bg" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
+			<image class="index-bg" src="@/static/img/wallet/bg.png" mode="scaleToFill"></image>
 			<view class="head-money">
 				<view class="sys-color-794B06 sys-size-28">我的JM币</view>
 				<view class="head-mongy-1">
-					<image src="@/static/img/tabBar/index.png" mode=""></image>
+					<image src="@/static/img/wallet/j.png" mode=""></image>
 					<view class="sys-size-52 sys-color-362100 sys-weight-600">138</view>
 				</view>
 			</view>
@@ -20,7 +20,7 @@
 				@click="selectFun(1,item)"
 				v-for="(item,i) in list" :key="i">
 					<view class="list-top">
-						<image src="@/static/img/tabBar/index.png" mode=""></image>
+						<image src="@/static/img/wallet/b.png" mode=""></image>
 						<view class="sys-size-40 sys-color-gray-3 sys-weight-600">{{item.b}}</view>
 					</view>
 					<view class="sys-size-24 sys-color-gray-6">￥{{item.money}}</view>
@@ -29,22 +29,28 @@
 			</view>
 			<view class="m-26 sys-size-24 sys-color-gray-9" @click="selectFun(2)">充值即代表同意《积且充值协议》</view>
 			<view class="card-button sys-background-41AAEE sys-size-32 sys-color-white" @click="selectFun(3)">
-				<image src="@/static/img/tabBar/index.png" mode=""></image>支付宝支付
+				<image src="@/static/img/wallet/zfb-logo.png" mode="scaleToFill"></image>支付宝支付
 			</view>
 			<view class="card-button sys-background-6DCF06 sys-size-32 sys-color-white" @click="selectFun(4)">
-				<image src="@/static/img/tabBar/index.png" mode=""></image>微信支付
+				<image src="@/static/img/wallet/wx-logo.png" mode="scaleToFill"></image>微信支付
 			</view>
 			
 			<view class="sys-size-32 sys-color-gray-3 sys-weight-600">我的道具</view>
-			<image class="crad-f" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
+			<image class="crad-f" src="@/static/img/wallet/ad-2.png" mode="scaleToFill" @click="selectFun(5)"></image>
 		</view>
+		
+		<SmallPaper v-if="isOpen" @close='close'></SmallPaper>
 	</view>
 </template>
 
 <script>
+	import SmallPaper from './small-paper.vue';
+	
 	export default {
+		components:{SmallPaper},
 		data(){
 			return{
+				isOpen:false,
 				fromData:{
 					moneyId:1,
 				},
@@ -60,15 +66,21 @@
 		methods:{
 			selectFun(type,item){
 				if(type === 1){
-					this.fromData.moneyId = item.id
+					this.fromData.moneyId = item.id;
 				}else if(type === 2){
 					// 积且充值协议跳转
 				}else if(type === 3){
 					// 支付宝支付
 				}else if(type === 4){
 					// 微信支付
+				}else if(type === 5){
+					// 购买小纸条
+					this.isOpen = true;
 				}
 			},
+			close(e){
+				this.isOpen = false;
+			},
 		},
 	}
 </script>
@@ -162,6 +174,7 @@
 			height: 160rpx;
 			border-radius: 20rpx;
 			margin-top: 34rpx;
+			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
 		}
 	}
 </style>

pages/wallet/model/small-paper.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="paper-index box-sizing-border">
+		<view class="close-box sys-background-gray-f">
+			<uni-icons type="closeempty" size="14" @click="to(1)"></uni-icons>
+		</view>
+		<view class="box-info box-sizing-border">
+			<view class="box-1">
+				<image src="@/static/img/wallet/people.png" mode="scaleToFill"></image>
+				<view class="box-2 mb-8 sys-size-40 sys-color-white sys-weight-600">小纸条</view>
+			</view>
+			<view class="mb-38 sys-size-28 sys-color-white">直接私信留言</view>
+			
+			
+			<scroll-view scroll-x="true" class="scroll-list-x sys-background-gray-f box-sizing-border">
+				<view v-if="false" class="list-n sys-size-28 sys-color-gray-9 sys-weight-600">暂无数据</view>
+				<view v-else class="list-box" v-for="(item,i) in list" :key="i" @click="to(4,item)"
+				:class="shopId===item.id?'view-s':'view-n'">
+					<view class="incon-s" v-if="shopId===item.id">
+						<image src="@/static/img/wallet/icon-s.png" mode=""></image>
+						<text class="sys-size-20 sys-color-white">立省35元</text>
+					</view>
+					<view class="incon-s" v-else>
+						<image src="@/static/img/wallet/icon-n.png" mode=""></image>
+						<text class="sys-size-20 sys-color-white">立省35元</text>
+					</view>
+					<view :class="shopId===item.id?'sys-color-FE6915':'sys-color-gray-9'" class="sys-size-28 mt-60">50个</view>
+					<view class="m-8">
+						<text class="sys-size-24 sys-color-FE6915">￥</text>
+						<text class="sys-size-48 sys-color-FE6915 sys-weight-600">9.9</text>
+					</view>
+					<view :class="shopId===item.id?'sys-color-FE6915':'sys-color-gray-9'" class="sys-size-28">2元/个</view>
+				</view>
+			</scroll-view>
+		</view>
+		
+		<view class="info-b">
+			<view class="card-button sys-background-41AAEE sys-size-32 sys-color-white" @click="to(2)">
+				<image src="@/static/img/wallet/zfb-logo.png" mode="scaleToFill"></image>支付宝支付
+			</view>
+			<view class="card-button sys-background-6DCF06 sys-size-32 sys-color-white" @click="to(3)">
+				<image src="@/static/img/wallet/wx-logo.png" mode="scaleToFill"></image>微信支付
+			</view>
+		</view>
+		<view class="sys-size-24 sys-color-white info-1">会员特惠补充装，给你更多的动心</view>
+		<view class="sys-size-22 sys-color-4BC285 info-1" @click="to(5)">《常见问题》</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:'small-paper',
+		data(){
+			return{
+				shopId:2,
+				list:[{id:1},{id:2},{id:1},{id:1},{id:1},{id:1},],
+			}
+		},
+		mounted() {
+			console.log('加载1');
+		},
+		methods:{
+			to(type,item){
+				if(type === 1){
+					this.$emit('close')
+				}else if(type === 4){
+					// 选择
+				}else if(type === 2){
+					// 支付宝
+				}else if(type === 3){
+					// 微信
+				}else if(type === 5){
+					// 常见问题
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.paper-index{
+		width: 100%;
+		height: 100vh;
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: rgba(0,0,0,0.65);
+		z-index: 100;
+		padding: 148rpx 32rpx 0 32rpx;
+		.mb-8{
+			margin-bottom: 8rpx;
+		}
+		.mb-38{
+			margin-bottom: 38rpx;
+		}
+		.mt-60{
+			margin-top: 60rpx;
+		}
+		.m-8{
+			margin: 8rpx 0;
+		}
+		.info-1{
+			margin-bottom: 12rpx;
+			text-align: center;
+		}
+		.info-b{
+			display: flex;
+			justify-content: space-between;
+			.card-button{
+				width: 333rpx;
+				height: 88rpx;
+				border-radius: 16rpx;
+				line-height: 88rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin: 24rpx 0;
+				image{
+					width: 32rpx;
+					height: 32rpx;
+					margin-right: 8rpx;
+				}
+			}
+		}
+		.close-box{
+			width: 48rpx;
+			height: 48rpx;
+			text-align: center;
+			line-height: 48rpx;
+			border-radius: 50%;
+			margin-left: auto;
+			margin-bottom: 24rpx;
+		}
+		.box-info{
+			width: 100%;
+			min-height: 950rpx;
+			background: #F0B503;
+			border-radius: 16rpx;
+			padding: 44rpx 24rpx 24rpx 24rpx;
+			text-align: center;
+			.box-1{
+				width: 485rpx;
+				height: 485rpx;
+				margin: 0 auto;
+				position: relative;
+				.box-2{
+					position: absolute;
+					bottom: 10rpx;
+					left: 178rpx;
+				}
+				image{
+					width: 485rpx;
+					height: 485rpx;
+				}
+			}
+		}
+		.scroll-list-x{
+			width: 100%;
+			height: 324rpx;
+			border-radius: 20rpx;
+			padding: 40rpx 32rpx;
+			display: flex;
+			white-space: nowrap;
+			.list-n{
+				line-height: 324rpx;
+			}
+			.list-box{
+				display: inline-block;
+				width: 182rpx;
+				height: 244rpx;
+				border-radius: 20rpx;
+				margin: 0rpx 8rpx;
+				box-sizing: border-box;
+				position: relative;
+				.incon-s{
+					width: 140rpx;
+					height: 40rpx;
+					position: absolute;
+					left: -6rpx;
+					top: 0;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					text{
+						position: absolute;
+						top: 2rpx;
+						left:14rpx;
+					}
+				}
+			}
+			.view-n{
+				border: 2rpx solid #E0E0E0;
+			}
+			.view-s{
+				border: 2rpx solid rgba(254, 215, 124, 1);
+				background: linear-gradient(180deg, #FEFAEE 0%, rgba(255,247,221,0.94) 100%);
+			}
+		}
+	}
+</style>

service/tools.js

@@ -278,4 +278,57 @@ tools.leftClick = function () {
     }
 }
 
+/**
+ * 自定义 获取指定日期到当前日期的 所有年 or 年月 
+ */
+tools.getCustomTimeList = (start,end,type)=>{
+	let timeList = [];
+	let s = start.split("-");
+	let e = end.split("-");
+	let min = new Date()
+	let max = new Date()
+	min.setFullYear(s[0], s[1]);
+	max.setFullYear(e[0], e[1]);
+	var curr = min;
+	var str = "";
+	while (curr <= max) {
+		var yers = curr.getFullYear();
+		var month = curr.getMonth();
+		if(type === 'y-m'){
+			if (month === 0) {
+				str = (yers - 1) + "-" + 12;
+			} else { 
+				str = yers + "-" + (month < 10 ? ("0" + month) : month);
+			}
+			timeList.push(str);
+			curr.setMonth(month + 1);
+		}else if(type === 'y'){
+			if (month === 0) {
+				str = (yers - 1)
+			} else { 
+				str = yers
+			}
+			timeList.push(str);
+			curr.setMonth(month + 1);
+		}else{}
+	}
+	if(type === 'y-m'){
+		return timeList.reverse()
+	}else{
+		let list = Array.from(new Set(timeList))
+		return list.reverse()
+	}
+}
+
+// 获取 当前 年-月 配合 getCustomTimeList 使用 获取end
+
+tools.getDateYM = ()=>{
+	let DATE = new Date()
+	let Y = DATE.getFullYear()
+	let M = DATE.getMonth() + 1
+	return Y + '-' + (M<10?'0'+M:M)
+}
+
+
+
 export default tools

static/css/sys.css

@@ -111,6 +111,9 @@
 .sys-color-FE6915{
   color: #FE6915;
 }
+.sys-color-4BC285{
+  color: #4BC285;
+}