caimei-applets-crm/components/cm-module/orderDetails/orderPopup.vue

<template name="orderPopup">
	<!--促销活动弹窗提示-->
	<view class="orderPopup">
		<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
			<view class="tui-popup-box clearfix">
				<template v-if="popupType == 1">
					<view class="tui-popup-title">修改收货人信息:</view>
					<view class="tui-scrollview-box">
						<view class="text-input b-b">
							<input class="input" type="text" v-model="receiverInfo.receiverName" placeholder="收货人姓名" placeholder-class="placeholder" />
						</view>
						<view class="text-input b-b">
							<input class="input" type="number" maxlength="11" v-model="receiverInfo.receiverPhone"   placeholder="手机号码" placeholder-class="placeholder" />
						</view>					
						<view class="text-input b-b">
							<input class="input" type="number" maxlength="11" v-model="receiverInfo.receiverPostCode"   placeholder="邮政编码" placeholder-class="placeholder" />
						</view>
						<view class="text-input b-b" @click="showMulLinkageThreePicker">
							<text class="input">
								{{receiverInfo.receiverProvince}}{{receiverInfo.receiverCity}}{{receiverInfo.receiverRegion}}
							</text>		
							<text class="iconfont icon-xiayibu"></text>
						</view>
						<view class="text-textarea b-b"> 
							<view class="textarea show" v-if="isShowInput">{{receiverInfo.receiverDetailAddress ? receiverInfo.receiverDetailAddress :'详细地址：如道路、门牌号、小区、楼房号、单元室等'}}</view>
							<textarea 	v-else
										class="textarea" 
										type="text" 
										v-model="receiverInfo.receiverDetailAddress" 
										placeholder="详细地址：如道路、门牌号、小区、楼房号、单元室等" 
										placeholder-class="placeholder"
										maxlength="50"
										@input="onTextareaInput"
										:class="isShowInput ? '':''"
							/>
						</view>
					</view>	
				</template>	
				<template v-if="popupType == 2">
					<view class="tui-popup-title">修改费用信息:</view>
					<view class="tui-scrollview-box">
						<view class="information-view">
							<view class="view-num time">
								<view class="view-num-label">商品合计：</view>
								<view class="view-num-text">
									{{orderInfo.totalAmount}}
								</view>
							</view>
							<view class="view-num time">
								<view class="view-num-label">优惠券：</view>
								<view class="view-num-text">
									{{orderInfo.couponAmount}}
								</view>
							</view>
						</view>
						<view class="information-view">
							<view class="view-num time">
								<view class="view-num-label">积分抵扣：</view>
								<view class="view-num-text">
									{{orderInfo.integrationAmount}}
								</view>
							</view>
							<view class="view-num time">
								<view class="view-num-label">活动优惠：</view>
								<view class="view-num-text">
									{{orderInfo.promotionAmount}}
								</view>
							</view>
						</view>
						<view class="information-view">
							<view class="view-num time">
								<view class="view-num-label">运费：</view>
								<view class="view-num-text">
									<input class="input" type="number" maxlength="11" v-model="moneyInfo.freightAmount"   placeholder-class="placeholder" />
								</view>
							</view>
							<view class="view-num time">
								<view class="view-num-label">折扣金额：</view>
								<view class="view-num-text">
									<input class="input" type="number" maxlength="11" v-model="moneyInfo.discountAmount"   placeholder-class="placeholder" />
								</view>
							</view>
						</view>
						<view class="information-view">
							<view class="view-num time">
								<view class="view-num-label">订单总金额：</view>
								<view class="view-num-text">
									{{orderInfo.totalAmount+moneyInfo.freightAmount}}
								</view>
							</view>
							<view class="view-num time">
								<view class="view-num-label">应付款金额：</view>
								<view class="view-num-text">
									{{orderInfo.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-if="popupType == 3">
					<view class="tui-popup-title">订单备注:</view>
					<view class="tui-scrollview-box">
						<view class="text-textarea b-b">
							<textarea 	class="textarea" 
										type="text" 
										v-model="markInfo.note" 
										placeholder="备注内容" 
										placeholder-class="placeholder"
										maxlength="100"
							/>
						</view>
					</view>
				</template>
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button cancel"  @click="hidePopup()">取消</view>
						<view class="tui-button confirm"  @click="updataConfirm(popupType)">确定</view>
					</view>
				</view>
			</view>	
		</tui-bottom-popup>
		<mpvue-city-picker  ref="mpvueCityPicker"
						    :pickerValueDefault="cityPickerValueDefault"
							@onCancel="onCancel" 
							@onConfirm="onConfirm">
		</mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
	import { mapState,mapMutations } from 'vuex'
	const defaultReceiverInfo = {
	    orderId:null,
	    receiverName:null,
	    receiverPhone:null,
	    receiverPostCode:null,
	    receiverDetailAddress:null,
	    receiverProvince:null,
	    receiverCity:null,
	    receiverRegion:null,
	    status:null
	};
	export default{
		name:'orderPopup',
		components:{
			mpvueCityPicker
		},
		props:{
			orderInfo:{
				type:Object,
			},
			popupType:{
				type:Number,
			},
		},
		data() {
			return{
				isIphoneX:this.$store.state.isIphoneX,
				receiverInfo:Object.assign({},defaultReceiverInfo),
				cityPickerValueDefault: [0, 0, 1],
				isShowInput:false,
				popupShow:true,
				moneyInfo:{
					orderId:null, 
					freightAmount:0, 
					discountAmount:0,
					status:null,
				},
				 markInfo:{note:null},

			}
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
			formatAddress(order) {
				let str = order.receiverProvince;
				if (order.receiverCity != null) {
				  str += "  " + order.receiverCity;
				}
				str += "  " + order.receiverRegion;
				str += "  " + order.receiverDetailAddress;
				return str;
			},
		},
		created() {
			this.receiverInfo={
			  orderId:this.orderInfo.id,
			  receiverName:this.orderInfo.receiverName,
			  receiverPhone:this.orderInfo.receiverPhone,
			  receiverPostCode:this.orderInfo.receiverPostCode,
			  receiverDetailAddress:this.orderInfo.receiverDetailAddress,
			  receiverProvince:this.orderInfo.receiverProvince,
			  receiverCity:this.orderInfo.receiverCity,
			  receiverRegion:this.orderInfo.receiverRegion,
			  status:this.orderInfo.status
			}
			this.moneyInfo.orderId=this.orderInfo.id;
			this.moneyInfo.freightAmount=this.orderInfo.freightAmount;
			this.moneyInfo.discountAmount=this.orderInfo.discountAmount;
			this.moneyInfo.status=this.orderInfo.status;
		},
		computed: {
			...mapState(['hasLogin','isWxAuthorize'])
		},
		methods:{
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.isShowInput = true
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.isShowInput = false
				this.receiverInfo.receiverProvince=e.province;
				this.receiverInfo.receiverCity=e.city;
				this.receiverInfo.receiverRegion=e.region;
			},	
			onCancel(e) {
				console.log(e)
			},
			hidePopup(){
				this.popupShow = false
				this.$parent.isPopupShow = false
			},
			
			updataConfirm(type){
				switch(this.popupType){
					case 1:
						this.$emit('popupTypeConfirm',this.receiverInfo)
						this.popupShow = false
						break;
					case 2:
						this.$emit('popupTypeConfirm',this.moneyInfo)
						this.popupShow = false
						break;
					case 3:
						 let params = new URLSearchParams();
							 params.append("id",this.markInfo.id);
							 params.append("note",this.markInfo.note);
							 params.append("status",this.order.status);
						this.$emit('popupTypeConfirm',params)	 
						this.popupShow = false
						break;
				}
			},
		},
		
	}
</script>

<style lang="scss">	
	.tui-flex-1 {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-popup-title{
		line-height: 80rpx;
		font-size: $font-size-28;
		color: $text-color;
		padding: 0 24rpx;
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 220rpx;
		padding:0 24rpx 0 24rpx;
	}
	.text-textarea{
		width: 100%;
		height: 216rpx;
		padding: 24rpx;
		background: #F7F7F7;
		.textarea{
			width: 100%;
			height: 100%;
			font-size: $font-size-28;
			color: $text-color;
			z-index: 1;
		}
		.textarea.hide{
			opacity: 0;
		}
		.textarea.show{
			color: #999999;
		}
	}
	.tui-scrollview-box{
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		.information-view{
			height: 60rpx;
			line-height: 60rpx;
			font-size: $font-size-28;
			color: $text-color;
			margin: 4rpx 0;
			display: flex;
			.view-num{
				flex: 1;
				color: $text-color;
				text-align: left;
				.view-num-label{
					text-align: left;
					float: left;
					color: $text-color;
				}
				.view-num-text{
					float: left;
					text-align: left;
					color: #999999;
					.input{
						width: 150rpx;
						height: 60rpx;
						border: 1px solid #EBEBEB;
						border-radius: 4rpx;
						padding: 0 15rpx;
					}
				}
			}
			.view-num.ord{
				color: $color-system;
				text-align: left;
				flex:3;
				font-weight: bold;
			}
			.view-num.time{
				color: #999999;
			}
			.bold{
				font-weight: bold;
			}
			.red{
				color: #FF2A2A;
			}
			.view-type{
				float: right;
				text-align: right;
				color: #FF2A2A;
				flex: 2;
			}
			.clipboard{
				width: 84rpx;
				height: 36rpx;
				background: #EBEBEB;
				text-align: center;
				font-size: $font-size-24;
				color: #999999;
				border-radius: 18rpx;
				line-height: 36rpx;
				display: inline-block;
				margin-left: 42rpx;
			}
		}
	}
	
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button{
			width: 40%;
			flex: 1;
			height: 70rpx;
			background: $btn-confirm;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-26;
			border-radius: 8rpx;
			margin: 0 5%;
			&.cancel{
				background-color:#f6f6f6;
				color: #333333;
			}
			&.confirm{
				background-color:#4688fa;
				color: #FFFFFF;
			}
		}
	}
</style>