|
...
|
...
|
@@ -7,6 +7,12 @@ import { connect } from '@tarojs/redux'; |
|
|
|
import { showSizeBox, showSharesheet, showSnapshot } from '../../actions/productDetail'
|
|
|
|
import config from '../../config.js'
|
|
|
|
import goYohoBuy from '../../assets/images/goYohoBuy@3x.png';
|
|
|
|
import goOnLine from '../../assets/images/goOnLine@3x.png';
|
|
|
|
import storeLocation from '../../assets/images/store-location@3x.png';
|
|
|
|
import router from '../../router/index.js';
|
|
|
|
const urlParse = require('url');
|
|
|
|
const queryString = require('querystring');
|
|
|
|
import getPrivateKey from '../../libs/request/getPrivateKey.js';
|
|
|
|
|
|
|
|
import share from '../../static/images/share.png';
|
|
|
|
import collect from '../../static/images/collect.png';
|
|
...
|
...
|
@@ -48,6 +54,8 @@ export default class ProductDetail extends Component { |
|
|
|
collectTitle: '收藏',
|
|
|
|
isFavorite: false,
|
|
|
|
snapshootShareData: {},
|
|
|
|
skup: '',
|
|
|
|
storeId: -1,
|
|
|
|
productDec: {
|
|
|
|
color: {
|
|
|
|
text: '颜色',
|
|
...
|
...
|
@@ -92,22 +100,93 @@ export default class ProductDetail extends Component { |
|
|
|
yas = new Yas(this.$scope);
|
|
|
|
yas.pageOpenReport();
|
|
|
|
let options = this.$router.params;
|
|
|
|
if (options && options.scene) {
|
|
|
|
if (options && options.q) {
|
|
|
|
let url = decodeURIComponent(options.q);
|
|
|
|
let urlObj = urlParse.parse(url);
|
|
|
|
if (urlObj.host === 'o.yohobuy.com' && urlObj.pathname === '/ufo') {
|
|
|
|
const queryObj = queryString.parse(urlObj.query);
|
|
|
|
const p = queryObj.p;
|
|
|
|
const storeArr = p.split(',') || [];
|
|
|
|
const storeId = storeArr[1];
|
|
|
|
if (queryObj.skup) {
|
|
|
|
wx.hideShareMenu();
|
|
|
|
this.setState({
|
|
|
|
skup: queryObj.skup,
|
|
|
|
storeId
|
|
|
|
})
|
|
|
|
this.loadStoreProductInfo(queryObj.skup, storeId);
|
|
|
|
} else {
|
|
|
|
this.loadElement({ id: queryObj.productId || queryObj.skn });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (options && options.scene) {
|
|
|
|
console.log(options.scene);
|
|
|
|
// let code = '073c8bb068f4fc9d8dc573b5d4284e3f';
|
|
|
|
let code = options.scene;
|
|
|
|
getQRCodeSource(code).then(json => {
|
|
|
|
if (json) {
|
|
|
|
this.loadElement(json);
|
|
|
|
}
|
|
|
|
if (json) {
|
|
|
|
this.loadElement(json);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
.catch(error => {
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.loadElement(options);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async loadStoreProductInfo(skup, storeId) {
|
|
|
|
await getPrivateKey();
|
|
|
|
productDetailModel.getStoreProductDetail(skup, storeId).then(res => {
|
|
|
|
console.log(res);
|
|
|
|
if (res && res.code === 200) {
|
|
|
|
let data = res.data || {};
|
|
|
|
let image_list = data.image_list;
|
|
|
|
let goodsList = { image_list }
|
|
|
|
let imageSize = image_list.length;
|
|
|
|
let default_image = imageSize > 0 ? image_list[0] : '';
|
|
|
|
let productInfo = data;
|
|
|
|
let seriesObj = {
|
|
|
|
text: '系列',
|
|
|
|
value: data.series_name
|
|
|
|
};
|
|
|
|
seriesObj = data.series_name ? [seriesObj] : [];
|
|
|
|
this.setState({
|
|
|
|
productInfo,
|
|
|
|
id: data.product_id,
|
|
|
|
imageSize: imageSize,
|
|
|
|
goodsList: goodsList,
|
|
|
|
swiperNum: `1 | ${imageSize}`,
|
|
|
|
productDec: [
|
|
|
|
{
|
|
|
|
text: '颜色',
|
|
|
|
value: data.color_name
|
|
|
|
}, {
|
|
|
|
text: '尺码',
|
|
|
|
value: data.size_name
|
|
|
|
}, {
|
|
|
|
text: '品牌',
|
|
|
|
value: data.brand_name
|
|
|
|
},
|
|
|
|
...seriesObj
|
|
|
|
, {
|
|
|
|
text: '发售时间',
|
|
|
|
value: data.sale_time
|
|
|
|
}, {
|
|
|
|
text: '货号',
|
|
|
|
value: data.product_code
|
|
|
|
}, {
|
|
|
|
text: '库存编号',
|
|
|
|
value: data.skup
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
loadElement(options) {
|
|
|
|
let productId = options.id
|
|
|
|
|
|
...
|
...
|
@@ -215,6 +294,9 @@ export default class ProductDetail extends Component { |
|
|
|
}
|
|
|
|
|
|
|
|
getFavoriteState(id) {
|
|
|
|
if(!id){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
productDetailModel.getFavoriteState(id).then(ret => {
|
|
|
|
if (ret && ret.code === 200) {
|
|
|
|
this.setState({
|
|
...
|
...
|
@@ -334,6 +416,36 @@ export default class ProductDetail extends Component { |
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
onStoreBuyNow() {
|
|
|
|
let { skup, productInfo, storeId } = this.state;
|
|
|
|
event.emit('user-is-login', () => {
|
|
|
|
this.judgeCanBuy(skup, productInfo, storeId);
|
|
|
|
}, () => {
|
|
|
|
this.judgeCanBuy(skup, productInfo, storeId);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
judgeCanBuy(skup, productInfo, storeId) {
|
|
|
|
productDetailModel.createPaymentinfo(skup).then(data => {
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
let { product_id } = productInfo;
|
|
|
|
Taro.navigateTo({
|
|
|
|
url: `/pages/order/orderConfirm/orderConfirm?is_store=1&skup=${skup}&product_id=${product_id}&store_id=${storeId}`,
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
Taro.showToast({
|
|
|
|
title: data.message,
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}).catch(error => {
|
|
|
|
Taro.showToast({
|
|
|
|
title: error.message,
|
|
|
|
icon: 'none'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
goYohoBuyMinApp() {
|
|
|
|
wx.navigateToMiniProgram({
|
|
|
|
appId: 'wx084ab813d88c594b',
|
|
...
|
...
|
@@ -341,7 +453,14 @@ export default class ProductDetail extends Component { |
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
goOnLineProuduct(id) {
|
|
|
|
let params = {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
router.go('productDetail', params)
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.props.productDetail.showSharesheet) {
|
|
...
|
...
|
@@ -356,18 +475,23 @@ export default class ProductDetail extends Component { |
|
|
|
let {showSizeBox} = this.props;
|
|
|
|
showSizeBox(false);
|
|
|
|
}
|
|
|
|
event.removeAll('SHARE_FRIENDS');
|
|
|
|
event.removeAll('SHARE_MOMENTS');
|
|
|
|
event.removeAll('SHARE_CANCEL');
|
|
|
|
event.removeAll('SHARE_CANCEL_MOMENTS');
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let {productInfo, recommendList, goodsList, productDec, id} = this.state;
|
|
|
|
let {productInfo, recommendList, goodsList, productDec, id, skup} = this.state;
|
|
|
|
let imageList = goodsList.image_list || [];
|
|
|
|
let status = productInfo.status;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View className="product-page">
|
|
|
|
<View className="swiperNum">{this.swiperNum}</View>
|
|
|
|
<Swiper className='product-swiper' autoplay onChange={this.onChangeSwiper}>
|
|
|
|
{
|
|
|
|
imageList.map((item, index) => {
|
|
|
|
!skup && imageList.map((item, index) => {
|
|
|
|
return (
|
|
|
|
<SwiperItem key={index}>
|
|
|
|
<Image src={getImgUrl(item.image_url, 750, 750)} class="swiper-img" mode="aspectFill"/>
|
|
...
|
...
|
@@ -375,18 +499,39 @@ export default class ProductDetail extends Component { |
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
{
|
|
|
|
skup && imageList.map((item, index) => {
|
|
|
|
return (
|
|
|
|
<SwiperItem key={index}>
|
|
|
|
<Image src={getImgUrl(item, 750, 750)} class="swiper-img" mode="aspectFill"/>
|
|
|
|
</SwiperItem>
|
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</Swiper>
|
|
|
|
|
|
|
|
<View className="product-ctr">
|
|
|
|
<View className="collect" onClick={this.onClickCollect.bind(this, id)}>
|
|
|
|
<Image src={isFavorite ? collect : collectOff} className="collect-icon"/>
|
|
|
|
<Text className="text">{collectTitle}</Text>
|
|
|
|
</View>
|
|
|
|
<View className="share" onClick={this.onClickShare.bind(this, id)}>
|
|
|
|
<Image src={share} className="share-icon"/>
|
|
|
|
<Text className="text">分享</Text>
|
|
|
|
{
|
|
|
|
!skup && (<View className="product-ctr">
|
|
|
|
<View className="collect" onClick={this.onClickCollect.bind(this, id)}>
|
|
|
|
<Image src={isFavorite ? collect : collectOff} className="collect-icon"/>
|
|
|
|
<Text className="text">{collectTitle}</Text>
|
|
|
|
</View>
|
|
|
|
<View className="share" onClick={this.onClickShare.bind(this, id)}>
|
|
|
|
<Image src={share} className="share-icon"/>
|
|
|
|
<Text className="text">分享</Text>
|
|
|
|
</View>
|
|
|
|
</View>)
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
skup && (
|
|
|
|
<View className="product-ctr">
|
|
|
|
<View className="store-title">
|
|
|
|
<Image className="store-image" src={storeLocation}></Image>{productInfo.store_name}
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
<View className="product-name">{productInfo.product_name}</View>
|
|
|
|
|
|
...
|
...
|
@@ -400,22 +545,43 @@ export default class ProductDetail extends Component { |
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
<View className="product-dec">
|
|
|
|
<View className={ skup ? "product-dec margin-bottom" : "product-dec"}>
|
|
|
|
正品保障<Text className="c"></Text> 专业鉴定<Text className="c"></Text> 银联担保
|
|
|
|
</View>
|
|
|
|
|
|
|
|
<View className="recommend-goods">
|
|
|
|
{
|
|
|
|
!skup && (<View className="recommend-goods">
|
|
|
|
<View className="title">相关推荐</View>
|
|
|
|
<ProductList list={recommendList}></ProductList>
|
|
|
|
</View>
|
|
|
|
</View>)
|
|
|
|
}
|
|
|
|
|
|
|
|
<View className="product-buy">
|
|
|
|
{
|
|
|
|
!skup && (<View className="product-buy">
|
|
|
|
{/* <View className="sell-btn">出售</View> */}
|
|
|
|
<View className="buy-btn" onClick={this.onClickBuy}>购买
|
|
|
|
{ productInfo.least_price && <Text className="price">¥{productInfo.least_price}</Text>}
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>)
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
skup && status === 1 && (<View className="product-buy">
|
|
|
|
{/* <View className="sell-btn">出售</View> */}
|
|
|
|
<View className="buy-btn store-info" onClick={this.onStoreBuyNow.bind(this)}>店内闪购
|
|
|
|
{productInfo.price && <Text className="price">¥{productInfo.price}</Text>}
|
|
|
|
</View>
|
|
|
|
</View>)
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
skup && (status === 2 || status === 0) && (<View className="product-buy product-none-top">
|
|
|
|
{/* <View className="sell-btn">出售</View> */}
|
|
|
|
<View className="buy-btn disable">
|
|
|
|
{ status === 2 ? '已售出' : ''}
|
|
|
|
{ status === 0 ? '已下架' : '' }
|
|
|
|
</View>
|
|
|
|
</View>)
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
this.props.productDetail.showSharesheet &&
|
|
...
|
...
|
@@ -432,8 +598,9 @@ export default class ProductDetail extends Component { |
|
|
|
<SelectSize sizeList={goodsList.size_list} product_id={id} onConfirmSelect={this.confirmSelect.bind(this)}></SelectSize>
|
|
|
|
}
|
|
|
|
|
|
|
|
<Image className="goYohoBuy" onClick={this.goYohoBuyMinApp.bind(this)} src={goYohoBuy} mode="aspectFill" />
|
|
|
|
|
|
|
|
{
|
|
|
|
skup ? <Image className="goYohoBuy" onClick={this.goOnLineProuduct.bind(this, id)} src={goOnLine} mode="aspectFill" /> : <Image className="goYohoBuy" onClick={this.goYohoBuyMinApp.bind(this)} src={goYohoBuy} mode="aspectFill" />
|
|
|
|
}
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
...
|
...
|
|
