封装请求的方法，完成简易的问题解答页面
This commit is contained in:
parent
66bc2262e4
commit
3205aa25c7
8
app.json
8
app.json
|
|
@ -1,13 +1,13 @@
|
|||
{
|
||||
"pages": [
|
||||
"pages/login/index",
|
||||
"pages/questions/index",
|
||||
"pages/meterList/index",
|
||||
"pages/rechargeRecord/index",
|
||||
"pages/my/index",
|
||||
"pages/home/index",
|
||||
"pages/login/index",
|
||||
"pages/recharge/index",
|
||||
"pages/index/index",
|
||||
"pages/meterList/index",
|
||||
"pages/questions/index"
|
||||
"pages/index/index"
|
||||
],
|
||||
"tabBar": {
|
||||
"list": [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{{title}}
|
||||
</view>
|
||||
<view style="display: flex; width: 100%; background-color: transparent;height: 46px;position: absolute;bottom: 0;left: 0;;align-items:center;">
|
||||
<view class="backWrapper">
|
||||
<image src="/assets/images/left.png" bind:tap="back" wx:if="{{canBack}}" class="back" />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -21,3 +21,14 @@
|
|||
margin-top: 10rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.backWrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
height: 46px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items:center;
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ Page({
|
|||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
input: ""
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!--pages/login/index.wxml-->
|
||||
<view class="content">
|
||||
|
||||
<input model:value="{{input}}" />
|
||||
{{input}}1
|
||||
</view>
|
||||
|
|
@ -5,7 +5,13 @@ Page({
|
|||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
codes: [
|
||||
{ code: "2331242324", money: 510 },
|
||||
{ code: "4234234134", money: 10 },
|
||||
{ code: "2354245345", money: 50 },
|
||||
{ code: "5365457642", money: 150 },
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"navigator": "/components/navigator/index",
|
||||
"scrollPageWrapper": "/components/scrollPageWrapper/index"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,12 @@
|
|||
<!--pages/meterList/index.wxml-->
|
||||
<text>pages/meterList/index.wxml</text>
|
||||
<scrollPageWrapper>
|
||||
<navigator title="表计列表" />
|
||||
<view class="content">
|
||||
<scroll-view type="list" scroll-y style="display: flex; flex-direction: column; flex: 1; width: 100%; overflow: auto;">
|
||||
<view wx:for="{{codes}}" list-item class="listItem">
|
||||
<view class="code"> {{ item.code }} </view>
|
||||
<view class="money"> {{ item.money }} </view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</scrollPageWrapper>
|
||||
|
|
@ -1 +1,20 @@
|
|||
/* pages/meterList/index.wxss */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 16rpx 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 12rpx 0;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -5,7 +5,21 @@ Page({
|
|||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
x: 0,
|
||||
y: 0,
|
||||
questions: [{
|
||||
question: "一、什么时候可以开发票？",
|
||||
answer: "跟之前一样，每个季度一开"
|
||||
},{
|
||||
question: "二、一个季度开实际缴费数是吗？",
|
||||
answer: "开实际消耗的电费数，未消耗的电费不能开。"
|
||||
},{
|
||||
question: "三、是否可以打钱分开充值电表？",
|
||||
answer: "可以"
|
||||
},{
|
||||
question: "四、现在是多少钱一度电？",
|
||||
answer: "每个月的电价在次月供电局发票开出来后测算。"
|
||||
}]
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"navigator": "/components/navigator/index"
|
||||
"navigator": "/components/navigator/index",
|
||||
"scrollPageWrapper": "/components/scrollPageWrapper/index"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,25 @@
|
|||
<!-- pages/questions/index.wxml -->
|
||||
<scrollPageWrapper>
|
||||
<navigator title="常见问题" canBack="{{true}}" />
|
||||
<view class="content">
|
||||
<scroll-view type="list" scroll-y style="display: flex; flex-direction: column; flex: 1; width: 100%; overflow: auto;">
|
||||
<view wx:for="{{questions}}" list-item>
|
||||
<view class="question"> {{ item.question }} </view>
|
||||
<view class="answer"> {{ item.answer }} </view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <movable-area>
|
||||
<movable-view x="{{x}}" y="{{y}}" direction="all">
|
||||
<rich-text nodes="<div style='color:red;font-size:46px'>1234</div>"></rich-text>
|
||||
</movable-view>
|
||||
</movable-area> -->
|
||||
|
||||
<!-- <movable-area style="width: 500rpx; height: 500rpx;background-color: red;">
|
||||
<movable-view x="{{x}}" y="{{y}}" direction="all">
|
||||
<view style="width: 100rpx; height: 100rpx;background-color: blue;"> 1111 </view>
|
||||
</movable-view>
|
||||
</movable-area> -->
|
||||
|
||||
|
||||
</scrollPageWrapper>
|
||||
|
|
@ -1 +1,17 @@
|
|||
/* pages/questions/index.wxss */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 16rpx 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.answer {
|
||||
margin: 14rpx 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
|
@ -126,3 +126,42 @@ function debounce(fn, interval) {
|
|||
}, gapTime);
|
||||
}
|
||||
}
|
||||
export const showLoading = async (options = {}) => {
|
||||
const { title } = options;
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.showLoading({
|
||||
title: title || '加载中',
|
||||
success: () => {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
export const hideLoading = async () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.hideLoading({
|
||||
success: () => {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const alertInfo = (message) => {
|
||||
return wx.showToast({
|
||||
title: message,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
export const alertSuccess = (message) => {
|
||||
return wx.showToast({
|
||||
title: message,
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
export const alertError = (message) => {
|
||||
return wx.showToast({
|
||||
title: message,
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
154
utils/request.js
Normal file
154
utils/request.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import { alertError, alertInfo, getGlobalData } from './index.js';
|
||||
|
||||
// 普通函数 -> Promise函数
|
||||
const promisify = (api) => {
|
||||
return (options, ...params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 获取全局变量
|
||||
const globalData = getGlobalData();
|
||||
const { api } = globalData;
|
||||
const RAW_SERVER = api;
|
||||
const SERVER = api;
|
||||
const ok = 200;
|
||||
|
||||
const requestWithoutCookie = promisify(wx.request);
|
||||
|
||||
// 考虑了Cookie的请求
|
||||
const request = async function (options) {
|
||||
let token = wx.getStorageSync('token');
|
||||
options.header = {
|
||||
Accept: 'application/json',
|
||||
'content-type': 'application/json; charset=utf-8',
|
||||
"authorization": token
|
||||
};
|
||||
let response;
|
||||
try {
|
||||
response = await requestWithoutCookie(options);
|
||||
// 服务器没有返回200直接报错
|
||||
if (!response || response.statusCode !== 200) {
|
||||
alertError(response?.data?.message || "发生错误，请稍后重试")
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理cookie
|
||||
const setCookie = response.header['set-cookie'] || response.header['Set-Cookie'];
|
||||
if (setCookie) {
|
||||
const cookieMap = {};
|
||||
|
||||
if (localCookieString) {
|
||||
const localCookies = localCookieString.split('; ');
|
||||
|
||||
for (const localCookie of localCookies) {
|
||||
const matchResult = localCookie.match(/^([^=]+)=(.+)/);
|
||||
cookieMap[matchResult[1]] = matchResult[2];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const matchResultSet = setCookie.match(/^([^=]+)=([^;]+);/);
|
||||
cookieMap[matchResultSet[1]] = matchResultSet[2];
|
||||
|
||||
const cookies = [];
|
||||
for (const name in cookieMap) {
|
||||
if (!{}.hasOwnProperty.call(cookieMap, name)) {
|
||||
continue;
|
||||
}
|
||||
const value = cookieMap[name];
|
||||
cookies.push(`${name}=${value}`);
|
||||
}
|
||||
|
||||
await setStorage({
|
||||
key: 'cookies',
|
||||
data: cookies.join('; ')
|
||||
});
|
||||
}
|
||||
} catch(err) {
|
||||
alertInfo(err.errMsg)
|
||||
}
|
||||
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
// 处理返回结果，默认直接返回数据
|
||||
const parseResponse = function (response) {
|
||||
if (!response) {
|
||||
alertError("服务异常")
|
||||
return
|
||||
}
|
||||
const { code: statusCode } = response.data;
|
||||
if (statusCode === 401) {
|
||||
wx.redirectTo({
|
||||
url: '/pages/login/index',
|
||||
})
|
||||
return { code: 1, message: '未登录状态' }
|
||||
}
|
||||
if (statusCode === 404) {
|
||||
return { code: 1, message: "服务故障" }
|
||||
}
|
||||
if (500 <= statusCode < 600) {
|
||||
return { code: 1, message: "服务错误" }
|
||||
}
|
||||
|
||||
if (response.data.code !== 0) {
|
||||
|
||||
}
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// GET请求
|
||||
const GET = async function (uri) {
|
||||
const response = await request({
|
||||
url: `${SERVER}${uri}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
return parseResponse(response);
|
||||
};
|
||||
|
||||
// 创建、更新和删除请求
|
||||
const CUD = async function (method, uri, data = null) {
|
||||
|
||||
// 没有CSRF Token就前往获取
|
||||
|
||||
// 请求参数
|
||||
const options = {
|
||||
url: `${SERVER}${uri}`,
|
||||
method,
|
||||
};
|
||||
if (data) {
|
||||
options.data = data;
|
||||
}
|
||||
const response = await request(options);
|
||||
return parseResponse(response);
|
||||
};
|
||||
|
||||
// 创建请求
|
||||
const POST = async function (uri, data) {
|
||||
return await CUD('POST', uri, data);
|
||||
}
|
||||
|
||||
// 修改请求
|
||||
const PUT = async function (uri, data) {
|
||||
return await CUD('PUT', uri, data);
|
||||
}
|
||||
|
||||
// 删除请求
|
||||
const DELETE = async function (uri, data) {
|
||||
return await CUD('DELETE', uri, data);
|
||||
}
|
||||
|
||||
export default {
|
||||
GET,
|
||||
POST,
|
||||
PUT,
|
||||
DELETE,
|
||||
SERVER,
|
||||
RAW_SERVER,
|
||||
api
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user