index,tabbar

App.vue

@@ -76,6 +76,7 @@ export default {
 <style lang="scss">
 /*全局公共样式和字体图标*/
 @import '/static/css/cmy.css';
+@import "uview-ui/index.scss";
 view,
 scroll-view,
 swiper,

api/order.js

@@ -9,9 +9,9 @@ export function confirm(data) {
 	});
 }
 //获取可使用优惠券
-export function couponsOrder(data,price) {
+export function couponsOrder(data,price,id) {
 	return request({
-		url: '/api/coupons/order/'+price,
+		url: '/api/coupons/order/'+price+'/'+id,
 		method: 'get',
 		data
 	});

components/wangding-pickerAddress/data.js

@@ -1,4 +1,4 @@
-window.province_city_area = [{
+export default [{
     "value": "北京市", "label": "北京市", "children": [{
         "value": "北京市",
         "label": "北京市",

components/wangding-pickerAddress/wangding-pickerAddress.vue

@@ -41,17 +41,17 @@
 				this.array = []
 				this.array[0] = AllAddress.map(obj => {
 					return {
-						name: obj.name
+						name: obj.value
 					}
 				})
-				this.array[1] = AllAddress[this.value[0]].city.map(obj => {
+				this.array[1] = AllAddress[this.value[0]].children.map(obj => {
 					return {
-						name: obj.name
+						name: obj.value
 					}
 				})
-				this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => { 
+				this.array[2] = AllAddress[this.value[0]].children[this.value[1]].children.map(obj => { 
 					return {
-						name: obj
+						name: obj.value
 					}
 				})
 				return this

main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import store from './store'
 import App from './App'
+import uView from 'uview-ui'
+Vue.use(uView)
 /**
  *  所有测试用数据均存放于根目录json.js
  *  

manifest.json

@@ -73,7 +73,8 @@
         "devServer" : {
             "proxy" : {
                 "/api" : {
-                    "target" : "http://lnpt.frp.liuniu946.com/api",
+                    // "target" : "http://lnpt.frp.liuniu946.com/api",
+                    "target" : "https://xl.liuniu946.com/api",
                     // "changeOrigin": true,
                     "pathRewrite" : {
                         "/api" : "" // rewrite path

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [{
 			"path": "pages/index/index",
 			"style": {
@@ -449,6 +452,18 @@
 				}
 			}
 		},
+		{
+			"path": "pages/category/business",
+			"style": {
+				"navigationBarTitleText": "商圈"
+			}
+		},
+		{
+			"path": "pages/game/game",
+			"style": {
+				"navigationBarTitleText": "响亮游戏"
+			}
+		},
 		{
 			"path": "pages/user/shareQrCode",
 			"style": {
@@ -502,11 +517,14 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "响亮商城",
 		"navigationBarBackgroundColor": "#FFFFFF",
-		"backgroundColor": "#f8f8f8"
+		"backgroundColor": "#f8f8f8",
+		//#ifdef H5
+		"navigationStyle":"custom"
+		//#endif
 	},
 	"tabBar": {
-		"color": "#C0C4CC",
-		"selectedColor": "#5DBC7C",
+		"color": "#666666",
+		"selectedColor": "#f65067",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
@@ -516,10 +534,16 @@
 				"text": "首页"
 			},
 			{
-				"pagePath": "pages/category/category",
+				"pagePath": "pages/category/business",
+				"iconPath": "static/tabBar/tab-cate.png",
+				"selectedIconPath": "static/tabBar/tab-cate-current.png",
+				"text": "商圈"
+			},
+			{
+				"pagePath": "pages/game/game",
 				"iconPath": "static/tabBar/tab-cate.png",
 				"selectedIconPath": "static/tabBar/tab-cate-current.png",
-				"text": "分类"
+				"text": "响亮游戏"
 			},
 			{
 				"pagePath": "pages/cart/cart",

pages/cart/cart.vue

@@ -64,6 +64,7 @@
 				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
 			</view>
 		</view>
+		<u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
 
@@ -72,12 +73,15 @@ import { getCartList, getCartNum, cartDel } from '@/api/user.js';
 import { mapState } from 'vuex';
 import uniNumberBox from '@/components/uni-number-box.vue';
 import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+import { tabbar } from '@/utils/tabbar.js';
 export default {
 	components: {
 		uniNumberBox
 	},
 	data() {
 		return {
+			tabbar: tabbar,
+			current: 3,
 			total: 0, //总价格
 			allChecked: false, //全选状态  true|false
 			empty: false, //空白页现实  true|false

pages/category/business.vue

@@ -0,0 +1,27 @@
+<template>
+	<view class="center">
+		<view class="kong">
+			<u-empty mode="data" text="敬请期待"></u-empty>
+		</view>
+		<u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
+	</view>
+</template>
+
+<script>
+import { tabbar } from '@/utils/tabbar.js'
+export default {
+	data() {
+		return {
+			tabbar: tabbar,
+			current: 1,
+		}
+	}
+}
+</script>
+
+<style lang="less">
+	.kong {
+		height: 100vh;
+		width: 750rpx;
+	}
+</style>

pages/game/game.vue

@@ -0,0 +1,28 @@
+<template>
+	<view class="center">
+		<view class="kong">
+			<u-empty mode="data" text="敬请期待"></u-empty>
+		</view>
+		
+		<u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
+	</view>
+</template>
+
+<script>
+import { tabbar } from '@/utils/tabbar.js';
+export default {
+	data() {
+		return {
+			tabbar: tabbar,
+			current: 2
+		};
+	}
+};
+</script>
+
+<style lang="less">
+	.kong {
+		height: 100vh;
+		width: 750rpx;
+	}
+</style>

pages/index/index.vue

@@ -27,23 +27,23 @@
 		</view>
 		<view class="navbar">
 			<view class="navbar-box flex">
-				<view class="navbar-item">
+				<view class="navbar-item" @click="navTo('/pages/index/sign')">
 					<image class="nitem-image" src="../../static/index/index05.png" mode=""></image>
 					<view class="nitem-font">天天领红包</view>
 				</view>
-				<view class="navbar-item">
+				<view class="navbar-item"  @click="navTo('')">
 					<image class="nitem-image" src="../../static/index/index04.png" mode=""></image>
 					<view class="nitem-font">积分商城</view>
 				</view>
-				<view class="navbar-item">
+				<view class="navbar-item"  @click="navTo('/pages/product/seckill')">
 					<image class="nitem-image" src="../../static/index/index03.png" mode=""></image>
 					<view class="nitem-font">限时秒杀</view>
 				</view>
-				<view class="navbar-item">
+				<view class="navbar-item" @click="navTo('/pages/user/shareQrCode')">
 					<image class="nitem-image" src="../../static/index/index02.png" mode=""></image>
 					<view class="nitem-font">邀请有礼</view>
 				</view>
-				<view class="navbar-item">
+				<view class="navbar-item" @click="navTo('')">
 					<image class="nitem-image" src="../../static/index/index01.png" mode=""></image>
 					<view class="nitem-font">话费充值</view>
 				</view>
@@ -65,12 +65,12 @@
 							<text class="font-size-sm">￥</text>
 							{{ item.price * 1 }}
 						</view>
-						<view class="yuanPrice">{{ item.price }}</view>
+						<view class="yuanPrice">{{ item.ot_price }}</view>
 					</view>
 				</view>
 			</view>
 		</view>
-		<view class="shop">
+		<view class="shop" v-if="shoplist.length != 0">
 			<view class="shop-title">
 				<view class="shop-item">
 					<view class="sitem-font">智能排序</view>
@@ -89,7 +89,7 @@
 					<image class="jt-down" src="../../static/index/index06.png" mode=""></image>
 				</view>
 			</view>
-			<view class="shop-main flex" v-for="(item, index) in 10" :key="index">
+			<view class="shop-main flex" v-for="(item, index) in shoplist" :key="index">
 				<image class="main-left" src="../../static/index/index13.png" mode=""></image>
 				<view class="main-right flex">
 					<view class="shopm-info">
@@ -113,6 +113,7 @@
 				</view>
 			</view>
 		</view>
+		<u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
 
@@ -125,50 +126,15 @@ import { setCoupons } from '@/api/functionalUnit.js';
 import { getBargainList } from '@/api/product.js';
 import { interceptor } from '@/utils/loginUtils';
 import { mapState } from 'vuex';
-
+import { tabbar } from '@/utils/tabbar.js';
 export default {
 	components: {
 		seckill
 	},
-	watch: {
-		//自适应swiper高度
-		checkid(newValue, oldValue) {
-			let obj = this;
-			if (newValue == 0) {
-				let bHeight = Math.ceil(obj.bastList.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
-			if (newValue == 1) {
-				let bHeight = Math.ceil(obj.goodsList.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
-			if (newValue == 2) {
-				let bHeight = Math.ceil(obj.bastBanner.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
-		},
-		// 初次加载页面高度时修改页面高度
-		bastList(newValue, oldValue) {
-			let obj = this;
-			let bHeight = Math.ceil(newValue.length / 2);
-			obj.$nextTick(function() {
-				uni.createSelectorQuery()
-					.select('#list-box')
-					.fields(
-						{
-							size: true
-						},
-						function(data) {
-							obj.pageProportion = data.width / 750;
-							obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-						}
-					)
-					.exec();
-			});
-		}
-	},
 	data() {
 		return {
+			tabbar: tabbar,
+			current: 0,
 			shareShow: false, //分享海报
 			pageProportion: 0, //保存页面基于750宽度的比例
 			swiperHeight: 0,
@@ -176,37 +142,11 @@ export default {
 			titleNViewBackground: '',
 			swiperCurrent: 0,
 			swiperLength: 0,
-			bargainlist: [], //砍价商品
 			carouselList: [], //轮播列表
-			goodsList: [], //最新商品列表
-			bastList: [], //精品推荐列表
-			bastBanner: [], //促销商品列表
-			menusList: [], //头部菜单
+			bastList: [], //会员礼包
+			shoplist:[],//商店列表
 			page: 1,
 			limit: 5,
-			userServant: [
-				{
-					image: ''
-				}
-			], //用户推广服务
-			couponArray: [], //可领取优惠券
-			recommend: [
-				{
-					id: 0,
-					re_title: '精选',
-					re_name: '为你推荐'
-				},
-				{
-					id: 1,
-					re_title: '最新',
-					re_name: '最新好货优选'
-				},
-				{
-					id: 2,
-					re_title: '便宜好货',
-					re_name: '90天便宜好货'
-				}
-			],
 			actTime: new Date()
 		};
 	},
@@ -280,6 +220,15 @@ export default {
 				url: '/pages/product/product?id=' + id
 			});
 		},
+		navTo(url){
+			if(url == '') {
+				this.$api.msg('暂未开通，敬请期待')
+			}else{
+				uni.navigateTo({
+					url
+				})
+			}
+		},
 		openSubscribe: function(e) {
 			let page = e;
 			// #ifndef MP
@@ -404,12 +353,7 @@ export default {
 					let goods = data.info;
 					this.carouselList = data.banner;
 					this.swiperLength = this.carouselList.length;
-					this.menusList = data.menus;
-					this.goodsList = goods.firstList; //最新商品
-					this.bastList = goods.bastList; //精品推荐
-					this.bastBanner = data.benefit; //促销单品
-					this.$set(this, 'couponArray', data.couponList); //保存卡包券
-
+					this.bastList = data.giftInfo; //会员礼包
 					uni.stopPullDownRefresh();
 				})
 				.catch(e => {
@@ -616,7 +560,6 @@ export default {
 			.image-wrapper {
 				width: 100%;
 				height: 330rpx;
-				background: red;
 				border-radius: 3px;
 				overflow: hidden;
 				image {
@@ -637,7 +580,7 @@ export default {
 				display: flex;
 				justify-content: flex-start;
 				align-items: center;
-				padding: 14rpx 0 0;
+				padding: 14rpx 0 30rpx;
 				.hotPrice-box {
 					width: 70rpx;
 					height: 28rpx;

pages/order/createOrder.vue

@@ -310,7 +310,7 @@ export default {
 		},
 		// 加载优惠券列表
 		couponsOrder(money) {
-			couponsOrder({}, money).then(e => {
+			couponsOrder({}, money,this.cartId).then(e => {
 				if (e.data.length > 0) {
 					this.couponListshow = true;
 				}

pages/public/register.vue

@@ -1,55 +1,52 @@
 <template>
 	<view class="container">
-		<view class="container_text" >
-			<image class="banner-img" src="/static/img/img01.png" mode="scaleToFill"></image>
+		<view class="status_bar"><!-- 这里是状态栏 --></view>
+		<view class="loginTitle">欢迎注册响亮商城</view>
+		<view class="loginText">请认真填写个人信息</view>
+		<view class="login-box">
+			<view class="username">账号</view>
+			<input class="input-box" type="text" v-model="phone" placeholder="请输入邮箱/电话" />
 		</view>
-		<view class="loginTitle"><text>注册</text></view>
-		<view class="login_text">
-			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img03.png"></image></view>
-				<view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
+		<view class="login-box">
+			<view class="username">验证码</view>
+			<view class="flex">
+				<input class="input-box" type="number" v-model="code" placeholder="请输入验证码" />
+				<view class="code" @click="verification">{{ countDown == 0 ? '获取验证码' : countDown }}</view>
 			</view>
-			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img04.png"></image></view>
-				<view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder="请输入密码" /></view>
-			</view>
-			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img04.png"></image></view>
-				<view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus placeholder="请重复输入密码" /></view>
-			</view>
-			<view class="login_input flex" style="display: none;">
-				<view class="login_img"><image src="/static/icon/img07.png"></image></view>
-				<view class="login_name"><input class="uni-input" type="text" v-model="invitation" focus placeholder="请输入邀请码" /></view>
-			</view>
-			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img06.png"></image></view>
-				<view class="login_name flex">
-					<input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
-					<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
-				</view>
-			</view>
-			<view><button type="green" @click="register" class="uni-button uni-button-green">注册账号</button></view>
-			<view><button class="uni-button uni-button-green uni-button-green-plain" type="green" plain="true" hover-class="none" @click="login">返回登录</button></view>
 		</view>
+		<view class="login-box">
+			<view class="username">登录密码</view>
+			<input class="input-box" type="password" v-model="loginPass" placeholder="请输入登录密码" />
+		</view>
+		<!-- <view class="login-box">
+			<view class="username">交易密码</view>
+			<input class="input-box" type="password" v-model="payPass" placeholder="请输入6位数的交易密码" />
+		</view> -->
+		<view class="login-box">
+			<view class="username">邀请码</view>
+			<input class="input-box" type="text" v-model="invitation" placeholder="请输入邀请码" />
+		</view>
+		<view class="login" @click="register">注册</view>
 	</view>
 </template>
+
 <script>
 import { register, verify } from '@/api/login.js';
 export default {
 	data() {
 		return {
 			phone: '', //用户
-			password: '', //密码
-			repassword: '',
+			loginPass: '', //密码
+			payPass: '',
 			invitation: '', //邀请码
 			code: '', //验证码
 			time: '', //保存倒计时对象
-			countDown: 0 ,//倒计时
+			countDown: 0 //倒计时
 		};
 	},
 	onLoad() {
 		// 获取扫码邀请人id
-		this.invitation = uni.getStorageSync('spread')||'';
+		this.invitation = uni.getStorageSync('spread') || '';
 	},
 	watch: {
 		// 监听倒计时
@@ -64,50 +61,43 @@ export default {
 		register() {
 			let obj = this;
 			if (obj.phone == '') {
-				obj.$api.msg('请输入电话号码');
+				obj.$api.msg('请输入账号');
 				return;
 			}
-			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) {
-				obj.$api.msg('请输入正确的手机号');
+			if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.phone) && (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.phone))) {
+				obj.$api.msg('请输入正确的邮箱或手机');
 				return;
 			}
-			if (obj.password == '') {
-				obj.$api.msg('请输入密码');
+			if (obj.loginPass == '') {
+				obj.$api.msg('请输入登录密码');
 				return;
 			}
-			if (obj.repassword == '') {
-				obj.$api.msg('请再次输入密码');
+			if (obj.code == '') {
+				obj.$api.msg('请输入验证码');
 				return;
 			}
-			if (obj.repassword != obj.password) {
-				obj.$api.msg('两次密码不正确');
+			if (obj.invitation == '') {
+				obj.$api.msg('请输入邀请码');
 				return;
 			}
-			// if ((obj.invitation = '')) {
-			// 	obj.$api.msg('请输入邀请码');
-			// 	return;
-			// }
-			// if (obj.code == '') {
-			// 	obj.$api.msg('请输入验证码');
-			// 	return;
-			// }
 			register({
 				account: obj.phone, //账号
 				captcha: obj.code, //验证码
-				password: obj.password ,//密码
-				spread:this.invitation//上级推广人
+				password: obj.loginPass,
+				trade_password: obj.payPass,
+				spread: obj.invitation
 			}).then(function(e) {
 				uni.showToast({
-					title:'注册成功',
-					duration:2000,
-					position:'top'
+					title: '注册成功',
+					duration: 2000,
+					position: 'top',
+					icon: 'none'
 				});
-				setTimeout(function () {
+				setTimeout(function() {
 					uni.navigateTo({
 						url: '/pages/public/login'
 					});
-				},1000)
-				
+				}, 1000);
 			});
 			//调用注册接口，成功跳转登录页
 		},
@@ -115,11 +105,11 @@ export default {
 		verification() {
 			let obj = this;
 			if (this.phone == '') {
-				this.$api.msg('请输入电话号码');
+				this.$api.msg('请输入账号');
 				return;
 			}
-			if (this.phone.length < 11) {
-				this.$api.msg('请输入正确的手机号');
+			if (!/^([a-zA-Z]|[0-9])(\w|\-|\.)+@[a-zA-Z0-9]+(\.([a-zA-Z]{2,4}))+$/.test(obj.phone) && (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.phone))) {
+				obj.$api.msg('请输入正确的账号');
 				return;
 			}
 			// 判断是否在倒计时
@@ -135,17 +125,18 @@ export default {
 					phone: obj.phone,
 					type: 'register'
 				})
-					.then(({ data }) => {})
+					.then(({ data }) => {
+						uni.showToast({
+							title: '验证码已发送',
+							duration: 2000,
+							position: 'top',
+							icon: 'none'
+						});
+					})
 					.catch(err => {
 						console.log(err);
 					});
 			}
-		},
-		login() {
-			//返回登录
-			uni.navigateTo({
-				url: '/pages/public/login'
-			});
 		}
 	}
 };
@@ -153,129 +144,65 @@ export default {
 
 <style lang="scss">
 page {
-	height: 100%;
-}
-.container {
-	width: 100%;
-	height: 100%;
-	background-size: 100%;
-}
-.container_text {
-	width: 100%;
-	height: 500rpx;
-	top: 0rpx;
-	.banner-img {
-		width: 100%;
-		height: 100%;
-	}
-}
-.login_text {
-	margin: auto 30rpx;
-	position: relative;
-	padding: 100rpx 102rpx;
+	min-height: 100%;
 	background-color: #ffffff;
-	margin-top: -180rpx;
-	border-radius: 20rpx;
-	.login_input {
-		border-bottom: 1px solid #f0f0f0;
-		margin-bottom: 65rpx;
-		.login_img image {
-			height: 35rpx;
-			width: 29rpx;
-			margin-right: 20rpx;
-		}
-		.uni-input {
-			text-align: left;
-			width: 470rpx;
-			font-size: 28rpx !important;
-		}
-		.login_name {
-			color: #333333;
-		}
-	}
 
-	.other {
-		margin-top: 60rpx;
-		.fenge {
-			width: 30%;
-			height: 2rpx;
-			background-color: #eeeeee;
-		}
-		.qita {
-			font-size: 28rpx;
-			color: #999999;
-		}
-	}
-	.weixin {
-		width: 75rpx;
-		height: 75rpx;
-		margin: 25rpx auto;
-	}
-	.weixin image {
-		width: 100%;
-		height: 100%;
-	}
-	.weixin_text {
-		text-align: center;
-		font-size: 28rpx;
-		color: #999999;
-	}
-	.forget {
-		font-size: 28rpx;
+	.container {
 		width: 100%;
-		text-align: right;
-		color: #999999;
-	}
-
-	.uni-button-green {
-		color: #ffffff;
-		background-color: #5dbc7c;
-		margin: 40rpx 10rpx;
-		border-radius: 50rpx;
-	}
-	.uni-button-green-plain {
-		border: 1px solid #5dbc7c;
-		margin: 40rpx 10rpx;
-		border-radius: 50rpx;
-		color: #5dbc7c;
-		background-color: #ffffff;
-	}
-	.uni-button {
-		height: 85rpx;
-		line-height: 85rpx;
+		padding: 10% 60rpx 0rpx 60rpx;
 	}
 }
-.loginTitle {
-	position: absolute;
-	top: 250rpx;
+.status_bar {
+	height: var(--status-bar-height);
 	width: 100%;
-	text-align: center;
-	color: white;
-	font-size: 40rpx;
+}
+.loginTitle {
+	font-weight: bold;
+	color: #333333;
+	font-size: 58rpx;
+	padding-bottom: 25rpx;
 }
 
-.forget {
-	width: 100rpx;
-	font-size: 24rpx;
-	color: #ffffff;
-	margin: 0px auto;
-	border-bottom: 1px solid #ffffff;
+.loginText {
+	font-weight: 500;
+	color: #333333;
+	font-size: 34rpx;
 }
-.width {
-	width: 325rpx !important;
+
+.login-box {
+	padding-top: 70rpx;
+	.username {
+		padding-bottom: 25rpx;
+		font-weight: 500;
+		color: #333333;
+		font-size: 32rpx;
+	}
 }
-.code {
-	color: #5dbc7c;
-	font-size: 23rpx;
-	border-left: 1px solid #eeeeee;
-	width: 150rpx;
-	flex-shrink: 0;
+
+.login {
+	background: #5dbc7c;
+	margin-top: 20rpx;
+	color: #ffffff;
 	text-align: center;
+	padding: 26rpx 0rpx;
+	border-radius: 50rpx;
+	margin-top: 60rpx;
 }
-uni-button {
-	height: 80rpx !important;
-	line-height: 80rpx !important;
+.code {
+	background: #5dbc7c;
+	color: #ffffff;
+	border-radius: 10rpx;
+	font-weight: 500;
+	color: #ffffff;
+	font-size: 26rpx;
+	padding: 12rpx 19rpx;
 }
+// /* input 样式 */
+// .input-placeholder {
+// 	color: #ffffff;
+// }
 
+// .placeholder {
+// 	color: #ffffff;
+// }
 </style>
-

pages/user/user.vue

@@ -1,37 +1,40 @@
-<template>
-	<view class="container">
-		<view class="vheigh"></view>
-		<scroll-view class="content-box" scroll-y="true">
-			<view class="user-section">
-				<view class="bg"></view>
-				<view class="user-info-box ">
-					<view class="detail flex" @click="navTo('/pages/set/userinfo')">
-						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
-						<view class="info-box">
-							<view class="username">{{ userInfo.nickname || '游客' }}</view>
-							<view class="font-size-sm" v-if="userInfo.spread_uid">邀请码:{{ userInfo.spread_uid }}</view>
-						</view>
-					</view>
-					<view class="config iconfont">
-						<text class="setting iconsetting" @click="navTo('/pages/set/set')"></text>
-						<text class="message iconmessage" @click="navTo('/pages/user/notice')"></text>
-					</view>
-				</view>
-				<!-- 会员卡功能 -->
-				<!-- <view class="vip-card-box">
-					<image class="card-bg" src="/static/img/vip-card-bg.png" mode=""></image>
-					<view class="b-btn">我要升级</view>
-					<view class="tit">
-						<text class="iconfont icon-iLinkapp-"></text>
-						升级专享优惠权益
-					</view>
-					<text class="e-m">DCloud Union</text>
-					<text class="e-b">开通会员开发无bug 一测就上线</text>
-				</view> -->
-			</view>
-
-			<!-- <view
-				class="cover-container"
+<template>
+	<view class="container">
+		<view class="vheigh"></view>
+		<scroll-view class="content-box" scroll-y="true">
+			<view class="user-section">
+				<view class="bg"></view>
+				<view class="user-info-box ">
+					<view class="detail flex" @click="navTo('/pages/set/userinfo')">
+						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
+						<view class="info-box">
+							<view class="username">{{ userInfo.nickname || '游客' }}</view>
+							<view class="font-size-sm" v-if="userInfo.lock_spread_user != null">邀请人:{{ userInfo.lock_spread_user.phone }}</view>
+							<view class="font-size-sm" v-if="userInfo.unlock_spread_user != null" @click.stop="navTo('/pages/index/index')">
+								已锁定邀请人:{{ userInfo.unlock_spread_user.phone }}购买会员礼包绑定关系
+							</view>
+						</view>
+					</view>
+					<view class="config iconfont">
+						<text class="setting iconsetting" @click="navTo('/pages/set/set')"></text>
+						<text class="message iconmessage" @click="navTo('/pages/user/notice')"></text>
+					</view>
+				</view>
+				<!-- 会员卡功能 -->
+				<!-- <view class="vip-card-box">
+					<image class="card-bg" src="/static/img/vip-card-bg.png" mode=""></image>
+					<view class="b-btn">我要升级</view>
+					<view class="tit">
+						<text class="iconfont icon-iLinkapp-"></text>
+						升级专享优惠权益
+					</view>
+					<text class="e-m">DCloud Union</text>
+					<text class="e-b">开通会员开发无bug 一测就上线</text>
+				</view> -->
+			</view>
+
+			<!-- <view
+				class="cover-container"
 				:style="[
 					{
 						transform: coverTransform,
@@ -40,523 +43,532 @@
 				]"
 				@touchstart="coverTouchstart"
 				@touchmove="coverTouchmove"
-				@touchend="coverTouchend"
+				@touchend="coverTouchend"
 			> -->
-			<view class="cover-container">
-				<image class="arc" src="/static/img/arc.png"></image>
-
-				<view class="tj-sction">
-					<view class="tj-item" @click="navTo('/pages/money/wallet')">
-						<text class="num">{{ userInfo.now_money || '0.00' }}</text>
-						<text>余额</text>
-					</view>
-					<view class="tj-item" @click="navTo('/pages/user/award')">
-						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
-						<text>佣金</text>
-					</view>
-					<view class="tj-item" @click="navTo('/pages/user/scoreAccumulate')">
-						<text class="num">{{ userInfo.integral || '0.00' }}</text>
-						<text>积分</text>
-					</view>
-				</view>
-				<!-- 订单 -->
-
-				<view class="item-box">
-					<!-- <view class="box-title flex borde-b">
-						<view class="title"><text>我的订单</text></view>
-						<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover">
-							<text>全部订单</text>
-							<text class="iconfont iconenter"></text>
-						</view>
-					</view> -->
-					<view class="order-section">
-						<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
-							<view class=" icon position-relative">
-								<image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.unpaid_count > 0">
-									<text>{{ orderInfo.unpaid_count }}</text>
-								</view>
-							</view>
-							<text>待付款</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
-							<view class=" icon position-relative">
-								<image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.unshipped_count > 0">
-									<text>{{ orderInfo.unshipped_count }}</text>
-								</view>
-							</view>
-							<text>待发货</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon position-relative">
-								<image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.received_count > 0">
-									<text>{{ orderInfo.received_count }}</text>
-								</view>
-							</view>
-							<text>待收货</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon position-relative">
-								<image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
-								<!-- <view class="corner" v-if="orderInfo.complete_count > 0">
-									<text>{{ orderInfo.complete_count }}</text>
-								</view> -->
-							</view>
-							<text>已完成</text>
-						</view>
-					</view>
-				</view>
-				<view class="item-box">
-					<!-- <view class="box-title flex borde-b">
-						<view class="title"><text>我的资产</text></view>
-					</view> -->
-					<view class="order-section">
-						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
-							<text>我的钱包</text>
+			<view class="cover-container">
+				<image class="arc" src="/static/img/arc.png"></image>
+
+				<view class="tj-sction">
+					<view class="tj-item" @click="navTo('/pages/money/wallet')">
+						<text class="num">{{ userInfo.now_money || '0.00' }}</text>
+						<text>余额</text>
+					</view>
+					<view class="tj-item" @click="navTo('/pages/user/award')">
+						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
+						<text>佣金</text>
+					</view>
+					<view class="tj-item" @click="navTo('/pages/user/scoreAccumulate')">
+						<text class="num">{{ userInfo.integral || '0.00' }}</text>
+						<text>积分</text>
+					</view>
+				</view>
+				<!-- 订单 -->
+
+				<view class="item-box">
+					<!-- <view class="box-title flex borde-b">
+						<view class="title"><text>我的订单</text></view>
+						<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover">
+							<text>全部订单</text>
+							<text class="iconfont iconenter"></text>
+						</view>
+					</view> -->
+					<view class="order-section">
+						<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
+							<view class=" icon position-relative">
+								<image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
+								<view class="corner" v-if="orderInfo.unpaid_count > 0">
+									<text>{{ orderInfo.unpaid_count }}</text>
+								</view>
+							</view>
+							<text>待付款</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
+							<view class=" icon position-relative">
+								<image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
+								<view class="corner" v-if="orderInfo.unshipped_count > 0">
+									<text>{{ orderInfo.unshipped_count }}</text>
+								</view>
+							</view>
+							<text>待发货</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon position-relative">
+								<image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
+								<view class="corner" v-if="orderInfo.received_count > 0">
+									<text>{{ orderInfo.received_count }}</text>
+								</view>
+							</view>
+							<text>待收货</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon position-relative">
+								<image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
+								<!-- <view class="corner" v-if="orderInfo.complete_count > 0">
+									<text>{{ orderInfo.complete_count }}</text>
+								</view> -->
+							</view>
+							<text>已完成</text>
+						</view>
+					</view>
+				</view>
+				<view class="item-box">
+					<!-- <view class="box-title flex borde-b">
+						<view class="title"><text>我的资产</text></view>
+					</view> -->
+					<view class="order-section">
+						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
+							<text>我的钱包</text>
 						</view>
 						<view class="order-item" @click="navTo('/pages/user/jiedian')" hover-class="common-hover" :hover-stay-time="50">
 							<view class="icon"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
 							<text>我的节点</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image></view>
-							<text>奖励明细</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
-							<text>积分明细</text>
-						</view>
-						<!-- <view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image></view>
-							<text>通用币</text>
-						</view> -->
-					</view>
-				</view>
-
-				<!-- 浏览历史 -->
-				<view class="history-section icon">
-					<!-- <view class="sec-header">
-						<text class="iconfont iconfavor"></text>
-						<text>浏览历史</text>
-					</view> -->
-					<!-- <scroll-view scroll-x class="h-list">
-						<image
-							class="h-list-image"
-							@click="navTo('/pages/product/product')"
-							src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg"
-							mode="aspectFill"
-						></image>
-					</scroll-view> -->
-					<uni-list>
-						<uni-list-item title="我的钱包" @click="navTo('/pages/money/wallet')" thumb="/static/icon/img11.png"></uni-list-item>
-						<uni-list-item title="我的卡卷" @click="navTo('/pages/user/coupon')" thumb="/static/icon/img12.png"></uni-list-item>
-						<uni-list-item title="我的收藏" @click="navTo('/pages/user/favorites')" thumb="/static/icon/img02.png"></uni-list-item>
-						<uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/icon/img05.png"></uni-list-item>
-						<uni-list-item title="邀请好友" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/img10.png"></uni-list-item>
-						<uni-list-item title="绑定手机" @click="navTo('/pages/set/phone')" thumb="/static/icon/img09.png"></uni-list-item>
-					</uni-list>
-				</view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-<script>
-import { mapState, mapMutations } from 'vuex';
-import uniList from '@/components/uni-list/uni-list.vue';
-import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
-import { orderData, userinfo } from '@/api/user.js';
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
-let startY = 0,
-	moveY = 0,
-	pageAtTop = true;
-export default {
-	components: {
-		uniList,
-		uniListItem
-	},
-	data() {
-		return {
-			coverTransform: 'translateY(0px)',
-			coverTransition: '0s',
-			moving: false,
-			userDowm: 0, //卡片升级专属高度
-			userMaxDowm: 0 //卡片最高高度
-		};
-	},
+						</view>
+						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon"><image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image></view>
+							<text>奖励明细</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
+							<text>积分明细</text>
+						</view>
+						<!-- <view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon"><image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image></view>
+							<text>通用币</text>
+						</view> -->
+					</view>
+				</view>
+
+				<!-- 浏览历史 -->
+				<view class="history-section icon">
+					<!-- <view class="sec-header">
+						<text class="iconfont iconfavor"></text>
+						<text>浏览历史</text>
+					</view> -->
+					<!-- <scroll-view scroll-x class="h-list">
+						<image
+							class="h-list-image"
+							@click="navTo('/pages/product/product')"
+							src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg"
+							mode="aspectFill"
+						></image>
+					</scroll-view> -->
+					<uni-list>
+						<uni-list-item title="我的钱包" @click="navTo('/pages/money/wallet')" thumb="/static/icon/img11.png"></uni-list-item>
+						<uni-list-item title="我的卡卷" @click="navTo('/pages/user/coupon')" thumb="/static/icon/img12.png"></uni-list-item>
+						<uni-list-item title="我的收藏" @click="navTo('/pages/user/favorites')" thumb="/static/icon/img02.png"></uni-list-item>
+						<uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/icon/img05.png"></uni-list-item>
+						<uni-list-item title="邀请好友" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/img10.png"></uni-list-item>
+						<uni-list-item title="绑定手机" @click="navTo('/pages/set/phone')" thumb="/static/icon/img09.png"></uni-list-item>
+					</uni-list>
+				</view>
+			</view>
+		</scroll-view>
+		<u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
+	</view>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex';
+import uniList from '@/components/uni-list/uni-list.vue';
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+import { orderData, userinfo } from '@/api/user.js';
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+import { tabbar } from '@/utils/tabbar.js';
+let startY = 0,
+	moveY = 0,
+	pageAtTop = true;
+export default {
+	components: {
+		uniList,
+		uniListItem
+	},
+	data() {
+		return {
+			tabbar: tabbar,
+			current: 4,
+			coverTransform: 'translateY(0px)',
+			coverTransition: '0s',
+			moving: false,
+			userDowm: 0, //卡片升级专属高度
+			userMaxDowm: 0 //卡片最高高度
+		};
+	},
 	onShow() {
-		this.loadBaseData();
-		// 判断是否已经登录
-		if (this.hasLogin) {
-			this.loadBaseData();
-		}
-	},
-	onReady() {
-		// 初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.container')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					// 计算最多下拉的高度
-					this.userDowm = Math.floor((data.width / 750) * 185);
-					// 计算最大触发修改高度事件
-					this.userMaxDowm = Math.floor((data.width / 750) * 250);
-				}
-			)
-			.exec();
-	},
-	// #ifndef MP
-	// onNavigationBarButtonTap(e) {
-	// 	const index = e.index;
-	// 	if (index === 0) {
-	// 		this.navTo('/pages/set/set');
-	// 	} else if (index === 1) {
-	// 		// #ifdef APP-PLUS
-	// 		const pages = getCurrentPages();
-	// 		const page = pages[pages.length - 1];
-	// 		const currentWebview = page.$getAppWebview();
-	// 		currentWebview.hideTitleNViewButtonRedDot({
-	// 			index
-	// 		});
-	// 		// #endif
-	// 		uni.navigateTo({
-	// 			url: '/pages/user/notice'
-	// 		});
-	// 	}
-	// },
-	// #endif
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		// 加载初始数据
-		loadBaseData() {
-			userinfo({})
-				.then(({ data }) => {
-					this.setUserInfo(data);
-					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
-					orderData({})
-						.then(({ data }) => {
-							this.setOrderInfo(data);
-						})
-						.catch(e => {
-							this.setOrderInfo({
-								complete_count: 0, //完成
-								received_count: 0, //待收货
-								unshipped_count: 0, //待发货
-								order_count: 0, //订单总数
-								unpaid_count: 0 //待付款
-							});
-						});
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		/**
-		 * 统一跳转接口,拦截未登录路由
-		 * navigator标签现在默认没有转场动画，所以用view
-		 */
-		navTo(url) {
-			if (!this.hasLogin) {
-				// 保存地址
-				saveUrl();
-				// 登录拦截
-				interceptor();
-			} else {
-				uni.navigateTo({
-					url
-				});
-			}
-		},
-
-		/**
-		 *  会员卡下拉和回弹
-		 *  1.关闭bounce避免ios端下拉冲突
-		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
-		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
-		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
-		 */
-		coverTouchstart(e) {
-			// console.log(e);
-			if (pageAtTop === false) {
-				return;
-			}
-
-			this.coverTransition = 'transform .1s linear';
-			startY = e.touches[0].clientY;
-		},
-		coverTouchmove(e) {
-			// console.log(e);
-			moveY = e.touches[0].clientY;
-			let moveDistance = moveY - startY;
-			let maxDowm = this.userMaxDowm;
-			let Dowm = this.userDowm;
-			if (moveDistance < 0) {
-				this.moving = false;
-				return;
-			}
-			this.moving = true;
-			if (moveDistance >= Dowm && moveDistance < maxDowm) {
-				moveDistance = Dowm;
-			}
-
-			if (moveDistance > 0 && moveDistance <= Dowm) {
-				this.coverTransform = `translateY(${moveDistance}px)`;
-			}
-		},
-		coverTouchend() {
-			if (this.moving === false) {
-				return;
-			}
-			this.moving = false;
-			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
-			this.coverTransform = 'translateY(0px)';
-		}
-	}
-};
-</script>
-<style lang="scss">
-page {
-	height: 100%;
-}
-%flex-center {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-%section {
-	display: flex;
-	justify-content: space-around;
-	align-content: center;
-	background: #fff;
-	border-radius: 10rpx;
-}
-.container {
-	height: 100%;
-	background-color: $page-color-base;
-}
-.content-box {
-	height: 100%;
-}
-.vheigh {
-	height: var(--status-bar-height);
-	background-color: $base-color;
-}
-.user-section {
-	height: 435rpx;
-	padding: 15rpx 30rpx 0;
-	position: relative;
-	.bg {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background-color: $base-color;
-	}
-}
-.user-info-box {
-	height: 180rpx;
-	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	z-index: 1;
-	.detail {
-		height: 130rpx;
-		.portrait-box {
-			height: 100%;
-			.portrait {
-				width: 130rpx;
-				height: 100%;
-				border: 5rpx solid #fff;
-				border-radius: 50%;
-			}
-		}
-		.info-box {
-			margin-left: 20rpx;
-			line-height: 1.5;
-			.username {
-				font-size: $font-lg + 6rpx;
-				height: 100%;
-			}
-		}
-	}
-	.config {
-		font-size: 48rpx;
-		height: 130rpx;
-		.setting {
-			margin-right: 51rpx;
-		}
-	}
-}
-
-.vip-card-box {
-	display: flex;
-	flex-direction: column;
-	color: #f7d680;
-	height: 240rpx;
-	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
-	border-radius: 16rpx 16rpx 0 0;
-	overflow: hidden;
-	position: relative;
-	padding: 20rpx 24rpx;
-	.card-bg {
-		position: absolute;
-		top: 20rpx;
-		right: 0;
-		width: 380rpx;
-		height: 260rpx;
-	}
-	.b-btn {
-		position: absolute;
-		right: 20rpx;
-		top: 16rpx;
-		width: 132rpx;
-		height: 40rpx;
-		text-align: center;
-		line-height: 40rpx;
-		font-size: 22rpx;
-		color: #36343c;
-		border-radius: 20px;
-		background: linear-gradient(left, #f9e6af, #ffd465);
-		z-index: 1;
-	}
-	.tit {
-		font-size: $font-base + 2rpx;
-		color: #f7d680;
-		margin-bottom: 28rpx;
-		.iconfont {
-			color: #f6e5a3;
-			margin-right: 16rpx;
-		}
-	}
-	.e-b {
-		font-size: $font-sm;
-		color: #d8cba9;
-		margin-top: 10rpx;
-	}
-}
-.cover-container {
-	background: $page-color-base;
-	margin-top: -150rpx;
-	padding: 0 30rpx;
-	position: relative;
-	background: #f5f5f5;
-	padding-bottom: 20rpx;
-	.arc {
-		position: absolute;
-		left: 0;
-		top: -34rpx;
-		width: 100%;
-		height: 36rpx;
-	}
-}
-.tj-sction {
-	@extend %section;
-	.tj-item {
-		@extend %flex-center;
-		flex-direction: column;
-		height: 140rpx;
-		font-size: $font-sm;
-		color: #75787d;
-	}
-	.num {
-		font-size: $font-lg;
-		color: $font-color-dark;
-		margin-bottom: 8rpx;
-	}
-}
-
-.item-box {
-	border-radius: 10rpx;
-	background-color: white;
-	margin-top: 20rpx;
-	.box-title {
-		line-height: 1;
-		padding: 30rpx;
-		.title {
-			font-size: $font-lg;
-			font-weight: bold;
-		}
-		.link {
-			font-size: $font-base - 2rpx;
-			color: $font-color-light;
-		}
-	}
-	.order-section {
-		@extend %section;
-		padding: 28rpx 0;
-		.order-item {
-			@extend %flex-center;
-			width: 120rpx;
-			height: 120rpx;
-			border-radius: 10rpx;
-			font-size: $font-sm;
-			color: $font-color-dark;
-		}
-		.iconfont {
-			font-size: 48rpx;
-			margin-bottom: 18rpx;
-			color: #fa436a;
-		}
-		.icon-shouhoutuikuan {
-			font-size: 44rpx;
-		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin-bottom: 18rpx;
-			background-size: 100%;
-			background-repeat: no-repeat;
-			background-position: center;
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-}
-
-.history-section {
-	// padding: 30rpx 0 0;
-	margin-top: 20rpx;
-	background: #fff;
-	border-radius: 10rpx;
-	.sec-header {
-		display: flex;
-		align-items: center;
-		font-size: $font-base;
-		color: $font-color-dark;
-		line-height: 40rpx;
-		margin-left: 30rpx;
-		padding-top: 30rpx;
-		.iconfont {
-			font-size: 44rpx;
-			color: $color-red;
-			margin-right: 16rpx;
-			line-height: 40rpx;
-		}
-	}
-	.h-list {
-		white-space: nowrap;
-		padding: 30rpx 30rpx 0;
-		.h-list-image {
-			display: inline-block;
-			width: 160rpx;
-			height: 160rpx;
-			margin-right: 20rpx;
-			border-radius: 10rpx;
-		}
-	}
-}
+		this.loadBaseData();
+		// 判断是否已经登录
+		if (this.hasLogin) {
+			this.loadBaseData();
+		}
+	},
+	onReady() {
+		// 初始化获取页面宽度
+		uni.createSelectorQuery()
+			.select('.container')
+			.fields(
+				{
+					size: true
+				},
+				data => {
+					// 计算最多下拉的高度
+					this.userDowm = Math.floor((data.width / 750) * 185);
+					// 计算最大触发修改高度事件
+					this.userMaxDowm = Math.floor((data.width / 750) * 250);
+				}
+			)
+			.exec();
+	},
+	// #ifndef MP
+	// onNavigationBarButtonTap(e) {
+	// 	const index = e.index;
+	// 	if (index === 0) {
+	// 		this.navTo('/pages/set/set');
+	// 	} else if (index === 1) {
+	// 		// #ifdef APP-PLUS
+	// 		const pages = getCurrentPages();
+	// 		const page = pages[pages.length - 1];
+	// 		const currentWebview = page.$getAppWebview();
+	// 		currentWebview.hideTitleNViewButtonRedDot({
+	// 			index
+	// 		});
+	// 		// #endif
+	// 		uni.navigateTo({
+	// 			url: '/pages/user/notice'
+	// 		});
+	// 	}
+	// },
+	// #endif
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	methods: {
+		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+		// 加载初始数据
+		loadBaseData() {
+			userinfo({})
+				.then(({ data }) => {
+					this.setUserInfo(data);
+					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
+					orderData({})
+						.then(({ data }) => {
+							this.setOrderInfo(data);
+						})
+						.catch(e => {
+							this.setOrderInfo({
+								complete_count: 0, //完成
+								received_count: 0, //待收货
+								unshipped_count: 0, //待发货
+								order_count: 0, //订单总数
+								unpaid_count: 0 //待付款
+							});
+						});
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		/**
+		 * 统一跳转接口,拦截未登录路由
+		 * navigator标签现在默认没有转场动画，所以用view
+		 */
+		navTo(url) {
+			if (!this.hasLogin) {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			} else {
+				uni.navigateTo({
+					url,
+					fail() {
+						uni.switchTab({
+							url
+						});
+					}
+				});
+			}
+		},
+
+		/**
+		 *  会员卡下拉和回弹
+		 *  1.关闭bounce避免ios端下拉冲突
+		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
+		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
+		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
+		 */
+		coverTouchstart(e) {
+			// console.log(e);
+			if (pageAtTop === false) {
+				return;
+			}
+
+			this.coverTransition = 'transform .1s linear';
+			startY = e.touches[0].clientY;
+		},
+		coverTouchmove(e) {
+			// console.log(e);
+			moveY = e.touches[0].clientY;
+			let moveDistance = moveY - startY;
+			let maxDowm = this.userMaxDowm;
+			let Dowm = this.userDowm;
+			if (moveDistance < 0) {
+				this.moving = false;
+				return;
+			}
+			this.moving = true;
+			if (moveDistance >= Dowm && moveDistance < maxDowm) {
+				moveDistance = Dowm;
+			}
+
+			if (moveDistance > 0 && moveDistance <= Dowm) {
+				this.coverTransform = `translateY(${moveDistance}px)`;
+			}
+		},
+		coverTouchend() {
+			if (this.moving === false) {
+				return;
+			}
+			this.moving = false;
+			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
+			this.coverTransform = 'translateY(0px)';
+		}
+	}
+};
+</script>
+<style lang="scss">
+page {
+	height: 100%;
+}
+%flex-center {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+%section {
+	display: flex;
+	justify-content: space-around;
+	align-content: center;
+	background: #fff;
+	border-radius: 10rpx;
+}
+.container {
+	height: 100%;
+	background-color: $page-color-base;
+}
+.content-box {
+	height: 100%;
+}
+.vheigh {
+	height: var(--status-bar-height);
+	background-color: $base-color;
+}
+.user-section {
+	height: 435rpx;
+	padding: 15rpx 30rpx 0;
+	position: relative;
+	.bg {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: $base-color;
+	}
+}
+.user-info-box {
+	height: 180rpx;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	z-index: 1;
+	.detail {
+		height: 130rpx;
+		.portrait-box {
+			height: 100%;
+			.portrait {
+				width: 130rpx;
+				height: 100%;
+				border: 5rpx solid #fff;
+				border-radius: 50%;
+			}
+		}
+		.info-box {
+			margin-left: 20rpx;
+			line-height: 1.5;
+			.username {
+				font-size: $font-lg + 6rpx;
+				height: 100%;
+			}
+		}
+	}
+	.config {
+		font-size: 48rpx;
+		height: 130rpx;
+		.setting {
+			margin-right: 51rpx;
+		}
+	}
+}
+
+.vip-card-box {
+	display: flex;
+	flex-direction: column;
+	color: #f7d680;
+	height: 240rpx;
+	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
+	border-radius: 16rpx 16rpx 0 0;
+	overflow: hidden;
+	position: relative;
+	padding: 20rpx 24rpx;
+	.card-bg {
+		position: absolute;
+		top: 20rpx;
+		right: 0;
+		width: 380rpx;
+		height: 260rpx;
+	}
+	.b-btn {
+		position: absolute;
+		right: 20rpx;
+		top: 16rpx;
+		width: 132rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		font-size: 22rpx;
+		color: #36343c;
+		border-radius: 20px;
+		background: linear-gradient(left, #f9e6af, #ffd465);
+		z-index: 1;
+	}
+	.tit {
+		font-size: $font-base + 2rpx;
+		color: #f7d680;
+		margin-bottom: 28rpx;
+		.iconfont {
+			color: #f6e5a3;
+			margin-right: 16rpx;
+		}
+	}
+	.e-b {
+		font-size: $font-sm;
+		color: #d8cba9;
+		margin-top: 10rpx;
+	}
+}
+.cover-container {
+	background: $page-color-base;
+	margin-top: -150rpx;
+	padding: 0 30rpx;
+	position: relative;
+	background: #f5f5f5;
+	padding-bottom: 20rpx;
+	.arc {
+		position: absolute;
+		left: 0;
+		top: -34rpx;
+		width: 100%;
+		height: 36rpx;
+	}
+}
+.tj-sction {
+	@extend %section;
+	.tj-item {
+		@extend %flex-center;
+		flex-direction: column;
+		height: 140rpx;
+		font-size: $font-sm;
+		color: #75787d;
+	}
+	.num {
+		font-size: $font-lg;
+		color: $font-color-dark;
+		margin-bottom: 8rpx;
+	}
+}
+
+.item-box {
+	border-radius: 10rpx;
+	background-color: white;
+	margin-top: 20rpx;
+	.box-title {
+		line-height: 1;
+		padding: 30rpx;
+		.title {
+			font-size: $font-lg;
+			font-weight: bold;
+		}
+		.link {
+			font-size: $font-base - 2rpx;
+			color: $font-color-light;
+		}
+	}
+	.order-section {
+		@extend %section;
+		padding: 28rpx 0;
+		.order-item {
+			@extend %flex-center;
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 10rpx;
+			font-size: $font-sm;
+			color: $font-color-dark;
+		}
+		.iconfont {
+			font-size: 48rpx;
+			margin-bottom: 18rpx;
+			color: #fa436a;
+		}
+		.icon-shouhoutuikuan {
+			font-size: 44rpx;
+		}
+		.icon {
+			height: 50rpx;
+			width: 48rpx;
+			margin-bottom: 18rpx;
+			background-size: 100%;
+			background-repeat: no-repeat;
+			background-position: center;
+			.icon-img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+
+.history-section {
+	// padding: 30rpx 0 0;
+	margin-top: 20rpx;
+	background: #fff;
+	border-radius: 10rpx;
+	.sec-header {
+		display: flex;
+		align-items: center;
+		font-size: $font-base;
+		color: $font-color-dark;
+		line-height: 40rpx;
+		margin-left: 30rpx;
+		padding-top: 30rpx;
+		.iconfont {
+			font-size: 44rpx;
+			color: $color-red;
+			margin-right: 16rpx;
+			line-height: 40rpx;
+		}
+	}
+	.h-list {
+		white-space: nowrap;
+		padding: 30rpx 30rpx 0;
+		.h-list-image {
+			display: inline-block;
+			width: 160rpx;
+			height: 160rpx;
+			margin-right: 20rpx;
+			border-radius: 10rpx;
+		}
+	}
+}
 </style>

store/index.js

@@ -12,7 +12,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
 	state: {
 		// baseURL:"http://yrh.liuniu946.com",//'http://eb.shuibo.net',//请求地址配置 
-		baseURL:'http://lnpt.frp.liuniu946.com',//请求地址配置 
+		baseURL:'https://xl.liuniu946.com',//请求地址配置 
 		// baseURL:'https://xl.liuniu946.com/',//请求地址配置 
 		urlFile:'/index',//项目部署所在文件夹
 		userInfo: {}, //登录信息

uni.scss

@@ -1,3 +1,4 @@
+@import 'uview-ui/theme.scss';
 /* 页面左右间距 */
 $page-row-spacing: 30rpx;
 //页面基础颜色

unpackage/dist/build/h5/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>响亮商城</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.fd8e0a16.js></script><script src=/index/static/js/index.fc944907.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.0c0314dc.js></script><script src=/index/static/js/index.57caccad.js></script></body></html>