fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by yyq
Commit 632ef39594412f4687db03e66ca039dc38053562 2 parents 133a0707 d30e7f64

merge

Inline Side-by-side
Showing 17 changed files with 124 additions and 38 deletions
... ... @@ -117,8 +117,8 @@ export default {
.account-footer {
position: absolute;
padding: 28px 0;
left: 0;
right: 0;
left: 40px;
right: 40px;
bottom: 40px;
.submit-btn {
height: 88px;
... ...
<template>
<LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title" :isStop="isStop">
<LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title">
<div class="fixed-nav scroll-nav-wrap" v-if="navList.length" v-show="isShow">
<ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
</div>
... ... @@ -27,7 +27,7 @@
</div>
<div class="list-wrap">
<ProductList ref="product" :list="productList.list" :yasParams="listYasParams" v-if="productList.list.length > 0"></ProductList>
<UfoNoItem class="channel-no-item" :tip="`暂无数据`" v-else></UfoNoItem>
<UfoNoItem class="channel-no-item" :style="noItemStyle" :tip="`暂无数据`" v-else></UfoNoItem>
</div>
</div>
</LayoutScroll>
... ... @@ -60,10 +60,6 @@ export default {
homeYasParams: [],
options: {
pullUpLoad: true,
// pullDownRefresh: true,
// pullDownRefresh: {
// txt: '刷新成功',
// }
},
scrollEvents: ['scroll','scroll-end'],
title:'闲鱼潮',
... ... @@ -106,6 +102,7 @@ export default {
selectedCategory: {},
height: 0,
isA: false,
isHidden: true,
};
},
computed: {
... ... @@ -113,8 +110,10 @@ export default {
navList() {
return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
},
isStop() {
return this.scrollY < 10;
noItemStyle() {
return {
height: this.total + 'px'
}
}
},
watch: {
... ... @@ -214,6 +213,7 @@ export default {
});
},
setYasParam: function(params) {
console.log('setYas')
let {total, list} = this.productList;
if (params && typeof params === 'object' && Object.keys(params).length) {
... ... @@ -252,14 +252,17 @@ export default {
},
getIndex({index,params}) {
this.selectedCategory = params;
this.setYasParam({index,...params});
this.active = Number(index);
this.isShow && this.$refs.scroll.scrollTo(0, -this.navTop, 300);
this.isShow && this.$refs.scroll.scrollTo(this.navTop);
this.setYasParam({index,...params});
},
scrollEndHandler({y}) {
let scrollHeight = Math.abs(y)
this.reportYas(scrollHeight)
this.$refs.product && this.$refs.product.yasShowEvent(scrollHeight+this.navTop);
if(scrollHeight === this.navTop) {
return
}
this.reportYas(scrollHeight)
},
scrollHandler({ y }) {
this.scrollY = -y;
... ... @@ -453,14 +456,13 @@ export default {
.list-wrap {
background: #f2f2f2;
/deep/ .item {
position: relative;
z-index: 1;
}
.channel-no-item {
padding-top: 200px;
margin: 0 auto;
}
}
.yohoufo-channel-page {
... ... @@ -507,4 +509,8 @@ input::-webkit-input-placeholder {
.class-a {
padding-top: 104px;
}
.hidden {
visibility: hidden;
opacity: 0;
}
</style>
... ...
... ... @@ -28,7 +28,6 @@ export default {
data() {
return {
index: 0,
labels: [],
};
},
... ...
... ... @@ -41,6 +41,14 @@ export default {
name: 'ProductDetail',
params: {
productId: product.id,
/**
* 传递可用的初始化数据，避免白屏
*/
productInfo: {
...product,
price: product[this.priceKey], // 统一接收端使用的价格key
},
}
});
},
... ... @@ -141,6 +149,7 @@ export default {
color: #d0021b;
font-size: 32px;
vertical-align: center;
@include num
}
.item-imge {
... ...
... ... @@ -72,7 +72,7 @@ export default {
}
.icon-size2 {
font-size: 38px;
font-size: 48px;
}
.index {
... ... @@ -91,6 +91,7 @@ export default {
.name {
font-size: 32px;
font-weight: bold;
margin-bottom: 12px;
}
... ... @@ -102,5 +103,6 @@ export default {
.mobile {
font-size: 28px;
margin-top: 12px;
font-weight: bold;
}
</style>
... ...
... ... @@ -3,7 +3,7 @@
<div class="input-wrapper">
<div class="price-symbol">￥</div>
<input ref="input" :value="value" class="tip" type="text" placeholder="定价需以9结尾，例如￥1299" @blur="onBlur"
@change="onChange"></input>
@change="onChange"/>
</div>
<div class="num-wrapper" v-if="superSell">
<i class="iconfont iconplus-minus icon-class" @click="onMinus"></i>
... ... @@ -75,6 +75,7 @@ export default {
position: relative;
overflow: hidden;
height: 120px;
border-radius: 8px;
background: #f5f5f5;
}
... ... @@ -93,6 +94,7 @@ export default {
font-weight: 500;
line-height: 80px;
background: #f5f5f5;
@include num
}
::placeholder {
... ...
... ... @@ -306,6 +306,7 @@ export default {
.pay-price {
color: #d0021b;
@include num
}
}
... ...
... ... @@ -93,6 +93,7 @@ export default {
color: #d0021b;
letter-spacing: 0;
font-weight: bold;
@include num
}
.status {
... ...
... ... @@ -111,6 +111,7 @@ export default {
color: #d0021b;
letter-spacing: 0;
font-weight: bold;
@include num
}
.status {
... ...
<template>
<layout-app
:title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'"
:title="$route.params.owner === 'sell' ? '我的出售' : '我的购买订单'"
class="list-page"
>
<status-nav :status="status" :owner="owner" @select="onStatusChange"/>
... ...
... ... @@ -10,7 +10,7 @@
>
</InputPrice>
<OrderMargin class="order-item order-margin" :data="fee" :super-sell="superSell" :url="tipUrl"></OrderMargin>
<OrderFee class="order-item" :data="fee"></OrderFee>
<OrderFee class="order-item order-fee" :data="fee"></OrderFee>
<AddressInfo :data="address" class="order-item"></AddressInfo>
<!-- </Scroll>-->
</div>
... ... @@ -481,6 +481,11 @@ export default {
background: #fff;
}
.order-fee {
padding-top: 20px;
padding-bottom: 20px;
}
.btn-wrapper {
margin-bottom: 40px;
padding: 0 40px;
... ...
... ... @@ -9,7 +9,7 @@
<div class="size-item">
<div class="size">
<div class="size-info"><span>{{info.name}}</span><span v-if="info.subName">{{info.subName}}</span></div>
<div class="size-price" v-if="!simplePrice">¥ {{info.price}}</div>
<div class="size-price" v-if="!simplePrice">¥{{info.price}}</div>
</div>
</div>
</li>
... ... @@ -218,10 +218,14 @@ export default {
margin-right: -1px;
margin-bottom: -1px;
.size-info,
.size-price {
.size-info {
@include num;
}
.size-price {
font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
}
&.selected {
background: $primary-color;
... ...
... ... @@ -7,7 +7,8 @@
<cube-slide ref="slide" :data="imageList">
<cube-slide-item v-for="(item, index) in imageList" :key="index">
<a click="javascript:void 0" class="square-img-container">
<square-img :src="item.image_url" :width="300" :height="300" />
<square-img v-if="!item.initial" :src="item.image_url" :width="600" :height="600" />
<square-img v-else :src="item.image_url" :width="274" :height="274" /> <!-- 利用缓存, productList使用的size -->
</a>
</cube-slide-item>
<template slot="dots" slot-scope="props">
... ... @@ -26,8 +27,8 @@
</div>
<div class="info-name"><div>{{productDetail.product_name}}</div></div>
</div>
<a class="banner" v-if="resource" @click.prevent="gotoNewPage(resource.url)">
<img-size ref="resourceImg" :src="sizeImg(resource.src)"/>
<a class="banner" @click.prevent="gotoNewPage">
<img-size v-if="resource" ref="resourceImg" :src="sizeImg(resource.src)"/>
</a>
<div class="info">
<transition-group name="info-list" tag="div" class="info-list">
... ... @@ -202,6 +203,15 @@ export default {
throw new Error('无效的商品ID');
}
/**
* 接收初始化数据
*/
const initialProductInfo = router.params.productInfo;
if (initialProductInfo) {
store.dispatch('product/setupInitialProductInfo', initialProductInfo);
}
return store.dispatch('product/fetchProductInfo', {productId});
},
activated() {
... ... @@ -252,7 +262,8 @@ export default {
next();
},
methods: {
...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'setupInitialProductInfo',
'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
historyBackGuard() {
for (let key of Object.keys(this.actionSheetCloseMap)) {
if (this[key]) {
... ... @@ -347,6 +358,7 @@ export default {
name: this.$route.name,
params: {
productId: product.id,
productInfo: product,
},
});
},
... ... @@ -507,7 +519,13 @@ export default {
},
// 资源位
gotoNewPage(url) {
gotoNewPage() {
if (!this.resource || !this.resource.url) {
return;
}
const url = this.resource.url;
/**
* 商品详情页中的资源位点击
* XY_UFO_GDS_DT_BANNER_C
... ... @@ -569,14 +587,14 @@ export default {
.cube-dot {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 10px;
width: 4px;
height: 4px;
margin: 0 5px;
background: rgba(0, 0, 0, 0.15);
border-radius: 50%;
&.active {
transform-origin: 50% 50%;
transform: scale(1.3333);
transform: scale(1.5);
background: rgba(0, 0, 0, 1);
}
}
... ... @@ -600,10 +618,12 @@ export default {
.banner {
display: block;
height: 132px;
img {
display: block;
width: 100%;
height: 132px;
height: 100%;
}
}
... ... @@ -636,13 +656,14 @@ export default {
}
.info-basic {
padding: 46px 40px 32px;
padding: 46px 40px 30px;
.info-price {
color: #d0021b;
font-size: 48px;
@include num;
font-weight: bold;
line-height: 56px;
height: 56px;
... ... @@ -665,10 +686,11 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
overflow: Hide;
overflow: hidden;
div {
font-size: 28px;
font-weight: bold;
line-height: 32px;
max-height: 64px;
white-space: normal;
... ...
... ... @@ -3,8 +3,9 @@ import { get } from 'lodash';
import Vue from 'vue';
export default {
ensureProduct({ commit }, { productId }) {
ensureProduct({ commit, state }, { productId }) {
commit(Types.ENSURE_PRODUCT_DETAIL, { productId });
return state.products[productId];
},
async fetchProductInfo({ commit, state }, { productId }) {
const queryTasks = ['', '/resource', '/activity', '/recommend'].map(path => {
... ... @@ -71,6 +72,18 @@ export default {
commit(Types.UPDATE_BRAND_PRODUCT_TOP_LIST, { productId, topList: productList});
}
},
async setupInitialProductInfo({ commit, state, dispatch }, payload) {
const { id: productId } = payload;
if (!productId) {
return;
}
const productInfo = await dispatch('ensureProduct', {productId});
if (productInfo.product_name === null) {
commit(Types.SETUP_INITIAL_PRODUCT_INFO, payload);
}
},
async toggleFav({ commit }, { productId, isFav }) {
const result = await this.$api.post(`/api/ufo/product/favorite/${isFav ? 'add' : 'cancel'}`, { productId });
... ...
import * as Types from './types';
import { find } from 'lodash';
import { find, set } from 'lodash';
import { defaultProduct, defaultSelectedSize } from './index';
... ... @@ -58,4 +58,21 @@ export default {
[Types.RESET_SELECTED_PRODUCT_SIZE](state) {
Object.assign(state.selectedProductInfo, defaultSelectedSize());
},
[Types.SETUP_INITIAL_PRODUCT_INFO](state, payload) {
const { id: productId } = payload;
const productInfo = state.products[productId];
// 规格化数据
[['id', 'product_id'], ['price', 'least_price'], ['product_name'], ['default_images', 'goods_list[0].image_list[0].image_url']].forEach((keyMap) => {
const val = payload[keyMap[0]];
if (val !== null) {
set(productInfo, keyMap[1] || keyMap[0], val);
if (keyMap[0] === 'default_images') {
set(productInfo, 'goods_list[0].image_list[0].initial', true); // 区分初始化数据，方便使用缓存
}
}
});
}
};
... ...
export const UPDATE_PRODUCT_DETAIL = 'UPDATE_PRODUCT_DETAIL';
export const SETUP_INITIAL_PRODUCT_INFO = 'SETUP_INITIAL_PRODUCT_INFO';
export const ENSURE_PRODUCT_DETAIL = 'ENSURE_PRODUCT_DETAIL';
export const UPDATE_PRODUCT_FAV = 'UPDATE_PRODUCT_FAV';
export const UPDATE_SELECTED_PRODUCT_SIZE = 'UPDATE_SELECTED_PRODUCT_SIZE';
... ...
... ... @@ -60,7 +60,10 @@ const webpackConfig = merge(baseConfig, {
parallel: true,
sourceMap: true,
terserOptions: {
safari10: true
safari10: true,
compress: {
drop_console: true,
}
}
})]
},
... ...