Browse Source

1.给授权接口添加invited参数
2.添加获取分享次数接口
3.修改个人中心文本及布局
4.添加查看分享明细页面及逻辑

306132416@qq.com 6 years ago
parent
commit
a9222377cf

+ 2 - 1
App.vue

@@ -18,7 +18,8 @@
 			times:'',
 			total_times:'',
 			isAndroid:Boolean,
-			isIos:false
+			isIos:false,
+			globalShareCounts:10,
 		},
 		onLaunch: function() {
 			console.log('App Launch')

+ 152 - 0
components/ms-tabs/ms-tabs.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="tabBlock" v-if="type.length > 0">
+		<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
+			<view class="tab" id="tab_list">
+				<view v-for="(item, index) in type"
+					  :key="index"
+					  :class="['tab__item', {'tab__item--active': currentIndex === index}]"
+					  :style="{color: (currentIndex === index ? `${itemColor}`: '')}"
+					  id="tab_item"
+					  @click="select(item, index)"
+				>
+					<view class="tab__item-title">
+						{{item.title}}
+					</view>
+				</view>
+			</view>
+			<view class="tab__line" 
+				  :style="{background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}">
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: [Number, String],
+			type: { // 传值
+				type: Array,
+				default: ()=> {
+					return []
+				}
+			},
+			itemColor: String, // tab主色调
+			lineColor: String ,// 下划线主色调
+			lineAnimated: { // 是否展示下划线动画
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				lineStyle: {},
+				scrollLeft: 0,
+				tabsScrollLeft: 0,
+				duration: 0.3
+			}
+		},
+		watch: {
+			type() {
+				this.setTabList()
+			},
+			value() {
+				this.currentIndex = this.value
+				this.setTabList()
+			}
+		},
+		mounted() {
+			this.currentIndex = this.value
+			this.setTabList()
+			if(!this.lineAnimated) {
+				this.duration = 0
+			}
+		},
+		methods: {
+			select(item, index) {
+				this.$emit('input', index)
+			},
+			setTabList() {
+				this.$nextTick(()=>{
+					if(this.type.length > 0) {
+						this.setLine()
+						this.scrollIntoView()
+					}
+				})
+			},
+			setLine() {
+				let lineWidth = 0, lineLeft = 0
+				this.getElementData(`#tab_item`, (data)=> {
+					let el = data[this.currentIndex]
+					lineWidth = el.width / 2
+					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
+					lineLeft = el.width / 2 + (-data[0].left) + el.left
+					this.lineStyle = {
+						width: `${lineWidth}px`,
+						transform: `translateX(${lineLeft}px) translateX(-50%)`,
+						transitionDuration: `${this.duration}s`
+					};
+				})
+			},
+			scrollIntoView() {  // item滚动
+				let lineLeft = 0;
+				this.getElementData('#tab_list', (data)=> {
+					let list = data[0]
+					this.getElementData(`#tab_item`, (data)=> {
+						let el = data[this.currentIndex]
+						// lineLeft = el.width * (this.currentIndex + 0.5) - list.width / 2 - this.scrollLeft
+						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
+						this.tabsScrollLeft = this.scrollLeft + lineLeft
+					})
+				})
+			},
+			getElementData(el, callback){
+				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
+					callback(data[0]);
+				});
+			},
+			scroll(e) {
+				this.scrollLeft = e.detail.scrollLeft;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.tabBlock {
+		position: relative;
+		background: #fff;
+		.tab {
+			position: relative;
+			display: flex;
+			font-size: 28rpx;
+			padding-bottom: 15rpx;
+			white-space: nowrap;
+			&__item {
+				flex: 1;
+				// width: 30%;
+				text-align: center;
+				line-height: 90rpx;
+				color: $uni-text-color;
+				&--active {
+					color: $uni-color-primary;
+				}
+				&-title {
+					margin: 0 40rpx;
+				}
+			}
+		}
+		.tab__line {
+			display: block;
+			height:6rpx;
+			position: absolute;
+			bottom: 15rpx;
+			left: 0;
+			z-index: 1;
+			border-radius: 3rpx;
+			position: relative;
+			background: $uni-color-primary;
+		}
+	}
+</style>

+ 6 - 0
pages.json

@@ -62,6 +62,12 @@
 			}
 		}
 		
