yanzong_qianduan/pages/news3/seasoningCondimentsRecord.vue

<template>
	<view>
		<view class="selectContent" style="border:none;background-color: #fff;">
			<picker @change="changeMode" mode="selector" range-key="text" :value="index" :range="modeList">
				<u-field v-model="form.setGoodsMode" :disabled="true" label="发货模式" placeholder="请选择"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<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>
			<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
				<u-field v-model="form.logisticsName" :disabled="true" label="物流公司" placeholder="请选择物流公司"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<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="form.logisticsNo" label="物流单号"
					placeholder="请填写物流单号">
				</u-field>
				<view class="getWuliu" @click="onLogistics">
					查看物流
				</view>
			</view>
			<view class="recordList">
				<view class="recordItem">
					<view class="recordTitle">
						转账记录
					</view>
					<view class="picList">
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
					</view>
				</view>
				<view class="recordItem">
					<view class="recordTitle">
						聊天记录
					</view>
					<view class="picList">
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
						<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="footerBtn">
				保存
			</view>
		</view>


	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				form: {
					setGoodsMode: '',
					company: '',
					name: '',
					phone: '',
					kuaidi: '',
					logisticsName: '',
					logisticsNo: '',
					logisticsId:'',
				},
				modeList: [{
					text: '店内现货',
				}],
				expressList: [],
				modeShow: false,
				goodsShow: false,
			}
		},
		onReady() {
			this.getExpressAll()
		},
		methods: {
			changeMode(e) {
				this.form.setGoodsMode = this.modeList[e.detail.value].text;
			},
			// 选择物流
			changeOption(e) {
				this.form.logisticsName = this.expressList[e.detail.value].express_name;
				this.form.logisticsId = this.expressList[e.detail.value].express_id
			},
			/**
			 * 物流
			 */
			async getExpressAll() {
				let {
					status,
					message,
					data
				} = await newFunApi.expressAll();
				if (status == 200) {
					this.expressList = data.list;
				}
			},
			onLogistics() {
				uni.navigateTo({
					url: "/pages/news3/LogisticsDetails?logisticsNum=" + this.form.logisticsNo
				})
			},

		}
	}
</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;
	}

	::v-deep .u-label {
		flex: auto !important
	}

	.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: 86%;
		height: 88upx;
		background: #FF5050;
		border-radius: 36px 36px 36px 36px;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88upx;
		text-align: center;
		margin: 96upx auto 0 auto;

	}
</style>