<template> <view class="pages"> <view class="menu-banner"> <view class="log"> <!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> --> <!-- <view class="logText">未 来 咖 啡</view> --> </view> <image :src="'https://s3.bmp.ovh/imgs/2022/07/05/1768111c5c7f5300.gif'"/> <!-- <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.mp4"></video> --> <view class="mod11"> <view class="avatar"> <image :src="'../../static/touxiang.png'"></image> </view> <view class="user-info" @click="goToMyPage(userms)"> <view class="user-infocontent"> <view class="user-name" v-if="userms">HI!{{ userInfo.customerName || '我是谁' }}</view> <view class="user-name" v-else>未登录</view> <view class="dialog"> <view class="content" v-if="userms">希望你今天,明天,天天都开心~</view> <view class="content" v-if="!userms">请您尽快登录~</view> </view> </view> <view> <image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> <button class="login-btn" v-if="!userms" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录 </button> </view> </view> </view> </view> <!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> --> <view class="contents" v-if="userms"> <view class="myOrder" @click="goToPage('order')"> <view class="text">我的订单</view> <view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view> </view> <view class="line"></view> <view class="right_box"> <view class="box" @click.stop="goToPage('coupon')"> <view class="left"> <view class="text">HOOLOO券</view> </view> <view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view> </view> <view class="line"></view> <view class="box_two" @click="goToPage('msg')"> <view class="left"> <view class="text">我的消息</view> </view> <view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view> </view> </view> </view> <view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}"> <button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;"> <view class="text">我的订单</view> <view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view> </button> <view class="line"></view> <view class="right_box"> <button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;"> <view class="left"> <view class="text">HOOLOO券</view> </view> <view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view> </button> <view class="line"></view> <button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;"> <view class="left"> <view class="text">我的消息</view> </view> <view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view> </button> </view> </view> <view v-if="userms" class="function"> <view class="title">常用功能</view> <view class="function_item"> <u-icon name="server-fill" color="#000000" size="16"></u-icon> <button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系客服</button> <view class="function_item_icon"> <image :style="{'height':'100%','width':'100%'}" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> </view> </view> </view> <taBar select="2"></taBar> <show-toast ref="toast"/> </view> </template> <script> import User from '@/request/user' export default { onLoad() { if(!this.userms){ User.wxLoginAndGetOpenid(true).then(loginInfo=>{ this.loginInfo = loginInfo }) } }, data() { return { loginInfo:"" } }, computed: { userms() { return this.$store.getters.Authorization; }, userInfo() { return this.$store.state.user.userInfo; }, }, methods: { // 手机号授权登录 getPhoneNumber(e) { if (e.detail.errMsg == 'getPhoneNumber:ok') { e.loginInfo = this.loginInfo User.getPhoneNumber(e); } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) } }, goToPage(page) { page == 'coupon' && this.showToast({ title: '功能未开放!', icon: 'none' }); if (!this.userms) { // this.loginByPhoneNumber(page) return } page == 'order' && uni.switchTab({ url: '/pages/order/order' }) page == 'msg' && uni.navigateTo({ url: '/mineSubPackage/pages/msg/index' }) } } } </script> <style lang="scss" scoped> button::after { border: none; } .payment { border-radius: 0; display: block; position: absolute; width: 100%; height: 100%; opacity: 0; left: 0; } .menu-box {} .menu-banner { position: relative; height: 504rpx; image { height: 400rpx; } .log { position: absolute; z-index: 99; top: 100rpx; left: 30rpx; .logImg { width: 312rpx; height: 72rpx; } .logText { font-size: 42rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #FFFFFF; } } video { width: 100%; height: 376rpx; } } .mod11 { display: flex; width: 686rpx; height: 104rpx; padding: 16rpx 32rpx 16rpx 32rpx; background: #ffffff; position: absolute; z-index: 1; bottom: 52rpx; left: 33rpx; box-sizing: border-box; box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1); backdrop-filter: blur(0px); z-index: 9; .avatar { display: flex; justify-items: center; align-items: center; width: 72rpx; height: 72rpx; margin-right: 16.93rpx; border-radius: 72rpx; image { width: 100%; height: 100%; border-radius: 72rpx; }; } .user-info { display: flex; align-items: center; width: 530.55rpx; justify-content:space-between; flex-wrap:nowrap; .user-name { margin-top: 2.68rpx; font-size: 24rpx; font-weight: normal; font-family: Arial-BoldMT, Arial; color: #333333; } .dialog { font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; margin-top: 4.64rpx; .content { flex: 1; } } .arrow-right-select{ width: 15.27rpx; height: 21.68rpx; } } .login-btn { // width: 114rpx; margin-right: -5rpx; width: 167rpx; height: 64rpx; background: #0050F6; border-radius: 2rpx; text-align: center; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; line-height: 64rpx; } } .mod11::after{ border-radius: 0rpx; } .contents { display: flex; padding: 52rpx 64rpx 52rpx 70rpx; margin: -28rpx 32rpx 24rpx 32rpx; align-items: center; justify-content: space-between; background: #FFFFFF; // background: #0000FF; .myOrder { height: 216rpx; // background: #FF0000; background: #FFFFFF; align-items: center; text-align: left; .text { margin-top: 5.02rpx; font-size: 28rpx; height: 40rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; width: 112rpx; line-height: 40rpx; margin-right: 70.46rpx; color: #333333; } .desc { font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #323232; margin-top: 10rpx; } .iconbox { width: 99.94rpx; height: 110rpx; margin-left: 6rpx; margin-top: 48.98rpx; } .icon { width: 99.94rpx; height: 110rpx; margin: 0 auto; } } .line{ height: 216rpx; background: #E4E4E4; border: 1rpx solid #E4E4E4; } .right_box { flex: 1; // background: #00FF00; width: 306rpx; height: 216rpx; display: flex; justify-content: space-between; flex-direction: column; align-items: center; padding-left: 62.54rpx; .box_two { width: 100%; overflow: initial; height: 69rpx; // background: #FF0000; line-height: 30rpx; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; position: relative; .left { text-align: center; width: 154rpx; .text { 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 } } .right { .icon { width: 93.89rpx; height: 72.21rpx; } } } .box_two::after{ line-height: 30rpx; } .line { width: 306rpx; height: 2rpx; border: 1rpx solid #E4E4E4; margin: 38rpx 0rpx 40rpx 0rpx; } .box { margin-top: 4.05rpx; overflow: initial; width: 100%; height: 129rpx; line-height: 30rpx; // background: #FF0000; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; position: relative; .left { text-align: center; width: 154rpx; .text { 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 } } .right { .icon { width: 91.59rpx; height: 63.9rpx; } } } .box::after{ line-height: 30rpx; } } } .function { width: 686rpx; background: #FFFFFF; margin: 0 auto; padding: 21.72rpx 30rpx 29.28rpx 26rpx; box-sizing: border-box; .title { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; } .function_item { display: flex; font-size: 24rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #000000; line-height: 34rpx; display: flex; align-items: center; margin-top: 22rpx; .function_item_text { flex: 1; margin: 0; margin-left: 12rpx; padding: 10rpx; text-align: left; line-height: 1; background-color: #FFFFFF; font-weight: 400; color: #333333; font-family: PingFangSC-Regular, PingFang SC; font-size: 24rpx; border-radius: 0px; } .function_item_text::after { position: unset !important; border: unset; } .function_item_icon { margin-left: 6rpx; width: 15.27rpx; height: 21.68rpx; } } } </style>