H5_module/prescription/prescriptionInformation/index.vue

<template>
<view>
<!--prescription/prescriptionInformation/index.wxml-->
<view class="drugUsers bgfff r20">
 <view>用药人</view>
 <view class="add" @tap="goUrl" data-url="prescription/drugUsers/index"><image src="/static/pages/images/jia.png" class="jia"></image>新建用药人</view>
</view>

<view class="case bgfff r20">
<view class="top">
  <view> <text class="red">*</text>请上传医生开具的处方单</view>
  <view class="dflex look">查看示例<image src="/static/pages/images/more.png" class="right"></image></view>
</view>
<view class="content">
  <view>1、处方单不等一病历本、检查结果、伤患结果、伤患照片等</view>
  <view>2、处方单需在有效期使用</view>
  <view>3、处方单信息需与有预约单的用药人、药品名称、规格、剂型、数量等信息一致...</view>
</view>
  <image src="/static/pages/images/upload.png" class="upload" @tap="uploadAvatar" v-if="avatar.length<=0"></image>
  <view class="dflex" v-else>
      <view v-for="(item, index) in avatar" :key="index" class="pz">
        <image :src="avatar[index]" class="scpz"></image>
        <image src="/prescription/static/prescription/image/imagecuo.png" class="cuo" @tap="cleanimage" :data-index="index"></image>
      </view>
      <image src="/static/pages/images/upload.png" class="scpz" @tap="uploadAvatar" v-if="avatar.length<3"></image>
    </view>
</view>

<view class="bot fixed bgfff dflex" :style="'padding: ' + (bottomBlankHeight + 20) + 'rpx 0rpx'">
  <view class="addcart">获取处方</view>
  <view class="mbglinear gmbtn"><text>完</text>成</view>
</view>
</view>
</template>

<script>
// prescription/prescriptionInformation/index.js
const app = getApp();
const req = require("../../utils/request.js");

export default {
  data() {
    return {
      bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0,
      avatar: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  methods: {
    goUrl(e) {
      let url = e.currentTarget.dataset.url;
      app.globalData.openPage(url);
    },

    //上传图片
    uploadAvatar() {
      let that = this;
      uni.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function ({
          tempFilePaths
        }) {
          var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => {
            return new Promise(function (resolve, reject) {
              req.loadIng("上传中");
              req.uploadFile('/api/upload', tempFilePath, res => {
                // console.log(res);
                that.setData({
                  avatar: that.avatar.concat(res.src)
                });
                uni.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                });
                // console.log(that.avatar);
              });
            });
          }));
          promise.then(function (results) {
            // console.log(results);
          }).catch(function (err) {
            // console.log(err);
          });
        }
      });
    },

    // 删除图片
    cleanimage(event) {
      let index = event.currentTarget.dataset.index;
      let arr = this.avatar;
      arr.splice(index, 1);
      this.setData({
        avatar: arr
      });
    }

  }
};
</script>
<style>
@import "./index.css";
</style>