liedou_uniapp/components/wxServiceDia...

<template>
  <u-mask :show="isShow" :mask-click-able="false">
    <view class="service-dialog-wrap">
      <view class="content-wrap">
        <image class="top-img" src="/static/imgs/money-icon.png" />
        <view class="title">活动攻略</view>
        <text :user-select="true" class="keyword-wrap">{{ keyword }}</text>
        <u-divider color="#aaa" half-width="52" border-color="#D8D8D8" bg-color="transparent" margin-top="34">参与步骤</u-divider>
        <view class="step-wrap">
          <text class="tips">点击复制并联系客服</text>
          <image class="rt-icon" src="/static/imgs/rt-black-icon.png" />
          <text class="tips">口令发送给客服</text>
        </view>
        <view class="btn">复制并联系客服
					<button class="contact-btn" open-type="contact" @click="onClickToContact" @contact="onContact" />
				</view>
      </view>
      <image
        class="service-dialog-close"
        src="/static/imgs/close.png"
        mode="widthFix"
        @click="onClickClose"
      />
    </view>
  </u-mask>
</template>

<script>
const app = getApp();
export default {
  name: "wxServiceDialog",
  props: {
    keyword: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    this.handleShowDialog();
  },
  methods: {
    handleShowDialog() {
			uni.setStorageSync('wxServiceDialogFlag', true)
      this.isShow = true;
    },
		onClickClose() {
			this.$emit('cancel')
		},
		onClickToContact() {
			this.$copyEvent({ text: this.keyword })
			this.$emit('confirm', { keyword: this.keyword })
		},
		onContact(e) {
			console.log('onContact => e ', e)
		},
  },
};
</script>

<style scoped lang="scss">
.service-dialog-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  .content-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 56rpx;
		width: 620rpx;
		background: url('~@/static/imgs/loginReindBg.png') #fff no-repeat;
		background-size: 100%;
		border-radius: 82rpx 82rpx 36rpx 36rpx;
		.top-img {
			position: absolute;
			left: 50%;
			top: -90rpx;
			transform: translateX(-50%);
			width: 316rpx;
			height: 211rpx;
		}
		.title {
			margin-top: 100rpx;
			font-size: 44rpx;
			font-weight: 600;
			color: #333;
			line-height: 60rpx;
			text-align: center;
		}
		.keyword-wrap {
			margin-top: 44rpx;
			width: 540rpx;
			border-radius: 16rpx;
			border: 2rpx dashed #333;
			font-size: 28rpx;
			font-weight: 400;
			color: #333;
			line-height: 40rpx;
			padding: 30rpx 10rpx;
			text-align: center;
		}
		.step-wrap {
			display: flex;
			align-items: center;
			margin-top: 34rpx;
			.tips {
				padding: 4rpx 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #444;
				line-height: 40rpx;
				background: #F4F4F4;
				border-radius: 12rpx;
			}
			.rt-icon {
				margin: 0 4rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}
    .btn {
			position: relative;
			margin-top: 56rpx;
      width: 548rpx;
			height: 108rpx;
			background: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
			border-radius: 54rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFF;
			line-height: 108rpx;
      text-align: center;
			.contact-btn {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				opacity: 0;
			}
    }
  }
  .service-dialog-close {
    margin-top: 40rpx;
    width: 60rpx;
    height: 60rpx;
  }
}
</style>