feat: 初始化项目

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

+{
+  "extends": ["taro"],
+  "rules": {
+    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
+  },
+  "parser": "babel-eslint"
+  }

.gitignore

+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

.npmrc

+registry=https://r.cnpmjs.org
+disturl=https://r.cnpmjs.org/node
+sass_binary_site=https://r.cnpmjs.org/node-sass/
+fse_binary_host_mirror=https://r.cnpmjs.org/fsevents

config/dev.js

+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

+const path = require('path');
+
+console.log(process);
+const config = {
+  projectName: 'xiaoya-agent-program',
+  date: '2020-4-3',
+  designWidth: 750,
+  deviceRatio: {
+    '640': 2.34 / 2,
+    '750': 1,
+    '828': 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: `dist/${process.env.TARO_ENV}`,
+  alias: {
+    '@': path.resolve(__dirname, '..', 'src')
+  },
+  babel: {
+    sourceMap: true,
+    presets: [
+      ['env', {
+        modules: false
+      }]
+    ],
+    plugins: [
+      'transform-decorators-legacy',
+      'transform-class-properties',
+      'transform-object-rest-spread',
+      ['transform-runtime', {
+          helpers: false,
+          polyfill: false,
+          regenerator: true,
+          moduleName: 'babel-runtime'
+        }
+      ]
+    ]
+  },
+  defineConstants: {
+  },
+  mini: {
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+          browsers: [
+            'last 3 versions',
+            'Android >= 4.1',
+            'ios >= 8'
+          ]
+        }
+      },
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 10240 // 设定转换尺寸上限
+        }
+      },
+      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: {
+          browsers: [
+            'last 3 versions',
+            'Android >= 4.1',
+            'ios >= 8'
+          ]
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下：
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  }
+}

package.json

+{
+	"name": "xiaoya-agent-program",
+	"version": "1.0.0",
+	"private": true,
+	"description": "小丫统一版代理商小程序",
+	"templateInfo": {
+		"name": "redux",
+		"typescript": false,
+		"css": "sass"
+	},
+	"scripts": {
+		"build:weapp": "taro build --type weapp",
+		"build:swan": "taro build --type swan",
+		"build:alipay": "taro build --type alipay",
+		"build:tt": "taro build --type tt",
+		"build:h5": "taro build --type h5",
+		"build:rn": "taro build --type rn",
+		"build:qq": "taro build --type qq",
+		"build:quickapp": "taro build --type quickapp",
+		"dev:weapp": "npm run build:weapp -- --watch",
+		"dev:swan": "npm run build:swan -- --watch",
+		"dev:alipay": "npm run build:alipay -- --watch",
+		"dev:tt": "npm run build:tt -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
+		"dev:rn": "npm run build:rn -- --watch",
+		"dev:qq": "npm run build:qq -- --watch",
+		"dev:quickapp": "npm run build:quickapp -- --watch"
+	},
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@tarojs/components": "2.0.0-beta.13",
+		"@tarojs/components-qa": "2.0.0-beta.13",
+		"@tarojs/redux": "2.0.0-beta.13",
+		"@tarojs/redux-h5": "2.0.0-beta.13",
+		"@tarojs/router": "2.0.0-beta.13",
+		"@tarojs/taro": "2.0.0-beta.13",
+		"@tarojs/taro-alipay": "2.0.0-beta.13",
+		"@tarojs/taro-h5": "2.0.0-beta.13",
+		"@tarojs/taro-qq": "2.0.0-beta.13",
+		"@tarojs/taro-quickapp": "2.0.0-beta.13",
+		"@tarojs/taro-swan": "2.0.0-beta.13",
+		"@tarojs/taro-tt": "2.0.0-beta.13",
+		"@tarojs/taro-weapp": "2.0.0-beta.13",
+		"babel-runtime": "^6.26.0",
+		"nervjs": "^1.5.6",
+		"nerv-devtools": "^1.5.6",
+		"redux": "^4.0.0",
+		"redux-logger": "^3.0.6",
+		"redux-thunk": "^2.3.0",
+		"regenerator-runtime": "0.11.1"
+	},
+	"devDependencies": {
+		"@types/react": "^16.4.8",
+		"@types/webpack-env": "^1.13.6",
+		"@tarojs/mini-runner": "2.0.0-beta.13",
+		"@tarojs/webpack-runner": "2.0.0-beta.13",
+		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-decorators-legacy": "^1.3.4",
+		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+		"babel-plugin-transform-object-rest-spread": "^6.26.0",
+		"babel-plugin-transform-runtime": "^6.23.0",
+		"babel-preset-env": "^1.6.1",
+		"babel-eslint": "^8.2.3",
+		"eslint": "^5.16.0",
+		"eslint-config-taro": "2.0.0-beta.13",
+		"eslint-plugin-react": "^7.8.2",
+		"eslint-plugin-react-hooks": "^1.6.1",
+		"eslint-plugin-import": "^2.12.0",
+		"stylelint": "9.3.0",
+		"stylelint-config-taro-rn": "2.0.0-beta.13",
+		"stylelint-taro-rn": "2.0.0-beta.13",
+		"eslint-plugin-taro": "2.0.0-beta.13"
+	}
+}