+        ,{
+            "path" : "pages/selfInfo/shareDetail/shareDetail",
+            "style" : {
+            	"navigationBarTitleText": "查询次数明细"
+            }
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 7 - 7
pages/index/index.vue

@@ -76,7 +76,7 @@
 			      		<view class="uni-share-content-image">
 			      		 	<image src="/static/icon/share-icon.png" class="image" />
 			      		 </view>
-			      		<view class="uni-share-content-text">邀好友奖查询次数</view>
+			      		<view class="uni-share-content-text">去分享</view>
 			      </view>
 			      
 				<!--  <view  class="uni-share-content-box" @click.stop='tabVoice' >
@@ -189,8 +189,9 @@
 		 },
 		 
 		onLoad(options) {
-			console.log(options)
-			this.inviteId = options.inviteId
+			if(options.inviteId){
+				this.inviteId = options.inviteId;
+			}
 			this.userLogin();
 			this.getEquipmentHeight();
 		},
@@ -223,7 +224,7 @@
 					console.log("用户信息授权失败");
 					this.isShowAuthBtn = true;
 				}
-			},
+			},
 			loginUserInfo(){
 				let that = this;
 				uni.request({
@@ -241,8 +242,8 @@
 						headimg:getApp().globalData.user_headUrl,
 						iv:that.iv,
 						session_key:that.session_key,
-						encryptedData:that.encryptedData
-						
+						encryptedData:that.encryptedData,
+						invited:that.inviteId
 					},
 					success: res => {
 						that.isAuth = true;
@@ -271,7 +272,6 @@
 						timestamp: getApp().globalData.globalTimestamp, //Date.now()
 						code: res.code,
 						sign: md5('login' + getApp().globalData.globalTimestamp),
-					    invited:that.inviteId
 					},
 					success: res => {
 						// 通过openid发起会员登录

+ 53 - 6
pages/selfInfo/selfInfo.vue

@@ -11,12 +11,15 @@
 		<view class="self-search-box">
 			<view class="search-content">
 				<view class="search-content-value">{{userTime}}</view>
-				<view class="search-content-text">剩余查询次数(次)</view>
+				<view class="search-content-text">剩余查询(次)</view>
 			</view>
 			<view class="line"></view>
 			<view class="search-content">
 				<view class="search-content-value">{{userTotalTime}}</view>
-				<view class="search-content-text">总查询次数(次)</view>
+				<view class="search-content-text">累计查询(次)</view>
+			</view>
+			<view class="share-detail" @click.stop="goShareDetail">
+				<text>明细></text>
 			</view>
 		</view>
 		
@@ -48,7 +51,7 @@
 				    <text>邀好友</text>
 				</view>
 				<view style="margin-right: 2%;margin-top:2%;display: flex;">
-					<text style="font-size: 25upx;color:#999999;padding-right: 20rpx;">邀1人得10次查询机会</text>
+					<text style="font-size: 25upx;color:#999999;padding-right: 20rpx;">邀1人得{{shareCounts}}次查询机会</text>
 					<image src="../../static/icon/arrowIcon.png" mode="" style="width: 32upx;height:32upx;"></image>
 				</view>
 			</view>
@@ -80,10 +83,12 @@
 				userHeadUrl:getApp().globalData.user_headUrl,
 				userTime:getApp().globalData.times,
 				userTotalTime:getApp().globalData.total_times,
-				isIos:getApp().globalData.isIos
+				isIos:getApp().globalData.isIos,
+				shareCounts:'10',
 			}
 		},
 		onLoad() {
+			this.getShareCounts();
 		},
 		onShow(){
 			this.getUserTimes();
@@ -104,6 +109,34 @@
 					this.isShowAuthBtn = true;
 				}
 			},
