mine.vue 8.74 KB
Newer Older
zhangpeng committed
1
<template>
张成 committed
2
	<view class="pages">
张成 committed
3 4
		<view class="menu-banner">
			<view class="log">
宋冰琦 committed
5 6
				<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
				<!-- <view class="logText">未 来 咖 啡</view> -->
张成 committed
7
			</view>
8
			<video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/17/a2aaece8ad026.mp4"></video>
张成 committed
9
		</view>
10 11 12
		<view v-if="userms" class="mod11">
			<view class="box16">
				<image :style="{'width':'100%','height':'100%'}" :src="'../../static/touxiang.png'"></image>
张成 committed
13
			</view>
14
			<text class="txt6">{{ userInfo.customerName || '我是谁' }}</text>
张成 committed
15
		</view>
张成 committed
16
		<button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button>
17
		<view class="contents" v-if="userms">
张成 committed
18
			<view class="myOrder" @click="goToPage('order')">
19 20
				<view class="text">我的订单</view>
				<view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
张成 committed
21
			</view>
22
			<view class="line"></view>
张成 committed
23
			<view class="right_box">
张成 committed
24
				<view class="box" @click.stop="goToPage('coupon')">
张成 committed
25 26 27
					<view class="left">
						<h3>HOOLOO券</h3>
					</view>
28
					<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
张成 committed
29
				</view>
30 31
				<view class="line"></view>
				<view class="box_two" @click="goToPage('msg')">
32
					<view class="left">
张成 committed
33 34
						<h3>我的消息</h3>
					</view>
35
					<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
张成 committed
36 37 38
				</view>
			</view>
		</view>
39
		<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}">
weijiguang committed
40
			<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
41 42
				<view class="text">我的订单</view>
				<view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
43
			</button>
44
			<view class="line"></view>
45
			<view class="right_box">
weijiguang committed
46
				<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
47 48 49
					<view class="left">
						<h3>HOOLOO券</h3>
					</view>
50
					<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
51
				</button>
52 53
				<view class="line"></view>
				<button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
54 55 56
					<view class="left">
						<h3>我的消息</h3>
					</view>
57
					<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
58 59 60 61
				</button>
			</view>
		</view>
		<view v-if="userms" class="function">
62
			<view class="title">常用功能</view>
张成 committed
63 64
			<view class="function_item">
				<u-icon name="server-fill" color="#000000" size="16"></u-icon>
65
				<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系客服</button>
66 67 68
				<view  class="function_item_icon">
					<image :style="{'height':'100%','width':'100%'}"  v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
				</view>
张成 committed
69 70
			</view>
		</view>
songbingqi committed
71
		<taBar select="2"></taBar>
72
		<show-toast ref="toast"/>
zhangpeng committed
73 74 75 76
	</view>
</template>

<script>
张成 committed
77 78
import User from '@/request/user'

张成 committed
79
export default {
80 81 82 83 84 85 86
	onLoad() {
		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
	},
张成 committed
87 88
	data() {
		return {
89
			loginInfo:""
zhangpeng committed
90
		}
张成 committed
91 92
	},
	computed: {
张成 committed
93 94 95 96 97 98
		userms() {
			return this.$store.getters.Authorization;
		},
		userInfo() {
			return this.$store.state.user.userInfo;
		},
张成 committed
99 100
	},
	methods: {
张成 committed
101 102 103
		// 手机号授权登录
		getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
104
				e.loginInfo = this.loginInfo
105
				User.getPhoneNumber(e);
张成 committed
106
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
107
				this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
张成 committed
108 109 110
			}
		},
		goToPage(page) {
111
			page == 'coupon' && this.showToast({ title: '功能未开放!', icon: 'none' });
张成 committed
112
			if (!this.userms) {
113
				// this.loginByPhoneNumber(page)
张成 committed
114 115 116 117 118
				return
			}
			page == 'order' && uni.switchTab({ url: '/pages/order/order' })
			page == 'msg' && uni.navigateTo({ url: '/mineSubPackage/pages/msg/index' })
		}
zhangpeng committed
119
	}
张成 committed
120
}
zhangpeng committed
121 122
</script>

张成 committed
123
<style lang="scss" scoped>
124 125 126
button::after {
	border: none;
}
张成 committed
127 128 129 130 131 132 133 134 135 136
.payment {
	border-radius: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	left: 0;
}

张成 committed
137 138 139 140
.menu-box {}