project.config.json

+{
+  "miniprogramRoot": "./dist",
+  "projectname": "xiaoya-agent-program",
+  "description": "小丫统一版代理商小程序",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/actions/counter.js

+import {
+  ADD,
+  MINUS
+} from '../constants/counter'
+
+export const add = () => {
+  return {
+    type: ADD
+  }
+}
+export const minus = () => {
+  return {
+    type: MINUS
+  }
+}
+
+// 异步的action
+export function asyncAdd () {
+  return dispatch => {
+    setTimeout(() => {
+      dispatch(add())
+    }, 2000)
+  }
+}

src/actions/nav.js

+import {
+  NAV,
+} from '../constants/nav'
+
+export default function save (obj) {
+  return {
+    type: NAV,
+    obj
+  }
+}
\ No newline at end of file

src/actions/user.js

+import {
+  SET_USER_INFO
+} from '@/constants/user'
+
+export const setUserInfo = (data) => {
+  return {
+    type: SET_USER_INFO,
+    payload: data
+  }
+}

src/app.jsx

+import Taro, { Component } from '@tarojs/taro'
+import { Provider } from '@tarojs/redux'
+
+import Index from './pages/index'
+import save from './actions/nav'
+import configStore from './store'
+
+import './app.scss'
+
+// 如果需要在 h5 环境中开启 React Devtools
+// 取消以下注释：
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
+//   require('nerv-devtools')
+// }
+
+const store = configStore()
+class App extends Component {
+
+  config = {
+    pages: [
+      'pages/index/index',
+      'pages/citySelect/index'
+    ],
+    permission: {
+      "scope.userLocation": {
+        "desc": "你的位置信息将用于小程序位置接口的效果展示"
+      }
+    },
+    window: {
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black',
+      navigationStyle: 'custom',
+    }
+  }
+
+  componentDidMount () {
+    Taro.login({
+      success: function (res) {
+        console.log('res...', res)
+      }
+    })
+    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
+    Taro.getSystemInfo({
+      success: res => {
+        let globalData = {}
+        let statusBarHeight = res.statusBarHeight,
+          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
+          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
+        globalData.navHeight = navHeight;
+        globalData.navTop = navTop;
+        globalData.windowHeight = res.windowHeight;
+        globalData.navRight = res.windowWidth - menuButtonObject.right;
+        store.dispatch(save(globalData))
+      },
+      fail(err) {
+        console.log(err);
+      }
+    })
+  }
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
+  // 在 App 类中的 render() 函数没有实际作用
+  // 请勿修改此函数
+  render () {
+    return (
+      <Provider store={store}>
+        <Index />
+      </Provider>
+    )
+  }
+}
+
+Taro.render(<App />, document.getElementById('app'))

src/assets/base.scss

+page {
+  background-color: #f5f5f9;
+}

src/assets/variable.scss

+
+    $BASE-COLOR: #0681FD;
+    $BUY-BTN-BG: linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(215,235,249,1) 94%,rgba(234,246,255,1) 100%);
+    $BUY-BTN-SHADOW: 0px 1px 4px 0px rgba(0,97,169,0.6);
+    $MY-COUPON-TEXT-COLOR: #108EE9;
+  
\ No newline at end of file

src/assets/weapp-variable.scss

+$BASE-COLOR: red;
+$FIELD_ERROR_COLOR: #FF8000;

src/base.config.js

+/**
+ * 项目配置
+ */
+const common = {
+  mapKey: '1d513c9e11da27818bcff443487c995f'
+}
+
+const config = {
+  /**
+   * 开发环境的配置
+   */
+  development: {
+    //http请求baseUrl
+    httpBaseUrl: 'https://cashier.test.miyahub.net',
+    // httpBaseUrl: 'https://cashier.miyahub.com',
+
+  },
+
+  /**
+   * 生产环境配置
+   */
+  production: {
+    //http请求baseUrl
+    httpBaseUrl: 'https://cashier.miyahub.com'
+  }
+}
+
+export default {
+  ...common,
+  ...config[process.env.NODE_ENV]
+}
+

src/components/NavBar/index.jsx