+			getShareCounts(){
+				let that = this;
+				uni.request({
+					url:getApp().globalData.shareUrl, //需要设置为全局
+					method: 'POST',
+					header: {
+						'content-type': 'application/x-www-form-urlencoded'
+					},
+					data: {
+						method: 'get_invite_rule',
+						timestamp: getApp().globalData.globalTimestamp, //Date.now()
+						uid:getApp().globalData.user_id,
+						sign: md5('get_invite_rule' + getApp().globalData.globalTimestamp),
+					},
+					success: res => {
+						getApp().globalData.globalShareCounts = res.data.msg || 10;
+						that.shareCounts = res.data.msg || 10
+					} 
+				});
+			},
+			goShareDetail(){
+				uni.navigateTo({
+					url: '/pages/selfInfo/shareDetail/shareDetail',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
 			getUserTimes(){
 				let that = this;
 				uni.request({
@@ -228,13 +261,25 @@
 	}
 	
 	.self-search-box {
-		height: 200upx;
+		height: 230upx;
 		width: 85%;
 		background: #fff;
 		margin-top: 5%;
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
+		position: relative;
+	}
+	
+	.share-detail {
+		position: absolute;
+		top: 175upx;
+		right: 10upx;
+	}
+	.share-detail text {
+		font-size: 26upx;
+		text-decoration: underline;
+		color: #999;
 	}
 	.line {
 		height: 150rpx;
@@ -256,8 +301,9 @@
 		font-size: 42rpx;
 	}
 	.search-content-text {
-		color: #888;
+		color:#000;
 		font-size: 26rpx;
+		margin-top: -10%;
 	}
 	.self-pay-box {
 		height: 200upx;
@@ -315,4 +361,5 @@
 	.setting-content-text text {
 		font-size:30rpx;
 	}
+	
 </style>

+ 151 - 0
pages/selfInfo/shareDetail/shareDetail.vue

@@ -0,0 +1,151 @@
+<template>
+	<view>
+		<ms-tabs :type="type" v-model="active" lineAnimated="true" @input='switchTabs'></ms-tabs>
+		<view class="content">
+			<view v-show="active===0">
+				<view class="dayGift-box" v-for="(day,index) in dayGiftList" :key='day.giftTime'>
+					<view>{{index + 1}}</view>
+					<view style="margin-left: -35%">{{day.giftTime}}</view>
+					<view style="color: #1AAD19;">+{{day.giftCounts}}次</view>
+				</view>
+		        <view class="dayGift-box" style="justify-content: center;" v-if="!dayGiftList.length">暂无明细</view>
+			</view>
+			<view v-show="active===1">
+				<view class="dayGift-box" v-for="(friend,index) in inviteFriendList" :key='friend.giftTime'>
+					<view>{{index + 1}}</view>
+					<view style="margin-left: -28%" class="flex-column">
+					    <view class="flex-row">
+							<image :src="friend.friendHead" mode="aspectFit"></image>
+							<text>{{friend.friendName}}</text>
+						</view>
+						<view class="friend-time">{{friend.giftTime}}</view>
+					</view>
+					<view style="color: #1AAD19;">+{{friend.giftCounts}}次</view>
+				</view>
+			    <view class="dayGift-box" style="justify-content: center;" v-if="!inviteFriendList.length">暂无明细</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	var md5 = require("../../../common/md5.js");
+	import msTabs from '@/components/ms-tabs/ms-tabs.vue'
+	export default {
+		components: {
+			msTabs
+		},
+		data() {
+			return {
+				type: [{
+					title: '每日赠送次数'
+				}, {
+					title: '邀好友奖励次数'
+				}],
+				active: 0,
+				dayGiftList:[
+					// {
+					// 	giftTime:'2019.12.03 00:00',
+					// 	giftCounts:'3'
+					// },
+					// {
+					// 	giftTime:'2019.12.04 00:00',
+					// 	giftCounts:'3'
+					// },
+					// {
+					// 	giftTime:'2019.12.05 00:00',
+					// 	giftCounts:'3'
+					// },
+					],
+				inviteFriendList:[
+					{
+						friendHead:'/static/userDefault.png',
+						friendName:'小瓶子',
+						giftCounts:'10',
+						giftTime:'2019.12.05 00:00',
+					},
+					{
+						friendHead:'/static/userDefault.png',
+						friendName:'小瓶子',
+						giftCounts:'10',
+						giftTime:'2019.12.06 00:00',
+					},
+					{
+						friendHead:'/static/userDefault.png',
+						friendName:'小瓶子',
+						giftCounts:'10',
+						giftTime:'2019.12.07 00:00',
+					},
+				]
+			}
+		},
+		methods: {
+			switchTabs(){
+				console.log(this.active)
+			},
+			getDayRequest(){},
+			getFriendRequest(){},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		height:100%
+	}
+	.content {
+		height:100%;
+		background: #fff;
+		margin-bottom: 20rpx;
+		.title {
+			margin-left: 20rpx;
+			padding: 20rpx 0;
+			color: #818586;
+			border-bottom: 1px solid #f6f6f6;
+		}
+		.btn {
+			background: $uni-color-primary;
+			background: #007aff;
+			color: #fff;
+			padding: 20rpx;
+			display: inline-block;
+			border-radius: 10rpx;
+		}
+		.dayGift-box{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 28rpx;
+			padding: 20rpx;
+			border-bottom: 1px solid #ccc;
+		}
+		.flex-column {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.flex-row {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			width: 300rpx;
+		}
+		.flex-row image {
+			width: 60upx;
+			height: 60upx;
+			border-radius: 50%;
+			margin-right: 2%;
+		}
+		.friend-time {
+			font-size: 26upx;
+			color: #999;
+			margin-left: -15%;
+			width: 230rpx;
+			margin-top: 3%;
+		}
+	}
+	
+	
+
+</style>

+ 1 - 1
pages/share/rulePage/index.vue

@@ -68,7 +68,7 @@ page {
 	height: 100%;
 }
 .rule-box {
-	text-align: center;
+	text-align: left;
 	padding: 20upx;
 }
 </style>

+ 25 - 3
pages/share/sharePage.vue

@@ -8,11 +8,11 @@
 		     
 			 <view class="share-page-title">
 				 <view class="first-title">每 邀 请 一 位 新 用 户 获 取</view>
-				 <view class="second-title">10 次 查 询 次 数</view>
+				 <view class="second-title">{{shareCounts}} 次 查 询 次 数</view>
 			 </view>
 			 
 			<view class="invite-panel-box" style="margin-top: 80%;">
-				 <view>每邀请1人得10次查询机会,多邀多得</view>
+				 <view>每邀请1人得{{shareCounts}}次查询机会,多邀多得</view>
 				 <button  class="invite-bth" open-type="share">立 即 邀 请</button>
 				 <button type="warn" class="poster-bth" @click="sharePoster">分 享 海 报</button>
 			 </view>
@@ -65,10 +65,12 @@
 				userHeadUrl:getApp().globalData.user_headUrl,
 				userTime:getApp().globalData.times,
 				userTotalTime:getApp().globalData.total_times,
-				isIos:getApp().globalData.isIos
+				isIos:getApp().globalData.isIos,
+				shareCounts:10,
 			}
 		},
 		onLoad() {
+			this.getShareCounts()
 		},
 		onShow(){
 			//this.getUserTimes();
@@ -96,6 +98,26 @@
 					this.isShowAuthBtn = true;
 				}
 			},
+			getShareCounts(){
+				let that = this;
+				uni.request({
+					url:getApp().globalData.shareUrl, //需要设置为全局
+					method: 'POST',
+					header: {
+						'content-type': 'application/x-www-form-urlencoded'
+					},
+					data: {
+						method: 'get_invite_rule',
+						timestamp: getApp().globalData.globalTimestamp, //Date.now()
+						uid:getApp().globalData.user_id,
+						sign: md5('get_invite_rule' + getApp().globalData.globalTimestamp),
+					},
+					success: res => {
+						getApp().globalData.globalShareCounts = res.data.msg || 10;
+						that.shareCounts = res.data.msg || 10
+					} 
+				});
+			},
 			getUserTimes(){
 				let that = this;
 				uni.request({