客户等页面制作,封装request

master
yujialong 3 years ago
parent d2c90b0206
commit e218dd3349
  1. 6
      apis/modules/client.js
  2. 70
      apis/request.js
  3. 19
      config/request.js
  4. 59
      pages.json
  5. 2
      pages/addClient/addClient.vue
  6. 98
      pages/clients/clients.vue
  7. 32
      pages/ordered/ordered.vue
  8. 16
      pages/orders/orders.vue
  9. 37
      pages/password/password.vue
  10. 42
      pages/setting/setting.vue

@ -0,0 +1,6 @@
import request from '@/apis/request.js'
const { get, post } = request
export const queryCustomer = (data) => {
return post('nakadai/nakadai/customer/queryCustomer', data)
}

@ -0,0 +1,70 @@
import config from '@/config/request'
let HTTP_COUNT = 0 // loading次数
const request = options => {
HTTP_COUNT++
if (config.showLoading) {
// 请求数据时的loading
uni.showToast({
title: '加载中',
duration: 200,
icon: 'loading'
})
}
const header = Object.assign({}, config.headers, {
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNjUyMTQ5MDU1LCJleHAiOjE2NTIxOTIyNTUsImFjY291bnRJZCI6IjEifQ.VVjW9tgd0b7_My91VRGJncv62qkILLQGl9PqMkwU0v4'
})
return new Promise((resolve, reject)=>{
uni.request({
header,
url: config.baseURL + options.url,
method: options.method || 'GET', // 请求类型,默认为GET
data: options.data || {}, // 请求参数,默认空对象
success: ({ data }) => {
// 状态判断,根据后台定义并提示
if (data.status === 200) {
resolve(data)
} else {
uni.showToast({
title: data.message,
icon: 'none'
})
reject(data)
}
},
fail: err => {
uni.showToast({
title: '请求失败!',
icon: 'fail'
})
reject(err)
},
complete: () => {
if (config.showLoading) {
HTTP_COUNT--
HTTP_COUNT || uni.hideLoading()
}
}
})
})
}
const get = (url, data, options = {}) => {
options.method = 'GET'
options.data = data
options.url = url
return request(options)
}
const post = (url, data, options = {}) => {
options.method = 'POST'
options.data = data
options.url = url
return request(options)
}
export default {
request,
get,
post
}

@ -0,0 +1,19 @@
/**
/**
* axios 配置文件
* @author yujialong
*/
export default {
baseURL: 'http://39.108.250.202:9000/',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
data: {},
method: 'POST',
responseType: 'json', // 响应数据类型
withCredentials: false, // 携带cookie
// ======================== 以下为注入axios的配置项 =============================
showLoading: true, // 是否显示加载动画
isFormData: false // 是否序列化表单数据
}

