guosen-ldt-client/pagesA/pages/my-points/accredit.vue

<template>
	<view>
		<view class="add">
			请输入账号添加
		</view>
		
		<view class="card">
			<view class="top">
				<view class="top-left">
					<text class="">选择积分来源</text>
				</view>
				<view class="top-right" style="display: flex;">
					<image  src="@/static/icon/yidong.png" mode="widthFix"></image>
					<view class="flex justify-center align-center">
						<text class="padding-left-10">中国移动</text>
						<text class="cuIcon-right" style="padding: 2rpx 0 0 20rpx;color: #888888;"></text>
					</view>
				</view>
			</view>
			
			<view class="input">
				<u-input :custom-style="customStyle" placeholder="请输入来源平台账号" :height="80" v-model="value" type="text" :border="true" />
				<view class="" style="height: 20rpx;"></view>
				<u-input :height="80" v-model="value" placeholder="请输入验证码"  type="text" :border="true"/>
				
				<view class="margin-top-20">
					<u-checkbox v-model="checked" name="同意">
						<text>已阅读并同意</text>
						<text style="color: #62baff;">授权意向书</text>
					</u-checkbox>
				</view>
				
				<view @click="submit" class="flex justify-center align-center margin-top-50">
					<view class="cu-btn btn-bg-color round" style="padding: 40rpx 120rpx;">
						提交授权
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="support">
			<view class="padding-left-20 padding-bottom-50">
				<text>支持平台</text>
				<text style="color: #888888;padding-left: 10rpx;">(支持5家平台)</text>
			</view>
			
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="flex justify-center align-center">
						<image :src="item.icon" ></image>
					</view>
					<text class="padding-left-10">{{item.name}}</text>
				</view>
				
				<view class="right">
					<view class="flex justify-center align-center">
						<image  src="/pagesA/static/icon/points.png" mode=""></image>
					</view>
					<text class="margin-left-10">100 = ￥10</text>
				</view>
			</view>
		</view>
		<toast ref="toast" ></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				checked:false,
				list:[
					{
						icon:'/pagesA/static/platform/yidong.png',
						name:'中国移动'
					},
					{
						icon:'/pagesA/static/platform/liantong.png',
						name:'中国联通'
					},
					{
						icon:'/pagesA/static/platform/dianxin.png',
						name:'中国电信'
					},
					{
						icon:'/pagesA/static/platform/gongshang.png',
						name:'中国工商银行'
					},
					{
						icon:'/pagesA/static/platform/guangfa.png',
						name:'广发银行'
					}
				]
			}
		},
		methods: {
			submit(){
				this.$refs.toast.info('业务未开通')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add{
		font-size: 32rpx;
		color: #333333;
		font-weight: 800;
		padding: 40rpx 50rpx 20rpx;
	}
	
	.card{
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 15rpx;
		border-radius: 20rpx;
		
		.top{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			
			.top-left{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #333333;
			}
			
			.top-right{
				display: flex;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.input{
			margin:40rpx 10rpx 30rpx;
		}
		
	}
	.support{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
		margin: 20rpx;
		
		.item{
			padding: 30rpx 10rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #EAEAEB;
			
			.left{
				display: flex;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.right{
				display: flex;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	
</style>