dreamland/pages/dream/func/my.vue

<template name="my">
	<view>
		<view class="grace-list">
			<view class="grace-list-items">
				<view class="grace-list-image ucenter-face grace-relative">
					<image class="grace-list-image ucenter-face-image" :src="fetch.user.avatar" mode="widthFix" @click="avatarSet(0)"></image>
					<avatar @upload="avatarUpload" ref="avatar"></avatar>
				</view>
				<view class="grace-list-body">
					<view class="grace-list-title">
						<text class="grace-list-title-text">{{fetch.user.username}}<text v-if="fetch.user.title" style="margin-left:10rpx">({{fetch.user.title}})</text> </text>
					</view>
					<view class="grace-list-body-desc">{{fetch.user.info}}</view>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right" style="display:none;"></text>
			</view>
		</view>
		<view class="ucenter-line"></view>
		<view>
			<graceBoxBanner :items="fetch.num"></graceBoxBanner>
		</view>
		<view class="ucenter-line"></view>
		<view class="grace-list grace-margin-top">
			<view class="card-bottom">
				<!-- 顶部分页栏 -->
				<view class="top-tab">
					<view :class="['tab-item flex-center', activeTab == k ? 'active' : '']" @tap="handleTab(k)" v-for="(v, k) in cate" :key="k">{{ v }}</view>
				</view>
				<view class="scroll-wrapper">
					<view class="margin-bottom">
						<view class="cu-list menu-avatar" v-if="activeTab == 2">
							<view class="cu-item " v-for="(v, k) in fetch.order" :key="k">
								<view class="cu-avatar radius lg" :style="{backgroundImage:'url('+v.pic+')'}"></view>
								<view class="content">
									<view class="text-pink"><view class="text-cut">{{v.name}}</view></view>
									<view class="text-gray text-sm flex"> <view class="text-cut">{{v.date}}</view></view>
								</view>
								<view class="action">
									<view class="text-grey text-xs">{{v.price}}</view>
									<view class="cu-tag round bg-red sm" v-if="v.status == 1">{{v.status_name}}</view>
									<view class="cu-tag round bg-blue sm" v-if="v.status == 2">{{v.status_name}}</view>
									<view class="cu-tag round bg-black sm" v-if="v.status == 3">{{v.status_name}}</view>
								</view>
							</view>
						</view>
						
						<view class="cu-list menu-avatar" v-if="activeTab == 1">
							<view class="cu-item" v-for="(v, k) in fetch.chat" :key="k" @click="goChat(v.uid, v.user.username)">
								<view class="cu-avatar round lg" :style="{backgroundImage:'url('+v.user.avatar+')'}">
									<view class="cu-tag badge" style="display:none;">99+</view>
								</view>
								<view class="content">
									<view class="text-grey">
										<view class="text-cut">{{v.user.username}}</view>
										<view class="cu-tag round bg-orange sm" v-if="v.user.title">{{v.user.title}}</view>
									</view>
									<view class="text-gray text-sm flex" v-if="v.chat.text">
										<view class="text-cut">
											{{v.chat.text}}
										</view>
									</view>
								</view>
								<view class="action" style="width: auto;">
									<view class="cu-tag round text-grey sm">{{v.chat.day}}</view>
									<view class="text-grey text-xs">{{v.chat.date}}</view>
								</view>
							</view>
						</view>
						
						<view class="cu-list menu-avatar" v-if="activeTab == 0">
							<form @submit="formSubmit" class="grace-form grace-margin-top">
								<view class="grace-form-item grace-border-b">
									<text class="grace-form-label">昵称</text>
									<view class="grace-form-body">
										<input type="text" class="grace-form-input" name="name" placeholder="请填写有趣儿的昵称" v-model="fetch.user.username"></input>
									</view>
								</view>
								
								<view class="grace-form-item grace-border-b">
									<text class="grace-form-label">头衔</text>
									<view class="grace-form-body">
										<input type="text" class="grace-form-input" name="title" placeholder="请填写头衔" v-model="fetch.user.title"></input>
									</view>
								</view>
								
								<view class="grace-form-item grace-border-b">
									<text class="grace-form-label">签名</text>
									<view class="grace-form-body">
										<input type="text" class="grace-form-input" name="info" placeholder="请填写签名" v-model="fetch.user.info"></input>
									</view>
								</view>
								
								<view style="padding:30rpx 0;">
									<button formType="submit" type="primary" class="grace-button grace-border-radius">保存</button>
								</view>
							</form>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
