fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 71fe69b4fed60c1f4ff80a55bc54ba2f3e71b631 2 parents d8236302 fea84882

订单列表

Inline Side-by-side
Showing 25 changed files with 183 additions and 76 deletions
... ... @@ -154,9 +154,9 @@ export default {
bottom: 0;
.yoho-popup-container {
background-color: #fff;
position: relative;
opacity: 1;
overflow: hidden;
}
&:after {
... ... @@ -170,11 +170,4 @@ export default {
background: #fff;
}
}
.yoho-action-sheet {
.yoho-popup-container {
border-radius: 8px 8px 0 0;
overflow: hidden;
}
}
</style>
... ...
... ... @@ -22,8 +22,8 @@
</div>
</div>
</slot>
<div name="footer">
<YohoButton txt="确定" class="footer" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -80,6 +80,8 @@ export default {
position: relative;
display: flex;
flex-direction: column;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -127,6 +129,20 @@ export default {
.footer {
font-size: 32px;
height: 112px;
background-color: white;
border-top: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.btn-wrapper {
width: 640px;
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
... ...
import createAPI from 'utils/create-api';
export default function addPayType(Vue, PayType) {
createAPI(Vue, PayType, ['closeAction', 'confirmAction'], true);
createAPI(Vue, PayType, ['closeAction', 'confirmAction', 'payError', 'paySuccess'], true);
}
... ...
... ... @@ -22,8 +22,8 @@
</div>
</div>
</slot>
<div name="footer" class="footer">
<YohoButton txt="确定支付" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定支付" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -111,7 +111,7 @@ export default {
});
},
onError(result) {
this.$emit('on-pay-error');
this.$emit('payError');
this.$createToast({
txt: result.message,
time: 1500,
... ... @@ -120,7 +120,7 @@ export default {
},
onSuccess(result) {
this.hide();
this.$emit('on-pay-success');
this.$emit('paySuccess');
this.$router.push({
name: 'OrderPay',
... ... @@ -139,6 +139,8 @@ export default {
height: 714px;
background: white;
position: relative;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -198,6 +200,13 @@ export default {
box-sizing: border-box;
}
.btn-wrapper {
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
margin-top: 40px;
margin-bottom: 60px;
... ...
... ... @@ -17,8 +17,8 @@
</div>
</div>
</slot>
<div name="footer">
<YohoButton txt="确定" class="footer" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -75,6 +75,8 @@ export default {
position: relative;
display: flex;
flex-direction: column;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -121,6 +123,20 @@ export default {
.footer {
font-size: 32px;
height: 112px;
background-color: white;
border-top: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.btn-wrapper {
width: 640px;
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
... ...
... ... @@ -64,7 +64,7 @@ export default {
height: 80px;
top: 10px;
right: 0;
background: linear-gradient(#fff, #f0f0f0, #fff);
background: linear-gradient(#fff, #E0E0E0, #fff);
}
}
}
... ... @@ -76,7 +76,6 @@ export default {
}
.order-text {
padding-top: 10px;
font-size: 24;
color: #444;
text-align: center;
... ...
... ... @@ -73,7 +73,7 @@ export default {
width: 100%;
line-height: 90px;
font-size: 24px;
color: #D0021B;
color: #000;
padding-left: 20px;
overflow: hidden;
text-overflow: ellipsis;
... ...
<template>
<div class="tab-item" :class="itemClass" @click="goPage(data)">
<div class="title" :class="titleClass">{{ data.title }}</div>
<i v-if="icon" class="tab-icon" :class=icon></i>
<div v-if="data.title" class="title" :class="titleClass">{{ data.title }}</div>
<slot
><div class="text">{{ data.num }}</div></slot
>
... ... @@ -39,6 +40,10 @@ export default {
titleSmall: {
type: Boolean,
default: false
},
icon: {
type: String,
default: ''
}
},
data() {
... ... @@ -55,7 +60,7 @@ export default {
titleClass() {
return {
"title-bold": this.titleBold,
"title-size": this.titleSmall
"title-small": this.titleSmall
};
}
},
... ... @@ -89,14 +94,19 @@ export default {
height: 120px;
line-height: 120px;
}
.tab-icon {
font-size: 36px;
color: #444;
}
.small {
height: 90px;
line-height: 90px;
}
.title-small {
font-size: 30px;
}
.grey {
background-color: #f5f7f9;
background-color: #F2F2F2;
margin: 0 -40px;
padding: 0 40px;
}
... ... @@ -116,10 +126,6 @@ export default {
font-weight: bold;
}
.title-size {
font-size: 28px;
}
.text {
font-family: "Alte DIN 1451 Mittelschrift";
color: black;
... ... @@ -128,7 +134,7 @@ export default {
}
.cubeic-arrow {
color: #d8d8d8;
color: #999;
margin-left: 10px;
font-size: 32px;
}
... ...
... ... @@ -2,7 +2,7 @@
<LayoutApp :show-back="true">
<div class="body" ref="body">
<div v-for="(value, key) in getMineList" :key="key">
<tab-item v-if="key === 'board'" :data="value" noLine titleBold titleSmall small grey>
<tab-item v-if="key === 'board'" :data="value" noLine icon="cubeic-notification" small grey>
<scroll></scroll>
</tab-item>
<template v-else-if="key === 'resource1' || key === 'resource2'">
... ... @@ -10,9 +10,12 @@
<singleImage :data="value.data.data[0]"></singleImage>
</div>
</template>
<order v-else-if="key === 'order'"></order>
<tab-item v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
<div v-else-if="key === 'order'" class="bg-bottom">
<order></order>
</div>
<div v-else-if="key === 'sale'" class="bg-top">
<tab-item :data="value" noLine titleBold titleSmall></tab-item>
</div>
<tab-item v-else :data="value"></tab-item>
</div>
</div>
... ... @@ -64,4 +67,19 @@ export default {
background-color: white;
padding: 0 40px;
}
.bg-top,
.bg-bottom {
background-color: #F2F2F2;
}
.bg-top {
border-top-left-radius: 32px;
border-top-right-radius: 32px;
margin-top: 30px;
padding: 0 30px;
}
.bg-bottom {
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
margin-bottom: 20px;
}
</style>
... ...
... ... @@ -25,10 +25,10 @@ import ProductInfo from './components/confirm/buyer-product';
import AddressInfo from './components/confirm/address';
import TitleComp from './components/confirm/title';
import BuyerFeeInfo from './components/confirm/buyer-fee';
import OrderInfo from './components/confirm/order-info';
import OrderInfo from './components/confirm/buyer-order-info';
import OrderFooter from './components/confirm/buyer-order-footer';
import Coupon from './components/confirm/coupon';
import Promotion from './components/confirm/promotion';
import Coupon from './components/confirm/buyer-coupon';
import Promotion from './components/confirm/buyer-promotion';
import { Types, UserType } from 'store/order/order-confirm';
import { get } from 'lodash';
... ...
... ... @@ -51,6 +51,10 @@ export default {
.agree {
font-size: 24px;
color: #999;
height: 76px;
background-color: white;
padding: 0 40px;
line-height: 76px;
}
.link {
... ...
... ... @@ -48,7 +48,7 @@ export default {
.red {
font-size: 36px;
color: red;
color: #d0021b;
font-weight: bold;
}
</style>
... ...
<template>
<div class="agree-wrapper">
<Agree></Agree>
<div class="order-footer-wrapper">
<div class="btn1">
<span>待支付：<span class="red">￥{{amount}}</span></span>
<div>实付金额：<span class="red">￥{{amount}}</span></div>
<div class="desc">本次交易由闲鱼x有货提供服务</div>
</div>
<YohoButton class="btn2" txt="去支付" @click="onClick"></YohoButton>
</div>
</div>
</template>
<script>
import Agree from './agree';
export default {
name: 'BuyerOrderFooter',
props: ['amount'],
components: {
Agree
},
methods: {
onClick() {
this.$emit('click');
... ... @@ -24,25 +33,39 @@ export default {
.order-footer-wrapper {
width: 100%;
border-top: 1px solid #eee;
padding: 0 40px;
height: 120px;
display: flex;
align-items: center;
}
.agree-wrapper {
border-top: 1px solid #eee;
}
.btn1 {
flex: 1;
font-size: 24px;
text-align: center;
line-height: 120px;
text-align: left;
}
.btn2 {
width: 300px;
font-size: 36px;
width: 220px;
height: 80px;
line-height: 80px;
font-size: 24px;
}
.red {
font-size: 36px;
color: red;
font-size: 28px;
color: #d0021b;
font-weight: bolder;
}
.desc {
margin-top: 8px;
font-size: 20px;
color: #999;
}
</style>
... ...
... ... @@ -40,7 +40,8 @@ export default {
.input-wrapper {
display: flex;
position: relative;
height: 100px;
overflow: hidden;
height: 120px;
background: #f5f5f5;
}
... ... @@ -50,18 +51,20 @@ export default {
margin-right: 10px;
font-size: 40px;
font-weight: bolder;
line-height: 100px;
line-height: 120px;
}
.tip {
flex: 1;
font-size: 28px;
line-height: 100px;
font-size: 56px;
font-weight: 500;
line-height: 120px;
background: #f5f5f5;
}
::placeholder {
color: #ccc;
font-size: 28px;
opacity: 1; /* Firefox */
}
... ...
... ... @@ -115,7 +115,7 @@ export default {
.fee {
font-size: 28px;
color: red;
color: #d0021b;
}
.icon-class {
... ...
... ... @@ -32,7 +32,7 @@ export default {
}
.red {
color: red;
color: #d0021b;
}
.tip2 {
... ...
... ... @@ -10,7 +10,9 @@
</div>
<div class="footer">
<OrderAgree :value="agree" @input="changeAgree" class="agree-wrapper" :desc="agreeDesc"></OrderAgree>
<YohoButton :txt="txt" @click="onClick" :disable="!agree"></YohoButton>
<div class="btn-wrapper">
<YohoButton :txt="txt" class="submit-btn" @click="onClick" :disable="!agree"></YohoButton>
</div>
</div>
</LayoutApp>
</template>
... ... @@ -162,13 +164,6 @@ export default {
</script>
<style lang="scss" scoped>
.footer {
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
.body {
height: 100%;
margin: 0 40px;
... ... @@ -185,11 +180,27 @@ export default {
border-top: 1px solid #eee;
}
.agree-wrapper {
height: 60px;
background-color: white;
.footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #eee;
z-index: 1;
}
.btn-wrapper {
margin-bottom: 40px;
padding: 0 40px;
line-height: 60px;
}
.agree-wrapper {
padding: 0 50px;
}
.submit-btn {
height: 80px;
line-height: 80px;
font-size: 28px;
}
</style>
... ...
... ... @@ -261,6 +261,8 @@ export default {
this.showSizeSelectSheet = false;
},
buy() {
this.$yoho.auth();
this.selectSizeConfig = {
dest: 'OrderBuyConfirm',
type: 'buy',
... ... @@ -272,6 +274,8 @@ export default {
this.showBuySheet = false;
},
sell() {
this.$yoho.auth();
this.selectSizeConfig = {
dest: 'OrderSellConfirm',
type: 'sell',
... ... @@ -401,7 +405,7 @@ export default {
}
&-list {
line-height: 120px;
line-height: 104px; // PM: 60 -> 52
white-space: nowrap;
&-item {
... ...

1.72 KB | W: | H:

2.65 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.74 KB | W: | H:

2.66 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -92,7 +92,7 @@ export default function() {
},
getMineList(state) {
let tabList = {
board: { title: '公告栏', page: 'noticeList' },
board: { title: '', page: 'noticeList' },
sale: {
title: '出售中',
num: state.sellerNum,
... ... @@ -124,16 +124,16 @@ export default function() {
page: 'favorite',
},
coupon: {
name: 'coupon',
title: '我的优惠券',
num: state.couponNum,
page: ''
},
service: {
name: 'service',
title: '我的客服',
page: 'service'
},
name: 'coupon',
title: '我的优惠券',
num: state.couponNum,
page: ''
},
service: {
name: 'service',
title: '我的客服',
page: 'service'
},
resource2: { name: 'resource2', data: state.resource2 },
};
... ...
... ... @@ -4,7 +4,12 @@ import { get } from 'lodash';
export default {
async fetchProductInfo({commit}, {productId}) {
const queryTasks = ['', '/fav', '/resource', '/activity', '/recommend'].map(path => {
return this.$api.get(`/api/ufo/product${path}`, {product_id: productId}).then(result => {
let paramKey = 'product_id';
if (path === '/fav') {
paramKey = 'productId';
}
return this.$api.get(`/api/ufo/product${path}`, {[paramKey]: productId}).then(result => {
if (result.code === 200) {
return result.data;
} else {
... ...