+import Taro, { Component } from '@tarojs/taro'
+import { View, Button, Text } from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+
+
+import './index.scss'
+
+
+@connect(({ nav }) => ({
+  nav
+}), (dispatch) => ({
+}))
+class Index extends Component {
+
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  navBack = () => {
+   Taro.navigateBack({
+     delta: 1
+   })      
+  }
+
+  //回主页
+  toIndex = () => {
+   Taro.navigateTo({
+     url: '/pages/admin/home/index/index'
+   })
+  }
+
+  render () {
+   const {showNav, bgColor, pageName, nav} = this.props
+   console.log(this.props)
+   const titleTop = (nav.globalData.navHeight - nav.globalData.navTop - 20) / 2 + nav.globalData.navTop
+    return (
+     <View className='navbar custom-class' style={`height:${nav.globalData.navHeight}px;background-color:${bgColor}`}>
+      {showNav && <View
+        className='navbar-action-wrap navbar-action-group' 
+        style={`top:${titleTop}px;background-color:rgba(255,255,255,.6)`}
+      >
+      <Image onClick={this.navBack} className='icon' src='http://hh-oss-picture.miyapay.com/box/c66db9ee434dd2061fbb949db0af797d.png' />
+      </View>
+      }
+      {this.props.children}
+      <View class='navbar-title' style={`top:${titleTop}px`}>
+        {pageName}
+      </View>
+     </View>
+    )
+  }
+}
+
+export default Index

src/components/NavBar/index.scss

