JianjianStreet-H5/pages/my/index.vue

<template>
<view class="my-pages">
    <view class="temps-box">
        <view class="head-mode" >
          <u--image shape="circle" :src="userInfo?userInfo.headImage : morenSrc" width="149rpx" height="149rpx" @click="toLogin"></u--image>
          <view class="head-name" @click="toLogin">{{userInfo?userInfo.nickName : '未登录'}}</view>
		  <!-- <view @click="toPrice"> {{userInfo?'余额:'+userInfo.price : ''}}</view> -->
		  <view class="head-name" @click="toInteger">{{userInfo?'积分:'+userInfo.integerPrice : ''}}</view>
        </view>
        <view class="btns">
          <view class="btns-context" v-for="(item,i) in cellList" :key="i" @click="toUrl(item.pages,item.name)">
            <image style="width: 60rpx;height: 60rpx; padding: 40rpx 40rpx;" :src="item.src" mode=""></image>
            <view style="padding: 54rpx 0;">{{item.name}}</view>
            <view style="margin-left: auto; padding: 55rpx 40rpx;">
              <view class="menu-after"></view>
            </view>
          </view>
        </view>
        <view class="kefu-box">
          <view class="kefu">
            <view class="image">
              <image class="image-img" src="../../static/kefu.png" @click="previewImg('../../static/kefu.png')" mode=""></image>
            </view>
          </view>
          <view class="kefufont"> @湖南瀚海黎明信息科技有限公司提供技术支持 </view>
        </view>
    </view>
</view>
</template>

<script>
	export default{
		data(){
			return{
				userInfo:null,
				role:0,//2销售商
				morenSrc:require('@/static/img/logon-icon.png'),
				cellList: [
					{
						name:'邀请二维码',
						src:require('@/static/img/info/code.png'),
						role:'0',
						pages:'/pages/my/my-xiansuo-new'
					},
					{
						name:'我的粉丝',
						src:require('@/static/img/info/fans.png'),
						role:'0',
						pages:'/pages/my/list-fensi'
					},
					{
						name:'我要发布',
						src:require('@/static/img/tabbar/add.png'),
						role:'0',
						pages:'/pages/my/my-fabujianzhi'
					},
					{
						name:'发布信息',
						src:require('@/static/img/tabbar/xinxi.png'),
						role:'0',
						pages:'/pages/my/my-fabujianzhi-list'
					},
					{
						name:'订单列表',
						src:require('@/static/img/tabbar/order.png'),
						role:'0',
						pages:'/pages/my/my-order-list'
					},
					{
						name:'地址列表',
						src:require('@/static/img/tabbar/address.png'),
						role:'0',
						pages:'/pages/my/my-address-list'
					},
					{
						name:'增加地址',
						src:require('@/static/img/tabbar/fabu-xuan.png'),
						role:'0',
						pages:'/pages/my/my-addre'
					}
					
				]
			}
		},
		onShow() {
			this.getmyInfo()
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			previewImg(imageUrl){
				 var images = [];
				images.push(imageUrl);
				console.log(images)  // ["http://192.168.100.251:8970/6_1597822634094.png"]
				uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
					current:0,
					urls:images,
					longPressActions: {  //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data)=> {
							console.log(data);
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: payUrl,
								success: function () {
									uni.showToast({icon:'success',title:'保存成功'})
								},
								fail: (err) => {
									uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
								}
							});
						},
						fail: (err)=> {
							console.log(err.errMsg);
						}
					}
				});
			},
			getmyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
					}else{
						this.userInfo = null
					}
				})
			},
			
			toPrice(){
				uni.navigateTo({
					url:'/pages/my/list-price'
				})
			},
			toInteger(){
				uni.navigateTo({
					url:'/pages/my/list-integer'
				})
			},
			toUrl(url,name){
			
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
						uni.navigateTo({
							url
						})
						// if(name=='邀请二维码' || name=='我的粉丝' || name=='实名认证' || name=='我要发布'){
						// }else{
						// 	this.$Toast('未开放,敬请期待!')
						// }
					}else{
						this.$Toast('请先登录！')
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/my/login-kehu'
							})
						},1000)
						return
						this.userInfo = null
					}
				})
				
			},
			toLogin(){
				if(!this.userInfo){
					uni.navigateTo({
						url:"/pages/my/login-kehu"
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/edit-user'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.my-pages {
		background: url("@/static/2.png");
		background-size: 100% 100%;
		width: 100vw;
		height: calc(100vh - 80rpx);
	}
	
	.temps-box {
		
		//background-color: #00CCCC;
		height: 538rpx;
		
		.head-mode {
			display: flex;
			justify-items: center;
			height:168rpx;
			padding: 50rpx 20rpx 20rpx 20rpx;
			//background-color: #00CCCC;
			.head-name {
				padding: 38rpx;
				font-size: 40rpx;
				font-weight: 600;
				font-family: SimSun;
			}
		}
		.btns {
			margin-top: 15rpx;
			background-color: #FFFFFF;
			.btns-context {
				height: 120rpx;
				display:flex;
				border-bottom:1px solid #F7F7F7;
			}
		}
		
		.kefu-box {
			position: absolute;
			bottom: 1px;
			
			.kefu{
				width: 100vw;
				display: flex;
				text-align: center;
				justify-items: center;
				.image{
					display: flex;
					margin: 0 auto;
					text-align: center;
					justify-items: center;
				}
			}
			.kefufont{
				padding: 20rpx 0;
				width: 100%;
				position: absolute;
				font-size: 20rpx;
				text-align:center;
				color: #5E5E5E;
			}
			.image-img {
				width: 130rpx;
				height: 130rpx;
			}
		}
		
		.menu-after {
			width: 15rpx;
			height: 15rpx;
			border-right: 3rpx solid #808080;
			border-bottom: 3rpx solid #808080;
			transform:rotate(-45deg);
		}
		
	}
  
</style>