interest-purchase/src/pageSubs/afterSales/credentials.vue

<!--
 * @Descripttion: 售货凭证
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-26 15:06:57
 * @LastEditors: dream
 * @LastEditTime: 2021-04-12 14:13:03
-->
<template>
	<view class="after-sales-credenttials">
    <textarea
      class="note iph-bg-fff"
      placeholder="请输入申请备注…"
      placeholder-style="color: #cccccc;"
    ></textarea>
    <view class="img-list iph-bg-fff">
      <view class="img-item">
        <image class="note-img" src="https://www.youmeitu.com/imgesmeinv/47.jpg?x-oss-process=image/resize,m_fill,w_180,h_270" mode="aspectFill" @click="look" />
        <view class="del-icon iph-icon-close"></view>
      </view>
      <view class="upload-icon iph-icon-upload" @click="upload"></view>
    </view>
    <button class="submit-btn" :disabled="!isRead">提交申请</button>
    <view class="u-flex u-row-center">
      <u-checkbox class="checkall" v-model="isRead" shape="circle">
        <view class="u-font-24 u-line-34 read">我已阅读<text class="instructions" @click="showIndtructions = true">《售后说明》</text></view>
      </u-checkbox>
    </view>
		<u-popup v-model="showIndtructions" mode="center" border-radius="16">
      <view class="popup-body">
        <view class="u-font-36 u-line-50 text-weight-500 u-text-center">售后说明</view>
        <view class="u-font-28 u-line-40 u-m-t-32 u-m-l-24 u-m-r-24">1.发起售后需上传签收单，最少一张，最多3张</view>
        <view class="u-font-28 u-line-40 u-m-t-32 u-m-l-24 u-m-r-24 u-p-b-40 u-border-bottom">2.提交申请后将为您生成一笔服务单，可在客服页面进行查看服务进度</view>
        <view class="know-btn" @click="showIndtructions = false">我知道了</view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import { uploadImg } from '@/utils/upload'
export default {
  name: 'afterSalesCredentials',
  data () {
    return {
      isRead: false,
      showIndtructions: false
    }
  },
  onLoad () {

  },
  methods: {
    look () {
      uni.previewImage({
        urls: ['https://www.youmeitu.com/imgesmeinv/40.jpg']
      })
    },
    lookInstructions () {
      uni.showModal({
        title: '售后说明',
        content: `
          1.发起售后需上传签收单，最少一张，最多3张
          2.提交申请后将为您生成一笔服务单，可在客服页面进行查看服务进度
        `,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    upload () {
      uploadImg()
    }
  }
}
</script>

<style lang="scss" scoped>
.after-sales-credenttials {
  .note {
    padding: 16px 32px;
    width: auto;
    height: 216px;
  }
  .img-list {
    padding: 32px;
    display: flex;
    .img-item {
      position: relative;
      margin-right: 16px;
      .note-img {
        width: 204px;
        height: 204px;
      }
      .del-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
      }
    }
    .upload-icon {
      width: 204px;
      height: 204px;
    }
  }
  .submit-btn {
    margin: 48px 32px 32px;
    padding: 22px 0;
    font-size: 32px;
    line-height: 44px;
    color: $iph-standby-text;
    background-color: $u-type-primary;
    border-radius: 8px;
    &[disabled] {
      background-color: $u-type-primary !important;
      opacity: .4;
    }
  }
  .read {
    color: $iph-desc-text;
    .instructions {
      color: $u-type-primary;
    }
  }
  .checkall {
    /deep/ .u-checkbox {
      .u-checkbox__icon-wrap--circle {
        width: 28px !important;
        height: 28px !important;
      }
    }
    .check-all {
      font-size: 26px;
      line-height: 36px;
      color: $iph-base-text;
    }
  }
  .popup-body {
    box-sizing: border-box;
    padding: 40px 8px 0;
    width: 576px;
    height: 448px;
    .know-btn {
      padding: 24px 0;
      line-height: 44px;
      font-size: 32px;
      font-weight: 600;
      text-align: center;
      color: $u-type-primary;
    }
  }
}
</style>