购物车

src/views/lotCheck/TaskUploadData.vue

@@ -1238,6 +1238,28 @@
         </div>
       </div>
     </a-card>
+    <a-card  v-if='isPhoneshow'    ref="floatButton"
+             class="float-infoPhone">
+      <div class="clearfix">
+        <a-upload
+          list-type="picture-card"
+          :file-list="phoneList"
+          @preview="handlePreview"
+          @change="handleChange"
+        >
+        </a-upload>
+        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+          <img alt="example" style="width: 100%" :src="previewImage" />
+        </a-modal>
+      </div>
+    </a-card>
+    <div @click='showPhone'
+         ref="floatButton"
+         class="float-info"
+         :style="{'width': 80 + 'px', 'height': 80 + 'px', 'left':   90+'%' , 'top': 80 + '%'}"
+    >
+      <a-icon type="folder-add" :style="{ fontSize: '30px', color: '#08c' }"/>
+    </div>
   </div>
 
 </template>
@@ -1251,7 +1273,14 @@ import {snippetsOutlined, StarFilled, StarTwoTone} from '@ant-design/icons-vue';
 import noDataPng from '@/assets/nodata.png'
 
 let Base64 = require('js-base64').Base64
-
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
 export default {
   name: "TaskUploadData",
   mixins: [JeecgListMixin],
@@ -1259,6 +1288,11 @@ export default {
   components: {noDataPng},
   data() {
     return {
+      btnStyle:{
+        "fontSize":'small',
+        "top":'60vh',
+        "left":'90vw'
+      },
       rules:{
         scene: [
           {required: true, message: '必须输入'},
@@ -1428,6 +1462,8 @@ export default {
       //弹窗
       previewImage: "",
       previewVisible: false,
+      isPhoneshow:false,
+      phoneList:'',
       url: {
         "getTask":"/smsTurck/customerData/query/getTask",
         "getInfoDataById": "/smsCheck/customerInfo/queryById",
@@ -1734,6 +1770,36 @@ export default {
     }
   },
   methods: {
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview ||file.urlBase ;
+      this.previewVisible = true;
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList;
+    },
+    showPhone(){
+      if (this.isPhoneshow===false){
+        this.isPhoneshow = true;
+      }else {
+        this.isPhoneshow = false;
+      }
+
+      var data = {
+        customerNo:  this.infoModel.customerNo,
+      }
+      getAction('/smsCheck/customerInfo/phone/customerPhone', data).then((res) => {
+        if (res.success) {
+          this.phoneList=JSON.parse(res.result);
+
+        }
+      })
+    },
     backDate(name){
       if (name==='contractDate'){
         this.infoModel.contractDateIs="1"
@@ -2328,6 +2394,39 @@ h3 {
   //margin-top:-20px;/*设置有序列表项之间的间隔*/
   font-size:13px;
  }
+.float-info{
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  position: fixed;
+  bottom: 50px;
+  right: 30px;
+  width: 55px;
+  height: 55px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  background: #b3d4fc;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.float-infoPhone{
+  margin-bottom:10px;
+  float: left;
+  right: 11%;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  position: fixed;
+  bottom:3%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  //background: #b3d4fc;
+  cursor: pointer;
+}
 </style>
 
 

src/views/smscheck/modules/TaskUploadData.vue

@@ -2264,56 +2264,17 @@
     </a-card>
     <a-card  v-if='isPhoneshow'    ref="floatButton"
              class="float-infoPhone">
-      <div>
-        <swiper
-          class="swiper gallery-thumbs"
-          :options="swiperOptionThumbs"
-          ref="swiperThumbs"
+      <div class="clearfix">
+        <a-upload
+          list-type="picture-card"
+          :file-list="phoneList"
+          @preview="handlePreview"
+          @change="handleChange"
         >
-          <swiper-slide
-            class="slide"
-            style="width:100px;height:100px;"
-            v-for="(item, index) in phoneList"
-            :key="item.id"
-          >
-            <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
-              <span style="white-space:normal; word-break:break-all;overflow:hidden;"  @click="jumpUrl(item.urlBase)">{{ item.fileName }}</span>
-            </div>
-
-            <img style="width: 100%;height: 96px"
-                 v-if="!item.urlBase" :src="noDataPng" border="1">
-
-          </swiper-slide>
-          <!--              点我上传文件按钮-->
-          <div class="clearfix">
-            <a-upload
-              list-type="picture-card"
-              listType="picture-card"
-              name="file"
-              :multiple="false"
-              :action="importMinioUploadAction"
-              :headers="tokenHeader"
-              :showUploadList="false"
-              :beforeUpload="importBeforeUpload"
-              @change="importHandleChange"
-            >
-            </a-upload>
-
-          </div>
-
-          <div class="swiper-button-next swiper-button-white" slot="button-next">
-            <div>
-              <a-icon type="right-circle":style="{ fontSize: '45px' }"  />
-
-            </div>
-          </div>
-          <div class="swiper-button-prev swiper-button-white" slot="button-prev">
-            <div>
-
-              <a-icon type="left-circle" :style="{ fontSize: '45px' }"  />
-            </div>
-          </div>
-        </swiper>
+        </a-upload>
+        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+          <img alt="example" style="width: 100%" :src="previewImage" />
+        </a-modal>
       </div>
     </a-card>
     <div @click='showPhone'
@@ -2337,6 +2298,15 @@ import {ACCESS_TOKEN, TENANT_ID} from "@/store/mutation-types";
 
 
 let Base64 = require('js-base64').Base64
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
 export default {
   name: 'TaskUploadData',
   inject: ['closeCurrent'],
@@ -2345,6 +2315,8 @@ export default {
   },
   data() {
     return {
+      previewVisible: false,
+      previewImage: '',
       btnStyle:{
         "fontSize":'small',
         "top":'60vh',
@@ -2866,7 +2838,21 @@ export default {
     //   this.closeTimer();
     // });
   },
+
   methods: {
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview ||file.urlBase ;
+      this.previewVisible = true;
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList;
+    },
     showPhone(){
       if (this.isPhoneshow===false){
         this.isPhoneshow = true;
@@ -3520,22 +3506,17 @@ export default {
 .float-infoPhone{
   margin-bottom:10px;
   float: left;
-  width: 83%;
-  left: 57%;
+  right: 11%;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   transition: all 0.3s;
   position: fixed;
-  bottom: 50px;
-  right: 30px;
-  width: 55px;
-  height: 55px;
+  bottom:3%;
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   z-index: 999;
   //background: #b3d4fc;
-  border-radius: 50%;
-  cursor: pointer;
+   cursor: pointer;
 }
 </style>

src/views/truckCheck/TaskUploadData.vue

@@ -2347,7 +2347,28 @@
 
 
     </a-card>
-
+    <a-card  v-if='isPhoneshow'    ref="floatButton"
+             class="float-infoPhone">
+      <div class="clearfix">
+        <a-upload
+          list-type="picture-card"
+          :file-list="phoneList"
+          @preview="handlePreview"
+          @change="handleChange"
+        >
+        </a-upload>
+        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+          <img alt="example" style="width: 100%" :src="previewImage" />
+        </a-modal>
+      </div>
+    </a-card>
+    <div @click='showPhone'
+         ref="floatButton"
+         class="float-info"
+         :style="{'width': 80 + 'px', 'height': 80 + 'px', 'left':   90+'%' , 'top': 80 + '%'}"
+    >
+      <a-icon type="folder-add" :style="{ fontSize: '30px', color: '#08c' }"/>
+    </div>
   </div>
 
 </template>
@@ -2360,7 +2381,14 @@ import noDataPng from '@/assets/nodata.png'
 import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 
 let Base64 = require('js-base64').Base64
-
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
 export default {
   name: "TaskUploadData",
   mixins: [JeecgListMixin],
@@ -2368,6 +2396,13 @@ export default {
   components: {noDataPng},
   data() {
     return {
+      isPhoneshow:false,
+      phoneList:'',
+      btnStyle:{
+        "fontSize":'small',
+        "top":'60vh',
+        "left":'90vw'
+      },
       selectDateTime: '',
       timeScopedPre: {
         近七日: [ ],//加上今天一共是七天，subtract方法是传6,往后推6天
@@ -3214,6 +3249,36 @@ export default {
     // this.steps = this.steps00;
   },
   methods: {
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview ||file.urlBase ;
+      this.previewVisible = true;
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList;
+    },
+    showPhone(){
+      if (this.isPhoneshow===false){
+        this.isPhoneshow = true;
+      }else {
+        this.isPhoneshow = false;
+      }
+
+      var data = {
+        customerNo:  this.infoModel.customerNo,
+      }
+      getAction('/smsCheck/customerInfo/phone/customerPhone', data).then((res) => {
+        if (res.success) {
+          this.phoneList=JSON.parse(res.result);
+
+        }
+      })
+    },
     isPhone(rule, value, callback) {
       if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
         callback();
@@ -3837,6 +3902,39 @@ h3 {
   padding-left: 4px;
   list-style-type: circle;
 }
+.float-info{
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  position: fixed;
+  bottom: 50px;
+  right: 30px;
+  width: 55px;
+  height: 55px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  background: #b3d4fc;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.float-infoPhone{
+  margin-bottom:10px;
+  float: left;
+  right: 11%;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  position: fixed;
+  bottom:3%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  //background: #b3d4fc;
+  cursor: pointer;
+}
 </style>