odd_job_applet/pages/my/mycode.vue

<template>
	<view>
		
		<image class="echo-mycodeban" mode="widthFix" :src="param.mycodeban"></image>
		
		<view class="bg-blue padding-lr-xl padding-bottom-xl" :style="'min-height: calc(100vh); background-color: '+param.mycodecolor+';'">
			<view class="text-center bg-white margin-bottom-lg radius">
				<view class="text-xl padding-lr padding-top">
					<text class="text-black">我的邀请码</text>
				</view>
				<view class="text-center solid-bottom text-sm padding">
					<text class="text-grey">请被邀请人扫码完成注册登录</text>
				</view>
				<view class="padding">
					<image class="codeimg" mode="widthFix" @click="refCode" :src="userinfo.wxampcode"></image>
					<view class="flex flex-direction">
						<button class="cu-btn round bg-gray margin-top-sm lg" @tap="saveImage">保存我的邀请码</button>
					</view>
					<view class="flex flex-direction">
						<button class="cu-btn round bg-green margin-tb-sm lg" open-type="share">微信邀请</button>
					</view>
				</view>
			</view>			
			
			<scroll-view scroll-x class="bg-white radius nav">
				<view class="flex text-center solid-bottom">
					<view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @tap="tabSelect" :data-id="1">
						邀请排行
					</view>
					<!-- <view class="cu-item flex-sub" :class="2==TabCur?'text-orange cur':''" @tap="tabSelect" :data-id="2">
						推荐注册
					</view> -->
				</view>
			</scroll-view>
			
			<view class="cu-list radius menu" v-if="1==TabCur">
				<block v-for="(item,index) in plist" :key="index">
					<view class="cu-item">
						<view class="action padding-right-lg text-red" v-if="index==0">{{index+1}}</view>
						<view class="action padding-right-lg text-orange" v-else-if="index==1">{{index+1}}</view>
						<view class="action padding-right-lg text-yellow" v-else-if="index==2">{{index+1}}</view>
						<view class="action padding-right-lg text-black" v-else>{{index+1}}</view>
						<view class="content padding-tb-sm padding-right-sm">
							<view class="text-black">{{item.realname}}</view>
							<view class="text-gray text-sm">{{item.mobile}}</view>
						</view>
						<view class="action text-black">{{item.partnumber}} 人</view>
					</view>
				</block>
				<view class="cu-item">
					<view class="content padding-xs text-center">
						<text class="text-gray text-center text-sm">目前只显示前 {{pcount}} 名。</text>
					</view>
				</view>
			</view>
			
			<view class="bg-white padding radius" v-if="2==TabCur">
				<form>
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input placeholder="请输入推荐人姓名" @input="bindInput" data-val="realname" :value="forminfo.realname"></input>
					</view>
					<view class="cu-form-group solids-bottom">
						<view class="title">手机号</view>
						<input placeholder="请输入推荐人手机号" @input="bindInput" data-val="mobile" :value="forminfo.mobile"></input>
					</view>	
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-orange margin-tb-sm lg" @tap="regUser">确认提交</button>
					</view>
				</form>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				param: {},
				userinfo: {},

				TabCur: 1,
				plist: [],
				pcount: 0,
				
				isRotate: false,
				forminfo: {
					realname: "",
					mobile: ""
				}
			};
		},
		onLoad: function(){ 
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/mycode");
			if (_this.userinfo===false){
				return false;
			}
			if (_this.userinfo.wxampcode==""){
				_this.refCode();
			}
			_this.$req.ajax({
				path: "my/pagecode",
				data: {}
			}).then((data) => {
				_this.param = data.param;
				_this.plist = data.plist;
				_this.pcount = data.pcount;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: _this.param.mycodetil,
				path: "/pages/login/sharepuser?parentid="+_this.userinfo.id,
				imageUrl: _this.param.mycodepic
		    }
		},
		methods: {
			saveImage: function() {
				uni.downloadFile({
				    url: _this.userinfo.wxampcode, //仅为示例，并非真实的资源
				    success: (res) => {
				        if (res.statusCode === 200) {
				            uni.saveImageToPhotosAlbum({
				            	filePath: res.tempFilePath,
				            	success: function () {
									uni.showModal({
										title: '信息提示',
										content: "邀请码已保存到手机相册，注意查收。",
										showCancel: false
									});
				            	}
				            });
				        }
				    }
				});
			},
			
			refCode: function() {
				_this.$req.ajax({
					path: "my/refcode",
					data: {
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.userinfo.wxampcode = data.wxampcode+"?" + Math.random();
					uni.setStorageSync('userinfo', _this.userinfo);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			tabSelect: function(e) {
				_this.TabCur = e.currentTarget.dataset.id;
			},
			regUser: function() {
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "my/reguser",
					data: {
						userid: _this.userinfo.id,
						realname: _this.forminfo.realname,
						mobile: _this.forminfo.mobile
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: "推荐注册成功。",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								_this.forminfo = {
									realname: "",
									mobile: ""
								};
							}
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			
			bindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			}
		}
	}
</script>

<style>
	.echo-mycodeban{ width: 100%; display: block; }
</style>