studytour-front/pages_order/components/agreementModal.vue

<template>
  <view>
    <uv-modal ref="modal" :showConfirmButton="false">
      <view class="modal__view">
        <view class="header">
          {{ title }}
        </view>
        <view class="content">
				  <uv-parse :content="content"></uv-parse>
        </view>
        <view class="footer">
          <button class="btn" @click="onConfirm(false)">拒绝</button>
          <button class="btn btn-confirm" @click="onConfirm(true)">同意</button>
        </view>
      </view>
    </uv-modal>

		<configPopup ref="popup"></configPopup>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      key: '',
      title : '',
      content : '',
    }
  },
  computed : {
    ...mapState(['configList'])
  },
  methods: {
    open(key, title) {
      this.key = key
      this.title = title
      this.content = this.configList[key]
      this.$refs.modal.open()
    },
    onConfirm(confirm) {
      this.$emit('confirm', confirm, this.key)
      this.$refs.modal.close()
    },
  },
}
</script>

<style lang="scss" scoped>

.modal__view {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 40rpx;
}

.header {
  text-align: center;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 1.4;
  color: #181818;
}

.content {
  padding: 8rpx 32rpx 40rpx 32rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  color: #636465;
}

.footer {
  display: flex;
  border-top: 1rpx solid #EEEEEE;
  .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 22rpx 32rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    color: #393939;
    &-confirm {
      color: $uni-color;
      border-left: 1rpx solid #EEEEEE;
    }
  }
}
</style>