245 lines
7.9 KiB
Vue
245 lines
7.9 KiB
Vue
<!-- 订单卡片 -->
|
|
<template>
|
|
<view class="jy-order-card">
|
|
<!-- 商家上货看的 -->
|
|
<template v-if="type == 'merchandise_control'">
|
|
<!-- 商品信息 -->
|
|
<JyCommodityInformation class="mb40" :showType="5"></JyCommodityInformation>
|
|
</template>
|
|
<!-- 用户订单 -->
|
|
<template v-if="type == 'user_order'">
|
|
<!-- 卖家头像 -->
|
|
<JyShopInformation :showStatus="true"></JyShopInformation>
|
|
<!-- 商品信息 -->
|
|
<JyCommodityInformation :showType="1"></JyCommodityInformation>
|
|
<!-- 支付价格 -->
|
|
<uni-section>
|
|
<template v-slot:right>
|
|
<view class="df aic">
|
|
<text class="c333 f28">应付：</text>
|
|
<text class="price f20">￥</text>
|
|
<text class="price f32">5.00</text>
|
|
</view>
|
|
</template>
|
|
</uni-section>
|
|
<!-- 特俗情况状态 -->
|
|
<uni-section v-if="orderInfo.order_status_text == 1">
|
|
<template v-slot:right>
|
|
<view class="df aic">
|
|
<text> 支付剩余时间：</text>
|
|
<uni-countdown :show-day="false" :showHour="false" :minute="12" :second="12" />
|
|
</view>
|
|
</template>
|
|
</uni-section>
|
|
</template>
|
|
<!-- 商家订单 -->
|
|
<template v-if="type == 'business_order'">
|
|
<!-- 买家头像 -->
|
|
<JyShopInformation :showStatus="true"></JyShopInformation>
|
|
<!-- 商品信息 -->
|
|
<JyCommodityInformation :showType="1"></JyCommodityInformation>
|
|
<!-- 收款价格 -->
|
|
<uni-section>
|
|
<template v-slot:right>
|
|
<view class="df aic">
|
|
<text class="c333 f28">实收：</text>
|
|
<text class="price f20">￥</text>
|
|
<text class="price f32">5.00</text>
|
|
</view>
|
|
</template>
|
|
</uni-section>
|
|
<!-- 特俗情况状态 -->
|
|
<!-- 已发货 -->
|
|
<template v-if="orderInfo.order_status_text == 4">
|
|
<JyCommodityAddress :shopEdit="false"></JyCommodityAddress>
|
|
<JyCommodityLogisticsCard></JyCommodityLogisticsCard>
|
|
</template>
|
|
<!-- 售后退款 -->
|
|
<template v-if="orderInfo.order_status_text == 5">
|
|
<view class="df mb40">
|
|
<view class="c333 f28 fw600 wsn">收货地址：</view>
|
|
<view class="df fdc">
|
|
<!-- 收获地址 -->
|
|
<view class="c333 f28">收货地址收货地址收货地址收货地址收货地址收货地址收货地址</view>
|
|
<!-- 姓名电话 -->
|
|
<view class="f24 c666">张三 123456789</view>
|
|
</view>
|
|
</view>
|
|
<view class="df mb40">
|
|
<view class="c333 f28 fw600 wsn">收货地址：</view>
|
|
<view class="c333 f28">
|
|
什么什么原因什么什么原因什么什么原因什么什么原因
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</template>
|
|
<!-- 各个情况状态按钮 -->
|
|
<view class="btn-group" v-if="btnG['merchandise_control'].length > 0">
|
|
<view class="btn-for" v-for="(item, index) in btnG[type]" :key="index"
|
|
@click="btnFn[type][item.value](item)">
|
|
<!-- 数组中是否存在某个直 存在true不在false -->
|
|
<view class="btn-item" :class="[item.type, {
|
|
'btn-item4': item.name.length == 4,
|
|
'btn-item3': item.name.length == 3,
|
|
'btn-item2': item.name.length == 2
|
|
}]" v-if="item.status.includes(orderInfo.order_status_text)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<delivery ref="deliveryRef" @savePost="savePost"></delivery>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
// 商品信息
|
|
import JyCommodityInformation from '@/components/public/jy-commodity-information'
|
|
// 店铺信息
|
|
import JyShopInformation from '@/components/public/jy-shop-information'
|
|
// 商品物流卡片
|
|
import JyCommodityLogisticsCard from '@/components/public/jy-commodity-logistics-card'
|
|
// 收货地址
|
|
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
|
|
|
import delivery from './delivery.vue'
|
|
import {
|
|
btnG
|
|
} from './btnGroup.js'
|
|
const deliveryRef = ref(null)
|
|
const popupState = ref(null)
|
|
const savePost = () => {
|
|
console.log('保存');
|
|
}
|
|
const props = defineProps({
|
|
// 订单信息
|
|
orderInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
shop_logo: '',
|
|
shop_name: '123',
|
|
order_status_text: 3,
|
|
}
|
|
},
|
|
},
|
|
// type 类型只能是 user_order | business_order | merchandise_control
|
|
type: {
|
|
type: String,
|
|
required: true,
|
|
}
|
|
|
|
})
|
|
// const type = 'business_order'
|
|
// 初始化 按钮 数据
|
|
const btnGroup = ref(btnG[props.type])
|
|
// 同意管理按钮方法
|
|
const btnFn = {
|
|
merchandise_control: {
|
|
|
|
},
|
|
business_order: {
|
|
// 发货模块
|
|
delivery: () => {
|
|
deliveryRef.value.open();
|
|
}
|
|
},
|
|
user_order: {
|
|
cancel_order: () => {
|
|
// 显示模态弹窗
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要取消订单吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
// 在这里执行取消订单的操作
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
continue_paying: () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要继续支付吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
// 在这里执行继续支付的操作
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
refund: () => {
|
|
// 跳转退款页面
|
|
uni.navigateTo({
|
|
url: '/pages/shop/order/refund/index'
|
|
});
|
|
},
|
|
// 钱还去向
|
|
money_whereabouts: () => {
|
|
uni.navigateTo({
|
|
url: '/pages/shop/order/money_whereabouts/index'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.jy-order-card {
|
|
background-color: #ffffff;
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 25rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.price {
|
|
font-size: 36rpx;
|
|
color: #FF7F37;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
|
|
.btn-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 1282rpx;
|
|
}
|
|
|
|
.btn-item4 {
|
|
padding: 12rpx 24rpx;
|
|
}
|
|
|
|
.btn-item3 {
|
|
padding: 12rpx 36rpx;
|
|
}
|
|
|
|
.btn-item2 {
|
|
padding: 12rpx 48rpx;
|
|
}
|
|
|
|
.black {
|
|
color: #333333;
|
|
border: 2rpx solid #999999;
|
|
}
|
|
|
|
.orange {
|
|
color: #F59957;
|
|
border: 2rpx solid #F59957;
|
|
}
|
|
}
|
|
}
|
|
</style> |