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.
 
 
 
 
high-mini/pages/classify/order/order.vue

230 lines
4.8 KiB

<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 '@/pages/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:"@/pages/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>