You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
11 KiB
354 lines
11 KiB
<template>
|
|
<view>
|
|
<!-- 商品信息 -->
|
|
<view class="bg-white">
|
|
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
|
|
|
|
<view class="flex justify-between align-start" style="padding: 32rpx 32rpx 30rpx 32rpx;">
|
|
<image v-if="applyDetails.order.goods.cover" :src="applyDetails.order.goods.cover" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
|
|
<view class="flex-sub padding-left-sm">
|
|
<view class="bref-box text-black1 lf-font-32 lf-font-bold" style="height: 88rpx;line-height: 44rpx;" v-if="applyDetails.order.goods.name">
|
|
{{applyDetails.order.goods.name}}
|
|
</view>
|
|
<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{applyDetails.order.number}}</text>
|
|
|
|
<view class="flex justify-between" style="margin-top: 44rpx;">
|
|
<view class="text-red text-price lf-font-42 lf-font-bold" style="display: flex;align-items: flex-end;">
|
|
{{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>
|
|
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
|
|
<view class="bg-white" style="padding: 40rpx 32rpx 30rpx 32rpx;">
|
|
<view class="cu-self menu">
|
|
<view class="lf-font-32 text-black1">退款说明</view>
|
|
</view>
|
|
<view class="cu-self menu" style="margin-top: 30rpx;">
|
|
<textarea type="text" v-model="applyInfo" class="text-left lf-font-32 area-self" placeholder="请输入反馈信息" />
|
|
</view>
|
|
</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">
|
|
<view class="grid col-4 grid-square flex-sub">
|
|
<view style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" 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 style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" 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-lr-lg" style="margin-top: 80rpx;">
|
|
<button class="cu-btn block bg-orange lg 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>
|
|
|
|
<view style="height: 100rpx;">
|
|
|
|
</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;
|
|
}
|
|
.area-self {
|
|
width: 100%;
|
|
padding: 30rpx 0 0 30rpx;
|
|
color: #999999;
|
|
border: 1px solid #D0D0D0;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
</style>
|