|
|
<template> <view> <mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 --> <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="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> <view class="flex-sub padding-left-sm"> <view class="bref-box margin-top-xs"> 网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 </view> <text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</text></text> <view class="flex justify-between margin-top-sm"> <view class="text-red text-price text-lg"> <amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount> </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">订单金额</text> <view class="text-price"> <amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount> </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray">扣费率</text> <view> <text>30%</text> </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray">扣费金额</text> <view class="text-price"> <amount :value="Number(3.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></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">可退金额</text> <view class="text-price"> <amount :value="Number(16.00 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount> </view> </view> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <text class="text-gray">订单编号</text> <view> <text class="margin-right">67432428794847982374</text> <text class="text-orange text-sm" @tap="copy('67432428794847982374')">复制</text> </view> </view> <view class="cu-bar padding-lr solid-bottom"> <text class="text-gray">退款说明</text> <input type="text" class="text-right text-df" placeholder="请输入反馈信息" /> </view> </view> </skeleton> <self-line/> <skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true"> <view class="padding-top padding-lr bg-white"> <view class="cu-self menu"> <view class="text-gray"> 由于产品的特殊性，在申请的过程中，供应商会向您收取部分费用。如有疑问可参与产品的《售后说明》或咨询客服 </view> </view> </view> <view class="padding bg-white"> <view class="cu-self menu"> <view class="text-df text-bold">请上传退款凭证</view> </view> </view> <view class="cu-form-group solid-bottom"> <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="$routerGo('/pages/order/apply-details')"> <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> </mescroll-body> </view></template>
<script> import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; export default { mixins: [MescrollMixin], // 使用mixin
data() { return { skeletonLoading: true, loading: false, // 选择的本地图片路径
hostImg: '', // 已上传服务器的图片名称
serverImg:'', } }, computed: { }, onLoad(e) { setTimeout(()=>{ this.skeletonLoading = false this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
},1000) }, methods: { // 选择图片
ChooseImage(e) { uni.chooseImage({ count: 1, success: e => { this.hostImg = e.tempFilePaths[0]; this.upload(this.hostImg) } }); }, // 上传图片到服务器
upload(url){ this.$http.upload({ url: '/user/api/file/image', data: url, }).then(res=>{ let imgurl = JSON.parse(res.data) this.serverImg=imgurl.data; }) }, // 预览图片
showImg() { uni.previewImage({ urls: [this.hostImg] }); }, // 删除图片
DelImg() { uni.showModal({ title: '提示', content: '即将取消上传这张图片，请确认？', success: e => { if (!e.confirm) return; this.hostImg = ''; this.serverImg = ''; } }); }, // 点击复制
copy(text) { uni.setClipboardData({ data: text }); }, //下拉刷新
downCallback() { setTimeout(()=>{ this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
this.mescroll.endErr(); // 请求失败,隐藏加载状态
},1000) }, } }</script>
<style lang="scss" scoped> .address-box { // background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x; background-position: left bottom; background-size: auto 8rpx; }
.self-img-sm { width: 40rpx; height: 40rpx; }
.bref-box { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.order-bottom { position: relative;
.cuIcon-fold { position: absolute; right: 50rpx; top: -19rpx; color: rgba(0, 0, 0, 0.1) } }</style>
|