@ -1,11 +1,43 @@
{ {
"pages": [ "pages": [
{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
},
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "首页" "navigationBarTitleText": "首页"
} }
}, },
{
"path" : "pages/clients/clients",
"style" :
{
"navigationBarTitleText": "客户列表",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/password/password",
"style" :
{
"navigationBarTitleText": "修改密码",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/setting/setting",
"style" :
{
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false
}
},
{ {
"path" : "pages/send/send", "path" : "pages/send/send",
"style" : "style" :
@ -13,7 +45,6 @@
"navigationBarTitleText": "下载发送", "navigationBarTitleText": "下载发送",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path" : "pages/plans/plans", "path" : "pages/plans/plans",
@ -38,16 +69,7 @@
"navigationBarTitleText": "新建订单", "navigationBarTitleText": "新建订单",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },{
{
"path" : "pages/clients/clients",
"style" :
{
"navigationBarTitleText": "客户列表",
"enablePullDownRefresh": false
}
},{
"path" : "pages/clientDetail/clientDetail", "path" : "pages/clientDetail/clientDetail",
"style" : "style" :
{ {
@ -64,17 +86,8 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} },
,{ {
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ordered/ordered", "path" : "pages/ordered/ordered",
"style" : "style" :
{ {
@ -147,7 +160,7 @@
// "selectedIconPath": "static/image/icon_component_HL.png", // "selectedIconPath": "static/image/icon_component_HL.png",
"text": "首页" "text": "首页"
}, { }, {
"pagePath": "pages/clients/clients", "pagePath": "pages/teams/teams",
// "iconPath": "static/image/icon_API.png", // "iconPath": "static/image/icon_API.png",
// "selectedIconPath": "static/image/icon_API_HL.png", // "selectedIconPath": "static/image/icon_API_HL.png",
"text": "团队" "text": "团队"

@ -107,7 +107,7 @@
} }
}, },
onLoad() { onLoad() {
console.log(getApp())
}, },
methods: { methods: {
onchange(e) { onchange(e) {

@ -1,39 +1,95 @@
<template> <template>
<view> <view>
<ul class="tab">
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul>
<view class="top"> <view class="top">
<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-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="18" color="#007eff"></uni-icons> <uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="18" color="#007eff"></uni-icons>
</view> </view>
<uni-card :is-shadow="false" :border="false" is-full> <ul class="list">
<ul class="list"> <li v-for="item in list" @click="toDetail">
<li @click="toDetail"> <view class="name">{{ item.customerName }}</view>
<view class="name">中山大学</view> <view class="info">
<view class="info"> <view class="left">
<view class="left"> <view class="text">联系人海文</view>
<view class="text">联系人海文</view> <view class="text">账号海文</view>
<view class="text">账号海文</view> <view class="text">产品到期时间海文</view>
<view class="text">产品到期时间海文</view> <view class="text">商务经理海文</view>
<view class="text">商务经理海文</view> </view>
</view> <view class="type">
<view class="type"> 试用客户
试用客户
</view>
</view> </view>
</li> </view>
</ul> </li>
</uni-card> </ul>
</view> </view>
</template> </template>
<script> <script>
import { queryCustomer } from '@/apis/modules/client.js'
export default { export default {
data() { data() {
return { return {
curTab: 0,
tabs: [
{
name: '我的客户',
id: 0
},
{
name: '团队全部客户',
id: 1
}
],
reachBottom: 0,
list: [],
page: 1,
pageSize: 10
} }
}, },
onPullDownRefresh() {
this.initPage()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1500)
},
onReachBottom() {
this.reachBottom = 1
uni.showNavigationBarLoading()
this.getList()
},
onLoad() {
this.getList()
},
methods: { methods: {
getList() {
queryCustomer({
countries: '中国',
provinceId: '',
cityId: '',
searchContent: '',
page: this.page,
size: this.pageSize
}).then(({ message }) => {
this.list = this.reachBottom ? [...this.list, ...message.list] : message.list
this.reachBottom = 0
this.page++
uni.hideNavigationBarLoading()
}).catch(e => {
})
},
initPage() {
this.page = 1
this.getList()
},
// tab
tabChange(tab) {
this.curTab = tab.id
},
search(res) { search(res) {
uni.showToast({ uni.showToast({
title: '搜索:' + res.value, title: '搜索:' + res.value,
@ -60,6 +116,11 @@
} }
} }
.list { .list {
background-color: #fff;
li {
padding: 10px 20px;
border-bottom: 2px solid #f8f8f8;
}
.name { .name {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
@ -72,6 +133,7 @@
} }
.text { .text {
font-size: 13px; font-size: 13px;
line-height: 24px;
color: #ccc; color: #ccc;
} }
.type { .type {

@ -9,22 +9,22 @@
<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>
<ul class="list"> <ul class="list">
<li @click="toDetail"> <li @click="toDetail">
<view class="line thead"> <view class="line thead">
<view class="text">产品名称</view> <view class="text">产品名称</view>
<view class="text">起止日期</view> <view class="text">起止日期</view>
<view class="text">订阅状态</view> <view class="text">订阅状态</view>
<view class="text">产品状态</view> <view class="text">产品状态</view>
</view> </view>
<view class="line tbody"> <view class="line tbody">
<view class="text">数据平台</view> <view class="text">数据平台</view>
<view class="text">2022-01-01 ~ 2022-02-02</view> <view class="text">2022-01-01 ~ 2022-02-02</view>
<view class="text uni-success">生效</view> <view class="text uni-success">生效</view>
<view class="text uni-error">禁用</view> <view class="text uni-error">禁用</view>
</view> </view>
</li> </li>
</ul> </ul>
</view> </view>
</template> </template>

@ -1,5 +1,9 @@
<template> <template>
<view> <view>
<ul class="tab">
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul>
<view class="top"> <view class="top">
<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-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="18" color="#007eff"></uni-icons> <uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="18" color="#007eff"></uni-icons>
@ -32,7 +36,17 @@
export default { export default {
data() { data() {
return { return {
curTab: 0,
tabs: [
{
name: '我的订单',
id: 0
},
{
name: '团队全部订单',
id: 1
}
]
} }
}, },
methods: { methods: {

@ -0,0 +1,37 @@
<template>
<view class="page">
<view class="input">
<uni-easyinput type="password" v-model="password" placeholder="请输入旧密码"></uni-easyinput>
</view>
<view class="input">
<uni-easyinput type="password" v-model="password" placeholder="请输入新密码"></uni-easyinput>
</view>
<view class="input">
<uni-easyinput type="password" v-model="password" placeholder="请再次输入新密码"></uni-easyinput>
</view>
<button type="primary" @click="submit('valiForm')">确认</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.page {
padding: 20px;
background-color: #fff;
}
.input {
margin-bottom: 15px;
}
</style>

@ -0,0 +1,42 @@
<template>
<view>
<uni-list>
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="phoneIcon" title="手机号" rightText="135617623" />
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="mailIcon" title="邮箱" rightText="135617623" />
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="pwdIcon" title="密码" rightText="******" clickable @click="toPage('../password/password')" />
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
phoneIcon: {
color: '#007eff',
size: '22',
type: 'phone'
},
mailIcon: {
color: '#007eff',
size: '22',
type: 'email'
},
pwdIcon: {
color: '#007eff',
size: '22',
type: 'locked'
}
}
},
methods: {
toPage(path) {
this.$util.to(path)
}
}
}
</script>
<style>
</style>
Loading…
Cancel
Save