Commit bd2c2bce authored by liumiss's avatar liumiss

Initial commit

parent 333d950a
> 1%
last 2 versions
not ie <= 11
Android >= 4.0
iOS >= 8
This diff is collapsed.
......@@ -8,7 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"core-js": "^2.6.5",
"cube-ui": "~1.12.15",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
......@@ -21,7 +23,17 @@
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"postcss-px2rem": "^0.3.0",
"prettier": "^1.18.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-cube-ui": "^0.2.5",
"vue-template-compiler": "^2.6.10"
},
"transformModules": {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}
}
module.exports = {
plugins: {
autoprefixer: {}
autoprefixer: {},
'postcss-px2rem': {
remUnit: 37.5
}
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sell</title>
</head>
<body>
<noscript>
<strong>We're sorry but sell doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sell</title>
</head>
<body>
<noscript>
<strong>We're sorry but sell doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=c066bb79c8747e4d84aa9e86276f8174&plugin=AMap.Geolocation,AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
</body>
</html>
\ No newline at end of file
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
import { request } from '../config/axios'
// 退出登录
export const logout = () => request('logout', {}, 'get');
// 获取验证码
export const getCode = (phone, type = 'login_or_register') => request('/common/sms/code', {
phone,
type // 重置密码:reset_password 默认值:login_or_register
});
// 手机验证码登录登录
export const loginByCode = (phone, code) => request('login/code', {
phone,
code
}, 'get');
\ No newline at end of file
html, body
height: 100%
overflow: hidden
\ No newline at end of file
@import "./variable"
.cube-form-item_required .cube-form-label::before
display:none
.text-primary{
color:$color-light-blue
}
.text-extra-small{
font-size: $font-size-12
}
.text-base{
font-size: $font-size-14
}
.text-medium{
font-size: $font-size-16
}
.text-large{
font-size: $font-size-18
}
.text-extra-large{
font-size: $font-size-20
}
\ No newline at end of file
@import "~cube-ui/src/common/stylus/mixin.styl"
\ No newline at end of file
@import "~cube-ui/src/common/stylus/variable.styl"
$color-background = rgba(7, 17, 27, 1)
$color-green = #07c160
$color-dark-green = #06ae57
$color-light-blue = #3ca0e6
$margin-top-20 = 20px
$font-size-12 = 12px
$font-size-14 = 14px
$font-size-16 = 16px
$font-size-18 = 18px
$font-size-20 = 20px
export function MAP(key='c066bb79c8747e4d84aa9e86276f8174') {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(AMap)
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "//webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
// 获取地理位置
export const mapGeolocation = (map) => {
let location = null;
map.plugin("AMap.Geolocation", function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: "RB"
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", function (data) {
location = data;
console.log(data)
});
AMap.event.addListener(geolocation, "error", function (data) {
console.log(data);
});
});
return location;
}
\ No newline at end of file
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="container">
<cube-tab-bar v-model="selectedLabelDefault" @click="clickHandler">
<cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
<i slot="icon" :class="item.icon"></i>
<p class="text-extra-small">{{item.desc}}</p>
</cube-tab>
</cube-tab-bar>
</div>
</template>
<script>
export default {
props: ['default'],
data() {
return {
selectedLabelDefault: this.default,
tabs: [
{
label: "home",
desc: "外卖",
icon: "cubeic-home"
},
{
label: "orderIndex",
desc: "订单",
icon: "cubeic-like"
},
{
label: "mineIndex",
desc: "我的",
icon: "cubeic-person"
}
]
};
},
methods: {
clickHandler(label) {
this.$router.push({ name: label });
},
changeHandler(label) {
this.$router.push({ name: label });
}
}
};
</script>
<style lang="stylus" scoped>
.cube-tab-bar {
position: fixed;
width: 100%;
bottom: 0;
border-top: 1px solid #eee;
background-color:#fff;
z-index:99;
}
</style>
<template>
<div>
<div class="van-search" style="background: rgb(255, 255, 255);">
<div class="van-search__content van-search__content--square">
<div class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon">
<i class="van-icon cubeic-search text-medium"></i>
</div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body">
<input type="search" placeholder="请输入搜索关键词" class="van-field__control text-base" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="css" scoped>
.van-search,
.van-search__content {
display: flex;
}
.van-search {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
}
.van-search__content {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding-left: 8px;
background-color: #f7f8fa;
border-radius: 2px;
}
.van-search__content--round {
border-radius: 17px;
}
.van-search__label {
padding: 0 5px;
color: #323233;
font-size: 14px;
line-height: 34px;
}
.van-search .van-cell {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding: 5px 8px 5px 0;
background-color: transparent;
}
.van-search .van-cell__left-icon {
color: #969799;
}
.van-search--show-action {
padding-right: 0;
}
.van-search input::-webkit-search-cancel-button,
.van-search input::-webkit-search-decoration,
.van-search input::-webkit-search-results-button,
.van-search input::-webkit-search-results-decoration {
display: none;
}
.van-search .van-cell {
display: flex;
flex: 1;
font-size: 14px;
line-height: 24px;
padding: 5px 8px 5px 0;
background-color: transparent;
}
.van-cell__value {
position: relative;
overflow: hidden;
color: #969799;
text-align: right;
vertical-align: middle;
}
.van-field__body {
display: flex;
align-items: center;
height: 100%;
}
.van-search input {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
color: #323233;
text-align: left;
background-color: transparent;
border: 0;
resize: none;
}
.van-search__action {
padding: 0 8px;
color: #323233;
font-size: 14px;
line-height: 34px;
}
.van-search__action:active {
background-color: #f2f3f5;
}
</style>
\ No newline at end of file
/***
* axios 配置 :
* 1. 接口的域名地址
* 2. axios 参数处理
* 3. 请求拦截
*
*/
import axios from 'axios'
import { baseURL } from '../config/env'
import qs from 'qs';
const $http = axios.create({
baseURL: baseURL,// 接口的域名地址
withCredentials: true
});
$http.interceptors.request.use(config => {
let defaultOpstion = { identity: "shop" };
if (config.method == 'get' || config.method == 'delete') {
Object.assign(config.params, defaultOpstion)
} else {
Object.assign(config.data, defaultOpstion)
config.data = qs.stringify(config.data);
}
return config;
},
error => {
return Promise.reject(error);
}
)
$http.interceptors.response.use(data => { //请求拦截
return data;
},
error => {
return Promise.reject(error)
});
// axios 参数处理
function request(url = url, data = {}, method = 'post') {
return new Promise((resolve, reject) => {
const options = {
url: url,
method
}
if (method.toLowerCase() === 'get') {
options.params = data
} else {
options.data = data
}
$http(options)
.then(res => {
resolve(res.data)
})
.catch(error => {
reject()
})
})
}
export {
$http,
request
};
\ No newline at end of file
/**
* 配置编译环境和线上环境之间的切换
*
* baseURL: 域名地址
* globalUrlFile: 文件所在域名地址
* defaultImg: 图片所在域名地址
*/
let globalUrlFile = '';
let baseURL = '';
let defaultImg= '';
if (process.env.NODE_ENV == 'development' || process.env.NODE_ENV == 'production') {
baseURL = "https://api.caomeidd.com/api/";
globalUrlFile = "https://api.caomeidd.com/";
}
defaultImg = "http://caomeidd-pe.api.pengjisoft.com/resource/public_icon/default.png"
export {
baseURL,
globalUrlFile,
defaultImg
}
\ No newline at end of file
import Vue from 'vue'
// By default we import all the components.
// Only reserve the components on demand and remove the rest.
// Style is always required.
import {
/* eslint-disable no-unused-vars */
Style,
// basic
Button,
Loading,
Tip,
Toolbar,
TabBar,
TabPanels,
// form
Checkbox,
CheckboxGroup,
Checker,
Radio,
RadioGroup,
Input,
Textarea,
Select,
Switch,
Rate,
Validator,
Upload,
Form,
// popup
Popup,
Toast,
Picker,
CascadePicker,
DatePicker,
TimePicker,
SegmentPicker,
Dialog,
ActionSheet,
Drawer,
ImagePreview,
// scroll
Scroll,
Slide,
IndexList,
Swipe,
Sticky,
ScrollNav,
ScrollNavBar
} from 'cube-ui'
Vue.use(Button)
Vue.use(Loading)
Vue.use(Tip)
Vue.use(Toolbar)
Vue.use(TabBar)
Vue.use(TabPanels)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Checker)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Input)
Vue.use(Textarea)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Rate)
Vue.use(Validator)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(SegmentPicker)
Vue.use(Dialog)
Vue.use(ActionSheet)
Vue.use(Drawer)
Vue.use(ImagePreview)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(IndexList)
Vue.use(Swipe)
Vue.use(Sticky)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuex from 'vuex'
import 'amfe-flexible'
import store from './store'
import './cube-ui'
import VueAMap from 'vue-amap';
import './common/stylus/index.styl'
Vue.config.productionTip = false;
Vue.use(vuex);
Vue.use(VueAMap);
// setTimeout(() => {
VueAMap.initAMapApiLoader({
key: 'c066bb79c8747e4d84aa9e86276f8174',
// key:'41db0da27afa32dc85f51cceb4cfcf9a',
plugin: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4',
uiVersion: '1.0.11' // 版本号
});
// }, 200);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
const home = r => require.ensure([], () => r(require('./views/home/index.vue')))
const login = r => require.ensure([], () => r(require('./views/login/login.vue')))
const orderIndex = r => require.ensure([], () => r(require('./views/order/index.vue')))
const mineIndex = r => require.ensure([], () => r(require('./views/mine/index.vue')))
// const login = r => require.ensure([], () => r(require('./views/login/login.vue')))
Vue.use(Router);
......@@ -8,19 +12,26 @@ export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/login",
name: "login",
component: login
},
{
path: "/",
name: "home",
component: Home
component: home,
},
{
path: "/order",
name: "orderIndex",
component: orderIndex
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
path: "/mine",
name: "mineIndex",
component: mineIndex
}
]
});
import { mapGeolocation } from '../common/utils/mUtils'
export default {
// 获取当前地理位置
GET_LOCATION(commit, map) {
let msg = mapGeolocation(map)
console.log(msg)
let location = { lat: msg.position.lat, lng: msg.position.lng, formattedAddress: msg.position.formattedAddress };
commit('RECORD_ADDRESS', location)
},
}
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
const state = {
location:{}
}
export default new Vuex.Store({
state,
actions,
mutations,
})
\ No newline at end of file
export default {
// 记录当前地理位置
RECORD_ADDRESS(state, {
lat,
lng,
formattedAddress
}) {
state.location = {lat,lng,formattedAddress};
},
}
\ No newline at end of file
@require "~cube-ui/src/common/stylus/var/color.styl"
@import "./common/stylus/variable.styl"
// action-sheet
$action-sheet-color := $color-grey
$action-sheet-active-color := $color-orange
$action-sheet-bgc := $color-white
$action-sheet-active-bgc := $color-light-grey-opacity
$action-sheet-title-color := $color-dark-grey
$action-sheet-space-bgc := $color-mask-bg
/// picker style
$action-sheet-picker-cancel-color := $color-light-grey
$action-sheet-picker-cancel-active-color := $color-light-grey-s
// bubble
// button
$btn-color := $color-white
$btn-bgc := $color-regular-blue
$btn-bdc := $color-regular-blue
$btn-active-bgc := $color-blue
$btn-active-bdc := $color-blue
$btn-disabled-color := $color-white
$btn-disabled-bgc := $color-light-grey-s
$btn-disabled-bdc := $color-light-grey-s
/// primary
$btn-primary-color := $color-white
$btn-primary-bgc := $color-orange
$btn-primary-bdc := $color-orange
$btn-primary-active-bgc := $color-dark-orange
$btn-primary-active-bdc := $color-dark-orange
/// light
$btn-light-color := $color-grey
$btn-light-bgc := $color-light-grey-sss
$btn-light-bdc := $color-light-grey-sss
$btn-light-active-bgc := $color-active-grey
$btn-light-active-bdc := $color-active-grey
/// outline
$btn-outline-color := $color-grey
$btn-outline-bgc := transparent
$btn-outline-bdc := $color-grey
$btn-outline-active-bgc := $color-grey-opacity
$btn-outline-active-bdc := $color-grey
/// outline-primary
$btn-outline-primary-color := $color-orange
$btn-outline-primary-bgc := transparent
$btn-outline-primary-bdc := $color-orange
$btn-outline-primary-active-bgc := $color-orange-opacity
$btn-outline-primary-active-bdc := $color-dark-orange
// toolbar
$toolbar-bgc := $color-light-grey-sss
$toolbar-active-bgc := $color-active-grey
// checkbox
$checkbox-color := $color-grey
$checkbox-icon-color := $color-light-grey-s
/// checked
$checkbox-checked-icon-color := $color-orange
$checkbox-checked-icon-bgc := $color-white
/// disabled
$checkbox-disabled-icon-color := $color-light-grey-ss
$checkbox-disabled-icon-bgc := $color-light-grey-ss
// checkbox hollow
$checkbox-hollow-checked-icon-color := $color-orange
$checkbox-hollow-disabled-icon-color := $color-light-grey-ss
// checkbox-group
$checkbox-group-bgc := $color-white
$checkbox-group-horizontal-bdc := $color-light-grey-s
// radio
$radio-group-bgc := $color-white
$radio-group-horizontal-bdc := $color-light-grey-s
$radio-color := $color-grey
$radio-icon-color := $color-light-grey-s
/// selected
$radio-selected-icon-color := $color-white
$radio-selected-icon-bgc := $color-orange
/// disabled
$radio-disabled-icon-bgc := $color-light-grey-ss
// radio hollow
$radio-hollow-selected-icon-color := $color-orange
$radio-hollow-disabled-icon-color := $color-light-grey-ss
// dialog
$dialog-color := $color-grey
$dialog-bgc := $color-white
$dialog-icon-color := $color-regular-blue
$dialog-icon-bgc := $color-background
$dialog-title-color := $color-dark-grey
$dialog-close-color := $color-light-grey
$dialog-btn-color := $color-light-grey
$dialog-btn-bgc := $color-white
$dialog-btn-active-bgc := $color-light-grey-opacity
$dialog-btn-highlight-color := $color-orange
$dialog-btn-highlight-active-bgc := $color-light-orange-opacity
$dialog-btn-disabled-color := $color-light-grey
$dialog-btn-disabled-active-bgc := transparent
$dialog-btns-split-color := $color-row-line
// index-list
$index-list-bgc := $color-white
$index-list-title-color := $color-dark-grey
$index-list-anchor-color := $color-light-grey
$index-list-anchor-bgc := #f7f7f7
$index-list-item-color := $color-dark-grey
$index-list-item-active-bgc := $color-light-grey-opacity
$index-list-nav-color := $color-grey
$index-list-nav-active-color := $color-orange
// loading
// picker
$picker-bgc := $color-white
$picker-title-color := $color-dark-grey
$picker-subtitle-color := $color-light-grey
$picker-confirm-btn-color := $color-orange
$picker-confirm-btn-active-color := $color-light-orange
$picker-cancel-btn-color := $color-light-grey
$picker-cancel-btn-active-color := $color-light-grey-s
$picker-item-color := $color-dark-grey
// popup
$popup-mask-bgc := rgb(37, 38, 45)
$popup-mask-opacity := .4
//scroll
// slide
$slide-dot-bgc := $color-light-grey-s
$slide-dot-active-bgc := $color-orange
// time-picker
// tip
$tip-color := $color-white
$tip-bgc := $color-dark-grey-opacity
// toast
$toast-color := $color-light-grey-s
$toast-bgc := rgba(37, 38, 45, 0.9)
// upload
$upload-btn-color := $color-grey
$upload-btn-bgc := $color-white
$upload-btn-active-bgc := $color-light-grey-opacity
$upload-btn-box-shadow := 0 0 6px 2px $color-grey-opacity
$upload-btn-border-color := #e5e5e5
$upload-file-bgc := $color-white
$upload-file-remove-color := rgba(0, 0, 0, .8)
$upload-file-remove-bgc := $color-white
$upload-file-state-bgc := $color-mask-bg
$upload-file-success-color := $color-orange
$upload-file-error-color := #f43530
$upload-file-status-bgc := $color-white
$upload-file-progress-color := $color-white
// switch
$switch-on-bgc := $color-orange
$switch-off-bgc := $color-white
$switch-off-border-color := #e4e4e4
// input
$input-color := $color-grey
$input-bgc := $color-white
$input-border-color := $color-row-line
$input-focus-border-color := $color-orange
$input-placeholder-color := $color-light-grey-s
$input-clear-icon-color := $color-light-grey
//textarea
$textarea-color := $color-grey
$textarea-bgc := $color-white
$textarea-border-color := $color-row-line
$textarea-focus-border-color := $color-orange
$textarea-outline-color := $color-orange
$textarea-placeholder-color := $color-light-grey-s
$textarea-indicator-color := $color-light-grey-s
// validator
$validator-msg-def-color := #e64340
// select
$select-color := $color-grey
$select-bgc := $color-white
$select-disabled-color := #b8b8b8
$select-disabled-bgc := $color-light-grey-opacity
$select-border-color := $color-light-grey-s
$select-border-active-color := $color-orange
$select-icon-color := $color-light-grey
$select-placeholder-color := $color-light-grey-s
// swipe
$swipe-btn-color := $color-white
// form
$form-color := $color-grey
$form-bgc := $color-white
$form-invalid-color := #e64340
$form-group-legend-color := $color-light-grey
$form-group-legend-bgc := $color-background
$form-label-required-color := #e64340
// drawer
$drawer-color := $color-dark-grey
$drawer-title-bdc := $color-light-grey-ss
$drawer-title-bgc := $color-white
$drawer-panel-bgc := $color-white
$drawer-item-active-bgc := $color-light-grey-opacity
// scroll-nav
$scroll-nav-bgc := $color-white
$scroll-nav-color := $color-grey
$scroll-nav-active-color := $color-orange
// image-preview
$image-preview-counter-color := $color-white
// tab-bar & tab-panel
$tab-color := $color-grey
$tab-active-color := $color-dark-orange
$tab-slider-bgc := $color-dark-orange
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<div class="container">
<cube-tab-bar v-model="selectedLabelDefault" @click="clickHandler">
<cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
<i slot="icon" :class="item.icon"></i>
<p class="text-extra-small">{{item.desc}}</p>
</cube-tab>
</cube-tab-bar>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
data() {
return {
selectedLabelDefault: "home",
tabs: [
{
label: "home",
desc: "外卖",
icon: "cubeic-home"
},
{
label: "orderIndex",
desc: "订单",
icon: "cubeic-like"
},
{
label: "mineIndex",
desc: "我的",
icon: "cubeic-person"
}
]
};
},
methods: {
clickHandler(label) {
this.$router.push({ name: label });
},
changeHandler(label) {
this.$router.push({ name: label });
}
}
};
</script>
<style lang="stylus" scoped>
.cube-tab-bar {
position: fixed;
width: 100%;
bottom: 0;
border-top: 1px solid #eee;
}
</style>
<template>
<div>
<div class="scroll-list-wrap">
<cube-sticky :pos="scrollY">
<cube-scroll :scroll-events="scrollEvents" @scroll="scrollHandler">
<div class="location">
<i class="cubeic-location text-primary text-extra-large"></i>
<span class="text-medium">中国创业实训基地</span>
<div id="amap"></div>
</div>
<ul>
<li>title</li>
</ul>
<cube-sticky-ele ele-key="11">
<ul class="sticky-header">
<van-search></van-search>
</ul>
</cube-sticky-ele>
<ul>
<li v-for="(item,index) in shops" :key="index">{{item}}</li>
</ul>
</cube-scroll>
</cube-sticky>
</div>
<footGuide default="home"></footGuide>
</div>
</template>
<script>
import footGuide from "../../components/footer";
import vanSearch from "../../components/search";
import { mapGeolocation, MAP } from "../../common/utils/mUtils";
var map = {};
var b = {
code: 0,
data: {
shop_id: 1,
name: "清吧",
address: "重庆市,市辖区,涪陵区",
icon: "files/shop/22/image/f41c3564-6c41-4ed1-9526-fe23f560c839.jpg",
phone: "15389926297",
shop_type: "restaurant",
category_name: "其他",
address_detail: "聚贤大道116号"
},
message: ""
};
export default {
data() {
return {
location: [121.50886, 31.25373],
shops: [b, b, b],
scrollEvents: ["scroll"],
scrollY: 0
};
},
created() {
MAP()
.then(function(AMap) {
map = new AMap.Map("amap", {
resizeEnable: true,
zoom: 15
});
this.$store.dispatch("GET_LOCATION", map);
})
.catch(err => {
});
/* setTimeout(() => {
map = new AMap.Map("amap", {
resizeEnable: true,
zoom: 15
});
this.$store.dispatch("GET_LOCATION", map);
// this.location = mapGeolocation(map);
}, 20); */
},
components: {
footGuide,
vanSearch
},
methods: {
scrollHandler({ y }) {
this.scrollY = -y;
}
}
};
</script>
<style lang="stylus" scoped>
.scroll-list-wrap {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
\ No newline at end of file
<template>
<div>
<cube-form :model="model" @validate="validateHandler" skipValidate>
<cube-form-group>
<cube-form-item :field="fields[0]"></cube-form-item>
<div class="form-group">
<cube-form-item :field="fields[1]"></cube-form-item>
<cube-button
:primary="true"
:disabled="disabled"
inline
class="field__button"
@click="onGetCode"
>{{disabled?timer.second+'s':'获取验证码'}}</cube-button>
</div>
</cube-form-group>
<cube-form-group class>
<cube-button :primary="true" @click="submitHandler">登录</cube-button>
</cube-form-group>
</cube-form>
</div>
</template>
<script>
import { getCode,loginByCode } from "../../common/serve.js";
export default {
data() {
return {
validity: {},
valid: undefined,
disabled: false,
timer: {
//定时器信息
interValObj: null,
second: 60
},
model: {
inputValue: "",
codeValue: ""
},
fields: [
{
type: "input",
modelKey: "inputValue",
label: "手机号",
props: {
placeholder: "请输入手机号"
},
rules: {
required: true
}
},
{
type: "input",
modelKey: "codeValue",
label: "短信验证码",
props: {
placeholder: "请输入短信验证码"
},
rules: {
required: true
}
}
]
};
},
methods: {
async onGetCode() {
this.disabled = true;
let res = await getCode(this.model.inputValue);
if (res.code == 0) {
this.timeDown();
this.$createToast({
txt: "验证码获取成功",
type: "txt"
}).show();
} else {
this.$createToast({
txt: res.message,
type: "error"
}).show();
}
this.disabled = false;
},
async toLogin() {
let res = await loginByCode(this.model.inputValue, this.model.codeValue);
if (res.code == 0) {
localStorage.setItem("isLogin", true);
this.$createToast({
txt: "登录成功",
time: 1000,
onTimeout: () => {
this.$router.replace({ name: "home" });
}
}).show();
} else {
this.$createToast({
txt: res.message,
type: "error"
}).show();
}
this.actBtnLoading = false;
},
submitHandler(e) {
e.stopPropagation()
this.toLogin();
},
validateHandler(result) {
this.validity = result.validity;
this.valid = result.valid;
},
// 获取验证码倒计时
timeDown() {
const timerObj = this.timer.interValObj,
_timer = this.timer;
// 防止多次点击,生成多个定时器
if (timerObj) {
clearInterval(timerObj);
return;
}
_timer.interValObj = setInterval(() => {
if (_timer.second > 1) {
_timer.second--;
this.disabled = true;
} else {
clearInterval(timerObj);
this.disabled = false;
}
}, 1000);
}
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
.form-group {
position: relative;
.cube-form-item {
width: 67%;
}
}
.field__button {
position: absolute;
top: 50%;
right: 5%;
transform: translate(0, -50%);
}
.cube-form-group:nth-of-type(2) {
margin-top: $margin-top-20;
}
</style>
\ No newline at end of file
<template>
<cube-page type="scroll-view" title="Scroll" class="toutiao">
<template slot="content">
<header ref="topHeader"><img src="https://dpubstatic.udache.com/static/dpubimg/0K9-YvWB-Q/toutiao_header2.png"></header>
<div class="nav-scroll-list-wrap">
<cube-scroll ref="navScroll" direction="horizontal">
<ul class="nav-wrapper">
<li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li>
</ul>
</cube-scroll>
<div class="more-wrapper">
<span class="more"></span>
</div>
</div>
<div class="content-scroll-wrapper">
<div class="content-scroll-list-wrap" ref="scrollWrapper">
<cube-scroll
ref="contentScroll"
:data="content"
:options="options"
@pulling-down="onPullingDown"
@pulling-up="onPullingUp">
<ul class="imgs-wrapper">
<li v-for="(item, index) in content" :key="index" class="imgs-item">
<img :src="item.url" @load="onImgLoad">
</li>
</ul>
<template slot="pulldown" slot-scope="props">
<div v-if="props.pullDownRefresh"
class="cube-pulldown-wrapper"
:style="props.pullDownStyle">
<div v-if="props.beforePullDown"
class="before-trigger"
:style="{paddingTop: props.bubbleY + 'px'}">
<span :class="{rotate: props.bubbleY > 0}">↓</span>
</div>
<div class="after-trigger" v-else>
<div v-show="props.isPullingDown" class="loading">
<cube-loading></cube-loading>
</div>
<transition name="success">
<div v-show="!props.isPullingDown" class="text-wrapper"><span class="refresh-text">今日头条推荐引擎有x条更新</span></div>
</transition>
</div>
</div>
</template>
</cube-scroll>
</div>
</div>
<footer ref="footer"><img src="https://dpubstatic.udache.com/static/dpubimg/1KRE2YnAim/toutiao_footer2.png"></footer>
</template>
</cube-page>
</template>
<script type="text/ecmascript-6">
// import CubePage from '../../components/cube-page.vue'
const imgs = [
{
url: 'https://dpubstatic.udache.com/static/dpubimg/7EzIhoEvnG/toutiao_12.JPG'
},
{
url: 'https://dpubstatic.udache.com/static/dpubimg/GR0Piaf5sz/toutiao_21.JPG'
},
{
url: 'https://dpubstatic.udache.com/static/dpubimg/K1JqUN8HSA/toutiao_31.JPG'
}
]
const txts = ['关注', '推荐', '新时代', '热点', '体育', '娱乐', '科技', '头条号', '问答', '国际', 'cube-ui666']
let cnt = 1
export default {
data() {
return {
content: imgs.slice(),
options: {
pullDownRefresh: {
threshold: 60,
// stop: 44,
stopTime: 1000,
txt: '更新成功'
},
pullUpLoad: true
},
navTxts: txts,
secondStop: 26
}
},
components: {
CubePage
},
methods: {
onPullingDown() {
setTimeout(() => {
this.content.unshift(imgs[cnt++ % 3])
this.$refs.contentScroll.scrollTo(0, this.secondStop, 300)
}, 1000)
},
onPullingUp() {
setTimeout(() => {
this.content = this.content.concat(imgs)
}, 1000)
},
onImgLoad() {
const contentScroll = this.$refs.contentScroll
contentScroll.scroll.beforePullDown && contentScroll.refresh()
}
},
mounted() {
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.toutiao
.content
margin: 0 !important
height: 100%
display: flex
flex-flow: column
>header
line-height: 0
img
width: 100%
footer
line-height: 0
img
width: 100%
.nav-scroll-list-wrap
transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
position: relative
background-color: white
border-bottom : 1px solid rgba(0, 0, 0, 0.1)
padding-right: 30px
.cube-scroll-content
display: inline-block
.nav-wrapper
display: inline-block
white-space: nowrap
line-height: 36px
padding: 0 5px
.nav-item
display: inline-block
padding: 0 5px
&:nth-child(2)
color: #fa7b7a
.more-wrapper
position: absolute
right: 0
top: 0
bottom: 0
z-index: 1
background-color: #fff
opacity: 0.95
.more
display: inline-block
height: 1px
width: 20px
padding: 5px 0
border: 1px solid #000
border-right: transparent
border-left: transparent
background-color: #000
background-clip: content-box
margin: 11px
.content-scroll-wrapper
flex: 1
position: relative
.content-scroll-list-wrap
height: 100%
transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
position: absolute
top: 0
bottom: 0
overflow: hidden
.imgs-wrapper
.imgs-item
>img
width: 100%
.cube-pulldown-wrapper
text-align: center
.before-trigger
height: auto
font-size: 30px
align-self: flex-end
span
display: inline-block
line-height: 1
transition: all 0.3s
color: #666
padding: 15px 0
&.rotate
transform: rotate(180deg)
.after-trigger
flex: 1
margin: 0
.text-wrapper
margin: 0 auto
margin-top: 14px
padding: 5px 0
color: #498ec2
background-color: #d6eaf8
.cube-loading-spinners
margin: auto
.success-enter-active, .success-leave-active
transition: width .5s
.success-enter, .success-leave-to
width: 70%
.success-enter-to, .success-leave
width: 100%
</style>
\ No newline at end of file
<template>
<div>
dingdan
<footGuide default="orderIndex"></footGuide>
</div>
</template>
<script>
import footGuide from "../../components/footer";
export default {
data() {
return {};
},
components: {
footGuide
}
};
</script>
\ No newline at end of file
const webpack = require('webpack')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
css: {
loaderOptions: {
stylus: {
'resolve url': true,
'import': [
'./src/theme'
]
}
}
},
pluginOptions: {
'cube-ui': {
postCompile: true,
theme: true
}
},
chainWebpack(config) {
config.resolve.alias
.set('components', resolve('src/components'))
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
config.plugin('context')
.use(webpack.ContextReplacementPlugin,
[/moment[/\\]locale$/, /zh-cn/])
},
baseUrl: ''
}
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