355 lines
8.7 KiB
Vue
355 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}">
|
|||
|
|
<view class="flex-row justify-between section_2 pos">
|
|||
|
|
|
|||
|
|
<view @click="isSelectedState(0)">
|
|||
|
|
<text class="font" :style="{ color: color[0] }"> 全部 </text>
|
|||
|
|
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[0]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view @click="isSelectedState(1)">
|
|||
|
|
<text class="font" :style="{ color: color[1] }">待支付</text>
|
|||
|
|
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[1]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view @click="isSelectedState(2)">
|
|||
|
|
<text class="font" :style="{ color: color[2] }">待提货</text>
|
|||
|
|
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[2]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view @click="isSelectedState(3)">
|
|||
|
|
<text class="font" :style="{ color: color[3] }">租赁中</text>
|
|||
|
|
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[3]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view @click="isSelectedState(4)">
|
|||
|
|
<text class="font" :style="{ color: color[4] }">已完成</text>
|
|||
|
|
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[4]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="flex-col pos_2">
|
|||
|
|
<view class="flex-col list-item mt-15" v-for="(item, index) in items" :key="index">
|
|||
|
|
<view class="flex-row justify-between group">
|
|||
|
|
<text class="font_3">泠珑水月阁</text>
|
|||
|
|
<view class="flex-row items-center">
|
|||
|
|
<text class="font_4 text_2">00:45</text>
|
|||
|
|
<text class="ml-4 font_5 text_3">等待买家付款</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row items-center group view">
|
|||
|
|
<text class="font_6">订单编号：</text>
|
|||
|
|
<text class="font_7 text_4">E20241005095840091406189</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="divider"></view>
|
|||
|
|
<view class="flex-row justify-between items-end group_2">
|
|||
|
|
<view class="flex-row">
|
|||
|
|
<image
|
|||
|
|
class="image"
|
|||
|
|
src="https://ide.code.fun/api/image?token=67dd57af4ae84d00122a84d1&name=4e1283e4d0bf9a8e9fe23602be4fa0f7.png"
|
|||
|
|
/>
|
|||
|
|
<view class="flex-col items-start group_3 ml-13">
|
|||
|
|
<text class="font_8">汉服—曲裾系列</text>
|
|||
|
|
<text class="font_10 text_6 mt-59">￥138.00</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col items-center group_4">
|
|||
|
|
<image
|
|||
|
|
class="image_2"
|
|||
|
|
:src="clothesRentUrl + '/clothesRentOrderList/bkg.png'"
|
|||
|
|
/>
|
|||
|
|
<text class="font_9 text_5 mt-11">提货地址</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row justify-between items-baseline group view_2">
|
|||
|
|
<text class="font_6 text_7">租赁天数</text>
|
|||
|
|
<text class="font_11 text_8">X3</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row justify-end items-baseline group_5">
|
|||
|
|
<text class="font_9 text_9">实付款：</text>
|
|||
|
|
<text class="font_12">￥138.00</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row justify-center group_6">
|
|||
|
|
<view class="flex-col justify-start items-center text-wrapper">
|
|||
|
|
<text class="font_13 text_10">联系客服</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ml-10 flex-col justify-start items-center text-wrapper">
|
|||
|
|
<text class="font_13">取消订单</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ml-10 flex-col justify-start items-center text-wrapper_2">
|
|||
|
|
<text class="font_14 text_11">去付款</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {ref} from 'vue'
|
|||
|
|
import { clothesRentUrl } from '../../../common/globalImagesUrl';
|
|||
|
|
const items = ref([null, null, null, null])
|
|||
|
|
const isShowUnderLine = ref([true, false, false, false, false])
|
|||
|
|
const color = ref(new Array(5).fill('#323232'))
|
|||
|
|
const point = ref(0)
|
|||
|
|
const bkgUrl = ref(clothesRentUrl + '/clothesRentOrderList/bkg.png')
|
|||
|
|
|
|||
|
|
const isSelectedState = async (val) => {
|
|||
|
|
if (point.value === val) return
|
|||
|
|
point.value = val
|
|||
|
|
for (var i = 0; i < 5; i ++ ) {
|
|||
|
|
if (i === val) {
|
|||
|
|
isShowUnderLine.value[i] = true
|
|||
|
|
color.value[i] = '#e79ea1'
|
|||
|
|
} else {
|
|||
|
|
isShowUnderLine.value[i] = false
|
|||
|
|
color.value[i] = '#323232'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// await getMyOrder()
|
|||
|
|
// if (point.value !== 0) {
|
|||
|
|
// orderList.value = orderList.value.filter(item => item.orderStatus === orderStatusList[point.value])
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.mt-15 {
|
|||
|
|
margin-top: 28.13rpx;
|
|||
|
|
}
|
|||
|
|
.ml-13 {
|
|||
|
|
margin-left: 24.38rpx;
|
|||
|
|
}
|
|||
|
|
.mt-59 {
|
|||
|
|
margin-top: 110.63rpx;
|
|||
|
|
}
|
|||
|
|
.mt-11 {
|
|||
|
|
margin-top: 20.63rpx;
|
|||
|
|
}
|
|||
|
|
.page {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
.section_2 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx 41.25rpx 0;
|
|||
|
|
background-color: #ebe7e4;
|
|||
|
|
}
|
|||
|
|
.pos {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
.font {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 28.24rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.font_2 {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 28.84rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
line-height: 27.43rpx;
|
|||
|
|
}
|
|||
|
|
.pos_2 {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 22.5rpx;
|
|||
|
|
right: 24.38rpx;
|
|||
|
|
top: 108.75rpx;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
.list-item {
|
|||
|
|
padding: 18.75rpx 15rpx 0;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 18.75rpx;
|
|||
|
|
}
|
|||
|
|
.list-item:first-child {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
.group {
|
|||
|
|
padding: 0 11.25rpx;
|
|||
|
|
}
|
|||
|
|
.font_3 {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 28.01rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.font_4 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 18.79rpx;
|
|||
|
|
color: #ffaaa5;
|
|||
|
|
}
|
|||
|
|
.text_2 {
|
|||
|
|
font-size: 28.13rpx;
|
|||
|
|
}
|
|||
|
|
.font_5 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 25.84rpx;
|
|||
|
|
color: #ffaaa5;
|
|||
|
|
}
|
|||
|
|
.text_3 {
|
|||
|
|
line-height: 25.74rpx;
|
|||
|
|
}
|
|||
|
|
.view {
|
|||
|
|
margin-top: 18.75rpx;
|
|||
|
|
}
|
|||
|
|
.font_6 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 25.84rpx;
|
|||
|
|
color: #818181;
|
|||
|
|
}
|
|||
|
|
.font_7 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 18.79rpx;
|
|||
|
|
color: #818181;
|
|||
|
|
}
|
|||
|
|
.text_4 {
|
|||
|
|
line-height: 17.53rpx;
|
|||
|
|
}
|
|||
|
|
.divider {
|
|||
|
|
margin-top: 18.75rpx;
|
|||
|
|
background-color: #dbdbdb;
|
|||
|
|
height: 1.88rpx;
|
|||
|
|
}
|
|||
|
|
.group_2 {
|
|||
|
|
margin-top: 26.25rpx;
|
|||
|
|
padding: 0 9.38rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.image {
|
|||
|
|
border-radius: 9.38rpx;
|
|||
|
|
width: 148.13rpx;
|
|||
|
|
height: 165rpx;
|
|||
|
|
}
|
|||
|
|
.group_3 {
|
|||
|
|
margin-bottom: 3.75rpx;
|
|||
|
|
}
|
|||
|
|
.font_8 {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 29.18rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.font_10 {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 18.79rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.text_6 {
|
|||
|
|
margin-left: 7.5rpx;
|
|||
|
|
line-height: 20.04rpx;
|
|||
|
|
}
|
|||
|
|
.group_4 {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0rpx;
|
|||
|
|
}
|
|||
|
|
.image_2 {
|
|||
|
|
width: 46.88rpx;
|
|||
|
|
height: 46.88rpx;
|
|||
|
|
}
|
|||
|
|
.font_9 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 25.84rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.text_5 {
|
|||
|
|
line-height: 25.22rpx;
|
|||
|
|
}
|
|||
|
|
.view_2 {
|
|||
|
|
margin-top: 22.5rpx;
|
|||
|
|
}
|
|||
|
|
.text_7 {
|
|||
|
|
font-size: 28.13rpx;
|
|||
|
|
line-height: 27.02rpx;
|
|||
|
|
}
|
|||
|
|
.font_11 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 18.79rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.text_8 {
|
|||
|
|
font-size: 28.13rpx;
|
|||
|
|
}
|
|||
|
|
.group_5 {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
.text_9 {
|
|||
|
|
font-size: 28.13rpx;
|
|||
|
|
line-height: 26.7rpx;
|
|||
|
|
}
|
|||
|
|
.font_12 {
|
|||
|
|
font-size: 33.75rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 22.54rpx;
|
|||
|
|
color: #c35c5d;
|
|||
|
|
}
|
|||
|
|
.group_6 {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
padding: 26.25rpx 0rpx 26.25rpx 180rpx;
|
|||
|
|
border-top: solid 1.88rpx #dbdbdb;
|
|||
|
|
}
|
|||
|
|
.font_13 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 25.84rpx;
|
|||
|
|
color: #e79ea1;
|
|||
|
|
}
|
|||
|
|
.text_10 {
|
|||
|
|
line-height: 25.54rpx;
|
|||
|
|
}
|
|||
|
|
.text-wrapper {
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 75rpx;
|
|||
|
|
width: 153.75rpx;
|
|||
|
|
height: 56.25rpx;
|
|||
|
|
border-left: solid 1.88rpx #e79ea1;
|
|||
|
|
border-right: solid 1.88rpx #e79ea1;
|
|||
|
|
border-top: solid 1.88rpx #e79ea1;
|
|||
|
|
border-bottom: solid 1.88rpx #e79ea1;
|
|||
|
|
}
|
|||
|
|
.text-wrapper_2 {
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
background-color: #e79ea1;
|
|||
|
|
border-radius: 75rpx;
|
|||
|
|
width: 153.75rpx;
|
|||
|
|
height: 56.25rpx;
|
|||
|
|
}
|
|||
|
|
.font_14 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 25.84rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.text_11 {
|
|||
|
|
line-height: 24rpx;
|
|||
|
|
}
|
|||
|
|
@import url(../../../common/css/global.css);
|
|||
|
|
</style>
|