You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
8.2 KiB
389 lines
8.2 KiB
<template> |
|
<view class="good_detail_page" v-show="data.goodsImageUrl"> |
|
<view class="current_goods"> |
|
<img class="main_img" :src="data.goodsImageUrl" /> |
|
<view class="current_goods_text"> |
|
<text class="goods_title">{{data.goodsDesc}}</text> |
|
<view class="price"> |
|
<text>￥{{(data.minGroupPrice - data.couponDiscount) / 100 }} |
|
<text class="yuanjia">团购价￥{{data.minGroupPrice/100}} |
|
原价￥{{data.minNormalPrice/100}}</text></text> |
|
</view> |
|
|
|
<view class="biaoqian"> |
|
<text v-for="(item,index) in data.unifiedTags" :key="index" class="biaoqian_text" v-if="item">{{item}}</text> |
|
</view> |
|
|
|
<view class="goods_dp"> |
|
<image class="goodsa_dp_img" :src="data.mallImgUrl" mode="aspectFit"></image> |
|
<view class="goodsa_dp_name"> |
|
<view>{{data.goodsName}}</view> |
|
<view class="hot">已拼{{data.salesTip}}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-for="(item,index) in data.goodsGalleryUrls" :key="index"> |
|
<image class="current_imgs" :src="item" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
<view type="warn" class="buy_btn"> |
|
<view class="topbtn" @click="toTop()">↑TOP</view> |
|
<view class="price"> |
|
<view><text class="juanhou">券后</text> |
|
￥{{(data.minGroupPrice - data.couponDiscount) / 100 }}</view> |
|
<view class="yuanjia">原价￥{{data.minNormalPrice/100}} 团购价￥{{data.minGroupPrice/100}} |
|
券￥{{data.couponDiscount/100}}</view> |
|
<button @click="buy" type="warn" class="btn">领劵购买</button> |
|
</view> |
|
</view> |
|
<!-- #ifdef APP --> |
|
<view class="fenxiang" @click="fenxiang()">分享</view> |
|
<!-- #endif --> |
|
<view class="tuijian_list"> |
|
<view class="tuijian_title">为您推荐</view> |
|
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="getList()"> |
|
<view class="tuijian_item" v-for="(item,index) in list" :key="index"> |
|
<good :data="item" :search_id="item.search_id" :pid="pid"></good> |
|
</view> |
|
<uni-load-more :status="moreStatus" color="#FE5353"></uni-load-more> |
|
</scroll-view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import good from './good_com/good.vue' |
|
import { pddDetail,pddLink } from '@/api/store' |
|
import fenxiang from './utils/share.js' |
|
export default { |
|
components: { |
|
good |
|
}, |
|
|
|
data() { |
|
return { |
|
goodSign:"", |
|
hasLogin: true, |
|
data: {}, |
|
id: '', |
|
list: [], |
|
page: 1, |
|
moreStatus: '', |
|
search_id: '', |
|
pid: '' |
|
}; |
|
}, |
|
computed: { |
|
price() { |
|
if (!this.data) { |
|
return; |
|
} |
|
if (this.data.coupon_discount && this.data.min_group_price) { |
|
return (this.data.min_group_price - this.data.coupon_discount) / 100 |
|
} |
|
return this.data.min_group_price / 100 || '' |
|
} |
|
}, |
|
// #ifdef APP |
|
onBackPress({ |
|
from |
|
}) { |
|
if (from == 'backbutton') { |
|
this.$nextTick(function() { |
|
uniShare.hide() |
|
}) |
|
return uniShare.isShow; |
|
} |
|
}, |
|
// #endif |
|
|
|
onReachBottom() { |
|
if (this.moreStatus != 'nomore') { |
|
this.getList() |
|
} |
|
}, |
|
mounted() { |
|
this.goodSign = this._route.query.goodSign; |
|
this.getData(); |
|
}, |
|
methods: { |
|
async buy() { |
|
pddLink(this.goodSign).then(res=>{ |
|
|
|
uni.navigateToMiniProgram({ |
|
appId: res.data.weAppInfo.appId, |
|
path: res.data.weAppInfo.pagePath |
|
}) |
|
}) |
|
|
|
|
|
|
|
}, |
|
doWeb() { |
|
pddApi.promotion_url_generate(this.data.goods_sign, this.pid, this.search_id).then( |
|
res => { |
|
let data = res.data.goods_promotion_url_generate_response |
|
.goods_promotion_url_list[0] |
|
console.log('普通链接：', data) |
|
uni.setStorageSync('webUrl', data.mobile_url) |
|
// #ifndef MP |
|
uni.navigateTo({ |
|
url: '/uni_modules/aliea-goods/pages/webview/webview' |
|
}) |
|
// #endif |
|
|
|
// #ifdef MP |
|
uni.navigateToMiniProgram({ |
|
appId: data.we_app_info.app_id, |
|
path: data.we_app_info.page_path |
|
}) |
|
// #endif |
|
}) |
|
}, |
|
getData() { |
|
pddDetail(this.goodSign).then(res=>{ |
|
console.log(res); |
|
this.data = res.data; |
|
// this.getList(); |
|
uni.setNavigationBarTitle({ |
|
title: this.data.goodsDesc |
|
}) |
|
this.toTop() |
|
}) |
|
|
|
}, |
|
getList() { |
|
this.moreStatus = 'loading' |
|
pddApi.goodsRecommend(this.data.cat_ids[0], this.id, this.pid, this.list.length).then(res => { |
|
res.data.goods_basic_detail_response.list.forEach((item, index) => { |
|
item.search_id = res.data.goods_basic_detail_response.search_id |
|
this.list.push(item) |
|
}) |
|
if (this.list.length == 0) { |
|
this.moreStatus = 'nomore' |
|
} else { |
|
this.moreStatus = 'more' |
|
} |
|
}).catch(err => { |
|
this.moreStatus = 'error' |
|
}) |
|
}, |
|
|
|
toTop() { |
|
uni.pageScrollTo({ |
|
duration: 0, |
|
scrollTop: 0 |
|
}) |
|
}, |
|
async fenxiang() { |
|
//#ifdef APP |
|
let url = "/#/uni_modules/aliea-goods/pages/goods/goodDetail?id=" + this.id + |
|
"&search_id=" + this.search_id |
|
if (this.pid) { |
|
url += '&p_id=' + this.pid |
|
} |
|
|
|
fenxiang(this.data.mall_name, url, this.data.goods_desc, this.data.goods_thumbnail_url) |
|
//#endif |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.good_detail_page { |
|
width: 100%; |
|
height: auto; |
|
background-color: antiquewhite; |
|
|
|
.fenxiang { |
|
position: fixed; |
|
display: flex; |
|
flex-direction: column; |
|
right: 15rpx; |
|
bottom: 270rpx; |
|
width: 60rpx; |
|
line-height: 60rpx; |
|
background-color: #ff5500; |
|
border-radius: 50%; |
|
z-index: 1000; |
|
border: #55aa00 10rpx dashed; |
|
color: #ffffff; |
|
padding: 15rpx; |
|
text-align: center; |
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
.current_goods { |
|
width: 100%; |
|
background-color: antiquewhite; |
|
display: block; |
|
|
|
.main_img { |
|
width: 100%; |
|
} |
|
|
|
.current_imgs { |
|
width: 750rpx; |
|
height: 750rpx; |
|
margin: 10rpx 0rpx; |
|
} |
|
|
|
.current_goods_text { |
|
// border: #ccc 1px solid; |
|
margin: 30rpx; |
|
padding: 30rpx; |
|
border-radius: 20rpx; |
|
background-color: #fff; |
|
|
|
.price { |
|
position: relative; |
|
margin: 20rpx 0; |
|
font-size: 60rpx; |
|
font-weight: 600; |
|
color: red; |
|
|
|
.yuanjia { |
|
margin-left: 20rpx; |
|
text-decoration: line-through; |
|
font-size: 28rpx; |
|
color: #868686; |
|
font-weight: normal; |
|
} |
|
} |
|
|
|
|
|
|
|
.biaoqian { |
|
|
|
position: relative; |
|
|
|
.biaoqian_text { |
|
display: inline-block; |
|
background-color: #ff5500; |
|
padding: 10rpx; |
|
margin: 5rpx; |
|
color: #fff; |
|
border-radius: 15rpx; |
|
line-height: 35rpx; |
|
font-size: 28rpx; |
|
} |
|
} |
|
|
|
.goods_title { |
|
margin-bottom: 20rpx; |
|
line-height: 40rpx; |
|
font-weight: bold; |
|
font-size: 30rpx; |
|
} |
|
|
|
.goods_dp { |
|
width: 100%; |
|
margin-top: 30rpx; |
|
font-size: 28rpx; |
|
font-weight: bold; |
|
|
|
.goodsa_dp_img { |
|
width: 100rpx; |
|
height: 100rpx; |
|
vertical-align: top; |
|
margin-right: 10rpx; |
|
} |
|
|
|
.goodsa_dp_name { |
|
display: inline-block; |
|
line-height: 50rpx; |
|
font-size: 26rpx; |
|
|
|
.hot { |
|
color: #ff0000; |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
.buy_btn { |
|
|
|
position: fixed; |
|
background-color: #ff634e; |
|
text-align: center; |
|
z-index: 10; |
|
width: 750rpx; |
|
height: 230rpx; |
|
bottom: 0; |
|
color: #fff; |
|
padding: 30rpx; |
|
|
|
.topbtn { |
|
position: absolute; |
|
right: 40rpx; |
|
top: 0rpx; |
|
width: 100rpx; |
|
height: 45rpx; |
|
background-color: #e20000; |
|
font-size: 28rpx; |
|
padding: 0; |
|
line-height: 45rpx; |
|
color: #fff; |
|
} |
|
|
|
.price { |
|
color: #fff; |
|
font-size: 45rpx; |
|
|
|
.btn { |
|
width: 250rpx; |
|
line-height: 60rpx; |
|
border: #efefef 1px solid; |
|
border-radius: 20rpx; |
|
background-color: #ec0000; |
|
font-size: 38rpx; |
|
} |
|
|
|
.juanhou { |
|
color: #fff; |
|
font-size: 26rpx; |
|
} |
|
|
|
.yuanjia { |
|
margin-left: 20rpx; |
|
font-size: 26rpx; |
|
color: #e7e7e7; |
|
font-weight: normal; |
|
margin: 10rpx auto; |
|
} |
|
} |
|
} |
|
|
|
.tuijian_list { |
|
margin-top: 20rpx; |
|
width: 100%; |
|
height: 100%; |
|
|
|
.tuijian_title { |
|
width: 100%; |
|
line-height: 40rpx; |
|
background-color: #fff; |
|
padding: 20rpx; |
|
margin-bottom: 20rpx; |
|
font-size: 30rpx; |
|
font-weight: bold; |
|
border-top: #cfcfcf 1px solid; |
|
border-bottom: #cfcfcf 1px solid; |
|
} |
|
|
|
.tuijian_item { |
|
display: inline-block; |
|
width: 355rpx; |
|
margin: 10rpx; |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
</style> |