web-store-retail-h5/components/successDialog.vue

<template>
  <u-popup
    :show="sucShow"
    closeable
    :round="10"
    mode="center"
    @close="sucShow = false"
  >
    <view class="pop_a">
      <view class="tit">
        <u-icon name="checkmark-circle-fill" color="#029B00"></u-icon>
        <view>{{ '注册成功' }}</view>
      </view>

      <view class="getCode" @tap="onCopy">{{ '复制' }}</view>
      <view class="form">
        <u--form
          labelPosition="left"
          labelWidth="80px"
          :model="allData"
          ref="uForm"
        >
          <u-form-item :label="'会员姓名' + ':'" borderBottom>
            <u--input v-model="allData.memberName" border="none"></u--input>
          </u-form-item>
          <u-form-item :label="'会员编号' + ':'" borderBottom>
            <u--input v-model="allData.memberCode" border="none"></u--input>
          </u-form-item>
          <u-form-item :label="'会员电话' + ':'" borderBottom>
            <u--input v-model="allData.phone" border="none"></u--input>
          </u-form-item>
          <u-form-item :label="'登录密码' + ':'" borderBottom>
            <u--input v-model="allData.loginPassword" border="none"> </u--input>
          </u-form-item>
          <u-form-item :label="'支付密码' + ':'" borderBottom>
            <u--input v-model="allData.payPassword" border="none"> </u--input>
          </u-form-item>
          <u-form-item :label="'登录网址' + ':'" borderBottom>
            <u--input v-model="allData.urlAddress" border="none"></u--input>
          </u-form-item>
        </u--form>
        <view class="disflx">
          <u-button
            type="success"
            class="uBtn"
            shape="circle"
            color="linear-gradient(to right, #005BAC, #005BAC )"
            @tap="handleClose"
          >
            确定
          </u-button>
        </view>
      </view>
      <img class="yh" v-show="bia" src="@/static/images/yh.gif" alt="" />
      <img class="cd" v-show="bia" src="@/static/images/cd.gif" alt="" />
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      sucShow: false,
      bia: false,
      allData: '',
    }
  },
  methods: {
    showSuccess(data) {
      this.allData = data
      //    this.allData.gzh = '海之圣'
      // this.allData.ios = 'http://yxydl.hzs413.com/q2efum'
      // this.allData.android = 'https://cn.hzs413.com/'
      this.sucShow = true
      this.bia = true
      let that = this
      setTimeout(() => {
        that.bia = false
      }, 3000)
    },
    handleClose() {
      this.sucShow = false
      this.$emit('successClose', this.allData)
    },
    payPw() {},
    onCopy() {
      let text =
        '会员姓名' +
        ':' +
        this.allData.memberName +
        '\n' +
        '会员编号' +
        ':' +
        this.allData.memberCode +
        '\n' +
        '会员电话' +
        ':' +
        this.allData.phone +
        '\n' +
        '登录密码' +
        ':' +
        this.allData.loginPassword +
        '\n' +
        '支付密码' +
        ':' +
        this.allData.payPassword +
        '\n' +
        '登录网址' +
        ':' +
        this.allData.urlAddress
      // +
      //       '\n' +
      //       '公众号搜索'+':' +
      //       this.allData.gzh+
      //       '\n' +
      //       'APP'+`(${'苹果'})` +
      //       ':' +
      //       this.allData.ios+
      //       '\n' +
      //       'APP'+`(${'安卓'})` +
      //       ':' +
      //       this.allData.android
      this.$copyText(text).then(res => {
        uni.showToast({
          title: '复制成功',
          icon: 'none',
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
}

.btn {
  line-height: 50px;
  width: 120px;
  height: 50px;
  background: #d5251d;
  border-radius: 6px 6px 6px 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 25px auto;
  cursor: pointer;
}

.hui {
  line-height: 50px;
  width: 120px;
  height: 50px;
  background: #ccc;
  border-radius: 6px 6px 6px 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 25px auto;
  cursor: pointer;
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__body {
  padding: 0;
}

.tit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
  // border-bottom: 1px solid #f2f2f2;
  // padding-bottom: 15px;
  margin-top: 20px;
}

.tit1 {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #005bac;
  text-align: center;
}

.digBody {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #666666;

  .red {
    font-size: 20px;
    font-family:
      PingFang SC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #f43c3a;
    position: relative;
    line-height: 30px;
    height: 30px;

    .copy {
      position: absolute;
      right: 0;
      transform: translateX(-100%);
      top: 0;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      color: #333;
      cursor: pointer;
    }
  }

  view {
    margin-bottom: 5px;
  }
}

.yh {
  width: 262px;
  height: 262px;
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.cd {
  width: 496px;
  height: 496px;
  position: absolute;
  bottom: 0;
}

.getCode {
  text-align: right;
  margin: 48rpx 24rpx 0 0;
  font-size: 10px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #18acff;
}

.pop_a {
  padding: 40rpx 40rpx;
}

.uBtn {
  margin: 20rpx;
}

::v-deep .u-popup__content {
  width: 90%;
}

::v-deep .u-form-item__body__left__content__label {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}
</style>