[抖火客户端]

pages/sheet/create-老版.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="content">
+		<view class="create-type">
+			<view class="create-type-title">
+				选择咨询类型
+				<text>点击咨询进行选择咨询类型（信用卡/贷款）</text>
+			</view>
+			<block v-for="(item, index) in businessArr" :key="index">
+				<view class="create-type-item" :class="{'active': item.business_id == businessId}" @click="onBusiness(item.business_id)">
+					<image class="create-type-icon" :src="item.cover_url" mode="aspectFill"></image>
+					<view class="create-type-text">
+						<view class="title nowrap">{{item.title || '-'}}</view>
+						<view class="submit nowrap">{{item.subtitle || '-'}}</view>
+					</view>
+					<image class="create-type-check" :src="item.business_id == businessId ? '/static/icon/Check_active.png' : '/static/icon/Check.png'" mode="aspectFill"></image>
+				</view>
+			</block>
+		</view>
+		<view class="create-btn">
+			<button size="default" @click="onNext()">下一步</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { workIndex } from '@/apis/interfaces/index'
+	
+	export default {
+		data() {
+			return {
+				businessArr: [],
+				businessId : '',
+			};
+		},
+		created() {
+			// 业务类型列表
+			workIndex().then(res => {
+				this.businessArr = res
+				this.businessId	 = res[0].business_id
+			}).catch(err => {
+				uni.showToast({
+					title: err.message,
+					icon : 'none'
+				})
+			})
+		},
+		methods: {
+			// 选择业务类型
+			onBusiness(id){
+				this.businessId = id
+			},
+			
+			// 创建业务单
+			onNext(){
+				let busines = this.businessArr.find(val => val.business_id === this.businessId)
+				this.$Router.replace({
+					name	: 'sheetBasic',
+					params	: {
+						businessTitle	: busines.title,
+						businessId		: busines.business_id,
+					}
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		padding: 50rpx;
+		box-sizing: border-box;
+		height: 100vh;
+		// height: calc(100vh - 44px);
+		background-color: #fcfcfc;
+	}
+	
+	// 选择业务类型
+	.create-type{
+		padding-top: 50rpx;
+		.create-type-title{
+			line-height: 50rpx;
+			text-align: center;
+			font-size: $title-size + 4;
+			margin-bottom: 70rpx;
+			font-weight: 600;
+			text {
+				font-weight: normal;
+				color: gray;
+				display: block;
+				font-size: $title-size-m;
+			}
+		}
+		.create-type-item{
+			background: #ffffff;
+			border-radius: $radius-m;
+			padding: 35rpx 30rpx;
+			margin-top: 30rpx;
+			border:solid 1rpx #f8f8f8;
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			box-shadow: 0 0 5rpx rgba(0, 0, 0, .05);
+			position: relative;
+			.create-type-icon{
+				width: 88rpx;
+				height: 88rpx;
+				margin-right: $margin;
+				background-color: white;
+				border-radius: $radius;
+			}
+			.create-type-text{
+				line-height: 50rpx;
+				.title{
+					font-size: 30rpx;
+				}
+				.submit{
+					color: gray;
+					font-size: 26rpx;
+				}
+			}
+			.create-type-check {
+				width: 38rpx;
+				height: 38rpx;
+				position: absolute;
+				top: 44rpx;
+				right: 30rpx;
+			}
+			&.active{
+				border:solid 1rpx #ff9fb1;
+			}
+		}
+	}
+	// 按钮
+	.create-btn{
+		margin-top: 100rpx;
+		button[size="default"]{
+			height: 90rpx;
+			line-height: 90rpx;
+			background: $mian-color;
+			font-size: 32rpx;
+			color: white;
+			font-weight: bold;
+			&::after{
+				border: none;
+			}
+		}
+	}
+</style>