+.navbar {
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.navbar-title {
+ width: 100%;
+ box-sizing: border-box;
+ padding-left: 115px;
+ padding-right: 115px;
+ text-align: center;
+ position: absolute;
+ left: 0;
+ z-index: 10;
+ color: #333;
+ font-size: 36px;
+ font-weight: bold;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.navbar-action-wrap {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ position: absolute;
+ left: 10px;
+ z-index: 11;
+ line-height: 1;
+ padding-top: 4px;
+ padding-bottom: 4px;
+}
+
+.navbar-action-group {
+ border: 1px solid #f0f0f0;
+ border-radius: 20px;
+ overflow: hidden;
+ .icon{
+  width: 48px;
+  height: 48px;
+ }
+}
+
+.navbar-action_item {
+ padding: 3px 0;
+ color: #333;
+}
+
+.navbar-action-group .navbar-action_item {
+ border-right: 1px solid #f0f0f0;
+ padding: 3px 14px;
+}
+
+.navbar-action-group .last {
+ border-right: none;
+}
\ No newline at end of file

src/constants/counter.js

+export const ADD = 'ADD'
+export const MINUS = 'MINUS'

src/constants/nav.js

+export const NAV = 'SAVENAV'
+export const DELNAV = 'DELNAV'

src/constants/user.js

+export const SET_USER_INFO = 'set user info';

src/helper/baseComponent.js

+import Taro from '@tarojs/taro';
+// import {formatPathQuery} from '@/util/base'
+// import {fetchQrCodeInfo} from '@/api/qrcode';
+import location from '@/helper/location';
+import {getStore} from '@tarojs/redux';
+import {setUserInfo} from '@/actions/user'
+// import userAPI from '@/api/user';
+
+
+
+export default class BaseComponent extends Taro.Component {
+  fetchLocation() {
+    return new Promise((resolve, reject) => {
+      location.getLocation({type: 1, detail: true})
+        .then(res => {
+          let locationInfo = res || {};
+          let user = this.props.user;
+          let data = {
+            current: {
+              ...locationInfo
+            }
+          }
+          // 疑问
+          if (user && !user.city) {
+            data = {...data, ...locationInfo};
+          }
+          
+          this.props.setUserInfo && this.props.setUserInfo(data);
+          resolve(res);
+        }).catch(err => {
+          // console.log(err);
+          Taro.showToast({title: err.errorMessage || '定位失败'})
+          reject(err);
+        })
+    })
+  }
+
+  login() {
+    let store = getStore();
+    Taro.getAuthCode({scopes: 'auth_base'})
+      .then(authCode => {
+        return userAPI.login({authCode: authCode})
+      })
+      .then(res => {
+        let user = res.data || {};
+        // user.hasPhone = 0;
+        store.dispatch(setUserInfo(user));
+      }).catch(err => {
+        console.log('err...', err);
+      })
+  }
+
+  commonQrcode(path){
+    let params = formatPathQuery(path)
+    //通用码逻辑
+    if(params.from === 'qrcode'){
+      fetchQrCodeInfo({
+        qrCode: params.id
+      }).then(res=>{
+        if(res.success && res.data){
+          if(params.type === 'store' && res.data.merchantId && res.data.storeId){
+            Taro.navigateTo({
+              url: `/pages/storeHome/index?merchantId=${res.data.merchantId}&storeId=${res.data.storeId}&storeName=${res.data.storeName||''}`
+            })
+          }
+        }
+      })
+      /*Taro.navigateTo({
+        url: `/pages/storeHome/index?merchantId=${store.merchantId}&storeId=${store.storeId}&storeName=${store.storeName}`
+      })*/
+    }
+  }
+}

src/helper/location.js

+import AMap from '@/lib/amap-wx';
+import config from '@/base.config';
+import Taro from '@tarojs/taro';
+
+let amap = new AMap({
+  key: config.mapKey
+})
+
+let env = Taro.getEnv();
+
+export function getLocation(options) {
+
+  if (env === 'ALIPAY') {
+    return Taro.getLocation(options);
+  } else {
+    if (options.detail) {
+      delete options.detail;
+      return new Promise((resolve, reject) => {
+        Taro.getLocation().then(res => {
+          amap.getRegeo({
+            location: res.longitude + "," + res.latitude,
+            success: res => {
+              let location = Array.isArray(res) && res.length > 0 ? res[0] : {};
+              let address = location.regeocodeData && location.regeocodeData.addressComponent || {};
+              resolve({
+                latitude: location.latitude,
+                longitude: location.longitude,
+                city: address.city,
+                province: address.province,
+                district: address.district,
+                // streetNumber: address.streetNumber
+              })
+            },
+            fail: err => {
+              resolve({
+                ...res,
+                city: '未知城市'
+              });
+            }
+          });
+        }).catch(err => {
+          console.log(err)
+          reject(err);
+        })
+      })
+    }
+
+    return Taro.getLocation(options);
+  }
+}
+
+export default {
+  getLocation
+}
+

src/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title></title>
+  <script>
+    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/lib/amap-wx.js

+import Taro from '@tarojs/taro';
+function AMapWX(a) {
+  (this.key = a.key),
+    (this.requestConfig = {
+      key: a.key,
+      s: "rsx",
+      platform: "WXJS",
+      appname: a.key,
+      sdkversion: "1.2.0",
+      logversion: "2.0"
+    });
+}
+(AMapWX.prototype.getLocation = function(a, b) {
+  Taro.getLocation({
+    type: "gcj02",
+    success: function(a) {
+      var c = a.longitude + "," + a.latitude;
+      wx.setStorage({ key: "userLocation", data: c }), b(c);
+    },
+    fail: function(c) {
+      wx.getStorage({
+        key: "userLocation",
+        success: function(a) {
+          a.data && b(a.data);
+        }
+      }),
+        a.fail({ errCode: "0", errMsg: c.errMsg || "" });
+    }
+  });
+}),
+  (AMapWX.prototype.getRegeo = function(a) {
+    function c(c) {
+      var d = b.requestConfig;
+      // 疑问
+      Taro.request({
+        url: "https://restapi.amap.com/v3/geocode/regeo",
+        data: {
+          key: b.key,
+          location: c,
+          extensions: "all",
+          s: d.s,
+          platform: d.platform,
+          appname: b.key,
+          sdkversion: d.sdkversion,
+          logversion: d.logversion
+        },
+        method: "GET",
+        header: { "content-type": "application/json" },
+        success: function(b) {
+          var d, e, f, g, h, i, j, k, l;
+          b.data.status && "1" == b.data.status
+            ? ((d = b.data.regeocode),
+              (e = d.addressComponent),
+              (f = []),
+              (g = ""),
+              d &&
+                d.roads[0] &&
+                d.roads[0].name &&
+                (g = d.roads[0].name + "附近"),
+              (h = c.split(",")[0]),
+              (i = c.split(",")[1]),
+              d.pois &&
+                d.pois[0] &&
+                ((g = d.pois[0].name + "附近"),
+                (j = d.pois[0].location),
+                j &&
+                  ((h = parseFloat(j.split(",")[0])),
+                  (i = parseFloat(j.split(",")[1])))),
+              e.provice && f.push(e.provice),
+              e.city && f.push(e.city),
+              e.district && f.push(e.district),
+              e.streetNumber && e.streetNumber.street && e.streetNumber.number
+                ? (f.push(e.streetNumber.street), f.push(e.streetNumber.number))
+                : ((k = ""),
+                  d && d.roads[0] && d.roads[0].name && (k = d.roads[0].name),
+                  f.push(k)),
+              (f = f.join("")),
+              (l = [
+                {
+                  iconPath: a.iconPath,
+                  width: a.iconWidth,
+                  height: a.iconHeight,
+                  name: f,
+                  desc: g,
+                  longitude: h,
+                  latitude: i,
+                  id: 0,
+                  regeocodeData: d
+                }
+              ]),
+              a.success(l))
+            : a.fail({ errCode: b.data.infocode, errMsg: b.data.info });
+        },
+        fail: function(b) {
+          a.fail({ errCode: "0", errMsg: b.errMsg || "" });
+        }
+      });
+    }
+    var b = this;
+    a.location
+      ? c(a.location)
+      : b.getLocation(a, function(a) {
+          c(a);
+        });
+  });
+  (module.exports = AMapWX);

src/lib/qrcode/index.js

+import Taro from '@tarojs/taro';
+var barcode = require('./barcode');
+
+// var qrcode = require('./qrcode');
+
+function barc(canvas, code, width, height) {
+	barcode.code128(canvas, code, Taro.convertRpxToPx(width), Taro.convertRpxToPx(height))
+}
+
+// function qrc(id, code, width, height) {
+// 	qrcode.api.draw(code, {
+// 		ctx: wx.createCanvasContext(id),
+// 		width: convert_length(width),
+// 		height: convert_length(height)
+// 	})
+// }
+
+module.exports = {
+	barcode: barc,
+	// qrcode: qrc
+}

src/pages/citySelect/index.js

+import Taro from '@tarojs/taro';
+import {View, Input, Image, ScrollView, Block} from '@tarojs/components';
+import {connect} from '@tarojs/redux';
+import {setUserInfo} from '@/actions/user';
+import BaseComponent from '@/helper/baseComponent';
+import {throttle} from '@/util/base';
+import cityList from './city'
+import NavBar from '@/components/NavBar'
+// const citySimple = cityList.map(item => {
+//   return {name: item.name, letter: item.letter};
+// })
+
+import './index.scss';
+
+const letterMap = {};
+const letterList = [];
+cityList.forEach(city => {
+  if (!letterMap[city.letter]) {
+    letterMap[city.letter] = true;
+    letterList.push(city.letter);
+  }
+})
+
+
+@connect(({ user }) => ({
+  user
+}), (dispatch) => ({
+  setUserInfo (data) {
+    dispatch(setUserInfo(data || {}))
+  }
+}))
+class CitySelect extends BaseComponent {
+
+  config = {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#FFFFFF',
+    navigationBarTitleText: '城市选择',
+    navigationBarTextStyle: 'black',
+    pullRefresh: false
+  }
+
+  state = {
+    cityList: cityList,
+    letterList: letterList,
+    curLetter: '',
+    showSearch: false,
+    keyword: '',
+    searchList: [],
+    page: 1
+  }
+
+  constructor(props) {
+    super(props);
+    this.search = throttle(this.search, 500).bind(this);
+  }
+
+  scrollToLetter = (letter) => {
+    this.setState({
+      curLetter: `city_${letter}`
+    })
+  }
+
+  //文本框获取焦点
+  handleFocus = () => {
+    this.setState({
+      showSearch: true
+    })
+  }
+
+  search = () => {
+
+  }
+
+  handleInput = (e) => {
+    // console.log(e.target.value);
+    let value = e.target.value;
+    let searchList = [];
+    if (value) {
+      searchList = cityList.filter(city => city.name.indexOf(value) > -1);
+    }
+    this.setState({keyword: value, searchList});
+  }
+
+  //清空文本框
+  clearInput = () => {
+    this.setState({keyword: '', searchList: []})
+  }
+
+  //选择城市
+  selectCity = (item) => {
+    const user = this.props.user;
+    this.props.setUserInfo({
+      // prevLongitude: user.longitude,
+      // prevLatitude: user.latitude,
+      longitude: item.longitude,
+      latitude: item.latitude,
+      city: item.name
+    });
+    // my.navigateBack();
+    Taro.navigateBack();
+    // eventCenter.trigger('selectCity', item);
+  }
+
+  //取消搜索
+  cancelSearch = () => {
+    this.setState({showSearch: false})
+  }
+
+  handleLoadMore = () => {
+    // let page = this.state.page + 1;
+    // let arr = cityList.slice((page - 1) * pageSize, page * pageSize);
+
+    // let obj = arr.reduce((result, item, index) => {
+    //   result[`cityList[${(page - 1) * pageSize + index}]`] = item;
+    //   return result;
+    // }, {});
+
+    // console.log('obj....', obj, this);
+    // obj.page = page;
+    // this.state.page = page;
+    // this.state.cityList.push(...arr);
+    // this.$scope.setData(obj);
+  }
+
+  reLocation = () => {
+    const user = this.props.user;
+    let currentLoc = user && user.current;
+    if (currentLoc && currentLoc.city && currentLoc.latitude && currentLoc.longitude) {
+      this.selectCity({
+        name: currentLoc.city,
+        longitude: currentLoc.longitude,
+        latitude: currentLoc.latitude
+      })
+    } else {
+      this.fetchLocation();
+    }
+  }
+
+  render() {
+    const {
+      cityList,
+      letterList,
+      curLetter,
+      showSearch,
+      keyword,
+      searchList
+    } = this.state;
+
+    const user = this.props.user;
+    let scrollStyle = ``
+
+
+    return (
+      <View>
+      <NavBar pageName='我是标题' bgColor='#fff' showNav></NavBar>
+        <View className={`header${showSearch ? ' searching': ''}`}>
+          <View className='search'>
+            <View className='input-wrapper'>
+              <Image className='search-icon' src='http://hh-oss-picture.miyapay.com/box/9e4db125e6a4908a305904fbe531ba6b.png' />
+              <Input value={keyword} onInput={this.handleInput} placeholder='请输入城市名称进行搜索' onFocus={this.handleFocus} />
+              { showSearch && keyword && <Image onClick={this.clearInput} className='clear-icon' src='http://hh-oss-picture.miyapay.com/box/eeb1d09d119af463e73fd768f6ef656b.png' />}
+            </View>
+            { showSearch && <View className='cancel' onClick={this.cancelSearch}>取消</View> }
+          </View>
+          { !showSearch && <View className='current-city'>
+            <Text className='cur-city-label'>当前城市定位</Text>
+            <View className='city-name-wrapper' onClick={this.reLocation}>
+              <Image className='loc-icon' src='http://hh-oss-picture.miyapay.com/box/45648a57e4c6d309cb438757a2029ba5.png' />
+              <Text className='city-name' className=''>{user.current && user.current.city || '未获取定位'}</Text>
+            </View>
+          </View>}
+        </View>
+        <Block>
+          <scroll-view onScrollToLower={this.handleLoadMore} style={`height: ${showSearch ? 0: 'auto'}`} scrollY className='city-list' scroll-into-view={curLetter}>
+            {cityList.map((item, index) => {
+              return (
+                <Block className='city-item' key={index}>
+                  { (index == 0 || cityList[index - 1] && item.letter !== cityList[index - 1].letter) && <View className='section' id={`city_${item.letter}`}>{item.letter}</View>}
+                  <View
+                    className={`city-name${cityList[index + 1] && cityList[index + 1].letter !== item.letter ? ' no-border' : ''}`}
+                    onClick={this.selectCity.bind(this, item)}
+                  >{item.name}</View>
+                </Block>
+              )
+            })}
+          </scroll-view>
+          { !showSearch && <View className='letter-list'>
+            {letterList.map((item, index) => {
+              return <View key={index} className='letter' onClick={this.scrollToLetter.bind(this, item)}>{item}</View>
+            })}
+          </View>}
+        </Block>
+        <ScrollView style={{height: showSearch ? '100%':0}} scrollY className='search-list'>
+          {searchList.map((item, index) => {
+            return <View onClick={this.selectCity.bind(this, item)} key={index} className='city-name'>{item.name}</View>
+          })}
+        </ScrollView>
+      </View>
+    )
+  }
+}
+export default CitySelect
\ No newline at end of file

src/pages/citySelect/index.scss

+@import '@/assets/variable';
+
+page {
+  background-color: #fff;
+}
+
+.header {
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 18px 30px 0;
+  z-index: 20;
+  background-color: #fff;
+
+  &.searching {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #F6F6F6;
+  }
+}
+
+.search {
+  display: flex;
+  align-items: center;
+
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 80px;
+    padding: 0 30px 0 20px;
+    border-radius: 8px;
+    background-color: #F6F6F6;
+  }
+
+  input {
+    flex: 1;
+    font-size: 28px;
+    background-color: transparent;
+  }
+
+  &-icon {
+    width: 38px;
+    height: 36px;
+  }
+
+  .clear-icon {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+  }
+
+  .cancel {
+    font-size: 28px;
+    color: $BASE-COLOR;
+    margin-left: 30px;
+  }
+}
+
+.city-list {
+  position: absolute;
+  top: 200px;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.current-city {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28px;
+  height: 102px;
+  padding-right: 10px;
+
+  .cur-city-label {
+    font-weight: 500;
+  }
+
+  .city-name-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .loc-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 8px;
+  }
+
+}
+
+
+.section {
+  height: 60px;
+  padding-left: 30px;
+  line-height: 60px;
+  font-size: 28px;
+  font-weight: 500;
+  background-color: #F9F9F9;
+}
+
+.city-name {
+  height: 100px;
+  line-height: 100px;
+  margin-left: 40px;
+  font-size: 28px;
+  color: #666666;
+  border-bottom: 1px solid #ECECEC;
+
+  &.no-border {
+    border-width: 0;
+  }
+}
+
+.letter-list {
+  position: fixed;
+  top: 420px;
+  right: 0px;
+  width: 50px;
+  font-size: 24px;
+  line-height: 34px;
+  color: #999999;
+  z-index: 30;
+}
+
+.search-list {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 118px;
+}

src/pages/index/index.jsx

+import Taro from '@tarojs/taro'
+import BaseComponent from '@/helper/baseComponent';
+import { View, Image, Text, Button } from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+import { setUserInfo } from '@/actions/user'
+import NavBar from '@/components/NavBar'
+import './index.scss'
+
+
+@connect(({ user, nav }) => ({
+  user, nav
+}), (dispatch) => ({
+  setUserInfo (data) {
+    dispatch(setUserInfo(data || {}))
+  },
+}))
+class Index extends BaseComponent {
+
+  config = {
+    navigationBarTitleText: '首页'
+  }
+
+  state = {
+    located: false
+  }
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+  componentDidMount() {
+    this.handleLocation();
+  }
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  // 获取地址权限
+  handleLocation() {
+    this.fetchLocation().then(res => {
+      this.setState({located: true})
+    }).catch(err => {
+      this.setState({located: true})
+    })
+  }
+
+  selectCity(){
+    Taro.navigateTo({
+      url: '/pages/citySelect/index'
+    })
+  }
+  bindgetuserinfo (e) {
+    console.log(e)
+  }
+  render () {
+    const {nav} = this.props
+    const titleTop = nav.globalData.navHeight - nav.globalData.navTop
+    const {located} = this.state;
+    const user = this.props.user;
+    console.log('user', user)
+    // const noLocation = located && (!user.longitude || !user.latitude);
+    const noLoc = (!user || !user.longitude || !user.latitude);
+    return (
+      <View>
+        <NavBar pageName='我是标题' bgColor='#fff' showNav={false}>
+          <View
+            style={`left:${nav.globalData.navRight}px;top:${titleTop}px;background-color:rgba(255,255,255,.6)`}
+            className='city'
+            onClick={this.selectCity}
+          >
+            <Image className='loc-icon' src='http://hh-oss-picture.miyapay.com/box/8dcd356a4ae1ff0c2c0ac9fd69733ab8.png' />
+            <Text className={`${noLoc ? 'no-loc' : ''}`}>{noLoc ? '未获取定位' : user.city}</Text>
+          </View>
+        </NavBar>
+        <Button onGetUserInfo={this.bindgetuserinfo} openType='getUserInfo'>获取授权</Button>
+      </View>
+    )
+  }
+}
+
+export default Index

src/pages/index/index.scss

+.index {
+  flex-direction: column;
+  width: 100%;
+}
+.city {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  font-size: 32px;
+  font-weight: 500;
+  z-index: 11;
+  color: #333;
+  .loc-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+  }
+}
\ No newline at end of file

