bonus
/
Zlpt_Portal_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单页面等完善

This commit is contained in:
BianLzhaoMin 2024-12-22 22:31:34 +08:00
parent def31db441
commit d31c1e649e
4 changed files with 342 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/TitleTip/index.vue
View File

@ -2,12 +2,18 @@
<!-- 标题 -->
<view class="title-tip">
<view></view>
<view> 订单数据 </view>
<view>{{ title }} </view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
title: {
type: String,
default: '订单数据',
},
})
</script>
<style lang="scss" scoped>

7
src/pages.json
View File

@ -98,6 +98,13 @@
"navigationStyle": "custom"
}
},
// 订单减免
{
"path": "pages/order-reduction/index",
"style": {
"navigationStyle": "custom"
}
},
// 装备列表大厅
{
"path": "pages/goods-list/index",

222
src/pages/order-details/index.vue
View File

@ -9,14 +9,153 @@
<van-tabs v-model:active="activeTabs" swipeable color="#00a288" background="#f0f7f7">
<van-tab v-for="(t, i) in tabList" :title="t.tab_name"> </van-tab>
</van-tabs>
<scroll-view scroll-y style="padding: 10px; box-sizing: border-box">
<view class="order-set" v-for="item in 10" :key="item">
<van-row>
<van-col span="12">
<view class="company-box">
<van-image
fit="cover"
width="1.5rem"
height="1.2rem"
:src="companyImg"
/>
<view class="company-name">
<view> 安徽送变电公司 </view>
<van-image fit="cover" height="0.5rem" :src="companyBg" />
</view>
</view>
</van-col>
<van-col span="10" class="contacts">
<van-tag type="primary">待确认</van-tag>
</van-col>
</van-row>
<view>
<van-row>
<van-col span="24">
<view class="items-info">
<van-image
fit="cover"
height="4rem"
width="4rem"
:src="companyBg"
/>
<view class="info">
<view style="color: #000">
测试装备
<text> 30000 </text>
</view>
<view>
装备编号：1223
<van-tag type="primary">待确认</van-tag>
</view>
<view>装备型号：778</view>
<view> 租赁时长： 2024-9-3 </view>
</view>
</view>
</van-col>
</van-row>
<van-row style="margin-top: 14px">
总金额：
<view style="color: var(--van-submit-bar-price-color)">
<text> ￥ </text>
<text style="font-size: 16px; font-weight: bold"> 8000 </text>
</view>
</van-row>
<van-row style="margin-top: 14px">
<van-button style="margin-right: 6px" round type="success" size="small">
发起退租
</van-button>
<van-button
style="margin-right: 6px"
round
type="success"
size="small"
@click="onReturnRepair"
>
退租检修
</van-button>
<van-button
style="margin-right: 6px"
round
type="success"
size="small"
@click="onReduction"
>
发起减免
</van-button>
</van-row>
</view>
</view>
</scroll-view>
<van-popup
v-model:show="showBottom"
position="bottom"
closeable
close-icon="close"
:style="{ height: '60%' }"
>
<van-form
label-align="top"
style="border-bottom: 1px solid #ccc; margin: 0 10px; padding-bottom: 10px"
>
<van-cell-group inset>
<van-field name="leaseName" label="请先选择检修类型" required />
</van-cell-group>
<view style="padding: 0 20px">
<van-button style="margin-right: 6px" type="success" size="small">
维修
</van-button>
<van-button style="margin-right: 6px" type="success" size="small">
报废
</van-button>
<van-button style="margin-right: 6px" type="success" size="small">
丢失
</van-button>
</view>
</van-form>
<van-cell-group inset style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)">
<van-row>
<van-col span="2"></van-col>
<van-col span="22">
<view class="items-info">
<van-image fit="cover" height="4rem" width="4rem" :src="companyBg" />
<view class="info">
<view style="color: #000">
测试装备
<van-tag type="primary">已退租</van-tag>
</view>
<view> 装备编号：1223 </view>
<view>租赁时长：778</view>
</view>
</view>
</van-col>
</van-row>
<van-row style="padding: 8px 0; border-top: 1px solid #ccc">
<van-col span="12"> 丢失费用：88元 </van-col>
<van-col span="12"> 附件：xxxx </van-col>
</van-row>
</van-cell-group>
</van-popup>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/index.js'
import companyImg from '@/static/goods/company-img.png'
import companyBg from '@/static/goods/company-bg.png'
import cartImg from '@/static/cart/cart.png'
import { onLoad } from '@dcloudio/uni-app'
const showBottom = ref(false)
const activeTabs = ref(0)
const tabList = ref([
{ tab_name: '全部' },
{ tab_name: '待出库' },
@ -30,6 +169,17 @@ const tabList = ref([
const onClickLeft = () => {
uni.navigateBack()
}
// 发起减免
const onReduction = () => {
uni.navigateTo({
url: '/pages/order-reduction/index',
})
}
// 退租检修
const onReturnRepair = () => {
showBottom.value = true
}
onLoad(() => {})
</script>
@ -40,4 +190,76 @@ onLoad(() => {})
box-sizing: border-box;
background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
}
.order-set {
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
.van-row {
padding: 2px 0;
display: flex;
align-items: center;
}
}
.company-box {
display: flex;
align-items: center;
width: 100%;
.company-name {
width: 100%;
display: flex;
flex-direction: column;
view {
padding-left: 6px;
font-size: 13px;
font-weight: bold;
}
.van-image {
width: 100%;
}
}
}
.items-info {
display: flex;
align-items: center;
.info {
font-size: 12px;
flex: 1;
view {
width: 100%;
padding: 1px 0 1px 10px;
font-size: 12px;
color: #6f6f6f;
display: flex;
align-items: center;
justify-content: space-between;
.van-image {
margin: 0 4px;
}
}
& view:first-child {
font-size: 14px;
font-weight: bold;
}
}
}
:deep(.van-field__value) {
display: none;
}
:deep(.van-cell-group--inset) {
padding: 10px;
margin-top: 10px;
}
</style>

106
src/pages/order-reduction/index.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<!-- 订单详情-->
<view class="h5-container order-reduction">
<view
style="
padding: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<view>
<van-icon name="arrow-left" @click="onClickLeft" />
<text style="color: #000"> 发起减免 </text>
</view>
<view>
<van-button style="margin-right: 6px" round type="success" size="small">
取消
</van-button>
<van-button style="margin-right: 6px" round type="success" size="small">
保存
</van-button>
</view>
</view>
<van-cell-group inset>
<view>订单编号：890</view>
<view>装备数量：890</view>
<view>退租时间：890</view>
<view>结算单位：890</view>
</van-cell-group>
<scroll-view scroll-y style="background-color: #fff; padding: 10px; box-sizing: border-box">
<view style="display: flex; align-items: center; justify-content: space-between">
<view>
<TitleTip :title="`租赁费用减免`" />
</view>
<van-button style="margin-right: 6px" round type="success" size="small">
新增
</van-button>
</view>
<view> 设备1 </view>
<van-form label-width="100px">
<van-cell-group inset>
<van-field
name="leaseName"
placeholder="请选择关联装备"
label="关联装备"
required
:rules="[{ required: true, message: '请输入需求名称' }]"
/>
<van-field name="areaName" label="租赁单价" required disabled />
<van-field name="address" label="租期" required disabled />
<van-field
name="person"
placeholder="请选择实际租期"
label="实际租期"
required
:rules="[{ required: true, message: '请选择实际租期' }]"
/>
<van-field name="pattern" label="减免天数" required disabled />
<van-field label="实际租赁天数" disabled />
<van-field label="减免费用" disabled />
</van-cell-group>
</van-form>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/index.js'
import TitleTip from '@/components/TitleTip'
import { onLoad } from '@dcloudio/uni-app'
const onClickLeft = () => {
uni.navigateBack()
}
onLoad(() => {})
</script>
<style lang="scss" scoped>
.order-reduction {
padding: 10px;
color: #333;
box-sizing: border-box;
background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
}
.van-cell-group view {
padding: 6px 10px;
}
:deep(.van-cell-group--inset) {
margin: 0;
margin-bottom: 10px;
}
</style>