浅念
283 lines
6.4 KiB
Vue
283 lines
6.4 KiB
Vue
<template>
|
||
<view class="contents">
|
||
<view class="navbar">{{$t('mine.title')}}</view>
|
||
<view class="content">
|
||
<view class="contop">
|
||
<view class="">
|
||
<!-- <image class="userimg" :src="userinfo.avatar" mode=""></image> -->
|
||
<image class="userimg" src="/static/image/mine/user.png" mode=""></image>
|
||
</view>
|
||
<view class="right" @click="changinfo">
|
||
<view class="">
|
||
<text>迪士尼公主</text>
|
||
<image src="/static/image/mine/edit.png" mode=""></image>
|
||
</view>
|
||
<view class="mineid">
|
||
ID：080427
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottomCon">
|
||
<view class="sonContent" @click="navTo('/pages/mine/massege')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon1.png"></image>
|
||
<span>{{$t('mine.msg')}}</span>
|
||
<view class="">
|
||
<view class="badge">
|
||
0
|
||
</view>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="sonContent" @click="navTo('/pages/mine/resetPwd')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon2.png"></image>
|
||
<span>{{$t('mine.cpassword')}}</span>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
<view class="sonContent" @click="show=true">
|
||
<image class="son-img-bg" src="/static/image/mine/icon3.png"></image>
|
||
<span>{{$t('mine.contact')}}</span>
|
||
<uni-icons type="right" size="18" class="icon"></uni-icons>
|
||
</view>
|
||
<view class="sonContent" @click="navTo('/pages/mine/feedback')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon4.png"></image>
|
||
<span>{{$t('mine.feedback')}}</span>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
<view class="sonContent" @click="navTo('/pages/mine/about')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon5.png"></image>
|
||
<span>{{$t('mine.about')}}</span>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
<view class="sonContent" @click="navTo('/pages/mine/logoff')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon6.png"></image>
|
||
<span>{{$t('mine.logoff')}}</span>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
<view class="sonContent" @click="navTo('/pages/login/index')">
|
||
<image class="son-img-bg" src="/static/image/mine/icon7.png"></image>
|
||
<span>{{$t('mine.logout')}}</span>
|
||
<uni-icons type="right" class="icon" size="18"></uni-icons>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 联系客服弹框 -->
|
||
<u-popup :show="show" :round="20" mode="center" @close="close">
|
||
<view class="popupcontent">
|
||
<image class="log1" src="/static/image/mine/kefu.png"></image>
|
||
<view class="title">{{$t('mine.kfphone')}}</view>
|
||
<view class="calls">13545678952</view>
|
||
<button class="btn" @click="callPhone()">{{$t('call')}}</button>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { request,showToast } from '@/api/apiT.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
userinfo:'',
|
||
show: false
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
},
|
||
methods: {
|
||
changinfo(){
|
||
uni.navigateTo({
|
||
url: '/pages/mine/changinfo'
|
||
});
|
||
},
|
||
navTo(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
// 拨打电话
|
||
callPhone(phoneNumber) {
|
||
this.show = false;
|
||
if (!phoneNumber) {
|
||
uni.showToast({
|
||
title: '请输入电话号码',
|
||
icon: 'none',
|
||
});
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: () => {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail: (err) => {
|
||
console.log('拨打电话失败', err);
|
||
},
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
uni-page-body {
|
||
background-color: #F6F6F6 !important;
|
||
}
|
||
.badge{
|
||
padding: 0px 7px;
|
||
/* #ifdef APP-PLUS */
|
||
padding: 2px 8px;
|
||
margin-right: 30px;
|
||
/* #endif */
|
||
display: inline-block;
|
||
text-align: center;
|
||
background-color: #ff3d40;
|
||
color: white;
|
||
border-radius: 50%;
|
||
}
|
||
.contents{
|
||
background-image: url("/static/image/mine/bg.png");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.navbar{
|
||
padding-top: 30px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
}
|
||
.content{
|
||
padding:10px 15px 15px;
|
||
.contop{
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15px 0px 30px;
|
||
font-size: 34rpx;
|
||
color: white;
|
||
.right{
|
||
margin-left: 15px;
|
||
image{
|
||
width: 32rpx;
|
||
height:32rpx;
|
||
margin-left: 10px;
|
||
}
|
||
view{
|
||
line-height: 30px;
|
||
}
|
||
.mineid{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.slot-image {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
margin-right: 10px;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.userimg{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
}
|
||
.timg{
|
||
width: 100%;
|
||
height: 220rpx;
|
||
}
|
||
.bottomCon {
|
||
margin-top: 40rpx;
|
||
color: #000;
|
||
font-weight: 400;
|
||
// padding: 0 24rpx 20rpx;
|
||
box-sizing: border-box;
|
||
// border-radius: 22rpx;
|
||
// background: #FFFFFF;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
|
||
.sonTitle {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 36rpx;
|
||
border-bottom: 2rpx solid #F3F3F3;
|
||
}
|
||
.sonContent {
|
||
background: #FFFFFF;
|
||
border-radius: 22rpx;
|
||
position: relative;
|
||
flex: 1;
|
||
// border-bottom: 2rpx solid #F3F3F3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
padding: 32rpx 28rpx;
|
||
color: #000;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
/* #ifdef APP-PLUS */
|
||
.icon{
|
||
position: absolute;
|
||
right: -15px;
|
||
top: 32%;
|
||
}
|
||
/* #endif */
|
||
.son-img-bg {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
top: 45%;
|
||
margin-top: -20rpx;
|
||
left: 12px;
|
||
}
|
||
span {
|
||
margin-left: 68rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
.popupcontent{
|
||
padding: 20px 30px;
|
||
background: linear-gradient(to bottom, #B1C8FF, #ffffff);
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
color: #333333;
|
||
.title{
|
||
font-size: 32rpx;
|
||
}
|
||
.calls{
|
||
color: #3471FF;
|
||
font-size: 40rpx;
|
||
margin: 10px 0px;
|
||
}
|
||
image{
|
||
width: 360rpx;
|
||
height:360rpx;
|
||
}
|
||
.btn{
|
||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||
color: white;
|
||
border-radius: 50px;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
</style> |