商品详情页：淘宝商品分享落地页

htmldev/cps/README.md

@@ -32,6 +32,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 - [x] 底部导航：新增购物
 - [x] 不同商家返回的字段：目前发现拼多多的商品ID对不上
 - [ ] 分享赚钱：分享文案可以自定义
-- [ ] 店铺名字不存在
-- [ ] 淘宝分享落地页
+- [x] 店铺名字不存在
+- [x] 淘宝分享落地页
 - [ ] 参照大淘生活新增页面：新手教程、意见反馈、常见问题

htmldev/cps/src/router/index.js

@@ -158,7 +158,7 @@ const routes = [
         }
       },
       {
-        path: '/detail/:source/:goodsId',
+        path: 'detail/:source/:goodsId',
         name: 'CategoryDetail',
         component: _import('views/category/detail/index'),
         props: (route) => ({
@@ -167,7 +167,7 @@ const routes = [
         })
       },
       {
-        path: '/tbLandingPage/:userId/:goodsId', // 淘宝商品详情页
+        path: 'tbLandingPage/:userId/:goodsId', // 淘宝商品详情页
         name: 'CategoryTBLandingPage',
         component: _import('views/category/tbLandingPage/index'),
         props: (route) => ({

htmldev/cps/src/views/category/detail/index.vue

@@ -182,7 +182,7 @@ export default {
       }
       // 处理用户ID未获取成功的场景
       if (!this.isFetchLock) {
-        platform.isWeixin && funWxShare('返不停', this.goodsInfo.goods_name, coverImg, this.source === 'taobao' ? `${location.origin}/tbLandingPage/${id}/${this.goodsId}` : this.goodsInfo.url)
+        platform.isWeixin && funWxShare('返不停', 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()

htmldev/cps/src/views/category/tbLandingPage/api/api.js

@@ -0,0 +1,16 @@
+import request from '@/api/request'
+
+/**
+ * 淘宝商品详情页分享后的落地页
+ * @param userId
+ * @param goodsId
+ */
+export const apiGoodsDetail = (userId, goodsId) => request({
+  method: 'GET',
+  url: '/api/buy/transfer/goods',
+  params: {
+    user_id: userId,
+    goods_id: goodsId
+  },
+  showLoading: true
+})

htmldev/cps/src/views/category/tbLandingPage/index.vue

@@ -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>