feat:充电站列表

src/App.vue

@@ -23,6 +23,10 @@ export default <any>{
 
 view {
   box-sizing: border-box;
+  --color-primary: #347DFF;
+  --color-warning: #FF9900;
+  --color-gray: #666666;
+  --color-sec: #F7F7F7;
 }
 
 image {

src/App.wxs

@@ -1,7 +1,11 @@
-{/* <script module="utils" lang="wxs" src="./utils.wxs"></script> */}
-
-module.exports.formatPrice = formatPrice
+{
+  /* <script module="utils" lang="wxs" src="./utils.wxs"></script> */
+}
 
 function formatPrice(price) {
-  return (price / 100).toFixed(2)
+  return (price / 100).toFixed(2);
 }
+
+module.exports = {
+  formatPrice: formatPrice
+};

src/api/charge.ts

@@ -1,310 +1,345 @@
-// import Http, { http } from '../utils/http'
-// import { host } from '../utils/constant'
-// const cHttp = new Http(host)
+import Http from "../utils/http";
+import { host } from "../utils/constant";
+const cHttp = new Http(host);
 
-// export function startCharge(sn: string) {
-//   return cHttp.get<{
-//     ConnectorID: string
-//     FailReason: number
-//     StartChargeSeq: string
-//     StartChargeSeqStat: number
-//     SuccStat: number
-//   }>(`/charge/startCharge?connector_id=${sn}`, {
-//     statusCodeHandle: false
-//   })
-// }
+export function startCharge(sn: string) {
+  return cHttp.get<{
+    ConnectorID: string;
+    FailReason: number;
+    StartChargeSeq: string;
+    StartChargeSeqStat: number;
+    SuccStat: number;
+  }>(`/charge/startCharge?connector_id=${sn}`, {
+    statusCodeHandle: false,
+  });
+}
 
-// export function fetchStationPriceDesc(ConnectorID: string, StationID?: string) {
-//   return cHttp.get(`/charge/businessPolicy?connector_id=${ConnectorID}`).then(res => {
-//     const nowHour = new Date().getHours()
-//     let currentPrice = 0
-//     let currentTime = '00:00～24:00'
-//     if (res && res.PolicyInfos && res.PolicyInfos.length) {
-//       res.PolicyInfos.forEach((item: any, index: number) => {
-//         const hour = item.StartTime.substring(0, 2)
-//         const min = item.StartTime.substring(2, 4)
-//         if (index >= res.PolicyInfos.length - 1) {
-//           // 最后一个
-//           item.StartTimeFormat = `${hour}:${min}~24:00`
-//           if (Number(hour) <= nowHour) {
-//             currentPrice = Number(Number(item.ElecPrice + item.SevicePrice).toFixed(2))
-//             currentTime = `${hour}:${min}~24:00`
-//           }
-//         } else {
-//           const nhour = res.PolicyInfos[index + 1].StartTime.substring(0, 2)
-//           const nmin = res.PolicyInfos[index + 1].StartTime.substring(2, 4)
-//           item.StartTimeFormat = `${hour}:${min}~${nhour}:${nmin}`
-//           if (nowHour >= Number(hour) && nowHour < Number(nhour)) {
-//             currentPrice = Number(Number(item.ElecPrice + item.SevicePrice).toFixed(2))
-//             currentTime = `${hour}:${min}~${nhour}:${nmin}`
-//           }
-//         }
-//       })
-//     }
-//     res.CurrentPrice = currentPrice
-//     res.CurrentTime = currentTime
-//     if (StationID) {
-//       res.StationID = StationID
-//     }
-//     return res
-//   })
-// }
+export function fetchStationPriceDesc(ConnectorID: string, StationID?: string) {
+  return cHttp
+    .get(`/charge/businessPolicy?connector_id=${ConnectorID}`)
+    .then((res) => {
+      const nowHour = new Date().getHours();
+      let currentPrice = 0;
+      let currentTime = "00:00～24:00";
+      if (res && res.PolicyInfos && res.PolicyInfos.length) {
+        res.PolicyInfos.forEach((item: any, index: number) => {
+          const hour = item.StartTime.substring(0, 2);
+          const min = item.StartTime.substring(2, 4);
+          if (index >= res.PolicyInfos.length - 1) {
+            // 最后一个
+            item.StartTimeFormat = `${hour}:${min}~24:00`;
+            if (Number(hour) <= nowHour) {
+              currentPrice = Number(
+                Number(item.ElecPrice + item.SevicePrice).toFixed(2)
+              );
+              currentTime = `${hour}:${min}~24:00`;
+            }
+          } else {
+            const nhour = res.PolicyInfos[index + 1].StartTime.substring(0, 2);
+            const nmin = res.PolicyInfos[index + 1].StartTime.substring(2, 4);
+            item.StartTimeFormat = `${hour}:${min}~${nhour}:${nmin}`;
+            if (nowHour >= Number(hour) && nowHour < Number(nhour)) {
+              currentPrice = Number(
+                Number(item.ElecPrice + item.SevicePrice).toFixed(2)
+              );
+              currentTime = `${hour}:${min}~${nhour}:${nmin}`;
+            }
+          }
+        });
+      }
+      res.CurrentPrice = currentPrice;
+      res.CurrentTime = currentTime;
+      if (StationID) {
+        res.StationID = StationID;
+      }
+      return res;
+    });
+}
 
-// export function cancelCharge(sn: string) {
-//   return cHttp.get(`/charge/stopCharge?connector_id=${sn}`, {
-//     statusCodeHandle: false
-//   })
-// }
+export function cancelCharge(sn: string) {
+  return cHttp.get(`/charge/stopCharge?connector_id=${sn}`, {
+    statusCodeHandle: false,
+  });
+}
 
-// export function fetchChargeStatus() {
-//   return cHttp.get('/charge/chargeStatus', {
-//     statusCodeHandle: false
-//   })
-// }
+export function fetchChargeStatus() {
+  return cHttp.get("/charge/chargeStatus", {
+    statusCodeHandle: false,
+  });
+}
 
-// export function fetchStations(
-//   page: number,
-//   pageSize: number,
-//   latitude?: number,
-//   longitude?: number,
-//   baseLatitude?: number,
-//   baseLongitude?: number,
-//   options?: {
-//     distance?: number
-//     status?: number
-//   }
-// ): Promise<ChongDian.Entity.Station[]> {
-//   return fetchAllStations()
-//     .then(res => {
-//       // console.log(latitude, longitude);
-//       let list = JSON.parse(JSON.stringify(res))
-//       const data: ChongDian.Entity.Station[] = []
-//       const start = (page - 1) * pageSize
-//       const end = start + pageSize
-//       if (latitude && longitude) {
-//         list.forEach((item: ChongDian.Entity.Station) => {
-//           item.StationLatDistance = _getDistance(latitude, longitude, item.StationLat, item.StationLng)
-//         })
-//         list.sort((item1: ChongDian.Entity.Station, item2: ChongDian.Entity.Station) => {
-//           return item1.StationLatDistance - item2.StationLatDistance
-//         })
-//       }
-//       if (options) {
-//         if (options.distance) {
-//           list = list.filter((item: ChongDian.Entity.Station) => item.StationLatDistance <= (options.distance || 20))
-//         }
-//       }
-//       list.forEach((item: ChongDian.Entity.Station, index: number) => {
-//         if (index >= start && index < end) {
-//           data.push(item)
-//         }
-//       })
-//       if (baseLatitude && baseLongitude) {
-//         data.forEach((item: ChongDian.Entity.Station) => {
-//           item.StationLatDistance = _getDistance(baseLatitude, baseLongitude, item.StationLat, item.StationLng)
-//         })
-//       }
-//       return _fetchStationStatus(data)
-//     })
-//     .then(list => {
-//       if (options && options.status) {
-//         let res = false
-//         list = list.filter((item: ChongDian.Entity.Station) => {
-//           res = false
-//           item.EquipmentInfos.forEach((eqInfo: any) => {
-//             eqInfo.ConnectorInfos.forEach((coInfo: any) => {
-//               if (
-//                 !res &&
-//                 options.status === 1 &&
-//                 coInfo.ConnectorStatusInfo &&
-//                 coInfo.ConnectorStatusInfo.Status === 1
-//               ) {
-//                 res = true
-//               }
-//               if (
-//                 !res &&
-//                 options.status === 2 &&
-//                 coInfo.ConnectorStatusInfo &&
-//                 coInfo.ConnectorStatusInfo.Status !== 1
-//               ) {
-//                 res = true
-//               }
-//             })
-//           })
-//           return res
-//         })
-//       }
-//       return list
-//     })
-// }
+export function fetchStations(
+  page: number,
+  pageSize: number,
+  latitude?: number,
+  longitude?: number,
+  baseLatitude?: number,
+  baseLongitude?: number,
+  options?: {
+    distance?: number;
+    status?: number;
+  }
+): Promise<any[]> {
+  return fetchAllStations()
+    .then((res) => {
+      // console.log(latitude, longitude);
+      let list = JSON.parse(JSON.stringify(res));
+      const data: any[] = [];
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+      if (latitude && longitude) {
+        list.forEach((item: any) => {
+          item.StationLatDistance = _getDistance(
+            latitude,
+            longitude,
+            item.StationLat,
+            item.StationLng
+          );
+        });
+        list.sort((item1: any, item2: any) => {
+          return item1.StationLatDistance - item2.StationLatDistance;
+        });
+      }
+      if (options) {
+        if (options.distance) {
+          list = list.filter(
+            (item: any) => item.StationLatDistance <= (options.distance || 20)
+          );
+        }
+      }
+      list.forEach((item: any, index: number) => {
+        if (index >= start && index < end) {
+          data.push(item);
+        }
+      });
+      if (baseLatitude && baseLongitude) {
+        data.forEach((item: any) => {
+          item.StationLatDistance = _getDistance(
+            baseLatitude,
+            baseLongitude,
+            item.StationLat,
+            item.StationLng
+          );
+        });
+      }
+      return _fetchStationStatus(data);
+    })
+    .then((list) => {
+      if (options && options.status) {
+        let res = false;
+        list = list.filter((item: any) => {
+          res = false;
+          item.EquipmentInfos.forEach((eqInfo: any) => {
+            eqInfo.ConnectorInfos.forEach((coInfo: any) => {
+              if (
+                !res &&
+                options.status === 1 &&
+                coInfo.ConnectorStatusInfo &&
+                coInfo.ConnectorStatusInfo.Status === 1
+              ) {
+                res = true;
+              }
+              if (
+                !res &&
+                options.status === 2 &&
+                coInfo.ConnectorStatusInfo &&
+                coInfo.ConnectorStatusInfo.Status !== 1
+              ) {
+                res = true;
+              }
+            });
+          });
+          return res;
+        });
+      }
+      return list;
+    });
+}
 
-// export function fetchStation(id: number) {
-//   return fetchAllStations()
-//     .then(res => {
-//       const findIndex = res.findIndex(item => Number(item.StationID) === id)
-//       if (findIndex < 0) {
-//         throw {
-//           errMsg: 'not found'
-//         }
-//       }
-//       return _fetchStationStatus([res[findIndex]])
-//     })
-//     .then(list => {
-//       return list[0]
-//     })
-// }
+export function fetchStation(id: number) {
+  return fetchAllStations()
+    .then((res) => {
+      const findIndex = res.findIndex((item) => Number(item.StationID) === id);
+      if (findIndex < 0) {
+        throw {
+          errMsg: "not found",
+        };
+      }
+      return _fetchStationStatus([res[findIndex]]);
+    })
+    .then((list) => {
+      return list[0];
+    });
+}
 
-// export function fetchStationByIds(ids: number[]) {
-//   return fetchAllStations().then(res => {
-//     const list = res.filter(item => ids.includes(Number(item.StationID)))
-//     return _fetchStationStatus(list)
-//   })
-// }
+export function fetchStationByIds(ids: number[]) {
+  return fetchAllStations().then((res) => {
+    const list = res.filter((item) => ids.includes(Number(item.StationID)));
+    return _fetchStationStatus(list);
+  });
+}
 
-// export function searchStation(keyword: string) {
-//   return fetchAllStations().then(res => {
-//     const reg = new RegExp(keyword, 'ig')
-//     const list = res.filter(item => reg.test(item.StationName) || reg.test(item.Address))
-//     return _fetchStationStatus(list)
-//   })
-// }
+export function searchStation(keyword: string) {
+  return fetchAllStations().then((res) => {
+    const reg = new RegExp(keyword, "ig");
+    const list = res.filter(
+      (item) => reg.test(item.StationName) || reg.test(item.Address)
+    );
+    return _fetchStationStatus(list);
+  });
+}
 
-// export function fetchAllStations(): Promise<ChongDian.Entity.Station[]> {
-//   if (getApp<ChongDian.App>().globalData.stations.length > 0) {
-//     return Promise.resolve(getApp<ChongDian.App>().globalData.stations)
-//   }
-//   const page = 1
-//   const page_size = 99
-//   return new Promise((resolve, reject) => {
-//     _fetchAllStations(page, page_size, [])
-//       .then(list => {
-//         // if (!isProduction) {
-//         //   list.push({
-//         //     ...list[0],
-//         //     StationName: '这是模拟数据，不要使用充电',
-//         //     Address: '这是模拟数据，测试一下附近的点',
-//         //     StationLat: 22.540545,
-//         //     StationLng: 113.942695,
-//         //     StationID: '0000'
-//         //   })
-//         // }
-//         getApp<ChongDian.App>().globalData.stations = list
-//         resolve(list)
-//       })
-//       .catch(reject)
-//   })
-// }
+export function fetchAllStations(): Promise<any[]> {
+  if (getApp().globalData.stations.length > 0) {
+    return Promise.resolve(getApp().globalData.stations);
+  }
+  const page = 1;
+  const page_size = 99;
+  return new Promise((resolve, reject) => {
+    _fetchAllStations(page, page_size, [])
+      .then((list) => {
+        // if (!isProduction) {
+        //   list.push({
+        //     ...list[0],
+        //     StationName: '这是模拟数据，不要使用充电',
+        //     Address: '这是模拟数据，测试一下附近的点',
+        //     StationLat: 22.540545,
+        //     StationLng: 113.942695,
+        //     StationID: '0000'
+        //   })
+        // }
+        getApp().globalData.stations = list;
+        resolve(list);
+      })
+      .catch(reject);
+  });
+}
 
-// function _fetchAllStations(
-//   page: number,
-//   pageSize: number,
-//   list: ChongDian.Entity.Station[]
-// ): Promise<ChongDian.Entity.Station[]> {
-//   return _fetchStations(page, pageSize).then(res => {
-//     list = list.concat(res)
-//     if (res.length >= pageSize) {
-//       return _fetchAllStations(page + 1, pageSize, list)
-//     } else {
-//       // eslint-disable-next-line promise/no-return-wrap
-//       return Promise.resolve(list)
-//     }
-//   })
-// }
+function _fetchAllStations(
+  page: number,
+  pageSize: number,
+  list: any[]
+): Promise<any[]> {
+  return _fetchStations(page, pageSize).then((res) => {
+    list = list.concat(res);
+    if (res.length >= pageSize) {
+      return _fetchAllStations(page + 1, pageSize, list);
+    } else {
+      // eslint-disable-next-line promise/no-return-wrap
+      return Promise.resolve(list);
+    }
+  });
+}
 
-// function _fetchStations(page: number, pageSize: number) {
-//   return cHttp
-//     .get<{
-//       StationInfos: ChongDian.Entity.Station[]
-//     }>(`/charge/stationList?page_no=${page}&page_size=${pageSize}`)
-//     .then(res => {
-//       res.StationInfos &&
-//         res.StationInfos.forEach(item => {
-//           item.fastEquipmentInfos = []
-//           item.slowEquipmentInfos = []
-//           item.TotalFee = Number(
-//             Number(Number(item.ElectricityFee) + Number(item.ParkFee) + Number(item.ServiceFee)).toFixed(2)
-//           )
-//         })
+function _fetchStations(page: number, pageSize: number) {
+  return cHttp
+    .get<{
+      StationInfos: any[];
+    }>(`/charge/stationList?page_no=${page}&page_size=${pageSize}`)
+    .then((res) => {
+      res.StationInfos &&
+        res.StationInfos.forEach((item) => {
+          item.fastEquipmentInfos = [];
+          item.slowEquipmentInfos = [];
+          item.TotalFee = Number(
+            Number(
+              Number(item.ElectricityFee) +
+                Number(item.ParkFee) +
+                Number(item.ServiceFee)
+            ).toFixed(2)
+          );
+        });
 
-//       return (res.StationInfos || []).filter((item: any) => {
-//         return !['1657'].includes(item.StationID)
-//       })
-//     })
-// }
+      return (res.StationInfos || []).filter((item: any) => {
+        return !["1657"].includes(item.StationID);
+      });
+    });
+}
 
-// function _getDistance(lat1: number, lng1: number, lat2: number, lng2: number) {
-//   var radLat1 = (lat1 * Math.PI) / 180.0
-//   var radLat2 = (lat2 * Math.PI) / 180.0
-//   var a = radLat1 - radLat2
-//   var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
-//   var s =
-//     2 *
-//     Math.asin(
-//       Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
-//     )
-//   s = s * 6378.137 // EARTH_RADIUS;
-//   s = Math.round(s * 10000) / 10000
-//   return s
-// }
+function _getDistance(lat1: number, lng1: number, lat2: number, lng2: number) {
+  var radLat1 = (lat1 * Math.PI) / 180.0;
+  var radLat2 = (lat2 * Math.PI) / 180.0;
+  var a = radLat1 - radLat2;
+  var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
+  var s =
+    2 *
+    Math.asin(
+      Math.sqrt(
+        Math.pow(Math.sin(a / 2), 2) +
+          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
+      )
+    );
+  s = s * 6378.137; // EARTH_RADIUS;
+  s = Math.round(s * 10000) / 10000;
+  return s;
+}
 
-// function _fetchStationStatus(list: ChongDian.Entity.Station[]) {
-//   if (list.length <= 0) {
-//     return Promise.resolve([])
-//   }
-//   let _list: ChongDian.Entity.Station[] = []
-//   return cHttp
-//     .get(`/charge/stationStatus?station_ids=${list.filter(item => item.StationID !== '0000').map(item => item.StationID).join(',')}`)
-//     .then(res => {
-//       const StationStatusInfos = res.StationStatusInfos || []
-//       const ConnectorIDs: string[] = []
-//       const StationIDs: string[] = []
-//       list.forEach((item: ChongDian.Entity.Station) => {
-//         item.fastEquipmentInfos = []
-//         item.slowEquipmentInfos = []
-//         const StationStatusInfo = StationStatusInfos.find((status: any) => status.StationID === Number(item.StationID))
-//         let ConnectorID = ''
-//         item.EquipmentInfos.forEach((eqInfo: any) => {
-//           eqInfo.ConnectorInfos.forEach((coInfo: any) => {
-//             if (StationStatusInfo) {
-//               const ConnectorStatusInfo = StationStatusInfo.ConnectorStatusInfos.find(
-//                 (costatus: any) => costatus.ConnectorID === coInfo.ConnectorID
-//               )
-//               if (ConnectorStatusInfo) {
-//                 coInfo.ConnectorStatusInfo = ConnectorStatusInfo
-//               }
-//             }
-//             if (!ConnectorID) {
-//               ConnectorID = coInfo.ConnectorID
-//             }
-//           })
-//           if ([1].includes(Number(eqInfo.EquipmentType))) {
-//             item.fastEquipmentInfos.push(eqInfo)
-//           } else {
-//             item.slowEquipmentInfos.push(eqInfo)
-//           }
-//         })
-//         if (ConnectorID) {
-//           ConnectorIDs.push(ConnectorID)
-//           StationIDs.push(item.StationID)
-//         }
-//       })
-//       _list = list
-//       return Promise.all(
-//         ConnectorIDs.map((cid, cindex) => {
-//           return fetchStationPriceDesc(cid, StationIDs[cindex])
-//         })
-//       )
-//     })
-//     .then(res => {
-//       // console.log('我要看的数据', res)
-//       if (res && res.length) {
-//         _list.forEach(item => {
-//           const i = res.findIndex(r => r.StationID === item.StationID)
-//           if (i >= 0) {
-//             item.TotalFee = res[i].CurrentPrice
-//           }
-//         })
-//       }
-//       return _list
-//     })
-// }
+function _fetchStationStatus(list: any[]) {
+  if (list.length <= 0) {
+    return Promise.resolve([]);
+  }
+  let _list: any[] = [];
+  return cHttp
+    .get(
+      `/charge/stationStatus?station_ids=${list
+        .filter((item) => item.StationID !== "0000")
+        .map((item) => item.StationID)
+        .join(",")}`
+    )
+    .then((res) => {
+      const StationStatusInfos = res.StationStatusInfos || [];
+      const ConnectorIDs: string[] = [];
+      const StationIDs: string[] = [];
+      list.forEach((item: any) => {
+        item.fastEquipmentInfos = [];
+        item.slowEquipmentInfos = [];
+        const StationStatusInfo = StationStatusInfos.find(
+          (status: any) => status.StationID === Number(item.StationID)
+        );
+        let ConnectorID = "";
+        item.EquipmentInfos.forEach((eqInfo: any) => {
+          eqInfo.ConnectorInfos.forEach((coInfo: any) => {
+            if (StationStatusInfo) {
+              const ConnectorStatusInfo =
+                StationStatusInfo.ConnectorStatusInfos.find(
+                  (costatus: any) => costatus.ConnectorID === coInfo.ConnectorID
+                );
+              if (ConnectorStatusInfo) {
+                coInfo.ConnectorStatusInfo = ConnectorStatusInfo;
+              }
+            }
+            if (!ConnectorID) {
+              ConnectorID = coInfo.ConnectorID;
+            }
+          });
+          if ([1].includes(Number(eqInfo.EquipmentType))) {
+            item.fastEquipmentInfos.push(eqInfo);
+          } else {
+            item.slowEquipmentInfos.push(eqInfo);
+          }
+        });
+        if (ConnectorID) {
+          ConnectorIDs.push(ConnectorID);
+          StationIDs.push(item.StationID);
+        }
+      });
+      _list = list;
+      return Promise.all(
+        ConnectorIDs.map((cid, cindex) => {
+          return fetchStationPriceDesc(cid, StationIDs[cindex]);
+        })
+      );
+    })
+    .then((res) => {
+      // console.log('我要看的数据', res)
+      if (res && res.length) {
+        _list.forEach((item) => {
+          const i = res.findIndex((r) => r.StationID === item.StationID);
+          if (i >= 0) {
+            item.TotalFee = res[i].CurrentPrice;
+          }
+        });
+      }
+      return _list;
+    });
+}

src/api/user.ts

@@ -1,105 +1,122 @@
-// import Http from '../utils/http'
-// import { host } from '../utils/constant'
+import Http from "../utils/http";
+import { host } from "../utils/constant";
 
-// const userHttp = new Http(host)
+const userHttp = new Http(host);
 
-// export function fetchProfile() {
-//   return userHttp.get<ChongDian.Entity.User>('/user/me').then(res => {
-//     getApp<ChongDian.App>().globalData.user = res
-//     return res
-//   })
-// }
+export function fetchProfile() {
+  return userHttp.get("/user/me").then((res) => {
+    getApp().globalData.user = res;
+    return res;
+  });
+}
 
-// export function fetchCollectList() {
-//   if (getApp<ChongDian.App>().globalData.collectIds) {
-//     return Promise.resolve(getApp<ChongDian.App>().globalData.collectIds)
-//   }
-//   return userHttp.get<{
-//     data: {
-//       status: number
-//       station_id: number
-//     }[]
-//   }>('/user/collectList?page=1&page_size=999').then(res => {
-//     getApp<ChongDian.App>().globalData.collectIds = res.data ? res.data.filter(item => Number(item.status) === 1).map(item => {
-//       return Number(item.station_id)
-//     }) : []
-//     return getApp<ChongDian.App>().globalData.collectIds
-//   })
-// }
+export function fetchCollectList() {
+  if (getApp().globalData.collectIds) {
+    return Promise.resolve(getApp().globalData.collectIds);
+  }
+  return userHttp
+    .get<{
+      data: {
+        status: number;
+        station_id: number;
+      }[];
+    }>("/user/collectList?page=1&page_size=999")
+    .then((res) => {
+      getApp().globalData.collectIds = res.data
+        ? res.data
+            .filter((item) => Number(item.status) === 1)
+            .map((item) => {
+              return Number(item.station_id);
+            })
+        : [];
+      return getApp().globalData.collectIds;
+    });
+}
 
-// export function addCollectList(sid: number) {
-//   let ids = getApp<ChongDian.App>().globalData.collectIds ? getApp<ChongDian.App>().globalData.collectIds as number[] : []
-//   const status = ids.includes(sid) ? 2 : 1
-//   return userHttp.post('/user/addCollect', {
-//     data: {
-//       station_id: sid,
-//       status
-//     }
-//   }).then(() => {
-//     if (status === 1) {
-//       ids.push(sid)
-//     } else {
-//       ids = ids.filter(id => id !== sid)
-//     }
-//     getApp<ChongDian.App>().globalData.collectIds = ids
-//     return status === 1
-//   })
-// }
+export function addCollectList(sid: number) {
+  let ids = getApp().globalData.collectIds
+    ? (getApp().globalData.collectIds as number[])
+    : [];
+  const status = ids.includes(sid) ? 2 : 1;
+  return userHttp
+    .post("/user/addCollect", {
+      data: {
+        station_id: sid,
+        status,
+      },
+    })
+    .then(() => {
+      if (status === 1) {
+        ids.push(sid);
+      } else {
+        ids = ids.filter((id) => id !== sid);
+      }
+      getApp().globalData.collectIds = ids;
+      return status === 1;
+    });
+}
 
-// export function updateProfile(data: {
-//   nick_name?: string
-//   avatar?: string
-//   vin?: string
-//   license_plate?: string
-//   card_no?: string
-// }) {
-//   return userHttp.post('/user/update', {
-//     data
-//   })
-// }
+export function updateProfile(data: {
+  nick_name?: string;
+  avatar?: string;
+  vin?: string;
+  license_plate?: string;
+  card_no?: string;
+}) {
+  return userHttp.post("/user/update", {
+    data,
+  });
+}
 
-// export function insertMoney(amount: number) {
-//   return userHttp.post<{
-//     appId: string
-//     nonceStr: string
-//     package: string
-//     paySign: string
-//     signType: string
-//     timestamp: string
-//   }>('/payment/pay', {
-//     data: {
-//       amount: parseInt(`${amount * 100}`),
-//       openid: getApp<ChongDian.App>().globalData.user?.openid
-//     }
-//   }).then(res => {
-//     return new Promise((resolve, reject) => {
-//       wx.requestPayment({
-//         timeStamp: res.timestamp,
-//         nonceStr: res.nonceStr,
-//         package: res.package,
-//         signType: 'MD5',
-//         paySign: res.paySign,
-//         success(res) {
-//           resolve(res)
-//         },
-//         fail: reject
-//       })
-//     })
-//   })
-// }
+export function insertMoney(amount: number) {
+  return userHttp
+    .post<{
+      appId: string;
+      nonceStr: string;
+      package: string;
+      paySign: string;
+      signType: string;
+      timestamp: string;
+    }>("/payment/pay", {
+      data: {
+        amount: parseInt(`${amount * 100}`),
+        openid: getApp().globalData.user?.openid,
+      },
+    })
+    .then((res: any) => {
+      return new Promise((resolve, reject) => {
+        uni.requestPayment({
+          provider: "wxpay",
+          orderInfo: {
+            timeStamp: res.timestamp,
+            nonceStr: res.nonceStr,
+            package: res.package,
+            signType: "MD5",
+            paySign: res.paySign,
+          },
+          success(res: any) {
+            resolve(res);
+          },
+          fail: reject,
+        });
+      });
+    });
+}
 
-// export function logout() {
-//   return userHttp.get('/user/logout')
-// }
+export function logout() {
+  return userHttp.get("/user/logout");
+}
 
-// export function fetchWallet(type: number, page: number, pageSize: number) {
-//   return userHttp.get<{
-//     data: ChongDian.Entity.Wallet[]
-//   }>(`/account/wallet?page=${page}&page_size=${pageSize}&type=${type}`).then(res => {
-//     return res.data
-//   })
-// }
+export function fetchWallet(type: number, page: number, pageSize: number) {
+  return userHttp
+    .get<{
+      data: any[];
+    }>(`/account/wallet?page=${page}&page_size=${pageSize}&type=${type}`)
+    .then((res) => {
+      return res.data;
+    });
+}
 
-// export function fetchOrder(orderid: string) {
-//   return userHttp.get(`/charge/orderInfo?order_id=${orderid}`)
-// }
+export function fetchOrder(orderid: string) {
+  return userHttp.get(`/charge/orderInfo?order_id=${orderid}`);
+}

src/components/charge-icon/charge-icon.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="charge-icon" :class="[`charge-icon-${type}`]">
+    {{ type ? label[type] : "" }}
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    type: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      label: {
+        fast: "快",
+        slow: "慢",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.charge-icon {
+  height: 32rpx;
+  width: 32rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  font-size: 20rpx;
+  color: #fff;
+}
+
+.charge-icon-fast {
+  background: linear-gradient(154.59deg, #ffe767 11.86%, #f2751a 87.4%);
+}
+
+.charge-icon-slow {
+  background: linear-gradient(154.59deg, #5ff19a 11.86%, #1aa4f2 87.4%);
+}
+</style>

src/components/charge-station/charge-station.vue

@@ -0,0 +1,248 @@
+<template>
+  <view
+    class="charge-station"
+    :style="{
+      border: border ? '1rpx solid rgba(0, 0, 0, 0.1)' : 'none',
+      'border-radius': fromMap ? '20rpx 20rpx 0 0' : '20rpx',
+    }"
+    @click="detail"
+  >
+    <view class="flex-between">
+      <view>
+        <view class="fs-32 fw-blod">{{ title }}</view>
+        <view v-if="tag">
+          <view class="flex-center tag">{{ tagMap[tag] }}</view>
+        </view>
+        <view v-else class="fs-22" style="color: rgba(0, 0, 0, 0.5)"
+          >{{ address }} | {{ distance }}km</view
+        >
+      </view>
+      <view class="nav flex-center flex-shrink" @click.stop="nav">
+        <image src="/static/images/icon-nav.png" mode="widthFix" />
+        <text>导航</text>
+      </view>
+    </view>
+    <view class="mt-20 flex">
+      <view class="status flex-column flex-grow">
+        <view class="flex-align-center" v-if="price">
+          <text class="fs-32 fw-600" style="color: var(--color-warning)">{{
+            price
+          }}</text>
+          <text class="fs-22 ml-6" style="color: var(--color-gray)">元/度</text>
+        </view>
+        <view class="flex-align-center lh-0 mt-auto" v-if="!fromMap">
+          <charge-icon type="fast"></charge-icon>
+          <view class="fs-22 ml-8" style="color: var(--color-gray)"
+            >空闲:{{ statuswxs.freeLength(fast) }}｜共:{{ fast.length }}</view
+          >
+          <view class="ml-60">
+            <charge-icon type="slow"></charge-icon>
+          </view>
+          <view class="fs-22 ml-8" style="color: var(--color-gray)"
+            >空闲:{{ statuswxs.freeLength(slow) }}｜共:{{ slow.length }}</view
+          >
+        </view>
+        <block v-else>
+          <view class="lh-0 mt-18 fs-22" style="color: #999"
+            >以场地方公告为准！</view
+          >
+          <view
+            class="top-right-bound flex-align-center lh-32"
+            v-if="slow.length"
+          >
+            <charge-icon type="slow"></charge-icon>
+            <view class="ml-6 fs-22" style="color: var(--color-gray)"
+              >{{ statuswxs.freeLength(slow) }} / {{ slow.length }}</view
+            >
+          </view>
+          <view
+            class="top-right-bound flex-align-center lh-32"
+            v-if="fast.length"
+          >
+            <charge-icon type="fast"></charge-icon>
+            <view class="ml-6 fs-22" style="color: var(--color-gray)"
+              >{{ statuswxs.freeLength(fast) }} / {{ fast.length }}</view
+            >
+          </view>
+        </block>
+      </view>
+      <view
+        class="btn flex-shrink flex-column flex-center"
+        @click.stop="collect"
+      >
+        <uni-icons
+          :type="collected ? 'star-filled' : 'star'"
+          size="20"
+          :color="collected ? 'var(--color-warning)' : '#999999'"
+        ></uni-icons>
+        <view
+          class="fs-22 mt-6"
+          :style="{
+            color: collected ? 'var(--color-warning)' : '#999999',
+          }"
+          >收藏</view
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { fetchCollectList, addCollectList } from "../../api/user";
+export default {
+  props: {
+    sId: {
+      type: String,
+    },
+    title: String,
+    address: String,
+    tag: Number,
+    price: String,
+    fast: Array,
+    slow: Array,
+    latitude: Number,
+    longitude: Number,
+    distance: String,
+    border: Boolean,
+    fromMap: Boolean,
+  },
+  watch: {
+    sId: {
+      handler: function (newV) {
+        if (newV) {
+          fetchCollectList().then((res) => {
+            this.collected = res ? res.includes(Number(newV)) : false;
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      collected: false,
+      tagMap: [
+        "",
+        "居民区",
+        "公共机构",
+        "企事业单位",
+        "写字楼",
+        "工业园区",
+        "交通枢纽",
+        "大型文体设施",
+        "城市绿地",
+        "大型建筑配建停车场",
+        "路边停车位",
+        "城际高速服务区",
+      ],
+    };
+  },
+  methods: {
+    detail() {
+      const { address, latitude, longitude } = this;
+      getApp().globalData.lastData.station = {
+        address,
+        latitude,
+        longitude,
+      };
+      uni.navigateTo({
+        url: `/pages-charge/machines/machines?title=${this.title}&id=${this.sId}`,
+      });
+    },
+    collect() {
+      addCollectList(Number(this.sId)).then((collected) => {
+        collected &&
+          uni.vibrateShort &&
+          uni.vibrateShort({
+            type: "light",
+          });
+        this.collected = collected;
+      });
+    },
+    nav() {
+      const { latitude, longitude, title, address } = this;
+      uni.openLocation({
+        latitude,
+        longitude,
+        scale: 18,
+        name: title,
+        address,
+      });
+    },
+  },
+};
+</script>
+<script module="statuswxs" lang="wxs">
+	module.exports = {
+  freeLength: function (infos) {
+    var length = 0
+    infos.forEach(function (item) {
+      item.ConnectorInfos.forEach(function (conItem) {
+        if (conItem.ConnectorStatusInfo && conItem.ConnectorStatusInfo.Status === 1) {
+          length += 1
+        }
+      })
+    })
+    return length
+  }
+}
+</script>
+
+<style lang="scss">
+.charge-station {
+  background: #ffffff;
+  width: 100%;
+  padding: 30rpx;
+
+  .tag {
+    display: inline-block;
+    box-sizing: content-box;
+    padding: 0px 6rpx;
+    height: 34rpx;
+    background: var(--color-sec);
+    border-radius: 4rpx;
+    color: #999999;
+    font-size: 22rpx;
+  }
+
+  .nav {
+    width: 120rpx;
+    height: 60rpx;
+    border-radius: 30rpx;
+    background-color: var(--color-primary);
+    color: #fff;
+    font-size: 26rpx;
+
+    image {
+      width: 24rpx;
+      margin-right: 8rpx;
+    }
+  }
+
+  .status {
+    background: var(--color-sec);
+    border-radius: 10rpx;
+    padding: 16rpx 20rpx;
+    position: relative;
+  }
+
+  .top-right-bound {
+    position: absolute;
+    top: 18rpx;
+    right: 26rpx;
+    padding: 4rpx 10rpx 4rpx 4rpx;
+    background: #ffffff;
+    border: 1rpx solid #44deba;
+    border-radius: 20rpx;
+  }
+
+  .btn {
+    height: 118rpx;
+    width: 64rpx;
+    margin-left: 10rpx;
+    background: var(--color-sec);
+    border-radius: 10rpx;
+    transition: all 0.3s;
+  }
+}
+</style>

src/components/demo/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <view class="list"> </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style></style>

src/components/uni-icons/icons.js

@@ -0,0 +1,1169 @@
+export default {
+  "id": "2852637",
+  "name": "uniui图标库",
+  "font_family": "uniicons",
+  "css_prefix_text": "uniui-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "25027049",
+      "name": "yanse",
+      "font_class": "color",
+      "unicode": "e6cf",
+      "unicode_decimal": 59087
+    },
+    {
+      "icon_id": "25027048",
+      "name": "wallet",
+      "font_class": "wallet",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "25015720",
+      "name": "settings-filled",
+      "font_class": "settings-filled",
+      "unicode": "e6ce",
+      "unicode_decimal": 59086
+    },
+    {
+      "icon_id": "25015434",
+      "name": "shimingrenzheng-filled",
+      "font_class": "auth-filled",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "24934246",
+      "name": "shop-filled",
+      "font_class": "shop-filled",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "24934159",
+      "name": "staff-filled-01",
+      "font_class": "staff-filled",
+      "unicode": "e6cb",
+      "unicode_decimal": 59083
+    },
+    {
+      "icon_id": "24932461",
+      "name": "VIP-filled",
+      "font_class": "vip-filled",
+      "unicode": "e6c6",
+      "unicode_decimal": 59078
+    },
+    {
+      "icon_id": "24932462",
+      "name": "plus_circle_fill",
+      "font_class": "plus-filled",
+      "unicode": "e6c7",
+      "unicode_decimal": 59079
+    },
+    {
+      "icon_id": "24932463",
+      "name": "folder_add-filled",
+      "font_class": "folder-add-filled",
+      "unicode": "e6c8",
+      "unicode_decimal": 59080
+    },
+    {
+      "icon_id": "24932464",
+      "name": "yanse-filled",
+      "font_class": "color-filled",
+      "unicode": "e6c9",
+      "unicode_decimal": 59081
+    },
+    {
+      "icon_id": "24932465",
+      "name": "tune-filled",
+      "font_class": "tune-filled",
+      "unicode": "e6ca",
+      "unicode_decimal": 59082
+    },
+    {
+      "icon_id": "24932455",
+      "name": "a-rilidaka-filled",
+      "font_class": "calendar-filled",
+      "unicode": "e6c0",
+      "unicode_decimal": 59072
+    },
+    {
+      "icon_id": "24932456",
+      "name": "notification-filled",
+      "font_class": "notification-filled",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
+    {
+      "icon_id": "24932457",
+      "name": "wallet-filled",
+      "font_class": "wallet-filled",
+      "unicode": "e6c2",
+      "unicode_decimal": 59074
+    },
+    {
+      "icon_id": "24932458",
+      "name": "paihangbang-filled",
+      "font_class": "medal-filled",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "24932459",
+      "name": "gift-filled",
+      "font_class": "gift-filled",
+      "unicode": "e6c4",
+      "unicode_decimal": 59076
+    },
+    {
+      "icon_id": "24932460",
+      "name": "fire-filled",
+      "font_class": "fire-filled",
+      "unicode": "e6c5",
+      "unicode_decimal": 59077
+    },
+    {
+      "icon_id": "24928001",
+      "name": "refreshempty",
+      "font_class": "refreshempty",
+      "unicode": "e6bf",
+      "unicode_decimal": 59071
+    },
+    {
+      "icon_id": "24926853",
+      "name": "location-ellipse",
+      "font_class": "location-filled",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "24926735",
+      "name": "person-filled",
+      "font_class": "person-filled",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "24926703",
+      "name": "personadd-filled",
+      "font_class": "personadd-filled",
+      "unicode": "e698",
+      "unicode_decimal": 59032
+    },
+    {
+      "icon_id": "24923351",
+      "name": "back",
+      "font_class": "back",
+      "unicode": "e6b9",
+      "unicode_decimal": 59065
+    },
+    {
+      "icon_id": "24923352",
+      "name": "forward",
+      "font_class": "forward",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "24923353",
+      "name": "arrowthinright",
+      "font_class": "arrow-right",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+		{
+		  "icon_id": "24923353",
+		  "name": "arrowthinright",
+		  "font_class": "arrowthinright",
+		  "unicode": "e6bb",
+		  "unicode_decimal": 59067
+		},
+    {
+      "icon_id": "24923354",
+      "name": "arrowthinleft",
+      "font_class": "arrow-left",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+		{
+		  "icon_id": "24923354",
+		  "name": "arrowthinleft",
+		  "font_class": "arrowthinleft",
+		  "unicode": "e6bc",
+		  "unicode_decimal": 59068
+		},
+    {
+      "icon_id": "24923355",
+      "name": "arrowthinup",
+      "font_class": "arrow-up",
+      "unicode": "e6bd",
+      "unicode_decimal": 59069
+    },
+		{
+		  "icon_id": "24923355",
+		  "name": "arrowthinup",
+		  "font_class": "arrowthinup",
+		  "unicode": "e6bd",
+		  "unicode_decimal": 59069
+		},
+    {
+      "icon_id": "24923356",
+      "name": "arrowthindown",
+      "font_class": "arrow-down",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },{
+      "icon_id": "24923356",
+      "name": "arrowthindown",
+      "font_class": "arrowthindown",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "24923349",
+      "name": "arrowdown",
+      "font_class": "bottom",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },{
+      "icon_id": "24923349",
+      "name": "arrowdown",
+      "font_class": "arrowdown",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },
+    {
+      "icon_id": "24923346",
+      "name": "arrowright",
+      "font_class": "right",
+      "unicode": "e6b5",
+      "unicode_decimal": 59061
+    },
+		{
+		  "icon_id": "24923346",
+		  "name": "arrowright",
+		  "font_class": "arrowright",
+		  "unicode": "e6b5",
+		  "unicode_decimal": 59061
+		},
+    {
+      "icon_id": "24923347",
+      "name": "arrowup",
+      "font_class": "top",
+      "unicode": "e6b6",
+      "unicode_decimal": 59062
+    },
+		{
+		  "icon_id": "24923347",
+		  "name": "arrowup",
+		  "font_class": "arrowup",
+		  "unicode": "e6b6",
+		  "unicode_decimal": 59062
+		},
+    {
+      "icon_id": "24923348",
+      "name": "arrowleft",
+      "font_class": "left",
+      "unicode": "e6b7",
+      "unicode_decimal": 59063
+    },
+		{
+		  "icon_id": "24923348",
+		  "name": "arrowleft",
+		  "font_class": "arrowleft",
+		  "unicode": "e6b7",
+		  "unicode_decimal": 59063
+		},
+    {
+      "icon_id": "24923334",
+      "name": "eye",
+      "font_class": "eye",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "24923335",
+      "name": "eye-filled",
+      "font_class": "eye-filled",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "24923336",
+      "name": "eye-slash",
+      "font_class": "eye-slash",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "24923337",
+      "name": "eye-slash-filled",
+      "font_class": "eye-slash-filled",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "24923305",
+      "name": "info-filled",
+      "font_class": "info-filled",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "24923299",
+      "name": "reload-01",
+      "font_class": "reload",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    },
+    {
+      "icon_id": "24923195",
+      "name": "mic_slash_fill",
+      "font_class": "micoff-filled",
+      "unicode": "e6b0",
+      "unicode_decimal": 59056
+    },
+    {
+      "icon_id": "24923165",
+      "name": "map-pin-ellipse",
+      "font_class": "map-pin-ellipse",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "24923166",
+      "name": "map-pin",
+      "font_class": "map-pin",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "24923167",
+      "name": "location",
+      "font_class": "location",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "24923064",
+      "name": "starhalf",
+      "font_class": "starhalf",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "24923065",
+      "name": "star",
+      "font_class": "star",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "24923066",
+      "name": "star-filled",
+      "font_class": "star-filled",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "24899646",
+      "name": "a-rilidaka",
+      "font_class": "calendar",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "24899647",
+      "name": "fire",
+      "font_class": "fire",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "24899648",
+      "name": "paihangbang",
+      "font_class": "medal",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "24899649",
+      "name": "font",
+      "font_class": "font",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "24899650",
+      "name": "gift",
+      "font_class": "gift",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "24899651",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "24899652",
+      "name": "notification",
+      "font_class": "notification",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "24899653",
+      "name": "staff",
+      "font_class": "staff",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "24899654",
+      "name": "VIP",
+      "font_class": "vip",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "24899655",
+      "name": "folder_add",
+      "font_class": "folder-add",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "24899656",
+      "name": "tune",
+      "font_class": "tune",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "24899657",
+      "name": "shimingrenzheng",
+      "font_class": "auth",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "24899565",
+      "name": "person",
+      "font_class": "person",
+      "unicode": "e699",
+      "unicode_decimal": 59033
+    },
+    {
+      "icon_id": "24899566",
+      "name": "email-filled",
+      "font_class": "email-filled",
+      "unicode": "e69a",
+      "unicode_decimal": 59034
+    },
+    {
+      "icon_id": "24899567",
+      "name": "phone-filled",
+      "font_class": "phone-filled",
+      "unicode": "e69b",
+      "unicode_decimal": 59035
+    },
+    {
+      "icon_id": "24899568",
+      "name": "phone",
+      "font_class": "phone",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "24899570",
+      "name": "email",
+      "font_class": "email",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "24899571",
+      "name": "personadd",
+      "font_class": "personadd",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "24899558",
+      "name": "chatboxes-filled",
+      "font_class": "chatboxes-filled",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "24899559",
+      "name": "contact",
+      "font_class": "contact",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "24899560",
+      "name": "chatbubble-filled",
+      "font_class": "chatbubble-filled",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "24899561",
+      "name": "contact-filled",
+      "font_class": "contact-filled",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "24899562",
+      "name": "chatboxes",
+      "font_class": "chatboxes",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "24899563",
+      "name": "chatbubble",
+      "font_class": "chatbubble",
+      "unicode": "e697",
+      "unicode_decimal": 59031
+    },
+    {
+      "icon_id": "24881290",
+      "name": "upload-filled",
+      "font_class": "upload-filled",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "24881292",
+      "name": "upload",
+      "font_class": "upload",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "24881293",
+      "name": "weixin",
+      "font_class": "weixin",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "24881274",
+      "name": "compose",
+      "font_class": "compose",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "24881275",
+      "name": "qq",
+      "font_class": "qq",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "24881276",
+      "name": "download-filled",
+      "font_class": "download-filled",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "24881277",
+      "name": "pengyouquan",
+      "font_class": "pyq",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "24881279",
+      "name": "sound",
+      "font_class": "sound",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "24881280",
+      "name": "trash-filled",
+      "font_class": "trash-filled",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "24881281",
+      "name": "sound-filled",
+      "font_class": "sound-filled",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "24881282",
+      "name": "trash",
+      "font_class": "trash",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "24881284",
+      "name": "videocam-filled",
+      "font_class": "videocam-filled",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "24881285",
+      "name": "spinner-cycle",
+      "font_class": "spinner-cycle",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "24881286",
+      "name": "weibo",
+      "font_class": "weibo",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "24881288",
+      "name": "videocam",
+      "font_class": "videocam",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "24881289",
+      "name": "download",
+      "font_class": "download",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "24879601",
+      "name": "help",
+      "font_class": "help",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "24879602",
+      "name": "navigate-filled",
+      "font_class": "navigate-filled",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "24879603",
+      "name": "plusempty",
+      "font_class": "plusempty",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "24879604",
+      "name": "smallcircle",
+      "font_class": "smallcircle",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "24879605",
+      "name": "minus-filled",
+      "font_class": "minus-filled",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "24879606",
+      "name": "micoff",
+      "font_class": "micoff",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "24879588",
+      "name": "closeempty",
+      "font_class": "closeempty",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "24879589",
+      "name": "clear",
+      "font_class": "clear",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "24879590",
+      "name": "navigate",
+      "font_class": "navigate",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "24879591",
+      "name": "minus",
+      "font_class": "minus",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "24879592",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "24879593",
+      "name": "mic",
+      "font_class": "mic",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "24879594",
+      "name": "paperplane",
+      "font_class": "paperplane",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "24879595",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "24879596",
+      "name": "help-filled",
+      "font_class": "help-filled",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "24879597",
+      "name": "plus-filled",
+      "font_class": "paperplane-filled",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "24879598",
+      "name": "plus",
+      "font_class": "plus",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "24879599",
+      "name": "mic-filled",
+      "font_class": "mic-filled",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "24879600",
+      "name": "image-filled",
+      "font_class": "image-filled",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "24855900",
+      "name": "locked-filled",
+      "font_class": "locked-filled",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "24855901",
+      "name": "info",
+      "font_class": "info",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "24855903",
+      "name": "locked",
+      "font_class": "locked",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "24855884",
+      "name": "camera-filled",
+      "font_class": "camera-filled",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "24855885",
+      "name": "chat-filled",
+      "font_class": "chat-filled",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "24855886",
+      "name": "camera",
+      "font_class": "camera",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "24855887",
+      "name": "circle",
+      "font_class": "circle",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "24855888",
+      "name": "checkmarkempty",
+      "font_class": "checkmarkempty",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "24855889",
+      "name": "chat",
+      "font_class": "chat",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "24855890",
+      "name": "circle-filled",
+      "font_class": "circle-filled",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "24855891",
+      "name": "flag",
+      "font_class": "flag",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "24855892",
+      "name": "flag-filled",
+      "font_class": "flag-filled",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "24855893",
+      "name": "gear-filled",
+      "font_class": "gear-filled",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "24855894",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "24855895",
+      "name": "home-filled",
+      "font_class": "home-filled",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "24855896",
+      "name": "gear",
+      "font_class": "gear",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "24855897",
+      "name": "smallcircle-filled",
+      "font_class": "smallcircle-filled",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "24855898",
+      "name": "map-filled",
+      "font_class": "map-filled",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "24855899",
+      "name": "map",
+      "font_class": "map",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "24855825",
+      "name": "refresh-filled",
+      "font_class": "refresh-filled",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "24855826",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "24855808",
+      "name": "cloud-upload",
+      "font_class": "cloud-upload",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "24855809",
+      "name": "cloud-download-filled",
+      "font_class": "cloud-download-filled",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "24855810",
+      "name": "cloud-download",
+      "font_class": "cloud-download",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "24855811",
+      "name": "cloud-upload-filled",
+      "font_class": "cloud-upload-filled",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "24855813",
+      "name": "redo",
+      "font_class": "redo",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "24855814",
+      "name": "images-filled",
+      "font_class": "images-filled",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "24855815",
+      "name": "undo-filled",
+      "font_class": "undo-filled",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "24855816",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "24855817",
+      "name": "more-filled",
+      "font_class": "more-filled",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "24855818",
+      "name": "undo",
+      "font_class": "undo",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "24855819",
+      "name": "images",
+      "font_class": "images",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "24855821",
+      "name": "paperclip",
+      "font_class": "paperclip",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "24855822",
+      "name": "settings",
+      "font_class": "settings",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "24855823",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "24855824",
+      "name": "redo-filled",
+      "font_class": "redo-filled",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "24841702",
+      "name": "list",
+      "font_class": "list",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "24841489",
+      "name": "mail-open-filled",
+      "font_class": "mail-open-filled",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "24841491",
+      "name": "hand-thumbsdown-filled",
+      "font_class": "hand-down-filled",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "24841492",
+      "name": "hand-thumbsdown",
+      "font_class": "hand-down",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "24841493",
+      "name": "hand-thumbsup-filled",
+      "font_class": "hand-up-filled",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "24841494",
+      "name": "hand-thumbsup",
+      "font_class": "hand-up",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "24841496",
+      "name": "heart-filled",
+      "font_class": "heart-filled",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "24841498",
+      "name": "mail-open",
+      "font_class": "mail-open",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "24841488",
+      "name": "heart",
+      "font_class": "heart",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "24839963",
+      "name": "loop",
+      "font_class": "loop",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "24839866",
+      "name": "pulldown",
+      "font_class": "pulldown",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "24813798",
+      "name": "scan",
+      "font_class": "scan",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "24813786",
+      "name": "bars",
+      "font_class": "bars",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "24813788",
+      "name": "cart-filled",
+      "font_class": "cart-filled",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "24813790",
+      "name": "checkbox",
+      "font_class": "checkbox",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "24813791",
+      "name": "checkbox-filled",
+      "font_class": "checkbox-filled",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "24813794",
+      "name": "shop",
+      "font_class": "shop",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "24813795",
+      "name": "headphones",
+      "font_class": "headphones",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "24813796",
+      "name": "cart",
+      "font_class": "cart",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    }
+  ]
+}

src/components/uni-icons/uni-icons.vue

@@ -0,0 +1,96 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
+	<!-- #endif -->
+</template>
+
+<script>
+	import icons from './icons.js';
+	const getVal = (val) => {
+		const reg = /^[0-9]*$/g
+		return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
+	} 
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './uniicons.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "uniicons",
+		'src': "url('"+iconUrl+"')"
+	});
+	// #endif
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icons 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: 'UniIcons',
+		emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: [Number, String],
+				default: 16
+			},
+			customPrefix:{
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				icons: icons.glyphs
+			}
+		},
+		computed:{
+			unicode(){
+				let code = this.icons.find(v=>v.font_class === this.type)
+				if(code){
+					return unescape(`%u${code.unicode}`)
+				}
+				return ''
+			},
+			iconSize(){
+				return getVal(this.size)
+			}
+		},
+		methods: {
+			_onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	@import './uniicons.css';
+	@font-face {
+		font-family: uniicons;
+		src: url('./uniicons.ttf') format('truetype');
+	}
+
+	/* #endif */
+	.uni-icons {
+		font-family: uniicons;
+		text-decoration: none;
+		text-align: center;
+	}
+
+</style>

src/components/uni-icons/uniicons.css

@@ -0,0 +1,663 @@
+.uniui-color:before {
+  content: "\e6cf";
+}
+
+.uniui-wallet:before {
+  content: "\e6b1";
+}
+
+.uniui-settings-filled:before {
+  content: "\e6ce";
+}
+
+.uniui-auth-filled:before {
+  content: "\e6cc";
+}
+
+.uniui-shop-filled:before {
+  content: "\e6cd";
+}
+
+.uniui-staff-filled:before {
+  content: "\e6cb";
+}
+
+.uniui-vip-filled:before {
+  content: "\e6c6";
+}
+
+.uniui-plus-filled:before {
+  content: "\e6c7";
+}
+
+.uniui-folder-add-filled:before {
+  content: "\e6c8";
+}
+
+.uniui-color-filled:before {
+  content: "\e6c9";
+}
+
+.uniui-tune-filled:before {
+  content: "\e6ca";
+}
+
+.uniui-calendar-filled:before {
+  content: "\e6c0";
+}
+
+.uniui-notification-filled:before {
+  content: "\e6c1";
+}
+
+.uniui-wallet-filled:before {
+  content: "\e6c2";
+}
+
+.uniui-medal-filled:before {
+  content: "\e6c3";
+}
+
+.uniui-gift-filled:before {
+  content: "\e6c4";
+}
+
+.uniui-fire-filled:before {
+  content: "\e6c5";
+}
+
+.uniui-refreshempty:before {
+  content: "\e6bf";
+}
+
+.uniui-location-filled:before {
+  content: "\e6af";
+}
+
+.uniui-person-filled:before {
+  content: "\e69d";
+}
+
+.uniui-personadd-filled:before {
+  content: "\e698";
+}
+
+.uniui-back:before {
+  content: "\e6b9";
+}
+
+.uniui-forward:before {
+  content: "\e6ba";
+}
+
+.uniui-arrow-right:before {
+  content: "\e6bb";
+}
+
+.uniui-arrowthinright:before {
+  content: "\e6bb";
+}
+
+.uniui-arrow-left:before {
+  content: "\e6bc";
+}
+
+.uniui-arrowthinleft:before {
+  content: "\e6bc";
+}
+
+.uniui-arrow-up:before {
+  content: "\e6bd";
+}
+
+.uniui-arrowthinup:before {
+  content: "\e6bd";
+}
+
+.uniui-arrow-down:before {
+  content: "\e6be";
+}
+
+.uniui-arrowthindown:before {
+  content: "\e6be";
+}
+
+.uniui-bottom:before {
+  content: "\e6b8";
+}
+
+.uniui-arrowdown:before {
+  content: "\e6b8";
+}
+
+.uniui-right:before {
+  content: "\e6b5";
+}
+
+.uniui-arrowright:before {
+  content: "\e6b5";
+}
+
+.uniui-top:before {
+  content: "\e6b6";
+}
+
+.uniui-arrowup:before {
+  content: "\e6b6";
+}
+
+.uniui-left:before {
+  content: "\e6b7";
+}
+
+.uniui-arrowleft:before {
+  content: "\e6b7";
+}
+
+.uniui-eye:before {
+  content: "\e651";
+}
+
+.uniui-eye-filled:before {
+  content: "\e66a";
+}
+
+.uniui-eye-slash:before {
+  content: "\e6b3";
+}
+
+.uniui-eye-slash-filled:before {
+  content: "\e6b4";
+}
+
+.uniui-info-filled:before {
+  content: "\e649";
+}
+
+.uniui-reload:before {
+  content: "\e6b2";
+}
+
+.uniui-micoff-filled:before {
+  content: "\e6b0";
+}
+
+.uniui-map-pin-ellipse:before {
+  content: "\e6ac";
+}
+
+.uniui-map-pin:before {
+  content: "\e6ad";
+}
+
+.uniui-location:before {
+  content: "\e6ae";
+}
+
+.uniui-starhalf:before {
+  content: "\e683";
+}
+
+.uniui-star:before {
+  content: "\e688";
+}
+
+.uniui-star-filled:before {
+  content: "\e68f";
+}
+
+.uniui-calendar:before {
+  content: "\e6a0";
+}
+
+.uniui-fire:before {
+  content: "\e6a1";
+}
+
+.uniui-medal:before {
+  content: "\e6a2";
+}
+
+.uniui-font:before {
+  content: "\e6a3";
+}
+
+.uniui-gift:before {
+  content: "\e6a4";
+}
+
+.uniui-link:before {
+  content: "\e6a5";
+}
+
+.uniui-notification:before {
+  content: "\e6a6";
+}
+
+.uniui-staff:before {
+  content: "\e6a7";
+}
+
+.uniui-vip:before {
+  content: "\e6a8";
+}
+
+.uniui-folder-add:before {
+  content: "\e6a9";
+}
+
+.uniui-tune:before {
+  content: "\e6aa";
+}
+
+.uniui-auth:before {
+  content: "\e6ab";
+}
+
+.uniui-person:before {
+  content: "\e699";
+}
+
+.uniui-email-filled:before {
+  content: "\e69a";
+}
+
+.uniui-phone-filled:before {
+  content: "\e69b";
+}
+
+.uniui-phone:before {
+  content: "\e69c";
+}
+
+.uniui-email:before {
+  content: "\e69e";
+}
+
+.uniui-personadd:before {
+  content: "\e69f";
+}
+
+.uniui-chatboxes-filled:before {
+  content: "\e692";
+}
+
+.uniui-contact:before {
+  content: "\e693";
+}
+
+.uniui-chatbubble-filled:before {
+  content: "\e694";
+}
+
+.uniui-contact-filled:before {
+  content: "\e695";
+}
+
+.uniui-chatboxes:before {
+  content: "\e696";
+}
+
+.uniui-chatbubble:before {
+  content: "\e697";
+}
+
+.uniui-upload-filled:before {
+  content: "\e68e";
+}
+
+.uniui-upload:before {
+  content: "\e690";
+}
+
+.uniui-weixin:before {
+  content: "\e691";
+}
+
+.uniui-compose:before {
+  content: "\e67f";
+}
+
+.uniui-qq:before {
+  content: "\e680";
+}
+
+.uniui-download-filled:before {
+  content: "\e681";
+}
+
+.uniui-pyq:before {
+  content: "\e682";
+}
+
+.uniui-sound:before {
+  content: "\e684";
+}
+
+.uniui-trash-filled:before {
+  content: "\e685";
+}
+
+.uniui-sound-filled:before {
+  content: "\e686";
+}
+
+.uniui-trash:before {
+  content: "\e687";
+}
+
+.uniui-videocam-filled:before {
+  content: "\e689";
+}
+
+.uniui-spinner-cycle:before {
+  content: "\e68a";
+}
+
+.uniui-weibo:before {
+  content: "\e68b";
+}
+
+.uniui-videocam:before {
+  content: "\e68c";
+}
+
+.uniui-download:before {
+  content: "\e68d";
+}
+
+.uniui-help:before {
+  content: "\e679";
+}
+
+.uniui-navigate-filled:before {
+  content: "\e67a";
+}
+
+.uniui-plusempty:before {
+  content: "\e67b";
+}
+
+.uniui-smallcircle:before {
+  content: "\e67c";
+}
+
+.uniui-minus-filled:before {
+  content: "\e67d";
+}
+
+.uniui-micoff:before {
+  content: "\e67e";
+}
+
+.uniui-closeempty:before {
+  content: "\e66c";
+}
+
+.uniui-clear:before {
+  content: "\e66d";
+}
+
+.uniui-navigate:before {
+  content: "\e66e";
+}
+
+.uniui-minus:before {
+  content: "\e66f";
+}
+
+.uniui-image:before {
+  content: "\e670";
+}
+
+.uniui-mic:before {
+  content: "\e671";
+}
+
+.uniui-paperplane:before {
+  content: "\e672";
+}
+
+.uniui-close:before {
+  content: "\e673";
+}
+
+.uniui-help-filled:before {
+  content: "\e674";
+}
+
+.uniui-paperplane-filled:before {
+  content: "\e675";
+}
+
+.uniui-plus:before {
+  content: "\e676";
+}
+
+.uniui-mic-filled:before {
+  content: "\e677";
+}
+
+.uniui-image-filled:before {
+  content: "\e678";
+}
+
+.uniui-locked-filled:before {
+  content: "\e668";
+}
+
+.uniui-info:before {
+  content: "\e669";
+}
+
+.uniui-locked:before {
+  content: "\e66b";
+}
+
+.uniui-camera-filled:before {
+  content: "\e658";
+}
+
+.uniui-chat-filled:before {
+  content: "\e659";
+}
+
+.uniui-camera:before {
+  content: "\e65a";
+}
+
+.uniui-circle:before {
+  content: "\e65b";
+}
+
+.uniui-checkmarkempty:before {
+  content: "\e65c";
+}
+
+.uniui-chat:before {
+  content: "\e65d";
+}
+
+.uniui-circle-filled:before {
+  content: "\e65e";
+}
+
+.uniui-flag:before {
+  content: "\e65f";
+}
+
+.uniui-flag-filled:before {
+  content: "\e660";
+}
+
+.uniui-gear-filled:before {
+  content: "\e661";
+}
+
+.uniui-home:before {
+  content: "\e662";
+}
+
+.uniui-home-filled:before {
+  content: "\e663";
+}
+
+.uniui-gear:before {
+  content: "\e664";
+}
+
+.uniui-smallcircle-filled:before {
+  content: "\e665";
+}
+
+.uniui-map-filled:before {
+  content: "\e666";
+}
+
+.uniui-map:before {
+  content: "\e667";
+}
+
+.uniui-refresh-filled:before {
+  content: "\e656";
+}
+
+.uniui-refresh:before {
+  content: "\e657";
+}
+
+.uniui-cloud-upload:before {
+  content: "\e645";
+}
+
+.uniui-cloud-download-filled:before {
+  content: "\e646";
+}
+
+.uniui-cloud-download:before {
+  content: "\e647";
+}
+
+.uniui-cloud-upload-filled:before {
+  content: "\e648";
+}
+
+.uniui-redo:before {
+  content: "\e64a";
+}
+
+.uniui-images-filled:before {
+  content: "\e64b";
+}
+
+.uniui-undo-filled:before {
+  content: "\e64c";
+}
+
+.uniui-more:before {
+  content: "\e64d";
+}
+
+.uniui-more-filled:before {
+  content: "\e64e";
+}
+
+.uniui-undo:before {
+  content: "\e64f";
+}
+
+.uniui-images:before {
+  content: "\e650";
+}
+
+.uniui-paperclip:before {
+  content: "\e652";
+}
+
+.uniui-settings:before {
+  content: "\e653";
+}
+
+.uniui-search:before {
+  content: "\e654";
+}
+
+.uniui-redo-filled:before {
+  content: "\e655";
+}
+
+.uniui-list:before {
+  content: "\e644";
+}
+
+.uniui-mail-open-filled:before {
+  content: "\e63a";
+}
+
+.uniui-hand-down-filled:before {
+  content: "\e63c";
+}
+
+.uniui-hand-down:before {
+  content: "\e63d";
+}
+
+.uniui-hand-up-filled:before {
+  content: "\e63e";
+}
+
+.uniui-hand-up:before {
+  content: "\e63f";
+}
+
+.uniui-heart-filled:before {
+  content: "\e641";
+}
+
+.uniui-mail-open:before {
+  content: "\e643";
+}
+
+.uniui-heart:before {
+  content: "\e639";
+}
+
+.uniui-loop:before {
+  content: "\e633";
+}
+
+.uniui-pulldown:before {
+  content: "\e632";
+}
+
+.uniui-scan:before {
+  content: "\e62a";
+}
+
+.uniui-bars:before {
+  content: "\e627";
+}
+
+.uniui-cart-filled:before {
+  content: "\e629";
+}
+
+.uniui-checkbox:before {
+  content: "\e62b";
+}
+
+.uniui-checkbox-filled:before {
+  content: "\e62c";
+}
+
+.uniui-shop:before {
+  content: "\e62f";
+}
+
+.uniui-headphones:before {
+  content: "\e630";
+}
+
+.uniui-cart:before {
+  content: "\e631";
+}

src/manifest.json

@@ -50,7 +50,34 @@
   "mp-weixin": {
     "appid": "wx369fcff95d387bde",
     "setting": {
-      "urlCheck": false
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "preloadBackgroundData": false,
+      "minified": true,
+      "newFeature": false,
+      "coverView": true,
+      "nodeModules": false,
+      "autoAudits": false,
+      "showShadowRootInWxmlPanel": true,
+      "scopeDataCheck": false,
+      "uglifyFileName": true,
+      "checkInvalidKey": true,
+      "checkSiteMap": true,
+      "uploadWithSourceMap": true,
+      "compileHotReLoad": false,
+      "lazyloadPlaceholderEnable": false,
+      "useMultiFrameRuntime": true,
+      "useIsolateContext": false,
+      "userConfirmedBundleSwitch": false,
+      "minifyWXSS": true,
+      "disableUseStrict": false,
+      "minifyWXML": true,
+      "showES6CompileOption": false,
+      "ignoreUploadUnusedFiles": true,
+      "useStaticServer": true,
+      "condition": false
     },
     "useExtendedLib": {
       "weui": true

src/pages.json

@@ -1,25 +1,32 @@
 {
-	"pages": [
-		{
-			"path": "pages/map/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
-		{
-			"path": "pages/list/index"
-		},
-		{
-			"path": "pages/user/index"
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"tabBar": {
+  "pages": [
+    {
+      "path": "pages/map/index",
+      "style": {
+        "disableScroll": true
+      }
+    },
+    {
+      "path": "pages/list/index"
+    },
+    {
+      "path": "pages/user/index"
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "custom",
+    "usingComponents": {
+      "navigation-bar": "./wxcomponents/navigation-bar/index"
+    }
+  },
+  "easycom": {
+    "autoscan": true
+  },
+  "tabBar": {
     "custom": true,
     "list": [
       {

src/pages/list/index.vue

@@ -1,41 +1,63 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+  <view class="list">
+    <navigation-bar title="充电站列表"></navigation-bar>
+    <view class="pl-20 pr-20" v-if="infiniteScroller.list">
+      <view
+        class="mt-20"
+        v-for="(item, index) in infiniteScroller.list"
+        :key="index"
+      >
+        <charge-station
+          :title="item.StationName"
+          :tag="item.Construction"
+          :price="item.TotalFee"
+          :fast="item.fastEquipmentInfos"
+          :slow="item.slowEquipmentInfos"
+          :sId="item.StationID"
+          :address="item.Address"
+          :latitude="item.StationLat"
+          :longitude="item.StationLng"
+        ></charge-station>
+      </view>
+    </view>
+    <view
+      class="flex-center flex-column pt-79"
+      v-if="infiniteScroller.list && infiniteScroller.list.length <= 0"
+    >
+      <image class="empty" src="/static/images/map-empty.png" mode="widthFix" />
+      <view class="fs-22 mt-14" style="color: rgba(0, 0, 0, 0.5)"
+        >暂无充电站信息</view
+      >
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-const title = ref('Hello')
+import { fetchStations } from "../../api/charge";
+import { fetchCollectList } from "../../api/user";
+import { useInfiniteScroll } from "../../utils/infinite-scroll";
+import { onLoad, onReachBottom } from "@dcloudio/uni-app";
+const infiniteScroller = useInfiniteScroll(6, (page) => {
+  return fetchStations(page, 6);
+});
+onLoad(() => {
+  fetchCollectList().then(() => {
+    infiniteScroller.refresh();
+  });
+});
+onReachBottom(() => {
+  infiniteScroller.next();
+});
 </script>
 
 <style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
+.list {
+  width: 100w;
+  min-height: 100vh;
+  background-color: #f5f5f5;
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.empty {
+  width: 80px;
 }
 </style>

src/pages/map/index.vue

@@ -2,14 +2,153 @@
   <view class="map"></view>
 </template>
 
-<script setup lang="ts">
-import { login, onLogin } from '../../api/auth'
-import { onShow } from "@dcloudio/uni-app";
-onShow(()=> {
-  console.log(login, onLogin)
-})
+<script module="mapwxs" lang="wxs" src="./index.wxs"></script>
+<script lang="ts">
+export default {};
 </script>
 
-<style>
+<style lang="scss">
+page {
+  background-color: #ffffff;
+}
 
+.container {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  background-color: #ffffff;
+}
+
+.login-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.icon-menu {
+  position: absolute;
+  z-index: 9;
+
+  image {
+    width: 60rpx;
+  }
+
+  & > view {
+    height: 96rpx;
+    width: 96rpx;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0px 8rpx 20rpx rgba(0, 0, 0, 0.2);
+  }
+
+  .hover {
+    box-shadow: none;
+  }
+}
+
+.filter-dialog {
+  background-color: #fff;
+
+  .slider {
+    position: relative;
+    height: 12rpx;
+    width: 100%;
+    border-radius: 8rpx;
+    background-color: var(--color-sec);
+    margin-top: 10rpx;
+
+    &_active {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background-color: var(--color-primary);
+      border-radius: 8rpx;
+      height: 12rpx;
+      width: 0%;
+    }
+
+    &_block {
+      position: absolute;
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      top: -15rpx;
+      left: 0;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 4rpx 6rpx rgba(52, 125, 255, 0.4);
+    }
+
+    &_wx {
+      position: absolute;
+      width: 100%;
+      left: 0px;
+      top: -5px;
+      margin: 0;
+      opacity: 0;
+    }
+  }
+
+  .type {
+    width: 160rpx;
+    height: 60rpx;
+    background: var(--color-sec);
+    border-radius: 4rpx;
+    color: var(--color-gray);
+    font-size: 26rpx;
+    border: 1px solid var(--color-sec);
+  }
+
+  .type-active {
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  .foot {
+    height: 120rpx;
+    border-top: 1rpx solid var(--color-sec);
+  }
+}
+
+.card {
+  position: absolute;
+  width: 100%;
+  height: 450rpx;
+  left: 0px;
+  bottom: 0rpx;
+  z-index: 9;
+  background: linear-gradient(180deg, rgba(87, 104, 133, 0) 0%, #576885 100%);
+  padding-left: 10rpx;
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+
+  swiper,
+  swiper-item {
+    width: 100%;
+    height: 300rpx;
+  }
+
+  .station {
+    width: 100%;
+    height: 100%;
+    padding: 0rpx 20rpx;
+  }
+
+  .station-empty {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    image {
+      width: 160rpx;
+    }
+  }
+}
 </style>

src/pages/map/index.wxs

@@ -0,0 +1,34 @@
+function changing(event, ownerInstance) {
+  setActiveBarPercent(
+    ownerInstance,
+    event.detail.value,
+    event.currentTarget.dataset.max
+  );
+  ownerInstance.callMethod("setFilterDistance", event);
+  return false;
+}
+
+function changeValue(newValue, oldValue, ownerInstance, instance) {
+  setActiveBarPercent(ownerInstance, newValue, instance.getDataset().max);
+  return false;
+}
+
+function setActiveBarPercent(ownerInstance, value, max) {
+  console.log(ownerInstance);
+  var active = ownerInstance.selectComponent(".slider_active");
+  var block = ownerInstance.selectComponent(".slider_block");
+  var width = (parseInt(value) / parseInt(max)) * 100;
+  if (width < 1) {
+    width = 0;
+  }
+  active.setStyle({ width: width + "%" });
+  block.setStyle({
+    left: width + "%",
+    transform: "translateX(-" + width + "%)",
+  });
+}
+
+module.exports = {
+  changing: changing,
+  changeValue: changeValue,
+};

src/styles/font.scss

@@ -1,9 +1,9 @@
 @for $i from 2 to 100 {
   .fs-#{$i} {
-    font-size: #{$i}px;
+    font-size: #{$i}rpx;
   }
   .lh-#{$i} {
-    line-height: #{$i}px;
+    line-height: #{$i}rpx;
   }
 }
 

src/styles/layout.scss

@@ -12,17 +12,17 @@ $position: top, right, bottom, left;
 @for $i from 2 to 100 {
   @each $item in $position {
     .m#{str-slice($item, 0, 1)}-#{$i} {
-      margin-#{$item}: #{$i}px;
+      margin-#{$item}: #{$i}rpx;
     }
     .p#{str-slice($item, 0, 1)}-#{$i} {
-      padding-#{$item}: #{$i}px;
+      padding-#{$item}: #{$i}rpx;
     }
   }
   .height-#{$i} {
-    height: #{$i}px;
+    height: #{$i}rpx;
   }
   .width-#{$i} {
-    width: #{$i}px;
+    width: #{$i}rpx;
   }
 }
 

src/utils/http.ts

@@ -99,7 +99,7 @@ class Http {
         })
         .then((res) => {
           // eslint-disable-next-line no-console
-          console.log("接口返回", res);
+          // console.log("接口返回", res);
           const { msg } = res || {
             msg: "出现错误",
           };

src/utils/infinite-scroll.ts

@@ -0,0 +1,76 @@
+import { reactive, ref } from "vue";
+
+export function useInfiniteScroll<T = any>(
+  pageSize: number,
+  loadData: (page: number) => Promise<T[]>
+) {
+  const loading = ref(false);
+  const page = ref(1);
+  const hasNext = ref(false);
+  const list = ref();
+
+  const refresh = () => {
+    if (loading.value) {
+      return;
+    }
+    uni.showLoading({
+      title: "加载中",
+    });
+    if (list.value) {
+      list.value = [];
+    }
+    loading.value = true;
+    return loadData(1)
+      .then((res) => {
+        uni.hideLoading();
+        loading.value = false;
+        page.value = 1;
+        hasNext.value = res.length >= pageSize;
+        list.value = res;
+        uni.stopPullDownRefresh();
+      })
+      .catch(() => {
+        uni.hideLoading();
+        loading.value = false;
+      });
+  };
+
+  const next = () => {
+    if (hasNext.value) {
+      if (loading.value) {
+        return;
+      }
+      uni.showLoading({
+        title: "加载中",
+      });
+      loading.value = true;
+      return loadData(page.value + 1)
+        .then((res) => {
+          uni.hideLoading();
+          loading.value = false;
+          if (!res || res.length <= 0) {
+            return;
+          }
+          page.value = page.value + 1;
+          hasNext.value = res.length >= pageSize;
+          list.value = res;
+          res.forEach((item) => {
+            list.value.push(item);
+          });
+        })
+        .catch(() => {
+          uni.hideLoading();
+          loading.value = false;
+        });
+    }
+  };
+
+  return reactive({
+    page,
+    loading,
+    hasNext,
+    list,
+    refresh,
+    next,
+  });
+}

src/wxcomponents/navigation-bar/index.js

@@ -0,0 +1,98 @@
+Component({
+  properties: {
+    title: {
+      type: String
+    },
+    color: {
+      type: String,
+      value: '#000000'
+    },
+    background: {
+      type: String,
+      value: 'rgba(0,0,0,0)'
+    },
+    home: {
+      type: Boolean,
+      value: false
+    },
+    homePath: {
+      type: String,
+      value: '/pages/map/map'
+    },
+    placeholder: {
+      type: Boolean,
+      value: true
+    },
+    autoFixed: {
+      type: Boolean,
+      value: true
+    },
+    autoFixedDistance: {
+      type: Number,
+      value: 4
+    },
+    autoFixedStyle: {
+      type: String
+    },
+  },
+  data: {
+    fixed: false,
+    showBack: false,
+    height: 56,
+    barHeight: 32
+  },
+  lifetimes: {
+    ready() {
+      const NAVIGATION_HEIGHT_CACHE = `NAVIGATION_HEIGHT`
+      const NAVIGATION_BAR_HEIGHT_CACHE = `NAVIGATION_BAR_HEIGHT`
+      const pages = getCurrentPages()
+      let height = wx.getStorageSync(NAVIGATION_HEIGHT_CACHE) || 0
+      let barHeight = wx.getStorageSync(NAVIGATION_BAR_HEIGHT_CACHE) || 0
+      if (!height || !barHeight) {
+        const menuButtonRect = wx.getMenuButtonBoundingClientRect()
+        height = menuButtonRect.bottom
+        barHeight = height - menuButtonRect.top
+        wx.setStorageSync(NAVIGATION_HEIGHT_CACHE, height)
+        wx.setStorageSync(NAVIGATION_BAR_HEIGHT_CACHE, barHeight)
+      }
+      this.setData({
+        showBack: pages.length > 1,
+        height,
+        barHeight
+      })
+      this.triggerEvent('ready', {
+        navigationBarHeight: height + 6,
+        statusBarHeight: height - barHeight
+      })
+    },
+    attached() {
+      if (this.data.autoFixed) {
+        this._createIntersectionObserver()
+      }
+    }
+  },
+  methods: {
+    back() {
+      wx.navigateBack()
+    },
+    backHome() {
+      wx.reLaunch({
+        url: this.data.homePath
+      })
+    },
+    _createIntersectionObserver() {
+      wx.nextTick(() => {
+        const observer = wx.createIntersectionObserver(this, { initialRatio: 1, observeAll: false })
+        observer.relativeToViewport().observe('.navigation-observer', () => {
+          const fixed = !this.data.fixed
+          this.setData({
+            fixed
+          })
+          this.triggerEvent('fixed', {
+            status: fixed
+          })
+        })
+      })
+    }
+  }
+})

src/wxcomponents/navigation-bar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/wxcomponents/navigation-bar/index.wxml

@@ -0,0 +1,18 @@
+<view class="navigation-observer" style="height:{{autoFixedDistance}}px;" wx:if="{{autoFixed}}"></view>
+<view class="navigation-placeholder" style="height: {{placeholder ? height + 6 : 0}}px;"></view>
+<view class="navigation navigation-{{autoFixed ? 'fixed':'relative'}}" style="height: {{height + 6}}px;background: {{background}};{{fixed ? autoFixedStyle : ''}}">
+  <view class="navigation-bar" style="height: {{barHeight + 6}}px;line-height: {{barHeight}}px;color:{{color}};">
+    <view wx:if="{{showBack && home}}" class="icon-menu" style="top:{{height - barHeight}}px;height:{{barHeight}}px;border-radius:{{barHeight}}px;">
+      <view class="navigation-bar-font navigation-bar-font-fanhui" catchtap="back"></view>
+      <view class="icon-menu-line"></view>
+      <view class="navigation-bar-font navigation-bar-font-zhuye" catchtap="backHome"></view>
+    </view>
+    <view wx:if="{{!showBack && home}}" class="icon-home" style="top:{{height - barHeight}}px;height:{{barHeight}}px;width:{{barHeight}}px;" catchtap="backHome">
+      <view class="navigation-bar-font navigation-bar-font-zhuye" ></view>
+    </view>
+    <view wx:if="{{showBack && !home}}" class="icon-home" style="top:{{height - barHeight}}px;height:{{barHeight}}px;width:{{barHeight}}px;border:none;background:none;" catchtap="back">
+      <view class="navigation-bar-font navigation-bar-font-fanhui" style="color:{{color}};"></view>
+    </view>
+    <view>{{ title }}</view>
+  </view>
+</view>

src/wxcomponents/navigation-bar/index.wxss

@@ -0,0 +1,101 @@
+@font-face {
+  font-family: "navigation-bar"; /* Project id 2601138 */
+  src: url('//at.alicdn.com/t/font_2601138_flivtnm3xwm.woff2?t=1650434642116') format('woff2'),
+       url('//at.alicdn.com/t/font_2601138_flivtnm3xwm.woff?t=1650434642116') format('woff'),
+       url('//at.alicdn.com/t/font_2601138_flivtnm3xwm.ttf?t=1650434642116') format('truetype');
+}
+
+.navigation-bar-font {
+  font-family: "navigation-bar" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #000;
+  font-size: 34rpx;
+}
+
+.navigation-bar-font-fanhui:before {
+  content: "\e6c3";
+}
+
+.navigation-bar-font-zhuye:before {
+  content: "\e6c4";
+}
+
+.navigation {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.navigation-fixed {
+  position: fixed;
+}
+
+.navigation-relative {
+  position: absolute;
+}
+
+.navigation-placeholder, .navigation-observer {
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.navigation-observer {
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.navigation-bar {
+  font-size: 34rpx;
+  font-weight: 500;
+  text-align: center;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.navigation-bar .icon-home {
+  position: fixed;
+  z-index: 999;
+  left: 14rpx;
+  top: 0px;
+  background-color: #fff;
+  color: #000;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  border: 1px solid rgba(151, 151, 151, 0.20);
+}
+
+.navigation-bar .icon-menu {
+  position: fixed;
+  z-index: 999;
+  left: 14rpx;
+  top: 0rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 174rpx;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(151, 151, 151, 0.20);
+}
+
+.navigation-bar .icon-menu-line {
+  width: 1px;
+  height: 38rpx;
+  background: rgba(0, 0, 0, 0.20);
+  margin: 0 24rpx;
+}

tsconfig.json

@@ -10,5 +10,5 @@
     "lib": ["esnext", "dom"],
     "types": ["@dcloudio/types"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
 }