Skip to content

T
taro-ordering
Commit 22da43d0 by phobal
Options

🎉 init

parents
Showing with 1405 additions and 0 deletions
.editorconfig 0 → 100644
# 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 0 → 100644
{
"extends": ["taro"],
"rules": {
"no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
},
"parser": "babel-eslint"
}
.gitignore 0 → 100644
/dist
.temp/
.rn_temp/
node_modules/
package-lock.json
.idea
.vscode/
*.log
.DS_Store
npm-debug.log
npm-debug.log.*
selenium-debug.log
.vscode
LICENSE 0 → 100644
MIT License
Copyright (c) 2018 bowen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
README.md 0 → 100644
# 前言
**Taro** 是一套遵循 [React](https://reactjs.org/) 语法规范的 **多端开发** 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 **Taro**，我们可以只书写一套代码，再通过 **Taro** 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、React-Native 等）运行的代码。
该项目基于Taro，构建了一个女装租赁平台，涉及了一个电商平台完整的业务逻辑和功能点，如果这个项目能驾驭的了，相信大部分公司的其他React项目也就不在话下。
如遇网络不佳，请移步[国内镜像加速节点](https://gitee.com/easytuan/taro-msparis)
# 效果演示
暂无
# 技术栈
React + taro + dva
## 项目运行
```
git clone git@github.com:EasyTuan/taro-msparis.git
# 国内镜像加速节点:git@gitee.com:easytuan/taro-msparis.git
cd taro-msparis
npm install
npm run dev:weapp
# pages模版快速生成
npm run tep `文件名`
```
## 项目说明
**git分支说明：**
init：框架整体结构，不涉及任何业务逻辑
master：项目的稳定版本
feature：项目开发分支
# 目标功能
暂定
# 业务介绍
目录结构
├── .temp // H5编译结果目录
├── .rn_temp // RN编译结果目录
├── dist // 小程序编译结果目录
├── config // Taro配置目录
│ ├── dev.js // 开发时配置
│ ├── index.js // 默认配置
│ └── prod.js // 打包时配置
├── screenshots // 项目截图，和项目开发无关
├── src // 源码目录
│ ├── components // 组件
│ ├── config // 项目开发配置
│ ├── images // 图片文件
│ ├── models // redux models
│ ├── pages // 页面文件目录
│ │ └── home
│ │ ├── index.js // 页面逻辑
│ │ ├── index.scss // 页面样式
│ │ ├── model.js // 页面models
│ │ └── service.js // 页面api
│ ├── styles // 样式文件
│ ├── utils // 常用工具类
│ ├── app.js // 入口文件
│ └── index.html
├── package.json
└── template.js // pages模版快速生成脚本,执行命令 npm run tep `文件名`
# 说明
> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
> 或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
> 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍
# 捐助
如有帮助，欢迎打赏
<img src="screenshots/wechat.jpg" width="200px" /> <img src="screenshots/alipay.jpg" width="200px" />
# License
[MIT](LICENSE)
config/dev.js 0 → 100644
module.exports = {
env: {
NODE_ENV: '"development"'
},
defineConstants: {
},
weapp: {},
h5: {
devServer: {
host: '0.0.0.0', // 如需局域网（如手机）访问，请更换为0.0.0.0
port: 8088,
https: false
}
}
}
config/index.js 0 → 100644
const config = {
projectName: 'taro-ordering',
date: '2018-9-27',
// 设计稿尺寸
designWidth: 750,
sourceRoot: 'src',
outputRoot: 'dist',
// 通用插件配置
plugins: {
babel: {
sourceMap: true,
presets: [
'env'
],
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread'
]
},
},
// 全局变量设置
defineConstants: {},
// 小程序端专用配置
weapp: {
module: {
postcss: {
autoprefixer: {
enable: true
},
// 小程序端样式引用本地资源内联配置
url: {
enable: true,
limit: 10240
}
}
}
},
// H5 端专用配置
h5: {
publicPath: '/',
staticDirectory: 'static',
module: {
postcss: {
autoprefixer: {
enable: true
}
}
}
}
}
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}
config/prod.js 0 → 100644
module.exports = {
env: {
NODE_ENV: '"production"'
},
defineConstants: {
},
weapp: {},
h5: {}
}
package.json 0 → 100644
{
"name": "taro-ordering",
"version": "1.0.0",
"private": true,
"description": "A taro project",
"main": "index.js",
"scripts": {
"dev:weapp": "npm run build:weapp -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"build:weapp": "taro build --type weapp",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"tep": "node template"
},
"author": "",
"license": "MIT",
"dependencies": {
"@tarojs/async-await": "1.0.7",
"@tarojs/components": "1.0.7",
"@tarojs/redux": "1.0.7",
"@tarojs/redux-h5": "1.0.7",
"@tarojs/rn-runner": "1.0.7",
"@tarojs/router": "1.0.7",
"@tarojs/taro": "1.0.7",
"@tarojs/taro-h5": "1.0.7",
"@tarojs/taro-weapp": "1.0.7",
"dva-core": "^1.4.0",
"dva-loading": "^2.0.5",
"nervjs": "^1.3.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"taro-ui": "^1.3.5"
},
"devDependencies": {
"@tarojs/plugin-babel": "1.0.7",
"@tarojs/plugin-csso": "1.0.7",
"@tarojs/plugin-sass": "1.0.7",
"@tarojs/plugin-uglifyjs": "1.0.7",
"@tarojs/webpack-runner": "1.0.7",
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"babel-eslint": "^8.2.3",
"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-preset-env": "^1.6.1",
"eslint": "^4.19.1",
"eslint-config-taro": "1.0.7",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-taro": "1.0.7"
}
}
project.config.json 0 → 100644
{
"miniprogramRoot": "./dist",
"projectname": "taro-msparis",
"description": "",
"appid": "wxd2a161b3c8752b6f",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}
src/app.js 0 → 100644
import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import Home from './pages/home'
import dva from './utils/dva'
import models from './models'
import { Provider } from '@tarojs/redux'
import './styles/base.scss'
const dvaApp = dva.createApp({
initialState: {},
models: models,
});
const store = dvaApp.getStore();
class App extends Component {
config = {
pages: [
'pages/home/index',
'pages/cart/index',
'pages/user/index',
],
window: {
backgroundTextStyle: 'dark',
navigationBarBackgroundColor: '#346b30',
navigationBarTitleText: '点餐小程序',
navigationBarTextStyle: 'white'
},
tabBar: {
list: [{
pagePath: "pages/home/index",
text: "首页",
iconPath: "./images/tab/icon-home.png",
selectedIconPath: "./images/tab/icon-home-selected.png"
}, {
pagePath: "pages/cart/index",
text: "订单",
iconPath: "./images/tab/icon-order.png",
selectedIconPath: "./images/tab/icon-order-selected.png"
},{
pagePath: "pages/user/index",
text: "更多",
iconPath: "./images/tab/icon-mine.png",
selectedIconPath: "./images/tab/icon-mine-selected.png"
}],
color: '#fff',
selectedColor: '#fff',
backgroundColor: '#346b30',
borderStyle: '#ccc'
}
}
componentDidMount() {
}
render() {
return (<Provider store={store}>
<Home/>
</Provider>);
}
}
Taro.render(<App/>, document.getElementById('app'))
src/components/Loading/Loading.js 0 → 100644
import { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import './loading.scss'
export default class Loading extends Component {
render() {
return (
<View className="loading">
<View className="loading-chrysanthemum"></View>
</View>
)
}
}
src/components/Loading/loading.scss 0 → 100644
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.loading-chrysanthemum {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') no-repeat;
background-size: cover;
width: 80px;
height: 80px;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
src/config/index.js 0 → 100644
// 请求连接前缀
export const baseUrl = 'https://api.sxl.cn';
// 输出日志信息
export const noConsole = false;
src/index.html 0 → 100644
<!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>Taro</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/models/index.js 0 → 100644
import cart from '../pages/cart/model'
import home from '../pages/home/model'
import user from '../pages/user/model'
import products from '../pages/productTabs/model'
export default [
cart,
home,
user,
products,
]
src/pages/cart/index.js 0 → 100644
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
@connect(({cart}) => ({
...cart,
}))
export default class Cart extends Component {
config = {
navigationBarTitleText: 'cart',
};
componentDidMount = () => {
};
render() {
return (
<View className="cart-page">
cart
</View>
)
}
}
src/pages/cart/index.scss 0 → 100644
@import "../../styles/mixin";
.cart-page {
@include wh(100%, 100%);
}
src/pages/cart/model.js 0 → 100644
import * as cartApi from './service';
export default {
namespace: 'cart',
state: {
},
effects: {
* effectsDemo(_, { call, put }) {
const { status, data } = yield call(cartApi.demo, {});
if (status === 'ok') {
yield put({ type: 'save',
payload: {
topData: data,
} });
}
},
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
src/pages/cart/service.js 0 → 100644
import Request from '../../utils/request';
export const demo = data => Request({
url: '路径',
method: 'POST',
data,
});
src/pages/home/index.js 0 → 100644
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { AtAvatar } from 'taro-ui'
import ProductTabs from '../productTabs/productTabs'
import './index.scss';
@connect(({home}) => ({
...home,
}))
export default class Index extends Component {
config = {
navigationBarTitleText: '菜单',
}
componentDidMount = () => {
this.props.dispatch({
type: 'home/load',
})
}
render() {
const { settings } = this.props
const storeFronts = settings.storefronts && settings.storefronts[0] || {}
return (
<View className="home-page">
<View className="store">
<View className="store-inner">
<View className="logo-wrap">
<AtAvatar className="logo" circle image="https://user-assets.sxlcdn.com/images/450112/Fp6dr7TBVawyKJqTTG40X_bVZ_Nd.jpg?imageMogr2/strip/auto-orient/thumbnail/2000x3000%3E/quality/90!/interlace/1/format/jpg" />
</View>
<View className="info">
<View className="name">{storeFronts.name}</View>
<View className="take-out-settings">外卖服务起送价10元 · 配送费2元 </View>
</View>
</View>
</View>
<ProductTabs />
</View>
)
}
}
src/pages/home/index.scss 0 → 100644
@import "../../styles/mixin";
.home-page {
@include wh(100%, 100%);
.store {
padding-top: 30px;
padding-bottom: 22px;
border-bottom: 1px solid #e8e8e8;
.store-inner {
display: flex;
.logo-wrap {
width: 200px;
text-align: center;
display:flex;
justify-content:center;
.logo {
width: 92px;
height: 92px;
border-radius: 50%;
}
}
.info {
display: flex;
justify-content: center;
flex-direction: column;
.name {
font-weight: bold;
color: #000;
font-size: 34px;
padding-bottom: 6px;
}
.take-out-settings {
font-size: 26px;
color: #6d6d6d;
}
}
}
}
}
src/pages/home/model.js 0 → 100644
import * as homeApi from './service';
export default {
namespace: 'home',
state: {
settings: {},
},
effects: {
* load(_, {
call,
put
}) {
const { data } = yield call(homeApi.settings, {
siteId: '11536422',
})
yield put({
type: 'saveSettings',
payload: {
settings: data,
}
})
},
},
reducers: {
saveSettings(state, {
payload
}) {
return { ...state,
...payload
};
},
},
};
src/pages/home/service.js 0 → 100644
import Request from '../../utils/request';
export const settings = data => Request({
url: `/r/v1/sites/${data.siteId}/restaurant/settings`,
method: 'GET',
});
src/pages/productTabs/model.js 0 → 100644
import * as api from './service'
export default {
namespace: 'products',
state: {
categories: [],
categoryId: null,
products: [],
},
effects: {
* categories(_, {
call,
put,
}) {
const { data } = yield call(api.categories, {
siteId: '11536422',
})
yield put({
type: 'save',
payload: {
categories: data
},
})
yield put({
type: 'save',
payload: {
categoryId: data && data.length && data[0].id,
},
})
yield put({
type: 'products',
})
},
* products(_, {
call,
put,
select,
}) {
const { categoryId } = yield select(state => state.products)
const { data } = yield call(api.products, {
storefrontsId: '14171',
categoryId,
from: 0,
per: 999,
})
yield put({
type: 'save',
payload: {
products: data.products
}
})
}
},
reducers: {
save (state, {
payload,
}) {
return {
...state,
...payload,
}
},
}
}
src/pages/productTabs/productTabs.js 0 → 100644
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtTabs, AtTabsPane } from 'taro-ui'
import { connect } from '@tarojs/redux'
import Loading from '../../components/Loading/Loading'
@connect(({ products, loading }) => ({
...products,
...loading,
}))
export default class ProductTabs extends Component {
handleClick (value) {
const { categories } = this.props
this.props.dispatch({
type: 'products/save',
payload: {
categoryId: categories[value].id,
}
})
this.props.dispatch({
type: 'products/products'
})
this.setState({
current: value,
})
}
componentDidMount() {
const { dispatch } = this.props
dispatch({
type: 'products/categories'
})
}
getTitle() {
const { categories } = this.props
const names = categories.map(category => {
return {
title: category.name,
}
})
return names
}
render () {
const { categories, categoryId, global } = this.props
const { current } = this.state
const tabList = this.getTitle()
return (
<AtTabs
current={current}
scroll
height='400px'
tabDirection='vertical'
tabList={tabList}
onClick={this.handleClick.bind(this)}>
{
global ?
(<Loading />) :
categories.map(category => {
return (
<AtTabsPane tabDirection='vertical' current={current} index={category.id} key={category.id}>
<View style='font-size:18px;text-align:center;height:200px;'>标签页${category.id}的内容</View>
</AtTabsPane>
)
})
}
</AtTabs>
)
}
}
src/pages/productTabs/service.js 0 → 100644
import Request from '../../utils/request';
export const categories = data => Request({
url: `/r/v1/sites/${data.siteId}/restaurant/categories`,
method: 'GET',
})
export const products = data => {
const { storefrontsId, ...otherParams } = data
return Request({
url: `/r/v1/restaurant/storefronts/${storefrontsId}/products`,
method: 'GET',
data: otherParams,
})
}
src/pages/user/index.js 0 → 100644
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
@connect(({user}) => ({
...user,
}))
export default class User extends Component {
config = {
navigationBarTitleText: 'user',
};
componentDidMount = () => {
};
render() {
return (
<View className="user-page">
user
</View>
)
}
}
src/pages/user/index.scss 0 → 100644
@import "../../styles/mixin";
.user-page {
@include wh(100%, 100%);
}
src/pages/user/model.js 0 → 100644
import * as userApi from './service';
export default {
namespace: 'user',
state: {
},
effects: {
* effectsDemo(_, { call, put }) {
const { status, data } = yield call(userApi.demo, {});
if (status === 'ok') {
yield put({ type: 'save',
payload: {
topData: data,
} });
}
},
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
src/pages/user/service.js 0 → 100644
import Request from '../../utils/request';
export const demo = data => Request({
url: '路径',
method: 'POST',
data,
});
src/styles/base.scss 0 → 100644
@import "./mixin";
@import "./iconfont";
page, body {
font-size: 32px;
height: 100%;
background-color: $bg-color-base;
color: $color-dark;
box-sizing: border-box;
}
image {
height: auto;
}
//******常用类******/
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1;
&:after {
content: '';
display: block;
clear: both;
}
}
.left {
float: left;
}
.right {
float: right;
}
.hide {
display: none;
}
.show {
display: block;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.position-center {
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
}
src/styles/iconfont.scss 0 → 100644
@font-face {
font-family: "iconfont_1520482582531";
src: url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.eot');
src: url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.eot?#iefix') format('eot'),
url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont_1520482582531" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-10day:before {
content: "\E001";
}
.icon-15day:before {
content: "\E002";
}
.icon-4day:before {
content: "\E003";
}
.icon-5day:before {
content: "\E004";
}
.icon-7day:before {
content: "\E005";
}
.icon-addcolour:before {
content: "\E006";
}
.icon-arrowbuttombig:before {
content: "\E007";
}
.icon-arrowbuttomsmallcolour:before {
content: "\E008";
}
.icon-arrowbuttomsmall:before {
content: "\E009";
}
.icon-arrowsright:before {
content: "\E00A";
}
.icon-bagfill:before {
content: "\E00B";
}
.icon-bag:before {
content: "\E00C";
}
.icon-calendarright:before {
content: "\E00D";
}
.icon-circleround:before {
content: "\E00E";
}
.icon-clothefill:before {
content: "\E00F";
}
.icon-clothe:before {
content: "\E010";
}
.icon-coathangerfill:before {
content: "\E011";
}
.icon-coathanger:before {
content: "\E012";
}
.icon-correctrigh:before {
content: "\E013";
}
.icon-correctroundadd:before {
content: "\E014";
}
.icon-correctroundrightcolour:before {
content: "\E015";
}
.icon-correctroundright:before {
content: "\E016";
}
.icon-customerservice:before {
content: "\E017";
}
.icon-cyclecolour:before {
content: "\E018";
}
.icon-diamondgray:before {
content: "\E019";
}
.icon-doublearrowright:before {
content: "\E01A";
}
.icon-eyegray:before {
content: "\E01B";
}
.icon-focuscolour:before {
content: "\E01C";
}
.icon-focusgray:before {
content: "\E01D";
}
.icon-heartcolour:before {
content: "\E01E";
}
.icon-heartgray:before {
content: "\E01F";
}
.icon-heart:before {
content: "\E020";
}
.icon-homefill:before {
content: "\E021";
}
.icon-home:before {
content: "\E022";
}
.icon-loveexpresscolour:before {
content: "\E023";
}
.icon-numbercolour:before {
content: "\E024";
}
.icon-personmyfill:before {
content: "\E025";
}
.icon-personmy:before {
content: "\E026";
}
.icon-querycolour:before {
content: "\E027";
}
.icon-seacher:before {
content: "\E028";
}
.icon-tagcolour:before {
content: "\E029";
}
.icon-triangularcolour:before {
content: "\E02A";
}
.icon-triangulargray:before {
content: "\E02B";
}
.icon-xinxingshixin:before {
content: "\E02C";
}
.icon-xinxingkongxin:before {
content: "\E02D";
}
.icon-wodeshixin:before {
content: "\E02E";
}
.icon-wodekongxin:before {
content: "\E02F";
}
.icon-shoutidai:before {
content: "\E030";
}
.icon-xingxingshixin:before {
content: "\E031";
}
.icon-xingxingkongxin:before {
content: "\E032";
}
.icon-yifushixin:before {
content: "\E033";
}
.icon-yifukongxin:before {
content: "\E034";
}
.icon-yidaishixin:before {
content: "\E035";
}
.icon-yidaikongxin:before {
content: "\E036";
}
.icon-dingdanshixin:before {
content: "\E037";
}
.icon-dingdankongxin:before {
content: "\E038";
}
src/styles/mixin.scss 0 → 100644
/* colors
-------------------------- */
$color-primary : #D87182 !default;
$color-dark : #333 !default;
$color-dark2 : #666 !default;
$color-light: #888 !default;
/* button-colors
-------------------------- */
$btn-active: #F26D83 !default;
$btn-disabled: #CCC !default;
$btn-disabled-1: mix(#fff, $btn-active, 70%) !default;
/* 53a8ff */
/* background-colors
-------------------------- */
$bg-color-base: #fff !default;
$bg-color-light : #f9f9f9 !default; //页面浅灰背景&图片浅灰背景
$bg-color-danger: #F9EFEF !default; //页面浅红背景&按钮边框
$bg-color-panel: #EC5D75 !default;
/* tag-colors
-------------------------- */
$tag-primary:#D87182 !default;
$tag-dark:#555 !default;
/* methods
-------------------------- */
// 背景图片地址和大小
@mixin bg($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
}
// 定位上下左右居中
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 定位上下居中
@mixin ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
// 定位左右居中
@mixin cl {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
// 宽高
@mixin wh($width, $height) {
width: $width;
height: $height;
}
// 字体大小，颜色
@mixin sc($size, $color) {
font-size: $size;
color: $color;
}
src/utils/dva.js 0 → 100644
import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt) {
// redux日志
// opt.onAction = [createLogger()];
app = create(opt);
app.use(createLoading({}));
if (!global.registered) opt.models.forEach(model => app.model(model));
global.registered = true;
app.start();
store = app._store;
app.getStore = () => store;
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch;
}
}
src/utils/request.js 0 → 100644
import Taro from '@tarojs/taro';
import { baseUrl, noConsole } from '../config';
export default (options = { method: 'GET', data: {} }) => {
if (!noConsole) {
console.log(`${new Date().toLocaleString()}【 M=${options.url} 】P=${JSON.stringify(options.data)}`);
}
return Taro.request({
url: baseUrl + options.url,
data: options.data,
header: {
'Content-Type': 'application/json',
},
method: options.method.toUpperCase(),
}).then((res) => {
const { statusCode, data } = res;
if (statusCode >= 200 && statusCode < 300) {
if (!noConsole) {
console.log(`${new Date().toLocaleString()}【 M=${options.url} 】【接口响应：】`,res.data);
}
if (data.status !== 200) {
Taro.showToast({
title: `${res.data.meta.devMessage}~` || res.data.status,
icon: 'none',
mask: true,
});
}
return data;
} else {
throw new Error(`网络请求错误，状态码${statusCode}`);
}
})
}
template.js 0 → 100644
/**
* pages模版快速生成脚本,执行命令 npm run tep `文件名`
*/
const fs = require('fs');
const dirName = process.argv[2];
if (!dirName) {
console.log('文件夹名称不能为空！');
console.log('示例：npm run tep test');
process.exit(0);
}
// 页面模版
const indexTep = `import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
@connect(({${dirName}}) => ({
...${dirName},
}))
export default class ${titleCase(dirName)} extends Component {
config = {
navigationBarTitleText: '${dirName}',
};
componentDidMount = () => {
};
render() {
return (
<View className="${dirName}-page">
${dirName}
</View>
)
}
}
`;
// scss文件模版
const scssTep = `@import "../../styles/mixin";
.${dirName}-page {
@include wh(100%, 100%);
}
`;
// model文件模版
const modelTep = `import * as ${dirName}Api from './service';
export default {
namespace: '${dirName}',
state: {
},
effects: {
* effectsDemo(_, { call, put }) {
const { status, data } = yield call(${dirName}Api.demo, {});
if (status === 'ok') {
yield put({ type: 'save',
payload: {
topData: data,
} });
}
},
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
`;
// service页面模版
const serviceTep = `import Request from '../../utils/request';
export const demo = data => Request({
url: '路径',
method: 'POST',
data,
});
`;
fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
process.chdir(`./src/pages/${dirName}`); // cd $1
fs.writeFileSync('index.js', indexTep);
fs.writeFileSync('index.scss', scssTep);
fs.writeFileSync('model.js', modelTep);
fs.writeFileSync('service.js', serviceTep);
console.log(`模版${dirName}已创建,请手动增加models`);
function titleCase(str) {
const array = str.toLowerCase().split(' ');
for (let i = 0; i < array.length; i++) {
array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
}
const string = array.join(' ');
return string;
}
process.exit(0);
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment