cbz/page_shop/pages/good/submit.vue

<template>
	<view class="content">
		<view class="box">
			<block v-if="JSON.stringify(address) == '{}'">
				<view class="hflex acenter jbetween">
					<view class="title">新增收货地址</view>
					<u-icon name="arrow-right" color="#ABABAB" size="11"></u-icon>
				</view>
			</block>
			<block v-else>
				<view class="hflex acenter jbetween">
					<view class="hflex acenter">
						<u-icon name="map-fill" color="#506DFF" size="22"></u-icon>
						<view class="vflex" style="padding-left: 16rpx;">
							<view class="hflex acenter">
								<view class="text_style1" style="padding-right: 20rpx;">{{address.name}}</view>
								<view class="text_style1">{{address.phone}}</view>
							</view>
							<view class="text_style2">{{address.address}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#ABABAB" size="11"></u-icon>
				</view>
			</block>
		</view>
		<block v-for="(item,index) in goodList" :key="index">
			<view class="box">
				<view class="title">{{item.name}}</view>
				<view class="hflex acenter cell">
					<image :src="item.src" mode="aspectFill" class="img"></image>
					<view class="img_right">
						<view class="hflex acenter jbetween">
							<view class="item_name text_hide" style="width: 374rpx;">{{item.good_name}}</view>
							<view class="item_name">￥{{item.price}}</view>
						</view>
						<view class="hflex jbetween" style="padding: 2rpx 0 0;">
							<view class="norm">{{item.norm}}</view>
							<view class="left_text">X{{item.num}}</view>
						</view>
					</view>
				</view>
				<view class="hflex acenter jbetween">
					<view class="title">订单备注</view>
					<u-input v-model="item.remarks" inputAlign="right" border="none" placeholder="建议留言前先与商家沟通确认"></u-input>
				</view>
			</view>
		</block>
		<view class="box">
			<view class="hflex acenter jbetween">
				<view class="left_text">商品金额</view>
				<view class="right_text">￥{{amount}}</view>
			</view>
			<view class="hflex acenter jbetween cell2">
				<view class="left_text">运费</view>
				<view class="right_text">￥{{freight}}</view>
			</view>
			<view class="hflex acenter jend item_bottom">
				<view class="title" style="font-size: 22rpx;">合计：<span class="text_red">￥{{total}}</span></view>
			</view>
			
		</view>
		<view class="box hflex acenter jbetween">
			<view class="hflex acenter">
				<image src="/static/images/shop/wx_pay.png" class="pay_icon"></image>
				<view class="text_style1">微信支付</view>
			</view>
			<u-radio-group>
				<u-radio activeColor="#506DFF"></u-radio>
			</u-radio-group>
		</view>
		<view class="bottom hflex acenter jend">
			<view class="title" style="font-size: 22rpx;">合计：<span class="text_blue">￥{{total}}</span></view>
			<view class="btn">提交订单</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				address: {
					name: '张大成',
					phone: '19876523456',
					address: '河北省 保定区 莲池区 未来石4号楼20221室',
				},
				goodList: [
					{
						name: '江南造船厂',
						src: '/static/images/index/class_img3.png',
						good_name: '扬子柴油发电机3kw/5kw…',
						price: '29.90',
						num: '1',
						remarks: '',
						norm: '规格类型:3kw单相手启动;颜色:黑色;配置:128G',
					}
				],
				amount: '29.90',
				freight: '0.00',
				total: '29.90',
				order_no: '',
			}
		},
		onLoad(options) {
			that = this
			that.order_no = options.order_no
			that.getData()
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.Order/order_info',
					method: 'POST',
					data: {
						order_id: that.order_no,
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background-color: #F4F4F4;
		.box {
			background: #FFFFFF;
			border-radius: 10px;
			margin: 20rpx auto 0;
			width: 690rpx;
			box-sizing: border-box;
			padding: 34rpx 20rpx;
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
			}
			.text_style1 {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
			}
			.text_style2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #888888;
				line-height: 36rpx;
			}
			.cell {
				padding: 20rpx 0 32rpx;
			}
			.cell2 {
				padding: 32rpx 0 20rpx;
			}
			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
			}
			.img_right {
				width:calc(100% - 160rpx);
				padding-left: 20rpx;
				.item_name {
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.norm {
					width: 288rpx;
					// height: 42px;
					background: #F5F5F5;
					border-radius: 12rpx;
					box-sizing: border-box;
					padding: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #888888;
					line-height: 28rpx;
				}
				
			}
			.left_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #888888;
				line-height: 28rpx;
			}
			.right_text {
				font-size: 24rpx;
				font-weight: bold;
				color: #222222;
				line-height: 28rpx;
			}
			.item_bottom {
				padding-top: 22rpx;
				border-top: 1rpx solid #F4F4F4;
			}
			.text_red {
				font-weight: bold;
				color: #EE5850;
			}
			.pay_icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			.check_icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.box:nth-last-child(1) {
			margin-bottom: 186rpx;
		}
		.u-radio-group {
			flex: 0 !important;
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			z-index: 9;
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			padding: 8rpx 50rpx 74rpx;
			.title {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
			}
			.text_blue {
				font-size: 44rpx;
				color: #5270FF;
			}
			.btn{
				margin-left: 16rpx;
				width: 260rpx;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
			}
		}
	}
</style>