133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<view class="shop-item">
|
||
|
|
<view class="item-title" @click="navTo">
|
||
|
|
<view>wxo12335656455532232666</view>
|
||
|
|
<view>待付款</view>
|
||
|
|
</view>
|
||
|
|
<view class="item-body" @click="navTo">
|
||
|
|
<image class="image" src="../../../static/logo.png"></image>
|
||
|
|
<view class="body-content">
|
||
|
|
<view>
|
||
|
|
<view class="title">
|
||
|
|
<view>黄牛肉20kg</view>
|
||
|
|
<view>¥10.00</view>
|
||
|
|
</view>
|
||
|
|
<view class="tips">
|
||
|
|
<view>我不吃牛肉</view>
|
||
|
|
<view>x5</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="all">共5件商品, 总金额 <text>¥20.30</text> </view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="type==1" class="item-btn">
|
||
|
|
<view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">取消订单</up-button></view>
|
||
|
|
<view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">立即支付</up-button></view>
|
||
|
|
</view>
|
||
|
|
<view v-if="type==2||type==0" class="item-btn">
|
||
|
|
<view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">申请售后</up-button></view>
|
||
|
|
<view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">确认收货</up-button></view>
|
||
|
|
<view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">再次购买</up-button></view>
|
||
|
|
</view>
|
||
|
|
<view v-if="type==3" class="item-close">
|
||
|
|
<view class="title">
|
||
|
|
<view class="type">退款申请中</view>
|
||
|
|
<view>等待商家处理</view>
|
||
|
|
</view>
|
||
|
|
<up-icon name="arrow-right"></up-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
type:{
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const navTo = ()=>{
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pagesOrder/detail/detail?type=1'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
.shop-item{
|
||
|
|
width: 710rpx;
|
||
|
|
height: 340rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.item-title{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.item-body{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: 20rpx 0;
|
||
|
|
.image{
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
.body-content{
|
||
|
|
width: 490rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: #989898;
|
||
|
|
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #444;
|
||
|
|
}
|
||
|
|
.tips{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.all{
|
||
|
|
align-self: flex-end;
|
||
|
|
font-size: 26rpx;
|
||
|
|
text{
|
||
|
|
color: #F55726;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-btn{
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
view{
|
||
|
|
width: 80rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-close{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #F6F6F6;
|
||
|
|
padding: 15rpx;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
.type{
|
||
|
|
font-weight: 600;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|