feats

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["taro/react"],
   "rules": {
     "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn"
   }
 }

config/index.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 const config = {
   projectName: 'civilized-miniapp',
   date: '2022-12-12',
@@ -20,6 +22,9 @@ const config = {
   },
   framework: 'react',
   compiler: 'webpack4',
+  alias: {
+    '@': path.resolve(__dirname, '..', 'src'),
+  },
   mini: {
     postcss: {
       pxtransform: {
@@ -35,25 +40,7 @@ const config = {
         }
       },
       cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-        config: {
-          namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: '[name]__[local]___[hash:base64:5]'
-        }
-      }
-    }
-  },
-  h5: {
-    publicPath: '/',
-    staticDirectory: 'static',
-    postcss: {
-      autoprefixer: {
-        enable: true,
-        config: {
-        }
-      },
-      cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
           namingPattern: 'module', // 转换模式，取值为 global/module
           generateScopedName: '[name]__[local]___[hash:base64:5]'
@@ -61,14 +48,6 @@ const config = {
       }
     }
   },
-  rn: {
-    appName: 'taroDemo',
-    postcss: {
-      cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-      }
-    }
-  }
 }
 
 module.exports = function (merge) {

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "civilized-miniapp",
   "description": "文明城市小程序",
-  "appid": "touristappid",
+  "appid": "wxe44244d1a5ea3364",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.js

@@ -1,11 +1,42 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/home/index',
+    'pages/index3/index',
+    'pages/index4/index',
+    'pages/index5/index',
+    'pages/reporting/index',
+    'pages/reporting/detail/index',
   ],
+  tabBar: {
+    list: [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/home/index",
+        "text": "公告"
+      },
+      {
+        "pagePath": "pages/index3/index",
+        "text": "发布"
+      },
+      {
+        "pagePath": "pages/index4/index",
+        "text": "测评标准"
+      },
+      {
+        "pagePath": "pages/index5/index",
+        "text": "我的"
+      },
+    ],
+  },
   window: {
+    // backgroundColor: '#1A7565',
     backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
+    navigationBarBackgroundColor: '#1A7565',
+    navigationBarTitleText: '文明创城',
+    navigationBarTextStyle: 'white'
   }
 })

src/app.less

@@ -0,0 +1,15 @@
+
+page {
+  box-sizing: border-box;
+  background: #f8f8f8;
+  --main-bg-color: #1A7565;
+  --main-space: 4vw;
+}
+
+view {
+  box-sizing: border-box;
+}
+
+.page-wrapper {
+
+}

src/layouts/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+
+export default (props) => {
+  const { className, style } = props;
+
+  const classNames = `page-wrapper ${className}`;
+
+  return (
+    <View className={classNames} style={style}>
+      {props.children}
+    </View>
+  )
+}

