客户等页面制作,封装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": [
{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
"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",
"style" :
@ -13,7 +45,6 @@
"navigationBarTitleText": "下载发送",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/plans/plans",
@ -38,16 +69,7 @@
"navigationBarTitleText": "新建订单",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/clients/clients",
"style" :
{
"navigationBarTitleText": "客户列表",
"enablePullDownRefresh": false
}
},{
},{
"path" : "pages/clientDetail/clientDetail",
"style" :
{
@ -64,17 +86,8 @@
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false
}
}
,{
},
{
"path" : "pages/ordered/ordered",
"style" :
{
@ -147,7 +160,7 @@
// "selectedIconPath": "static/image/icon_component_HL.png",
"text": "首页"
}, {
"pagePath": "pages/clients/clients",
"pagePath": "pages/teams/teams",
// "iconPath": "static/image/icon_API.png",
// "selectedIconPath": "static/image/icon_API_HL.png",
"text": "团队"

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

@ -1,39 +1,95 @@
<template>
<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">
<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>
</view>
<uni-card :is-shadow="false" :border="false" is-full>
<ul class="list">
<li @click="toDetail">
<view class="name">中山大学</view>
<view class="info">
<view class="left">
<view class="text">联系人海文</view>
<view class="text">账号海文</view>
<view class="text">产品到期时间海文</view>
<view class="text">商务经理海文</view>
</view>
<view class="type">
试用客户
</view>
<ul class="list">
<li v-for="item in list" @click="toDetail">
<view class="name">{{ item.customerName }}</view>
<view class="info">
<view class="left">
<view class="text">联系人海文</view>
<view class="text">账号海文</view>
<view class="text">产品到期时间海文</view>
<view class="text">商务经理海文</view>
</view>
<view class="type">
试用客户
</view>
</li>
</ul>
</uni-card>
</view>
</li>
</ul>
</view>
</template>
<script>
import { queryCustomer } from '@/apis/modules/client.js'
export default {
data() {
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: {
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) {
uni.showToast({
title: '搜索:' + res.value,
@ -60,6 +116,11 @@
}
}
.list {
background-color: #fff;
li {
padding: 10px 20px;
border-bottom: 2px solid #f8f8f8;
}
.name {
font-size: 16px;
color: #333;
@ -72,6 +133,7 @@
}
.text {
font-size: 13px;
line-height: 24px;
color: #ccc;
}
.type {

@ -9,22 +9,22 @@
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul>
<ul class="list">
<li @click="toDetail">
<view class="line thead">
<view class="text">产品名称</view>
<view class="text">起止日期</view>
<view class="text">订阅状态</view>
<view class="text">产品状态</view>
</view>
<view class="line tbody">
<view class="text">数据平台</view>
<view class="text">2022-01-01 ~ 2022-02-02</view>
<view class="text uni-success">生效</view>
<view class="text uni-error">禁用</view>
</view>
</li>
</ul>
<ul class="list">
<li @click="toDetail">
<view class="line thead">
<view class="text">产品名称</view>
<view class="text">起止日期</view>
<view class="text">订阅状态</view>
<view class="text">产品状态</view>
</view>
<view class="line tbody">
<view class="text">数据平台</view>
<view class="text">2022-01-01 ~ 2022-02-02</view>
<view class="text uni-success">生效</view>
<view class="text uni-error">禁用</view>
</view>
</li>
</ul>
</view>
</template>

@ -1,5 +1,9 @@
<template>
<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">
<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>
@ -32,7 +36,17 @@
export default {
data() {
return {
curTab: 0,
tabs: [
{
name: '我的订单',
id: 0
},
{
name: '团队全部订单',
id: 1
}
]
}
},
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