Skip to content

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

feat(mineNavBar): 我的-1

parent dd69f4e5
Show whitespace changes
Inline Side-by-side
Showing with 379 additions and 292 deletions
pages/mine/index.vue
View file @ f7d0d104
...@@ -2,43 +2,43 @@ ...@@ -2,43 +2,43 @@
<view class="mine-container"> <view class="mine-container">
<mine-navbar title="DHEC QMS" /> <mine-navbar title="DHEC QMS" />
<scroll-view class="scroll-y" scroll-y style="margin: 30rpx 0 0 0;"> <scroll-view class="scroll-y" scroll-y style="margin: 542rpx 0 0 0;">
<view style="height: 16rpx;background: #F0F0F0;" /> <view style="height: 40rpx;background: #F9F9F9;" />
<!--顶部个人信息栏--> <view class="header-section" @click="goMyAccount">
<view class="header-section"> <view class="section-detail">
<view class="flex justify-between"> <view class="detail-left">
<view class="flex align-center"> <image :src="userInfo" class="icon-left" />
<!-- <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" />
<view class="user-info"> <view class="user-info">
<view class="line1"> <text>
<!-- <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> </view>
<view>
<view class="c_title">{{ form.phonenumber }}</view> <text />
<br> <u-icon name="arrow-right" color="#CCCCCC" size="19"></u-icon>
<view class="c_title" style="margin-top: 10rpx">ID: {{ form.ownersId }}</view>
</view> </view>
</view> </view>
<view v-show="user.ownersId!==null" class="flex align-center" @click="viewCode">
<text />
<image :src="baseUrl+'/tmt-pic/pet-app/wode_icon_erweima@2x.png'" class="twoImage" />
</view> </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> </view>
<view> <view>
<text />
</view>
</view>
</view>
<!-- <view>
<view style="height: 16rpx;background: #F0F0F0;" /> <view style="height: 16rpx;background: #F0F0F0;" />
</view> </view>
<view class="second-section"> <view class="second-section">
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</view> </view>
<view class="rect" @touchmove.stop> <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 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"> <z-swiper-item v-for="(item,index) in cardList" :key="index" :custom-style="slideCustomStyle">
<view class="rectangle" :style="{backgroundImage: `url(${baseUrl}${cardImage})`}"> <view class="rectangle" :style="{backgroundImage: `url(${baseUrl}${cardImage})`}">
...@@ -86,14 +86,14 @@ ...@@ -86,14 +86,14 @@
</view> </view>
</z-swiper-item> </z-swiper-item>
</z-swiper> </z-swiper>
<!-- 没有会员卡添加会员卡--> &lt;!&ndash; 没有会员卡添加会员卡&ndash;&gt;
<view v-else class="rectangleTwo"> <view v-else class="rectangleTwo">
<view style=" text-align: center;" @click="goAddCount"> <view style=" text-align: center;" @click="goAddCount">
<image <image
:src="baseUrl+'/tmt-pic/pet-app/wode_icon_tianjia@2x.png'" :src="baseUrl+'/tmt-pic/pet-app/wode_icon_tianjia@2x.png'"
style="width: 112rpx;height: 112rpx;" style="width: 112rpx;height: 112rpx;"
/> />
<!-- <text class="plus">+</text> --> &lt;!&ndash; <text class="plus">+</text> &ndash;&gt;
<view class="text-container"> <view class="text-container">
<text class="additional-text">添加我的账户</text> <text class="additional-text">添加我的账户</text>
</view> </view>
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
<span>我的宠物</span> <span>我的宠物</span>
</view> </view>
<view style=" text-align: right;width: 100%;"> <view style=" text-align: right;width: 100%;">
<!-- <view class="iconfont icon-right" ></view> --> &lt;!&ndash; <view class="iconfont icon-right" ></view> &ndash;&gt;
<image <image
:src="baseUrl+'/tmt-pic/pet-app/wode_icon_rjiantou2@2x.png'" :src="baseUrl+'/tmt-pic/pet-app/wode_icon_rjiantou2@2x.png'"
style="width:48rpx ;height: 48rpx;" style="width:48rpx ;height: 48rpx;"
...@@ -214,7 +214,7 @@ ...@@ -214,7 +214,7 @@
</view> </view>
</view> </view>
</view> </view>-->
<!-- 二维码弹出层--> <!-- 二维码弹出层-->
<view> <view>
...@@ -274,6 +274,8 @@ export default { ...@@ -274,6 +274,8 @@ export default {
components: { mineNavbar }, components: { mineNavbar },
data() { data() {
return { return {
userInfo: require('../../static/images/userInfo.png'),
logout: require('../../static/images/logout.png'),
show: false, show: false,
hosConfig: { hosConfig: {
phone: '' phone: ''
...@@ -331,6 +333,14 @@ export default { ...@@ -331,6 +333,14 @@ export default {
this.getConfig() this.getConfig()
}, },
methods: { methods: {
handleLogout() {
this.$modal.confirmLogout('是否立即退出登录').then(() => {
this.$store.commit('SET_LOGOUT_BTN', true)
this.$store.dispatch('LogOut').then(() => {
this.$tab.reLaunch('/pages/index')
})
})
},
// 确认呼叫 // 确认呼叫
confirmCall() { confirmCall() {
wx.makePhoneCall({ wx.makePhoneCall({
...@@ -481,13 +491,6 @@ export default { ...@@ -481,13 +491,6 @@ export default {
handleToAvatar() { handleToAvatar() {
this.$tab.navigateTo('/pages/mine/avatar/index') this.$tab.navigateTo('/pages/mine/avatar/index')
}, },
handleLogout() {
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
this.$store.dispatch('LogOut').then(() => {
this.$tab.reLaunch('/pages/index')
})
})
},
handleHelp() { handleHelp() {
this.$tab.navigateTo('/pages/mine/help/index') this.$tab.navigateTo('/pages/mine/help/index')
}, },
...@@ -630,8 +633,8 @@ export default { ...@@ -630,8 +633,8 @@ export default {
} }
.scroll-y { .scroll-y {
height: calc(100vh - 88px); //height: calc(100vh - 220px);
background-color: #FFFFFF; background: #F9F9F9;
} }
page { page {
...@@ -685,9 +688,49 @@ page { ...@@ -685,9 +688,49 @@ page {
} }
.header-section { .header-section {
padding: 32rpx 32rpx;
background-color: #FFFFFF;
color: black; 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 { .login-tip {
font-size: 18px; font-size: 18px;
...@@ -701,20 +744,6 @@ page { ...@@ -701,20 +744,6 @@ page {
font-size: 40px; 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 { .align-center {
......
pages/my_account/account.vue
View file @ f7d0d104
<template> <template>
<view> <!--自定义头部-->
<ya-navbar title="我的账户" bg-style="#FFF" :fixed="true" @leftClick="leftClick" /> <view class="account" :class="{'u-fixed': fixed}">
<view style="background-color: #F3F3F3;min-height: 1246rpx"> <u-navbar
<view style="padding: 32rpx 32rpx 100rpx;"> :title="title"
<view style="height: 44rpx; display: flex; align-items: center;margin-bottom: 32rpx;"> :title-width="titleWidth"
<view class="main-title">我的账户（{{ accountListLength }}）</view> :title-style="titleStyle"
<view class="sub-title" style="margin-left: auto;" @click="addAccount">添加账户</view> :auto-back="autoBack"
<view class="sub-title" style="margin-left: 32rpx;" @click="goAccountDetails">账户明细</view> :fixed="fixed"
</view> :left-icon="leftIcon"
<view v-if="accountListLength>0"> :left-text="leftText"
<!-- <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%)'}"> --> :left-icon-color="leftIconColor"
<view v-for="(item , index) in accountList" :key="index"> placeholder
<view bg-color="rgba(0, 0, 0, 0)"
v-if="item.cardStyle!==null &&item.cardStyle!=='' " @leftClick="$emit('leftClick', $event)"
class="module" @rightClick="$emit('rightClick', $event)">
:style="{backgroundImage: `url(${baseUrl}${item.cardStyle})`}" </u-navbar>
@click="accountDetail(item)" <view class="bar-detail">
> <view class="info-detail">
<view style=" width:96rpx;height: 96rpx;margin-left: 32rpx;"> <img class="user-img" :src="headImg" />
<image class="picture" :src="baseUrl+item.hospitalPortrait" /> <view class="use-info">
</view> <view class="user-name">
<view style="height: 96rpx;display: flex;flex-direction: column; margin-left:24rpx;"> <text class="name-text-left">张三</text>
<view class="accountName" :style="{color:`${item.fontColor}`}"> <text class="name-text">·</text>
<text style="width:auto; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;"> <text class="name-text-right">品质担当</text>
{{ 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 class="dept">
<text>发动机装配科</text>
</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>
<view class="info-card">
<u-form :model="form" ref="uForm">
<u-form-item label="姓名">123</u-form-item>
</u-form>
</view> </view>
</view> </view>
</view> <!-- 二维码弹出层-->
<view v-else style="position: absolute;top: 50%;left: 37%;">
<view style="text-align: center;">
<view> <view>
<image <u-popup :show="showCode" :custom-style="popStyle" mode="center" :round="10" @close="close">
:src="baseUrl+'/tmt-pic/pet-app/xiaoxizhongxin_img_zanwu@2x.png'" <view style="text-align: center; margin: 0 40rpx;">
style="width: 160rpx;height: 100rpx;" <img class="user-img-popup" :src="headImg" />
/>
</view>
<view> <view>
<text style="font-size: 12px;font-weight: 500;color: #666666;line-height: 14px;"> <text class="user-title">
暂无数据 陈海毅 ｜ 发动机装配科
</text> </text>
</view> </view>
<view>
<canvas id="myQrcode" type="2d" style="width: 440rpx; height: 440rpx;" />
</view> </view>
</view> </view>
<view style="position: relative;left: 41%;top: 80rpx;" @click="close">
<image
:src="iconClose"
style="width: 60rpx;height: 60rpx;"
/>
</view> </view>
</u-popup>
</view> </view>
<copy-right />
</view> </view>
</template> </template>
<script> <script>
import { myAccountList } from '../../api/system/my_account' import drawQrcode from '../../utils/dist_weapp.qrcode.esm'
import CopyRight from '../../components/copy_right/copyRight.vue' /**
import { imageUrl } from '../../config' * @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 { 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() { data() {
return { return {
isAddFlag: false, form: {},
isShow: true, popStyle: {
titleStyle: { background: 'url("/static/images/popBackground.png") center/contain no-repeat',
color: '#343744 !important', backgroundColor: 'transparent',
fontSize: '40rpx !important', width: '600rpx',
fontWeight: 'bold !important', height: '860rpx'
lineHeight: '47rpx !important'
}, },
totalRows: 0, showCode: false,
dataListPush: [], // 触底加载后更新列表 headImg: require('../../static/images/profile.jpg'),
accountListLength: 0, qrImg: require('../../static/images/qrImg.png'),
baseUrl: imageUrl, iconClose: require('../../static/images/iconClose.png')
// 当前登陆人信息
userInfo: {},
accountList: [],
queryParams: {
petsOwnersId: ''
} }
},
computed: {
totalHeight() {
return uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px')
} }
}, },
// 下拉刷新 onLoad() {
onPullDownRefresh() {
this.getMyAccount()
setTimeout(function() {
uni.stopPullDownRefresh()
}, 1000)
}, },
onLoad(options) { created() {
this.userInfo = JSON.parse(uni.getStorageSync('user'))
this.queryParams.petsOwnersId = this.userInfo.petOwnerId
}, },
onShow() {
if (this.isAddFlag === true) { mounted() {
this.$u.toast('添加账户成功')
this.isAddFlag = false
setTimeout(this.getMyAccount, 1000)
}
this.getMyAccount()
}, },
methods: { methods: {
leftClick() { // 创建二维码
uni.switchTab({ createQrcode: function() {
url: '/pages/mine/index' var that = this
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
}) })
}, .exec((res) => {
// 金钱格式转换 var canvas = res[0].node
moneyFormat(amount) {
// 尝试将输入转换为数字类型
const num = parseFloat(amount)
// 确认转换后的结果是一个有效的数字 // 调用方法drawQrcode生成二维码
if (isNaN(num)) { drawQrcode({
return '' canvas: canvas,
} canvasId: 'myQrcode',
width: 260,
padding: 30,
background: '#ffffff',
foreground: '#000000',
text: that.form.ownersId
// 保留两位小数 })
const fixedAmount = num.toFixed(2)
// 添加千分位分隔符
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)
}, },
addAccount() { fail(res) {
uni.navigateTo({ console.error(res)
url: '/pages/my_account/select-count' }
}) })
},
// 跳转账户明细页面
goAccountDetails() {
uni.navigateTo({
url: '/pages/my_account/account-details'
}) })
}, },
// 跳转到账户详情页面 close() {
accountDetail(data) { this.showCode = false
uni.navigateTo({
url: '/pages/my_account/account-detail-only?cardId=' + data.id
})
}, },
// 查询我的账户 // 点击二维码
getMyAccount() { viewCode() {
myAccountList(this.queryParams).then(res => { this.createQrcode()
this.accountList = res.data this.showCode = true
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> </script>
<style> <style lang="scss" scoped>
::v-deep .u-navbar--fixed.data-v-95dec1ae { .account {
background: #FFFFFF; background-clip: border-box;
} height: 440rpx;
background: url("/static/images/top-background.png") center/cover no-repeat;
::v-deep .u-icon__icon.data-v-2ee87dc9 { position: fixed;
font-size: 40rpx !important; left: 0;
font-weight: bold !important; right: 0;
} top: 0;
z-index: 11;
.module { .bar-detail{
height: 162rpx; margin-left: 32rpx;
border-radius: 32rpx 32rpx 32rpx 32rpx; .title{
margin-bottom: 24rpx; 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; display: flex;
flex-direction: row;
align-items: center; align-items: center;
background-size: cover; align-content: center;
background-repeat: no-repeat; flex-direction: row;
} justify-content: flex-start;
padding: 0 68rpx 0 22rpx;
.main-title { .use-info{
height: 44rpx; .user-name{
font-size: 32rpx; .name-text-left{
font-family: PingFang SC-Medium, PingFang SC; 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-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; font-size: 28rpx;
color: #ffffff; 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-weight: 400;
line-height: 33rpx; font-size: 24rpx;
display: flex; color: #FFFFFF;
align-items: center; text-align: left;
width: 450rpx; font-style: normal;
} text-transform: none;
}
}
}
.accountBalance { .user-img{
margin-top: 8rpx; width: 140rpx;
height: 50rpx; height: 144rpx;
color: #ffffff; border-radius: 50%;
font-weight: 600; margin-right: 32rpx;
display: flex; }
align-items: center; .qr-icon{
font-size: 36rpx; width: 68rpx;
line-height: 42rpx; 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 { .navbar-bg {
height: calc(100vh - 88px); position: absolute;
background-color: #F3F3F3; 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 { ...@@ -58,8 +58,8 @@ export default {
content: content, content: content,
cancelText: '取消', cancelText: '取消',
confirmText: '确定', confirmText: '确定',
confirmColor: '#5BB647', confirmColor: '#333399',
cancelColor: '#666666', cancelColor: '#000000',
success: function(res) { success: function(res) {
if (res.confirm) { if (res.confirm) {
resolve(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