第一次提交
This commit is contained in:
gxwebsoft
311
pages/user/bind/index.vue
Normal file
311
pages/user/bind/index.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<view class="header">
|
||||
<view class="title">
|
||||
<text>绑定您的手机号</text>
|
||||
</view>
|
||||
<view class="sub-title">
|
||||
<text>为了更好的服务您，请绑定手机号</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 表单 -->
|
||||
<view class="submit-form">
|
||||
<!-- 手机号 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<!-- 图形验证码 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
|
||||
<view class="form-item--parts">
|
||||
<view class="captcha" @click="getCaptcha()">
|
||||
<image class="image" :src="captcha.base64"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 短信验证码 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
|
||||
<view class="form-item--parts">
|
||||
<view class="captcha-sms" @click="handelSmsCaptcha()">
|
||||
<text v-if="!smsState" class="activate">获取验证码</text>
|
||||
<text v-else class="un-activate">重新发送({{ times }})秒</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 确认绑定 -->
|
||||
<view class="submit-button" @click="handleSubmit()">
|
||||
<text>确认绑定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as CaptchaApi from '@/api/captcha'
|
||||
import * as Verify from '@/utils/verify'
|
||||
|
||||
// 倒计时时长(秒)
|
||||
const times = 60
|
||||
|
||||
// 表单验证场景
|
||||
const GET_CAPTCHA = 10
|
||||
const FORM_SUBMIT = 20
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 图形验证码信息
|
||||
captcha: {},
|
||||
// 短信验证码发送状态
|
||||
smsState: false,
|
||||
// 倒计时
|
||||
times,
|
||||
// 手机号
|
||||
mobile: '',
|
||||
// 图形验证码
|
||||
captchaCode: '',
|
||||
// 短信验证码
|
||||
smsCode: ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
created() {
|
||||
// 获取图形验证码
|
||||
this.getCaptcha()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取图形验证码
|
||||
getCaptcha() {
|
||||
const app = this
|
||||
CaptchaApi.image().then(result => app.captcha = result.data)
|
||||
},
|
||||
|
||||
// 点击发送短信验证码
|
||||
handelSmsCaptcha() {
|
||||
const app = this
|
||||
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
|
||||
app.sendSmsCaptcha()
|
||||
app.getCaptcha()
|
||||
}
|
||||
},
|
||||
|
||||
// 表单验证
|
||||
formValidation(scene = GET_CAPTCHA) {
|
||||
const app = this
|
||||
// 验证获取短信验证码
|
||||
if (scene === GET_CAPTCHA) {
|
||||
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
// 验证表单提交
|
||||
if (scene === FORM_SUBMIT) {
|
||||
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证手机号
|
||||
validteMobile(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入手机号')
|
||||
return false
|
||||
}
|
||||
if (!Verify.isMobile(str)) {
|
||||
this.$toast('请输入正确格式的手机号')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证图形验证码
|
||||
validteCaptchaCode(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入图形验证码')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证短信验证码
|
||||
validteSmsCode(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入短信验证码')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 请求发送短信验证码接口
|
||||
sendSmsCaptcha() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
CaptchaApi.sendSmsCaptcha({
|
||||
form: {
|
||||
captchaKey: app.captcha.key,
|
||||
captchaCode: app.captchaCode,
|
||||
mobile: app.mobile
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
// 显示发送成功
|
||||
app.$toast(result.message)
|
||||
// 执行定时器
|
||||
app.timer()
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 执行定时器
|
||||
timer() {
|
||||
const app = this
|
||||
app.smsState = true
|
||||
const inter = setInterval(() => {
|
||||
app.times = app.times - 1
|
||||
if (app.times <= 0) {
|
||||
app.smsState = false
|
||||
app.times = times
|
||||
clearInterval(inter)
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 点击提交
|
||||
handleSubmit() {
|
||||
const app = this
|
||||
if (!app.isLoading && app.formValidation(FORM_SUBMIT)) {
|
||||
app.onSubmitEvent()
|
||||
}
|
||||
},
|
||||
|
||||
// 确认提交事件
|
||||
onSubmitEvent() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
UserApi.bindMobile({ form: { smsCode: app.smsCode, mobile: app.mobile } })
|
||||
.then(result => {
|
||||
// 显示操作成功
|
||||
app.$toast(result.message)
|
||||
// 跳转回原页面
|
||||
setTimeout(() => {
|
||||
app.onNavigateBack(1)
|
||||
}, 2000)
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交成功-跳转回原页面
|
||||
*/
|
||||
onNavigateBack(delta) {
|
||||
uni.navigateBack({
|
||||
delta: Number(delta || 1)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 100rpx 60rpx;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.header {
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.title {
|
||||
color: #191919;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 20rpx;
|
||||
color: #b3b3b3;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框元素
|
||||
.form-item {
|
||||
display: flex;
|
||||
padding: 18rpx;
|
||||
border-bottom: 1rpx solid #f3f1f2;
|
||||
margin-bottom: 25rpx;
|
||||
height: 96rpx;
|
||||
|
||||
&--input {
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 1rpx;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--parts {
|
||||
min-width: 100rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 图形验证码
|
||||
.captcha {
|
||||
height: 100%;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 192rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 短信验证码
|
||||
.captcha-sms {
|
||||
font-size: 22rpx;
|
||||
line-height: 50rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.activate {
|
||||
color: #cea26a;
|
||||
}
|
||||
|
||||
.un-activate {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 70rpx;
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
355
pages/user/equipment/index.vue
Normal file
355
pages/user/equipment/index.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
<view class="addres-list">
|
||||
<view class="address-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="title">
|
||||
<text>设备编号：{{ item.equipmentCode }}</text>
|
||||
<u-tag v-if="item.isCtive == '已激活'" :text="item.isCtive" plain size="mini" type="success"></u-tag>
|
||||
<u-tag v-else :text="item.isCtive" plain size="mini" type="warning"></u-tag>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="contacts">
|
||||
<view class="bms-info">
|
||||
<text class="item">电池型号：{{ item.batteryModel }}</text>
|
||||
<text class="item">BMS模块：{{ item.bms }}</text>
|
||||
<text class="item">工作状态：{{ item.workingStatus }}</text>
|
||||
<text class="item">电池状态：健康</text>
|
||||
</view>
|
||||
<view class="bms-image">
|
||||
<view class="bms-image-box">
|
||||
<image class="image" src="/static/battery.png"></image>
|
||||
<text class="bms-image-fbf">67%</text>
|
||||
</view>
|
||||
<u-tag text="离线" plain size="mini" type="info"></u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="item-option">
|
||||
<view class="_left">
|
||||
<u-icon label="操作" size="40" name="map" @click="navTo('package/user/equipment/operation?equipmentId='+item.equipmentId)"></u-icon>
|
||||
</view>
|
||||
<view class="line-align"></view>
|
||||
<view class="_right">
|
||||
<view class="events">
|
||||
<u-icon label="详情" size="40" name="file-text" @click="navTo('package/user/equipment/detail?equipmentId='+item.equipmentId)"></u-icon>
|
||||
<!-- <view class="event-item" @click="handleUpdate(item.address_id)">
|
||||
<text class="iconfont icon-edit"></text>
|
||||
<text class="title">编辑</text>
|
||||
</view>
|
||||
<view class="event-item" @click="handleRemove(item.address_id)">
|
||||
<text class="iconfont icon-delete"></text>
|
||||
<text class="title">删除</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无设备" />
|
||||
<!-- 底部操作按钮 -->
|
||||
<!-- <view class="footer-fixed">
|
||||
<view class="btn-wrapper">
|
||||
<view class="btn-item btn-item-main" @click="handleCreate()">添加新地址</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as EquipmentApi from '@/websoft/api/equipment.js'
|
||||
import Empty from '@/components/empty'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//当前页面参数
|
||||
options: {},
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 收货地址列表
|
||||
list: [],
|
||||
// 默认收货地址
|
||||
defaultId: null
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
// 当前页面参数
|
||||
this.options = options
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取页面数据
|
||||
this.getPageData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取页面数据
|
||||
getPageData() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getDefaultId(), app.getEquipment()])
|
||||
.then(() => {
|
||||
// 列表排序把默认收货地址放到最前
|
||||
app.onReorder()
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 获取收货地址列表
|
||||
getEquipment() {
|
||||
const app = this
|
||||
EquipmentApi.pageEquipment({userId: uni.getStorageSync('userId')}).then(res => {
|
||||
console.log("res: ",res);
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
// 获取默认的收货地址
|
||||
getDefaultId() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const app = this
|
||||
// AddressApi.defaultId()
|
||||
// .then(result => {
|
||||
// app.defaultId = result.data.defaultId
|
||||
// resolve(result)
|
||||
// })
|
||||
// .catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 列表排序把默认收货地址放到最前
|
||||
onReorder() {
|
||||
const app = this
|
||||
app.list.sort(item => {
|
||||
return item.address_id == app.defaultId ? -1 : 1
|
||||
})
|
||||
},
|
||||
|
||||
navTo(url){
|
||||
this.$navTo(url)
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加新地址
|
||||
*/
|
||||
handleCreate() {
|
||||
this.$navTo('pages/address/create')
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑地址
|
||||
* @param {int} addressId 收货地址ID
|
||||
*/
|
||||
handleUpdate(addressId) {
|
||||
this.$navTo('pages/address/update', { addressId })
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除收货地址
|
||||
* @param {int} addressId 收货地址ID
|
||||
*/
|
||||
handleRemove(addressId) {
|
||||
const app = this
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您确定要删除当前收货地址吗?",
|
||||
success({ confirm }) {
|
||||
confirm && app.onRemove(addressId)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认删除收货地址
|
||||
* @param {int} addressId 收货地址ID
|
||||
*/
|
||||
onRemove(addressId) {
|
||||
const app = this
|
||||
AddressApi.remove(addressId)
|
||||
.then(result => {
|
||||
app.getPageData()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置为默认地址
|
||||
* @param {Object} addressId
|
||||
*/
|
||||
handleSetDefault(addressId) {
|
||||
const app = this
|
||||
AddressApi.setDefault(addressId)
|
||||
.then(result => {
|
||||
app.defaultId = addressId
|
||||
app.options.from === 'checkout' && uni.navigateBack()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.addres-list {
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
// 项目内容
|
||||
.address-item {
|
||||
margin: 0 auto 20rpx auto;
|
||||
padding: 30rpx 40rpx;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts {
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.bms-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #666666;
|
||||
.item{
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.name {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
.bms-image{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
.bms-image-box{
|
||||
display: flex;
|
||||
font-size: 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
color: #00af00;
|
||||
.bms-image-fbf{
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
}
|
||||
.image{
|
||||
width: 50rpx; height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 28rpx;
|
||||
|
||||
.region {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f3f3f3;
|
||||
}
|
||||
|
||||
.line-align{
|
||||
width: 6rpx;
|
||||
height: 48rpx;
|
||||
border-right: 1rpx solid #f3f3f3;
|
||||
}
|
||||
|
||||
.item-option {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 48rpx;
|
||||
|
||||
// 单选框
|
||||
.item-radio {
|
||||
font-size: 28rpx;
|
||||
|
||||
.radio {
|
||||
vertical-align: middle;
|
||||
transform: scale(0.76)
|
||||
}
|
||||
|
||||
.text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作
|
||||
.events {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 48rpx;
|
||||
|
||||
.event-item {
|
||||
font-size: 28rpx;
|
||||
margin-right: 26rpx;
|
||||
color: #4c4c4c;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 底部操作栏
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
bottom: var(--window-bottom);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 11;
|
||||
|
||||
// 设置ios刘海屏底部横线安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.btn-wrapper {
|
||||
height: 120rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
759
pages/user/index.vue
Executable file
759
pages/user/index.vue
Executable file
@@ -0,0 +1,759 @@
|
||||
<template>
|
||||
<view v-if="!isFirstload" class="container" :style="appThemeStyle">
|
||||
<!-- 页面头部 -->
|
||||
<view class="main-header" :style="{ height: platform == 'H5' ? '260rpx' : '320rpx', paddingTop: platform == 'H5' ? '0' : '80rpx' }">
|
||||
<image class="bg-image" src="/static/background/user-header2.png" mode="scaleToFill"></image>
|
||||
<!-- 用户信息 -->
|
||||
<view v-if="isLogin" class="user-info">
|
||||
<view class="user-avatar" @click="handlePersonal()">
|
||||
<avatar-image :url="userInfo.avatar_url" :width="100" />
|
||||
</view>
|
||||
<view class="user-content">
|
||||
<!-- 会员昵称 -->
|
||||
<view class="nick-name oneline-hide" @click="handlePersonal()">{{ userInfo.nick_name }}</view>
|
||||
<!-- 会员等级 -->
|
||||
<view v-if="userInfo.grade_id > 0 && userInfo.grade" class="user-grade">
|
||||
<view class="user-grade_icon">
|
||||
<image class="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEUAAAD/tjL/tzH/uDP/uC7/tjH/tzH/tzL/tTH+tTL+tjP/tDD/tTD+tzD/tjL/szD/uDH/tjL/tjL+tjD/tjT/szb/tzL/tTL+uTH+tjL/tjL/tjL/tTT/tjL/tjL+tjH/uTL/vDD/tjL/tjH/tzL9uS//tTL/nBr/sS7/tjH/ujL/szD/uTv+rzf/tzL+tzH+vDP+uzL+tjP+ry7+tDL9ki/7szf/sEX/tTL/tjL+tjL/tTH/tTT/tzH/tzL/tjP/sTX/uTP/wzX+rTn/vDX9vC8m8ckhAAAAOXRSTlMAlnAMB/vjxKWGMh0S6drMiVxPRkEY9PLy0ru0sKagmo5+dGtgVCMgBP716eXWyMGxqJGRe2o5KSmFNjaYAAABP0lEQVQ4y8XS13KDMBAF0AWDDe4t7r3ETu9lVxJgJ/n/X8rKAzHG5TE+Twz3zki7I/g/KXdghIbGJewrU4yzn08Ebgl6TuZzzuOC6W5es3HX6qsSz3NFShRU0MpucytDmOSpu3yULx3CA9RD1HjVedc0jSjqm6ZzhUjDsFDQhSp/OKj5GQvg0+ZCOixsbtDLAeTTOm/yGi8GyIphIVsgH737FEDV44LJa88IRKK/SetrwT9G/GUIr6vXjoy4GXn7+RboVXnghuSjaoGecwQxL2su3CwAKlO+QFoqxI4FMctHQhQd2OhxTu184jWUlI+rMTBTn1/IQcJHQ6GQdZ7pWiDaNdhTt330efISeiqYwQEzQpTlsURJLhzkEmpCPsERfeIUVyXr6MNuIyp5uziW6xURtt7hhGwzmMNJExfO4Bd9X0ZPqAxdNwAAAABJRU5ErkJggg==">
|
||||
</image>
|
||||
</view>
|
||||
<view class="user-grade_name">
|
||||
<text>{{ userInfo.grade.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 会员无等级时显示手机号 -->
|
||||
<view v-else class="mobile">{{ userInfo.mobile }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 未登录 -->
|
||||
<view v-else class="user-info" @click="handleLogin">
|
||||
<view class="user-avatar">
|
||||
<avatar-image :width="100" />
|
||||
</view>
|
||||
<view class="user-content">
|
||||
<view class="nick-name">未登录</view>
|
||||
<view class="login-tips">点击登录账号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 绑定手机号 -->
|
||||
<view v-if="isLogin && !userInfo.mobile && setting[SettingKeyEnum.REGISTER.value].isManualBind" class="my-mobile" @click="handleBindMobile()">
|
||||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||||
<view class="btn-bind">去绑定</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的钱包 -->
|
||||
<view class="my-asset">
|
||||
<view class="asset-left flex-box dis-flex flex-x-around">
|
||||
<view class="asset-left-item" style="max-width: 200rpx;" @click="onTargetWallet">
|
||||
<view class="item-value dis-flex flex-x-center">
|
||||
<text class="oneline-hide">{{ isLogin ? assets.balance : '--' }}</text>
|
||||
</view>
|
||||
<view class="item-name dis-flex flex-x-center">
|
||||
<text>账户余额</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="asset-left-item" @click="onTargetPoints">
|
||||
<view class="item-value dis-flex flex-x-center">
|
||||
<text class="oneline-hide">{{ isLogin ? assets.points : '--' }}</text>
|
||||
</view>
|
||||
<view class="item-name dis-flex flex-x-center">
|
||||
<text>{{ setting[SettingKeyEnum.POINTS.value].points_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="asset-left-item" @click="onTargetMyCoupon">
|
||||
<view class="item-value dis-flex flex-x-center">
|
||||
<text class="oneline-hide">{{ isLogin ? assets.coupon : '--' }}</text>
|
||||
</view>
|
||||
<view class="item-name dis-flex flex-x-center">
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="asset-right">
|
||||
<view class="asset-right-item" @click="onTargetWallet">
|
||||
<view class="item-icon dis-flex flex-x-center">
|
||||
<text class="iconfont icon-qianbao"></text>
|
||||
</view>
|
||||
<view class="item-name dis-flex flex-x-center">
|
||||
<text>我的钱包</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 绑定手机号 (第2种样式) -->
|
||||
<!-- <view class="my-mobile2" @click="handleBindMobile()">
|
||||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||||
<view class="btn-bind">去绑定</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 订单操作 -->
|
||||
<view class="order-navbar">
|
||||
<view class="order-navbar-item" v-for="(item, index) in orderNavbar" :key="index" @click="onTargetOrder(item)">
|
||||
<view class="item-icon">
|
||||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||||
</view>
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
<view class="item-badge" v-if="item.count && item.count > 0">
|
||||
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
|
||||
<text v-else class="text">99+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的服务 -->
|
||||
<view class="my-service">
|
||||
<view class="service-title">我的服务</view>
|
||||
<view class="service-content clearfix">
|
||||
<block v-for="(item, index) in service" :key="index">
|
||||
<view v-if="item.type == 'link' && item.enabled" class="service-item" @click="handleService(item)">
|
||||
<view class="item-icon">
|
||||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||||
</view>
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
<view class="item-badge" v-if="item.count && item.count > 0">
|
||||
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
|
||||
<text v-else class="text">99+</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 在线客服 -->
|
||||
<view v-if="item.type == 'contact' && item.enabled" class="service-item">
|
||||
<customer-btn>
|
||||
<view class="item-icon">
|
||||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||||
</view>
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
</customer-btn>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view v-if="isLogin" class="my-logout">
|
||||
<view class="logout-btn" @click="handleLogout()">
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品推荐 -->
|
||||
<recommended />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { inArray } from '@/utils/util'
|
||||
import AvatarImage from '@/components/avatar-image'
|
||||
import Recommended from '@/components/recommended'
|
||||
import CustomerBtn from '@/components/customer-btn'
|
||||
import { setCartTabBadge } from '@/core/app'
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key'
|
||||
import SettingModel from '@/common/model/Setting'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as OrderApi from '@/api/order'
|
||||
import { checkLogin } from '@/core/app'
|
||||
|
||||
// 订单操作
|
||||
const orderNavbar = [
|
||||
{ id: 'all', name: '全部订单', icon: 'qpdingdan' },
|
||||
{ id: 'payment', name: '待支付', icon: 'daifukuan', count: 0 },
|
||||
{ id: 'delivery', name: '待发货', icon: 'daifahuo', count: 0 },
|
||||
{ id: 'received', name: '待收货', icon: 'daishouhuo', count: 0 },
|
||||
]
|
||||
|
||||
/**
|
||||
* 我的服务
|
||||
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
|
||||
*/
|
||||
const service = [
|
||||
{ id: 'address', name: '收货地址', icon: 'shouhuodizhi', type: 'link', url: 'pages/address/index' },
|
||||
{ id: 'coupon', name: '领券中心', icon: 'lingquan', type: 'link', url: 'pages/coupon/index' },
|
||||
{ id: 'myCoupon', name: '优惠券', icon: 'youhuiquan', type: 'link', url: 'pages/my-coupon/index' },
|
||||
{ id: 'refund', name: '退换/售后', icon: 'shouhou', type: 'link', url: 'pages/refund/index', count: 0 },
|
||||
{ id: 'help', name: '我的帮助', icon: 'bangzhu', type: 'link', url: 'pages/help/index' },
|
||||
{ id: 'contact', name: '在线客服', icon: 'kefu', type: 'contact' },
|
||||
{ id: 'points', name: '我的积分', icon: 'jifen', type: 'link', url: 'pages/points/log' },
|
||||
{ id: 'dealer', name: '分销中心', icon: 'fenxiao', type: 'link', url: 'pages/dealer/index' },
|
||||
{ id: 'groupon', name: '我的拼团', icon: 'pintuan', type: 'link', url: 'pages/groupon/index?tab=1' },
|
||||
{ id: 'bargain', name: '我的砍价', icon: 'kanjia', type: 'link', url: 'pages/bargain/index?tab=1' },
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AvatarImage,
|
||||
Recommended,
|
||||
CustomerBtn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inArray,
|
||||
// 枚举类
|
||||
SettingKeyEnum,
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 首次加载
|
||||
isFirstload: true,
|
||||
// 是否已登录
|
||||
isLogin: false,
|
||||
// 系统设置
|
||||
setting: {},
|
||||
// 当前用户信息
|
||||
userInfo: {},
|
||||
// 账户资产
|
||||
assets: { balance: '--', points: '--', coupon: '--' },
|
||||
// 我的服务
|
||||
service,
|
||||
// 订单操作
|
||||
orderNavbar,
|
||||
// 当前用户待处理的订单数量
|
||||
todoCounts: { payment: 0, deliver: 0, received: 0 }
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onLoad(options) {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(options) {
|
||||
this.onRefreshPage()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 刷新页面
|
||||
onRefreshPage() {
|
||||
// 更新购物车角标
|
||||
setCartTabBadge()
|
||||
// 判断是否已登录
|
||||
this.isLogin = checkLogin()
|
||||
// 获取页面数据
|
||||
this.getPageData()
|
||||
},
|
||||
|
||||
// 获取页面数据
|
||||
getPageData(callback) {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
|
||||
.then(result => {
|
||||
app.isFirstload = false
|
||||
// 初始化我的服务数据
|
||||
app.initService()
|
||||
// 初始化订单操作数据
|
||||
app.initOrderTabbar()
|
||||
// 执行回调函数
|
||||
callback && callback()
|
||||
})
|
||||
.catch(err => console.log('catch', err))
|
||||
.finally(() => {
|
||||
app.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化我的服务数据
|
||||
async initService() {
|
||||
const app = this
|
||||
const isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
|
||||
const newService = []
|
||||
service.forEach(item => {
|
||||
// 默认开启
|
||||
item.enabled = true
|
||||
// 我的积分
|
||||
if (item.id === 'points') {
|
||||
item.name = '我的' + app.setting[SettingKeyEnum.POINTS.value].points_name
|
||||
}
|
||||
// 是否显示分销中心
|
||||
if (item.id === 'dealer' && !app.setting._other.isEnabledDealer) {
|
||||
item.enabled = false
|
||||
}
|
||||
// 企业微信客服
|
||||
if (item.id === 'contact' && !isShowCustomerBtn) {
|
||||
item.enabled = false
|
||||
}
|
||||
// 数据角标
|
||||
if (item.count != undefined) {
|
||||
item.count = app.todoCounts[item.id]
|
||||
}
|
||||
newService.push(item)
|
||||
})
|
||||
app.service = newService
|
||||
},
|
||||
|
||||
// 初始化订单操作数据
|
||||
initOrderTabbar() {
|
||||
const app = this
|
||||
const newOrderNavbar = []
|
||||
orderNavbar.forEach(item => {
|
||||
if (item.count != undefined) {
|
||||
item.count = app.todoCounts[item.id]
|
||||
}
|
||||
newOrderNavbar.push(item)
|
||||
})
|
||||
app.orderNavbar = newOrderNavbar
|
||||
},
|
||||
|
||||
// 获取商城设置
|
||||
getSetting() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
SettingModel.data()
|
||||
.then(setting => {
|
||||
app.setting = setting
|
||||
resolve(setting)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 获取当前用户信息
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
!app.isLogin ? resolve(null) : UserApi.info({}, { load: app.isFirstload })
|
||||
.then(result => {
|
||||
app.userInfo = result.data.userInfo
|
||||
resolve(app.userInfo)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.result && err.result.status == 401) {
|
||||
app.isLogin = false
|
||||
resolve(null)
|
||||
} else {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取账户资产
|
||||
getUserAssets() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
!app.isLogin ? resolve(null) : UserApi.assets({}, { load: app.isFirstload })
|
||||
.then(result => {
|
||||
app.assets = result.data.assets
|
||||
resolve(app.assets)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.result && err.result.status == 401) {
|
||||
app.isLogin = false
|
||||
resolve(null)
|
||||
} else {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取当前用户待处理的订单数量
|
||||
getTodoCounts() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
!app.isLogin ? resolve(null) : OrderApi.todoCounts({}, { load: app.isFirstload })
|
||||
.then(result => {
|
||||
app.todoCounts = result.data.counts
|
||||
resolve(app.todoCounts)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.result && err.result.status == 401) {
|
||||
app.isLogin = false
|
||||
resolve(null)
|
||||
} else {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到登录页
|
||||
handleLogin() {
|
||||
!this.isLogin && this.$navTo('pages/login/index')
|
||||
},
|
||||
|
||||
// 跳转到绑定手机号页面
|
||||
handleBindMobile() {
|
||||
this.$navTo('pages/user/bind/index')
|
||||
},
|
||||
|
||||
// 跳转到修改个人信息页
|
||||
handlePersonal() {
|
||||
this.$navTo('pages/user/personal/index')
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
handleLogout() {
|
||||
const app = this
|
||||
uni.showModal({
|
||||
title: '友情提示',
|
||||
content: '您确定要退出登录吗?',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
store.dispatch('Logout', {})
|
||||
.then(result => app.onRefreshPage())
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到钱包页面
|
||||
onTargetWallet() {
|
||||
this.$navTo('pages/wallet/index')
|
||||
},
|
||||
|
||||
// 跳转到订单页
|
||||
onTargetOrder(item) {
|
||||
this.$navTo('pages/order/index', { dataType: item.id })
|
||||
},
|
||||
|
||||
// 跳转到我的积分页面
|
||||
onTargetPoints() {
|
||||
this.$navTo('pages/points/log')
|
||||
},
|
||||
|
||||
// 跳转到我的优惠券页
|
||||
onTargetMyCoupon() {
|
||||
this.$navTo('pages/my-coupon/index')
|
||||
},
|
||||
|
||||
// 跳转到服务页面
|
||||
handleService({ url }) {
|
||||
this.$navTo(url)
|
||||
},
|
||||
|
||||
// 在线客服
|
||||
handleContact() {
|
||||
// 商城客服设置
|
||||
const setting = this.setting[SettingKeyEnum.CUSTOMER.value]
|
||||
// 企业微信客服
|
||||
if (setting.provider == 'wxqykf') {
|
||||
if (!setting.config.wxqykf.url || !setting.config.wxqykf.corpId) {
|
||||
this.$toast('客服链接和企业ID不能为空')
|
||||
return
|
||||
}
|
||||
// #ifdef H5
|
||||
window.open(setting.config.wxqykf.url)
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: { url: setting.config.wxqykf.url },
|
||||
corpId: setting.config.wxqykf.corpId,
|
||||
success(res) {}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 下拉刷新
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
// 获取首页数据
|
||||
this.getPageData(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.main-header {
|
||||
// background-color: #FBF7EF;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
|
||||
.bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
z-index: 1;
|
||||
|
||||
.user-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
color: #c59a46;
|
||||
|
||||
.nick-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
max-width: 270rpx;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.user-grade {
|
||||
align-self: baseline;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #3c3c3c;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
.user-grade_icon .image {
|
||||
display: block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.user-grade_name {
|
||||
margin-left: 5rpx;
|
||||
font-size: 26rpx;
|
||||
color: #EEE0C3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
margin-top: 12rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 角标组件
|
||||
.item-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 55rpx;
|
||||
// background: $main-bg;
|
||||
background: #fa2209;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
min-width: 38rpx;
|
||||
height: 38rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
// 我的钱包
|
||||
.my-asset {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 40rpx 0;
|
||||
|
||||
.asset-right {
|
||||
width: 200rpx;
|
||||
border-left: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.asset-right-item {
|
||||
text-align: center;
|
||||
color: #545454;
|
||||
|
||||
.item-icon {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.asset-left-item {
|
||||
max-width: 183rpx;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 0 16rpx;
|
||||
|
||||
.item-value {
|
||||
font-size: 34rpx;
|
||||
color: $main-bg;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 订单操作
|
||||
.order-navbar {
|
||||
display: flex;
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 20rpx 0 26rpx 0;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
font-size: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #fff;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
|
||||
.item-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 10rpx 0;
|
||||
color: #545454;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
text-align: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 我的服务
|
||||
.my-service {
|
||||
margin: 22rpx auto 22rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 5rpx;
|
||||
background: #fff;
|
||||
|
||||
.service-title {
|
||||
padding-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
|
||||
margin-bottom: -20rpx;
|
||||
|
||||
.service-item {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.item-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 14rpx 0;
|
||||
color: $main-bg;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.my-logout {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.logout-btn {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
font-size: 28rpx;
|
||||
color: #616161;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #dcdcdc;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定手机号 样式1
|
||||
.my-mobile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx;
|
||||
background: #FCEBD1;
|
||||
|
||||
.info {
|
||||
color: #cd8c0c;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-bind {
|
||||
padding: 8rpx 24rpx;
|
||||
background-color: #EAB766;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定手机号 样式2
|
||||
.my-mobile2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 12rpx 40rpx;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
font-size: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #fff;
|
||||
|
||||
.info {
|
||||
// color: #cd8c0c;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.btn-bind {
|
||||
padding: 8rpx 24rpx;
|
||||
background-color: #EAB766;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
235
pages/user/personal/index.vue
Executable file
235
pages/user/personal/index.vue
Executable file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
<!-- 标题 -->
|
||||
<view class="page-title">个人信息</view>
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-form :model="form" ref="uForm" label-width="140rpx">
|
||||
<u-form-item label="头像">
|
||||
<button class="btn-normal" open-type="chooseAvatar" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
|
||||
<avatar-image :url="avatarUrl" :width="100" />
|
||||
</button>
|
||||
</u-form-item>
|
||||
<u-form-item label="昵称" prop="nickName">
|
||||
<u-input v-model="form.nickName" type="nickname" maxlength="12" placeholder="请输入昵称" @input="onInputNickName" @blur="onInputNickName" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import AvatarImage from '@/components/avatar-image'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
nickName: [{
|
||||
required: true,
|
||||
message: '请输入用户昵称',
|
||||
trigger: ['blur', 'change']
|
||||
}]
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AvatarImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
// 头像路径 (用于显示)
|
||||
avatarUrl: '',
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
// 表单数据
|
||||
form: {
|
||||
avatarId: '',
|
||||
nickName: ''
|
||||
},
|
||||
// 验证规则
|
||||
rules,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
// 获取当前用户信息
|
||||
this.getUserInfo()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取当前用户信息
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
UserApi.info()
|
||||
.then(result => {
|
||||
const userInfo = result.data.userInfo
|
||||
app.avatarUrl = userInfo.avatar_url
|
||||
app.form.avatarId = userInfo.avatar_id
|
||||
app.form.nickName = userInfo.nick_name
|
||||
})
|
||||
},
|
||||
|
||||
// 点击头像按钮事件
|
||||
onClickAvatar() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return
|
||||
// #endif
|
||||
this.chooseImage()
|
||||
},
|
||||
|
||||
// 选择头像事件 - 仅限微信小程序
|
||||
// #ifdef MP-WEIXIN
|
||||
onChooseAvatar({ detail }) {
|
||||
const app = this
|
||||
app.avatarUrl = detail.avatarUrl
|
||||
app.tempFile = { path: app.avatarUrl }
|
||||
},
|
||||
// #endif
|
||||
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
const app = this
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success({ tempFiles }) {
|
||||
app.tempFile = tempFiles[0]
|
||||
app.avatarUrl = app.tempFile.path
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadFile() {
|
||||
const app = this
|
||||
return UploadApi.image([app.tempFile])
|
||||
.then(fileIds => {
|
||||
app.form.avatarId = fileIds[0]
|
||||
app.tempFile = null
|
||||
})
|
||||
},
|
||||
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
// 判断是否重复提交
|
||||
if (app.disabled === true) return
|
||||
app.$refs.uForm.validate(async valid => {
|
||||
if (valid) {
|
||||
// 按钮禁用
|
||||
app.disabled = true
|
||||
// 先上传头像图片
|
||||
if (app.tempFile) {
|
||||
await app.uploadFile()
|
||||
}
|
||||
// 提交保存个人信息
|
||||
UserApi.personal({ form: app.form })
|
||||
.then(result => {
|
||||
app.$toast(result.message)
|
||||
setTimeout(() => {
|
||||
app.disabled = false
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
})
|
||||
.catch(err => app.disabled = false)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
||||
onInputNickName(val) {
|
||||
if (val) {
|
||||
this.form.nickName = val
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
.page-title {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
padding-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 0 40rpx;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 80rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
767
pages/user/user.vue
Normal file
767
pages/user/user.vue
Normal file
@@ -0,0 +1,767 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="main-header">
|
||||
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
||||
<image src="@/static/star1.svg" class="star star1" mode="widthFix"></image>
|
||||
<image src="@/static/star1.svg" class="star star2" mode="widthFix"></image>
|
||||
<image src="@/static/star1.svg" class="star star3" mode="widthFix"></image>
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info" @click="onLogin">
|
||||
<u-avatar :src="userInfo.avatar" :size="120" img-mode="aspectFill" show-level></u-avatar>
|
||||
<view class="user-content">
|
||||
<view class="nick-name">{{ userInfo.nickname }}</view>
|
||||
<view class="login-tips" v-for="(item,index) in userInfo.roles" :key="index">
|
||||
<u-tag :text="userInfo.mobile ? userInfo.mobile : item.roleName" plain size="mini" type="info"></u-tag>
|
||||
<!-- <u-tag v-if="userInfo.phone" :text="userInfo.mobile" plain size="mini" type="info"></u-tag> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 绑定手机号 -->
|
||||
<view class="my-mobile" v-if="userInfo.userId && !userInfo.phone">
|
||||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||||
<button class="btn-bind" open-type="getAuthorize" size="mini" scope="phoneNumber" @click="bindPhone">去绑定</button>
|
||||
</view>
|
||||
<view class="my-mobile" v-if="userInfo.userId && !userInfo.avatar">
|
||||
<view class="info">点击获取头像昵称</view>
|
||||
<button
|
||||
open-type="getAuthorize"
|
||||
scope="userInfo"
|
||||
onGetAuthorize="getOpenUserInfo"
|
||||
onError="handleAuthError"
|
||||
size="mini"
|
||||
class="btn-bind"
|
||||
v-if="userInfo.username && userInfo.username !== 'www'"
|
||||
@click="onUpdateAvatar"
|
||||
>
|
||||
去获取
|
||||
</button>
|
||||
<!-- <button class="btn-bind" open-type="getAuthorize" size="mini" scope="phoneNumber" @click="bindPhone">获取头像昵称</button> -->
|
||||
</view>
|
||||
<!-- 我的钱包 -->
|
||||
<view class="my-asset">
|
||||
<view class="asset-left flex-box dis-flex flex-x-around">
|
||||
<view class="asset-left-item">
|
||||
<view class="item-value dis-flex flex-x-center">
|
||||
<text>{{ userInfo.userId ? userInfo.balance : '--' }}</text>
|
||||
</view>
|
||||
<view class="item-name dis-flex flex-x-center">
|
||||
<text>可提现</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="asset-left-item" style="display: flex;align-items: center;">
|
||||
<u-button shape="circle" size="mini"
|
||||
@click="navTo('package/dealer/withdraw/apply')">查看明细</u-button>
|
||||
</view> -->
|
||||
<view class="asset-left-item" style="display: flex;align-items: center;">
|
||||
<u-button shape="circle" type="primary" size="mini" @click="onApply">去提现</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-service">
|
||||
<view class="service-title">我的服务</view>
|
||||
<view class="service-content clearfix">
|
||||
<block v-for="(item, index) in service" :key="index">
|
||||
<view class="service-item" @click="handleService(item)">
|
||||
<view class="item-icon">
|
||||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||||
</view>
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
<view class="item-badge" v-if="item.count && item.count > 0">
|
||||
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
|
||||
<text v-else class="text">99+</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="item.type == 'button' && platform == 'MP-WEIXIN' && item.enabled" class="service-item">
|
||||
<button class="btn-normal" :open-type="item.openType">
|
||||
<view class="item-icon">
|
||||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||||
</view>
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
</button>
|
||||
</view> -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my-service">
|
||||
<view class="service-title">本月收入</view>
|
||||
<view class="service-content clearfix">
|
||||
<view class="service-info">
|
||||
<view class="item">
|
||||
<view class="desc">已到账收入</view>
|
||||
<!-- <u-icon name="question"></u-icon> -->
|
||||
<view><text class="money">0.00</text>元</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="desc">待结算收入</view>
|
||||
<view><text class="money">0.00</text>元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my-service" @click="navTo('pages/dealer/team')">
|
||||
<view class="service-title">我的邀请</view>
|
||||
<view class="service-content clearfix">
|
||||
<view class="service-info">
|
||||
<view class="item">
|
||||
<view class="desc">接受邀请</view>
|
||||
<view><text class="money">0</text>人</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="desc">邀请成功</view>
|
||||
<view><text class="money">0</text>人</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 绑定手机号 (第2种样式) -->
|
||||
<!-- <view class="my-mobile2" @click="handleBindMobile()">
|
||||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||||
<view class="btn-bind">去绑定</view>
|
||||
</view> -->
|
||||
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<!-- <view v-if="isLogin" class="my-logout">
|
||||
<view class="logout-btn" @click="handleLogout()">
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import { getUser, updateUser } from '@/websoft/api/user.js'
|
||||
import { getAuthCode, getPhoneNumber, login, register } from '@/websoft/api/login.js'
|
||||
import { tenantId, roleId, username, password, appId } from '@/config.js';
|
||||
import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
|
||||
import storage from '@/utils/storage'
|
||||
import { getMobile } from '@/utils/util.js'
|
||||
import http from '@/websoft/api'
|
||||
|
||||
// 订单操作
|
||||
const orderNavbar = [
|
||||
// { id: 'all', name: '全部订单', icon: 'qpdingdan' },
|
||||
{
|
||||
id: 'payment',
|
||||
name: '待付款',
|
||||
icon: 'daifukuan',
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
id: 'delivery',
|
||||
name: '待配送',
|
||||
icon: 'daifahuo',
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
id: 'received',
|
||||
name: '待收货',
|
||||
icon: 'daishouhuo',
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
id: 'comment',
|
||||
name: '待评价',
|
||||
icon: 'lingquan',
|
||||
count: 0
|
||||
},
|
||||
]
|
||||
/**
|
||||
* 我的服务
|
||||
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
|
||||
*/
|
||||
const service = [
|
||||
{id: 'get_order',name: '订单管理',icon: 'qpdingdan',type: 'link',url: 'pages/order/index'},
|
||||
{id: 'equipment',name: '设备管理',icon: 'shouhuodizhi',type: 'link',url: 'pages/user/equipment/index'},
|
||||
{id: 'help',name: '使用帮助',icon: 'bangzhu',type: 'link',url: 'pages/help/index'},
|
||||
{id: 'administration',name: '关于我们',icon: 'sy-yh',type: 'link',url: 'pages/help/about'},
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgImage: 'https://file.wsdns.cn/20230313/778ccc230d644b6ebc3c768b7d45229d.png',
|
||||
// #ifdef MP-ALIPAY
|
||||
canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
|
||||
// #endif
|
||||
// 首次加载
|
||||
isFirstload: true,
|
||||
// 是否已登录
|
||||
isLogin: false,
|
||||
// 系统设置
|
||||
setting: {},
|
||||
// 当前用户信息
|
||||
userInfo: {
|
||||
nickname: '未登录'
|
||||
},
|
||||
form: {},
|
||||
// 账户资产
|
||||
assets: {
|
||||
balance: '--',
|
||||
points: '--',
|
||||
coupon: '--',
|
||||
browse: '--',
|
||||
collection: '--',
|
||||
follow: '--'
|
||||
},
|
||||
// 我的服务
|
||||
service,
|
||||
// 订单操作
|
||||
orderNavbar,
|
||||
// 当前用户待处理的订单数量
|
||||
todoCounts: {
|
||||
payment: 0,
|
||||
deliver: 0,
|
||||
received: 0,
|
||||
notice: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 设置navbar标题、颜色
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
const { form } = this
|
||||
const app = this
|
||||
getUser().then(res => {
|
||||
if( res.code == 0 && res.data.username != 'www') {
|
||||
console.log("获取用户信息: ",res.data);
|
||||
app.form = res.data
|
||||
app.userInfo = res.data
|
||||
store.dispatch('setUserInfo',res.data)
|
||||
app.isLogin = true
|
||||
}else{
|
||||
app.isLogin = false
|
||||
app.handleLogout()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 跳转到服务页面
|
||||
handleService({
|
||||
url
|
||||
}) {
|
||||
if (url.slice(0, 4) == 'http') {
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: {
|
||||
url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
|
||||
},
|
||||
corpId: 'ww1c3f872ba0a39228',
|
||||
success(res) {}
|
||||
})
|
||||
return;
|
||||
}
|
||||
if(!this.isLogin){
|
||||
return false;
|
||||
}
|
||||
console.log("url: ",url);
|
||||
this.$navTo(url)
|
||||
},
|
||||
onLogin(){
|
||||
const app = this
|
||||
// 未登录状态
|
||||
if(!app.isLogin){
|
||||
return this.$navTo('pages/login/login')
|
||||
}
|
||||
// #ifdef H5
|
||||
// 跳转登录页面
|
||||
return this.$navTo('pages/login/login')
|
||||
// #endif
|
||||
},
|
||||
onUpdateAvatar() {
|
||||
const { form, isLogin } = this
|
||||
const app = this
|
||||
// #ifdef MP-ALIPAY
|
||||
console.log("// 自动获取头像昵称: ");
|
||||
return false;
|
||||
// 自动获取头像昵称
|
||||
my.getOpenUserInfo({
|
||||
fail: (res) => {
|
||||
console.log("res1: ",res);
|
||||
},
|
||||
success: (res) => {
|
||||
let user = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
|
||||
// 获取头像昵称
|
||||
if(user && user.avatar){
|
||||
form.avatar = user.avatar
|
||||
form.nickname = user.nickName
|
||||
updateUser(form).then(res => {
|
||||
console.log("res3: ",res);
|
||||
app.userInfo.avatar = user.avatar
|
||||
app.userInfo.nickname = user.nickName
|
||||
app.showToast('更新成功')
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 显示toast信息
|
||||
showToast(title, duration = 2000) {
|
||||
this.$refs.uToast.show({ title, duration })
|
||||
},
|
||||
// 绑定手机号码
|
||||
bindPhone() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
my.getPhoneNumber({
|
||||
success: (res) => {
|
||||
let encryptedData = res.response;
|
||||
getPhoneNumber({encryptedData}).then(response => {
|
||||
console.log("授权手机号码: ",response);
|
||||
const json = JSON.parse(response.data)
|
||||
if(json.mobile){
|
||||
// 执行登录
|
||||
updateUser({phone: json.mobile}).then(res => {
|
||||
app.$toast('绑定成功')
|
||||
app.userInfo.phone = json.mobile
|
||||
})
|
||||
}else{
|
||||
app.bindPhone()
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
handleLogout(){
|
||||
http.setConfig((config) => {
|
||||
config.header = {};
|
||||
config.header = {
|
||||
AppId: appId,
|
||||
tenantId: tenantId
|
||||
};
|
||||
return config
|
||||
})
|
||||
uni.clearStorage()
|
||||
uni.clearStorageSync()
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
},
|
||||
|
||||
onApply(){
|
||||
if(!this.isLogin){
|
||||
return false;
|
||||
}
|
||||
this.$navTo('package/dealer/withdraw/apply')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.main-header {
|
||||
// background-color: #FBF7EF;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
|
||||
.bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.star1 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
right: 80rpx;
|
||||
top: 34rpx;
|
||||
}
|
||||
|
||||
.star2 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
left: 40rpx;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
.star3 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
left: 140rpx;
|
||||
bottom: 34rpx;
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
z-index: 1;
|
||||
|
||||
.user-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.nick-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
max-width: 270rpx;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.user-grade {
|
||||
align-self: baseline;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #3c3c3c;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
.user-grade_icon .image {
|
||||
display: block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.user-grade_name {
|
||||
margin-left: 5rpx;
|
||||
font-size: 26rpx;
|
||||
color: #EEE0C3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
margin-top: 12rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 角标组件
|
||||
.item-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 55rpx;
|
||||
// background: $main-bg;
|
||||
background: #fa2209;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
min-width: 38rpx;
|
||||
height: 38rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
// 我的钱包
|
||||
.my-asset {
|
||||
display: flex;
|
||||
margin: 22rpx auto 22rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 92%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.asset-right {
|
||||
width: 170rpx;
|
||||
border-left: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.asset-right-item {
|
||||
text-align: center;
|
||||
color: #545454;
|
||||
|
||||
.item-icon {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.asset-left-item {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 0 42rpx;
|
||||
|
||||
.item-value {
|
||||
font-size: 34rpx;
|
||||
color: $main-bg;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 订单操作
|
||||
.order-navbar {
|
||||
display: flex;
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 0rpx 0 6rpx 0;
|
||||
width: 94%;
|
||||
// box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
font-size: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #fff;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
|
||||
.item-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 10rpx 0;
|
||||
color: #545454;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
text-align: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 我的服务
|
||||
.my-service {
|
||||
margin: 22rpx auto 22rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 92%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.service-title {
|
||||
padding-left: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
|
||||
.service-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 52rpx;
|
||||
color: #999999;
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: #3c3c3c;
|
||||
font-weight: bold;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: -20rpx;
|
||||
|
||||
.shop-service-item {
|
||||
position: relative;
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.item-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 14rpx 0;
|
||||
color: $main-bg;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.service-item {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.item-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 14rpx 0;
|
||||
color: $main-bg;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.my-logout {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.logout-btn {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
font-size: 28rpx;
|
||||
color: #616161;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #dcdcdc;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定手机号 样式1
|
||||
.my-mobile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx;
|
||||
background: #FCEBD1;
|
||||
|
||||
.info {
|
||||
color: #cd8c0c;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-bind {
|
||||
list-style-type: none;
|
||||
padding: 0px 16px !important;
|
||||
background-color: #EAB766;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定手机号 样式2
|
||||
.my-mobile2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 12rpx 40rpx;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
font-size: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #fff;
|
||||
|
||||
.info {
|
||||
// color: #cd8c0c;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.btn-bind {
|
||||
padding: 8rpx 24rpx;
|
||||
background-color: #EAB766;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.more {
|
||||
padding-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header-btn {
|
||||
width: 700rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
clear: both;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
justify-content: space-around;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user