var  graceChecker = require("@/lib/graceUI/jsTools/graceChecker.js");
import avatar from "@/lib/yq-avatar/yq-avatar.vue";
export default {
	name: "cate",
	props: {
		content_id : {
			type : String,
			value : null
		},
		width : {
			type : String,
			default : '100%'
		},
		param : {},
		index : 0
	},
    data() {
    	return {
			fetch : {
				user : {},
				num : [
					['￥0', '', '--'],
					[0, '', '--'],
				],
				order : [],
				chat : [],
			},
			activeTab : 0,
			cate : [
				'信息', '交流', '买过'
			],
			openAvatar : false
		}
    },
	mounted() {
		this.getData();
	},
	methods:{
		getData : function() {
			if (this.openAvatar) {
				return;
			} else {
				uni.stopPullDownRefresh();
			}
			var self = this;
			this.Dever.get(this, 'app/user/?l=api.get', {code:this.Dever.config.code, noloading:1});
			this.handleTab(this.activeTab);
		},
		getInfo : function(t) {
			//触底刷新
			this.handleTab(this.activeTab, 2);
		},
		getOrder : function(page) {
			this.Dever.page([page,'order'], this, 'app/user/?l=api.goods_order', {code:this.Dever.config.code, noloading:1});
		},
		getCommunity : function(page) {
			this.Dever.page([page,'chat'], this, 'app/user/?l=api.community', {code:this.Dever.config.code, noloading:1});
		},
		goChat : function(uid, username) {
			this.Dever.location('chat/user?uid=' + uid + '&code=' + this.Dever.config.code + '&title=' + username);
		},
		handleTab : function(k, t) {
			this.activeTab = k;
			if (!t) {
				t = 1;
			}
			if (k == 2) {
				this.getOrder(t);
			} else if(k == 1) {
				this.getCommunity(t);
			}
		},
		// 表单提交
		formSubmit : function(e) {
			var self = this;
			var rule = [
				{ name: "name", checkType: "string", checkRule: "1,10", errorMsg: "昵称应为1-20个字符" },
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				formData.code = this.Dever.config.code;
				this.Dever.post('app/user/?l=api.up', formData, function(t) {
					self.Dever.alert('保存成功');
				});
			} else {
				self.Dever.alert(graceChecker.error);
			}
		},
		avatarUpload : function(e) {
			var self = this;
			this.openAvatar = false;
			
			this.Dever.uploadFile(e.path, 'avatar', 1, function(type, file) {
				self.fetch.user.avatar = file;
				self.Dever.post('app/user/?l=api.upAvatar', {avatar:file, noloading:1});
			});
		},
		avatarSet : function(index) {
			this.openAvatar = true;
			this.$refs.avatar.fChooseImg(index,{
				selWidth: "300rpx", selHeight: "300rpx",
				expWidth: '260rpx', expHeight: '260rpx',
				avatarSrc : this.fetch.user.avatar,
				bgImage : this.fetch.user.avatar,
				noTab : true,
				
			});
		}
	},
	components:{
		avatar
	}
}
</script>

<style>
.ucenter-face{width:100rpx !important; height:100rpx !important;}
.ucenter-face-image{width:100rpx !important; height:100rpx !important;}
.ucenter-line{height:12rpx; background-color:#f8f8f8; margin:16rpx 0;}
.card-bottom {
	width: 100%;
}
.top-tab {
	display: flex;
	height: 120rpx;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background-color: #ffffff;
}
.tab-item {
	flex: 1;
	color: #999;
	border-bottom: 4rpx solid #ececec;
}

.active {
	color: var(--mainColor);
	border-bottom: 4rpx solid var(--mainColor);
}
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.grace-form-input {
	text-align: left;
}
</style>