CommunityApp/pagesM/pages/order_confirm.vue

<template>
	<view class="pageBg">
		<block v-if="emptyType == 0">
			<view class="top">
				<view class="tip" v-if="false">
					<image src="http://139.9.103.171:1888/img/image/tip_icon.png"></image>
					<text class="one_line_ellipsis">温馨提示：营业点营业时间 (08:00-22:00) 内3公里有货门店30内3公里有货门店30内3公里有货门店30</text>
				</view>
				<view class="switch_methods" v-if="false">
					<view class="switch_methods_box">
						<view :class="['item', methodsIndex == 0 ? 'active' : '']" @tap="methodsIndex = 0">送货上门</view>
						<view :class="['item', methodsIndex == 1 ? 'active' : '']" @tap="methodsIndex = 1">门店自提</view>
					</view>
				</view>
				<view class="address_Info">
					<!--
					<view class="mention_address_box" v-if="methodsIndex == 1">
						<image class="store_icon" src="http://139.9.103.171:1888/img/image/store_icon.png"></image>
						<view class="info_list">
							<view class="item">
								<text class="store_text">自提点：</text>
								<text class="store_name">
									广州店
									<text class="store_distance">距离40.5km</text>
								</text>
							</view>
							<view class="item">
								<text class="contact_phone_text">联系电话：</text>
								<text class="contact_phone">
									123333333
									<text class="contact">(有货)拨打电话</text>
								</text>
							</view>
							<view class="item">
								<text class="address_text">具体地址：</text>
								<text class="address">广东省广州市天河区车陂660号河区车陂660号河区车陂660号</text>
							</view>
							<view class="item">
								<text class="open_time_text">营业时间：</text>
								<text class="opten_time">08:00-22:00 请在营业时间内上门退货</text>
							</view>
						</view>
						<image class="arrow" src="http://139.9.103.171:1888/img/image/arrow.png"></image>
					</view>
					-->
					<block v-if="methodsIndex == 0">
						<view class="address_info_box" v-if="receiverAddress && receiverAddress.consignee" @tap="selectAddress">
							<image class="member_icon" src="http://139.9.103.171:1888/img/image/member_icon.png"></image>
							<view class="info_list">
								<view class="item">
									<text class="contact_text">联系人：</text>
									<text class="contact_name">{{ receiverAddress.consignee }}</text>
								</view>
								<view class="item">
									<text class="contact_phone_text">联系电话：</text>
									<text class="contact_phone">{{ receiverAddress.phone }}</text>
								</view>
								<view class="item">
									<text class="address_text">收货地址：</text>
									<text class="address">{{ receiverAddress.areaName + receiverAddress.address }}</text>
								</view>
							</view>
							<image class="arrow" src="http://139.9.103.171:1888/img/image/arrow.png"></image>
						</view>
						<view class="no_address" v-else @tap="selectAddress">
							<view class="no_address_box">
								<image src="http://139.9.103.171:1888/img/image/addr_add.png"></image>
								<text>暂无地址，去添加</text>
							</view>
							<image class="arrow" src="http://139.9.103.171:1888/img/image/arrow.png"></image>
						</view>
					</block>

					<view class="address_line"><image src="http://139.9.103.171:1888/img/image/address_line.png"></image></view>
					<view class="mention_info" v-if="methodsIndex == 1">
						<view class="input_box">
							<text class="input_text">提货人</text>
							<input
								:value="mentionMember"
								@input="inputMentionMember"
								placeholder="请输入提货人的姓名（必填）"
								placeholder-class="placeholder_class"
								class="input_value"
							/>
						</view>
						<view class="input_box">
							<text class="input_text">手机号</text>
							<input
								:value="mentionMobilephone"
								type="number"
								maxlength="11"
								@input="inputMentionMobilePhone"
								placeholder="请输入提货人的手机号码（必填）"
								placeholder-class="placeholder_class"
								class="input_value"
							/>
						</view>
					</view>
				</view>
			</view>
			
			<!--
			<view class="order_goods_list">
				<view class="goods_item" v-for="(item, index) in orderGoodsList" :key="index">
					<image class="goods_image" mode="aspectFill" :src="item.thumbnail"></image>
					<view class="goods_info">
						<text class="goods_name">{{ item.name }}</text>
						<text class="goods_sku_str">{{ item.specificationsDesc }}</text>
						<text class="goods_price">￥{{ item.skus[0].price }}</text>
					</view>
					<text class="goods_count">x {{ item.skus[0].quantity }}</text>
				</view>
			</view>
			-->
			
			<view v-if="orders != null" class="order_goods_list" v-for="(order, i) in orders" :key="i">
				<view class="businessLayout" v-if="orders.length > 1">
					<image class="logo" mode="aspectFill" :src="order.logo"></image>
					<text class="name">{{ order.name }}</text>
				</view>
				<view class="goods_item" v-for="(item, j) in order.orderItemGroups" :key="j">
					<image class="goods_image" mode="aspectFill" :src="item.thumbnail"></image>
					<view class="goods_info">
						<text class="goods_name">{{ item.name }}</text>
						<text class="goods_sku_str">{{ item.specificationsDesc }}</text>
						<text class="goods_price">￥{{ item.skus[0].price }}</text>
					</view>
					<text class="goods_count">x {{ item.skus[0].quantity }}</text>
				</view>
				<view class="item_info_box" v-if="order.promotionDiscount > 0">
					<text class="type_name2">{{order.promotionNames}}</text>
					<text class="amt">￥{{order.promotionDiscount}}</text>
				</view>
				<view class="item_info_box" v-if="order.shippingMethods.length > 0">
					<text class="type_name">物流方式</text>
					<block v-if="order.shippingMethods.length > 0" v-for="(shippingMethod, k) in order.shippingMethods" :key="k">
						<view class="shippingMethod" @tap="selectShippingMethod(i, k)" v-if="shippingMethod.isSelected">
							<text class="name">{{ shippingMethod.name }}</text>
							<!-- <text class="amt" v-if="shippingMethod.freight == 0">包邮</text>
							<text class="amt" v-else>￥{{ shippingMethod.freight }}</text> -->
						</view>
					</block>
					<text v-else class="type_value">该区域不支持发货</text>
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
				<view v-if="isAgent" class="item_info_box">
					<view style="display: flex;align-items: center;">
						<view class="type_name">自提点</view>
						<view v-if="organizationInfo" style="font-size: 28upx;margin-left: 20upx;">
							<view>{{organizationInfo.organizeName}}-{{organizationInfo.receiver.areaName}}{{organizationInfo.receiver.address}}</view>
							<view style="font-size: 20upx;color: #999999;margin-top: 10upx;">商品到货时需在首页的快速取货处查看取件码</view>
						</view>
						<view v-if="!organizationInfo" @tap="jumpNearby" style="font-size: 28upx;margin-left: 20upx;">
							前往加入附近团
						</view>
					</view>
					<switch  :checked="selectAgent" :disabled="disabled" color="#E42F2F" style="transform:scale(0.7)" @tap="tapSwitch" @change="switchChange" />
				</view>
				
			</view>

			<view class="msg_box">
				<view class="input_box">
					<text class="input_text">留言</text>
					<input :value="msgValue" @input="inputMsg" placeholder="点击给商家留言" placeholder-class="placeholder_class" class="input_value" />
				</view>
			</view>

			<view class="order_pay_info">
				<view class="item_info_box">
					<text class="type_name">商品总额</text>
					<text class="type_value">￥{{ price }}</text>
				</view>
				<view class="item_info_box" v-if="false">
					<view class="type_name">
						<text>会员折扣</text>
						<view class="member_level">铂金卡</view>
					</view>
					<text class="type_value">-￥{{ couponDiscount }}</text>
				</view>
				<view class="item_info_box" v-if="false">
					<view class="type_name"><text>促销折扣</text></view>
					<text class="type_value">-￥{{ couponDiscount }}</text>
				</view>
				<view class="item_info_box" @tap="selectCoupon">
					<text class="type_name">优惠券</text>
					<text v-if="couponDiscount > 0" class="type_value">已优惠￥{{ couponDiscount }}</text>
					<text v-else class="type_value">无优惠</text>
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
				<view v-if="promotionDiscountTotal > 0" class="item_info_box">
					<!-- <view v-if="promotionDiscountTotal > 0" class="item_info_box" @tap="selectCoupon"> -->
					<text class="type_name">促销优惠</text>
					<text class="type_value">已优惠￥{{ promotionDiscountTotal }}</text>
					<!-- <image src="http://139.9.103.171:1888/img/image/arrow.png"></image> -->
				</view>
				<view class="item_info_box">
					<text class="type_name">运费</text>
					<text v-if="preOrderInfo.freight > 0" class="type_value">￥{{ preOrderInfo.freight }}</text>
					<text v-else class="type_red_value">包邮</text>
				</view>
			</view>

			<view class="pay_money">
				<view class="item_info_box">
					<text class="type_name">实付金额</text>
					<text class="type_value">￥{{ amountPayableCount }}</text>
				</view>
			</view>

			<view class="bottomHeight" :style="footSafe"></view>
			<view class="bottom" :style="footSafe">
				<view class="bottomLeft">
					<text class="money_text">
						合计：
						<text class="money">
							<text class="unit">￥</text>
							{{ amountPayableCount }}
						</text>
					</text>
				</view>
				<view class="bottomRight"><view class="orderConfirm" @tap="orderConfirm">提交订单</view></view>
			</view>

			<uni-popup ref="popup" type="bottom">
				<view class="methods_box" v-if="orderIndex >= 0 && shippingMethodIndex >= 0">
					<view class="methods">
						<view class="titleLayout">
							<text class="title">选择物流方式</text>
							<icon class="cancel" size="20" type="cancel" @tap="shippingMethod"></icon>
						</view>
						<view class="methods_list">
							<view class="methods_item" v-for="(shippingMethod, index) in orders[orderIndex].shippingMethods" :key="index" @tap="selectShippingMethod2(orderIndex, shippingMethod.id)">
								<!-- <text>{{shippingMethod.name}}<text class="freight" v-if="shippingMethod.freight == 0">(包邮)</text><text class="freight" v-else>(￥{{shippingMethod.freight}})</text></text> -->
								<text>{{shippingMethod.name}}</text>
								<image :src="shippingMethod.isSelected ? 'http://139.9.103.171:1888/img/image/http://139.9.103.171:1888/img/image/png' : 'http://139.9.103.171:1888/img/image/no_selected_icon.png'" ></image>
							</view>
						</view>
						<!-- <view class="btn_confirm" @tap="selectMethodsConfirm">确定</view> -->
					</view>
				</view>
			</uni-popup>
		</block>
		<DtEmpty :type="emptyType" />
	</view>
</template>
<script>
import DtGoodsList from '../comps/dt_goods_list.vue';
import DtNoData from '../comps/dt_no_data.vue';
import DtNoMore from '../comps/dt_no_more.vue';
import DtEmpty from '../comps/dt_empty.vue';
import uniPopup from "../comps/uni-popup/uni-popup.vue"
export default {
	components: {
		DtGoodsList,
		DtNoData,
		DtNoMore,
		DtEmpty,
		uniPopup
	},
	data() {
		return {
			space: '\xa0\xa0',
			methodsIndex: 0,

			selectMethodsIndex: 0,

			showSelectMethods: false,

			mentionMember: '',
			mentionMobilephone: '',

			msgValue: '',

			params: '', //立即购买 传进来的参数
			cartItemIds: '', //购物车 购物车Ids
			dtos: '', //购物车 重新计算费用参数
			flag: -1,

			isCalculate: false,
			couponCodes: [], // 优惠券列表
			preOrderInfo: {},
			shippingMethodId: 1, //邮寄方式
			orderGoodsList: [],
			amountPayableCount: 0, //实付总额
			price: 0, //商品总额
			couponDiscount: 0, // 优惠券优惠金额
			promotionDiscountTotal: 0, //促销优惠
			selectCodes: [], // 跳转选择优惠券页面获取的优惠券
			// chooseCodes:[],   // 选中的优惠券
			promotionDiscount: 0, //促销金额
			freight: 0, //运费

			receiverAddress: {}, //收货地址
			isCanDelivery: true, //收货地址是否支持收货
			deliveryNames: '', //不支持收货的地址
			orders: [],
			orderIndex: -1,
			shippingMethodIndex: -1,
			isAgent:false,//是否显示代理选项
			selectAgent:false, //是否选择代理地址
			disabled:true, //禁止switch
			organizationInfo:null, //团长信息
			memberId:null
		};
	},
	
	computed: {
		footSafe() {
			return `padding-bottom:${this.safeAreaBottom}px`;
		}
	},
	
	methods: {
		async getOrganizationInfo(){
			let resp = await this.$api.getOrganizationInfo({
			  memberId: this.memberId
			});
			if(resp.receiverId){
				this.disabled = false;
				this.organizationInfo = resp;
			}
			
		},
		jumpNearby(){
			if(this.disabled){
				uni.navigateTo({
					url: '/pages/nearby_team?jumpType=1'
				});
			}
		},
		tapSwitch(e){
			if(this.disabled){
				this.$dialog.alert({
					content:'您未加入附近团',
					confirmText: '去添加',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/nearby_team?jumpType=1'
							});
						}
					}
				})
			}
		},
		switchChange(e){
			this.selectAgent = e.detail.value;
		},
		shippingMethod(){
			this.$refs.popup.close();
		},
		selectShippingMethod(orderIndex, shippingMethodIndex){
			this.orderIndex = orderIndex;
			this.shippingMethodIndex = shippingMethodIndex;
			this.$refs.popup.open();
		},
		selectShippingMethod2(orderIndex, id){
			console.error("======id>>"+id);
			this.orderIndex = -1;
			this.shippingMethodIndex = -1;
			this.shippingMethodId = id;
			this.$refs.popup.close();
			if(this.orders[orderIndex].shippingMethods.length == 1) return;
			for(let i = 0; i < this.orders[orderIndex].shippingMethods.length; i++){
				this.orders[orderIndex].shippingMethods[i].isSelected = this.orders[orderIndex].shippingMethods[i].id == id;
			}
			this.isCalculate = true;
			this.onShowPage(); 
		},
		inputMentionMember(e) {
			this.mentionMember = e.detail.value;
		},
		inputMentionMobilePhone(e) {
			this.mentionMobilephone = e.detail.value;
		},
		inputMsg(e) {
			this.msgValue = e.detail.value;
			if (this.dtos && this.dtos.length > 0) {
				this.dtos[0].memo = this.msgValue;
			}
		},

		selectMethodsConfirm() {
			this.methodsIndex = this.selectMethodsIndex;
			this.showSelectMethods = false;
		},
		//选择地址
		selectAddress() {
			uni.navigateTo({
				url: '/pagesM/pages/address_list?isFromOrder=1'
			});
		},

		//选择优惠券
		selectCoupon() {
			uni.navigateTo({
				url: '/pagesM/pages/coupon_select?flag=' + this.flag
			});
		},

		//立即购买预加载订单
		async preloadBuy() {
			try {
				let data = JSON.parse(this.params);
				data._isShowLoading = true;
				data._isReject = true;

				let resp = await this.$api.preloadBuy(data);
				this.preOrderInfo = resp;
				this.emptyType = 0;
				this.handleOrder(resp);
			} catch (err) {
				this.emptyType = 2;
				this.$dialog.alert({
					content: err.errmsg || '暂无数据~'
				});
			}
		},

		//购物车预加载订单
		async preload() {
			try {
				let data = JSON.parse(this.cartItemIds);
				data._isShowLoading = true;
				data._isReject = true;

				let resp = await this.$api.preload(data);
				this.preOrderInfo = resp;
				this.emptyType = 0;
				this.handleOrder(resp);
			} catch (err) {
				this.emptyType = 2;

				this.$dialog.alert({
					content: err.errmsg || '暂无数据~'
				});
			}
		},

		//立即购买-重新计算费用
		async calculateBuy() {
			let { skuId, quantity } = JSON.parse(this.params);
			let data = {};
			data.codes = this.selectCodes;
			if(this.selectAgent){//判断是否选择代理地址
				data.receiverId = this.organizationInfo.receiverId;
			}else{
				data.receiverId = this.receiverAddress.id;
			}
			data.paymentMethodId = 1;
			data.shippingMethodId = this.shippingMethodId;
			data.balance = 0;
			data.skuId = skuId;
			data.quantity = quantity;
			data.memo = this.msgValue;
			// data.invoiceTitle="";
			// data.invoiceTaxNumber=""
			console.log(data);
			let resp = await this.$api.calculateBuy(data);
			console.log(295, resp);
			this.preOrderInfo = resp;
			this.handleOrder(resp);
		},

		//购物车-重新计算费用
		async cartCalculate() {
			console.log(302);
			let data = {};
			if(this.selectAgent){//判断是否选择代理地址
				data.receiverId = this.organizationInfo.receiverId;
			}else{
				data.receiverId = this.receiverAddress.id;
			}
			data.paymentMethodId = 1;
			data.balance = 0;
			data.codes = this.selectCodes;
			this.dtos[0].shippingMethodId = this.shippingMethodId;
			this.dtos[0].codes = this.selectCodes;
			data.dtos = this.dtos;

			let resp = await this.$api.cartCalculate(data);
			this.preOrderInfo = resp;
			this.handleOrder(resp);
		},

		handleOrder(resp) {
			if (resp.defaultReceiver) {
				this.receiverAddress = resp.defaultReceiver;
				let isCanDelivery = true;
				let names = '';
				this.deliveryNames = '';
				if (resp.orders != null && resp.orders.length > 0) {
					for (let item of resp.orders) {
						if (item.isCanDelivery == false) {
							isCanDelivery = false;
							if (item.orderItemGroups != null || item.orderItemGroups.length > 0) {
								for (let orderItem of item.orderItemGroups) {
									names += (names.length > 0 ? ',' : '') + orderItem.name;
								}
							}
						}
					}
				}
				this.deliveryNames = names;
				this.isCanDelivery = isCanDelivery;
				if (!this.isCanDelivery) {
					let msg = names.length > 0 ? names + '等' : '部分';
					uni.showToast({
						icon: 'none',
						title: msg + '商品不支持配送 ' + this.receiverAddress.areaName + ' 地区'
					});
				}
			}

			this.orders = resp.orders || [];
			let aimStoreId = this.$global.server.storeId;
			this.promotionDiscountTotal = 0;
			this.orders.forEach((order, i) => {
				if (aimStoreId == order.storeId) {
					if (order.promotionDiscount != null && order.promotionDiscount > 0) {
						this.promotionDiscountTotal += order.promotionDiscount;
					}
					let couponCodes = order.couponCodes || [];
					let selectCodes = [];
					couponCodes.forEach(coupon => {
						if (coupon.isSelected && !coupon.isUsed) {
							// 选中而未使用的
							selectCodes.push(coupon.code);
						}
					});
					this.couponCodes = couponCodes.slice(0);
					this.selectCodes = selectCodes;

					let orderItemGroups = order.orderItemGroups || [];
					let orderItemList = [];
					orderItemGroups.forEach(orderItem => {
						orderItem.skus.forEach(sku => {
							let oItem = Object.assign({}, orderItem);
							oItem.skuDetail = sku;
							oItem.specificationsDesc = sku.specifications.join('　');
							orderItemList.push(oItem);
						});
					});
					this.orderGoodsList = orderItemList;

					this.shippingMethodId = order.shippingMethodId || 1;
					this.amountPayableCount = order.amountPayable;
					this.price = order.price;
					this.couponDiscount = order.couponDiscount;
					this.promotionDiscount = order.promotionDiscount;
					this.freight = order.freight;
				}
			});
			//判断是否是团长
			if(resp.agentReceivers&&resp.agentReceivers.length>0){
				resp.agentReceivers.forEach((order, i) => {
					if (aimStoreId == order.storeId) {
						if (!order.isTeamLeader) {
							this.isAgent = true;
						}
					}
				});
			}
		},

		//提交订单
		async orderConfirm() {
			if(this.selectAgent&&!this.organizationInfo){
				this.$dialog.toast('请选择地址');
				return;
			}else if(!this.selectAgent&&!this.receiverAddress.id){
				this.$dialog.toast('请选择地址');
				return;
			}
			if (!this.isCanDelivery) {
				let msg = this.deliveryNames.length > 0 ? this.deliveryNames + '等' : '部分';
				uni.showToast({
					icon: 'none',
					title: msg + '商品不支持配送 ' + this.receiverAddress.areaName + ' 地区'
				});
				return;
			}
			if(this.orders == null || this.orders.length <= 0) return;
			for (let order of this.orders) {
				if(order.shippingMethods == null || order.shippingMethods.length <= 0){
					uni.showToast({icon: 'none', title: '商品不支持配送 '});
					return;
				}
			}
			
			let tmplIds = ['hk0klJ6E88dHqnFgqXfndbUwZebarjLy5C6OYRL0Hgg'];//订单状态提醒
			uni.requestSubscribeMessage({
				tmplIds: tmplIds,
				success(res) {Log.e('小程序订阅消息-success', res);},
				fail (error) {Log.e('小程序订阅消息-fail', error);},
			});
			
			if (this.flag == this.$global.orderFlag.normal) {
				let { skuId, quantity } = JSON.parse(this.params);
				let data = {};
				data.codes = this.selectCodes;
				if(this.selectAgent){//判断是否选择代理地址
					data.receiverId = this.organizationInfo.receiverId;
				}else{
					data.receiverId = this.receiverAddress.id;
				}
				data.paymentMethodId = 1;
				data.shippingMethodId = this.shippingMethodId;
				data.balance = 0;
				data.skuId = skuId;
				data.quantity = quantity;
				data.memo = this.msgValue;
				let res = await this.$api.createBuy(data);
				this.$util.refreshPage(['pages/good_des', 'pages/mine']);
				if(this.selectAgent){
					this.$dialog.alert({
						content:'取货时请到首页查看取货码',
						confirmText: '确定',
						showCancel: false,
						success: (resource) => {
							if (resource.confirm) {
								uni.redirectTo({
									url: '/pagesM/pages/order_pay?orderSns=' + JSON.stringify(res.sns) + '&payFlag=' + this.$global.payFlag.normal
								});
							}
						}
					})
				}else{
					uni.redirectTo({
						url: '/pagesM/pages/order_pay?orderSns=' + JSON.stringify(res.sns) + '&payFlag=' + this.$global.payFlag.normal
					});
				}
				
				
			} else if (this.flag == this.$global.orderFlag.card) {
				let data = {};
				if(this.selectAgent){//判断是否选择代理地址
					data.receiverId = this.organizationInfo.receiverId;
				}else{
					data.receiverId = this.receiverAddress.id;
				}
				data.paymentMethodId = 1;
				data.balance = 0;
				data.codes = [];
				this.dtos[0].shippingMethodId = this.shippingMethodId;
				this.dtos[0].codes = this.selectCodes;
				data.dtos = this.dtos;
				let res = await this.$api.preorderCreate(data);
				this.$util.refreshPage(['/pagesM/pages/good_des', 'pages/wode/wode', '/pagesM/pages/shop_car']);
				
				if(this.selectAgent){
					this.$dialog.alert({
						content:'取货时请到首页查看取货码',
						confirmText: '确定',
						showCancel: false,
						success: (resource) => {
							if (resource.confirm) {
								uni.redirectTo({
									url: '/pagesM/pages/order_pay?orderSns=' + JSON.stringify(res.sns) + '&payFlag=' + this.$global.payFlag.normal
								});
							}
						}
					})
				}else{
					uni.redirectTo({
						url: '/pagesM/pages/order_pay?orderSns=' + JSON.stringify(res.sns) + '&payFlag=' + this.$global.payFlag.normal
					});
				}
				// this.$util.refreshPage(['pages/shop_car'])
			}
		},

		onShowPage() {
			if (this.isCalculate) {
				if (this.flag == this.$global.orderFlag.normal) {
					this.calculateBuy();
				} else if (this.flag == this.$global.orderFlag.card) {
					this.cartCalculate();
				}
				this.isCalculate = false;
			}
		},

		onLoadPage(options) {
			this.memberId = this.$auth.getMemberId();
			this.getOrganizationInfo();
			this.showSelectMethods = false;
			this.flag = options.flag;
			if (options.flag && options.flag == this.$global.orderFlag.normal) {
				this.params = options.params;
				this.preloadBuy();
			}
			if (options.flag && options.flag == this.$global.orderFlag.card) {
				this.cartItemIds = options.cartItemIds;
				this.dtos = JSON.parse(options.dtos);
				this.preload();
			}
		}
	},

	onShow() {
		this.onShowPage();
	}
};
</script>

