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" v-if="fetch.num.length > 0"></view>
		<view v-if="fetch.num.length > 0">
			<graceBoxBanner :items="fetch.num" @taped="showScore"></graceBoxBanner>
		</view>
		
		<graceDialog :isTitle="true" :title="scoreTitle" :isCloseBtn="true" :show="score" closeBtnColor="#FFFFFF" v-on:closeDialog="closeScore">
			<scroll-view :scroll-y="true" class="padding" slot="content" style="height:800rpx;" @scrolltolower="nextScore">
				<view class="zhList padding margin-tb" v-for="(v, k) in fetch.score" :key="k">
					<view class="flex justify-between">
						<view class="text-black font-30 block margin-bottom-xs text-bold">{{v.title}}</view>
						<view class="text-bold text-red" v-if="v.status == 2">-{{v.num}}</view>
						<view class="text-bold text-blue" v-if="v.status == 1">+{{v.num}}</view>
					</view>
					<view class="text-999 flex justify-between margin-top align-center">
						<text class="font-24" v-if="v.total >= 0">余额：{{v.total}}</text>
						<text class="font-24" v-if="v.price">金额：{{v.price}}</text>
						<text class="font-24 block">{{v.cdate}}</text>
					</view>
				</view>
			</scroll-view>
			
			<view slot="btns" class="grace-space-between">
				<text class="grace-dialog-buttons" @tap="closeScore">关闭</text>
				<text class="grace-dialog-buttons grace-blue" @tap="tixian" v-if="scoreType == 'yue'">提现</text>
				<text class="grace-dialog-buttons grace-blue" @tap="duihuan" v-if="scoreType == 'score'">兑换</text>
				<text class="grace-dialog-buttons grace-blue" @tap="zengsong" v-if="scoreType == 'ticket1'">赠送</text>
			</view>
		</graceDialog>
		
		<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 == 1">
							<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" style="width:120rpx;">
									<view class="text-grey text-xs">{{v.price}}</view>
									<view class="cu-tag round bg-red sm" v-if="v.shape == 2">查看详情</view>
									<view class="cu-tag round bg-black sm" v-else-if="v.mode == 2">查看自提码</view>
									<view class="cu-tag round bg-blue sm" v-else>{{v.status_name}}</view>
									
								</view>
							</view>
						</view>
						
						<view class="cu-list menu-avatar" v-if="activeTab == 2">
							<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 : [],
				order : [],
				chat : [],
				score : [],
			},
			activeTab : 0,
			//关系
			cate : [
				'个人资料', '购物订单'
			],
			openAvatar : false,
			score : false,
			scoreType : 'yue',
			scoreTitle : '',
			scoreIndex : 0,
		}
    },
	mounted() {
		this.getData();
	},
	methods:{
		tixian : function() {
			this.Dever.alert('敬请期待');
		},
		duihuan : function() {
			this.Dever.alert('敬请期待');
		},
		showScore : function(index) {
			this.scoreIndex = index;
			var info = this.fetch.num[this.scoreIndex];
			var title = info[2] + '：' + info[0];
			this.getScore(1, info[0], info[3], title);
		},
		nextScore : function() {
			var info = this.fetch.num[this.scoreIndex];
			var title = info[2] + '：' + info[0];
			this.getScore(2, info[0], info[3], title);
		},
		getScore : function(page, num, method, title) {
			var self = this;
			this.Dever.page([page, 'score'], this, 'app/user/?l=api.score', {code:this.Dever.config.code,method:method}, function(t) {
				if (t.score.length > 0) {
					self.fetch.score = t.score;
				} else {
					self.Dever.alert('无记录');
				}
				self.scoreType = t.type;
				
				self.scoreTitle = title;
				self.score = true;
			}, function(t) {
				self.Dever.alert('无记录');
			});
		},
		closeScore : function() {
			this.score = false;
		},
		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.my_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 == 1) {
				this.getOrder(t);
			} else if(k == 2) {
				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;
}

.top{ background-color: #FB5858;}
.btnOne{width:300rpx;height:80rpx;background:rgba(255,255,255,1);box-shadow:0rpx 2rpx 24rpx 0rpx rgba(251,88,88,1);border-radius:40rpx;}
.line{width:1rpx;height:43rpx;background:rgba(255,255,255,1);}
.zhList1{background:rgba(255,255,255,1);box-shadow:1px 5px 24px 0px rgba(161,161,161,0.38);border-radius:5px;}
.zhList{background:rgba(255,255,255,1);border-bottom:1px solid rgba(161,161,161,0.38);}
.text-91b{ color: #21A91B;}
.text-101{ color: #FF0101;}
.erro-404 {padding-bottom: 100upx;}
.erro-404 image {width: 260upx; height: 260upx;}
.font-24 {font-size: 12px;}
.text-999 {color: #999;}
</style>