客户输入文字跳动修复

master
yujialong 3 years ago
parent 0608fcf01c
commit d5a0deb0d2
  1. 40
      pages.json
  2. 34
      pages/clientDetail/clientDetail.vue
  3. 12
      pages/clients/clients.vue
  4. 17
      pages/orders/orders.vue
  5. 76
      pages/qrcode/qrcode.vue

@ -1,5 +1,29 @@
{ {
"pages": [ "pages": [
{
"path" : "pages/clients/clients",
"style" :
{
"navigationBarTitleText": "客户列表",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/qrcode/qrcode",
"style" :
{
"navigationBarTitleText": "邀请加入",
"enablePullDownRefresh": false
}
},
{ {
"path" : "pages/send/send", "path" : "pages/send/send",
"style" : "style" :
@ -31,14 +55,6 @@
"navigationBarTitleText": "添加成员", "navigationBarTitleText": "添加成员",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path" : "pages/clients/clients",
"style" :
{
"navigationBarTitleText": "客户列表",
"enablePullDownRefresh": true
}
}, },
{ {
"path": "pages/index/index", "path": "pages/index/index",
@ -46,14 +62,6 @@
"navigationBarTitleText": "首页" "navigationBarTitleText": "首页"
} }
}, },
{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
},
{ {
"path" : "pages/orderDetail/orderDetail", "path" : "pages/orderDetail/orderDetail",
"style" : "style" :

@ -1,9 +1,8 @@
<template> <template>
<view class="page"> <view :class="{page: isDetail}">
<uni-card v-if="customerId" :is-shadow="false" :border="false" is-full> <uni-card v-if="customerId" :is-shadow="false" :border="false" is-full>
<view class="info"> <view class="info">
<view class="name">{{ form.customerName }}</view> <view class="name">{{ form.customerName }}</view>
<view class="text">客户编号2124232</view>
<view class="text">客户类型{{ customerType }}</view> <view class="text">客户类型{{ customerType }}</view>
<view class="text">产品到期时间{{ form.expireDate || '' }}</view> <view class="text">产品到期时间{{ form.expireDate || '' }}</view>
</view> </view>
@ -33,22 +32,22 @@
</uni-data-picker> </uni-data-picker>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="联系人姓名" name="name" required> <uni-forms-item label="联系人姓名" name="name" required>
<uni-easyinput v-model="form.name" placeholder="请输入联系人姓名" :disabled="isDetail" /> <uni-easyinput ref="nameInput" placeholder="请输入联系人姓名" :disabled="isDetail" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="手机" name="phone"> <uni-forms-item label="手机" name="phone">
<uni-easyinput v-model="form.phone" placeholder="请输入手机" :disabled="isDetail" /> <uni-easyinput ref="phoneInput" placeholder="请输入手机" :disabled="isDetail" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="账号" name="account" required> <uni-forms-item label="账号" name="account" required>
<uni-easyinput v-model="form.account" placeholder="请以院校首字母+admin的格式来设置" :disabled="isDetail" /> <uni-easyinput ref="accountInput" placeholder="请以院校首字母+admin的格式来设置" :disabled="isDetail" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="职务" name="position"> <uni-forms-item label="职务" name="position">
<uni-easyinput v-model="form.position" placeholder="请输入职务" :disabled="isDetail" /> <uni-easyinput ref="positionInput" placeholder="请输入职务" :disabled="isDetail" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="邮箱" name="email"> <uni-forms-item label="邮箱" name="email">
<uni-easyinput v-model="form.email" placeholder="请输入邮箱" :disabled="isDetail" /> <uni-easyinput ref="emailInput" placeholder="请输入邮箱" :disabled="isDetail" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="产品到期时间"> <uni-forms-item label="产品到期时间">
<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.expireDate" disabled /> <uni-easyinput v-model="form.expireDate" disabled />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="客户类型"> <uni-forms-item label="客户类型">
<uni-easyinput v-model="customerType" disabled /> <uni-easyinput v-model="customerType" disabled />
@ -181,6 +180,11 @@
}).then(({ result }) => { }).then(({ result }) => {
const { customer } = result const { customer } = result
this.form = customer this.form = customer
this.$refs.nameInput.val = customer.name
this.$refs.phoneInput.val = customer.phone
this.$refs.accountInput.val = customer.account
this.$refs.positionInput.val = customer.position
this.$refs.emailInput.val = customer.email
this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name
}).catch(e => {}) }).catch(e => {})
}, },
@ -237,17 +241,25 @@
}, },
// //
submit(ref) { submit(ref) {
const refs = this.$refs
const { form } = this
form.name = refs.nameInput.val
form.account = refs.accountInput.val
form.position = refs.positionInput.val
form.phone = refs.phoneInput.val
form.email = refs.emailInput.val
this.$nextTick(() => {
this.$refs.form.validate().then(res => { this.$refs.form.validate().then(res => {
if (this.nameRepeat) return this.$util.errMsg('客户已存在!') if (this.nameRepeat) return this.$util.errMsg('客户已存在!')
if (this.customerId) { if (this.customerId) {
updateCustomer(this.form).then(res => { updateCustomer(form).then(res => {
this.$util.sucMsg('编辑成功') this.$util.sucMsg('编辑成功')
setTimeout(() => { setTimeout(() => {
this.$util.to('../clients/clients') this.$util.to('../clients/clients')
}, 1500) }, 1500)
}).catch(res => {}) }).catch(res => {})
} else { } else {
addCustomer(this.form).then(res => { addCustomer(form).then(res => {
this.$util.sucMsg('添加成功') this.$util.sucMsg('添加成功')
setTimeout(() => { setTimeout(() => {
uni.navigateBack() uni.navigateBack()
@ -255,6 +267,7 @@
}).catch(res => {}) }).catch(res => {})
} }
}).catch(err => {}) }).catch(err => {})
})
}, },
} }
} }
@ -266,6 +279,7 @@
} }
.info { .info {
.name { .name {
margin-bottom: 5px;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }

@ -4,8 +4,6 @@
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> <li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<uni-card :is-shadow="false" :border="false" padding="0" is-full> <uni-card :is-shadow="false" :border="false" padding="0" is-full>
<view class="filter"> <view class="filter">
<uni-search-bar class="search" radius="5" placeholder="请输入客户名称" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="search" /> <uni-search-bar class="search" radius="5" placeholder="请输入客户名称" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="search" />
@ -74,7 +72,6 @@
} }
], ],
reachBottom: 0, // 0->,1->,-1-> reachBottom: 0, // 0->,1->,-1->
isFilter: 0, // 0->,1->
status: 'more', // more|loading|noMore status: 'more', // more|loading|noMore
searchTimer: null, searchTimer: null,
customerType: '', customerType: '',
@ -91,7 +88,6 @@
keyword (newName, oldName) { keyword (newName, oldName) {
clearTimeout(this.searchTimer) clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => { this.searchTimer = setTimeout(() => {
this.isFilter = 1
this.initList() this.initList()
}, 500) }, 500)
} }
@ -111,8 +107,8 @@
this.getList() this.getList()
} }
}, },
onLoad() { onShow() {
this.getList() this.initList()
}, },
methods: { methods: {
getList() { getList() {
@ -125,16 +121,16 @@
size: this.pageSize size: this.pageSize
}).then(({ message }) => { }).then(({ message }) => {
// list // list
this.list = (this.reachBottom >= 0 && !this.isFilter) ? [...this.list, ...message.list] : message.list this.list = this.reachBottom > 0 ? [...this.list, ...message.list] : message.list
this.page++ // page+1 this.page++ // page+1
const noMore = this.list.length === message.totalCount // const noMore = this.list.length === message.totalCount //
this.status = noMore ? 'noMore' : 'more' // noMore this.status = noMore ? 'noMore' : 'more' // noMore
this.reachBottom = noMore ? -1 : 0 // -1 this.reachBottom = noMore ? -1 : 0 // -1
this.isFilter = 0 // 0
}).catch(e => {}) }).catch(e => {})
}, },
initList() { initList() {
this.page = 1 this.page = 1
this.reachBottom = 0
this.getList() this.getList()
}, },
// //