.menu-banner {
	position: relative;
141 142 143
	.video{
		height: 437rpx;
	}
张成 committed
144 145 146

	.log {
		position: absolute;
张成 committed
147
		z-index: 99;
张成 committed
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
		top: 100rpx;
		left: 30rpx;

		.logImg {
			width: 312rpx;
			height: 72rpx;
		}

		.logText {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

宋冰琦 committed
164
	video {
张成 committed
165 166 167 168
		width: 100%;
		height: 376rpx;
	}
}
张成 committed
169 170

.mod11 {
171
	border-radius: 0rpx;
172 173 174 175 176 177
	box-sizing: border-box;
	padding: 32rpx;
	width: 686rpx;
	height: 136rpx;
	background: #FFFFFF;
	backdrop-filter: blur(10px);
张成 committed
178 179
	margin: 0 auto;
	display: flex;
180 181 182 183
	 justify-content: flex-start;
	 align-items: center;
	margin-top: -90rpx;

张成 committed
184 185 186


	.txt6 {
187 188 189 190 191
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 32rpx;
张成 committed
192 193 194
	}

	.box16 {
195 196 197
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
张成 committed
198 199
	}
}
200 201 202
.mod11::after{
	border-radius: 0rpx;
}
张成 committed
203 204 205

.contents {
	display: flex;
宋冰琦 committed
206
	padding: 52rpx 52rpx 52rpx 70rpx;
207 208 209 210
	margin: 16rpx 32rpx 26rpx 32rpx;
	align-items: center;
	justify-content: space-between;
	background: #FFFFFF;
weijiguang committed
211
	// background: #0000FF;
张成 committed
212 213

	.myOrder {
宋冰琦 committed
214
		width: 30%;
215
		height: 197rpx;
weijiguang committed
216
		// background: #FF0000;
张成 committed
217
		background: #FFFFFF;
weijiguang committed
218
		align-items: center;
宋冰琦 committed
219
		text-align: left;
220 221
		
		.text {
宋冰琦 committed
222
			margin-top: 5rpx;
张成 committed
223
			font-size: 28rpx;
224 225 226
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
张成 committed
227 228
		}

weijiguang committed
229
		.desc {
张成 committed
230 231 232 233 234 235 236
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #323232;
			margin-top: 10rpx;
		}

weijiguang committed
237
		.icon {
宋冰琦 committed
238 239
			width: 94rpx;
			height:110rpx;
张成 committed
240
			margin: 0 auto;
宋冰琦 committed
241
			margin-top: 38rpx;
张成 committed
242 243 244
		}
	}

245 246 247 248 249 250
	.line{
		height: 197rpx;
		background: #E4E4E4;
		border: 1rpx solid #E4E4E4;
	}

张成 committed
251
	.right_box {
252
		flex: 1;
weijiguang committed
253 254
		// background: #00FF00;
		width: 52%;
255 256 257 258 259 260 261
		height: 196rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		padding-left: 60rpx;
		padding-right: 24rpx ;
weijiguang committed
262
		
263 264 265
		.box_two {
			width: 100%;
			overflow: initial;
宋冰琦 committed
266
			height: 69rpx;
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291
			// background: #FF0000;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
		
			.left {
				text-align: center;
				width: 154rpx;
		
				h3 {
					font-size: 28rpx;
					font-family: Arial-BoldMT, Arial;
					font-weight: normal;
					color: #333333;
				}
				.desc {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
					margin-top: 10rpx
				}
			}
weijiguang committed
292
		
293 294
			.right {
				.icon {
宋冰琦 committed
295 296
					width: 91rpx;
					height: 69rpx;
297 298 299 300 301 302 303
				}
			}
		}
		.line {
			width: 306rpx;
			height: 2rpx;
			border: 1rpx solid #E4E4E4;
宋冰琦 committed
304
			margin: 34rpx 0rpx;
305
		}
weijiguang committed
306
		.box {
307
			overflow: initial;
weijiguang committed
308 309
			width: 100%;
			height: 129rpx;
310
			line-height: 30rpx;
weijiguang committed
311 312 313 314 315 316 317 318 319
			// background: #FF0000;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
		
			.left {
				text-align: center;
320
				width: 154rpx;
weijiguang committed
321 322 323 324
		
				h3 {
					font-size: 28rpx;
					font-family: Arial-BoldMT, Arial;
325 326
					font-weight: normal;
					color: #333333;
weijiguang committed
327 328 329 330 331 332 333 334 335 336 337 338
				}
				.desc {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
					margin-top: 10rpx
				}
			}
		
			.right {
				.icon {
宋冰琦 committed
339 340
					width: 91rpx;
					height: 61rpx;
weijiguang committed
341 342
				}
			}
张成 committed
343 344 345 346 347
		}
	}
}

.function {
348
	width: 686rpx;
张成 committed
349 350
	background: #FFFFFF;
	margin: 0 auto;
351
	padding: 22rpx 26rpx;
张成 committed
352 353
	box-sizing: border-box;

354
	.title {
张成 committed
355 356
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
357 358
		font-weight: 500;
		color: #333333;
张成 committed
359 360 361
	}

	.function_item {
weijiguang committed
362
		display: flex;
张成 committed
363 364 365 366 367 368 369
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 34rpx;
		display: flex;
		align-items: center;
370
		margin-top: 22rpx;
张成 committed
371 372

		.function_item_text {
weijiguang committed
373
			flex: 1;
张成 committed
374
			margin: 0;
375
			margin-left: 16rpx;
张成 committed
376
			padding: 10rpx;
weijiguang committed
377
			text-align: left;
张成 committed
378 379
			line-height: 1;
			background-color: #FFFFFF;
380 381 382
			font-weight: 400;
			color: #333333;
			font-family: PingFangSC-Regular, PingFang SC;
张成 committed
383 384
			font-size: 24rpx;
			border-radius: 0px;
张成 committed
385 386
		}

张成 committed
387 388 389 390 391
		.function_item_text::after {
			position: unset !important;
			border: unset;
		}

张成 committed
392 393
		.function_item_icon {
			margin-left: auto;
394 395
			width: 12rpx;
			height: 21rpx;
张成 committed
396 397 398
		}
	}
}
张成 committed
399
</style>