<template> <view class="pd-main backcor9"> <!-- 售后处理完成 --> <view class="po-ra pd-main backcolorfff marb10 border-8r" @click="goOrderDetail"> <view class="font18 marb10 fcor666 pd10"> 售后处理完成 </view> <view class="po-ra"> <scroll-view class="settle-goods" scroll-x="true" > <view class="settle-con"> <view class="settle-img" v-for="item in goodsData.images"> <image class="st-img" :src="item" mode="aspectFill"></image> </view> </view> </scroll-view> <view class="fix-soon fcor666"> <view class="fix-price"> <text class="fontwig6 fcor333 marb5"> ¥215</text> <text>共{{goodsData.images.length}}件 <!-- <text class="icon-ymt to-right font14 fcor666"></text> --> </text> </view> </view> </view> <view class="oneMoreTime"> <view class="oneMore btn"> 再来一单 </view> </view> </view> <!-- 已取消 --> <view class="po-ra pd-main backcolorfff marb10 border-8r"> <view class="font18 marb10 fcor666 pd10"> 已取消 </view> <view class="settle-con"> <view class="settle-img" > <image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image> </view> <view class="settle-msg"> <view class="settle-title marb5"> <text>云南高山荷兰豆160g</text> <text class="font14 fcor666">共一件</text> </view> <view class="settle-title"> <text>¥2.99</text> <text class="font14 fcor666">×1</text> </view> </view> </view> <view class="oneMoreTime"> <view class="deleOrder btn"> 删除订单 </view> <view class="oneMore btn"> 再来一单 </view> </view> </view> <!-- 待支付 --> <view class="po-ra pd-main backcolorfff marb10 border-8r"> <view class="font18 marb10 fcor666 pd10"> 待支付 </view> <view class="font14"> 订单将于<text class="fcorred"> 16:04 </text>分钟后自动取消 </view> <view class="settle-con"> <view class="settle-img" > <image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image> </view> <view class="settle-msg"> <view class="settle-title marb5"> <text>云南高山荷兰豆160g</text> <text class="font14 fcor666">共一件</text> </view> <view class="settle-title"> <text>¥2.99</text> <text class="font14 fcor666">×1</text> </view> </view> </view> <view class="oneMoreTime"> <view class="nowPay btn"> 立即支付 </view> </view> </view> <!-- <detailPopup ref="detailPopup"></detailPopup> --> </view> </template> <script> // import detailPopup from '@/physical-merchants/settleAccounts/detail-popup/detail-popup.vue' export default { data(){ return{ goodsData:{ "images": ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"], }, } }, components:{ // detailPopup }, methods:{ goOrderDetail(){ uni.navigateTo({ // url:"@/physical-merchants/classify/order/orderDetail" }) } } } </script> <style lang="scss" scoped> .po-ra{ position: relative; } .settle-goods{ width: auto; } .pd10{ padding: 0 10px; } .order-top-title{ height: 30px; line-height: 30px; } // 再来一单 .oneMoreTime { text-align: right; .btn{ margin: 10px 10px 10px 0; display: inline-block; width: 100px; height: 30px; line-height: 30px; border-radius: 15px; text-align: center; } // 再来一单 .oneMore { color: #FA253D; border:1px solid #FA253D; } // 立即支付 .nowPay{ color: #ffffff; background-color:#FA253D; } // 删除订单 .deleOrder{ color: #666666; border:1px solid #666666; } } .settle-con{ display: flex; justify-content: flex-start; align-items: center; .settle-img{ font-size: 0; margin-left: 10px; .st-img{ width: 82px; height: 82px; } } .settle-msg{ flex: 1; padding: 0 10px; .settle-title{ display: flex; justify-content: space-between; align-items: center; } } } .fix-soon{ position: absolute; right: 0; top:0; width: 82px ; height: 82px; // line-height: 82px; opacity: 0.8; background-color: #ffffff; text-align: center; } // .fix-price{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; &>text{ width: 100%; } } </style>