|
|
@@ -0,0 +1,400 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="padding-bottom-94">
|
|
|
+ <!--轮播图-->
|
|
|
+ <Banner
|
|
|
+ :arrBanner="goodsCarouselPictures"/>
|
|
|
+ <!--价格信息-->
|
|
|
+ <div class="main">
|
|
|
+ <div class="header">
|
|
|
+ <div class="price-wrap">
|
|
|
+ <p class="price">
|
|
|
+ <span>￥</span>
|
|
|
+ <span>{{ goodsInfo.price && (goodsInfo.price * 1).toFixed(2) }}</span>
|
|
|
+ </p>
|
|
|
+ <p class="origin">券后价</p>
|
|
|
+ </div>
|
|
|
+ <div class="income">
|
|
|
+ <span>预估收益 ¥</span>
|
|
|
+ <span>{{ goodsInfo.commission && (goodsInfo.commission * 1).toFixed(2) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="origin-price">原价¥ {{ goodsInfo.market_price && (goodsInfo.market_price * 1).toFixed(2) }}</p>
|
|
|
+ <div
|
|
|
+ class="name-wrap">
|
|
|
+ <img
|
|
|
+ :src="businessLogo"
|
|
|
+ alt="">
|
|
|
+ <p>{{ goodsInfo.goods_name }}</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="coupon-wrap"
|
|
|
+ @click="jumpShops"
|
|
|
+ v-if="couponInfo.fav > 0">
|
|
|
+ <div>
|
|
|
+ <p class="amount">{{ couponInfo.fav }}元优惠券</p>
|
|
|
+ <p class="expires">{{
|
|
|
+ couponInfo.use_begin_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
|
|
|
+ }}-{{
|
|
|
+ couponInfo.use_end_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
|
|
|
+ }}</p>
|
|
|
+ </div>
|
|
|
+ <van-button type="default">立即领券</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--商品详情图片-->
|
|
|
+ <div
|
|
|
+ class="photo-list">
|
|
|
+ <img
|
|
|
+ v-lazy="str"
|
|
|
+ alt=""
|
|
|
+ v-for="(str, index) in goodsDetailPictures"
|
|
|
+ :key="index">
|
|
|
+ </div>
|
|
|
+ <!--底部按钮-->
|
|
|
+ <div class="footer">
|
|
|
+ <a
|
|
|
+ href="javascript:;"
|
|
|
+ data-clipboard-toast="淘口令复制成功"
|
|
|
+ :data-clipboard-text="goodsInfo.url"
|
|
|
+ v-copy
|
|
|
+ @click="jumpShops">
|
|
|
+ <span>立即购买</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <van-popup
|
|
|
+ class="fbt-van-copy"
|
|
|
+ v-model="copyPopup"
|
|
|
+ round
|
|
|
+ closeable
|
|
|
+ position="bottom"
|
|
|
+ style="background: #f6f6f6">
|
|
|
+ <p class="title">淘口令已复制</p>
|
|
|
+ <p class="content">{{ goodsInfo.url }}</p>
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ type="primary">去淘宝粘贴打开
|
|
|
+ </van-button>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Banner from '../detail/child/banner'
|
|
|
+import fbtClipboard from '../../../mixin/fbtClipboard'
|
|
|
+import { Button, Toast, Popup } from 'vant'
|
|
|
+import { apiGoodsDetail } from './api/api'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ mixins: [fbtClipboard],
|
|
|
+ components: {
|
|
|
+ Banner,
|
|
|
+ 'van-button': Button,
|
|
|
+ 'van-popup': Popup
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 分享人ID
|
|
|
+ userId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ goodsId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ goodsInfo: {},
|
|
|
+ couponInfo: {}, // 优惠券相关
|
|
|
+ goodsCarouselPictures: [], // 商品轮播图
|
|
|
+ goodsDetailPictures: [], // 商品详情图片
|
|
|
+ copyPopup: false, // 淘口令复制提示
|
|
|
+ source: 'taobao' // 仅针对淘宝商品分享的落地页
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ sourceList () {
|
|
|
+ return this.$store.getters['common/sourceList']
|
|
|
+ },
|
|
|
+ businessLogo () {
|
|
|
+ const result = this.sourceList.filter(item => item.value === this.source)
|
|
|
+ if (result.length) {
|
|
|
+ return result[0].logo
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.funInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async funInit () {
|
|
|
+ try {
|
|
|
+ const { status, data, msg } = await apiGoodsDetail(this.userId, this.goodsId)
|
|
|
+ if (status) {
|
|
|
+ this.goodsInfo = data
|
|
|
+ this.couponInfo = data.coupon_info
|
|
|
+ if (Array.isArray(data.goods_carousel_pictures)) {
|
|
|
+ this.goodsCarouselPictures = data.goods_carousel_pictures
|
|
|
+ }
|
|
|
+ if (Array.isArray(data.goods_detail_pictures)) {
|
|
|
+ this.goodsDetailPictures = data.goods_detail_pictures
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Toast(msg)
|
|
|
+ }
|
|
|
+ } catch (e) {}
|
|
|
+ },
|
|
|
+ jumpShops () {
|
|
|
+ if (!(Object.keys(this.goodsInfo).length)) {
|
|
|
+ Toast('数据加载中，稍后重试')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.source === 'taobao') {
|
|
|
+ this.copyPopup = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ top.location.href = this.goodsInfo.url
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.padding-bottom-94 {
|
|
|
+ padding-bottom: 94px;
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ width: 355px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.price-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 3px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 21px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.origin {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.income {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.origin-price {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.name-wrap {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: 10px 0 14px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ text-indent: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.coupon-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 359px;
|
|
|
+ height: 84px;
|
|
|
+ background: url("../detail/image/ic_coupon_big.png") center center/100% 100% no-repeat;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ width: 227px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 31px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expires {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #BCA763;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .van-button--default {
|
|
|
+ width: 86px;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ .van-button__text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px 0 30px;
|
|
|
+ border-top: 1px solid #F1F1F1;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ a {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 336px;
|
|
|
+ height: 50px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ color: #fff;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-left: 14px;
|
|
|
+ color: #333333;
|
|
|
+ background: #f8d548;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.photo-list {
|
|
|
+ margin-top: 14px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fbt-van-copy {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ height: 260px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ padding: 30px 0 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 350px;
|
|
|
+ padding: 18px 15px;
|
|
|
+ border-radius: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #959595;
|
|
|
+ line-height: 20px;
|
|
|
+ word-break: break-all;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .van-button {
|
|
|
+ width: 350px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
panyong