封装请求的方法，完成简易的问题解答页面

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/index/index"
-    "pages/meterList/index",
-    "pages/questions/index"
   ],
   "tabBar": {
     "list": [

components/navigator/index.wxml

@@ -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>

components/navigator/index.wxss

@@ -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;
+}

pages/login/index.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    input: ""
   },
 
   /**

pages/login/index.wxml

@@ -1,4 +1,5 @@
 <!--pages/login/index.wxml-->
 <view class="content">
-
+  <input model:value="{{input}}" />
+  {{input}}1
 </view>

pages/meterList/index.js

@@ -5,7 +5,13 @@ Page({
    * 页面的初始数据
    */
   data: {
+    codes: [
+      { code: "2331242324", money: 510 },
+      { code: "4234234134", money: 10 },
+      { code: "2354245345", money: 50 },
+      { code: "5365457642", money: 150 },
 
+    ]
   },
 
   /**

pages/meterList/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "navigator": "/components/navigator/index",
+    "scrollPageWrapper": "/components/scrollPageWrapper/index"
+  }
 }

pages/meterList/index.wxml

@@ -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>

pages/meterList/index.wxss

@@ -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;
+}

pages/questions/index.js

@@ -5,7 +5,21 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    x: 0,
+    y: 0,
+    questions: [{
+      question: "一、什么时候可以开发票？",
+      answer: "跟之前一样，每个季度一开"
+    },{
+      question: "二、一个季度开实际缴费数是吗？",
+      answer: "开实际消耗的电费数，未消耗的电费不能开。"
+    },{
+      question: "三、是否可以打钱分开充值电表？",
+      answer: "可以"
+    },{
+      question: "四、现在是多少钱一度电？",
+      answer: "每个月的电价在次月供电局发票开出来后测算。"
+    }]
   },
 
   /**

pages/questions/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "navigator": "/components/navigator/index"
+    "navigator": "/components/navigator/index",
+    "scrollPageWrapper": "/components/scrollPageWrapper/index"
   }
 }

pages/questions/index.wxml

@@ -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>

pages/questions/index.wxss

@@ -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;
+}

utils/index.js

@@ -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'
+  })
+}

utils/request.js

@@ -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
+};