Skip to content

R
repair_workers_h5
Commit 3cf9e371 authored by 石盼盼's avatar 石盼盼
Browse files
Options

页面

parent f6daa87a
Hide whitespace changes
Inline Side-by-side
Showing with 1107 additions and 41 deletions
src/assets/styles/my/relation-users.scss 0 → 100644
View file @ 3cf9e371
@import "../global.scss";
.header {
@extend .flex-v;
@extend .flex-hc;
width: 100%;
height: 2.36rem;
background: $color-main;
color: #ffffff;
font-size: .32rem;
padding: .3rem;
.name {
font-size: .4rem;
font-weight: bold;
margin-bottom: .1rem;
}
}
.list {
width: 100%;
background: #ffffff;
// margin-top: .13rem;
padding: 0 .3rem;
.list-item {
@extend .flex-h;
@extend .flex-align-center;
width: 100%;
height: 1.3rem;
border-bottom: 1px solid $border-color;
img {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin-right: .25rem;
}
}
}
.no-border {
border: none !important;
}
\ No newline at end of file
src/assets/styles/tabbar/my.scss 0 → 100644
View file @ 3cf9e371
@import "../global.scss";
.my-header {
@extend .flex-h;
@extend .flex-align-center;
width: 100%;
height: 2.36rem;
background: $color-main;
color: #ffffff;
font-size: .28rem;
padding: .3rem;
.user-img {
width: 1.46rem;
height: 1.46rem;
border-radius: 50%;
margin-right: 0.2rem;
}
.left-cont {
.user-name {
width: 4.6rem;
font-size: .36rem;
font-weight: bold;
margin-bottom: .1rem;
}
}
}
.navlist {
width: 100%;
background: #ffffff;
margin-top: .13rem;
padding: 0 .3rem;
}
.list-item {
@extend .flex-h;
@extend .flex-align-center;
width: 100%;
height: 1rem;
border-bottom: 1px solid $border-color;
}
.list-item .icon {
width: .45rem;
font-size: .3rem;
// height: .37rem;
}
.list-item .content {
@extend .flex-h;
@extend .flex-space-between;
@extend .flex-align-center;
width: 95%;
height: 100%;
font-size: .28rem;
.iconfont {
color: $text-gray;
font-size: .32rem;
}
}
.no-border {
border-bottom: none !important;
}
.login-out-btn {
width: 6.9rem;
height: .9rem;
text-align: center;
line-height: .9rem;
background: $color-main;
color: #ffffff;
font-size: .28rem;
position: fixed;
left: 50%;
bottom: 2rem;
margin-left: -3.45rem;
border-radius: .5rem;
}
\ No newline at end of file
src/main.js
View file @ 3cf9e371
......@@ -7,7 +7,7 @@ import myApi from './api/apiList'
import myAxios from './api/index'
import Vant from 'vant'
import 'vant/lib/index.css'
import vConsole from '@/plugins/vconsole.js'
// import vConsole from '@/plugins/vconsole.js'
import myCondition from '@/components/common/condition.vue'
import listTips from '@/components/common/listtips.vue'
// Vue.component('chooseDate', chooseDate)
......@@ -15,7 +15,7 @@ import listTips from '@/components/common/listtips.vue'
// import chooseDate from '@/components/common/chooseDate.vue'
Vue.component('myCondition', myCondition)
Vue.component('listTips', listTips)
Vue.use(vConsole)
// Vue.use(vConsole)
Vue.config.productionTip = false
......
src/router/index.js
View file @ 3cf9e371
......@@ -5,43 +5,102 @@ import Home from '../views/tabbar/Home.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: 'home', meta: { title: '首页', hideBack: true }, component: Home },
{
path: '/mine',
name: 'mine',
meta: {
title: '我的',
hideBack: true
},
component: () => import('../views/tabbar/mine.vue')
const routes = [{
path: '/',
name: 'home',
meta: {
title: '首页',
hideBack: true
},
{
path: '/modifyPhone',
name: 'mesmodifyPhonesage',
meta: {
title: '修改手机号',
hideBack: true
},
component: () => import('../views/tabbar/modifyPhone.vue')
component: Home
},
{
path: '/my',
name: 'my',
meta: {
title: '我的',
hideBack: true
},
// 登录
{ path: '/login', name: 'login', meta: { title: '机构登录', hideBack: true }, component: () => import('@/views/login/login.vue') },
{ path: '/againLogin', name: 'againLogin', meta: { title: '机构登录', hideBack: true }, component: () => import('@/views/login/againlogin.vue') },
// 个人中心
{ path: '/relationUsers', name: 'relationUsers', meta: { title: '我的' }, component: () => import('@/views/my/relation-users.vue') },
{ path: '/addRelation', name: 'addRelation', meta: { title: '绑定机构' }, component: () => import('@/views/my/add-relation.vue') },
component: () => import('../views/tabbar/my.vue')
},
{
path: '/mine',
name: 'mine',
meta: {
title: '我的',
hideBack: true
},
component: () => import('../views/tabbar/mine.vue')
},
{
path: '/modifyPhone',
name: 'mesmodifyPhonesage',
meta: {
title: '修改手机号',
hideBack: true
},
component: () => import('../views/tabbar/modifyPhone.vue')
},
// 登录
{
path: '/login',
name: 'login',
meta: {
title: '机构登录',
hideBack: true
},
component: () => import('@/views/login/login.vue')
},
{
path: '/againLogin',
name: 'againLogin',
meta: {
title: '机构登录',
hideBack: true
},
component: () => import('@/views/login/againlogin.vue')
},
// 个人中心
{
path: '/charge',
name: 'charge',
meta: {
title: '发起收费',
hideBack: true
},
component: () => import('@/views/my/charge.vue')
},
{
path: '/relationUsers',
name: 'relationUsers',
meta: {
title: '我的'
},
component: () => import('@/views/my/relation-users.vue')
},
{
path: '/addRelation',
name: 'addRelation',
meta: {
title: '绑定机构'
},
component: () => import('@/views/my/add-relation.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior (to, from, savePosition) {
scrollBehavior(to, from, savePosition) {
if (savePosition) {
return savePosition
} else {
return { x: 0, y: 0 }
return {
x: 0,
y: 0
}
}
}
})
......
src/views/my/add-relation.vue 0 → 100644
View file @ 3cf9e371
<template>
<div class="login-view">
<div class="logo-view">
<img src="@assets/images/login/logo.png" />
<p class="title">绑定机构</p>
</div>
<div>
<div class="filed-list">
<img class="icon-img" src="@assets/images/login/tel-icon.png" />
<van-field v-model.trim="tel" type="tel" placeholder="请输入手机号" maxlength="11" />
</div>
<div class="filed-list code-cont">
<img class="icon-img" src="@assets/images/login/code-icon.png" />
<van-field v-model.trim="code" type="text" placeholder="请输入验证码" maxlength="6" />
<div class="code-btn" @click="getCode">{{buttonText}}</div>
</div>
</div>
<div class="login-btn" @click="goLogin">绑定</div>
</div>
</template>
<script>
import { INDEX_REFRESH, setLocalStorage } from '@assets/js/self.js'
export default {
name: 'login',
data () {
return {
tel: '', // 手机号
code: '', // 验证码
buttonText: '获取验证码',
isSending: false,
seconds: 60,
timer: null
}
},
methods: {
checkData () {
if (this.tel.length !== 11) {
this.$toast('请正确输入手机号码')
return true
}
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))) {
this.$toast('请正确输入手机号码------')
return true
}
if (this.code.length !== 6) {
this.$toast('请正确输入验证码')
return true
}
return false
},
getCode () {
if (this.isSending) return
if (this.tel.length !== 11) {
this.$toast('请正确输入手机号码')
return true
}
const curParams = { tel: this.tel }
this.$http.post(this.$myApi.SENDCODE, curParams)
.then(res => {
console.log(res, 'res----------')
this.isSending = true
this.countDown()
})
.catch(() => {})
},
countDown () {
// const _this = this
let seconds = 60
this.timer = setInterval(() => {
seconds--
this.buttonText = `重新获取(${seconds}s)`
if (seconds < 1) {
this.isSending = false
this.buttonText = '重新获取'
clearInterval(this.timer)
}
}, 1000)
},
goLogin () {
if (this.checkData()) return true
const curParams = {
tel: this.tel,
code: this.code
}
this.$http.post(this.$myApi.BINDLOGINTWO, curParams)
.then(res => {
console.log(res)
this.$toast('绑定成功')
setLocalStorage(INDEX_REFRESH, true)
setTimeout(() => {
this.$router.replace({
name: 'home'
})
}, 500)
})
.catch(() => {})
},
fetchData (to, from) {
this.tel = '' // 手机号
this.code = '' // 验证码
this.buttonText = '获取验证码'
this.isSending = false
this.seconds = 60
this.timer = null
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchData(to, from, next)
})
},
beforeRouteLeave (to, from, next) {
if (this.timer) {
clearInterval(this.timer)
}
next()
}
// beforeCreate () {
// document.querySelector('body').setAttribute('style', 'background: #ffffff')
// },
// beforeDestroy () {
// document.querySelector('body').removeAttribute('style')
// }
}
</script>
<style lang="scss" scoped>
@import "@assets/styles/login/login.scss";
</style>
src/views/my/charge.vue 0 → 100644
View file @ 3cf9e371
<template>
<div class="cont">
<div class="top">
<div class="item flex-h flex-vc">
<div class="title">维修类目:</div>
<div class="title">供水</div>
</div>
<div class="item-title">问题描述:</div>
<div class="item-desc que-desc">重点水房类-水房的阀门关不紧</div>
<div class="item flex-h flex-vc">
<div class="item-title">服务地址:</div>
<div class="item-desc">公寓区-16号楼-东侧水房</div>
</div>
<div class="item flex-h flex-vc">
<div class="item-title">客户姓名:</div>
<div class="item-desc">张三三</div>
</div>
<div class="item flex-h flex-vc">
<div class="item-title">联系电话:</div>
<div class="item-desc phone">186787867463</div>
</div>
<div class="item flex-h flex-vc">
<div class="item-title">提交时间:</div>
<div class="item-desc">2021-06-17 09:28:43</div>
</div>
<div class="item flex-h flex-vc">
<div class="item-title">图片详情:</div>
<div class="img flex-h">
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
</div>
</div>
</div>
<div class="things">
<div class="things_title">所需耗材</div>
<div class="list-item" v-for="(item,index) in addList" :key="index">
<div class="item flex-h flex-hb" v-model="item.zl">
<div class="item_title flex-h flex-vc">
<div class="title_left">耗材种类</div>
<div class="title_r">洁具</div>
</div>
<div class="select flex-h flex-vc">
<div class="select_txt">选择</div>
<img src="@assets/images/my/select.png" alt />
</div>
</div>
<div class="item flex-h flex-hb" v-model="item.mc">
<div class="item_title flex-h flex-vc">
<div class="title_left">耗材名称</div>
<div class="title_r">水龙头</div>
</div>
<div class="select flex-h flex-vc">
<div class="select_txt">选择</div>
<img src="@assets/images/my/select.png" alt />
</div>
</div>
<div class="item flex-h flex-vc" v-model="item.sl">
<div class="title_left">耗材个数</div>
<input type="number" placeholder="请输入" />
</div>
</div>
<div class="line"></div>
<div class="math-btn flex-h flex-vc flex-hb">
<div class="del-btn" @click="delMeth">-删除耗材</div>
<div class="add-btn" @click="addMeth">+新增耗材</div>
</div>
</div>
<div class="blank"></div>
<!-- 底部 -->
<div class="bottom flex-h flex-hb flex-vc">
<div class="left">共<span>0</span>件，总金额:<span>￥0</span></div>
<div class="sk-btn">发起收款</div>
</div>
</div>
</template>
<script>
export default {
name: 'charge',
data () {
return {
addList:[
{
zl:'',
mc:'',
sl:'',
}
],
}
},
methods:{
addMeth () {
this.addList.push({
zl:'',
mc:'',
sl:'',
})
},
delMeth(index){
this.addList.splice(index,1)
},
},
}
</script>
<style lang="scss" scoped>
.cont {
min-height: 100vh;
background: #fff;
padding-top: 0.2rem;
}
.top {
width: 6.9rem;
background: #ffffff;
box-shadow: 0px 0px 0.12rem 1px rgba(214, 214, 214, 0.78);
border-radius: 0.12rem;
padding: 0.4rem 0.3rem 0.8rem;
margin: 0rem auto;
}
.item {
height: 0.3rem;
margin-bottom: 0.4rem;
}
.title {
color: #0054ff;
font-size: 0.32rem;
font-weight: bold;
}
.item-title {
color: #000000;
font-size: 0.3rem;
}
.item-desc {
color: #727272;
font-size: 0.3rem;
}
.que-desc {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
}
.phone {
color: #0054ff;
}
.img {
width: 1.2rem;
height: 1.2rem;
border-radius: 0.08rem;
margin-top: 0.8rem;
}
.img img {
width: 100%;
height: 100%;
border-radius: 0.08rem;
margin-left: 0.16rem;
margin-right: 0.16rem;
}
.things {
width: 6.9rem;
background: #ffffff;
box-shadow: 0px 0px 0.12rem 1px rgba(214, 214, 214, 0.78);
border-radius: 0.12rem;
padding: 0.4rem 0.3rem;
margin: 0.2rem auto;
}
.things_title {
color: #000000;
font-size: 0.3rem;
font-weight: bold;
margin-bottom: 0.4rem;
}
.title_left {
margin-right: 0.38rem;
}
.title_r {
color: #727272;
font-size: 0.3rem;
}
.select .select_txt {
color: #0054ff;
font-size: 0.3rem;
margin-right: 0.2rem;
}
.select img {
width: 0.15rem;
height: 0.26rem;
}
.line {
width: 6.28rem;
height: 1px;
background: #f1f1f1;
}
.math-btn {
color: #0054ff;
font-size: 0.3rem;
margin-top: 0.4rem;
}
.list-item{
margin-bottom: 0.8rem;
}
.blank {
width: 100%;
height: 1rem;
}
.bottom {
width: 100%;
height: 1.04rem;
background: #ffffff;
padding-left: 0.3rem;
padding-right: 0.3rem;
position: fixed;
left: 0;
bottom: 0;
}
.left {
color: #000;
font-size: 0.28rem;
}
.left span {
color: #0054ff;
}
.sk-btn {
width: 3rem;
height: 0.76rem;
background: #c0c0c0;
border-radius: 0.38rem;
text-align: center;
line-height: 0.76rem;
color: #ffffff;
font-size: 0.26rem;
}
.skBtn {
width: 3rem;
height: 0.76rem;
background: #0054ff;
border-radius: 0.38rem;
text-align: center;
line-height: 0.76rem;
color: #ffffff;
font-size: 0.26rem;
}
</style>
\ No newline at end of file
src/views/my/relation-users.vue 0 → 100644
View file @ 3cf9e371
<template>
<div class="relation-users-page">
<div class="header">
<p class="name">{{supplier ? supplier.shop_name : '--'}}</p>
<p>绑定账号：{{supplier_tel}}</p>
</div>
<div class="list">
<div :class="['list-item', index+1 >= list.length?'no-border':'' ]"
v-for="(item, index) in list" :key="index">
<img :src="item.avatar" v-if="item.avatar"/>
<img src="@assets/images/my/touxiang.png" v-else/>
<p>{{item.nickname}}</p>
</div>
</div>
</div>
</template>
<script>
import { SELFSHOP, getLocalStorage } from '@assets/js/self.js'
import { getInfoRes } from '@assets/js/cart_res.js'
export default {
name: 'relationUsers',
data () {
return {
supplier: null, // 机构信息
supplier_tel: '',
list: [],
isloading: false,
page: 1,
more: true,
locked: false,
limit: 10
}
},
methods: {
// 初始化
initData () {
this.list = []
this.page = 1
this.more = true
this.locked = false
this.isloading = false
},
// 绑定的微信列表
getUserList () {
if (this.more && !this.isloading) {
const curParams = {
page: this.page,
pageSize: this.limit,
shop_id: getLocalStorage(SELFSHOP) ? getLocalStorage(SELFSHOP).id : ''
}
this.isloading = true
this.$http.get(this.$myApi.WXLIST, curParams)
.then(data => {
this.list = this.page === 1 ? data.list : this.list.concat(data.list)
this.page = data.next
this.more = data.more
this.locked = false
this.isloading = false
})
.catch(() => {
this.locked = false
this.isloading = false
})
}
},
// 获取机构信息
getSupplierDetail () {
getInfoRes(this)
},
onRefresh () {
setTimeout(() => {
this.isloading = false
}, 1000)
},
scroll () {
if (
window.pageYOffset /
(document.documentElement.scrollHeight - window.innerHeight) >=
0.7 &&
this.more
) {
if (!this.locked) {
this.locked = true
this.getUserList()
}
}
},
fetchData (to, from) {
this.initData()
this.getUserList()
this.getSupplierDetail()
window.addEventListener('scroll', this.scroll, false)
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchData(to, from, next)
})
},
beforeRouteLeave (to, from, next) {
window.removeEventListener('scroll', this.scroll, false)
next()
}
}
</script>
<style lang="scss" scoped>
@import "@assets/styles/my/relation-users.scss";
</style>
src/views/tabbar/Home.vue
View file @ 3cf9e371
......@@ -5,8 +5,19 @@
<div class="status">工作中</div>
</div>
<div class="menu flex-h flex-hb">
<div class="total">共3个工单</div>
<div class="options">今日</div>
<div class="hc_total">共3个工单</div>
<div class="options" @click="show">
{{currentName}}
<div class="option-box" v-show="xianshi">
<div
class="option-item"
v-for="item in optionList"
:key="item.time_type"
:value="item.name"
@click="changeItem(item.time_type,item.name)"
>{{item.name}}</div>
</div>
</div>
</div>
<div class="order-item">
<div class="title">已派工</div>
......@@ -34,7 +45,10 @@
</div>
<div class="item flex-h flex-vc">
<div class="item-title">图片详情:</div>
<div class="img"></div>
<div class="img flex-h">
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
</div>
</div>
<div class="line"></div>
<div class="item flex-h flex-vc">
......@@ -56,16 +70,57 @@
</div>
<div class="line"></div>
<div class="btn flex-h flex-hr">
<div class="btn-item bz-btn">备注耗材</div>
<div class="btn-item qr-btn">确认完成</div>
<div class="btn-item sf-btn">发起收费</div>
<!-- <div class="btn-item">发起转单</div> -->
<div class="btn-item bz-btn" @click="bz_click">备注耗材</div>
<!-- <div class="btn-item qr-btn">确认完成</div> -->
<div class="btn-item sf-btn" @click="tz_charge">发起收费</div>
<div class="btn-item" @click="zd_click">发起转单</div>
<!-- <div class="btn-item">开始维修</div> -->
<!-- <div class="btn-item">查看评价</div> -->
<!-- <div class="btn-item sf-btn">查看耗材</div> -->
<div class="btn-item sf-btn" @click="look_click">查看耗材</div>
</div>
</div>
<div class="blank"></div>
<!-- 发起转单弹窗 -->
<van-popup v-model="zdShow" close-icon="close">
<div class="pop_title">备注转单原因</div>
<textarea placeholder="请输入转单理由"></textarea>
<div class="btnItem flex-h">
<div class="cancel" @click="cancel">取消</div>
<div class="sure" @click="zd_submit">提交</div>
</div>
</van-popup>
<!-- 备注耗材弹窗 -->
<van-popup v-model="hcShow" close-icon="close">
<div class="pop_title">备注耗材</div>
<div class="list-item" v-for="(item,index) in addList" :key="index">
<input class="input" v-model="item.hc" type="text" placeholder="请输入耗材名称" />
<input class="input" v-model="item.sl" type="text" placeholder="请输入耗材个数" />
</div>
<div class="math-btn flex-h flex-vc flex-hb">
<div class="del-btn" @click="delMeth">-删除</div>
<div class="add-btn" @click="addMeth">+新增</div>
</div>
<div class="btnItem flex-h">
<div class="cancel" @click="cancel">取消</div>
<div class="sure" @click="bz_submit">提交</div>
</div>
</van-popup>
<!-- 查看耗材弹窗 -->
<van-popup v-model="lookShow" close-icon="close">
<div class="pop_title">查看耗材</div>
<div class="ma-item one-item flex-h flex-hb">
<div class="one">洁具</div>
<div class="one">水龙头*1</div>
<div class="one">￥16</div>
</div>
<div class="ma-item one-item flex-h flex-hb">
<div class="one">洁具</div>
<div class="one">水龙头*1</div>
<div class="one">￥16</div>
</div>
<div class="hc_total">共计2件，总价: ￥26</div>
<div class="sure-btn" @click="bz_submit">确定</div>
</van-popup>
<!-- tabbar -->
<my-tabbar curname="home"></my-tabbar>
</div>
......@@ -78,6 +133,101 @@ export default {
components: {
myTabbar
},
data(){
return{
addList:[
{
hc:'',
sl:''
}
],
xianshi: false,
currentName: '今日',
optionList: [{
time_type:'1',
name: '今日'
},{
time_type:'2',
name: '本周'
},{
time_type:'3',
name: '本月'
},{
time_type:'4',
name: '自定义'
}],
activeStatus: '',
zdShow: false,//发起转单弹窗
hcShow: false,//耗材弹窗
lookShow: false,//查看耗材弹窗
}
},
methods: {
addMeth(){
this.addList.push({
hc:'',
sl:''
})
},
delMeth(index){
this.addList.splice(index,1)
},
show(e){
if(this.xianshi == true){
this.xianshi = false
}else if(this.xianshi == false){
this.xianshi= true
}
},
changeItem(time_type,name) {
console.log(name);
if(time_type == this.activeStatus ){
return
}
this.activeStatus = time_type;
this.currentName = name
// setTimeout(() => {
// this.getList()
// }, 0);
},
//备注耗材弹窗
bz_click(){
this.hcShow = true
console.log('111');
},
//转单弹窗
zd_click(){
this.zdShow = true
},
//查看耗材弹窗
look_click(){
this.lookShow = true
},
cancel(){
this.zdShow = false
this.hcShow = false
this.lookShow = false
},
//转单提交
zd_submit(){
this.zdShow = false
console.log(111)
},
//备注提交
bz_submit(){
console.log('六点十分',this.addList);
this.hcShow = false
this.lookShow = false
console.log('111');
},
//发起收费
tz_charge(){
this.$router.push({
name: 'charge'
})
},
},
}
</script>
......@@ -103,7 +253,7 @@ export default {
font-size: 0.36rem;
font-weight: bold;
}
.menu .total {
.menu .hc_total {
color: #727272;
font-size: 0.28rem;
}
......@@ -117,6 +267,17 @@ export default {
font-size: 0.28rem;
line-height: 0.58rem;
text-align: center;
position: relative;
}
.menu .options .option-box {
width: 1.76rem;
// height: 2rem;
background: #fff;
border: 1px solid #0054ff;
position: absolute;
top: 0.57rem;
left: 0rem;
border-radius: 0 0 0.12rem 0.12rem;
}
.order-item {
width: 6.9rem;
......@@ -125,7 +286,7 @@ export default {
border-radius: 0.12rem;
margin-top: 0.4rem;
padding: 0.4rem 0.3rem;
margin-bottom: 0.2rem;
margin-bottom: 0.2rem;
}
.title {
color: #0054ff;
......@@ -134,8 +295,8 @@ export default {
margin-bottom: 0.5rem;
}
.item {
height: 0.3rem;
margin-bottom: 0.4rem;
// height: 0.3rem;
margin-bottom: 0.2rem;
}
.item-title {
color: #000000;
......@@ -149,6 +310,22 @@ export default {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
}
.img {
width: 1.2rem;
height: 1.2rem;
border-radius: 0.08rem;
// margin-top: 0.8rem;
}
.img img {
width: 100%;
height: 100%;
border-radius: 0.08rem;
margin-left: 0.16rem;
margin-right: 0.16rem;
}
.list-item{
margin-bottom: 0.4rem;
}
.line {
width: 6.28rem;
height: 0.01rem;
......@@ -163,6 +340,10 @@ export default {
font-size: 0.3rem;
margin-bottom: 0.3rem;
}
.one-item {
margin-left: 0.3rem;
margin-right: 0.3rem;
}
.btn-item {
width: 1.8rem;
height: 0.7rem;
......@@ -182,4 +363,94 @@ export default {
.blank {
height: 1rem;
}
.van-popup {
width: 6.9rem;
max-height: 7rem;
// height: 5.9rem;
background: #fff;
border-radius: 0.12rem;
padding-top: 0.4rem;
padding-bottom: 0.2rem;
text-align: center;
}
.pop_title {
color: #000000;
font-size: 0.36rem;
font-weight: bold;
margin-bottom: 0.4rem;
}
.van-popup textarea {
width: 6.3rem;
height: 3rem;
border: 1px solid #f1f1f1;
border-radius: 0.08rem;
padding: 0.3rem 0.2rem;
}
.van-popup textarea::-webkit-input-placeholder {
color: #c8c8c8;
font-size: 0.26rem;
}
.btnItem {
margin-top: 0.4rem;
margin-left: 0.65rem;
}
.btnItem .cancel {
width: 2.65rem;
height: 0.78rem;
border: 1px solid #c8c8c8;
border-radius: 0.39rem;
color: #000000;
font-size: 0.32rem;
text-align: center;
line-height: 0.78rem;
margin-right: 0.3rem;
}
.btnItem .sure {
width: 2.65rem;
height: 0.78rem;
background: linear-gradient(270deg, #0054ff, #1965ff);
border-radius: 0.39rem;
color: #ffffff;
font-size: 0.32rem;
text-align: center;
line-height: 0.78rem;
margin-right: 0.3rem;
}
.input {
width: 6.3rem;
height: 0.76rem;
background: #ffffff;
border: 1px solid #f1f1f1;
border-radius: 0.08rem;
text-align: left;
padding-left: 0.2rem;
margin-bottom: 0.1rem;
font-size: 0.3rem;
}
.input::-webkit-input-placeholder {
color: #c8c8c8;
font-size: 0.3rem;
}
.math-btn {
margin-left: 0.3rem;
margin-right: 0.3rem;
color: #0256ff;
font-size: 0.3rem;
}
.hc_total {
text-align: left;
color: #000000;
font-size: 0.26rem;
margin-left: 0.3rem;
}
.sure-btn {
width: 3.12rem;
height: 0.78rem;
background: linear-gradient(270deg, #0054ff, #1965ff);
border-radius: 0.39rem;
color: #ffffff;
text-align: center;
line-height: 0.78rem;
margin: 1.2rem auto;
}
</style>
\ No newline at end of file
src/views/tabbar/my.vue 0 → 100644
View file @ 3cf9e371
<template>
<div class="my-page">
<div class="my-header">
<img :src="userInfo.avatar" class="user-img" v-if="userInfo && userInfo.avatar" />
<img src="@assets/images/my/touxiang.png" class="user-img" v-else />
<div class="left-cont">
<p class="user-name one-line">{{userInfo.wx_nick_name}}</p>
<p class="">绑定账号：{{supplier_tel}}</p>
</div>
</div>
<div class="navlist">
<div class="list-item">
<div class="icon"><span class="iconfont icon-bangding1"></span></div>
<div class="content" @click="goRelation">
<span class="title">绑定微信</span>
<span class="iconfont icon-youhuaxiangyougengduo"></span>
</div>
</div>
<div class="list-item">
<div class="icon"><span class="iconfont icon-bangding2"></span></div>
<div class="content" @click="addRelation">
<span class="title">绑定机构</span>
<span class="iconfont icon-youhuaxiangyougengduo"></span>
</div>
</div>
<div class="list-item no-border">
<div class="icon"><span class="iconfont icon-dingyue1"></span></div>
<div class="content" @click="codeShow=true">
<span class="title">订阅通知</span>
<span class="iconfont icon-youhuaxiangyougengduo"></span>
</div>
</div>
</div>
<!-- 退出登录 -->
<div class="login-out-btn" @click="logout_click">退出当前机构</div>
<van-popup v-model="codeShow">
<img src="@assets/images/my/qrcode.jpg"/>
</van-popup>
<!-- tabbar -->
<my-tabbar curname="my"></my-tabbar>
</div>
</template>
<script>
import myTabbar from '@components/common/tabbar.vue'
import { getInfoRes } from '@assets/js/cart_res.js'
import { MY_REFRESH, INDEX_REFRESH, getLocalStorage, setLocalStorage, removeLocalStorage } from '@assets/js/self.js'
export default {
name: 'my',
components: {
myTabbar
},
data () {
return {
isclick: false,
codeShow: false,
userInfo: {},
supplier_tel: ''
}
},
methods: {
goRelation () {
this.$router.push({
name: 'relationUsers'
})
},
addRelation () {
this.$router.push({
name: 'addRelation'
})
},
getUserInfo () {
getInfoRes(this, (data) => {
this.userInfo = data
removeLocalStorage(MY_REFRESH)
})
},
logout () {
this.isclick = true
// 发起网络请求
this.$http.post(this.$myApi.LOGOUT)
.then(res => {
this.isclick = false
// 清除缓存
this.userInfo = {}
this.supplier_tel = ''
window.localStorage.clear()
setLocalStorage(INDEX_REFRESH, true)
this.$router.push({
name: 'againLogin'
})
})
.catch(() => {
this.isclick = false
})
},
logout_click () {
if (this.isclick) return
this.$dialog.confirm({
title: '提示',
message: '确定要退出当前账号吗',
theme: 'round-button',
confirmButtonColor: '#325BEF',
cancelButtonColor: '#FFFFFF',
className: 'self-dialog'
})
.then(() => {
this.logout()
})
.catch(() => {})
},
fetchData (to, from) {
this.isclick = false
if (getLocalStorage(MY_REFRESH)) {
this.getUserInfo()
}
}
},
mounted () {
this.getUserInfo()
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchData()
})
}
}
</script>
<style lang="scss" scoped>
@import "@assets/styles/tabbar/my.scss";
</style>
vue.config.js
View file @ 3cf9e371
......@@ -54,7 +54,8 @@ module.exports = {
// devServer:{type:Object} 3个属性host,port,https 支持webPack-dev-server的所有选项
devServer: {
port: 8080, // 端口号
host: 'localhost',
// host: 'localhost',
host: "192.168.3.44",
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
proxy: {
......
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