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.
|
|
<template> <view> <block v-if="isRight(orderDetails)"> <!-- 商品信息 --> <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 :src="orderDetails.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="orderDetails.order.goods.name"> {{orderDetails.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>{{orderDetails.order.number}}</text> <view class="flex justify-between" style="margin-top: 28rpx;"> <lf-price :price="orderDetails.order.selling_price" style="margin-top: 8rpx;" /> <!-- <view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;"> {{orderDetails.order.selling_price}} </view> --> <view> <button class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">等待审核</button> </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-price1 lf-font-32 text-black"> {{orderDetails.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">{{orderDetails.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-price1 lf-font-32 text-black"> {{orderDetails.refund_rate_amount}} </view> </view> </view> </skeleton> <!-- 表单 --> <skeleton :loading="skeletonLoading" :row="2" :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-price1 lf-font-32 text-black"> {{orderDetails.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="lf-font-32 text-black">{{orderDetails.order_sn}}</text> <!-- <text class="text-orange lf-font-28" @tap="copy(orderDetails.order_sn)">复制</text> --> </view> </view> <view class="padding-lr bg-white" style="padding-top: 30rpx;"> <view class="cu-self menu"> <view class="text-gray lf-font-28"> 由于产品的特殊性，在申请的过程中，供应商会向您收取部分费用。如有疑问可参与产品的<text @tap="$routerGo('/pages/agreement/agreement?id='+checkAreaId)" class="text-orange">《{{checkArea}}》</text>或咨询客服 </view> </view> </view> </view> </skeleton> <skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true"> <view class="bg-white" style="padding: 40rpx 32rpx 20rpx 32rpx;"> <view class="cu-self menu"> <view class="lf-font-32 text-black1">退款说明</view> </view> <view class="cu-self menu" style="margin-top: 20rpx;padding-bottom: 20rpx;border-bottom: 1px solid #F5F5F5;" v-if="images.length == 0"> <view class="text-gray lf-font-32">{{orderDetails.comment}}</view> </view> <view class="cu-self menu" style="margin-top: 20rpx;" v-else> <view class="text-gray lf-font-32">{{orderDetails.comment}}</view> </view> </view> <view class="cu-form-group solid-bottom" style="padding-bottom: 20rpx;" v-if="images.length != 0"> <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) of images" :key="index"> <image :src="item.path" @tap="showImg(index)" style="width: 216rpx;height: 216rpx;" mode="aspectFill"></image> </view> </view> </view> <view style="height: 82rpx;"></view> </skeleton> </block> </view></template>
<script> export default { data() { return { skeletonLoading: true, loading: false, // 选择的本地图片路径
hostImg: '', // 已上传服务器的图片名称
serverImg:'', order_id:1, orderDetails: {}, checkArea: '', checkAreaId: 1, images: [], ifChoose: true } }, computed: { isRight(){ return function(val){ return this.$shared.isRight(val); } } }, onLoad(e) { this.order_id = e.order_id if(this.order_id) { this.getOrderDetails() } }, methods: { getOrderDetails() { this.$http(this.API.API_APPLYPAGE_DETAILS, {order_id: this.order_id}).then(res => { if(res.code == 0) { this.orderDetails = res.data.refund this.checkArea = res.data.agreement.title this.images = res.data.refund.images this.checkAreaId = res.data.agreement.article_id this.skeletonLoading = false } }).catch(err => { }); }, // 预览图片
showImg(index) { this.$u.throttle(() => { let goods_banner = this.images || []; let banners = goods_banner.map(item => item.path); uni.previewImage({ urls: banners, current: index }) }, 200); }, // 点击复制
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>
|
