Files
dou_fire/pages/business/bigFive.vue
2024-03-13 15:42:52 +08:00

155 lines
3.5 KiB
Vue

<template>
<view class="create-page">
<block v-if="childrenArr.length > 0">
<view class="create-title">创建新的订单</view>
<view class="create-submit">选择业务类型</view>
<view class="create-from">
<view class="create-type">
<block v-for="(item, index) in childrenArr" :key="index">
<view class="create-type-item" :class="{'active': (item.id == businessId)}" @click="onBusiness(item.id)">
<image class="create-type-icon" :src="item.cover" mode="aspectFill"></image>
<view class="create-type-text">
<view class="title nowrap">{{item.title || '-'}}</view>
<view class="submit nowrap">{{item.subtitle}}</view>
</view>
</view>
</block>
</view>
<view class="create-btn">
<button size="default" @click="onNext()">下一步</button>
</view>
</view>
</block>
<!-- 订单是空的 -->
<view class="order-null" v-else>
<u-empty
mode="order"
icon="http://cdn.uviewui.com/uview/empty/order.png"
text="暂无可创建订单"
>
</u-empty>
</view>
</view>
</template>
<script>
import { bigfiveInit } from '@/apis/interfaces/index.js'
export default {
data() {
return {
childrenArr: [],
businessId : '',
}
},
onLoad() {
},
onShow() {
const parentData = JSON.parse(decodeURIComponent(this.$Route.query.children))
this.childrenArr = parentData
this.businessId = this.childrenArr[0].id
},
methods: {
// 选择业务类型
onBusiness(id){
this.businessId = id
},
// 创建业务单
onNext(){
const synthesisObj = this.childrenArr.find(val => val.id === this.businessId)
// 办理初始接口
bigfiveInit(synthesisObj.id).then(res=>{
this.onNav('businessHandle', { record: encodeURIComponent(JSON.stringify(res)), bigFiveId: synthesisObj.id })
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none',
mask:true,
duration:2000
})
})
},
// 跳转
onNav(name, obj){
let params = obj || {}
this.$Router.push({name, params})
},
}
}
</script>
<style lang="scss">
.create-page{
padding: 50rpx;
box-sizing: border-box;
min-height: 100vh;
overflow: hidden;
.create-title{
text-align: center;
font-weight: bold;
font-size: 44rpx;
}
.create-submit{
text-align: center;
font-size: 30rpx;
color: gray;
padding-top: 10rpx;
}
// 选择业务类型
.create-type{
padding-top: 30rpx;
.create-type-title{
text-align: center;
line-height: 50rpx;
color: gray;
font-size: 30rpx;
}
.create-type-item{
background: #f8f8f8;
border-radius: $radius;
padding: 30rpx;
margin-top: 30rpx;
border:solid 1rpx #f8f8f8;
box-sizing: border-box;
display: flex;
align-items: center;
.create-type-icon{
width: 74rpx;
height: 74rpx;
margin-right: $margin;
}
.create-type-text{
line-height: 40rpx;
.title{
font-size: 30rpx;
}
.submit{
color: gray;
font-size: 26rpx;
}
}
&.active{
border:solid 1rpx $main-color;
}
}
}
// 按钮
.create-btn{
margin-top: 90rpx;
button[size="default"]{
height: 100rpx;
line-height: 100rpx;
background: $main-color;
font-size: 32rpx;
color: white;
font-weight: bold;
&::after{
border: none;
}
}
}
}
</style>