fe / yohoblk-wap · Commits

Go to a project

Authored by ccbikai
Commit 00d3be0f1b0cff69e352e808e7dc6d80b189b67f 2 parents bb96e00b 5e8eeee6 master ... feature/blk-miniapp feature/brand-multi-shops feature/change feature/context feature/context-and-tracking feature/docker feature/hotfix feature/leftScrollMore feature/listGoodsList feature/style feature/tracking feature/webpack-hash feature/webpack2 gray hotfix/moreGoods hotfix/ssr release/0725 release/5.8 2017.09.01 fix-cant-loadmore

Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

Inline Side-by-side
Showing 40 changed files with 2190 additions and 142 deletions
... ... @@ -42,7 +42,13 @@ const exchange = {
},
// 提交 换货
submit() { }
submit(req, res, next) {
const uid = req.user.uid || 8050882;
exchangeModel.submitExchange(uid, req.body).then(result => {
res.json(result);
}).catch(next);
}
};
module.exports = exchange;
... ...
... ... @@ -30,8 +30,8 @@ const component = {
module: 'home',
page: 'index',
head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 200, 200) : '',
profile_name: uid && proData ? proData.profile_name : '登录/注册',
userinfourl: uid ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
profile_name: proData ? proData.profile_name : '登录/注册',
userinfourl: proData ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
refer: req.originalUrl
}),
};
... ... @@ -40,10 +40,20 @@ const component = {
}).catch(next);
},
mydetails: (req, res) => {
res.render('mydetails', {
module: 'home',
page: 'mydetails'
});
let uid = req.user.uid;
uid = 14459668; // 测试uid
homeModel.getUserProfileData(uid).then(data => {
res.render('mydetails', {
module: 'home',
page: 'mydetails',
head_ico: data && data.head_ico ? helpers.image(data.head_ico, 92, 92) : '',
nickname: '',
gender: data.gender === '1' ? 'men' : 'women',
birthday: data.birthday
});
})
},
help: (req, res, next) => {
homeModel.getHelpInfo().then(helpList => {
... ...
... ... @@ -119,10 +119,43 @@ const order = {
return res.json(result);
});
},
coin: (req, res) => {
res.render('coin', {
module: 'home',
page: 'order'
coin: (req, res, next) => {
let uid = req.user.id;
orderModel.getCoins(uid).then(result => {
res.render('coin', {
module: 'home',
page: 'coin',
coin: result
});
}).catch(next);
},
/**
* 获取yoho币明细
* @param req
* @param res
* @returns {*|{read, write}}
*/
getCoinDetail: (req, res) => {
let uid = req.user.id;
let page = req.query.page;
let limit = req.query.limit;
let isend = true;
uid = testUid;
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
orderModel.getCoinDetail(uid, page, limit).then(result => {
if (result && page < result.page_total) {
isend = false;
}
return res.json(Object.assign({isEnd: isend}, result));
});
},
... ...
... ... @@ -4,6 +4,10 @@
*/
'use strict';
const refundModel = require('../models/refund');
const notLoginCode = 400;
const notLoginTip = '抱歉，您暂未登录！';
const testUid = 8050378;// 测试uid
const isBLK = 1;
const refund = {
refund(req, res) {
... ... @@ -45,6 +49,51 @@ const refund = {
res.json({
code: 200
});
},
exchangeGoods(req, res) {
// let orderCode = req.query.orderCode;
res.render('exchange-status');
},
refundOrders(req, res) {
res.render('refund-order', {
module: 'home',
page: 'refund-order'
});
},
/**
* 获取退换货订单
* @param req
* @param res
* @returns {*|{read, write}}
*/
getRefundOrders(req, res) {
let uid = req.query.id;
let page = req.query.page;
let limit = req.query.limit;
let isend = true;
uid = testUid;
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
let param = {
uid: uid,
page: page,
limit: limit,
app_type: isBLK
};
refundModel.getRefundOrders(param).then(result => {
if (result && page < result.page_total) {
isend = false;
}
return res.json(Object.assign({isend: isend}, result));
});
}
};
... ...
... ... @@ -29,7 +29,14 @@ const exchange = {
}).then(global.yoho.camelCase);
},
submitExchangeData() {},
submitExchange(uid, params) {
const data = Object.assign({
uid,
method: 'app.change.submit'
}, params);
return api.post('', data).then(global.yoho.camelCase);
}
};
module.exports = exchange;
... ...
... ... @@ -11,7 +11,7 @@ const helpers = global.yoho.helpers;
* @param int uid 用户ID
* @return Object 个人详情数据
*/
const _getUserProfileData = (uid) => {
const _getUserProfileData = exports.getUserProfileData = (uid) => {
return api.get('', {
uid: uid,
method: 'app.passport.profile'
... ...
... ... @@ -120,3 +120,31 @@ exports.getOrderLogisticdate = (params) => {
return [];
});
};
/**
* 获取yoho币数量
* @param uid
* @returns {*|Promise.<T>}
*/
exports.getCoins = (uid) => {
return api.get('978c6bad6c379086.json', {
uid: uid,
app_type: 'app.yohocoin.total'
}).then(camelCase);
};
/**
* 获取yoho币明细
* @param uid
* @param page
* @param limit
* @returns {*|Promise.<T>}
*/
exports.getCoinDetail = (uid, page, limit) => {
return api.get('26573a88a2958702.json', {
uid: uid,
page: page,
limit: limit,
method: 'app.yohocoin.lists'
}).then(camelCase);
};
... ...
... ... @@ -29,6 +29,25 @@ const refund = {
return api.get('', {
method: 'app.express.getExpressCompany'
});
},
/**
* 获取退换货列表
* @param param
* method
* uid
* page
* limit
* app_type
* @returns {Promise.<T>|*}
*/
getRefundOrders(param) {
param = Object.assign({method: 'app.refund.getList'}, param);
return api.get('16303b76a9aa7b9b.json', param, {
cache: true,
code: 200
}).then(global.yoho.camelCase);
}
};
... ...
... ... @@ -21,6 +21,7 @@ const router = expressRouter();
router.get('/', home.index); // 个人中心主页
router.get('/orders', order.orders); // 订单
router.get('/mycurrency', order.coin); // yoho币
router.get('/coin-detail', order.getCoinDetail); // yoho币明细
router.get('/order-detail', order.orderDetail); // 订单详情
router.get('/get-orders', order.getOrderData); // 获取订单数据
router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
... ... @@ -44,11 +45,15 @@ router.get('/refund/order', refund.order); // 查询订单数据
router.post('/refund/submit', refund.submit); // 提交信息
router.get('/refund/logistics', refund.logistics); // 退换货 - 商品寄回信息
router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄回物流信息
router.get('/exchange-status', refund.exchangeGoods); // 退换货 - 换货状态
router.get('/refund/orders', refund.refundOrders); // 退换货 - 订单列表
router.get('/refund/get-orders', refund.getRefundOrders); // 退换货 - 获取订单列表数据
// 换货
router.get('/exchange', exchange.exchange);
router.get('/exchange/order', exchange.order); // AJAX 获取订单 商品
router.get('/exchange/delivery', exchange.delivery); // AJAX 获取 退货方式
router.post('/exchange/submit', exchange.submit); // AJAX 提交换货 申请
router.get('/mydetails', home.mydetails); // 个人信息设置
router.get('/about-us', home.aboutUs); // 个人中心 - 关于我们
... ...
<div class="yoho-coin">
<div class="yoho-coin" id="coin-detail-list">
<div class="coin-total">
<p>您目前拥有</p>
<p><b>123</b></p>
<p><b>{{coin.data.total}}</b></p>
<p>个有货币</p>
</div>
<div class="coin-detail">
<p>明细列表</p>
<ul class="coin-detail-list">
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+5</div>
</li>
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+118</div>
</li>
</ul>
</div>
<coin-detail></coin-detail>
</div>
\ No newline at end of file
... ...
<section class="exchange-status" id="exchange-goods-status">
<div class="status-desc">
<p>审核通过</p>
<p>申请时间: 2016.1.23 23:00:00</p>
</div>
<div class="exchange-progress">
<ul>
<li class="passed">
<div class="progress-desc">
<p>提交申请</p>
<time>2016-1-23 23:00:00</time>
</div>
</li>
<li>
<div class="progress-desc">
<p>审核通过</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>商品寄回</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>商品入库</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>换货完成</p>
</div>
</li>
</ul>
<div class="progress-todo">
<p>您的换货申请已<b>成功提交</b>!</p>
<p class="phone">请您耐心等待审核,审核过后我们会将换货信息发送至您的手机<br>客服电话:400-889-9646</p>
</div>
</div>
<div class="exchange-details">
<h2>换货详情 <i>EXCHANGE DETAILS</i></h2>
<div class="exchange-product-wrapper">
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
<div class="exchange-reason">
<p>换货颜色尺码: 黄色 M码</p>
<p>换货原因: 质量瑕疵</p>
<blockquote>收到货品后发现不是自己想要的，不是非常的喜欢， 而且存在一低昂的质量问题的呢，少了一个扣子的， 颜色与实际的有点不太符合的哈。</blockquote>
<ul class="exchange-img">
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
</div>
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
</div>
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
<div class="exchange-reason">
<p>换货原因: 尺寸不合适</p>
</div>
</div>
</div>
</div>
<div class="exchange-express">
<div class="exchange-address">
<p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
<p>{{order.area}} <br>{{order.address}}</p>
</div>
<div class="exchange-type">
<a href="">
<div class="primary">换货方式:</div>
<div class="cell-ft">寄回换货</div>
</a>
</div>
</div>
<div class="exchange-order">
<a href="">
<div class="primary">原订单详情</div>
<div class="cell-ft"></div>
</a>
</div>
<div class="exchange-options">
<button>取消申请</button>
</div>
</section>
\ No newline at end of file
... ...
<div class="yoho-favorite-brand-page">
<div class="fav-content" id="fav-content">
<fav-brand-list brand-url={{brandUrl}}></fav-brand-list>
<fav-brand-list brand-url='{{brandUrl}}'></fav-brand-list>
</div>
</div>
\ No newline at end of file
... ...
<div class="yoho-favorite-page">
<div class="fav-content" id="fav-content">
<fav-product-list product-url={{productUrl}}></fav-product-list>
<fav-product-list product-url='{{productUrl}}'></fav-product-list>
</div>
</div>
\ No newline at end of file
... ...
<div class="logistics-page" id="logistics">
<components :is="currentView" :company_id="company_id" :company_name="company_name" company_list={{company_list}} keep-alive></components>
<components :is="currentView" :company_id="company_id" :company_name="company_name" company_list='{{company_list}}' keep-alive></components>
</div>
... ...
<div class="personal-details" id="details">
<mydetails gender="women" birthday="1990.07.17"></mydetails>
<mydetails head_ico='{{head_ico}}' nickname='{{nickname}}' gender='{{gender}}' birthday='{{birthday}}'></mydetails>
</div>
... ...
<div class="order-wrapper return-goods">
<ul>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>通过审核</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total"></div>
<div class="options">
<button class="normal">取消申请</button>
</div>
</div>
</div>
</li>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>商品寄回</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
\ No newline at end of file
<div class="order-wrapper return-goods" id="refund-order-list">
<refund-order></refund-order>
</div>
\ No newline at end of file
... ...
... ... @@ -10,7 +10,7 @@
// const helpers = global.yoho.helpers;
const serviceAPI = global.yoho.ServiceAPI;
const URI_PACKAGE_ARTICLE = 'guang/service/v2/article/';
const co = require('co');
const Prmoise = require('bluebird');
const camelCase = global.yoho.camelCase;
/**
... ... @@ -18,7 +18,7 @@ const camelCase = global.yoho.camelCase;
*/
const model = {
index(params) {
return co(function*() {
return Prmoise.coroutine(function*() {
const article = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticle', params);
const content = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleContent', params);
const brands = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getBrand', params);
... ... @@ -29,7 +29,7 @@ const model = {
}, params));
return camelCase([article, content, brands, other]);
});
})();
}
};
... ...
<div class="select">
<ul>
{{#each items}}
<li class="item-li">{{this}}</li>
{{/each}}
<li class="item-del">
<span>取消</span>
</li>
</ul>
</div>
... ...
This diff could not be displayed because it is too large.
/**
* 选择框组件
*
* @author: shenzm<zhimin.shen@yoho.cn>
* @date: 2016/07/26
*/
'use strict';
const $ = require('yoho-jquery');
const template = require('components/select.hbs');
const Overlay = require('./overlay');
function Select(items) {
if (!$.isArray(items) || items.length === 0) {
return;
}
// 初始化参数
const tpl = template({
items: items
});
// 生成模版
const elem = $(tpl);
const del = elem.find('.item-del');
$(del).click(function() {
overlay.hide();
elem.hide();
});
// 覆盖层
const overlay = new Overlay({
onClose: function() {
elem.hide();
}
});
return {
show: function(cb) {
if (elem.parent().length === 0) {
const lis = elem.find('.item-li');
lis.each(function(index) {
$(this).click(function(e) {
cb(e.target.innerHTML);
overlay.hide();
elem.hide();
});
});
elem.appendTo('body').addClass('animation-target');
}
overlay.show();
elem.show();
},
hide: function() {
overlay.hide();
elem.hide();
}
}
}
module.exports = Select;
... ...
/**
* coin.page.js.
* @author hgwang
* @date 2016-07-27
*/
'use strict';
const Vue = require('yoho-vue');
const coin = require('home/coin-detail.vue');
const infiniteScroll = require('yoho-vue-infinite-scroll');
Vue.use(infiniteScroll);
require('common/vue-filter');
new Vue({
el: '#coin-detail-list',
components: {
'coin-detail': coin
}
});
... ...
/**
* exchange-status.page.js.
* @author hgwang
* @date 2016-07-25
*/
'use strict';
... ...
/**
* refund-order.page.
* @author hgwang
* @date 2016-07-26
*/
'use strict';
const Vue = require('yoho-vue');
const refundOrder = require('home/refund-order.vue');
const infiniteScroll = require('yoho-vue-infinite-scroll');
Vue.use(infiniteScroll);
require('common/vue-filter');
new Vue({
el: '#refund-order-list',
data: {},
components: {
refundOrder
}
});
... ...
/* -----------------------------------------------------------------------------
AnyPicker - Customizable Picker for Mobile OS
Version 2.0.5
Copyright (c)2016 Curious Solutions LLP
https://curioussolutions.in/libraries/anypicker/content/license.htm
See License Information in LICENSE file.
----------------------------------------------------------------------------- */
.ap-theme-ios.ap-layout-popup .ap-cont,
.ap-theme-ios.ap-layout-popover .ap-cont
{
border: 1px solid #e0e0e0;
}
.ap-theme-ios.ap-layout-popup,
.ap-theme-ios.ap-layout-fixed,
.ap-theme-ios.ap-layout-popover
{
background: rgba(0, 0, 0, 0.4);
}
.ap-theme-ios .ap-tooltip,
.ap-theme-ios .ap-tooltip:after
{
display: inline-block;
width: 0;
height: 0;
position: absolute;
border-width: 11px;
border-style: solid;
z-index: 6;
}
.ap-theme-ios .ap-tooltip:after
{
content: " ";
border-width: 10px;
}
.ap-theme-ios .ap-tooltip-bottom
{
top: -22px;
left: 10px;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0);
}
.ap-dir-rtl.ap-theme-ios .ap-tooltip-bottom
{
right: 10px;
}
.ap-theme-ios .ap-tooltip-bottom:after
{
top: -8px;
left: -10px;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0);
}
.ap-theme-ios .ap-tooltip-top
{
bottom: -21px;
left: 16px;
border-color: #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.ap-dir-rtl.ap-theme-ios .ap-tooltip-top
{
right: 16px;
}
.ap-theme-ios .ap-tooltip-top:after
{
bottom: -8px;
left: -10px;
border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.ap-theme-ios .ap-tooltip-left
{
top: 50%;
left: -22px;
border-color: rgba(0, 0, 0, 0) #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ap-theme-ios .ap-tooltip-left:after
{
top: -10px;
left: -9px;
border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.ap-theme-ios .ap-tooltip-right
{
top: 50%;
right: -22px;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e0e0e0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ap-theme-ios .ap-tooltip-right:after
{
top: -10px;
left: -11px;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
}
.ap-theme-ios .ap-bg
{
font-size: 18px;
}
.ap-theme-ios .ap-header
{
height: 85px;
line-height: 85px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
}
.ap-theme-ios .ap-header__title
{
font-size: 30px;
}
.ap-theme-ios .ap-button
{
display: inline-block;
cursor: pointer;
letter-spacing: 0;
text-align: center;
font-size: 30px;
height: 43px;
background: rgba(255, 255, 255, 1);
}
.ap-theme-ios .ap-content-top,
.ap-theme-ios .ap-content-bottom
{
font-size: 0.9em;
}
.ap-theme-ios .ap-footer
{
padding: 0 16px;
}
.ap-theme-ios .ap-footer-top .ap-button
{
display: inline-block;
}
.ap-theme-ios .ap-button:last-child
{
float: right;
padding: 0 0 0 16px;
color: #4a90e2;
}
.ap-dir-rtl.ap-theme-ios .ap-button:last-child
{
float: left;
padding: 0 16px 0 0;
}
.ap-theme-ios .ap-button:not(:last-child)
{
float: left;
padding: 0 16px 0 0;
color: #4a90e2;
}
.ap-dir-rtl.ap-theme-ios .ap-button:not(:last-child)
{
float: right;
padding: 0 0 0 16px;
}
.ap-theme-ios .ap-component-gradient
{
/*
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2040\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2060\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%20100\%25\%29\%3B'
*/
background: rgba(255,255,255,0.7);
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(40%, rgba(255,255,255,0.7)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(60%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0.7)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}
.ap-theme-ios .ap-content-middle
{
padding: 10px 0;
}
.ap-theme-ios .ap-content-switch-tab
{
border: 1px solid #007AFF;
font-size: 0.7em;
color: #007AFF;
}
.ap-dir-ltr.ap-theme-ios .ap-content-switch-date
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.ap-dir-rtl.ap-theme-ios .ap-content-switch-date
{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: -1px;
}
.ap-dir-ltr.ap-theme-ios .ap-content-switch-time
{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: -1px;
}
.ap-dir-rtl.ap-theme-ios .ap-content-switch-time
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.ap-theme-ios .ap-content-switch-selected
{
background: #007AFF;
color: #FFFFFF;
}
.ap-theme-ios .ap-component-plus,
.ap-theme-ios .ap-component-minus
{
color: #BDBDBD;
}
.ap-theme-ios .ap-component-label
{
color: #007AFF;
}
.ap-theme-ios .ap-row
{
color: #000000;
font-size: 40px;
height: 60px;
line-height: 60px;
}
.ap-theme-ios .ap-row-disabled
{
color: #9E9E9E;
}
.ap-theme-ios .ap-component-selector
{
left: 0;
width: 100%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
... ...
/* -----------------------------------------------------------------------------
AnyPicker - Customizable Picker for Mobile OS
Version 2.0.5
Copyright (c)2016 Curious Solutions LLP
https://curioussolutions.in/libraries/anypicker/content/license.htm
See License Information in LICENSE file.
----------------------------------------------------------------------------- */
/* ------------------------- Basic Layout Start ---------------------------------- */
body.noscroll
{
overflow: hidden;
}
.ap-overlay
{
display: none;
z-index: 2000;
min-width: 250px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.ap-layout-popup
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.ap-layout-fixed,
.ap-layout-popover
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
/*
.ap-layout-relative, .ap-layout-inline
{
height: auto;
}
*/
.ap-layout-relative, .ap-layout-inline
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ap-overlay *
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ap-bg
{
width: 100%;
height: 100%;
font-size: 22px;
}
.ap-cont
{
background: #FFFFFF;
}
.ap-theme-default:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
{
-webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
-moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.ap-layout-popup .ap-cont
{
position: fixed;
bottom: 0px;
width: 100%;
}
.ap-layout-relative .ap-cont
{
max-width: 500px;
width: 97%;
border: 1px solid #ECF0F1;
}
.ap-layout-inline .ap-cont
{
border: 1px solid #ECF0F1;
}
.ap-layout-fixed .ap-cont
{
width: 100%;
position: fixed;
}
/* ------------------------- Basic Layout End ---------------------------------- */
/* ------------------------- View Sections Start ---------------------------------- */
.ap-header
{
height: 50px;
line-height: 50px;
text-align: left;
font-size: 0.9em;
padding: 0 16px;
}
.ap-dir-rtl .ap-header
{
text-align: right;
}
.ap-theme-default .ap-header
{
height: 60px;
line-height: 60px;
}
.ap-content
{
max-width: 480px;
margin: 0 auto;
font-size: 40px;
}
.ap-content-top
{
height: 50px;
padding: 8px 16px;
color:#555;
text-align:center;
}
.ap-content-switch
{
margin-top: 8px;
margin-bottom: 8px;
text-align: center;
}
.ap-content-switch-tab
{
border: 1px solid #009688;
padding: 5px 16px;
cursor: pointer;
font-size: 0.6em;
color: #009688;
}
.ap-dir-ltr .ap-content-switch-date
{
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.ap-dir-rtl .ap-content-switch-date
{
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
margin-left: -1px;
}
.ap-dir-ltr .ap-content-switch-time
{
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
margin-left: -1px;
}
.ap-dir-rtl .ap-content-switch-time
{
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.ap-content-switch-selected
{
background: #009688;
color: #FFFFFF;
}
.ap-content-middle
{
min-height: 120px;
padding-top: 20px;
padding-bottom: 20px;
}
.ap-content-bottom
{
height: 50px;
padding: 8px 16px;
color:#555;
text-align:center;
}
.ap-theme-default .ap-content-top,
.ap-theme-default .ap-content-bottom
{
font-size: 0.7em;
}
.ap-footer
{
display: table;
table-layout: fixed;
width: 100%;
height: 50px;
}
.ap-theme-default .ap-footer
{
padding: 0 16px;
}
.ap-theme-default .ap-footer-top
{
line-height: 55px;
}
.ap-theme-default .ap-footer-bottom
{
line-height: 45px;
}
.ap-header__title
{
color: #000000;
font-size: 1.2em;
}
/* ------------------------- Buttons Start ---------------------------------- */
.ap-theme-default .ap-button
{
cursor: pointer;
letter-spacing: 0;
text-align: center;
font-size: 0.8em;
padding: 8px 12px;
margin: 8px;
color: #009688;
background: rgba(255, 255, 255, 1);
text-transform: uppercase;
}
.ap-theme-default .ap-button-cont
{
float: right;
}
.ap-theme-default.ap-dir-rtl .ap-button-cont
{
float: left;
}
/* ------------------------- Buttons End ---------------------------------- */
/* ------------------------- View Sections End ---------------------------------- */
/* ------------------------- Animations Start ---------------------------------- */
/* ------------------------------------------------------------------------------ */
.ap-show
{
opacity: 0;
animation: ap-anim-show ease 0.5s;
animation-iteration-count: 1;
-webkit-animation: ap-anim-show ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-show ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-show ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-show ease 0.5s;
-ms-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes ap-anim-show
{
0% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes ap-anim-show
{
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes ap-anim-show
{
0% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes ap-anim-show
{
0% { opacity:0; }
100% { opacity:1; }
}
/* ------------------------------------------------------------------------------ */
.ap-hide
{
animation: ap-anim-hide ease 0.5s;
animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
-webkit-animation: ap-anim-hide ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-hide ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-hide ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-hide ease 0.5s;
-ms-animation-iteration-count: 1;
}
@keyframes ap-anim-hide
{
0% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes ap-anim-hide
{
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes ap-anim-hide
{
0% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes ap-anim-hide
{
0% { opacity:1; }
100% { opacity:0; }
}
/* ------------------------------------------------------------------------------ */
.ap-bottom-slide-up
{
opacity: 0;
animation: ap-anim-bottom-slide-up ease 0.5s;
animation-iteration-count: 1;
-webkit-animation: ap-anim-bottom-slide-up ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-bottom-slide-up ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-bottom-slide-up ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-bottom-slide-up ease 0.5s;
-ms-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes ap-anim-bottom-slide-up
{
100% { opacity: 1; bottom: 0; }
}
@-moz-keyframes ap-anim-bottom-slide-up
{
100% { opacity: 1; bottom: 0; }
}
@-webkit-keyframes ap-anim-bottom-slide-up
{
100% { opacity: 1; bottom: 0; }
}
@-o-keyframes ap-anim-bottom-slide-up
{
100% { opacity: 1; bottom: 0; }
}
/* ------------------------------------------------------------------------------ */
.ap-bottom-slide-down
{
opacity: 1;
animation: ap-anim-bottom-slide-down ease 0.5s;
animation-iteration-count: 1;
-webkit-animation: ap-anim-bottom-slide-down ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-bottom-slide-down ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-bottom-slide-down ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-bottom-slide-down ease 0.5s;
-ms-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes ap-anim-bottom-slide-down
{
100% { opacity: 0; bottom: -1000px; }
}
@-moz-keyframes ap-anim-bottom-slide-down
{
100% { opacity: 0; bottom: -1000px; }
}
@-webkit-keyframes ap-anim-bottom-slide-down
{
100% { opacity: 0; bottom: -1000px; }
}
@-o-keyframes ap-anim-bottom-slide-down
{
100% { opacity: 0; bottom: -1000px; }
}
/* ------------------------------------------------------------------------------ */
.ap-top-slide-down
{
opacity: 0;
animation: ap-anim-top-slide-down ease 0.5s;
animation-iteration-count: 1;
-webkit-animation: ap-anim-top-slide-down ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-top-slide-down ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-top-slide-down ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-top-slide-down ease 0.5s;
-ms-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes ap-anim-top-slide-down
{
100% { opacity: 1; top: 0; }
}
@-moz-keyframes ap-anim-top-slide-down
{
100% { opacity: 1; top: 0; }
}
@-webkit-keyframes ap-anim-top-slide-down
{
100% { opacity: 1; top: 0; }
}
@-o-keyframes ap-anim-top-slide-down
{
100% { opacity: 1; top: 0; }
}
/* ------------------------------------------------------------------------------ */
.ap-top-slide-up
{
opacity: 1;
animation: ap-anim-top-slide-up ease 0.5s;
animation-iteration-count: 1;
-webkit-animation: ap-anim-top-slide-up ease 0.5s;
-webkit-animation-iteration-count: 1;
-moz-animation: ap-anim-top-slide-up ease 0.5s;
-moz-animation-iteration-count: 1;
-o-animation: ap-anim-top-slide-up ease 0.5s;
-o-animation-iteration-count: 1;
-ms-animation: ap-anim-top-slide-up ease 0.5s;
-ms-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes ap-anim-top-slide-up
{
100% { opacity: 0; top: -1000px; }
}
@-moz-keyframes ap-anim-top-slide-up
{
100% { opacity: 0; top: -1000px; }
}
@-webkit-keyframes ap-anim-top-slide-up
{
100% { opacity: 0; top: -1000px; }
}
@-o-keyframes ap-anim-top-slide-up
{
100% { opacity: 0; top: -1000px; }
}
/* ------------------------------------------------------------------------------ */
.ap-theme-default .ap-button-active
{
animation: ap-anim-default-button-active ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
-webkit-animation: ap-anim-default-button-active ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-moz-animation: ap-anim-default-button-active ease 0.5s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards;
-o-animation: ap-anim-default-button-active ease 0.5s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode:forwards;
-ms-animation: ap-anim-default-button-active ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards;
}
@keyframes ap-anim-default-button-active
{
100% { background: #E0F2F1; }
}
@-moz-keyframes ap-anim-default-button-active
{
100% { background: #E0F2F1; }
}
@-webkit-keyframes ap-anim-default-button-active
{
100% { background: #E0F2F1; }
}
@-o-keyframes ap-anim-default-button-active
{
100% { background: #E0F2F1; }
}
/* ------------------------------------------------------------------------------ */
/* ------------------------- Animations End ---------------------------------- */
/* ------------------------- Picker Component Start ---------------------------------- */
.ap-component-section
{
display: table;
table-layout: fixed;
width: 100%;
background: #FFFFFF;
}
.ap-loading
{
width: 100%;
height: 100%;
z-index: 2;
background: #FFFFFF;
}
.ap-component-section, ap-component-section *
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-select: none;
-ms-touch-action: none;
touch-action: none;
}
.ap-component
{
display: table-cell;
}
.ap-component-label
{
text-align: center;
font-size: 0.7em;
}
.ap-theme-default
{
color: #009688;
}
.ap-component-plus, .ap-component-minus
{
background: #FFFFFF;
color: #BDBDBD;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 15px;
cursor: pointer;
}
.ap-component-cont
{
position: relative;
/*height: 200px;*/
overflow: hidden;
}
.ap-component-data
{
position: absolute;
left: 0;
top: 0;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.ap-row
{
height: 40px;
line-height: 40px;
text-align: center;
overflow: hidden;
text-overflow: clip;
white-space:nowrap;
cursor: pointer;
color: #000000;
}
.ap-row-invalid
{
color: #FFCDD2;
}
.ap-row-hidden
{
opacity: 0;
}
.ap-component-selector
{
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: 40px;
border-top: 1px solid #009688;
border-bottom: 1px solid #009688;
}
.ap-theme-default .ap-component-selector
{
left: 10%;
width: 80%;
}
.ap-component-gradient
{
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 102%;
cursor: pointer;
/*
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2030\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2070\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%20100\%25\%29\%3B'
*/
background: rgba(255,255,255,0.8);
background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.8)), color-stop(30%, rgba(255,255,255,0.8)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(70%, rgba(255,255,255,0.8)), color-stop(100%, rgba(255,255,255,0.8)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}
/* ------------------------- Picker Component End ---------------------------------- */
... ...
... ... @@ -11,3 +11,6 @@
@import "form";
@import "modal";
@import "loading";
@import "select";
@import "anypicker";
@import "anypicker-ios";
... ...
.select {
position: fixed;
bottom: 0px;
width: 100%;
background: #fff;
z-index: 1001;
ul {
font-size: 34px;
text-align: center;
li {
height: 100px;
line-height: 100px;
border-bottom: 1px solid #e0e0e0;
}
.item-del {
margin-top: 10px;
border-top: 1px solid #e0e0e0;
color: #5c99e4
}
}
}
... ...
... ... @@ -10,11 +10,13 @@
p:first-child {
font-size: 34px;
}
p:nth-child(2) {
font-size: 78px;
color: #4a90e2;
line-height: 80px;
}
p:last-child {
color: #b0b0b0;
font-size: 28px;
... ... @@ -28,6 +30,7 @@
font-size: 28px;
color: #b0b0b0;
}
.coin-detail-list {
padding: 0 30px;
background: $white;
... ... @@ -69,6 +72,10 @@
.coin-num {
font-size: 34px;
line-height: 92px;
i {
font-style: normal;
}
}
}
}
... ...
... ... @@ -13,16 +13,16 @@
li {
&:first-of-type {
height: 100px;
line-height: 100px;
height: 130px;
line-height: 130px;
}
height: 80px;
height: 90px;
border-bottom: 1px solid #e0e0e0;
.details-icon {
float: right;
height: 90px;
height: 100%;
margin-right: 15px;
.icon {
... ... @@ -40,8 +40,8 @@
}
.head-portrait {
width: 90px;
height: 90px;
width: 92px;
height: 92px;
overflow: hidden;
border-radius: 50%;
border: 1px solid #eee;
... ... @@ -51,8 +51,8 @@
> label {
width: 100%;
height: 100%;
line-height: 80px;
font-size: 32px;
line-height: 90px;
font-size: 34px;
margin-right: 8%;
text-overflow: ellipsis;
white-space: nowrap;
... ...
.exchange-status {
background: #f6f6f6;
padding-bottom: 170px;
> div {
padding: 0 30px;
background: #fff;
}
.status-desc {
display: flex;
height: 80px;
line-height: 80px;
color: $white;
background: $black;
p:first-of-type {
flex: 1;
font-size: 34px;
}
}
.exchange-progress {
border-bottom: 1px solid #eee;
li {
position: relative;
padding-left: 55px;
.progress-desc {
padding: 30px 0;
border-bottom: 1px solid #eee;
}
&:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 17px;
height: 17px;
margin-top: -8px;
background: #b0b0b0;
border-radius: 50%;
z-index: 1;
}
&:after {
content: "";
position: absolute;
left: 8px;
top: 0;
width: 1px;
height: 100%;
background: #eee;
}
&.passed {
&:before {
background: #000;
}
}
p:first-of-type {
flex: 1;
font-size: 34px;
}
time {
color: #b0b0b0;
}
}
.progress-todo {
padding: 25px 0;
text-align: center;
p:first-of-type {
font-size: 34px;
b {
color: #4a90e2;
}
}
.phone {
color: #b0b0b0;
}
}
}
.exchange-details {
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
h2 {
height: 88px;
font-size: 32px;
line-height: 88px;
i {
display: inline-block;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #b0b0b0;
}
}
}
.exchange-product {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.goods-info {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0 none;
}
}
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img {
width: 100%;
height: 100%;
}
}
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span {
margin-right: 40px;
}
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 2.4em;
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size {
color: #b0b0b0;
}
}
.goods-price {
text-align: right;
p:first-of-type {
font-size: 28px;
}
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.exchange-reason {
padding: 20px 0;
font-size: 28px;
blockquote {
margin-top: 20px;
color: #b0b0b0;
}
}
.exchange-img {
display: flex;
margin-top: 25px;
margin-bottom: 10px;
li {
width: 154px;
height: 154px;
margin-right: 25px;
img {
width: 154px;
height: 154px;
}
}
}
.exchange-address {
position: relative;
padding: 20px 30px 27px;
margin-bottom: 20px;
border-top: 1px solid #eee;
word-wrap: break-word;
p:first-of-type {
font-size: 32px;
font-weight: 700;
span {
margin-right: 40px;
}
}
p:last-of-type {
font-size: 28px;
color: #b0b0b0;
}
}
.exchange-express {
margin-top: 20px;
}
.exchange-order,
.exchange-type {
display: flex;
position: relative;
height: 88px;
margin-top: 20px;
line-height: 88px;
font-size: 34px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.primary {
flex: 1;
}
.cell-ft {
color: #b0b0b0;
&:after {
content: "\e607";
display: inline-block;
font-size: 15px;
margin-left: 5px;
font-family: iconfont;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-right: -5px;
color: #999;
}
}
}
.exchange-options {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 30px 20px;
border-top: 1px solid #eee;
text-align: right;
background: #fff;
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
color: $black;
text-align: center;
-webkit-appearance: none;
border: 0 none;
background: $white;
font-size: 28px;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown {
color: $white;
background: $black;
}
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus {
outline: none;
}
}
}
}
... ...
... ... @@ -6,3 +6,4 @@
@import "about-us";
@import "coin";
@import "logistics";
@import "exchange-status";
\ No newline at end of file
... ...
... ... @@ -59,10 +59,23 @@ $white: #fff;
}
}
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img {
width: 100%;
height: 100%;
... ...
<template>
<div class="coin-detail">
<p>明细列表</p>
<ul class="coin-detail-list">
<li v-for="coin in coinList">
<div class="coin-source">
<p>{{coin.message}}</p>
<time>{{coin.date}}</time>
</div>
<div class="coin-num"><i v-if="coin.num>0">+</i>{{coin.num}}</div>
</li>
</ul>
</div>
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
// const Modal = require('common/modal');
module.exports = {
data() {
return {
page: 0,
limit: 15,
coinList: [],
busy: false,
};
},
ready() {
this.getCoinData();
},
methods: {
getCoinData() {
let _that = this;
this.busy = true;
$.ajax({
url: '/home/coin-detail',
data: {
page: ++this.page,
limit: this.limit
}
}).then(result => {
if (result.code === 200) {
if (result.isend) {
_that.busy = true;
} else {
_that.busy = false;
}
if (result.data.coinlist.length > 0) {
this.$set('coinList', result.data.coinlist);
}
}
}).fail(() => {
tip('网络错误');
});
}
}
};
</script>
\ No newline at end of file
... ...
... ... @@ -31,7 +31,7 @@
:is-visible="showFeatureSelector"
:entity="entity"
:on-add-to-cart="whenFeatureChange"
:config="{btnTxt:'确定'}">
button-text="确定">
</feature-selector>
</div>
</template>
... ... @@ -51,6 +51,7 @@
return {
title: '请选择换货商品',
page: 'exchange',
orderCode: qs.orderId,
showFeatureSelector: false,
entity: {},
exchangeData: {},
... ... @@ -92,7 +93,7 @@
$.ajax({
url: '/home/exchange/order',
data: {
orderId: qs.orderId
orderId: this.orderCode
}
}).then(res => {
const self = this;
... ... @@ -147,14 +148,48 @@
return result;
});
},
// 生成提交数据
submitData() {
const data = {
order_code: this.orderCode,
address_id: this.address.address_id,
address: this.address.address,
consigee_name: this.address.consignee,
area_code: this.address.areaCode,
zip_code: this.address.zipCode,
mobile: this.address.mobile,
delivery_typ: this.deliveryType,
app_type: 1,
goods: []
};
this.selectedGoods.forEach(good => {
data.goods.push({
product_skn: good.productSkn,
product_skc: good.productSku,
goods_type: good.goodsTypeId,
last_price: good.lastPrice,
exchange_reason: good.reason.id,
remark: good.remark,
evidence_images: good.imageList,
new_goods_id: good.newGoodsId,
new_product_sku: good.newProductSku
});
});
return data;
},
// 提交 换货
submit() {
if (!this.checkSubmitData()) {
alert('请填写完整退换货信息');
}
$.ajax({
method: 'POST',
url: '/home/refund/submit',
data: this.submitData
url: '/home/exchange/submit',
data: this.submitData()
}).then(result => {
if (result.code === 200) {
console.log(result);
... ...
... ... @@ -42,6 +42,10 @@
uid: this._uid
});
}
},
created() {
}
};
... ...
<template>
<ul>
<li>
<label>头像
<label @click="selicon">头像
<span class="details-icon">
<span class="head-portrait user-avatar" data-avatar="{{head_ico}}"></span>
<span class="head-portrait user-avatar" :style='icoStyle'></span>
<span class="icon icon-right"></span>
</span>
</label>
... ... @@ -12,20 +12,55 @@
<label>昵称<input class="details-nickname" v-model='nickname'></label>
</li>
<li>
<label>性别<span class="details-gender">{{ gender }}</span></label>
<label @click="selgender">性别<span class="details-gender">{{ gender }}</span></label>
</li>
<li>
<label>生日<span class="details-birthday">{{ birthday }}</span></label>
<label>生日<input id="birthday" class="details-birthday" type="text" v-model='birthday' readonly></input>
</li>
</ul>
</template>
<script>
const $ = require('yoho-jquery');
const dtpicker = require('common/anypicker');
const Select = require('common/select');
const iconSel = Select(['拍照','从相册选择']);
const genderSel = Select(['MEN', 'WOMEN']);
module.exports = {
props: ['head_ico', 'nickname', 'gender', 'birthday'],
data() {
return {
icoStyle: this.head_ico ? 'background-image:url(' + this.head_ico + ');' : ''
};
},
methods: {
selicon: function(){
iconSel.show(function(item) {
if (item === '拍照') {
console.log('拍照');
}
if (item === '从相册选择') {
console.log('从相册选择');
}
});
},
selgender: function(){
let _this = this;
genderSel.show(function(item) {
_this.gender = item.toLowerCase();
})
}
},
ready: function(){
$("#birthday").AnyPicker({
mode: "datetime",
dateTimeFormat: "yyyy. MM. dd",
theme: "iOS"
});
}
};
</script>
... ...
<template>
<ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<li class="order-item" v-for="(index, order) in orderList">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:{{order.orderCode}}</p>
<p>申请时间：{{order.orderCreateTime}}</p>
</div>
<p>{{order.statusName}}</p>
</div>
<div class="order-goods">
<div class="goods-info" v-for="product in order.goods">
<div class="img-box">
<img v-bind:src="product.goodsImage | resize 49 65" alt="{{product.productName}}">
<label v-if="product.goodsType == 'gift'">赠品</label>
</div>
<div class="goods-detail">
<p class="name">{{product.productName}}</p>
<p class="size">
<span>颜色: {{product.colorName}}</span>
<span>尺码: {{product.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen;{{product.salesPrice}}</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total"></div>
<div class="options" v-show="order.canCancel == 'Y'">
<button v-if="order.canCancel == 'Y'" class="normal">取消申请</button>
</div>
</div>
</div>
</li>
</ul>
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
//const Modal = require('common/modal');
module.exports = {
data() {
return {
page: 0,
limit: 10,
orderList: [],
busy: false,
};
},
ready() {
this.getOrderData();
},
methods: {
getOrderData() {
let _that = this;
this.busy = true;
$.ajax({
url: '/home/refund/get-orders',
data: {
page: ++this.page,
limit: this.limit
}
}).then(result => {
if (result.isend) {
_that.busy = true;
} else {
_that.busy = false;
}
if (result.data.list.length > 0) {
this.$set('orderList', result.data.list);
}
}).fail(() => {
tip('网络错误');
});
},
cancelApply(code) {
$.ajax({
url: '/home/cancel-apply',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if (result.code === 200) {
location.reload();
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
}
}
};
</script>
<style>
html,
body {
height: 100%;
}
@import "../../scss/home/_order.css";
.order-wrapper {
height: 100%;
ul {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
\ No newline at end of file
... ...
... ... @@ -414,7 +414,7 @@
*/
onAddToCart: (selection)=> {
$.post('/product/cart.json', {
productSku: selection.sizeId,
productSku: selection.size,
buyNumber: 1
}).then((result)=> {
// TODO: 库存不足 后台暂未实现
... ...