fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit ec2281b696ceabc0334915f4c835f78c9a33981e 1 parent 41f6a736

component-import

Inline Side-by-side
Showing 5 changed files with 125 additions and 168 deletions
... ... @@ -48,6 +48,8 @@ exports.addressAct = (req, res, next) => {
let responseData = {
module: 'home',
page: 'address-act',
vue: true,
localCss: true,
pageHeader: headerModel.setNav({
navTitle: result && result.navTitle,
navBtn: false,
... ...
... ... @@ -30,3 +30,7 @@
<div class="my-address-list-page page-wrap hide">
</div>
</div>
<div id="app">
<app></app>
</div>
... ...
... ... @@ -217,3 +217,13 @@ $.ajax({
});
// }
var Vue = require('vue');
var app = require('home/address/address-act.vue');
new Vue({
el: '#app',
components: {
app: app
}
});
... ...
/**
* Created by yoho on 2016/12/14.
*/
let Vue = require('vue');
var Vue = require('vue');
let app = require('home/address/address-act.vue');
var app = require('home/address/address-act.vue');
new Vue({
el: '#app',
... ...
<template>
<div>
<header-component header-text="添加新地址" :show-btn="false">
</header-component>
<form class="address-form">
<div class="address-form-group">
<label for="consignee">
收 货 人：
</label>
<input type="text" name="consignee" maxlength="20" value="">
</div>
<div class="address-form-group">
<label for="mobile">
联系电话：
</label>
<input type="text" name="mobile" value="">
</div>
<div class="address-form-group">
<label for="area">
所在地区：
</label>
<input type="text" name="area" value="" readonly>
<span class="address-select">请选择<span class="iconfont">&#xe604;</span></span>
</div>
<div class="address-form-group">
<label for="address">
详细地址：
</label>
<textarea class="address" name="address" maxlength="255"></textarea>
</div>
<input type="hidden" name="area_code" value="">
</form>
<div class="address-select-component">
<div class="address-select-box">
<div class="component-title"><span class="title">所在地区</span><span class="iconfont close">X</span></div>
<ul class="head-address-ul">
<li class="head-address-li">请选择</li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="address-container">
<div class="address-content">
<ul class="address-ul">
<li v-for="address in addresses" :data-id="address.id">{{address.caption}}</li>
</ul>
</div>
<div class="address-select-component">
<div class="address-select-box">
<div class="component-title"><span class="title">所在地区</span><span class="iconfont close">X</span></div>
<ul class="head-address-ul">
<li class="head-address-li">请选择</li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="address-container">
<div class="address-content">
<ul class="address-ul">
<li v-for="address in addresses" :data-id="address.id">{{address.caption}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<style>
body {
margin: 0;
}
.address-form {
padding: 0 30px;
> .address-form-group {
border-bottom: solid 1px #ccc;
.address-select-component {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
.address-select-box {
margin-top: 400px;
background: #fff;
.component-title {
text-align: center;
line-height: 80px;
font-size: 32px;
color: #ccc;
padding: 0 30px;
> label {
color: #444;
}
.address {
resize: none;
height: 116px;
width: 400px;
}
.address-select {
color: #ccc;
.close {
float: right;
}
}
}
.address-select-component {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
.address-select-box {
margin-top: 400px;
background: #fff;
.component-title {
text-align: center;
line-height: 80px;
font-size: 32px;
color: #ccc;
padding: 0 30px;
.close {
float: right;
}
.head-address-ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: white;
font-size: 24px;
color: #444;
li {
display: block;
float: left;
height: 40px;
line-height: 40px;
position: relative;
padding-left: 30px;
}
.head-address-ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: white;
font-size: 24px;
color: #444;
li {
display: block;
float: left;
height: 40px;
line-height: 40px;
position: relative;
padding-left: 30px;
}
.head-address-li {
color: #f23030;
}
.head-address-li:after {
width: 70%;
height: 1px;
border-bottom: 2px solid #f23030;
position: absolute;
bottom: 1px;
left: 50%;
content: '';
margin-left: -20px;
}
.head-address-li {
color: #f23030;
}
.head-address-ul:after {
content: '';
width: 100%;
.head-address-li:after {
width: 70%;
height: 1px;
border-bottom: 2px solid #f23030;
position: absolute;
border-bottom: 1px solid #e3e5e9;
left: 0px;
bottom: 0px;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
bottom: 1px;
left: 50%;
content: '';
margin-left: -20px;
}
}
.address-container {
margin: -1px 0 0 0;
overflow: hidden;
height: 100%;
width: 100%;
border-top: solid 1px #ccc;
.address-content {
transform: translate(0px, 0px) translateZ(0px);
height: 620px;
.address-ul {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
overflow: auto;
font-size: 24px;
color: #232326;
.head-address-ul:after {
content: '';
width: 100%;
height: 1px;
position: absolute;
border-bottom: 1px solid #e3e5e9;
left: 0px;
bottom: 0px;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
li {
height: 80px;
line-height: 80px;
padding-left: 30px;
position: relative;
overflow: hidden;
}
.address-container {
margin: -1px 0 0 0;
overflow: hidden;
height: 100%;
width: 100%;
border-top: solid 1px #ccc;
.address-content {
transform: translate(0px, 0px) translateZ(0px);
height: 620px;
.address-ul {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
overflow: auto;
font-size: 24px;
color: #232326;
li {
height: 80px;
line-height: 80px;
padding-left: 30px;
position: relative;
overflow: hidden;
}
li:after {
content: '';
width: 100%;
height: 1px;
position: absolute;
border-bottom: 1px solid #e3e5e9;
left: 0px;
bottom: 0px;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
li:after {
content: '';
width: 100%;
height: 1px;
position: absolute;
border-bottom: 1px solid #e3e5e9;
left: 0px;
bottom: 0px;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
}
}
}
}
}
</style>
<script>
require('../../../scss/home/_address.css');
let headerComponent = require('common/header.vue');
module.exports = {
... ...