|
|
<template> <view> <!-- 商品信息 --> <self-line/> <view class="bg-white padding-tb-sm"> <skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr"> <image :src="applyDetails.order.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> <view class="flex-sub padding-left-sm"> <view class="bref-box margin-top-xs lf-font-32 lf-font-bold"> {{applyDetails.order.goods.name}} </view> <text class="block margin-top-sm text-gray lf-font-28">数量 <text class="margin-left text-gray">x{{applyDetails.order.number}}</text></text> <view class="flex justify-between margin-top-sm"> <view class="text-red text-price lf-font-42 lf-font-bold"> {{applyDetails.order.selling_price}} </view> </view> </view> </view>
</skeleton> </view> <self-line/> <skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true"> <view class="bg-white"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray lf-font-32">订单金额</text> <view class="text-price lf-font-32 text-black"> {{applyDetails.order.amount}} </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray lf-font-32">扣费率</text> <view> <text class="lf-font-32 text-black">{{applyDetails.order.refund_rate}}%</text> </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray lf-font-32">扣费金额</text> <view class="text-price lf-font-32 text-black"> {{applyDetails.order.refund_rate_amount}} </view> </view> </view> </skeleton> <self-line/> <!-- 表单 --> <skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true"> <view class="bg-white"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray lf-font-32">可退金额</text> <view class="text-price lf-font-32 text-black"> {{applyDetails.order.refund_amount}} </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray lf-font-32">订单编号</text> <view> <text class="margin-right lf-font-32 text-black">{{applyDetails.order.order_sn}}</text> <text class="text-orange lf-font-32" @tap="copy(applyDetails.order.order_sn)">复制</text> </view> </view> <view class="padding-top padding-lr bg-white"> <view class="cu-self menu"> <view class="text-gray lf-font-28"> 由于产品的特殊性，在申请的过程中，供应商会向您收取部分费用。如有疑问可参与产品的<text class="text-orange">《{{applyDetails.agreement.title}}》</text>或咨询客服 </view> </view> </view> </view> </skeleton> <self-line/> <skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true"> <view class="cu-bar padding-lr solid-bottom"> <text class="lf-font-32 text-gray">退款说明</text> <input type="text" v-model="applyInfo" class="text-right lf-font-32" style="color: #999999;" placeholder="请输入反馈信息" /> </view> <!-- <view class="padding bg-white"> <view class="cu-self menu"> <view class="lf-font-32 text-gray">请上传退款凭证</view> </view> </view> --> <view class="cu-form-group solid-bottom"> <view class="grid col-4 grid-square flex-sub"> <view class="bg-img" v-for="(item,index) in img_list" :key="index" @tap="showImg(item)" :data-url="img_list[index]"> <image :src="img_list[index]" mode="aspectFill"></image> <view class="cu-tag bg-red" @tap.stop="DelImg(index)" :data-index="index"> <text class='cuIcon-close'></text> </view> </view> <view class="solids" @tap="ChooseImage" v-if="img_list.length<3"> <text class='cuIcon-cameraadd'></text> </view> </view> <!-- <view class="grid col-4 grid-square flex-sub"> <view class="solids" @tap="ChooseImage" v-if="hostImg == ''"><text class="cuIcon-cameraadd"></text></view> <view class="bg-img" v-else> <image :src="hostImg" @tap="showImg" mode="aspectFill"></image> <view class="cu-tag bg-red" @tap.stop="DelImg"><text class="cuIcon-close"></text></view> </view> </view> --> </view> <view class="padding-top-sm padding-lr-lg"> <button class="cu-btn block bg-orange lg margin-top round" @tap="subimitApply()"> <text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text> <text class="text-df text-white">确认申请</text> </button> </view> </skeleton> </view></template>
<script> export default { data() { return { skeletonLoading: true, loading: false, // 选择的本地图片路径
hostImg: '', // 已上传服务器的图片名称
serverImg:'', orderId: 1, applyDetails: {}, applyInfo: '', imageOnline: '', is_wx_reduce: true, img_list: [], // 反馈问题图片
} }, computed: { }, onLoad(e) { this.orderId = e.orderId if(this.orderId) { this.getApplyDetails() } setTimeout(()=>{ this.skeletonLoading = false },1000) }, methods: { getApplyDetails() { this.$http(this.API.API_APPLY_DETAILS, {order_id: this.orderId}).then(res => { if(res.code == 0) { this.applyDetails = res.data this.skeletonLoading = false console.log(this.applyDetails) } }).catch(err => { }); }, checkImgInfo(tempFilePath, suc){ uni.getImageInfo({ src: tempFilePath, success (res) { let type = res.type; console.log('checkImgInfo...', type); if(type == 'png' || type == 'jpeg' || type == 'jpg'){ suc && suc(true); } else { suc && suc(false); } }, fail(err) { suc && suc(false); } }) }, subimitApply() { if(!this.applyInfo) { this.$msg('请先输入反馈信息!') return } this.upload() }, // 选择图片
ChooseImage(e) { let that = this; uni.chooseImage({ count: 1, sizeType: ['original'], // 可以指定是原图original还是压缩图compressed ，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: res => { that.hostImg = res.tempFilePaths[0]; console.log('元数据') console.log(res) // this.upload(this.hostImg)
let tempFile = res.tempFiles.shift(); let tempFilePath = res.tempFilePaths.shift(); that.checkImgInfo(tempFilePath, (res) => { // 过滤不是图片不是png、jpeg 格式
if(res){ if(tempFile.size > 10000000){ uni.showModal({ title: '', content: '您选择的图片过大：'+ (tempFile.size / 1024000).toFixed(2) +"M，请点击确定重新上传", success: res2 => { if(res2.confirm){ uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res3) => { let tempFilePath = res3.tempFilePaths.shift(); that.is_wx_reduce = true; that.img_list.push(tempFilePath); } }) } } }) } else{ that.img_list.push(tempFilePath); } } else { uni.showModal({ title: '', content: '选择的图片须为jpg、jpeg或png格式', showCancel: false, confirmColor: '#1697EE' }) } }); } }); }, // 上传图片到服务器
upload(url){ let that = this; let uploads = []; // 商品banner图上传
if (that.img_list.length > 0) { for (let i = 0; i < that.img_list.length; i++) { let upload_img = new Promise((resolve, reject) => { that.uploadFile(that.img_list[i], (res) => { resolve(res); }, (err) => { reject(err); }); }) uploads.push(upload_img); } } Promise.all(uploads).then((result) => { console.log('图片上传...', result) let img_url_list = []; if(result.length > 0){ img_url_list = JSON.stringify(result); } if(img_url_list) { that.realSubmitInfo(img_url_list); } }).catch(err => { console.log(err) that.is_publish = false; // 恢复提交按钮
uni.showModal({ title: '', content: '图片上传失败，请重新提交', confirmColor: '#1697EE' }) }) }, // 提交反馈
realSubmitInfo(img_url_list){ let that = this; uni.showToast({ title: '请求中', icon: "loading", duration: 10000 }) that.$http(that.API.API_SUBMIT_APPLY, {order_id: that.orderId,comment: that.applyInfo,images:img_url_list}).then(res => { if(res.code == 0) { that.$msg('提交成功') that.img_list = [] that.applyInfo = '' setTimeout(() => { that.$routerGo('/pages/order/apply-details?orderId='+that.orderId) },1000) } }).catch(err => { }); }, // 预览图片
showImg(image) { // let image = this.img_list[index];
uni.previewImage({ urls: [image], }); }, // 删除图片
DelImg(index) { uni.showModal({ title: '提示', content: '即将取消上传这张图片，请确认？', success: e => { if (!e.confirm) return; this.img_list.splice(index, 1); } }); }, // 点击复制
copy(text) { uni.setClipboardData({ data: text }); }, } }</script>
<style lang="scss" scoped> .bref-box { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
</style>
|