<style lang="scss" scoped>
.top {
	background: #fff;
	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #fffdd9;
		height: 50upx;
		padding: 0 30upx;
		image {
			width: 25upx;
			height: 25upx;
			margin-right: 10upx;
		}
		text {
			flex: 1;
			color: #a72038;
			font-size: 22upx;
		}
	}
	.switch_methods {
		padding: 30upx;
		.active {
			background: #e5e5e5;
		}
		.switch_methods_box {
			border: 1upx solid #e5e5e5;
			display: flex;
			flex-direction: row;
			align-items: center;
			.item {
				width: 50%;
				font-size: 30upx;
				color: #333333;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
			}
		}
	}

	.address_Info {
		.address_info_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30upx;
			// padding-bottom: 30upx;
			position: relative;
			.member_icon {
				width: 30upx;
				height: 30upx;
				position: absolute;
				top: 36upx;
				left: 30upx;
			}
			.info_list {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 50upx;
				.item {
					display: flex;
					flex-direction: row;
					font-size: 26upx;
					color: #666666;
					margin-bottom: 10upx;
					text:last-child {
						flex: 1;
					}
					.address {
						line-height: 40upx;
					}
				}
				.item:first-child {
					font-size: 28upx;
					color: #333;
				}
				.item:last-child {
					margin-bottom: 0;
				}
			}
			.arrow {
				width: 10upx;
				height: 18upx;
				transform: scale(1.2);
				margin-left: 20upx;
			}
		}
		.mention_address_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30upx;
			padding-bottom: 30upx;
			position: relative;
			.store_icon {
				width: 30upx;
				height: 30upx;
				position: absolute;
				top: 6upx;
				left: 30upx;
			}
			.info_list {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 50upx;
				.item {
					display: flex;
					flex-direction: row;
					font-size: 26upx;
					color: #666666;
					margin-bottom: 10upx;
					text:last-child {
						flex: 1;
					}
					.store_name,
					.contact_phone {
						display: flex;
						flex-direction: row;
					}
					.store_distance,
					.contact {
						text-decoration: underline;
						color: #f3993a;
						font-size: 18upx;
						margin-left: 10upx;
						letter-spacing: 1upx;
						padding: 10upx;
					}
				}
				.item:first-child {
					font-size: 28upx;
					color: #333;
				}
				.item:last-child {
					margin-bottom: 0;
				}
			}
			.arrow {
				width: 10upx;
				height: 18upx;
				transform: scale(1.2);
				margin-left: 20upx;
			}
		}
		.address_line {
			width: 100%;
			height: 8upx;
			display: flex;
			flex-direction: row;
			image {
				height: 8upx;
				width: 100%;
			}
		}
		.no_address {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30upx;
			.no_address_box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 35upx;
					height: 35upx;
					padding-bottom: 20upx;
				}
				text {
					font-size: 28upx;
					color: rgb(153, 153, 153);
				}
			}
			.arrow {
				width: 10upx;
				height: 18upx;
				transform: scale(1.2);
				margin-left: 20upx;
			}
		}
		.input_box:last-child {
			border-top: none;
		}
	}
}
.input_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 30upx;
	align-items: center;
	box-sizing: border-box;
	border-top: 1upx solid #e5e5e5;
	.input_text {
		color: #666666;
		font-size: 28upx;
	}
	.input_value {
		font-size: 28upx;
		flex: 1;
		text-align: right;
		margin-left: 40upx;
	}
	.placeholder_class {
		color: #999999;
	}
}
.item_info_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 30upx;
	align-items: center;
	box-sizing: border-box;
	border-top: 1upx solid #e5e5e5;
	.type_name {
		color: #666666;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 0;
		flex-shrink: 0;
		.member_level {
			padding: 4upx 10upx;
			background: #ffc600;
			border-radius: 4upx;
			color: #fff;
			font-size: 22upx;
			margin-left: 10upx;
		}
	}
	.type_name2 {
		color: #ff9d00;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.shippingMethod {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		margin-left: 20upx;
		.name {
			font-size: 28upx;
			flex-grow: 1;
			max-width: 400upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.amt {
		color: #ff0000;
		font-size: 28upx;
		margin-left: 20upx;
		flex-grow: 0;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.type_value {
		color: #333;
		font-size: 28upx;
		flex: 1;
		text-align: right;
		margin-left: 40upx;
	}
	.type_red_value {
		color: #ff0000;
		font-size: 28upx;
		flex: 1;
		text-align: right;
		margin-left: 40upx;
	}
	image {
		width: 10upx;
		height: 18upx;
		margin-left: 20upx;
	}
}
.order_goods_list {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 20upx;
	.businessLayout {
		display: flex;
		align-items: center;
		padding: 10upx 20upx;
		.logo {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			border: 1upx solid #c8c7cc;
		}
		.name {
			font-size: 0.9rem;
			margin-left: 15upx;
		}
	}
	.goods_item {
		display: flex;
		flex-direction: row;
		padding: 30upx;
		border-top: 1upx solid #e5e5e5;
		.goods_image {
			width: 150upx;
			height: 150upx;
		}
		.goods_info {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: space-between;
			margin-left: 20upx;
			.goods_name {
				font-size: 30upx;
				color: #333333;
			}
			.goods_sku_str {
				font-size: 26upx;
				color: #999999;
			}
			.goods_price {
				font-size: 30upx;
				color: #333333;
			}
		}
		.goods_count {
			font-size: 30upx;
			color: #333;
		}
	}
	.goods_item:first-child {
		border-top: none;
	}
}

.msg_box {
	background: #fff;
	margin-top: 20upx;
}

.order_pay_info,
.pay_money {
	background: #fff;
	margin-top: 20upx;
	.item_info_box:first-child {
		border-top: none;
	}
}

.bottomHeight {
	height: 120upx;
}
.bottom {
	height: 98upx;
	background: white;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 30upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-top: 2upx solid rgb(238, 238, 238);
	.bottomLeft {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26upx;
		.money_text {
			color: #333333;
			padding-left: 30upx;
		}
		.money {
			color: #d32222;
			font-size: 40upx;
			.unit {
				font-size: 26upx;
			}
		}
	}
	.bottomRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		.orderConfirm {
			background: $dt-color-primary;
			width: 210upx;
			text-align: center;
			height: 98upx;
			line-height: 98upx;
			color: white;
			box-sizing: border-box;
			font-size: 30upx;
		}
	}
}

.methods_box {
	height: 100%;
	width: 100%;
	z-index: 101;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.methods {
		background: rgba(255, 255, 255, 1);
		width: 100%;
		display: flex;
		flex-direction: column;
		.titleLayout{
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			border-bottom: 1upx solid #e5e5e5;
			.title {
				font-size: 28upx;
				color: #333333;
				font-weight: bold;
				text-align: center;
				height: 79upx;
				line-height: 79upx;
			}
			.cancel{
				position: absolute;
				right: 20upx;
			}
		}
		.methods_list {
			padding: 0 40upx;
			.methods_item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				height: 140upx;
				border-bottom: 1upx solid #e5e5e5;
				text {
					font-size: 28upx;
					color: #333;
					.freight{color: #FF0000;}
				}
				image {
					width: 40upx;
					height: 40upx;
				}
			}
			.methods_item:last-child {
				border-bottom: none;
			}
		}

		.btn_confirm {
			flex: 1;
			width: 100%;
			background: #f3993a;
			border-radius: 0px 0px 10upx 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20upx 0upx;
			color: #fff;
		}
	}
}
</style>