Skip to content

W
WX_h5
Commit 3aa4e428 authored by godwithdh's avatar godwithdh
Browse files
Options

Merge branch 'master' of http://47.110.145.204:8085/godwithdh/wx_h5

parents 756d5795 dcdbe7f8
Hide whitespace changes
Inline Side-by-side
Showing with 453 additions and 29 deletions
config/index.js
View file @ 3aa4e428
...@@ -16,6 +16,12 @@ module.exports = { ...@@ -16,6 +16,12 @@ module.exports = {
pathRewrite: { '^/api': '' }, pathRewrite: { '^/api': '' },
changeOrigin: true, changeOrigin: true,
secure: false secure: false
},
'/webService': {
target: 'http://47.96.168.158:4080',
pathRewrite: { '^/webService': '' },
changeOrigin: true,
secure: false
} }
}, },
......
package.json
View file @ 3aa4e428
...@@ -86,7 +86,8 @@ ...@@ -86,7 +86,8 @@
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0", "webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1", "webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0" "webpack-merge": "^4.1.0",
"xmldom": "^0.3.0"
}, },
"engines": { "engines": {
"node": ">= 6.0.0", "node": ">= 6.0.0",
......
src/libs/apiMap.js
View file @ 3aa4e428
...@@ -84,5 +84,8 @@ const methodMap = { ...@@ -84,5 +84,8 @@ const methodMap = {
//tiip 收发存 //tiip 收发存
getTiipReceiveStorage:{url:"/boss/stock/",method:"post",host:"default"}, getTiipReceiveStorage:{url:"/boss/stock/",method:"post",host:"default"},
get_ticket:{url:"/weixin/get_ticket/",method:"post",host:"app"},
}; };
export default Object.assign(methodMap,healthApi); export default Object.assign(methodMap,healthApi);
src/libs/crypto.js
View file @ 3aa4e428
...@@ -21,6 +21,8 @@ const signatureUtil={ ...@@ -21,6 +21,8 @@ const signatureUtil={
if (body) { if (body) {
signPlain += JSON.stringify(body) signPlain += JSON.stringify(body)
} }
console.log(signPlain)
signPlain += timestamp.toString() + nonce.toString() signPlain += timestamp.toString() + nonce.toString()
// console.log('签名结果：', signPlain) // console.log('签名结果：', signPlain)
// signPlain = sha256.hmac('018f162e804f945ee6b23aebfa863639', signPlain); // signPlain = sha256.hmac('018f162e804f945ee6b23aebfa863639', signPlain);
......
src/libs/http.js
View file @ 3aa4e428
...@@ -32,7 +32,7 @@ Http.install = function (Vue) { ...@@ -32,7 +32,7 @@ Http.install = function (Vue) {
loading(toast); loading(toast);
} }
let _params = opts.hasOwnProperty('params') ? opts.params : {}; let _params = opts.hasOwnProperty('params') ? opts.params : {};
let url = new HSHttpClient(apiURL(m.host) + m.url,{},_params).newUrl; let url = new HSHttpClient(apiURL(m.host) + m.url,{},_params,opts.data).newUrl;
if (m.method === 'get') { if (m.method === 'get') {
return Vue.prototype.apiGet(url,opts.data,toast,header); return Vue.prototype.apiGet(url,opts.data,toast,header);
......
src/libs/util.js
View file @ 3aa4e428
import Axios from 'axios'; import Axios from 'axios';
import CryptoJS from 'crypto-js'
var now = new Date(); //当前日期 var now = new Date(); //当前日期
var nowDayOfWeek = now.getDay(); //今天本周的第几天 var nowDayOfWeek = now.getDay(); //今天本周的第几天
var nowDay = now.getDate(); //当前日 var nowDay = now.getDate(); //当前日
......
src/router/index.js
View file @ 3aa4e428
...@@ -376,7 +376,22 @@ let tipRoutes = [ ...@@ -376,7 +376,22 @@ let tipRoutes = [
} }
}, },
] ]
} },
{ //图片上传
name:"main",
component:()=>import("@/view/main.vue"),
path:"/main",
children:[
{
path:"/tiip/uploadImg",
name:"IntReportForms",
component:()=>import("@/view/tiip/uploadImg/index.vue"),
meta:{
title:"图片上传"
},
}
]
},
]; ];
let shopVersionRoutes = [ let shopVersionRoutes = [
......
src/view/tiip/IntReportForms/empAna.vue
View file @ 3aa4e428
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
resize(chart){ resize(chart){
var option=chart.getOption() var option=chart.getOption()
if(!option)return; if(!option)return;
option.dataZoom[0].end=option.dataZoom[0].start+(window.innerWidth*0.9)/option.xAxis[0].data.length // option.dataZoom[0].end=option.dataZoom[0].start+(window.innerWidth*0.9)/option.xAxis[0].data.length
chart.setOption(option) chart.setOption(option)
chart.resize() chart.resize()
}, },
...@@ -159,6 +159,7 @@ export default { ...@@ -159,6 +159,7 @@ export default {
nPaydAmount:v.nPaydAmount, nPaydAmount:v.nPaydAmount,
sMonth:v.sMonth, sMonth:v.sMonth,
iSalesId:v.sSalesName, iSalesId:v.sSalesName,
nReceivedAmount:v.nReceivedAmount
} }
}) })
this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId); this.chartData2=this.tempChartData2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId);
...@@ -173,7 +174,7 @@ export default { ...@@ -173,7 +174,7 @@ export default {
} }
}) })
this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId) this.chartData3=this.tempChartData3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)
this.setChart1(this.myChart3,this.chartData3,1) this.setChart2(this.myChart3,this.chartData3,1)
} }
}, },
setChart(myChart,value){ setChart(myChart,value){
...@@ -252,6 +253,99 @@ export default { ...@@ -252,6 +253,99 @@ export default {
myChart.setOption(options); myChart.setOption(options);
}, },
setChart1(myChart,value,id){ setChart1(myChart,value,id){
let options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
grid: {
top:"40",
bottom:"20",
left: '2%', // 与容器左侧的距离
right: '5%', // 与容器右侧的距离
containLabel: true
},
legend: {
data:['比例', '回款金额']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: this.chartData2.map(x=>x.sMonth)
},
{
type: 'category',
boundaryGap: true,
data: this.chartData2.map(x=>x.sMonth)
},
],
yAxis: [
{
type: 'value',
scale: true,
name: '比例',
},
{
type: 'value',
scale: true,
name: '回款金额',
axisLabel: {
margin: 2,
formatter: function (value, index) {
if(value >= 1000 && value < 10000){
value = Math.round(value/10) / 100 + "千";
}else if (value >= 10000 && value < 10000000) {
value = Math.round(value/100) / 100 + "万";
} else if (value >= 10000000) {
value = Math.round(value/1000) / 10000 + "千万";
}
return value;
}
},
}
],
series: [
{
name: '比例',
type: 'bar',
data: this.chartData2.map(x=>x.nPaydAmount)
},
{
name: '回款金额',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: this.chartData2.map(x=>x.nReceivedAmount)
}
],
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*0.9)/value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}]
};
myChart.setOption(options);
},
setChart2(myChart,value,id){
let options = { let options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
......
src/view/tiip/checkProgress/process/list.vue
View file @ 3aa4e428
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import searchComponent from '@/components/search' import searchComponent from '@/components/search'
import customerTable from '@/components/Table' import customerTable from '@/components/Table'
var CryptoJS = require("crypto-js");
export default { export default {
name: 'tipProcessProgress', name: 'tipProcessProgress',
...@@ -170,6 +171,49 @@ export default { ...@@ -170,6 +171,49 @@ export default {
this.row = this.list[res.trIndex]; this.row = this.list[res.trIndex];
this.routerToDetail(); this.routerToDetail();
}) })
// let result = await this.request('get_ticket',{
// data:{
// url:window.location.href
// }
// })
// wx.config({
// // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
// debug: false,
// // 必填，公众号的唯一标识
// appId: result.appId,
// // 必填，生成签名的时间戳
// timestamp:result.timestamp,
// // 必填，生成签名的随机串
// nonceStr:result.nonceStr,
// // 必填，签名，见附录1
// signature:result.signature,
// // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
// jsApiList : [ 'checkJsApi', 'scanQRCode' ]
// });
// wx.error(function(res) {
// alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
// });
// console.log(wx)
// wx.ready(function() {
// //点击按钮扫描二维码
// document.querySelector('#scanQRCode').onclick = function() {
// console.log(wx)
// wx.scanQRCode({
// needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
// scanType : [ "qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
// success : function(res) {
// var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
// window.location.href = result;//因为我这边是扫描后有个链接，然后跳转到该页面
// }
// });
// };
// });
}, },
methods:{ methods:{
async getStatus(){ async getStatus(){
...@@ -201,7 +245,7 @@ export default { ...@@ -201,7 +245,7 @@ export default {
}else if(key == 'dEndDate'){ }else if(key == 'dEndDate'){
postData.push({key:key,value:value + ' 23:59:59' || ''}) postData.push({key:key,value:value + ' 23:59:59' || ''})
}else if(key == 'searchvalue'){ }else if(key == 'searchvalue'){
postData.push({key:'searchvalue',value:value}) postData.push({key:'searchname',value:value})
} }
} }
let res = await this.request('getTipProcessProgress',{ let res = await this.request('getTipProcessProgress',{
......
src/view/tiip/kanban/abnormal.vue
View file @ 3aa4e428
...@@ -43,12 +43,26 @@ ...@@ -43,12 +43,26 @@
<td @click="routerPushOperateDetail('销售退货')"> <td @click="routerPushOperateDetail('销售退货')">
<div>{{Number(value['销售退货']||0).toLocaleString()}}</div> <div>{{Number(value['销售退货']||0).toLocaleString()}}</div>
</td> </td>
<td style="width:100px;">
<div>销售退货率</div>
</td>
<td style="text-decoration:none;">
<div>{{Number(value['销售退货率']||0).toLocaleString() * 100 + '%'}}</div>
</td>
</tr>
<tr>
<td style="width:100px;"> <td style="width:100px;">
<div>采购退货</div> <div>采购退货</div>
</td> </td>
<td @click="routerPushOperateDetail('采购退货')"> <td @click="routerPushOperateDetail('采购退货')">
<div>{{Number(value['采购退货']||0).toLocaleString()}}</div> <div>{{Number(value['采购退货']||0).toLocaleString()}}</div>
</td> </td>
<td style="width:100px;">
<div>采购退货率</div>
</td>
<td style="text-decoration:none;">
<div>{{Number(value['采购退货率']||0).toLocaleString() * 100 + '%'}}</div>
</td>
</tr> </tr>
<tr> <tr>
<td > <td >
......
src/view/tiip/kanban/index.vue
View file @ 3aa4e428
...@@ -134,6 +134,9 @@ ...@@ -134,6 +134,9 @@
mode="during" mode="during"
:defaultDate="calendarValue" :defaultDate="calendarValue"
@change="Change"/> @change="Change"/>
<button @click="scan">ddddddd</button>
</div> </div>
</template> </template>
<script> <script>
...@@ -228,6 +231,11 @@ export default { ...@@ -228,6 +231,11 @@ export default {
} }
return new Date(date.getTime()); return new Date(date.getTime());
}, },
scan(){
wx.miniProgram.scanQRCode(function(res) {
console.log(111,res.miniprogram) // true
})
}
}, },
computed:{ computed:{
startDate(val){ startDate(val){
......
src/view/tiip/profitAnalysis/detail.vue
View file @ 3aa4e428
...@@ -213,7 +213,7 @@ export default { ...@@ -213,7 +213,7 @@ export default {
}, },
methods:{ methods:{
async getDetail(){ async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{ let res = await this.apiGet(`${this.$url('default')}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID uGUID:this.hdr.uGUID
},true); },true);
// if(res.length > 0){ // if(res.length > 0){
......
src/view/tiip/profitAnalysis/track.vue
View file @ 3aa4e428
...@@ -250,7 +250,7 @@ export default { ...@@ -250,7 +250,7 @@ export default {
this.$router.push({name:'searchOrderDetail'}) this.$router.push({name:'searchOrderDetail'})
}, },
async getDetail(){ async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{ let res = await this.apiGet(`${this.$url('default')}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID uGUID:this.hdr.uGUID
},true); },true);
if(res.length > 0){ if(res.length > 0){
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
} }
}, },
async getOrderallmes(){ async getOrderallmes(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/orderallmes/`,{ let res = await this.apiGet(`${this.$url('default')}/fabricorder/orderallmes/`,{
sOrderNo:this.hdr.sOrderNo sOrderNo:this.hdr.sOrderNo
},true); },true);
......
src/view/tiip/searchOrder/detail.vue
View file @ 3aa4e428
...@@ -56,6 +56,8 @@ ...@@ -56,6 +56,8 @@
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import customerTable from '@/components/Table' import customerTable from '@/components/Table'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import urlFun from '@/libs/host.js'
export default { export default {
name: 'searchOrderDetail', name: 'searchOrderDetail',
data () { data () {
...@@ -104,8 +106,6 @@ export default { ...@@ -104,8 +106,6 @@ export default {
tbodyHeight:'calc(100vh - 110px)', tbodyHeight:'calc(100vh - 110px)',
tbodyTrBorderBottom:'0.5px solid #5cadff' tbodyTrBorderBottom:'0.5px solid #5cadff'
}, },
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
nAllAmount:0, nAllAmount:0,
} }
}, },
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
}, },
methods:{ methods:{
async getDetail(){ async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{ let res = await this.apiGet(`${urlFun('default')}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID uGUID:this.hdr.uGUID
},true); },true);
......
src/view/tiip/searchOrder/index.vue
View file @ 3aa4e428
...@@ -67,7 +67,7 @@ import Util from '@/libs/util.js' ...@@ -67,7 +67,7 @@ import Util from '@/libs/util.js'
import searchComponent from '@/components/search' import searchComponent from '@/components/search'
import customerTable from '@/components/Table' import customerTable from '@/components/Table'
import customerModal from '@/components/Modal' import customerModal from '@/components/Modal'
import urlFun from '@/libs/host.js'
import { XButton } from 'vux' import { XButton } from 'vux'
export default { export default {
...@@ -128,8 +128,6 @@ export default { ...@@ -128,8 +128,6 @@ export default {
tbodyTrBorderBottom:'1px solid #dbe9f8', tbodyTrBorderBottom:'1px solid #dbe9f8',
width:'100%' width:'100%'
}, },
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
status:[], status:[],
showModal:false, showModal:false,
row:{}, row:{},
...@@ -175,7 +173,7 @@ export default { ...@@ -175,7 +173,7 @@ export default {
}, },
methods:{ methods:{
async getStatus(){ async getStatus(){
let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/status/`,{},true); let res = await this.apiGet(`${urlFun('default')}/fabricorder/status/`,{},true);
this.status = res; this.status = res;
this.status.map(x=>{ this.status.map(x=>{
x.sStatus = x.sStatus || '全部'; x.sStatus = x.sStatus || '全部';
...@@ -201,8 +199,7 @@ export default { ...@@ -201,8 +199,7 @@ export default {
delete data.dBeginDate; delete data.dBeginDate;
delete data.dEndDate; delete data.dEndDate;
let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/hdr/`,data,'加载中') let res = await this.apiGet(`${urlFun('default')}/fabricorder/hdr/`,data,'加载中')
// let res = await this.apiGet(`http://weixin.huansi.net/apiproxy/huansi/hszh_HSFabricTradeTest/fabricorder/hdr/`,data,'加载中')
if(res.table.length > 0){ if(res.table.length > 0){
res.table.map(x=>{ res.table.map(x=>{
......
src/view/tiip/searchOrder/materialDetail.vue
View file @ 3aa4e428
...@@ -122,13 +122,12 @@ ...@@ -122,13 +122,12 @@
import Util from '@/libs/util.js' import Util from '@/libs/util.js'
import customerTable from '@/components/Table' import customerTable from '@/components/Table'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import urlFun from '@/libs/host.js'
export default { export default {
name: 'searchOrderMaterialDetail', name: 'searchOrderMaterialDetail',
data () { data () {
return { return {
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
list:{}, list:{},
} }
}, },
...@@ -147,7 +146,7 @@ export default { ...@@ -147,7 +146,7 @@ export default {
}, },
methods:{ methods:{
async getMaterial(){ async getMaterial(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/material/`,{ let res = await this.apiGet(`${urlFun('default')}/fabricorder/material/`,{
sSampleMaterialNo:this.dtl.sSampleMaterialNo sSampleMaterialNo:this.dtl.sSampleMaterialNo
},'加载中'); },'加载中');
......
src/view/tiip/searchOrder/track.vue
View file @ 3aa4e428
...@@ -157,7 +157,7 @@ import Util from '@/libs/util.js' ...@@ -157,7 +157,7 @@ import Util from '@/libs/util.js'
import customerTable from '@/components/Table' import customerTable from '@/components/Table'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { XButton } from 'vux' import { XButton } from 'vux'
import urlFun from '@/libs/host.js'
export default { export default {
name: 'searchOrderTrack', name: 'searchOrderTrack',
data () { data () {
...@@ -250,7 +250,7 @@ export default { ...@@ -250,7 +250,7 @@ export default {
// this.$router.push({name:'searchOrderDetail'}) // this.$router.push({name:'searchOrderDetail'})
}, },
async getDetail(){ async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{ let res = await this.apiGet(`${urlFun('default')}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID uGUID:this.hdr.uGUID
},true); },true);
...@@ -261,7 +261,7 @@ export default { ...@@ -261,7 +261,7 @@ export default {
} }
}, },
async getOrderallmes(){ async getOrderallmes(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/orderallmes/`,{ let res = await this.apiGet(`${urlFun('default')}/fabricorder/orderallmes/`,{
sOrderNo:this.hdr.sOrderNo sOrderNo:this.hdr.sOrderNo
},true); },true);
......
src/view/tiip/specimen/index.vue
View file @ 3aa4e428
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
this.$set(this.dtl[index],'isErr',true) this.$set(this.dtl[index],'isErr',true)
}, },
async getList(){ async getList(){
this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{ this.apiGet(`${this.$url('default')}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
this.hdr = res.header; this.hdr = res.header;
this.dtl = res.childs; this.dtl = res.childs;
res.childs.map(v=>{ res.childs.map(v=>{
...@@ -135,7 +135,7 @@ export default { ...@@ -135,7 +135,7 @@ export default {
this.dtl_src.push({ this.dtl_src.push({
sColorName:v.sColorName, sColorName:v.sColorName,
sColorNo:v.sColorNo, sColorNo:v.sColorNo,
src:`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}` src:`${this.$url('default')}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`
}) })
}) })
}) })
......
src/view/tiip/specimen/temp.vue
View file @ 3aa4e428
...@@ -205,11 +205,11 @@ export default { ...@@ -205,11 +205,11 @@ export default {
} }
}, },
async getList(){ async getList(){
this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{ this.apiGet(`${this.$url('default')}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
this.hdr = res.header; this.hdr = res.header;
this.dtl = res.childs; this.dtl = res.childs;
res.childs.map(v=>{ res.childs.map(v=>{
this.dtl_src.push(`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`) this.dtl_src.push(`${this.$url('default')}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`)
}) })
}) })
}, },
......
src/view/tiip/uploadImg/index.vue 0 → 100644
View file @ 3aa4e428
<style lang="less" >
#uploadImg{
background: #ffffff;
height:100%;
display:flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
padding: 20px;
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 2px dashed #99D3F5;
border-radius: 4px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
height:200px;
line-height: 200px;
text-align: center;
width: auto;
>div{
margin-top: -10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
>i{
position: absolute;
font-size:40px;
}
>span{
position: absolute;
width:100%;
top:30px;
}
}
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
.uploaded{
width:100%;
height:1px;
flex-grow: 1;
margin-top:20px;
>span{
font-size:12px;
font-weight:bold;
}
>div{
margin-top:10px;
width:100%;
display:flex;
flex-wrap: wrap;
>img{
width:20%;
margin-right:5%;
margin-bottom: 5%;
}
}
}
}
</style>
<template>
<div id="uploadImg">
<a href="javascript:;" class="file">
<div>
<i class='iconfont icon-jia1' id="phone_icon"></i>
<span>上传图片</span>
</div>
<input ref="upload" id="upload" type="file" accept="image/*">
</a>
<div class="uploaded">
<span>已上传的图片：</span>
<div>
<img v-for="(item,index) in fileList" :key="index" class="previewer-demo-img" :src="item.src" width="100" @click.stop="show(index)" />
</div>
</div>
<div v-transfer-dom>
<previewer :list="fileList" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import Axios from 'axios';
var DOMParser = require('xmldom').DOMParser;
import {Previewer , TransferDom} from 'vux';
export default {
name: 'uploadImg',
data () {
return {
options: {
getThumbBoundsFn (index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
// get window scroll Y
let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
// optionally get horizontal scroll
// get position of element relative to viewport
let rect = thumbnail.getBoundingClientRect()
// w = width
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
}
},
fileList:[],
query:{},
}
},
components:{
Previewer
},
directives: {
TransferDom
},
async mounted(){
var that = window.d = this;
this.query = this.$route.query;
this.$refs['upload'].addEventListener('change', function() {
var t_files = this.files;
var str = '';
var reader=new FileReader();
reader.onload = function(e){
that.upload(reader.result); //或者 e.target.result都是一样的，都是base64码
}
reader.readAsDataURL(this.files[0]);
}, false);
},
methods:{
show(index){
this.$refs['previewer'].show(index)
},
logIndexChange(){
},
upload(base64,callback){
var datacopy = `<?xml version="1.0" encoding="utf-8"?><soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope"><soap12:Body><SavePic xmlns="http://tempuri.org/"><sToken>F563EBDF-0FC1-4777-96B8-033C3E89D6F8</sToken><sProjectNo>${this.query.sProjectNo}</sProjectNo><sGuid>${this.query.uGUID}</sGuid><sBase64>${base64.split('data:image/png;base64,')[1]}</sBase64></SavePic></soap12:Body></soap12:Envelope>`
var xhr = new XMLHttpRequest();
//打开连接
xhr.open('POST',this.query.sWebServiceURL,true);
//重新设置请求头
xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");
xhr.setRequestHeader("SOAPAction","http://tempuri.org/SavePic");
//设置回调函数
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
let doc = new DOMParser().parseFromString(xhr.response);
if(xhr.status == 200){
let data = doc.getElementsByTagName('SavePicResult')[0].firstChild.nodeValue;
if(data == 'Success'){
this.$vux.confirm.show({
title:"提示",
content:data,
showCancelButton:false,
})
this.fileList.push({
src:base64
})
}
}else if(xhr.status == 500){
let data = doc.getElementsByTagName('soap:Text')[0].firstChild.nodeValue;
this.$vux.confirm.show({
title:"提示",
content:data,
showCancelButton:false,
})
}else if(xhr.status == 0){
this.$vux.confirm.show({
title:"提示",
content:'存在跨域问题！',
showCancelButton:false,
})
}
}
};
//发送请求
xhr.send(datacopy);
// var headers = {
// 'Content-Type':'text/xml; charset=utf-8',
// 'SOAPAction':'http://tempuri.org/SavePic'
// }
// Axios({
// method: 'POST',
// url: this.query.sWebServiceURL,
// data: datacopy,
// headers: headers
// }).then(res=>{
// let doc = new DOMParser().parseFromString(res.data);
// let data = doc.getElementsByTagName('SavePicResult')[0].firstChild.nodeValue;
// if(data == 'Success'){
// this.fileList.push({
// src:base64
// })
// }
// this.$vux.confirm.show({
// title:"提示",
// content:data,
// showCancelButton:false,
// })
// }).catch(err=>{
// this.$vux.confirm.show({
// title:"提示",
// content:'上传错误，请重新上传！',
// showCancelButton:false,
// })
// })
}
},
deactivated(){
// 移除监听
this.$refs['upload'].removeEventListener("change")
}
}
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment