weliam-smartcity/pages/subPages2/redClothes/redClothes.vue

<template>
	<view class="redClothes">
		<view class="redSerach">
			<view class="iconfont icon-search" style="color: #999999;padding:20upx;">
				
			</view>
			<input type="number" class="input" v-model="phone" maxlength="11" value="" placeholder="请输入转赠号码" />
			<view  v-if="phone" class="iconfont icon-shibai" style="color: #CCCCCC;padding: 10upx 30upx 20upx;font-size: 44upx;" @click="clear"></view>
			<view v-else class="iconfont icon-shibai"  style="padding: 10upx 30upx 20upx;font-size: 44upx;color: #F8F8F8;"></view>
			<view class="line">
				
			</view>
			<view class="search-btn" @click="getUserList">
				搜索
			</view>
		</view>
		<view class="Linkman" v-if="userData">
			<view class="dis-flex linkItem">
				<image :src="userData.avatar" mode=""></image>
				<view class="flex-box" style="padding-left: 40upx;">
					<view class="f-32 f-w" style="padding-bottom: 22upx;">
						{{userData.nickname}}
					</view>
					<view class="f-28" style="color: #666666;">
						{{userData.mobile}}
					</view>
				</view>
				<view class="makeBtn" @click="openBox">
					转赠
				</view>
			</view>
		</view>
		<view class="noneLinkman" v-else>
			<view class="content" v-if="userData  == 0">
				<image :src="imgfixUrls  + 'redLinkman.png'" mode=""></image>
				<view class="t-c f-28" style="padding: 60upx 0;color: #999999;">
					<view class="t-c">
						暂未查询到该用户
					</view>
					<view class="t-c">
						快邀请对方来注册
					</view>
				</view>
				<!-- #ifdef H5 || APP-PLUS -->
					<button class="invite-btn" @click="shareShow = true">
						邀请用户
					</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<button class="invite-btn" open-type="share">
						邀请用户
					</button>
				<!-- #endif -->
				
			</view>
		</view>
		<PopManager :show="shareShow" :type="'top'" @clickmask="shareShow = false">
			<cover-view>
				<cover-image :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
			</cover-view>
		</PopManager>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import PopManager from '@/components/template/PopManager.vue';
	export default{
		data(){
			return{
				phone:'',
				userData:null,
				id:null,
				type:null,
				shareShow:false
			}
		},
		components:{
			PopManager
		},
		onLoad(e) {
			this.id = e.id;
			this.type = e.type;
			setTimeout(()=>{
				uni.setNavigationBarTitle({
				　　title:'选择转赠对象'
				})
			})
			
		},
		methods:{
			getUserList(){
				let _this = this;
				App._post_form(
					'&p=Member&do=mobileToMmeber',{
						mobile:_this.phone
					},
					res => {
						if(Array.isArray(res.data)){
							_this.userData = 0;
							return
						}else{
							_this.userData = res.data;
						}
					}
				);
			},
			clear(){
				this.phone = '';
			},
			openBox(){
				let _this = this;
				App.showError(
					`是否向对方转赠?`,
					data => {
						if (data.confirm) {
							App._post_form(
								'&p=Order&do=transferApi',{
									mobile:_this.phone,
									id:_this.id,
									type:_this.type
								},
								res => {
									uni.showToast({
										title:'转赠成功'
									});
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1000)
								}
							);
						}
					},
					true
				);
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coverImg {
		width: 750upx;
	}
	.redClothes{
		padding: 30upx;
		.redSerach{
			border-radius: 20upx;
			background-color: #F8F8F8;
			display: flex;
			/deep/ .input{
				height: 80upx;
				font-size: 28upx;
				width: 410upx;
			}
			.line{
				margin: 25upx 0;
				border-left: 1upx solid #CCCCCC;
			}
			.search-btn{
				font-size: 28upx;
				padding: 20upx;
				height: 40upx;
				line-height: 40upx;
				color: #666666;
			}
		}
		.Linkman{
			.linkItem{
				padding: 30upx 0;
				border-bottom: 1upx solid #EEEEEE;
				image{
					width: 98upx;
					height: 98upx;
					border-radius: 50%;
					border: 1upx solid #333333;
				}
				.makeBtn{
					width: 100upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					font-size: 28upx;
					font-weight: bold;
					background-color: #FF4444;
					border-radius: 10upx;
					color: #FFFFFF;
					margin: 20upx 0;
				}
			}
		}
		.noneLinkman{
			padding-top: 200upx;
			position: relative;
			.content{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				image{
					width: 300upx;
					height: 300upx;
					margin: auto;
				}
				.invite-btn{
					width: 310upx;
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
					background-color: #ff4444;
					border-radius: 20upx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
		
	}
</style>