hxx/uni-app-shopping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

拨号api

Browse Source
This commit is contained in:
jqtmviyu@gmail.com 2021-03-05 22:32:07 +08:00
parent ea33ee8b36
commit aa8b768eb6
1 changed files with 131 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
src/pages/my/my.vue
View File

@ -1,72 +1,90 @@
<template> <template>
<view> <view>
<view class="user"> <view class="user">
<!-- 1. 已登录 --> <!-- 1. 已登录 -->
<block v-if="userInfo.nickName"> <block v-if="userInfo.nickName">
<image class="user_avatar_bg" :src="userInfo.avatarUrl" mode="aspectFill"></image> <image
<u-avatar :src="userInfo.avatarUrl" mode="circle" :sex-icon="userInfo.gender===1? 'man' : 'woman'" show-sex="true" size="large" show-level="true" level-icon="level"></u-avatar> class="user_avatar_bg"
<text class="user_nickName">{{userInfo.nickName}}</text> :src="userInfo.avatarUrl"
</block> mode="aspectFill"
<!-- 2. 未登录 --> ></image>
<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" class="user_btn">去登录</button> <u-avatar
</view> :src="userInfo.avatarUrl"
mode="circle"
:sex-icon="userInfo.gender===1? 'man' : 'woman'"
show-sex="true"
size="large"
show-level="true"
level-icon="level"
></u-avatar>
<text class="user_nickName">{{userInfo.nickName}}</text>
</block>
<!-- 2. 未登录 -->
<button
v-else
open-type="getUserInfo"
@getuserinfo="getUserInfo"
class="user_btn"
>去登录</button>
</view>
<!-- 3 菜单:宫格布局 --> <!-- 3 菜单:宫格布局 -->
<view class="grid"> <view class="grid">
<u-grid <u-grid
:col="4" :col="4"
:border="false" :border="false"
> >
<u-grid-item> <u-grid-item>
<u-icon <u-icon
name="file-text" name="file-text"
:size="46" :size="46"
></u-icon> ></u-icon>
<view class="grid-text">待付款</view> <view class="grid-text">待付款</view>
</u-grid-item> </u-grid-item>
<u-grid-item> <u-grid-item>
<u-icon <u-icon
name="car" name="car"
:size="46" :size="46"
></u-icon> ></u-icon>
<view class="grid-text">待收货</view> <view class="grid-text">待收货</view>
</u-grid-item> </u-grid-item>
<u-grid-item> <u-grid-item>
<u-icon <u-icon
name="rmb-circle" name="rmb-circle"
:size="46" :size="46"
></u-icon> ></u-icon>
<view class="grid-text">退货/退款</view> <view class="grid-text">退货/退款</view>
</u-grid-item> </u-grid-item>
<u-grid-item> <u-grid-item>
<u-icon <u-icon
name="order" name="order"
:size="46" :size="46"
></u-icon> ></u-icon>
<view class="grid-text">全部订单</view> <view class="grid-text">全部订单</view>
</u-grid-item> </u-grid-item>
</u-grid> </u-grid>
</view> </view>
<!-- 4. 单元格布局 --> <!-- 4. 单元格布局 -->
<u-cell-group> <u-cell-group>
<u-cell-item <u-cell-item
icon="setting-fill" icon="setting-fill"
title="个人设置" title="个人设置"
:arrow="false" :arrow="false"
></u-cell-item> ></u-cell-item>
<u-cell-item <u-cell-item
icon="server-man" icon="server-man"
title="联系客服" title="联系客服"
value="400-618-40000" value="400-618-40000"
></u-cell-item> @click="phoneCall"
<u-cell-item ></u-cell-item>
icon="integral-fill" <u-cell-item
title="当前版本" icon="integral-fill"
value="v4.1.1" title="当前版本"
></u-cell-item> value="v4.1.1"
</u-cell-group> ></u-cell-item>
</view> </u-cell-group>
</view>
</template> </template>
<script> <script>
@ -83,56 +101,61 @@ export default {
getUserInfo({detail: {userInfo}}){ getUserInfo({detail: {userInfo}}){
this.userInfo = userInfo this.userInfo = userInfo
uni.setStorageSync("userInfo",userInfo) uni.setStorageSync("userInfo",userInfo)
},
phoneCall(){
uni.makePhoneCall({
phoneNumber: '114'
})
} }
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.user { .user {
position: relative; position: relative;
height: 330rpx; height: 330rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
.user_btn { .user_btn {
background-color: #07c160; background-color: #07c160;
color: #fff; color: #fff;
width: 400rpx; width: 400rpx;
&::after { &::after {
border: none; border: none;
}
}
.user_avatar {
width: 172rpx;
height: 172rpx;
border-radius: 50%;
overflow: hidden;
}
.user_nickName {
font-size: 32rpx;
margin-top: 20rpx;
color: #fff;
} }
} }
.user_avatar {
width: 172rpx;
height: 172rpx;
border-radius: 50%;
overflow: hidden;
}
.user_nickName {
font-size: 32rpx;
margin-top: 20rpx;
color: #fff;
}
}
.user_avatar_bg { .user_avatar_bg {
width: 120%; width: 120%;
height: 120%; height: 120%;
position: absolute; position: absolute;
left: -10%; left: -10%;
top: -10%; top: -10%;
z-index: -1; z-index: -1;
filter: blur(30px) grayscale(20%); filter: blur(30px) grayscale(20%);
} }
.grid { .grid {
margin: 20rpx; margin: 20rpx;
border-radius: 5rpx; border-radius: 5rpx;
} }
</style> </style>