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
1 year ago
|
<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>
|