high-mini/pages/settleAccounts/settleAccounts.vue

<template>
	<view class="pd-main backcor9 settleAccounts">
		<!-- 地址 -->
		<view class="select-address backcolorfff paading10  border-8r  border-bt mart10 " @click="goAddress">
			<view class="address-left font16">
				<view class=" " >
					重庆市渝中区不是的聚钓具偶家
				</view>
				<view class="color999 mart3" >
					<text class="address-name">明明</text>
					<text class="address-phone margle10">13563256324</text>
				</view>
			</view>
			<view class="icon-ymt to-right font14"></view>	
		</view>
		
		<!-- 选购的商品信息 -->
		<view class=" backcolorfff paading10  border-8r  border-bt mart10 " >
			<!-- 及时达 -->
			<!-- <view class="container-price select-address">
				<view class="beizhu font16 ">
					即时达:
				</view>
				<view class="beizhu font16 ">
					<text class="fcorred">尽快送达,预计11:58送达</text><text class="icon-ymt to-right font14"></text>
				</view>
			</view> -->
			
			
			<!-- 当有多个商品时 -->
			<view class="po-ra" v-if="isMoreThanOne"  @click="showPopup('goods')">
				<view class="po-ra">
					<scroll-view class="settle-goods" scroll-x="true"  >
						<view class="settle-con">
							<view class="settle-img" v-for="item in goodsData.images">
								<image class="st-img" :src="item" mode="aspectFill"></image>
							</view>
							
						</view>
						
					</scroll-view>
					<view class="fix-soon fcor666">
						共{{goodsData.images.length}}件<text class="icon-ymt to-right font14 fcor666"></text>
					</view>
				</view>
				
			</view>
			
			
			<!-- 当只有一个商品时 -->
			<view  v-if="!isMoreThanOne">
				
				<view class="settle-con">
					<view class="settle-img" >
						<image class="st-img" :src="goodsData.images[0]" mode="aspectFill"></image>
					</view>
					<view class="settle-msg">
						<view class="settle-title marb5">
							<text>云南高山荷兰豆160g</text>
							<text class="font14 fcor666">共一件</text>
						</view>
						<view class="settle-title">
							<text>¥2.99</text>
							<text class="font14 fcor666">×1</text>
						</view>
					</view>
					
				</view>
					
				
			</view>	
			
		</view>
		
		
		<!-- 金额费用 -->
		<view class=" backcolorfff paading10  border-8r  border-bt mart10 " >
			<!-- 商品金额 -->
			<view class="container-price select-address border-bt">
				<view class="address-left ">
					商品金额
				</view>
				<view class="to-right fontwig6">
					¥22.97
				</view>
			</view>
			<!-- 运费 -->
			<view class="container-price select-address border-bt">
				<view class="address-left ">
					运费<text class="icon-ymt question font16 paddleft5 fcor666" @click="showPopup('freight')"></text>
				</view>
				<view class="to-right fontwig6">
					¥6
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="container-price select-address border-bt">
				<view class="address-left ">
					优惠券
				</view>
				<view @click="showPopup('coupon')" class="icon-ymt to-right font14">
					
				</view>
			</view>	
			<!-- 积分抵现 -->
			<view class="container-price select-address border-bt">
				<view class="address-left ">
					<text  @click="showPopup('integral')">积分抵现
						<text class="icon-ymt question font16 paddleft5 fcor666"></text>
					</text>
					<view class="font14 fcor666">当前积分63,满500可用</view> 
				</view>
				<view class="fontwig6 font14 fcor666">
					暂无可用
				</view>
				<!-- <view class="icon-ymt to-right font14">	
				</view> -->
			</view>	
				
			<!-- 总结算 -->
			<view class="container-price select-address ">
				<view class="address-left ">
					
				</view>
				<view class=" font14">
					小计:<text class="fontwig6 font18 paddleft5">¥262.2</text>
				</view>
			</view>	
		</view>
		<!-- 备注 -->
		<view class=" backcolorfff paading10  border-8r  border-bt mart10 " >
			<view class="container-price select-address">
				<view class="beizhu font16">
					备注:
				</view>
				<view class="beizhu font14 fcor666">
					{{noteValue.length}}/40
				</view>
			</view>
			<view class="width100" >
				 <textarea class="border-8r backcor9 paading10 note" @blur="noteBlur" @input="noteInput" :focus="true"   :disable-default-padding="false" v-model="noteValue" maxlength="40" placeholder="请输入备注信息" ></textarea>
				
			</view>
				
		</view>
		
		
		<!-- 底部结算按钮 -->
		<view class="tool-contain">
			<view class="adressConfirm">
				送至: {{'金科西城大院 5栋1714'}}
			</view>
			<view class="tool-right  backcolorfff">
				<view class="tool-jiesuan marRight10 ">
					合计:<text class="fcorred">¥{{100}}</text> 
				</view>
				<view class="jiesuan-btn fcorfff"  @click.stop="settleAccount">
					去支付
				</view>
			</view>
		</view>
		
		
		<detailPopup ref="detailPopup"></detailPopup>
	</view>