@ -4,12 +4,14 @@
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> <li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<sl-filter :independence="true" :menuList="menuList" @result="result"></sl-filter>
<uni-card :is-shadow="false" :border="false" padding="0" is-full> <uni-card :is-shadow="false" :border="false" padding="0" is-full>
<uni-search-bar class="search" radius="5" placeholder="请输入姓名、订单号" clearButton="auto" cancelButton="none" @confirm="search" /> <uni-search-bar class="search" radius="5" placeholder="请输入姓名、订单号" clearButton="auto" cancelButton="none" @confirm="search" />
</uni-card> </uni-card>
<view class="filter">
<sl-filter :independence="true" :menuList="menuList" @result="result"></sl-filter>
</view>
<uni-card :is-shadow="false" :border="false" is-full> <uni-card :is-shadow="false" :border="false" is-full>
<ul class="list"> <ul class="list">
<li @click="toDetail({})"> <li @click="toDetail({})">
@ -166,16 +168,9 @@
} }
</script> </script>
<style lang="scss"> <style scoped lang="scss">
.top { .filter {
display: flex;
align-items: center;
padding: 5px 15px 5px 5px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #fff;
.search {
flex: 1;
}
} }
.list { .list {
.num { .num {

@ -0,0 +1,76 @@
<template>
<view class="page">
<view class="wrap">
<view class="info">
<image class="avatar" src="../../static/avatar.jpg" mode=""></image>
<view class="text">
<view class="invite">
<text class="name">Jane</text> 邀请你加入
</view>
<view class="com">宁德时代股份有限公司</view>
</view>
</view>
<image class="qrcode" src="https://pic.baike.soso.com/p/20130307/20130307133645-1010261466.jpg" mode=""></image>
<view class="tips">扫一扫加入我们吧</view>
<view class="warn">邀请二维码失效日期2022年2月2日</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.wrap {
padding: 20px 40px;
margin: 60px 40px 0;
text-align: center;
background-color: #fff;
.info {
display: flex;
align-items: center;
text-align: left;
}
.avatar {
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
}
.invite {
margin-bottom: 5px;
font-size: 15px;
}
.name {
font-size: 13px;
color: $uni-primary;
}
.com {
font-size: 13px;
}
.qrcode {
width: 280px;
height: 280px;
margin-top: 20px;
}
.tips {
margin: 10px 0 10px;
font-size: 12px;
color: #333;
}
.warn {
font-size: 12px;
color: #f00;
}
}
</style>
Loading…
Cancel
Save