liedou_uniapp/components/clipboard.vue

<template>
<u-mask :show="show">
    <view class="clipboard-container">
		<image @click="maskClipboardClose" class="close" src="/static/imgs/close.png" mode="widthFix"></image>
		<image src="/static/imgs/clipboard_icon.png" mode="widthFix" class="clipboard_img"></image>
		<view class="content">
			<view class="mask-title">
				<text>{{search_goods.goods_id ? '猜你喜欢' : '智能搜索'}}</text>
			</view>
			<block v-if="search_goods.goods_id">
				<view class="goods-container" @click="onClickGoodsItem()">
					<image class="goods-img" :src="search_goods.img" mode="widthFix"></image>
					<view class="goods-info">
						<view class="goods-title">{{search_goods.title}}</view>
						<view class="goods-price">¥{{search_goods.discount_price}}</view>
						<view class="goods-quan">
							<view class="coupon-wrap" v-if="search_goods.is_coupon == 1">
							  <text class="label">券</text>
							  <text class="value">{{ search_goods.coupon_price }}元</text>
							</view>
							<view class="coupon-wrap coupon-fan" v-if="search_goods.commission_price > 0">
							  <text class="label">返</text>
							  <text class="value">{{ search_goods.commission_price }}元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="clipbpard-buttones">
          <view class="clipbpard-button" @click="onClickGoodsItem()">查看详情</view>
<!--
			<view class="clipbpard-button share" @click="onClickShare(search_goods)">
						<block v-if="search_goods.commission_price > 0">
							分享奖<text>{{search_goods.commission_price}}</text>
						</block>
						<block v-else>分享</block>
					</view>
					<view class="clipbpard-button" @click="onClickGoodsItem()">
						<block v-if="search_goods.economize > 0">
							购买省<text>{{search_goods.economize}}</text>
						</block>
						<block v-else>领券购买</block>
					</view>
-->

				</view>
			</block>
			<block v-else>
				<view class="search_con">{{search_con}}</view>
				<u-divider color="#AAAAAA" half-width="52" border-color="#D8D8D8" bg-color="transparent" margin-bottom="36" margin-top="58">选择搜索</u-divider>
				<view class="clipbpard-buttones">
					<view class="shopItem" @click="goSearchPage(1)">
						<image src="/static/imgs/clipboard_tb.png" mode="widthFix"></image>
						<text>淘宝</text>
					</view>
					<view class="shopItem" @click="goSearchPage(2)">
						<image src="/static/imgs/clipboard_jd.png" mode="widthFix"></image>
						<text>京东</text>
					</view>
          <view class="shopItem" @click="goSearchPage(3)">
            <image src="/static/imgs/icon-dy.png" mode="widthFix"></image>
            <text>抖音</text>
          </view>
          <view class="shopItem" @click="goSearchPage(4)">
            <image src="/static/imgs/pdd-icon.png" mode="widthFix"></image>
            <text>拼多多</text>
          </view>
					<!-- <view class="clipbpard-button share" @click="maskClipboardClose">取消</view>
					<view class="clipbpard-button" @click="goSearchPage">搜索</view> -->
				</view>
			</block>
		</view>
    </view>

		<!-- 淘宝授权弹框 -->
		<tbAuthorize v-if="isShowTbAuth" :tb_show="isShowTbAuth" @closeTask='isShowTbAuth = false' />
</u-mask>
</template>

<script>
import tbAuthorize from '../pages/commonMoudle/tbAuthorize.vue'
const router = require('@/utils/router')

export default {
  name: 'invite',
	components: {
		tbAuthorize,
	},
  data() {
    return {
		search_goods:{},
		search_con: '',
		show:false,

    isLogin: false,
		isShowTbAuth: false, // 控制是否展示淘宝授权弹框
		refreshCanvas: true, // 更新canvas
		canvasImg: '', // 海报图片
		qrcodeVal: '', // 二维码链接
		qrcodeImg: '', // 二维码图片
		posterInfo: {}, // 海报信息
		goodsParams: {}, // 当前商品参数

	}
  },
  mounted(){
		// 获取用户登录状态
		this.handleGetUserIsLogin()

		this.getClipboard()
  },
  methods:{
	  // 去商品详情
	  onClickGoodsItem() {
	    const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '' } = this.search_goods;
		if (this.search_goods.shop_type == 4) { // 京东
			uni.navigateTo({
			  url: `/pages/subPackages/home/jdGoodsDetail?goods_id=${encodeURIComponent(goods_id)}`
			})
		} else if (this.search_goods.shop_type == 5) { // 抖音
        uni.navigateTo({
          url: `/pages/subPackages/dy/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
        })
      }else if (this.search_goods.shop_type == 6) { // 拼多多
      uni.navigateTo({
        url: `/pages/subPackages/pdd/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
      })
    }  else {
			uni.navigateTo({
			  url: `/pages/subPackages/home/goodsDetail?img=${encodeURIComponent(img)}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}`
			})
		}
		uni.setStorageSync('is_clipbpard', false)
	  },
	  // 去搜索页
	  goSearchPage(type){
		  uni.navigateTo({
		  	url:`/pages/subPackages/home/search?type=${type}&keyword=${this.search_con}`
		  })
		  uni.setStorageSync('is_clipbpard', false)
	  },
	  // 点击关闭弹框
	  maskClipboardClose(){
		this.$emit('close')
	  },
	  // 获取剪切板内容
	  getClipboard(){
		  let clipbpard_con = uni.getStorageSync('clipbpard_con') //clipbpard_con剪切板内容
		  if ( clipbpard_con ) {
			  // 判断复制的文案是否包含链接
			  const pattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&amp;//=]*)/;
			  let clipbpard_link_result = pattern.test(clipbpard_con);
			  if ( clipbpard_link_result ) { // 包含链接
			  	this.cliboard_get_goods(clipbpard_con.trim())
			  } else { // 不包含链接
			  	this.show = true;
			  	this.search_con = clipbpard_con.trim();
			  }
			  // uni.setStorageSync('clipboard','no') // 已经获取并弹出过剪切板内容
		  }
	  },
	  // 获取剪切板搜索商品列表
	  async cliboard_get_goods(keyword) {
	    try {
	      const url = this.$api_jd.searchV2
	      const params = {
	  		page: 1,
	  		keyword: keyword,
	  		sort: 1,
	  		is_has_coupon: 0,
			type: 0, //type 0:全网 1:淘宝 2:京东
		  }
		  uni.showLoading({ title: '加载中...', mask: true })
	      const { data: res = {} } = await this.$postJSON(url, params)
		  uni.hideLoading()
		  this.show = true;
	      if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
			if (res.rst.data && res.rst.data.length > 0) {
				this.search_goods = res.rst.data[0];
				this.search_goods.economize = Number(this.search_goods.commission_price) + Number(this.search_goods.coupon_price);
			} else {
				this.search_con = keyword;
			}
	      } else {
			  this.search_con = keyword;
	        // uni.showToast({ title: res.err || '操作失败', icon: 'none' })
	      }
	    } catch (error) { }
	  },

		// 获取用户登录状态
		handleGetUserIsLogin() {
			const userInfo = uni.getStorageSync('userInfo') || ''
			const user_id = uni.getStorageSync('user_id') || ''
			if (userInfo && user_id) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		// 获取是否已完成淘宝授权
		async handleGetIsAuthOrNo () {
			try {
				const url = this.$api.relationAuth_isAuthOrNo;
				const params = {}
				uni.showLoading({ title: '加载中...', mask: true })
				const { data: res } = await this.$postJSON(url, params)
				uni.hideLoading()
				if (res && res.errno == 0) {
					return Promise.resolve(res.rst.flag)
				} else {
					uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					return Promise.reject('获取失败')
				}
			} catch (error) {
				console.log('error => ', error)
				return Promise.reject(error)
			}
		},
		// 监听点击分享按钮
		async onClickShare(goodsItem) {
			try {
				// 未登录 => 去登录
				if (!this.isLogin) {
					router.navigateTo({
						url: '/pages/subPackages/login/loginPhone'
					})
					return false
				}
				// 已登录 => 判断是否授权
				const isAuth = await this.handleGetIsAuthOrNo()
				if (isAuth == 0) { // 未授权 => 显示授权弹框
					this.isShowTbAuth = true
				} else if (isAuth == 1) { // 已授权 => 生成图片 => 分享图片
					// this.goodsParams = {...goodsItem}
					// this.handleShareGoods()
					const { goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '', shop_type = '' } = goodsItem
					uni.navigateTo({
						url: `/pages/subPackages/home/shareDetail?shop_type=${shop_type}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}`
					})
				}
			} catch (error) {
				console.log('error => ', error)
			}
		},
  }
}
</script>

<style scoped lang='scss'>
  .clipboard-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 648rpx;
	min-height: 400rpx;
    padding: 52rpx 28rpx;
    border-radius: 120rpx 120rpx 32rpx 32rpx;
	background: url('~@/static/imgs/loginReindBg.png') #FFFFFF no-repeat;
	background-size: 100% auto;
	z-index: 999;
	.clipbpard_bg{
		border-radius: 120rpx 120rpx 0 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.content{
		position: relative;
		z-index: 9;
	}
	.mask-title{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #181818;
		font-size: 40rpx;
		line-height: 56rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		margin-top: 70rpx;
	}
    .close {
      position: absolute;
      bottom: -100rpx;
	  left: 0;
	  right: 0;
	  margin: auto;
      width: 60rpx;
      height: 60rpx;
    }
    .goods-container{
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		.goods-img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 18rpx;
		}
		.goods-info{
			flex: 1;
			margin-left: 20rpx;
			.goods-title{
				font-size: 28rpx;
				color: #181818;
				line-height: 40rpx;
				/* // 超出两行省略号 */
				word-break: break-all;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.goods-price{
				color: #FF4040;
				font-size: 36rpx;
				line-height: 50rpx;
				margin-top: 14rpx;
			}
			.goods-quan{
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				.coupon-wrap {
				  margin-right: 30rpx;
				  display: flex;
				  align-items: center;
				  width: 155rpx;
				  height: 36rpx;
				  background-image: url("/static/imgs/quan.png");
				  background-repeat: no-repeat;
				  background-size: 100% 100%;
				  color: #FF4040;
				  font-size: 26rpx;
				  &.coupon-fan{
					  background-image: url("/static/imgs/fan.png");
					  color: #AE4300;
				  }
				  .label {
				    width: 48rpx;
				    text-align: center;
				  }
				  .value {
				    flex: 1;
				    text-align: center;
				  }
				}
			}
		}
	}

	.clipbpard-buttones{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;
		.clipbpard-button{
			width: 100%;
			height: 80rpx;
			background: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
			border-radius: 40rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0 10rpx;
			&.share{
				background: #FFEED9;
				color: #AE4300;
			}
			text{
				margin-left: 10rpx;
			}
		}
		.shopItem{
			text-align: center;
			//width: 88rpx;
			image{
				width: 88rpx;
				height: 88rpx;
				display: block;
			}
			text{
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
		}
	}
	.search_con{
		color: #181818;
		font-size: 28rpx;
		line-height: 40rpx;
		padding: 54rpx 24rpx 0;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		overflow: hidden;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/*! autoprefixer: on */
		word-break: break-all ;
	}
  }
  .clipboard_img{
	  width: 260rpx;
	  height: 260rpx;
	  position: absolute;
	  top: -50rpx;
	  left: 0;
	  right: 0;
	  margin: auto;
  }
</style>