1.0yangche/pages/packageOne/user/share_friend/index/index.vue

<template>
	<view class="content">
		<view class="share_message">
			<view class="share_message_title">每邀请一位好友入驻可得</view>
			<view class="share_message_content">60元优惠券</view>
			<view class="share_message_small">好友入驻也可获得60元优惠券</view>
		</view>
		<button open-type="share" class="share_now">立即邀请</button>
		<!-- 我的邀请 -->
		<view class="my_share">
			<view class="my_share_title">我的邀请</view>
			<view class="my_share_title_small">已获得 <text>{{allData.totalMoney}}</text> 元奖励，成功邀请 <text>{{allData.peopleNum}}</text> 位新朋友入</view>
			<view class="my_share_list" v-if="totalMoney !== 0">
				<view class="my_share_list_item clear" v-for="item,index in allData.arr" :key="index">
					<view class="my_share_lf"><image :src="item.img"></image></view>
					<view class="my_share_rg">
						<view class="my_share_rg_top clear">
							<view class="my_share_rg_name">{{item.nickName}}</view>
							<view class="my_share_rg_text">{{item.enterTime}}</view>
						</view>
						<view class="my_share_rg_top clear">
							<view class="my_share_rg_name" style="font-size:26rpx;">{{item.phone}}</view>
							<view class="my_share_rg_text">{{item.msg}}</view>
						</view>
					</view>
			    </view>
			</view>
			<!-- 查看更多 -->
			<view class="look_more" @tap="lookMore">查看更多</view>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				allData:null,//页面所有数据
			}
		},
		onLoad() {
			this.getData();
		},
		onShareAppMessage(res){
			if(res.from === 'button'){
			    // console.log(res)
			    let token = app.globalData.token;
			    return {
					
			        title: '附近养车网',
			
			        desc: '邀请好友入驻可得30元优惠券哦',
			
			        path: '/pages/packageOne/service/serviceView/serviceView?token=' + token // 路径，传递参数到指定页面
			    }
			}
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserMyShare(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//查看更多
			lookMore(){
				uni.navigateTo({
					url:'../list/list'
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display: block;
		clear: both;
	}
	page{
	  width:100%;
	  height:100%;
	}
	.content{
	  width:100%;
	  height:100%;
	  background:url('https://wx.fujinyangche.com/nvrnetwork/images/share_friend_back.png') no-repeat;
	  background-size: 100% 100%;
	  overflow: hidden;
	  position: relative;
	  overflow-y: scroll;
	}
	.back_image{
	  width:100%;
	  height:100%;
	}
	.active_rule{
	  width:130rpx;
	  height:44rpx;
	  background:rgba(255,255,255,1);
	  border-radius:22rpx;
	  opacity:0.4;
	  text-align: center;
	  line-height: 44rpx;
	  font-size: 24rpx;
	  color:#EFC666;
	  position: absolute;
	  z-index:100;
	  right:30rpx;
	  top:30rpx;
	}
	.share_message{
	  width:638rpx;
	  height:656rpx;
	  overflow: hidden;
	  margin:108rpx auto 0;
	  background:url('https://wx.fujinyangche.com/nvrnetwork/images/share.png') no-repeat;
	  background-size: 100%,100%;
	}
	.share_message_title{
	  font-size: 32rpx;
	  color:#000000;
	  text-align: center;
	  margin-top:78rpx;
	}
	.share_message_content{
	  font-size: 60rpx;
	  color:#E5471F;
	  font-weight: bold;
	  text-align: center;
	  margin-top:10rpx;
	}
	.share_message_small{
	  font-size: 22rpx;
	  color:#5A5A5A;
	  text-align: center;
	  font-weight: bold;
	  margin-top:24rpx;
	}
	.share_now{
	  width:640rpx;
	  height:94rpx;
	  background:linear-gradient(122deg,rgba(253,227,146,1) 0%,rgba(239,198,102,1) 100%);
	  box-shadow:0px 16rpx 40rpx 0px rgba(158,6,0,0.29);
	  border-radius:48rpx;
	  text-align: center;
	  line-height: 94rpx;
	  font-size: 38rpx;
	  color:#F02526;
	  font-weight: bold;
	  margin:28rpx auto 0;
	}
	.my_share{
	  width:100%;
	  margin-top:60rpx;
	  padding-bottom: 100rpx;
	  box-sizing:border-box;
	}
	.my_share_title{
	  text-align: center;
	  font-size: 30rpx;
	  color:#EFC666;
	  padding:0 32rpx;
	}
	.my_share_list{
	  padding:0 56rpx;
	  box-sizing: border-box;
	  margin-bottom:50rpx;
	  margin-top:50rpx;
	  /* height:420rpx; */
	  overflow: hidden;
	}
	.my_share_list_item{
	  width:100%;
	  margin-bottom: 50rpx;
	}
	.my_share_lf{
	  float:left;
	  width:106rpx;
	  height:106rpx;
	}
	.my_share_lf image{
	  display: block;
	  width:100%;
	  height:100%;
	  border-radius: 50%;
	  border:2rpx solid rgba(255,213,164,1);
	}
	.my_share_rg{
	  width:calc(100% - 126rpx);
	  float:left;
	  height:106rpx;
	  overflow: hidden;
	  margin-left: 20rpx;
	}
	.my_share_rg_top{
	  font-size: 26rpx;
	  color:#EFC666;
	  margin-top:8rpx;
	}
	.my_share_rg_name{
	  float:left;
	  font-size: 32rpx;
	}
	.my_share_rg_text{
	  float:right;
	}
	.look_more{
	  width:240rpx;
	  height:60rpx;
	  border-radius:6rpx;
	  border:1px solid rgba(239,200,102,1);
	  box-sizing: border-box;
	  text-align: center;
	  line-height: 60rpx;
	  font-size: 24rpx;
	  color:#EFC866;
	  margin:10rpx auto 0;
	}
	.my_share_title_small{
	  text-align: center;
	  font-size: 20rpx;
	  color:#C1C1C1;
	  margin-top:10rpx;
	}
	.my_share_title_small text{
	  color:#F6C552;
	}
</style>