src/reducers/counter.js

+import { ADD, MINUS } from '../constants/counter'
+
+const INITIAL_STATE = {
+  num: 0
+}
+
+export default function counter (state = INITIAL_STATE, action) {
+  switch (action.type) {
+    case ADD:
+      return {
+        ...state,
+        num: state.num + 1
+      }
+     case MINUS:
+       return {
+         ...state,
+         num: state.num - 1
+       }
+     default:
+       return state
+  }
+}

src/reducers/index.js

+import { combineReducers } from 'redux'
+import counter from './counter'
+import nav from './nav'
+import user from './user'
+
+export default combineReducers({
+  counter,
+  nav,
+  user,
+})

src/reducers/nav.js

+import { NAV } from '../constants/nav'
+
+const INITIAL_STATE = {
+  globalData:{}
+}
+
+export default function nav (state = INITIAL_STATE, action) {
+  console.log(action)
+  switch (action.type) {
+    case NAV:
+      return {
+        ...state,
+        globalData: action.obj,
+      }
+     default:
+       return state
+  }
+}

src/reducers/user.js

+import {
+  SET_USER_INFO
+} from '@/constants/user'
+import Taro from '@tarojs/taro';
+
+const INITIAL_STATE = {
+
+}
+
+export default function userInfo (state = INITIAL_STATE, action) {
+  console.log('action', action)
+  switch (action.type) {
+
+    case SET_USER_INFO:
+      // Taro.setStorageSync('user', JSON.stringify(action.payload || {}));
+      return {
+        ...state,
+        ...action.payload,
+        prevLongitude: state.longitude || '',
+        prevLatitude: state.latitude || ''
+      }
+
+     default:
+       return state
+  }
+}

