yanzong_qianduan/pages/news3/seasoningCondimentsRecord.vue

<template>
<view>
	<view class="selectContent" style="border:none;background-color: #fff;">
		<!-- <view class="left">
			物流费用
		</view>
		<view class="right">
			<view class="price">
				<text style="font-size: 26upx;">¥</text>
				<text>288</text>
			</view>
			<u-icon name="arrow-right" color="#C3C3C3" size="28"></u-icon>
		</view> -->
		<u-field @click="showAction" v-model="form.mode" 
		:disabled="true" label="发货模式" placeholder="请选择"
		right-icon="arrow-right"
		>
		</u-field>
		<u-action-sheet  :list="modeList" v-model="modeShow"></u-action-sheet>
		<u-field
			v-model="form.company"
			label="发货公司"
			placeholder="请输入"
		>
		</u-field>
		<u-field
			v-model="form.name"
			label="发货人"
			placeholder="请输入"
		>
		</u-field>
		<u-field
			v-model="form.phone"
			label="发货人电话"
			placeholder="请输入"
		>
		</u-field>
		<u-field @click="showgoodsAction" v-model="form.kuaidi"
		:disabled="true" label="快递" placeholder="请选择"
		right-icon="arrow-right"
		>
		</u-field>
		<u-action-sheet  :list="kuaidiList" v-model="goodsShow"></u-action-sheet>
		<view class="wuliu">
			<u-field
				style="flex: 1;padding:30upx 0 30upx 30upx"
				v-model="codeNum"
				label="物流单号"
				placeholder="请填写物流单号"
			>
			</u-field>
			<view class="getWuliu">
				查看物流
			</view>
		</view>
		<view class="recordList">
			<view class="recordItem">
				<view class="recordTitle">
					转账记录
				</view>
				<view class="picList">
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="recordItem">
				<view class="recordTitle">
					聊天记录
				</view>
				<view class="picList">
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
					<image src="/static/news3/filter.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<view class="footerBtn">
			保存
		</view>
	</view>
	
	
</view>
</template>

<script>
export default{
	data(){
		return{
			form:{
				mode:'',
				company:'',
				name:'',
				phone:'',
				kuaidi:'',
				
			},
			modeList:[
				{
					text: '店内现货',
				}
			],
			kuaidiList:[
				{
					text: '顺丰快递',
				}
			],
			modeShow:false,
			goodsShow:false,
			// newPrice:null,
			
			
			// wuliu:'',
			// codeNum:''
		}
	},
	methods:{
		showAction(){
			this.modeShow = true;
		},
		showgoodsAction(){
			this.goodsShow = true;
		},
	}
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100%;
	background-color: #F7F8FA;
	
}
.selectContent{
	border-top:1px solid transparent;
	margin-top:6upx;
	padding-bottom: 100upx;
}
::v-deep .u-border-bottom:after{
	border:none;
}
::v-deep .u-field{
	padding:30upx;
}
::v-deep .uni-input-wrapper{
	text-align: right;
}
.wuliu{
	display: flex;
	align-items: center;
	.getWuliu{
		width: 130upx;
		height: 56upx;
		background: #FFFFFF;
		border-radius: 19px 19px 19px 19px;
		opacity: 1;
		border: 1px solid #F55349;
	
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #F55349;
		line-height: 52upx;
		text-align: center;
		margin-right:30upx;
		
	}
}
.recordList{
	padding:30upx;
	.recordItem{
		.recordTitle{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #353535;
			
		}
		.picList{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin:12upx 0;
			text-align: center;
			image{
				width: 200upx;
				height: 160upx;
				
			}
		}
	}
}
.footerBtn{
	width: 80%;
	
	height: 100rpx;
	background: #FFAAA4;
	border-radius: 6px 6px 6px 6px;
	opacity: 1;
	margin:0 auto;
	margin-top:40upx;
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 100upx;
	
}

</style>