Authored by ccbikai

Merge branch 'feature/home' into develop

/**
* sub app shopping
* @author: jinhu.dong<jinhu.dong@yoho.cn>
* @date: 2016/07/04
*/
var express = require('express');
var app = express();
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
Object.assign(app.locals, parent.locals);
});
// router
app.use(require('./router'));
module.exports = app;
... ...
/**
* router of sub app shopping
* @author: jinhu.dong<jinhu.dong@yoho.cn>
* @date: 2016/07/04
*/
'use strict';
const router = require('express').Router(); // eslint-disable-line
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
const uploadApi = require('./upload/upload.js');
router.post('/upload/image', multipartMiddleware, uploadApi.uploadImg);
module.exports = router;
... ...
/**
* 上传接口
* @author: kai.bi<kai.bi@yoho.cn>
* @date: 2016/07/22
*/
'use strict';
const request = require('request-promise');
const fs = require('fs');
const _ = require('lodash');
const uploadImg = (req, res, next) => {
let files = req.files && req.files.filename || [];
if (!_.isArray(files)) {
files = [files];
}
req.body.files = [];
files.forEach(file => {
req.body.files.push(fs.createReadStream(file.path));
req.body.files.push(file.name);
});
request({
method: 'post',
url: 'http://upload.static.yohobuy.com',
formData: {
fileData: req.body.files,
project: req.body.bucket || 'goodsimg'
},
json: true
}).then(function(result) {
res.json(result);
}).catch(next);
};
module.exports = {
uploadImg
};
... ...
... ... @@ -40,9 +40,11 @@ const refund = {
}).catch(next);
},
saveLogistics(req, res, next) {
const company = req.body.company;
const company_id = req.body.company_id;
const company_name = req.body.company_name;
const num = req.body.num;
// todo 调用保存物流信息接口
res.json({
code: 200
});
... ...
<div class="logistics-page" id="logistics">
<components :is="currentView" :company="company" keep-alive></components>
<components :is="currentView" :company_id="company_id" :company_name="company_name" keep-alive></components>
</div>
\ No newline at end of file
... ...
... ... @@ -15,8 +15,8 @@ module.exports = {
port: 6004,
siteUrl: '//m.yohoblk.com',
domains: {
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/'
api: 'http://192.168.102.202:8080/gateway/',
service: 'http://192.168.102.202:8080/gateway/'
},
subDomains: {
host: '.m.yohoblk.com',
... ...
... ... @@ -7,6 +7,7 @@
module.exports = app => {
app.use('/', require('./apps/channel'));
app.use('/api', require('./apps/api'));
app.use('/product', require('./apps/product'));
app.use('/home', require('./apps/home'));
... ... @@ -14,6 +15,4 @@ module.exports = app => {
if (app.locals.devEnv) {
app.use('/example', require('./apps/example'));
}
app.use('/product', require('./apps/product'));
};
... ...
... ... @@ -22,6 +22,7 @@
"bluebird": "^3.4.1",
"body-parser": "^1.15.2",
"connect-memcached": "^0.2.0",
"connect-multiparty": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.14.0",
"express-handlebars": "^3.0.0",
... ...
... ... @@ -8,7 +8,8 @@ Vue.use(infiniteScroll);
new Vue({
el: '#logistics',
data: {
company: '',
company_id: '',
company_name: '',
currentView: 'logistics',
},
components: {
... ... @@ -18,7 +19,8 @@ new Vue({
events: {
changeView: function(obj) {
this.currentView = obj.view;
this.company = obj.company;
this.company_id = obj.company_id;
this.company_name = obj.company_name;
}
}
});
\ No newline at end of file
... ...
.logistics-page {
width: 100%;
background: #f0f0f0;
.edit-logistics-page {
width: 100%;
... ... @@ -14,7 +13,6 @@
background: #fff;
font-size: 30px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
label {
display: block;
... ... @@ -50,6 +48,7 @@
-webkit-appearance: none;
}
.num {
width: 440px;
text-align: right;
... ... @@ -80,26 +79,50 @@
.search-input {
position: relative;
padding: 14px 22px;
background: #f8f8f8;
.icon {
position: absolute;
font-size: 24px;
top: 26px;
left: 36px;
color: #b2b2b2;
}
text-align: center;
padding: 16px 16px;
border-bottom: 1px solid #e6e6e6;
input {
height: 56px;
width: 378px;
border-radius: 28px;
padding: 0 52px;
font-size: 24px;
background: #fff;
width: 100%;
padding-left: 15px;
border-radius: 20px;
font-size: 36px;
color: #b0b0b0;
background: #eee;
border: none;
}
input::-webkit-input-placeholder { /* WebKit browsers */
text-align: center;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
text-align: center;
}
}
.company-data {
color: #000;
margin-left: 30px;
.company-item {
h2 {
height: 50px;
line-height: 50px;
font-size: 30px;
border-bottom: 1px solid #f3f3f3;
}
span {
display: block;
height: 90px;
line-height: 90px;
font-size: 30px;
border-bottom: 1px solid #f3f3f3;
}
}
}
}
}
... ...
<template>
<div class="upload">
<form v-on:change="upload">
<label class="label-input icon" for="{{inputId}}">
<input id="{{inputId}}" type="file" name="filename">
</label>
</form>
</div>
</template>
<script>
module.exports = {
props: ['imageList', 'bucket'],
data() {
return {
inputId: 'input-' + Math.floor(Math.random() * 999999999) // 尽可能保证 input ID 唯一
};
},
methods: {
upload(e) {
const formData = new FormData(e.target.closest('form'));
formData.append('bucket', this.bucket || '');
$.ajax({
method: 'POST',
url: '/api/upload/image',
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
}).then(res => {
e.target.value = '';
if (res.code === 200) {
res.data.imagesList.forEach(imagesPath => {
this.imageList.push(imagesPath);
});
} else {
alert(res.message);
}
});
}
}
};
</script>
<style>
/* 每个地方上传按钮可能不一样,使用的时候自己写样式 */
</style>
... ...
... ... @@ -167,6 +167,7 @@
.refund {
.return-amount {
margin: 30px 0;
padding: 0 30px;
font-size: 32px;
line-height: 90px;
... ...
<template>
<div class="companylist-page">
<div class="search-input">
<input class="buriedpoint icon" type="text" placeholder="&#xe608;搜索快递公司">
<input class="icon" type="text" placeholder="&#xe608; 搜索快递公司" v-model="inputname" @input="search">
</div>
<div class="company-data">
<div class="company-item" v-for="item in showData">
<h2>{{ $key }}</h2>
<span v-for="val in item" track-by="id" @click="select(val.id, val.company_name)">{{val.company_name}}</span>
</div>
</div>
<ul class="search-associate"></ul>
</div>
</template>
<script>
const $ = require('yoho-jquery');
module.exports = {
data() {
return {
companyData: {},
inputname: '',
data: {},
showData: {}
};
},
methods: {
submit: function(){
console.log(this.num);
search: function() {
var inputname = this.inputname;
if (!inputname) {
this.showData = this.data;
return;
}
var filter = {};
for (var k in this.data) {
this.data[k].forEach(function(d){
if (d.company_name.indexOf(inputname) > -1) {
if (!filter[k]) filter[k] = [];
filter[k].push(d);
}
})
}
this.showData = filter;
},
select: function(company_id, company_name) {
this.$dispatch('changeView', {
view: 'logistics',
company: "aaaf啊啊啊"
company_id: company_id,
company_name: company_name
});
// 重置列表
this.inputname = '';
this.showData = this.data;
}
},
activate: function(done) {
let _this = this;
$.ajax({
url: '/home/refund/companylist'
}).then(function(res) {
... ... @@ -31,9 +63,9 @@
res = {};
}
if (res.code === 200) {
_this.data = res.data;
_this.showData = res.data;
}
done();
}).fail(function() {
tip('网络错误');
... ...
... ... @@ -2,12 +2,12 @@
<div class="edit-logistics-page">
<form class="edit-logistics">
<label @click="companylist">
选择快递公司<input class="company-val" type="text" name="company" value="{{company}}" readonly>
选择快递公司<input class="company-val" type="text" value="{{company_name}}" readonly>
<span class="icon icon-right"></span>
</label>
<label>
快递单号
<input class="num" type="number" name="num" v-model='num'>
<input class="num" type="number" v-model='num'>
</label>
</form>
<div class="submit" @click="submit">确认</div>
... ... @@ -19,7 +19,7 @@
const tip = require('common/tip');
module.exports = {
props: ['company'],
props: ['company_id', 'company_name'],
data() {
return {
num: '',
... ... @@ -32,11 +32,11 @@
});
},
submit: function(){
if (!this.company) {
if (!this.company_name) {
tip("请选择快递公司");
return false;
}
if (!/^[0-9]*$/.test(this.num)) {
if (!this.num || !/^[0-9]*$/.test(this.num)) {
tip("请输入正确的快递单号");
return false;
}
... ... @@ -45,8 +45,9 @@
method: 'POST',
url: '/home/save-logistics',
data: {
company: company,
num: num
company_id: this.company_id,
company_name: this.company_name,
num: this.num
}
}).then(function(res) {
if ($.type(res) !== 'object') {
... ...
... ... @@ -37,8 +37,7 @@
}
.product-list {
margin-bottom: 30px;
background: #fff;
margin-top: -4px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
... ...
... ... @@ -42,6 +42,7 @@
height: 170px;
font-size: 24px;
line-height: 1.5;
background: #fff;
&:after {
content: "";
... ... @@ -51,6 +52,7 @@
width: 690px;
height: 0;
border-bottom: 1px solid #eee;
z-index: 1;
}
.checkbox {
... ...
... ... @@ -12,10 +12,35 @@
<option v-for="reason in returnReason" v-bind:value="reason.id" selected="{{reason.id === product.reason.id}}">{{reason.name}}</option>
</select>
</div>
<div class="remark">
<textarea v-model="product.remark" rows="3" max-length="100" placeholder="退货原因说明"></textarea>
</div>
<div class="image-list clearfix">
<div class="image-item" v-for="image in imageListForShow">
<span v-on:click="deleteImage(image.index)" class="icon icon-close"></span>
<img v-bind:src="image.path">
</div>
<upload v-show="imageListForShow.length < 4" class="image-item" v-bind:image-list="product.imageList"></upload>
</div>
</div>
</template>
<script>
const upload = require('component/tool/upload.vue');
const getImgHost = function(url) {
let urlArr = url.split('/'),
num = urlArr[urlArr.length - 1].substr(1, 1),
domain = 'static.yhbimg.com/goodsimg';
url = domain + url;
if (num === '1') {
return '//img11.' + url;
} else {
return '//img12.' + url;
}
};
module.exports = {
props: ['product', 'refundData'],
computed: {
... ... @@ -24,25 +49,54 @@
id: 0,
name: '请选择'
}].concat(this.refundData.returnReason);
},
imageListForShow() {
const list = [];
this.product.imageList.forEach((path, index) => {
list.push({
index: index,
path: getImgHost(path) + '?imageView2/2/w/160/h/160'
});
});
return list;
}
},
methods: {
showTip() {
alert(this.refundData.specialNotice.remark);
},
deleteImage(index) {
this.product.imageList.splice(index, 1);
}
},
components: {
upload
}
};
</script>
<style>
.reason {
padding: 0 30px;
font-size: 32px;
line-height: 90px;
background: #f6f6f6;
&:after {
content: "";
display: block;
width: 100%;
height: 30px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.tip {
position: relative;
padding: 0 30px;
font-size: 26px;
background: #fff;
.icon {
margin-right: 5px;
... ... @@ -61,8 +115,10 @@
.select-reason {
position: relative;
padding: 0 30px;
width: 100%;
height: 90px;
background: #fff;
&:after {
content: "";
... ... @@ -83,5 +139,73 @@
color: #b0b0b0;
}
}
.remark {
margin-top: 20px;
padding: 0 30px;
background: #fff;
border-top: 1px solid #eee;
textarea {
margin-top: 30px;
width: 100%;
font-size: 24px;
line-height: 40px;
resize: none;
}
}
.image-list {
padding: 30px;
background: #fff;
.image-item {
position: relative;
float: left;
margin-right: 20px;
width: 150px;
height: 150px;
&:last-child {
margin-right: 0;
}
.icon-close {
position: absolute;
right: -20px;
top: -20px;
font-size: 40px;
color: #fff;
background: #b0b0b0;
border-radius: 100%;
z-index: 2;
}
img {
width: 100%;
height: 100%;
}
}
.label-input {
position: relative;
width: 150px;
height: 150px;
font-size: 150px;
&:before {
content: "\e604";
}
input {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0;
}
}
}
}
</style>
... ...