src/store/index.js

+import { createStore, applyMiddleware, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import rootReducer from '../reducers'
+
+const composeEnhancers =
+  typeof window === 'object' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+    }) : compose
+
+const middlewares = [
+  thunkMiddleware
+]
+
+if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV !== 'quickapp') {
+  middlewares.push(require('redux-logger').createLogger())
+}
+
+const enhancer = composeEnhancers(
+  applyMiddleware(...middlewares),
+  // other store enhancers if any
+)
+
+export default function configStore () {
+  const store = createStore(rootReducer, enhancer)
+  return store
+}

src/util/base.js

+
+/**
+ * 节流函数
+ * @param {*} func
+ * @param {*} wait
+ * @param {*} options
+ */
+export function throttle(func, wait, options) {
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+  if (!options) options = {};
+  var later = function() {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return function() {
+    var now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+};
+
+//格式化距离
+export const formatDistance = (distance) => {
+  if (!distance) return '';
+  if (distance < 1000) {
+    return `${distance}m`;
+  }
+  return `${(distance / 1000).toFixed(1)}km`;
+}
+
+
+export const formatTime = (timestamp, fmt = 'yyyy-MM-dd hh:mm:ss', ms = true) => {
+  const date = new Date()
+  let fmtResult = fmt
+  date.setTime(ms ? timestamp : timestamp * 1000)
+
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    S: date.getMilliseconds(),
+  }
+
+  if (/(y+)/.test(fmt)) {
+    fmtResult = fmt.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length))
+  }
+
+  Object.keys(o).forEach(k => {
+    if (new RegExp(`(${k})`).test(fmtResult)) {
+      fmtResult = fmtResult.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length),
+      )
+    }
+  })
+
+  return fmtResult
+}
+
+export const formatPathQuery = (path) => {
+  let params = {}
+  if(!path){
+    return params;
+  }
+  try{
+    let querys = path.replace(/[^\?]*\?|#.*$/g, '').split('&')
+    for(let query of querys){
+      let keys = query.split('=')
+      params[keys[0]] = keys[1]
+    }
+    return params;
+  }
+  catch (e) {
+    return params;
+  }
+}
+
+export const formatMoney = (money) => {
+  try {
+   return (+money / 100);
+  } catch(err) {
+    console.log('errr', err);
+    return ''
+  }
+}

src/util/request.js

+import Taro from '@tarojs/taro'
+import config from '@/base.config'
+import {getStore} from '@tarojs/redux';
+import {CHANNEL} from '@/constants/base';
+// import {encrypt} from './encrypt';
+let systemInfo = Taro.getSystemInfoSync();
+let env = Taro.getEnv();
+
+class Request {
+
+  constructor() {
+    this.genRequestMethod();
+  }
+
+  /**
+   * 处理参数
+   * @param {*} url
+   * @param {*} options
+   * @param {*} data
+   */
+  handleParams(url, options) {
+    const {header = {}, ...rest} = options;
+
+    let userState = getStore().getState().user;
+    // console.log('userState.....', userState);
+    const {token} = userState || {};
+
+    if (!/http|https/.test(url)) {
+      url = `${config.httpBaseUrl ? config.httpBaseUrl : ''}${url}`
+    };
+
+    let params = {
+      url,
+      timeout: 10 * 1000,
+      header: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        'token': token || '',
+        ...header,
+      },
+      ...rest
+    };
+
+    if (!token) {
+      delete params.header.token;
+    }
+
+    return params;
+  }
+
+  /**
+   * 处理返回结果
+   * @param {*} res
+   * @param {*} resolve
+   * @param {*} reject
+   */
+  handleResult(res, resolve, reject) {
+    //防止后端返回的是一个字符串
+    if (typeof res.data === 'string') {
+      try {
+        res.data = JSON.parse(res.data);
+      } catch(err) {
+
+      }
+    }
+
+    if (res.statusCode == 200 && res.data.success) {
+      resolve(res.data);
+    }
+
+    if (res.statusCode == 200 && !res.data.success) {
+      Taro.showToast({title: res.data.errorMsg, icon: 'none'});
+      //未登陆
+      if (res.data.errorCode == 403) {
+        //如果跳过登录就不跳了
+        //   Taro.navigateTo({url: '/pages/login/index?back=1'})
+        // })
+      }
+      reject(res.data);
+    }
+
+    if (res.statusCode != 200) {
+      Taro.showToast({title: '服务器异常', icon: 'none'});
+      reject({
+        errorCode: '1000000',
+        errorMsg: '服务器异常'
+      })
+    }
+  }
+
+  /**
+   * 生成请求方法
+   */
+  genRequestMethod() {
+    ['get', 'post', 'delete', 'put'].forEach(methodName => {
+      this[methodName] = (url, data = {}, options = {}) => {
+        return new Promise((resolve, reject) => {
+          let params = this.handleParams(url, options);
+          params.timeout = 100 * 1000;
+          params.method = methodName.toUpperCase();
+          let timeStamp = (new Date()).getTime();
+
+          const channel = CHANNEL[env];
+
+          params.data = {
+            appId: channel.id,
+            batchNo: timeStamp,
+            timestamp: timeStamp,
+            charset: 'utf-8',
+            format: 'JSON',
+            signType: 'RSA2',
+            channel: channel.name,
+            // sign: 'xiaoya',
+            deviceNo: timeStamp,
+            ...data,
+          };
+
+          // if (url.indexOf('/login') > -1) {
+          //   params.data.appletType = 2;
+          // }
+          // let sign = encrypt(params.data);
+
+          params.data.sign = 'xiaoya';
+          // params.data.signType = 'RSA2';
+
+
+          if (methodName === 'post') {
+            params.data = JSON.stringify(params.data || {});
+          }
+
+          // console.log(params.data);
+
+          Taro.request(params)
+            .then(res => {
+              // console.log('res....', res);
+              // try {
+                this.handleResult(res, resolve, reject);
+              // } catch(err) {
+              //   console.log('ggggggg', err);
+              // }
+
+            })
+            .catch(err => {
+              // console.log('errr.......', err);
+              reject({
+                errorCode: '1000000',
+                errorMsg: '服务器异常'
+              })
+            })
+        })
+      }
+    })
+  }
+
+  /**
+   * 上传文件
+   */
+  upload(url, options = {}) {
+    if (typeof my !== 'undefined') {
+      //做一下兼容，支付宝/微信文件名字段不一样
+      if (options.name) {
+        options.fileName = options.name;
+        options.fileType = options.fileType || 'image';
+        // delete options.name;
+      }
+    }
+
+    let params = this.handleParams(url, options);
+    return new Promise((resolve, reject) => {
+      Taro.uploadFile(params)
+        .then(res => {
+          this.handleResult(res, resolve, reject);
+        })
+        .catch(err => {
+          reject({
+            errorCode: '1000000',
+            errorMsg: '服务器异常'
+          })
+        })
+    })
+  }
+}
+
+export default new Request();