|
|
<template> <view v-if="isRight(orderDetails)"> <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="orderDetails.picture" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;" @click="$url('/pages/goodsDetail/index?goods_id='+orderDetails.agent_product_id)"></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;"> {{orderDetails.title}} </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 {{orderDetails.num}}</text> </view> <view class="flex align-center text-center lf-m-t-25"> <lf-price :price="orderDetails.price" /> <!-- <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 padding-lr"> <view class="cu-bar"> <text class="lf-color-555 lf-font-28">可退金额</text> <text class="text-price lf-font-36 lf-color-price">{{orderDetails.price}}</text> </view> <view class="cu-bar" :class="item.type=='image' || item.type == 'textarea'?'flex-img':''" v-for="(item,index) of orderDetails.info" :key="index"> <text class="lf-color-555 lf-font-28">{{index}}</text> <text class="lf-font-28 text-black1" v-if="!item.type">{{item}}</text> <text class="lf-font-28 text-black1" v-if="item.type=='text'">{{item.value}}</text> <text class="lf-font-28 text-black1" v-if="item.type=='radio'">{{item.value}}</text> <text class="lf-font-28 text-black1" v-if="item.type=='checkbox'">{{item.value}}</text> <view v-if="item.type == 'image'" class="lf-m-t-20 lf-m-b-20"> <view class="grid col-3 grid-square flex-sub lf-m-t-30"> <view style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" class="bg-img" v-for="(item2,index2) in item.value" :key="index2" @tap="showImg1(item.value,index2)" :data-url="item.value[index2]"> <image :src="item.value[index2]" mode="aspectFill"></image> </view> </view> </view> <view class="cu-self menu lf-w-100" style="margin-top: 30rpx; position: relative;" v-if="item.type == 'textarea'"> <textarea :cursor-spacing="120" disabled maxlength="300" :adjust-position="true" type="text" style="background-color: #F8F8F8;border-radius: 20rpx;" class="text-left lf-font-28 area-self lf-w-100 lf-p-20" :placeholder="item.value" /> </view> </view> <view class="cu-bar flex justify-between align-center text-center"> <text class="lf-color-555 lf-font-28">订单编号</text> <view> <text class="lf-font-28 text-black1">{{orderDetails.order_no}}</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-r-32 lf-p-b-36"> <view class="lf-font-28 lf-color-black lf-m-b-20 lf-font-bold">退款说明</view> <view v-if="refund_info != ''">{{orderDetails.refund_info.desc}}</view> <view v-else>暂无退款说明</view> </view> </view> <view class="cu-form-group solid-bottom" style="padding-bottom: 20rpx;" v-if="img_list.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 img_list" :key="index"> <image :src="item" @tap="showImg(index)" style="width: 216rpx;height: 216rpx;" mode="aspectFill"></image> </view> </view> </view> <!-- 修饰专用 --> <view style="height: 120rpx; width: 100%;"></view> <view class="btn-bottom solid-top1"> <view class="padding-lr lf-p-t-10 lf-p-b-10 bg-white flex justify-between align-center shadow"> <view class="flex align-center"> <text class="lf-font-24 lf-font-555">实付款：</text> <lf-price :price="orderDetails.price" /> </view> <button class="btn" @tap="submit"> <text class="lf-font-32 text-white">等待审核</text> </button> </view> </view> </view></template>
<script> export default { data() { return { hostImg: '', orderDetails: {}, img_list: [{path: 'https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF'}], // 反馈问题图片
order_id: 1 } }, computed: { isRight(){ return function(val){ return this.$shared.isRight(val); } } }, methods: { // 预览图片
showImg1(url,index) { this.$u.throttle(() => { let goods_banner = url || []; let banners = goods_banner.map(item => item); uni.previewImage({ urls: banners, current: index }) }, 200); }, getOrderDetails() { this.$http(this.API.API_ORDER_DETAILS, { id: this.order_id }).then(res => { this.orderDetails = res.data this.img_list = res.data.refund_info.pictures console.log(res.data) }).catch(err => { setTimeout(() => { this.$toBack() }, 1000) }); }, // 预览图片
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); }, // 点击复制
copy(text) { uni.setClipboardData({ data: text }); }, }, onLoad(e) { this.order_id = e.order_id if (this.order_id) { this.getOrderDetails() } }, }</script>
<style scoped lang="scss"> .flex-img { display: flex!important; align-items: flex-start!important; flex-direction: column!important; margin: 30rpx 0; justify-content: space-between!important; } .btn{ margin: 0; padding: 0; width: 212rpx; height: 82rpx; background-color: #777777; 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>
|