src/pages/home/components/BannerCard.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import style from './banner-card.module.less';
+
+export default (props) => {
+  return (
+    <View className={style['banner-card-box']}>
+      <View className={style['banner-card']}>
+        <View className={style.item}>
+          <View>12</View>
+          <View className={style.sub}>已上报</View>
+        </View>
+        <View className={style.item}>
+          <View>8</View>
+          <View className={style.sub}>已交办</View>
+        </View>
+        <View className={style.item}>
+          <View>6</View>
+          <View className={style.sub}>未交办</View>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/home/components/Head.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import style from './head.module.less';
+
+export default (props) => {
+  console.log(style)
+
+  return (
+    <View className={style.head}>
+      <View className={style.profile}>
+        <View>Hi, 张三!</View>
+        <View className={style.badge}>
+          <View className={style.icon}></View>
+          <View>督察员</View>
+        </View>
+      </View>
+      <View className={style.avatar}>
+
+      </View>
+    </View>
+  )
+}

src/pages/home/components/MenuCard.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import style from './menu-card.module.less';
+
+export default (props) => {
+  
+  return (
+    <View className={style['menu-card-box']}>
+      <View className={style.item}>
+        <View>
+          <View className={style.icon}></View>
+          <View>我要上报</View>
+        </View>
+      </View>
+      <View className={style.item}>
+        <View>
+          <View className={style.icon}></View>
+          <View>我的上报</View>
+        </View>
+      </View>
+      <View className={style.item}>
+        <View>
+          <View className={style.icon}></View>
+          <View>消息通知</View>
+        </View>
+      </View>
+      <View className={style.item}>
+        <View>
+          <View className={style.icon}></View>
+          <View>模拟测评</View>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/home/components/banner-card.module.less

@@ -0,0 +1,44 @@
+
+.banner-card-box {
+  width: 100%;
+  position: relative;
+  padding: 0 var(--main-space);
+
+  &::before {
+    content: '';
+    background: var(--main-bg-color);
+    position: absolute;
+    width: 100%;
+    height: 10vw;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+
+  .banner-card {
+    position: relative;
+    background: #FFFFFF;
+    box-shadow: 0px 18px 22px 0px rgba(0,0,0,0.04);
+    border-radius: 8px;
+    padding: 50px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+
+    .item {
+      flex: 1;
+      text-align: center;
+      font-size: 48px;
+      font-weight: bold;
+      color: #202020;
+    }
+
+    .sub {
+      margin-top: 20px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #AEAEAE;
+    }
+  }
+}

src/pages/home/components/head.module.less

@@ -0,0 +1,46 @@
+
+.head {
+  width: 100vw;
+  height: 30vw;
+  background: var(--main-bg-color);
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--main-space);
+
+  .profile {
+    flex: none;
+    font-size: 42px;
+
+    .badge {
+      position: relative;
+      padding-left: 64px;
+      margin-top: var(--main-space);
+      height: 48px;
+      line-height: 48px;
+      background: linear-gradient(0, #E36A00, #FFA658);
+      border-radius: 22px;
+      font-size: 24px;
+
+      .icon {
+        top: -8px;
+        left: -8px;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+        background: linear-gradient(0, #E36A00, #FFA658);
+        border-radius: 50%;
+        border: 8px solid rgba(251, 239, 121, 0.2);
+      }
+    }
+  }
+
+  .avatar {
+    flex: none;
+    width: 16vw;
+    height: 16vw;
+    border-radius: 50%;
+    border: 4px solid #fff;
+  }
+}

src/pages/home/components/menu-card.module.less

@@ -0,0 +1,30 @@
+
+.menu-card-box {
+  width: 100vw;
+  padding: 0 var(--main-space);
+  margin-top: var(--main-space);
+  display: grid;
+  grid-gap: var(--main-space);
+  // (100vw - 4 * --main-space) / 3
+  grid-template-columns: repeat(3, 28vw);
+  grid-auto-rows: 28vw;
+  font-size: 30px;
+  font-weight: 500;
+  color: #202020;
+
+  .item {
+    border-radius: 8px;
+    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06);
+    display: grid;
+    place-items: center;
+
+    .icon {
+      width: 100px;
+      height: 100px;
+      margin: auto;
+      margin-bottom: 20px;
+      background: rgba(51,218,156,0.2);
+      border-radius: 50%;
+    }
+  }
+}

src/pages/home/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/home/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Page from '@/layouts/index';
+import Head from './components/Head';
+import BannerCard from './components/BannerCard';
+import MenuCard from './components/MenuCard';
+import './index.less';
+
+export default (props) => {
+  return (
+    <Page className='index'>
+      <Head />
+      <BannerCard />
+      <MenuCard />
+    </Page>
+  );
+}

src/pages/index/index.less

@@ -0,0 +1,4 @@
+
+.index {
+  color: red;
+}

src/pages/index3/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/index3/index.jsx

@@ -0,0 +1,24 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Text>Hello world!</Text>
+      </View>
+    )
+  }
+}

src/pages/index4/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/index4/index.jsx

@@ -0,0 +1,24 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Text>Hello world!</Text>
+      </View>
+    )
+  }
+}

src/pages/index5/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/index5/index.jsx

@@ -0,0 +1,24 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Text>Hello world!</Text>
+      </View>
+    )
+  }
+}

src/pages/reporting/detail/components/Issue.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import style from './issue.module.less';
+
+export default (props) => {
+  
+  return (
+    <View className={style['issue-container']}>
+      <View class={style.card}>
+        <View className={style.title}>状态</View>
+      </View>
+      <View class={style.card}>
+        <View className={style.title}>问题描述</View>
+      </View>
+      <View class={style.card}>
+        <View className={style.title}>拍照</View>
+      </View>
+    </View>
+  )
+}

src/pages/reporting/detail/components/Map.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View, Map } from '@tarojs/components';
+import style from './map.module.less';
+
+export default (props) => {
+  const { location = '118.805513,31.969974' } = props;
+  const loc = location.split(',')
+  
+  return (
+    <View className={style['map-box']}>
+      <Map
+        className={style.map}
+        longitude={loc[0]}
+        latitude={loc[1]}
+      ></Map>
+      <View className={style.address}>
+        阳光丽景小区
+      </View>
+    </View>
+  )
+}

src/pages/reporting/detail/components/issue.module.less

@@ -0,0 +1,21 @@
+
+.issue-container {
+  margin-top: var(--main-space);
+
+  .card {
+    background: #fff;
+    padding: 0 var(--main-space);
+
+    & + .card {
+      margin-top: 2.67vw;
+    }
+  }
+
+  .title {
+    height: 90px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #202020;
+    line-height: 90px;
+  }
+}

src/pages/reporting/detail/components/map.module.less

@@ -0,0 +1,21 @@
+
+.map-box {
+  width: 100vw;
+
+  .map {
+    width: 100%;
+    height: 50vw;
+  }
+
+  .address {
+    width: 100%;
+    background: #fff;
+    height: 90px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #202020;
+    line-height: 90px;
+    padding: 0 var(--main-space);
+  }
+  
+}

src/pages/reporting/detail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '详情'
+})

src/pages/reporting/detail/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import Page from '@/layouts/index';
+import Map from './components/Map';
+import Issue from './components/Issue';
+
+export default (props) => {
+  
+  return (
+    <Page>
+      <Map />
+      <Issue />
+    </Page>
+  )
+}

src/pages/reporting/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的上报'
+})

src/pages/reporting/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+
+export default (props) => {
+  
+  return (
+    <View></View>
+  )
+}