Skip to content

D
db_qms_wx
Commit f7d0d104 authored by 刘怀志's avatar 刘怀志
Browse files
Options

feat(mineNavBar): 我的-1

parent dd69f4e5
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 292 deletions
pages/mine/index.vue
View file @ f7d0d104
......@@ -2,43 +2,43 @@
<view class="mine-container">
<mine-navbar title="DHEC QMS" />
<scroll-view class="scroll-y" scroll-y style="margin: 30rpx 0 0 0;">
<view style="height: 16rpx;background: #F0F0F0;" />
<!--顶部个人信息栏-->
<view class="header-section">
<view class="flex justify-between">
<view class="flex align-center">
<!-- <image v-if="!form.ownersCover" :src="baseUrl+'/tmt-pic/pet-pc/925f9b6a6fbe446d88cfd70711622ce3-20230823-131457.jpg'" class="cu-avatar xl round"-->
<!-- mode="widthFix">-->
<!-- </image>-->
<image :src="baseUrl+ownersCover" class="avatarSize" />
<scroll-view class="scroll-y" scroll-y style="margin: 542rpx 0 0 0;">
<view style="height: 40rpx;background: #F9F9F9;" />
<view class="header-section" @click="goMyAccount">
<view class="section-detail">
<view class="detail-left">
<image :src="userInfo" class="icon-left" />
<view class="user-info">
<view class="line1">
<!-- <view style="margin-right: 20rpx"> -->
<text class="u_title">
{{ form.nickname }}
<text>
个人信息
</text>
<!-- </view> -->
<view class="head-image" @click="handleToInfo">
<image class="head-image" :src="baseUrl+'/tmt-pic/pet-app/wode_icon_bianji@2x.png'" />
</view>
</view>
<view class="c_title">{{ form.phonenumber }}</view>
<br>
<view class="c_title" style="margin-top: 10rpx">ID: {{ form.ownersId }}</view>
</view>
</view>
<view>
<text />
<u-icon name="arrow-right" color="#CCCCCC" size="19"></u-icon>
</view>
</view>
<view v-show="user.ownersId!==null" class="flex align-center" @click="viewCode">
</view>
<view style="height: 24rpx;background: #F9F9F9;" />
<view class="header-section" @click="handleLogout">
<view class="section-detail">
<view class="detail-left">
<image :src="logout" class="icon-left" />
<view class="user-info">
<text>
退出登录
</text>
</view>
</view>
<view>
<text />
<image :src="baseUrl+'/tmt-pic/pet-app/wode_icon_erweima@2x.png'" class="twoImage" />
</view>
</view>
</view>
<view>
<!-- <view>
<view style="height: 16rpx;background: #F0F0F0;" />
</view>
<view class="second-section">
......@@ -54,7 +54,7 @@
</view>
<view class="rect" @touchmove.stop>
<!-- 会员卡集合模块-->
&lt;!&ndash; 会员卡集合模块&ndash;&gt;
<z-swiper v-if="cardListLength>0" v-model="cardList" :custom-style="{height:'300rpx'}" :options="options">
<z-swiper-item v-for="(item,index) in cardList" :key="index" :custom-style="slideCustomStyle">
<view class="rectangle" :style="{backgroundImage: `url(${baseUrl}${cardImage})`}">
......@@ -86,14 +86,14 @@
</view>
</z-swiper-item>
</z-swiper>
<!-- 没有会员卡添加会员卡-->
&lt;!&ndash; 没有会员卡添加会员卡&ndash;&gt;
<view v-else class="rectangleTwo">
<view style=" text-align: center;" @click="goAddCount">
<image
:src="baseUrl+'/tmt-pic/pet-app/wode_icon_tianjia@2x.png'"
style="width: 112rpx;height: 112rpx;"
/>
<!-- <text class="plus">+</text> -->
&lt;!&ndash; <text class="plus">+</text> &ndash;&gt;
<view class="text-container">
<text class="additional-text">添加我的账户</text>
</view>
......@@ -167,7 +167,7 @@
<span>我的宠物</span>
</view>
<view style=" text-align: right;width: 100%;">
<!-- <view class="iconfont icon-right" ></view> -->
&lt;!&ndash; <view class="iconfont icon-right" ></view> &ndash;&gt;
<image
:src="baseUrl+'/tmt-pic/pet-app/wode_icon_rjiantou2@2x.png'"
style="width:48rpx ;height: 48rpx;"
......@@ -214,7 +214,7 @@
</view>
</view>
</view>
</view>-->
<!-- 二维码弹出层-->
<view>
......@@ -274,6 +274,8 @@ export default {
components: { mineNavbar },
data() {
return {
userInfo: require('../../static/images/userInfo.png'),
logout: require('../../static/images/logout.png'),
show: false,
hosConfig: {
phone: ''
......@@ -331,6 +333,14 @@ export default {
this.getConfig()
},
methods: {
handleLogout() {
this.$modal.confirmLogout('是否立即退出登录').then(() => {
this.$store.commit('SET_LOGOUT_BTN', true)
this.$store.dispatch('LogOut').then(() => {
this.$tab.reLaunch('/pages/index')
})
})
},
// 确认呼叫
confirmCall() {
wx.makePhoneCall({
......@@ -481,13 +491,6 @@ export default {
handleToAvatar() {
this.$tab.navigateTo('/pages/mine/avatar/index')
},
handleLogout() {
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
this.$store.dispatch('LogOut').then(() => {
this.$tab.reLaunch('/pages/index')
})
})
},
handleHelp() {
this.$tab.navigateTo('/pages/mine/help/index')
},
......@@ -630,8 +633,8 @@ export default {
}
.scroll-y {
height: calc(100vh - 88px);
background-color: #FFFFFF;
//height: calc(100vh - 220px);
background: #F9F9F9;
}
page {
......@@ -685,9 +688,49 @@ page {
}
.header-section {
padding: 32rpx 32rpx;
background-color: #FFFFFF;
color: black;
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
justify-content: center;
.section-detail{
width: 700rpx;
height: 116rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
justify-content: space-between;
padding: 0 38rpx 0 32rpx;
.detail-left{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
justify-content: center;
.icon-left{
width: 40rpx;
height: 40rpx;
margin-right: 30rpx;
}
.user-info{
text{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #333333;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
}
.login-tip {
font-size: 18px;
......@@ -701,20 +744,6 @@ page {
font-size: 40px;
}
}
.user-info {
margin-left: 15px;
max-height: 120rpx;
.u_title {
white-space: nowrap;
font-size: 34rpx;
font-weight: 600;
color: #343744;
line-height: 34rpx;
-webkit-background-clip: text;
margin-right: 32rpx;
}
}
}
.align-center {
......
pages/my_account/account.vue
View file @ f7d0d104
<template>
<view>
<ya-navbar title="我的账户" bg-style="#FFF" :fixed="true" @leftClick="leftClick" />
<view style="background-color: #F3F3F3;min-height: 1246rpx">
<view style="padding: 32rpx 32rpx 100rpx;">
<view style="height: 44rpx; display: flex; align-items: center;margin-bottom: 32rpx;">
<view class="main-title">我的账户（{{ accountListLength }}）</view>
<view class="sub-title" style="margin-left: auto;" @click="addAccount">添加账户</view>
<view class="sub-title" style="margin-left: 32rpx;" @click="goAccountDetails">账户明细</view>
</view>
<view v-if="accountListLength>0">
<!-- <view class="module" v-for="(item , index) in accountList" :key="index" @click="accountDetail(item)" :style="item.hospitalPortrait? {backgroundImage: `url(${baseUrl}${item.hospitalPortrait})`} : { background: 'linear-gradient(90deg, #6371E5 23%, rgba(99,113,229,0.5) 100%)'}"> -->
<view v-for="(item , index) in accountList" :key="index">
<view
v-if="item.cardStyle!==null &&item.cardStyle!=='' "
class="module"
:style="{backgroundImage: `url(${baseUrl}${item.cardStyle})`}"
@click="accountDetail(item)"
>
<view style=" width:96rpx;height: 96rpx;margin-left: 32rpx;">
<image class="picture" :src="baseUrl+item.hospitalPortrait" />
</view>
<view style="height: 96rpx;display: flex;flex-direction: column; margin-left:24rpx;">
<view class="accountName" :style="{color:`${item.fontColor}`}">
<text style="width:auto; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">
{{ item.hosName }}
</text>
</view>
<view class="accountBalance" :style="{color:`${item.fontColor}`}">
<text style="font-size: 24rpx;line-height: 28rpx;">￥</text>
{{ moneyFormat(item.cardBalance) }}
</view>
</view>
</view>
<view
v-else
class="module"
style="background: linear-gradient(90deg, #6371E5 23%, rgba(99,113,229,0.5) 100%)"
@click="accountDetail(item)"
>
<view style=" width:96rpx;height: 96rpx;margin-left: 32rpx;">
<image class="picture" :src="baseUrl+item.hospitalPortrait" />
</view>
<view style="height: 96rpx;display: flex;flex-direction: column; margin-left:24rpx;">
<view class="accountName" style="color: #FFFFFF;">
<text style="width:auto; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">
{{ item.hosName }}
</text>
</view>
<view class="accountBalance" style="color: #FFFFFF;">
<text style="font-size: 24rpx;line-height: 28rpx;">￥</text>
{{ moneyFormat(item.cardBalance) }}
</view>
</view>
</view>
<!--自定义头部-->
<view class="account" :class="{'u-fixed': fixed}">
<u-navbar
:title="title"
:title-width="titleWidth"
:title-style="titleStyle"
:auto-back="autoBack"
:fixed="fixed"
:left-icon="leftIcon"
:left-text="leftText"
:left-icon-color="leftIconColor"
placeholder
bg-color="rgba(0, 0, 0, 0)"
@leftClick="$emit('leftClick', $event)"
@rightClick="$emit('rightClick', $event)">
</u-navbar>
<view class="bar-detail">
<view class="info-detail">
<img class="user-img" :src="headImg" />
<view class="use-info">
<view class="user-name">
<text class="name-text-left">张三</text>
<text class="name-text">·</text>
<text class="name-text-right">品质担当</text>
</view>
</view>
<view v-else style="position: absolute;top: 50%;left: 37%;">
<view style="text-align: center;">
<view>
<image
:src="baseUrl+'/tmt-pic/pet-app/xiaoxizhongxin_img_zanwu@2x.png'"
style="width: 160rpx;height: 100rpx;"
/>
</view>
<view>
<text style="font-size: 12px;font-weight: 500;color: #666666;line-height: 14px;">
暂无数据
</text>
</view>
<view class="dept">
<text>发动机装配科</text>
</view>
</view>
</view>
<view class="info-card">
<u-form :model="form" ref="uForm">
<u-form-item label="姓名">123</u-form-item>
</u-form>
</view>
</view>
<copy-right />
<!-- 二维码弹出层-->
<view>
<u-popup :show="showCode" :custom-style="popStyle" mode="center" :round="10" @close="close">
<view style="text-align: center; margin: 0 40rpx;">
<img class="user-img-popup" :src="headImg" />
<view>
<text class="user-title">
陈海毅 ｜ 发动机装配科
</text>
</view>
<view>
<canvas id="myQrcode" type="2d" style="width: 440rpx; height: 440rpx;" />
</view>
</view>
<view style="position: relative;left: 41%;top: 80rpx;" @click="close">
<image
:src="iconClose"
style="width: 60rpx;height: 60rpx;"
/>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import { myAccountList } from '../../api/system/my_account'
import CopyRight from '../../components/copy_right/copyRight.vue'
import { imageUrl } from '../../config'
import drawQrcode from '../../utils/dist_weapp.qrcode.esm'
/**
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
* @property {String | Number} titleWidth 导航栏标题的最大宽度，内容超出会以省略号隐藏
* @property {Object | String} titleStyle 标题的样式，对象或字符串
* @property {Boolean} autoBack 点击左侧区域(返回图标)，是否自动返回上一页（默认 true ）
* @property {String} bgStyle 导航栏背景设置
* @property {Boolean} fixed 导航栏是否固定在顶部 （默认 true ）
* @event {Function} leftClick 点击左侧区域
* @event {Function} rightClick 点击右侧区域
*/
export default {
components: { CopyRight },
name: "account",
emits: ['leftClick', 'rightClick'],
props: {
// 标题内容
title: {
type: String,
default: 'DHEC QMS'
},
// 自动回退
autoBack: {
type: Boolean,
default: true
},
// 标题宽度
titleWidth: {
type: [String, Number],
default: '350rpx'
},
// navbar高度
height: {
type: [String, Number],
default: '44px'
},
// 标题样式
titleStyle: {
type: [String, Object],
default: () => ({
color: '#fff',
fontSize: '36rpx',
fontWeight: 500
})
},
// 左侧返回图标颜色
leftIconColor: {
type: String,
default: '#fff'
},
// 左侧图标
leftIcon: {
type: String,
default: 'arrow-left'
},
leftText: {
type: String,
default: ''
},
// 固定头部
fixed: {
type: Boolean,
default: true
},
// 背景
bgStyle: {
type: String,
}
},
data() {
return {
isAddFlag: false,
isShow: true,
titleStyle: {
color: '#343744 !important',
fontSize: '40rpx !important',
fontWeight: 'bold !important',
lineHeight: '47rpx !important'
form: {},
popStyle: {
background: 'url("/static/images/popBackground.png") center/contain no-repeat',
backgroundColor: 'transparent',
width: '600rpx',
height: '860rpx'
},
totalRows: 0,
dataListPush: [], // 触底加载后更新列表
accountListLength: 0,
baseUrl: imageUrl,
// 当前登陆人信息
userInfo: {},
accountList: [],
queryParams: {
petsOwnersId: ''
}
showCode: false,
headImg: require('../../static/images/profile.jpg'),
qrImg: require('../../static/images/qrImg.png'),
iconClose: require('../../static/images/iconClose.png')
}
},
// 下拉刷新
onPullDownRefresh() {
this.getMyAccount()
setTimeout(function() {
uni.stopPullDownRefresh()
}, 1000)
computed: {
totalHeight() {
return uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px')
}
},
onLoad(options) {
this.userInfo = JSON.parse(uni.getStorageSync('user'))
this.queryParams.petsOwnersId = this.userInfo.petOwnerId
onLoad() {
},
onShow() {
if (this.isAddFlag === true) {
this.$u.toast('添加账户成功')
this.isAddFlag = false
setTimeout(this.getMyAccount, 1000)
}
this.getMyAccount()
created() {
},
methods: {
leftClick() {
uni.switchTab({
url: '/pages/mine/index'
})
},
// 金钱格式转换
moneyFormat(amount) {
// 尝试将输入转换为数字类型
const num = parseFloat(amount)
// 确认转换后的结果是一个有效的数字
if (isNaN(num)) {
return ''
}
mounted() {
},
methods: {
// 创建二维码
createQrcode: function() {
var that = this
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec((res) => {
var canvas = res[0].node
// 保留两位小数
const fixedAmount = num.toFixed(2)
// 调用方法drawQrcode生成二维码
drawQrcode({
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
background: '#ffffff',
foreground: '#000000',
text: that.form.ownersId
// 添加千分位分隔符
const parts = fixedAmount.toString().split('.')
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
})
return parts.join('.')
// 获取临时路径（得到之后，想干嘛就干嘛了）
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
canvas: canvas,
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 260,
destHeight: 260,
success(res) {
console.log('二维码临时路径：', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
})
},
addAccount() {
uni.navigateTo({
url: '/pages/my_account/select-count'
})
close() {
this.showCode = false
},
// 跳转账户明细页面
goAccountDetails() {
uni.navigateTo({
url: '/pages/my_account/account-details'
})
// 点击二维码
viewCode() {
this.createQrcode()
this.showCode = true
},
// 跳转到账户详情页面
accountDetail(data) {
uni.navigateTo({
url: '/pages/my_account/account-detail-only?cardId=' + data.id
})
},
// 查询我的账户
getMyAccount() {
myAccountList(this.queryParams).then(res => {
this.accountList = res.data
this.accountListLength = res.data.length
})
},
formatStyle(item) {
if (item.hospitalPortrait) {
return { backgroundImage: `url(${this.baseUrl}${item.hospitalPortrait})` }
} else {
return { background: 'linear-gradient(90deg, #6371E5 23%, rgba(99,113,229,0.5) 100%)' }
}
}
}
}
</script>
<style>
::v-deep .u-navbar--fixed.data-v-95dec1ae {
background: #FFFFFF;
}
::v-deep .u-icon__icon.data-v-2ee87dc9 {
font-size: 40rpx !important;
font-weight: bold !important;
}
.module {
height: 162rpx;
border-radius: 32rpx 32rpx 32rpx 32rpx;
margin-bottom: 24rpx;
display: flex;
flex-direction: row;
align-items: center;
background-size: cover;
background-repeat: no-repeat;
}
.main-title {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0A1415;
line-height: 38rpx;
-webkit-background-clip: text;
}
.sub-title {
height: 42rpx;
font-size: 30rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 35rpx;
-webkit-background-clip: text;
}
.picture {
background-color: #FFFFFF;
width: 96rpx;
height: 96rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #ECECEC;
}
.accountName {
height: 40rpx;
font-size: 28rpx;
color: #ffffff;
font-weight: 400;
line-height: 33rpx;
display: flex;
align-items: center;
width: 450rpx;
}
<style lang="scss" scoped>
.account {
background-clip: border-box;
height: 440rpx;
background: url("/static/images/top-background.png") center/cover no-repeat;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 11;
.bar-detail{
margin-left: 32rpx;
.title{
margin-left: 8rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
}
.info-detail{
width: 708rpx;
height: 220rpx;
background: transparent;
border-radius: 20rpx;
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
justify-content: flex-start;
padding: 0 68rpx 0 22rpx;
.use-info{
.user-name{
.name-text-left{
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
}
.name-text-right{
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.dept{
margin-top: 22rpx;
text{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
.accountBalance {
margin-top: 8rpx;
height: 50rpx;
color: #ffffff;
font-weight: 600;
display: flex;
align-items: center;
font-size: 36rpx;
line-height: 42rpx;
.user-img{
width: 140rpx;
height: 144rpx;
border-radius: 50%;
margin-right: 32rpx;
}
.qr-icon{
width: 68rpx;
height: 68rpx;
}
}
}
.user-img-popup{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-bottom: 38rpx;
}
.user-title{
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 40rpx;
color: #333399;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.scroll-y {
height: calc(100vh - 88px);
background-color: #F3F3F3;
.navbar-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url('https://qf.91isoft.com/cwfile/tmt-pic/pet-app/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF-img.png') center/cover no-repeat;
}
</style>
</style>
\ No newline at end of file
plugins/modal.js
View file @ f7d0d104
......@@ -58,8 +58,8 @@ export default {
content: content,
cancelText: '取消',
confirmText: '确定',
confirmColor: '#5BB647',
cancelColor: '#666666',
confirmColor: '#333399',
cancelColor: '#000000',
success: function(res) {
if (res.confirm) {
resolve(res.confirm)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment