Merge branch 'master' of http://git.liuniu946.com/xuhaolan/boying

pages.json

@@ -83,12 +83,6 @@
 				}
 			}
 		},
-		{
-			"path": "pages/set/set",
-			"style": {
-				"navigationBarTitleText": "设置"
-			}
-		},
 		{
 			"path": "pages/set/password",
 			"style": {
@@ -98,10 +92,27 @@
 		{
 			"path": "pages/set/userinfo",
 			"style": {
-				"navigationBarTitleText": "修改资料"
+				"navigationBarTitleText": "设置",
+				"navigationBarBackgroundColor":"#000",
+				"navigationBarTextStyle":"white"
 			}
+		},
+		{
+			"path": "pages/index/info",
+			"style": {
+				"navigationBarTitleText": "打款信息",
+				"navigationBarBackgroundColor":"#000",
+				"navigationBarTextStyle":"white"
+			}
+		}, 
+		{
+			"path": "pages/user/team",
+			"style": {
+				"navigationBarTitleText": "我的团队",
+				"navigationBarBackgroundColor":"#000",
+				"navigationBarTextStyle":"white"
+			}
 		}, 
-		
 		{
 			"path": "pages/user/user",
 			"style": {
@@ -150,9 +161,24 @@
 		{
 			"path": "pages/user/shareQrCode",
 			"style": {
-				"navigationBarTitleText": "邀请好友"
+				"navigationBarTitleText": "我的二维码",
+				"navigationBarBackgroundColor":"#000",
+				"navigationBarTextStyle":"white"
 			}
 		},
+		{
+			"path": "pages/user/promotion",
+			"style": {
+				"navigationBarTextStyle": "white",
+				"app-plus": {
+					"titleNView": {
+						"backgroundColor": "#15130f",
+						"type": "float",
+						"titleText": "我的推广" 
+					}
+				}
+			}
+		},
 		{
 			"path": "pages/profit/profit",
 			"style": {

pages/index/info.vue

@@ -0,0 +1,11 @@
+<template>
+	<view class="center">
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/set/userinfo.vue

@@ -1,35 +1,56 @@
 <template>
 	<view class="content">
-		<view class="row b-b">
+		<view class="row1">
+			<text class="tit">头像</text>
+			<view class="background-img" @click.stop="imgsub"><image class="background-img" v-model="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image></view>
+		</view>
+		<view class="row">
 			<text class="tit">昵称</text>
-			<input class="input" type="text" v-model="name" placeholder="修改昵称" placeholder-class="placeholder" />
+			<input class="input" type="text" v-model="userInfo.nickname" placeholder-class="placeholder" />
+		</view>
+		<view class="row">
+			<text class="tit">ID</text>
+			<input class="input" type="text"  disabled="true" v-model="userInfo.uid" placeholder-class="placeholder" />
+		</view>
+		<view class="row">
+			<text class="tit">账户</text>
+			<input class="input" type="text"  disabled="true" v-model="userInfo.account" placeholder-class="placeholder" />
 		</view>
-		<button class="add-btn" @click="confirm">提交</button>
+		<view class="add-btn" @click="confirm">提交</view>
+		<view class="out" @click="toLogout">退出登录</view>
 	</view>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import { userEdit } from '@/api/set.js';
-export default {
-	data() {
-		return {
-			name: ''
-		};
-	},
+import { mapState,mapMutations } from 'vuex';
+import { uploads } from '@/api/user.js';
+import {userEdit,logout} from '@/api/set.js';
 
-	computed: {
-		...mapState('user', ['userInfo'])
+export default{
+	data(){
+		return{
+			
+		}
 	},
-	onShow(option) {
-		this.name = this.userInfo.nickname + '';
+	onLoad() {
+		console.log(this.userInfo)
+	},
+	computed: {
+		...mapState('user',['userInfo'])
 	},
 	methods: {
-		switchChange(e) {
-			this.addressData.default = e.value;
+		...mapMutations('user',['logout']),
+		imgsub() {
+			console.log('上传头像')
+			uploads({
+				filename: ''
+			}).then(data => {
+				console.log("data",data);
+				this.userInfo.avatar = data[0].url;
+			})
 		},
 		confirm() {
-			userEdit({ nickname: this.name, avatar: this.userInfo.avatar })
+			userEdit({ avatar: this.userInfo.avatar ,nickname: this.userInfo.nickname})
 				.then(e => {
 					this.$api.msg('修改成功');
 					setTimeout(()=> {
@@ -42,52 +63,92 @@ export default {
 				.catch(e => {
 					console.log(e);
 				});
-		}
+		},
+		toLogout(){
+			let obj = this;
+			uni.showModal({
+			    content: '确定要退出登录么',
+			    success: (e)=>{
+			    	if(e.confirm){
+						logout({}).then((e) => {
+							uni.navigateBack();
+						}).catch((e) => {
+							console.log(e);
+						})
+			    		obj.logout();
+			    	}
+			    }
+			});
+		},
 	}
-};
+}
 </script>
 
 <style lang="scss">
-page {
-	background: $page-color-base;
-	padding-top: 16upx;
-}
-
-.row {
-	display: flex;
-	align-items: center;
-	position: relative;
-	padding: 0 30upx;
-	height: 110upx;
-	background: #fff;
-
-	.tit {
-		flex-shrink: 0;
-		width: 120upx;
-		font-size: 30upx;
-		color: $font-color-dark;
+	.row1 {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		padding: 0 30upx;
+		height: 110upx;
+		background: #000;
+		margin-bottom: 20upx;
+		.tit {
+			flex-shrink: 0;
+			width: 120upx;
+			font-size: $font-lg;
+			color: #fff;
+		}
+		
+		.background-img {
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+			background: #f2f2f2;
+		}
 	}
-	.input {
-		flex: 1;
-		font-size: 30upx;
-		color: $font-color-dark;
+	.row {
+		display: flex;
+		align-items: center;
+		padding: 0 30upx;
+		height: 110upx;
+		background: #000;
+	
+		.tit {
+			flex-shrink: 0;
+			width: 120upx;
+			font-size: $font-lg;
+			color: #fff;
+		}
+		.input {
+			flex: 1;
+			text-align: right;
+			font-size: $font-base;
+			color: #fff;
+		}
 	}
-	.iconlocation {
-		font-size: 36upx;
-		color: $font-color-light;
+	.add-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 158rpx auto 30rpx;
+		width: 560rpx;
+		height: 80rpx;
+		background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
+		border-radius: 40px;
+		color: #FFFFFF;
 	}
-}
-.add-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 690upx;
-	height: 80upx;
-	margin: 60upx auto;
-	font-size: $font-lg;
-	color: #fff;
-	background-color: $base-color;
-	border-radius: 10upx;
-	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
-}
-</style>
+	.out {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 auto 30rpx;
+		width: 560rpx;
+		height: 80rpx;
+		border: 1px solid #FFECD6;
+		background: #FFFFFF;
+		border-radius: 40px;
+		color: #CE9C6D;
+	}
+</style>

pages/user/promotion.vue

@@ -0,0 +1,268 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<image src="../../static/img/promation.png" mode="" class="bg"></image>
+			<view class="money-box">
+				<view class="money">
+					{{ all }}
+					<text>人</text>
+				</view>
+				<view class="text">我的推广人数</view>
+			</view>
+		</view>
+		<view class="navbar flex">
+			<view class="nav-item">
+				<view class="num">5</view>
+				<view class="font">奖励层数</view>
+			</view>
+			<view class="xian"></view>
+			<view class="nav-item">
+				<view class="num">120</view>
+				<view class="font">成交人数</view>
+			</view>
+		</view>
+		<view class="swiper-box" :style="{ height: maxheight + 'px' }">
+			<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
+				<!-- 空白页 -->
+				<empty v-if="loaded === true && list.length === 0"></empty>
+
+				<!-- 订单列表 -->
+				<view class="order-item flex" v-for="(item, index) in list" :key="index">
+					<view class="title-box flex_item">
+						<view class="title-avatar"><image :src="item.avatar"></image></view>
+						<view class="list_tpl">
+							<view class="title">
+								<text>{{ item.email || item.phone }}</text>
+							</view>
+							<view class="time">
+								<text>{{ item.time }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<uni-load-more :status="loadingType"></uni-load-more>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { spreadCommission, userBalance } from '@/api/wallet.js';
+import { mapState, mapMutations } from 'vuex';
+import { getMoneyStyle } from '@/utils/rocessor.js';
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+import empty from '@/components/empty';
+export default {
+	components: {
+		empty,
+		uniLoadMore
+	},
+	onReady() {
+		//初始化获取页面宽度
+		uni.createSelectorQuery()
+			.select('.content')
+			.fields(
+				{
+					size: true
+				},
+				data => {
+					console.log(data);
+					console.log(Math.floor((data.width / 750) * 300));
+					//保存头部高度
+					this.maxheight = data.height - Math.floor((data.width / 750) * 570);
+					console.log(this.maxheight);
+				}
+			)
+			.exec();
+	},
+	data() {
+		return {
+			// 头部图高度
+			maxheight: '',
+			tabCurrentIndex: 0,
+			all: '100',
+			list: '',
+			loadingType: 'more'
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		// this.loadData();
+	},
+	methods: {
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: #000;
+	height: 100%;
+}
+.content-money {
+	padding-bottom: 30rpx;
+	background: $page-color-base;
+	position: relative;
+	.bg {
+		position: absolute;
+		width: 100%;
+	}
+	.moneyTx {
+		position: absolute;
+		top: 150rpx;
+		right: 0rpx;
+		width: 150rpx;
+		padding: 10rpx 30rpx;
+		border: 2px solid #ffffff;
+		border-top-left-radius: 99rpx;
+		border-bottom-left-radius: 99rpx;
+		color: #ffffff;
+		line-height: 1;
+		font-size: $font-base;
+	}
+	.buttom-box {
+		background-color: #ffffff;
+		text-align: center;
+		margin: 0 30rpx;
+		padding: 20rpx 0;
+		border-radius: $border-radius-sm;
+		margin-top: -60rpx;
+		.buttom {
+			font-size: $font-lg;
+			flex-grow: 1;
+		}
+		.interval {
+			width: 2px;
+			height: 60rpx;
+			background-color: #eeeeee;
+		}
+		.icon {
+			height: 50rpx;
+			width: 48rpx;
+			margin: 0 auto;
+			.icon-img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+.money-box {
+	// background-color: $base-color;
+	padding-top: var(--status-bar-height);
+	height: 368rpx;
+	color: #fad6b0;
+	text-align: center;
+	position: relative;
+	.text {
+		font-size: $font-sm;
+	}
+	.money {
+		padding-top: 147rpx;
+		font-size: 47px;
+		font-family: PingFang SC;
+		font-weight: bold;
+		text {
+			font-size: 24px;
+		}
+	}
+}
+
+.navbar {
+	width: 702rpx;
+	height: auto;
+	padding: 20rpx 0;
+	background: linear-gradient(90deg, #393326, #27221d);
+	border: 2rpx solid #f5d2ad;
+	border-radius: 10rpx;
+	position: relative;
+	z-index: 10;
+	margin: 0 auto;
+	.xian {
+		width: 2rpx;
+		height: 54rpx;
+		background: #eeeeee;
+	}
+	.nav-item {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		color: #fff;
+		position: relative;
+		width: 50%;
+		.num {
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fad6b0;
+		}
+		.font {
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+		}
+	}
+}
+//列表
+
+.swiper-box {
+	padding-top: 10rpx;
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+
+		.title-box {
+			width: 100%;
+
+			.title-avatar {
+				width: 100rpx;
+				height: 100rpx;
+				margin-right: 25rpx;
+				border-radius: 100%;
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+
+			.list_tpl {
+				width: 85%;
+
+				.title {
+					font-size: $font-lg;
+					color: $font-color-base;
+					overflow: hidden; //超出的文本隐藏
+					text-overflow: ellipsis; //溢出用省略号显示
+					white-space: nowrap;
+				}
+
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
+			}
+		}
+
+		.money {
+			color: #db1935;
+			font-size: $font-lg;
+		}
+	}
+}
+.content {
+	height: 100%;
+	.empty-content {
+		background-color: #000;
+	}
+}
+</style>

pages/user/team.vue

@@ -0,0 +1,328 @@
+<template>
+	<view class="content">
+		<!-- 头部 -->
+
+		<view class="container">
+			<view class="jiedianbackground"><image src="../../static/img/jiedian.png" mode=""></image></view>
+			<view class="number-box">
+				<view class="number">
+					<text>100</text>
+					人
+				</view>
+				<view class="renshu">我的团队人数</view>
+			</view>
+		</view>
+		<view class="message">
+			<!-- <view class="back" @click="navBack()" v-if="parentList.length > 0">
+				<image src="../../static/img/zhengyi10.png" mode=""></image>
+				返回
+			</view> -->
+			<view class="relation-box">
+				<view class="relation">
+					<view class="headbox">
+						<view class="head">
+							<view class="photo"><image v-if="avatar" :src="avatar || '/static/error/missing-face.png'"></image></view>
+						</view>
+						<!-- <view class="head-title">
+							<image src="../../static/error/missing-face.png" mode=""></image>
+						</view> -->
+					</view>
+					<view class="information">
+						<view class="name clamp">{{ name }}</view>
+						<view class="cell clamp">{{ phone }}</view>
+					</view>
+				</view>
+				<view class="sanchaji"><image src="../../static/img/sanchaji.png" mode=""></image></view>
+				<view class="subordinate flex">
+					<view class="subordinate-box" v-for="(item, index) in childList">
+						<view class="head"><image :src="item.avter || '/static/error/missing-face.png'" mode=""></image></view>
+						<view class="name clamp">{{ item.name }}</view>
+						<view class="phone clamp">{{ item.phone }}</view>
+					</view>
+					<template v-if="childList.length < 5">
+						<view class="subordinate-box" v-for="item in (5-childList.length)">
+							<view class="head"></view>
+							<view class="name clamp"></view>
+							<view class="phone clamp"></view>
+						</view>
+					</template>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+import { getjiedian, getReferralList, addJiedian } from '@/api/user.js';
+import { mapState, mapMutations } from 'vuex';
+export default {
+	components: {
+		uniPopup
+	},
+	data() {
+		return {
+			name: '', //当前节点姓名
+			phone: '', //当前节点手机号
+			avatar: '', //当前节点头像
+			id: '',
+			childList: [{
+				name:'11',
+				phone:'13300000000'
+			},{
+				name:'12',
+				phone:'13300000001'
+			},{
+				name:'13',
+				phone:'13300000003'
+			},{
+				name:'14',
+				phone:'13300000004'
+			},
+			] //当前节点的下级
+		};
+	},
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	onLoad() {
+		this.name = this.userInfo.nickname;
+		this.phone = this.userInfo.phone;
+		this.avatar = this.userInfo.avatar;
+		this.id = this.userInfo.uid;
+		this.loadData();
+	},
+
+	methods: {
+		//返回
+
+		loadData() {
+			const obj = this;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	padding: 0;
+	margin: 0;
+	height: 100%;
+	background-color: #000;
+}
+
+.container {
+	width: 750rpx;
+	height: 400rpx;
+	position: relative;
+
+	.jiedianbackground {
+		position: absolute;
+		width: 750rpx;
+		height: 400rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.number-box {
+		width: 750rpx;
+		height: 400rpx;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+
+		.number {
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #fad6b0;
+
+			text {
+				font-size: 72rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				line-height: 86rpx;
+			}
+		}
+
+		.renshu {
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #fad6b0;
+		}
+	}
+}
+
+.message {
+	padding: 0 30rpx;
+
+	.relation-box {
+		margin-top: 100rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.relation {
+			position: relative;
+			display: flex;
+			align-items: center;
+
+			.headbox {
+				position: absolute;
+				// width: 154rpx;
+				// height: 154rpx;
+
+				.head {
+					width: 154rpx;
+					height: 154rpx;
+					background: #fff;
+					box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
+					border-radius: 50%;
+					overflow: hidden;
+
+					.photo {
+						width: 154rpx;
+						height: 154rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+
+				.head-title {
+					margin: -30rpx 30rpx 0 30rpx;
+					width: 94rpx;
+					height: 32rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				// .head-name{
+				// 	max-width: 100%;
+				// 	font-size: 32rpx;
+				// 	font-weight: bold;
+				// 	color: #333333;
+				// }
+				// .head-phone{
+				// 	font-size: 26rpx;
+				// 	font-weight: 500;
+				// 	color: #999999;
+				// }
+			}
+
+			.information {
+				margin-left: 77rpx;
+				display: flex;
+				padding: 20rpx 10rpx;
+				flex-direction: column;
+				width: 297rpx;
+				height: 137rpx;
+				background: linear-gradient(90deg, #393326, #27221d);
+				border: 4rpx solid #fad6b0;
+				border-radius: 10rpx;
+
+				.name {
+					text-align: left;
+					margin-left: 70rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #fad6b0;
+				}
+
+				.cell {
+					text-align: left;
+					margin-left: 70rpx;
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #fad6b0;
+				}
+			}
+		}
+
+		.sanchaji {
+			margin: 30rpx 0;
+			width: 90%;
+			height: 91rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.subordinate {
+			width: 750rpx;
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			.subordinate-box {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				.head {
+					border-radius: 50%;
+					background: #fff;
+					width: 120rpx;
+					height: 120rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.name {
+					max-width: 120rpx;
+					margin-top: 10rpx;
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FFFFFF;
+				}
+				.phone {
+					max-width: 120rpx;
+					margin-top: 10rpx;
+					font-size: 22rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
+				}
+			}
+		}
+	}
+
+	.back {
+		float: right;
+		margin-top: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		image {
+			width: 24rpx;
+			height: 23rpx;
+		}
+
+		width: 104rpx;
+		height: 39rpx;
+		border: 2rpx solid #6eab4e;
+		border-radius: 7rpx;
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #6eab4e;
+	}
+}
+</style>

pages/user/user.vue

@@ -1,33 +1,89 @@
 <template>
 	<view class="container">
 		<view class="user-info-box">
-			<view class="detail flex" @click="navTo('/pages/set/userinfo')">
-				<view class="portrait-box"><image class="portrait" src=" /static/error/missing-face.png"></image></view>
+			<view class="detail flex">
+				<view class="portrait-box"><image class="portrait" src=" ../../static/error/missing-face.png"></image></view>
 				<view class="info-box">
 					<view class="username">游客</view>
 					<view class="font-size-sm">13800000000</view>
 				</view>
 			</view>
-			<view class="config iconfont"><text class="setting iconsetting" @click="navTo('/pages/set/set')"></text></view>
+			<view class="config iconfont"><text class="setting iconsetting" @click="navTo('/pages/set/userinfo')"></text></view>
 		</view>
 		<view class="vip-box"><image src="../../static/img/vip.png" mode=""></image></view>
 
 		<view class="tt">
-			<view class="tt-box" @click="nav('/pages/assets/myPing')">
+			<view class="tt-box" @click="navTo('/pages/user/promotion')">
 				<image src="../../static/img/tuiguang.png" class="tt-icon1" mode=""></image>
 				<view class="tt-txt">我的推广</view>
 				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
 			</view>
+			<view class="tt-box" @click="navTo('/pages/user/team')">
+				<image src="../../static/img/team.png" class="tt-icon1" mode=""></image>
+				<view class="tt-txt">我的团队</view>
+				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+			</view>
+			<view class="tt-box" @click="navTo('/pages/user/shareQrCode')">
+				<image src="../../static/img/share.png" class="tt-icon1" mode=""></image>
+				<view class="tt-txt">分享好友</view>
+				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+			</view>
+			<view class="tt-box" @click="open()">
+				<image src="../../static/img/kefu.png" class="tt-icon1" mode=""></image>
+				<view class="tt-txt">联系客服</view>
+				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+			</view>
 		</view>
+		<uni-popup ref="popup" type="center">
+			<view class="popup-box">
+				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
+				<view class="mian">
+					<view class="delivery">
+						<view class="title">已经为您定制专属客服</view>
+						<image src="../../static/img/img010.png" mode=""></image>
+					</view>
+					<view class="nocancel">客服电话: {{ text }}</view>
+					<view class="comfirm-box">
+						<view class="cancel" @click="cancel">取消</view>
+						<view class="comfirm" @click="comfirm(text)">拨打电话</view>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+import uniCopy from '@/utils/uni-copy.js';
 export default {
 	data() {
-		return {};
+		return {
+			text:'123456789'
+		};
 	},
-	methods: {}
+	methods: {
+		navTo(url) {
+			// if (!this.hasLogin) {
+			// 	// 保存地址
+			// 	saveUrl();
+			// 	// 登录拦截
+			// 	interceptor();
+			// } else {
+			uni.navigateTo({
+				url
+			});
+			// }
+		},
+		open() {
+			console.log('点击出现弹窗');
+			this.$refs.popup.open();
+		},
+		// 客服弹窗 - 取消
+		cancel() {
+			this.$refs.popup.close();
+		}
+	}
 };
 </script>
 
@@ -87,13 +143,14 @@ page,
 	background-color: #000;
 
 	.tt-box {
+		padding: 20rpx;
 		height: 100rpx;
 		display: flex;
 		align-items: center;
-		border-bottom: 1px solid #f0f0f0;
+		border-bottom: 1px solid #838383;
 		.tt-icon1 {
 			width: 42rpx;
-			height: 42rpx;
+			height: 37rpx;
 		}
 		.tt-icon2 {
 			width: 49rpx;
@@ -113,11 +170,12 @@ page,
 		}
 
 		.tt-txt {
-			margin-left: 36rpx;
-			font-size: 32rpx;
+			font-size: 28rpx;
 			font-family: PingFang SC;
 			font-weight: 500;
-			color: #333333;
+			color: #ffffff;
+			margin-left: 36rpx;
+			color: #ffffff;
 			flex: 1;
 		}
 
@@ -128,7 +186,93 @@ page,
 	}
 
 	.border-b {
-		border-bottom: 1px solid #f1f1f1;
+		border-bottom: 1px solid #f0f0f0;
+	}
+}
+.popup-box {
+	width: 522rpx;
+	height: 605rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	position: relative;
+	.img {
+		position: relative;
+		top: -56rpx;
+		left: 0;
+		width: 522rpx;
+		height: 132rpx;
+		display: flex;
+		justify-content: center;
+		image {
+			border-radius: 20rpx 20rpx 0 0;
+			width: 450rpx;
+			height: 132rpx;
+		}
+	}
+
+	.mian {
+		margin-top: -44rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// padding: 32rpx 32rpx;
+		background-color: #ffffff;
+		border-radius: 0 0 20rpx 20rpx;
+		text-align: center;
+
+		.delivery {
+			font-size: 40rpx;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			.title {
+			}
+			image {
+				margin-top: 48rpx;
+				width: 172rpx;
+				height: 160rpx;
+			}
+		}
+
+		.nocancel {
+			font-size: 32rpx;
+			color: #333333;
+			margin-top: 14rpx;
+		}
+
+		.comfirm-box {
+			margin-top: 52rpx;
+			display: flex;
+			// margin-bottom: 32rpx;
+
+			// justify-content: space-around;
+			.cancel {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				border: 1px solid #dcc786;
+				border-radius: 38rpx;
+
+				font-size: 32rpx;
+				color: #605128;
+			}
+
+			.comfirm {
+				margin-left: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+				border-radius: 38px;
+				font-size: 32rpx;
+				color: #605128;
+			}
+		}
 	}
 }
 </style>