zhaojs
2023-09-21 3cbd9dc493e8663d9ec1a2816e664f7c9289b8a3
h5/apph5/components/items/LineItem.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,238 @@
<template>
   <view class="item-v" @click="getShareLink(items)">
      <view class="item-img">
         <image :src="items.mainPic">
         </image>
      </view>
      <view class="item-txt">
         <view style="display: flex;">
            <image :src="items.labelImg"></image>
            <view class="item-txt-title">{{items.title}}</view>
         </view>
         <view class="item-coupon">
            <view class="cop-con">
               <view class="cop-txt">券</view>
               <view class="cop-money">Â¥{{items.couponPrice}}</view>
            </view>
         </view>
         <view class="item-bottom">
            <view class="item-price">
               <view>券后价<span class="item-price-prc">Â¥{{items.actualPrice}}</span></view>
               <view style="text-decoration: line-through;">原价:{{items.originalPrice}}</view>
            </view>
            <view class="item-copy">复制链接</view>
         </view>
      </view>
   </view>
</template>
<script>
   export default {
      props: {
         items: Object,
         isrecord: {
            type: Boolean,
            default: false,
            text: ''
         },
      },
      created() {},
      methods: {
         copyText() {
            // #ifdef H5
            this.$copyText(this.text).then(
               res => {
                  uni.showToast({
                     title: '优惠链接已复制,现在打开手机淘宝,领取优惠券吧~',
                     icon: 'none',
                     duration: 2500
                  })
               }
            )
            // #endif
            // #ifndef H5
            uni.setClipboardData({
               data: this.text,
               success: () => {
                  uni.showToast({
                     title: '优惠链接已复制,现在打开手机淘宝,领取优惠券吧~',
                     icon: 'none',
                     duration: 2500
                  })
               }
            })
            // #endif
         },
         getShareLink(items) {
            if (this.isrecord) { //记录点击
               this.recordClick(items.goodsId, items.sourceType, items.dtitle, items.actualPrice);
            }
            var goodsid = items.goodsId;
            var that = this;
            let postdata = {
               goodsId: goodsid
            };
            uni.showLoading({
               title: '复制中..',
               mask: true
            });
            this.$http.post('/api/taoke/get_privilege_link',
               postdata
            ).then(e => {
               uni.hideLoading();
               if (e.code != 0) {
                  return;
               }
               this.text = e.data.info.longTpwd;
               uni.getSystemInfo({
                  success: function(res) {
                     if (res.osName == 'ios') {
                        uni.showModal({
                           title: '提示',
                           content: '优惠信息复制后,请打开手机淘宝领券',
                           showCancel: false,
                           confirmText: '复制优惠信息',
                           success: function(res) {
                              if (res.confirm) {
                                 that.copyText();
                              }
                           }
                        });
                     }
                     else{
                        that.copyText();
                     }
                  }
               });
               //this.oncopy(e.data.info.longTpwd);
            }).catch(function(err) {
               console.log(err);
            })
         },
         recordClick(goodsid, plat, title, act_price) {
            let postdata = {
               goodsid: goodsid,
               plat: plat,
               title: title,
               act_price: act_price
            }
            this.$http.post('/api/activity/recordItemClick',
               postdata
            ).then(e => {
            }).catch(function(err) {
               console.log(err);
            })
         }
      },
   }
</script>
<style>
   .item-price-prc {
      color: #fe3a3f;
      font-size: 1rem;
      margin-right: 0.2rem;
      font-weight: 500;
   }
   .cop-txt {
      padding: 0.1rem;
   }
   .cop-money {
      display: flex;
      align-items: center;
      height: 100%;
      font-weight: 400;
      color: #ff4d42;
      background: #fff;
      padding: 0.1rem;
   }
   .cop-con {
      display: inline-flex;
      background: linear-gradient(0deg, #ff753c, #ff4b42);
      color: #fff;
      padding: 0.05rem;
      font-size: 0.7rem;
   }
   .item-v {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem;
      background: #fff;
      border-radius: 0.3rem;
      width: 92%;
      margin: 0 auto;
      margin-bottom: 0.3rem;
   }
   .item-img {
      width: 20%;
   }
   .item-img image {
      width: 6rem;
      height: 6rem;
   }
   .item-txt {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
   .item-txt image {
      width: 1.6rem;
      height: 0.9rem;
   }
   .item-txt-title {
      font-size: 0.7rem;
      margin-left: 0.3rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      width: 90%;
   }
   .item-price {
      display: flex;
      font-size: 0.5rem;
      align-items: baseline;
      color: #8d8484;
   }
   .item-bottom {
      display: flex;
      justify-content: space-between;
   }
   .item-copy {
      width: 5.22rem;
      height: 1.66rem;
      background: linear-gradient(-90deg, #fe3a3f, #faa450);
      font-size: 0.7rem;
      font-weight: 500;
      color: #fffefd;
      line-height: 1.66rem;
      text-align: center;
      border: 0;
      outline: 0;
      float: right;
      border-radius: 1rem;
   }
</style>