18 changed files with 671 additions and 107 deletions
-
6src/pages.json
-
36src/subpackage/account/components/fixed_button.vue
-
63src/subpackage/account/components/fixed_modal.vue
-
3src/subpackage/account/components/info_title.vue
-
32src/subpackage/account/components/modal_button.vue
-
26src/subpackage/account/components/user_info.vue
-
15src/subpackage/account/pages/permission/edit.vue
-
34src/subpackage/account/pages/permission/info.vue
-
45src/subpackage/account/pages/permission/modules/edit/select_container.vue
-
37src/subpackage/account/pages/permission/modules/info/admin_permission.vue
-
43src/subpackage/account/pages/permission/modules/info/cashier_permission.vue
-
88src/subpackage/account/pages/permission/modules/info/edit_account.vue
-
67src/subpackage/account/pages/permission/modules/info/edit_password.vue
-
62src/subpackage/account/pages/permission/modules/info/min_permission.vue
-
36src/subpackage/account/pages/permission/modules/info/permission_item.vue
-
34src/subpackage/account/pages/permission/modules/info/stadium_permission.vue
-
17src/subpackage/account/pages/permission/modules/title_bar.vue
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<view class="fixed-button"> |
|||
<view class="fb-box"> |
|||
<view class="bottom-btn"> |
|||
<slot>确认</slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.fixed-button{ |
|||
@include isPd(132upx); |
|||
} |
|||
.fb-box{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
padding: 10upx 24upx; |
|||
@include isPd(10upx); |
|||
.bottom-btn{ |
|||
height: 112upx; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
text-align: center; |
|||
@include flcw(32upx, 112upx, #fff, 500); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<view class="fixed-mask" v-show="show"> |
|||
<view class="fm-content"> |
|||
<image |
|||
class="fc-close" |
|||
@click="$emit('click:close')" |
|||
mode="aspect" |
|||
></image> |
|||
<view class="fc-title">{{ title }}</view> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '提示' |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.fixed-mask{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
background: rgba($color: #000000, $alpha: .5); |
|||
z-index: 10; |
|||
.fm-content{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding-top: 80upx; |
|||
padding-bottom: 60upx; |
|||
width: 620upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
.fc-close{ |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
background: skyblue; |
|||
} |
|||
.fc-title{ |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #1A1A1A, 500); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<view class="modal-button" :class="{ 'green': green }" @click="$emit('click')"> |
|||
<slot>确定</slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
green: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.modal-button{ |
|||
margin: 0 auto; |
|||
width: 240upx; |
|||
height: 88upx; |
|||
border: 2upx solid $mColor; |
|||
border-radius: 10upx; |
|||
text-align: center; |
|||
@include flcw($color: $mColor, $height: 84upx); |
|||
&.green{ |
|||
background: $mColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<info-container :title="title"> |
|||
<template v-slot:title-right> |
|||
<view class="sc-title-right"> |
|||
<view class="str-txt">全选</view> |
|||
<image class="str-img"></image> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<slot></slot> |
|||
</template> |
|||
</info-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import infoContainer from '../../../../components/info_container.vue'; |
|||
export default { |
|||
components: { |
|||
'info-container': infoContainer |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: 'title' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.sc-title-right{ |
|||
@include ctf(flex-end); |
|||
.str-txt{ |
|||
flex-shrink: 0; |
|||
@include flcw(24upx, 34upx, #1A1A1A); |
|||
} |
|||
.str-img{ |
|||
margin-left: 18upx; |
|||
flex-shrink: 0; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
background: skyblue; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<view class="admin-permission"> |
|||
<info-container title="后台权限"> |
|||
<template v-slot:title-right> |
|||
<view class="ap-title-right"> |
|||
<view class="atr-name">修改需前往后台定义权限组</view> |
|||
<switch color="#009874" style="transform:scale(0.7)"></switch> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view class="ap-content">权限级别名称：超级管理员</view> |
|||
</template> |
|||
</info-container> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import infoContainer from '../../../../components/info_container.vue'; |
|||
export default { |
|||
components: { |
|||
'info-container': infoContainer |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ap-title-right{ |
|||
@include ctf(space-between); |
|||
.atr-name{ |
|||
@include flcw(24upx, 34upx, #9C9C9F); |
|||
} |
|||
} |
|||
.ap-content{ |
|||
padding: 0upx 20upx; |
|||
@include flcw(28upx, 40 px, #1A1A1A); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<view class="min-permission"> |
|||
<info-container title="收银系统权限"> |
|||
<template v-slot:content> |
|||
<view class="mp-content"> |
|||
<view class="mc-item" v-for="i in 3" :key="i"> |
|||
<permission-item :active="i%3 === 0"></permission-item> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</info-container> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import infoContainer from '../../../../components/info_container.vue'; |
|||
import permissionItem from './permission_item.vue'; |
|||
export default { |
|||
components: { |
|||
'info-container': infoContainer, |
|||
'permission-item': permissionItem |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.min-permission{ |
|||
.mp-content{ |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
.mc-item{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 188upx; |
|||
&:nth-child(n + 4){ |
|||
margin-top: 20upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<fixed-modal title="修改账号信息"> |
|||
<view class="edit-account"> |
|||
<view class="ea-num">登录账号：liuhuo2524</view> |
|||
<view class="ea-tip">账号具有唯一性，不支持更改。</view> |
|||
<view class="edit-ipt"> |
|||
<view class="ep-item"> |
|||
<view class="ei-label"><text class="el-star">*</text>姓名</view> |
|||
<input class="ei-input" type="password" placeholder="请输入" /> |
|||
</view> |
|||
<view class="ep-item"> |
|||
<view class="ei-label">手机号码</view> |
|||
<input class="ei-input" type="password" placeholder="请输入手机号码" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<modal-button green>确认修改</modal-button> |
|||
</fixed-modal> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import fixedModal from "../../../../components/fixed_modal.vue"; |
|||
import modalButton from "../../../../components/modal_button.vue"; |
|||
export default { |
|||
components: { |
|||
'fixed-modal': fixedModal, |
|||
'modal-button': modalButton |
|||
}, |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.edit-account{ |
|||
padding-top: 56upx; |
|||
padding-bottom: 60upx; |
|||
.ea-num{ |
|||
padding: 0 40upx; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
@include tHide; |
|||
} |
|||
.ea-tip{ |
|||
padding: 0 40upx; |
|||
margin-top: 20upx; |
|||
@include flcw(24upx, 40upx, #EA5061); |
|||
} |
|||
.edit-ipt{ |
|||
margin-top: 46upx; |
|||
} |
|||
.ep-item{ |
|||
padding: 0 40upx; |
|||
@include ctf(space-between); |
|||
.ei-label{ |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
.el-star{ |
|||
margin-right: 10upx; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.ei-input{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 406upx; |
|||
box-sizing: border-box; |
|||
margin-top: 20upx; |
|||
padding: 0 20upx; |
|||
height: 88upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #D8D8D8; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
} |
|||
& + .ep-item{ |
|||
margin-top: 20upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<fixed-modal title="修改密码"> |
|||
<view class="edit-password"> |
|||
<view class="ep-item"> |
|||
<view class="ei-label"><text class="el-star">*</text>原密码</view> |
|||
<input class="ei-input" type="password" placeholder="请输入原密码" /> |
|||
</view> |
|||
<view class="ep-item"> |
|||
<view class="ei-label"><text class="el-star">*</text>确认新密码</view> |
|||
<input class="ei-input" type="password" placeholder="请输入新密码" /> |
|||
</view> |
|||
</view> |
|||
<modal-button green>确认修改</modal-button> |
|||
</fixed-modal> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import fixedModal from "../../../../components/fixed_modal.vue"; |
|||
import modalButton from "../../../../components/modal_button.vue"; |
|||
export default { |
|||
components: { |
|||
'fixed-modal': fixedModal, |
|||
'modal-button': modalButton |
|||
}, |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.edit-password{ |
|||
padding-top: 56upx; |
|||
padding-bottom: 60upx; |
|||
.ep-item{ |
|||
padding: 0 40upx; |
|||
.ei-label{ |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
.el-star{ |
|||
margin-right: 10upx; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.ei-input{ |
|||
display: block; |
|||
margin-top: 20upx; |
|||
padding: 0 20upx; |
|||
height: 88upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #D8D8D8; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
} |
|||
& + .ep-item{ |
|||
margin-top: 30upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<view class="min-permission"> |
|||
<info-container title="商家助手小程序权限"> |
|||
<template v-slot:title-right> |
|||
<view class="mp-tr-content"> |
|||
<view class="mtc-name">已绑定（微信用户）</view> |
|||
<view class="mtc-status">解绑</view> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view class="mp-content"> |
|||
<view class="mc-item" v-for="i in 7" :key="i"> |
|||
<permission-item :active="i%3 === 0"></permission-item> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</info-container> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import infoContainer from '../../../../components/info_container.vue'; |
|||
import permissionItem from './permission_item.vue'; |
|||
export default { |
|||
components: { |
|||
'info-container': infoContainer, |
|||
'permission-item': permissionItem |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.min-permission{ |
|||
.mp-tr-content{ |
|||
@include ctf(space-between); |
|||
.mtc-name{ |
|||
flex-grow: 1; |
|||
@include flcw(24upx, 34upx, #9C9C9F); |
|||
@include tHide; |
|||
} |
|||
.mtc-status{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
@include flcw(24upx, 34upx, #EA5061); |
|||
} |
|||
} |
|||
.mp-content{ |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
.mc-item{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 188upx; |
|||
&:nth-child(n + 4){ |
|||
margin-top: 20upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<view class="permission-item"> |
|||
<image v-if="active" class="pi-icon"></image> |
|||
<text class="pi-txt" :class="{ 'pi-active': active }">订单管理</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
active: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.permission-item{ |
|||
@include tHide; |
|||
.pi-icon{ |
|||
margin-right: 14upx; |
|||
width: 26upx; |
|||
height: 26upx; |
|||
background: skyblue; |
|||
} |
|||
.pi-txt{ |
|||
@include flcw(28upx, 40upx, #9C9C9F, 500); |
|||
&.pi-active{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,34 @@ |
|||
<template> |
|||
<view class="stadium-permission"> |
|||
<info-container title="门店权限"> |
|||
<template v-slot:content> |
|||
<view class="sp-content"> |
|||
<view class="sp-item" v-for="i in 4" :key="i"> |
|||
<permission-item :active="i%3 === 0"></permission-item> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
</info-container> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import infoContainer from '../../../../components/info_container.vue'; |
|||
import permissionItem from './permission_item.vue'; |
|||
export default { |
|||
components: { |
|||
'info-container': infoContainer, |
|||
'permission-item': permissionItem |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.sp-content{ |
|||
padding: 0 20upx; |
|||
.sp-item + .sp-item{ |
|||
margin-top: 20upx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,17 +0,0 @@ |
|||
<template> |
|||
<view class="title-bar"> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.title-bar{ |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue