baseApp/pages/product/common/discounts.vue

<template>
	<view class="c-list">
		<view class="c-row b-b">
			<text class="tit">配送</text>
			<view class="bz-list con" v-if="!mark">立即下单 ，预计最快第二天8.30-9:30送达</view>
			<view class="bz-list con reding" v-else>{{mark}}</view>
		</view>
		<view v-if="showCoupon" class="c-row b-b" @click="Getcoupon">
			<text class="tit">优惠券</text>
			<text class="con t-r red">领取优惠券</text>
			<text class="iconfont iconenter"></text>
		</view>
		<view class="c-row b-b">
			<text class="tit">简介</text>
			<view class="bz-list con">
				<text>{{ Info }}</text>
				<!-- <text>{{ copy2 }}</text> -->

			</view>
			<view class="copy-btn" @click="copy">一键复制</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showCoupon: {
				type: Boolean,
				default: false
			},
			mark: {
				default: ''
			},
			Info: {
				default: ''
			},
		},
		data() {
			return {
				copy1: '食材质检 ·',
				copy2: '无接触配送到门口'
			};
		},
		methods: {
			Getcoupon() {
				this.$emit('clickCoupon')
			},
			copy() {
				// let copyText = this.copy1 + ' ' + this.copy2;
				console.log(this.Info)
				uni.setClipboardData({
					//去找上面的数据
					data: this.Info,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
						});
					},
					fail: function(res) {
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.c-list {
		font-size: $font-sm + 2rpx;
		color: $font-color-base;
		background: #fff;

		.title {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
		}

		.c-row {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
		}

		.tit {
			width: 140rpx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10rpx;
			}
		}

		.reding {
			color: #FF0815 !important;
		}

		.bz-list {
			height: 40rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			text {
				display: inline-block;
				margin-right: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
		}

		.copy-btn {
			background-color: #F3F3F2;
			padding: 8rpx 20rpx;
			border-radius: 10rpx;
			color: #040406;
		}

		.red {
			color: #fb6d24;
		}
	}

	/* 商品详情中限制图片大小 */
	.rich-img {
		width: 100% !important;
		height: auto;
	}
</style>