123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447 |
- <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:;"
- @click="showShareTip">
- <span>分享赚</span>
- <span>¥{{ goodsInfo.commission }}</span>
- </a>
- <a
- href="javascript:;"
- data-clipboard-toast="淘口令复制成功"
- :data-clipboard-text="goodsInfo.url"
- v-copy
- @click="jumpShops"
- v-if="source === 'taobao'">
- <span>自购省</span>
- <span>券¥{{ couponInfo.fav }} + ¥{{ goodsInfo.commission }}</span>
- </a>
- <a
- href="javascript:;"
- @click="jumpShops"
- v-else>
- <span>自购省</span>
- <span>券¥{{ couponInfo.fav }} + ¥{{ goodsInfo.commission }}</span>
- </a>
- </div>
- <!--弹窗:分享提示-->
- <ShareTipInWechat
- ref="fbtShareTipInWechat"/>
- <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 funWxShare from '@/utils/wxShare0.0'
- import Banner from './child/banner'
- import ShareTipInWechat from '../../common/shareTipInWechat'
- import fbtClipboard from '../../../mixin/fbtClipboard'
- import { Button, Toast, Popup } from 'vant'
- import { apiGoodsDetail } from './api/api'
- import { platform } from '../../../utils/platform'
- export default {
- name: 'index',
- mixins: [fbtClipboard],
- components: {
- Banner,
- ShareTipInWechat,
- 'van-button': Button,
- 'van-popup': Popup
- },
- props: {
- source: {
- type: String,
- default: ''
- },
- goodsId: {
- type: [String, Number],
- default: ''
- }
- },
- data () {
- return {
- goodsInfo: {},
- couponInfo: {}, // 优惠券相关
- goodsCarouselPictures: [], // 商品轮播图
- goodsDetailPictures: [], // 商品详情图片
- copyPopup: false, // 淘口令复制提示
- isFetchLock: false // 是否调用过分享配置
- }
- },
- 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 ''
- },
- businessName () {
- const result = this.sourceList.filter(item => item.value === this.source)
- if (result.length) {
- return result[0].name
- }
- return ''
- }
- },
- created () {
- this.funInit()
- },
- methods: {
- async funInit () {
- try {
- const { status, data, msg } = await apiGoodsDetail(this.source, 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) {}
- },
- showShareTip () {
- const id = this.$store.getters['common/userinfo'].id
- let coverImg = ''
- if (!(Object.keys(this.goodsInfo).length) || id === '') {
- Toast('数据加载中,稍后重试')
- return
- }
- if (this.goodsCarouselPictures.length) {
- coverImg = this.goodsCarouselPictures[0]
- } else if (this.goodsDetailPictures.length) {
- coverImg = this.goodsDetailPictures[0]
- }
- // 处理用户ID未获取成功的场景
- if (!this.isFetchLock) {
- platform.isWeixin && funWxShare(this.businessName, this.goodsInfo.goods_name, coverImg, this.source === 'taobao' ? `${location.origin}/category/tbLandingPage/${id}/${this.goodsId}` : this.goodsInfo.url)
- this.isFetchLock = true
- }
- this.$refs.fbtShareTipInWechat.init()
- },
- 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("./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: 168px;
- 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>
|