</template>

<script>
	import detailPopup from '@/pages/settleAccounts/detail-popup/detail-popup.vue'
	export default {
		data(){
			return{
				noteValue:'这是备注',
				goodsData:{
					"images": ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"],
				},
				isMoreThanOne:false,
			}
		},
		components:{
			detailPopup
		},
		methods:{
			goAddress(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			
			// 失去焦点
			noteBlur(){
				console.log(12)
			},
			noteInput(){
				console.log(12)
			},
			
			//goods货品， freight运费,integral积分,coupon优惠券
			showPopup(str){
				
				this.$refs.detailPopup.show(str);
			},
			// 去支付按钮
			settleAccount(){
				
				// uni.navigateTo({
				// 	url:"/pages/classify/order/pay"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>

// 地址
 .select-address{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
 }
 
 .border-bt{
	 border-bottom: 1px solid #f6f6f6;
 }
 
 .container-price{
	 padding: 10px;
	 font-size: 16px;
 }
 
 // 
 .settleAccounts{
	
	 box-sizing: border-box;
	 padding-bottom: 110px;
 }
 
 //商品图片
 .po-ra{
	 position: relative;
 }
 .settle-goods{
	 width: auto; 
 }
 .settle-con{
 		
 		 display: flex;
 		 justify-content: flex-start;
 		 align-items: center;
 		
 		 .settle-img{
 			  font-size: 0;
 			 margin-left: 10px;
 			 .st-img{
 				 width: 82px;
 				 height: 82px;
 			 }
 		 }
 		 
		 .settle-msg{
			 flex: 1;
			 padding: 0 10px;
			 .settle-title{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
			 }
		 }
 		 
 		 
 }
 .fix-soon{
	 			 position: absolute;
	 			 right: 0;
				 top:0;
	 			width: 82px ;
	 			height: 82px;
	 			line-height: 82px;
	 			opacity: 0.8;
	 			background-color: #ffffff;
	 			text-align: center;
	 }
 
 //备注
 .note{
	 width: auto;
 }
 
 // 底部结算按钮
 .tool-contain{
	 position: fixed;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 z-index: 10;
 }
 
.tool-right{
 	flex: 1;
 	display: flex;
 	justify-content: space-between;
	padding: 10px;
 	align-items: center;
	
 	.tool-jiesuan{
 		
 	}
 	.jiesuan-btn{
 		width: 200rpx;
 		height:40px;
 		line-height: 40px;
 		text-align: center;
 		border-radius: 20px;
 		background: linear-gradient(to right,#FFCC1E,#FF8F19);
 	}
 }
 // 底部地址确认
 .adressConfirm{
	 height: 20px;
	 padding: 10px;
	 line-height: 20px;
	 background-color:#FEFBDA;
 }
 
 
</style>