5 changed files with 1491 additions and 0 deletions
-
1App.vue
-
1226common/styles/icon.css
-
6pages.json
-
244pages/order/apply_refund.vue
-
14pages/user/user.vue
1226
common/styles/icon.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<view> |
|||
<view class="lf-bg-white lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32"> |
|||
<view class="lf-row-between"> |
|||
<image src="../../static/logo.png" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image> |
|||
<view class="flex-sub padding-left-sm"> |
|||
<view class="bref-box lf-font-32 lf-color-333 lf-line-2" style="height: 88rpx;line-height: 44rpx;"> |
|||
南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳 |
|||
</view> |
|||
<view class="flex lf-m-t-25 align-center text-center"> |
|||
<text class="block lf-color-gray lf-font-24" style="line-height: 40rpx;">数量</text> |
|||
<text class="lf-m-l-10 lf-color-gray lf-font-24">x 1</text> |
|||
</view> |
|||
|
|||
<view class="flex align-center text-center lf-m-t-25"> |
|||
<lf-price :price="599.00" /> |
|||
<view class="lf-m-l-20 lf-line-through lf-color-gray"> |
|||
599.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<view class="bg-white"> |
|||
<view class="cu-bar padding-lr"> |
|||
<text class="lf-color-555 lf-font-28">可退金额</text> |
|||
<text class="text-price lf-font-36 lf-color-price">549.00</text> |
|||
</view> |
|||
|
|||
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> |
|||
<text class="lf-color-555 lf-font-28">订单编号</text> |
|||
<view> |
|||
<text class="margin-right lf-font-28 text-black1">2368492461046128742764</text> |
|||
<!-- <text class="text-orange lf-font-28" @click="copy(2368492461046128742764)">复制</text> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<self-line/> |
|||
<view class="bg-white lf-m-b-6"> |
|||
<view class="lf-p-t-30 lf-p-l-32 lf-p-b-36"> |
|||
<view class="lf-font-28 lf-color-black">退款说明</view> |
|||
<input type="text" value="" placeholder="请输入退款说明" class="solid-bottom lf-m-t-30" /> |
|||
</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(index)" :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> |
|||
|
|||
|
|||
|
|||
<view class="btn-bottom solid-top1" style="bottom: 60rpx;"> |
|||
<view class="padding-lr-lg"> |
|||
<button class="cu-btn block lf-bg-blue lg round" @tap="subimitApply()"> |
|||
<text class="text-df text-white">确认申请</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
hostImg: '', |
|||
img_list: [], // 反馈问题图片 |
|||
} |
|||
}, |
|||
methods: { |
|||
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); |
|||
} |
|||
}) |
|||
}, |
|||
// 选择图片 |
|||
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]; |
|||
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); |
|||
} |
|||
} |
|||
if(uploads.length == 0) { |
|||
that.realSubmitInfo([]); |
|||
return |
|||
} |
|||
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' |
|||
}) |
|||
}) |
|||
}, |
|||
// 预览图片 |
|||
showImg(index) { |
|||
this.$u.throttle(() => { |
|||
let goods_banner = this.img_list || []; |
|||
let banners = goods_banner.map(item => item); |
|||
uni.previewImage({ |
|||
urls: banners, |
|||
current: index |
|||
}) |
|||
}, 200); |
|||
}, |
|||
|
|||
// 删除图片 |
|||
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> |
|||
.btn{ |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 212rpx; |
|||
height: 82rpx; |
|||
background-color: #1998FE; |
|||
color: #FFFFFF; |
|||
line-height: 80rpx; |
|||
font-size: 32rpx; |
|||
border-radius: 41rpx; |
|||
} |
|||
.bref-box { |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue