浏览代码

cps:淘宝复制口令

panyong 3 年之前
父节点
当前提交
8c7fd16fac

+ 2 - 1
htmldev/cps/README.md

@@ -28,4 +28,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 - [ ] 测试省钱页跳转微信小程序
 - [ ] 搜索页
 - [ ] 分享测试:默认、带有分享人信息、分享赚钱、商品列表及详情
-- [ ] 商品详情页:淘宝复制口令
+- [x] 商品详情页:淘宝复制口令
+- [ ] 底部导航:新增购物

+ 1 - 1
htmldev/cps/src/api/request.js

@@ -55,7 +55,7 @@ request.interceptors.request.use(request => {
 
   // 因为微信开发者工具重复授权,本地开发时写死
   if (/^(0|192|10|localhost)/.test(domain)) {
-    request.headers.wechatToken = '1ba0a97c52bcd02b03ab8e4d55e14740'
+    request.headers.wechatToken = '22aff98dec057448c59427e42065d3df'
   } else {
     request.headers.wechatToken = getCookieValue('fanbutingwechatToken')
   }

+ 25 - 0
htmldev/cps/src/mixin/fbtClipboard.js

@@ -0,0 +1,25 @@
+import { Toast } from 'vant'
+import Clipboard from 'clipboard'
+
+export default {
+  directives: {
+    copy: {
+      inserted (el) {
+        const { clipboardToast, clipboardHide } = el.dataset
+        const obj = new Clipboard(el)
+        obj.on('success', () => {
+          if (clipboardHide === '1') {
+            return
+          }
+          Toast(clipboardToast || '复制成功')
+        })
+        obj.on('error', () => {
+          if (clipboardHide === '1') {
+            return
+          }
+          Toast('复制失败,请手动选择复制')
+        })
+      }
+    }
+  }
+}

+ 70 - 6
htmldev/cps/src/views/category/detail/index.vue

@@ -58,7 +58,18 @@
       </a>
       <a
         href="javascript:;"
-        @click="jumpShops">
+        data-clipboard-hide="1"
+        :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>
@@ -66,6 +77,20 @@
     <!--弹窗:分享提示-->
     <ShareTipInWechat
       ref="fbtShareTipInWechat"/>
+    <van-popup
+      class="fbt-van-copy"
+      v-model="copyPopup"
+      round
+      closeable
+      position="bottom"
+      :style="{ height: '40%', background: '#f6f6f6' }">
+      <p class="title">淘口令已复制</p>
+      <p class="content">{{ goodsInfo.url }}</p>
+      <van-button
+        round
+        type="primary">去淘宝粘贴打开
+      </van-button>
+    </van-popup>
   </div>
 </template>
 
@@ -73,16 +98,19 @@
 import funWxShare from '@/utils/wxShare0.0'
 import Banner from './child/banner'
 import ShareTipInWechat from '../../common/shareTipInWechat'
-import { Button, Toast } from 'vant'
+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-button': Button,
+    'van-popup': Popup
   },
   props: {
     source: {
@@ -99,7 +127,8 @@ export default {
       goodsInfo: {},
       couponInfo: {}, // 优惠券相关
       goodsCarouselPictures: [], // 商品轮播图
-      goodsDetailPictures: [] // 商品详情图片
+      goodsDetailPictures: [], // 商品详情图片
+      copyPopup: false // 淘口令复制提示
     }
   },
   created () {
@@ -142,6 +171,10 @@ export default {
         Toast('数据加载中,稍后重试')
         return
       }
+      if (this.source === 'taobao') {
+        this.copyPopup = true
+        return
+      }
       top.location.href = this.goodsInfo.url
     }
   }
@@ -208,11 +241,10 @@ export default {
       font-size: 11px;
       font-weight: bold;
       color: #EA483F;
-      line-height: 18px;
+      line-height: 24px;
     }
 
     &:nth-of-type(2) {
-      padding-top: 2px;
       font-size: 14px;
       font-weight: 500;
       color: #EA483F;
@@ -347,4 +379,36 @@ export default {
     margin: 0 auto;
   }
 }
+
+.fbt-van-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .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>

+ 13 - 15
htmldev/cps/src/views/category/index/child/main.vue

@@ -47,21 +47,23 @@
             <!--<span>0</span>-->
             <!--</div>-->
           </div>
-          <div class="card" v-show="item.discount > 0 && item.commission > 0">
+          <div class="card" v-show="item.discount > 0 || item.commission > 0">
             <p class="coupon" v-show="item.discount > 0">
               <span>券</span>
               <span>¥{{ item.discount }}</span>
             </p>
             <p class="profit" v-show="item.commission > 0">
               <span>分享赚</span>
-              <span>¥&nbsp;{{ item.commission | fen2Yuan }}</span>
+              <span>¥&nbsp;{{ item.commission }}</span>
             </p>
           </div>
           <!--暂时不用这个字段-->
-          <!--<div class="shop">-->
-          <!--<img src="" alt="">-->
-          <!--<p>店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名</p>-->
-          <!--</div>-->
+          <div class="shop">
+            <van-icon
+              size="20"
+              name="shop-o"/>
+            <p>{{ item.shop_name }}</p>
+          </div>
         </div>
       </li>
       <li class="pullup-wrapper">
@@ -82,12 +84,13 @@
 </template>
 <script>
 import BScroll from 'better-scroll'
-import { Toast, Loading } from 'vant'
+import { Toast, Loading, Icon } from 'vant'
 import { apiGoodsList } from '../api/api'
 
 export default {
   components: {
-    'van-loading': Loading
+    'van-loading': Loading,
+    'van-icon': Icon
   },
   props: {
     source: {
@@ -410,14 +413,9 @@ export default {
   align-items: center;
   margin-top: 8px;
 
-  img {
-    width: 12px;
-    height: 11px;
-    margin-right: 6px;
-  }
-
   p {
-    width: calc(100% - 18px);
+    width: calc(100% - 24px);
+    margin-left: 4px;
     font-size: 12px;
     font-weight: 500;
     color: #999999;