shicai/pages/order/createOrder.vue

<template>
	<view>
		<!-- 地址 -->
		<uni-notice-bar class="notice-bar" background-color="#FFFFFF" color="#141414" showIcon="true" single="true" :text="notice"></uni-notice-bar>
		<view v-if="tabCurrentIndex == 0" class="address-section" @click="Toaddress">
			<view class="order-content" v-if="addressData.real_name">
				<text class="iconfont iconlocation"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ addressData.real_name }}</text>
						<text class="mobile">{{ addressData.phone }}</text>
					</view>
					<text class="address">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</text>
				</view>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="order-content" v-if="!addressData.real_name">
				<view class="addAddress">
					<text class="iconfont iconaddition"></text>
					<text>添加收货地址</text>
				</view>
			</view>
			<image class="a-bg" :src="addressImg"></image>
		</view>
		<navigator v-if="tabCurrentIndex == 1" url="/pages/address/shopList" class="address-section">
			<view class="order-content" v-if="shopAddress.name">
				<text class="iconfont iconlocation"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ shopAddress.name }}</text>
						<text class="mobile">{{ shopAddress.mobile }}</text>
					</view>
					<text class="address">{{ shopAddress.address }} {{ shopAddress.area }}</text>
				</view>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="order-content" v-if="!shopAddress.name">
				<text class="addAddress">
					<text class="iconfont iconaddition"></text>
					<text>添加收货地址</text>
				</text>
			</view>
			<image class="a-bg" :src="addressImg"></image>
			<!-- 商品列表 -->
		</navigator>
		<!-- 商品列表 -->
		<view class="goods">
			<view class="goods-name flex">
				<view class="name">订单详情</view>
				<view class="time flex" v-if="showMask">
					<view>
						<view class="result">{{ resulttime }}</view><!-- @tap="showPicker('linkage')" -->
						<!-- <w-picker
							mode="linkage"
							:value="defaultRegion1"
							:options="options"
							:level="2"
							default-type="id"
							:default-props="defaultProps1"
							@confirm="onConfirm($event, 'linkage')"
							@cancel="onCancel"
							ref="linkage"
						></w-picker> -->
					</view>
					<text class="iconfont iconenter"></text>
				</view>
				<view class="" v-if="pink_type == 1">{{mark}}</view>
			</view>
			<view class="goods-section">
				<view class="pink_name" v-if="pink_type == 1">{{pink_name}}</view>
				<view class="g-item flex_item" v-if="ShowType == 2">
					<scroll-view class="scroll-list" scroll-x>
						<view class="scoll-box" v-for="(ls, ind) in shopList" :key="ls.id">
							<view class="scoll-img"><image :src="ls.productInfo.image"></image></view>
						</view>
					</scroll-view>
					<view class="total">共{{ shopList.length }}件</view>
				</view>
				<view class="gift-item flex_item" v-if="ShowType == 1" v-for="(ls, ind) in shopList" :key="ind">
					<image :src="ls.productInfo.image"></image>
					<view class="right">
						<text class="title clamp">{{ ls.productInfo.store_name }}</text>
						<!-- <text class="spec">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.suk : '默认' }}</text> -->
						<view class="price-box">
							<text class="price">￥{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text>
							<!-- <text class="number">{{ 'x ' + ls.cart_num }}</text> -->
						</view>
						<view class="price-box">
							<text class="number">{{ 'x ' + ls.cart_num }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<!-- <view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">支付方式</text>
				<text class="cell-tip">微信</text>
			</view>
		</view> -->
		<view class="goods" v-if="activityPro">
			<view class="goods-section">
				<view class="gift-item flex_item padding-t-0">
					<image :src="activityPro.image"></image>
					<view class="right">
						<text class="title clamp">{{ activityPro.store_name }}</text>
						<!-- <text class="spec">{{ activityPro.attrInfo ? activityPro.attrInfo.suk : '默认' }}</text> -->
						<view class="price-box"><text class="price">免费</text></view>
					</view>
				<view class="iconLeftTip">活动赠品</view>
				</view>
			</view>
		</view>
		<!-- <view class="green_card">
			<view class="box">
				<view class="img"><image src="/static/img/img36.png"></image></view>
				<view class="list flex">
					<view class="tpl">
						<view class="tip" v-if="grade < 100">
							开通美卡，本单最高可减
							<text>{{ moneyAll.vipPrice }}元</text>
						</view>
						<view class="tip" v-if="grade > 99">
							您已开通美卡，本单节省
							<text>{{ moneyAll.vipPrice }}元</text>
						</view>
						<view class="top" v-if="grade < 100">一天2毛4，一年约省806元</view>
						<view class="top" v-if="grade > 99">美卡有效期至{{ userInfo.level_valid_time }}</view>
					</view>
					<view class="tpl flex" v-if="grade < 100">
						<view class="money">￥88.00/年</view>
						<radio @click="checkbox" color="#06B163" :checked="checked" />
					</view>
					<view class="member" v-if="grade > 99" @click="ToMemer">
						我的美卡
						<text class="iconfont iconenter"></text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 优惠明细 -->
		<view class="yt-list" v-if="showMask">
			<!-- 优惠券 -->
			<view class="yt-list-cell b-b" @click="toggleMask('show')">
				<!-- maskState: 0, //优惠券面板显示状态
				goodsState:0,//商品券面板显示状态
				deliveryState:0,//配送权面板显示状态 -->
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active" v-if="userInfo.discount_coupon_count > 0 && !couponChecked.coupon_price">
					{{ userInfo.discount_coupon_count }}张可用
					<text class="iconfont iconenter"></text>
				</text>
				<text class="cell-tip red" v-if="couponChecked.coupon_price">-￥{{ couponChecked.coupon_price }}</text>
				<text class="cell-tip disabled" v-if="userInfo.discount_coupon_count == 0 && !couponChecked.coupon_price">没有优惠券</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<!-- 免配送券 -->
			<view class="yt-list-cell b-b flex" v-if="userInfo.freight_coupon_count > 0 && moneyAll.storePostage > 0">
				<view class="cell-tit clamp">免配送券（{{ userInfo.freight_coupon_count }}张可用）</view>
				<view class="cell-tip active"><radio @click="Getcheckbox" color="#06B163" :checked="checkedPei" /></view>
			</view>
			<!-- 商品券 -->
			<view class="yt-list-cell b-b" @click="goods('show')">
				<text class="cell-tit clamp">商品券</text>
				<text class="cell-tip active" v-if="userInfo.product_coupon_count > 0 && !GoodsChecked.coupon_price">
					{{ userInfo.product_coupon_count }}张可用
					<text class="iconfont iconenter"></text>
				</text>
				<text class="cell-tip red" v-if="GoodsChecked.coupon_price">{{ GoodsChecked.coupon_title }}</text>
				<text class="cell-tip disabled" v-if="userInfo.product_coupon_count > 0 == 0 && !GoodsChecked.coupon_price">没有优惠券</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="info">
			<view class="flex">
				<view>商品金额</view>
				<view>￥{{ priceGroupDate.total_price }}</view>
			</view>
			<view class="flex">
				<view>配送费用</view>
				<view>￥{{ priceGroupDate.pay_postage }}</view>
			</view>
			<view class="flex" v-if="showMask"><view style="color: #ff383e;font-size: 24rpx;">(第一笔订单满19元时，第二单选择相同时段配送免配送费)</view></view>
			<view class="flex" v-if="!DeliveryChecked.coupon_price"></view>
			<view class="flex" v-if="DeliveryChecked.coupon_price">
				<view>配送券</view>
				<view class="red">-￥{{ DeliveryChecked.coupon_price }}</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款：</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ payPrice }}</text>
			</view>
			<text class="submit" :class="{ submitNo: !payType }" @click="payType ? submit() : ''">提交订单</text>
		</view>
		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content">
				<!-- 优惠券页面，仿mt -->
				<view class="name">领优惠券</view>
				<view class="coupon-item flex" @click="checkedCp(item)" v-for="(item, index) in couponList" :key="index">
					<view class="left">
						<view class="left-price">
							￥
							<text>{{ item.coupon_price }}</text>
						</view>
						<view class="left-man">满{{ item.use_min_price }}元使用</view>
					</view>
					<view class="right flex">
						<view class="right-info">
							<view class="info-name">{{ item.coupon_title }}</view>
							<view class="info-tip">限指定商品使用</view>
							<view class="info-tip">有效期至{{ item.end_time }}</view>
						</view>
						<!-- <view class="right-submit">立即领取</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 领取商品券 -->
		<view class="mask" :class="goodsState === 0 ? 'none' : goodsState === 1 ? 'show' : ''" @click="goods">
			<view class="mask-content">
				<!-- 优惠券页面，仿mt -->
				<view class="name">领商品券</view>
				<view v-for="(item, index) in goodsList" :key="index" @click="checkedGoods(item)" class="goodsState flex">
					<view class="img"><image src="/static/img/img37.png" mode="scaleToFill"></image></view>
					<view class="delivery-box flex">
						<view class="list-money">
							<view class="tit">
								<text>{{ item.coupon_price }}</text>
								￥
							</view>
							<view class="price">美天选菜商品券</view>
						</view>
						<view class="row_list_right">
							<view class="title">{{ item.coupon_title }}</view>
							<view class="text">使用日期：{{ item.add_time }} 至{{ item.end_time }}</view>
						</view>
						<view class="use"><text>使用</text></view>
					</view>
					<view class="img"><image src="/static/img/img38.png" mode="scaleToFill"></image></view>
				</view>
			</view>
		</view>
		<view class="check_box flex" v-if="pink_type == 1">
			<view class="ziti-text" @click="Ziti">用户自提协议</view>
			<view><radio style="transform: scale(0.75)" @click="Getcheckbox11" color="#3DCF35" :checked="checked11" />同意</view>
		</view>
		<!-- 是否需要食物商品 -->
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="pop-box">
				<view class="pop-tit">是否需要实物商品</view>
				<view class="pop-buttom">
					<view class="pop-sub" style="color: #5dbc7c;" @click="Needyes">是</view>
					<view class="pop-sub" style="color: #FF0000;" @click="Needno">否</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { confirm } from '@/api/order.js';
import { couponsOrder } from '@/api/coupon.js';
import { computedOrderkey } from '@/api/money.js';
import { cartAdd } from '@/api/product.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
export default {
	components: {
		wPicker,
		uniPopup
	},
	data() {
		return {
			pink_type:"",//区分拼团订单和普通订单
			pink_name:"",//区分aa团和达人团
			checked11:false,
			mark:"",
			ShowType: 1, //商品显示形式
			checkedPei: false, //是否选择配送券
			checked: false, //是否选择开通美卡
			isBuyVip: 0, //0为未使用配送券，1为使用配送券
			Deliveryid: 0, //选择的配送券id
			userInfo: '', //用户个人信息
			estimated_time: '11:00', //选择配送时间
			resulttime: '明日到家 预计11：00前', //选择配送时间传值  请选择送达时间
			defaultProps1: {
				label: 'name',
				value: 'id',
				children: 'child'
			},
			defaultRegion1: ['1', '9'],
			options: [
				{
					id: '1',
					name: '明日到家',
					child: [
						{
							id: '9',
							name: '请选择送达时间',
							child: []
						},
						{
							id: '11',
							name: '预计17：00前',
							child: []
						},
						{
							id: '10',
							name: '预计11：00前',
							child: []
						}
					]
				}
			],
			addressImg: '/static/img/img35.png',
			// 当前选中的支付方式
			tabCurrentIndex: 0,
			notice: '商品到货后，系统将会通知您来取货~',
			navList: [
				{
					state: 0,
					text: '快递配送'
				},
				{
					state: 1,
					text: '到店自提'
				}
			],
			showMask: true, //是否显示优惠券面板
			maskState: 0, //优惠券面板显示状态
			goodsState: 0, //商品券面板显示状态
			deliveryState: 0, //配送权面板显示状态
			desc: '', //备注
			couponList: [], // 优惠券列表
			deliveryList: [], //配送券列表
			goodsList: [], //商品券列表
			couponChecked: '', //选中的优惠券
			DeliveryChecked: '', //选中的配送券
			GoodsChecked: '', //选中的商品券
			// 收货地址
			addressData: {},
			// 店铺地址
			shopAddress: {
				name: '',
				mobile: '',
				addressName: '',
				address: '',
				area: '',
				default: false
			},
			// 商品列表
			shopList: [],
			// 购物车id
			cartId: '',
			grade: '', //用户等级
			//购物金额详情
			moneyAll: {
				storeFreePostage: 0, //邮费优惠
				storePostage: 0, //邮费
				totalPrice: 0, //总支付金额
				vipPrice: 0 //vip优惠价
			},
			payPrice: 0, //总支付金额
			orderKey: '', //订单id
			checkedPoints: false, //判断是否积分抵扣
			integralShow: false, //是否显示积分抵扣金额
			payType: 1, //1微信 2支付宝
			// payType: true, //是否可支付
			pinkid: '', //保存拼团商品id
			form: '', //0优惠券，3配送券，2商品券
			priceGroupDate: '', //重新计算金额
			activityPro: '' ,//活动赠送商品
			goodsType: '', // 是否为拼团
			neednum: '',	// 是否需要食物
			pinkUser: ''	//是否为团长
		};
	},
	onLoad(option) {
		console.log(option,968)
		// 判断是否为拼团商品
		if (option.type == 'pink') {
			this.showMask = false;
			this.pinkid = option.pinkid;
			this.cartAdd(option);
		} else {
			// 判断是否拼团商品过来的
			if (+option.goodsType == 2) {
				this.showMask = false;
			}
			// 保存当前商品在购物车中的id
			this.cartId = option.id;
			this.pinkUser = option.pinkUser
			this.loadData();
		}
	},
	
	watch: {
		checkedPoints(newValue, oldValue) {
			this.integralShow = false;
			this.payMoneyNub();
		},
		estimated_time(newValue, oldValue) {
			this.payMoneyNub();
		}
	},
	computed: {
		Postage() {
			let money = +this.moneyAll.storePostage;
			if (money == 0) {
				return '免运费';
			} else {
				return '￥' + money;
			}
		},
		payAllMoney() {
			return +this.moneyAll.totalPrice + +this.moneyAll.vipPrice;
		}
	},
	methods: {
		...mapMutations(['upAddressPageShow']),
		// 选择是
		Needyes(){
			this.neednum = 0;
			this.payMoneyNub()
			this.$refs.popup.close()
			console.log(this.neednum,99)
		},
		//自提服务协议
		Getcheckbox11() {
			let obj = this;
			obj.checked11 = !obj.checked11;
		},
		
		// 跳转到自提协议
		Ziti() {
			uni.navigateTo({
				url: '/pages/rule/Pickrule'
			});
		},
		
		// 选择否
		Needno(){
			this.neednum = 1;
			this.payMoneyNub()
			this.$refs.popup.close()
			console.log(this.neednum,99)
		},
		showPicker(type) {
			// 判断是否为 椒江 路桥 黄岩
			console.log(this.addressData.district)
			
			if( this.addressData.district == '路桥区' || this.addressData.district == '路桥' || this.addressData.district == '椒江区' || this.addressData.district == '椒江' || this.addressData.district == '黄岩区' || this.addressData.district == '黄岩' ) {
				console.log(2222222)
				this.$refs[type].show();
			} else {
				console.log(1111111)
				return;
			}
		},
		onConfirm(res, type) {
			
			this.resulttime = res.result;
			if (res.value[1] == 10) {
				this.estimated_time = '11:00';
			}
			if (res.value[1] == 11) {
				this.estimated_time = '17:00';
			}
			if (res.value[1] == 9) {
				this.estimated_time = '11:00';
			}
			
		},
		onCancel() {},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 添加商品到购物车
		cartAdd(opt) {
			let obj = this;
			cartAdd({
				cartNum: 1, //商品数量
				new: 1, //商品是否新增加到购物车1为不加入0为加入
				mer_id: +opt.merid, //商店id
				combinationId: +opt.gid, //拼团商品id
				productId: +opt.pid //普通商品id
			})
				.then(function(e) {
					let da = e.data;
					// 獲取购物车号
					obj.cartId = da.cartId;
					// 加载数据
					obj.loadData();
				})
				.catch(e => {
					console.log(e);
				});
		},
		//是否选择配送券
		Getcheckbox() {
			let obj = this;
			obj.checkedPei = !obj.checkedPei;
			if (obj.checkedPei == false) {
				obj.Deliveryid = 0;
				obj.payMoneyNub();
			} else {
				obj.Deliveryid = obj.deliveryList[0].id;
				obj.payMoneyNub();
			}
		},
		Toaddress() {
			let addressPageShow = uni.getStorageSync('addaddressPageShowressData');
			if (!addressPageShow) {
				this.upAddressPageShow();
			}
			uni.showModal({
				title: '提示',
				content: '修改地址需要重新下单，是否确认修改？',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/index/address'
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		//是否开通美卡
		checkbox() {
			let obj = this;
			obj.checked = !obj.checked;
			console.log(obj.checked, 'checked');
			if (obj.checked == false) {
				obj.isBuyVip = 0;
				obj.payMoneyNub();
			} else {
				obj.isBuyVip = 1;
				obj.payMoneyNub();
			}
		},
		// 计算支付金额
		payMoneyNub() {
			console.log(this.neednum)
			
			computedOrderkey({
				isBuyVip: this.isBuyVip, //是否使用配送券
				orderkey: this.orderKey,
				useIntegral: this.checkedPoints ? 1 : 0, //是否积分抵扣
				couponId: this.couponChecked.id, //优惠券编号
				goCouponId: this.Deliveryid, //配送券编号
				productCouponId: this.GoodsChecked.id, //商品券编号
				addressId: this.addressData.id, //地址编号
				estimated_time: this.estimated_time,
				is_pink_free: this.neednum,
				isPink: 0,	// 是否为拼团商品 0 普通 1 拼团
			})
				.then(({ data }) => {
					this.payType = true;
					this.integralShow = true;
					// 获取支付金额
					this.payPrice = +data.result.pay_price;
					this.priceGroupDate = data.result;
					// 保存活动赠送商品
					this.activityPro = data.result.activityPro;
				})
				.catch(e => {
					console.log(e);
					this.integralShow = false;
					this.payType = false;
				});
		},
		// 是否使用积分
		checkedIntegral() {
			this.checkedPoints = !this.checkedPoints;
		},
		// 选中优惠券
		checkedCp(item) {
			this.couponChecked = item;
			this.payMoneyNub();
		},
		// 选中配送券
		// checkedDelivery(item) {
		// 	this.DeliveryChecked = item;
		// 	this.payMoneyNub();
		// },
		// 选中商品券
		checkedGoods(item) {
			this.GoodsChecked = item;
			this.payMoneyNub();
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		// maskState: 0, //优惠券面板显示状态
		// goodsState:0,//商品券面板显示状态
		// deliveryState:0,//配送券面板显示状态
		//显示优惠券面板
		toggleMask(type) {
			if (this.userInfo.discount_coupon_count == 0) {
				return;
			} else {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer);
			}
		},
		//显示商品券面板
		goods(type) {
			if (this.userInfo.product_coupon_count == 0) {
				return;
			}
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.goodsState = 2;
			setTimeout(() => {
				this.goodsState = state;
			}, timer);
		},
		//显示配送券面板
		delivery(type) {
			if (this.userInfo.freight_coupon_count == 0) {
				return;
			}
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.deliveryState = 2;
			setTimeout(() => {
				this.deliveryState = state;
			}, timer);
		},
		// 加载优惠券列表
		couponsOrder() {
			let obj = this;
			let money = obj.moneyAll.totalPrice;
			couponsOrder(
				{
					form: 0
				},
				money
			).then(e => {
				this.couponList = e.data;
			});
			couponsOrder(
				{
					form: 2
				},
				money
			).then(e => {
				this.goodsList = e.data;
			});
			couponsOrder(
				{
					form: 3
				},
				money
			).then(e => {
				this.deliveryList = e.data;
			});
		},
		//获取订单信息
		loadData() {
			let obj = this;
			confirm({ cartId: obj.cartId + '' })
				.then(({ data }) => {
					obj.mark = data.mark;
					obj.addressData = data.addressInfo || {};
					
					// 判断是否为 椒江 路桥 黄岩
					if( this.addressData.district == '温岭市' || this.addressData.district == '温岭' || this.addressData.district == '玉环县' || this.addressData.district == '玉环' || this.addressData.district == '临海市' || this.addressData.district == '临海' ) {
						console.log(444)
						obj.resulttime = '预计17:00前';
						obj.estimated_time = '11:00'
					}
					
					
					obj.shopList = data.cartInfo; //商品列表
					if (obj.shopList.length < 2) {
						obj.ShowType = 1;
					} else {
						obj.ShowType = 2;
					}
					
					obj.moneyAll = data.priceGroup; //金额数据
					obj.orderKey = data.orderKey; //订单key
					obj.userInfo = data.userInfo;
					if(data.combination_id){
						if(data.combination_id > 0){
							obj. pink_type= 1;
							obj. pink_name= data.pink_type ;
						}else{
							obj. pink_type= 0;
						}
					}
          console.log(data.pink_type,55)
					if (data.userInfo.level_info == null) {
						obj.grade = 0;
					} else {
						obj.grade = data.userInfo.level_info.grade;
					}

					// 计算金额
					obj.payMoneyNub();
					// 加载各种券
					obj.couponsOrder();
					
					// if( this.pinkid == '' && this.userInfo.day_give == 1 && this.pinkUser == 1) {
					// 	this.$refs.popup.open()
					// }
				})
				.catch(e => {
					console.log(e.message);
					if (e.message == '未在营业时间') {
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1000);
					}
				});
		},
		// 购买数量变化
		numberChange(data) {
			this.number = data.number;
		},
		// 修改支付方式
		changePayType(type) {
			this.payType = type;
		},
		// 提交订单
		submit() {
			if(this.pink_type == 1){
				if(this.checked11 === false){
					this.$api.msg('请同意用户自提协议');
					return false;
				}
			}
			if (this.checkedPoints && this.shopList.length > 1) {
				this.$api.msg('积分商品只可单件购买');
				return false;
			}
			if (!this.addressData.real_name) {
				this.$api.msg('请选择收货地址');
				return false;
			}
			if (this.estimated_time == '' && this.showMask) {
				this.$api.msg('请选择送达时间');
				return false;
			}
			let url = '/pages/money/pay?key=' + this.orderKey + '&estimated_time=' + this.estimated_time + '&free=' + this.neednum + '&pinkUser=' + this.pinkUser + '&isPink=0';
			if (this.pinkid) {
				url += '&pinkid=' + this.pinkid;
			}
			// 判断是否为拼团商品
			if (!this.showMask) {
				url += '&pink=1';
			}
			
			uni.navigateTo({
				url
			});
		},
		ToMemer() {
			if (this.grade > 99) {
				uni.navigateTo({
					url: '/pages/user/renew'
				});
			}
			if (this.grade < 100) {
				uni.navigateTo({
					url: '/pages/user/card'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 100rpx;
}
.notice-bar {
	position: relative;
	top: 10rpx;
}
.navbar {
	display: flex;
	height: 80rpx;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: $font-lg + 4rpx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 140rpx;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}
.address-section {
	padding: 30rpx 0;
	background: #fff;
	position: relative;
	border-top: 1px solid $border-color-light;
	.order-content {
		min-height: 100rpx;
		display: flex;
		align-items: center;
		.addAddress {
			text-align: center;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.iconaddition {
				font-size: 55rpx;
				line-height: 1;
				border-radius: 100rpx;
				margin-right: 20rpx;
			}
		}
	}

	.iconlocation {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90rpx;
		color: #888;
		font-size: 44rpx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28rpx;
		color: $font-color-dark;
	}

	.name {
		font-size: 34rpx;
		margin-right: 24rpx;
	}

	.address {
		margin-top: 16rpx;
		margin-right: 20rpx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32rpx;
		color: $font-color-light;
		margin-right: 30rpx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5rpx;
	}
}
.pink_name{
	position: absolute;
	top: 20rpx;
	left: 25rpx;
	z-index: 99;
	background-color: #FFF270;
	color: #934721;
	font-size: 22rpx;
	padding: 0rpx 8rpx;
}
.goods {
	padding: 15rpx 25rpx;
	padding-bottom: 25rpx;
	background: #ffffff;
	margin-top: 25rpx;
	.iconLeftTip {
		position: absolute;
		top: 20rpx;
		left: 0rpx;
		padding: 5rpx 10rpx;
		background-color: $color-red;
		color: #ffffff;
		font-size: $font-sm - 4rpx;
	}
	.goods-name {
		color: #141414;
		font-size: 24rpx;
		padding: 30rpx 0rpx;
		.name {
			font-size: 35rpx;
		}
		.time {
			text {
				padding-top: 7rpx;
			}
		}
	}
	.goods-section {
		position: relative;
		.g-header {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 30rpx;
			color: $font-color-base;
			margin-left: 24rpx;
		}
		.gift-item {
			display: flex;
			margin: 20rpx 30rpx;
			padding-top: 20rpx;
			position: relative;
			image {
				flex-shrink: 0;
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 4rpx;
			}

			.right {
				flex: 1;
				padding-left: 24rpx;
				overflow: hidden;
				align-self: stretch;
			}

			.title {
				font-size: 30rpx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26rpx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: $font-color-dark;
				padding-top: 10rpx;

				.price {
					margin-bottom: 4rpx;
				}
				.number {
					font-size: 26rpx;
					color: $font-color-base;
					margin-left: 20rpx;
				}
			}

			.step-box {
				position: relative;
			}
		}
		.g-item {
			width: 100%;
			font-size: 24rpx;
			height: 170rpx;
			.scroll-list {
				width: 80%;
				overflow: hidden;
				white-space: nowrap;
				.scoll-box {
					margin-right: 25rpx;
					text-align: center;
					display: inline-block;
					.scoll-img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 100%;
						image {
							width: 150rpx;
							height: 100%;
							border-radius: 100%;
						}
					}
				}
			}
			.total {
				width: 20%;
				text-align: center;
				color: #515151;
				font-size: 26rpx !important;
			}
		}
	}
}
.green_card {
	background: #ffffff;
	padding: 30rpx 27rpx;
	width: 100%;
	margin-top: 15rpx;
	font-size: 26rpx;
	.box {
		background: #f5f5f5;
		padding: 25rpx 25rpx;
		.img {
			width: 100rpx;
			height: 40rpx;
			margin-bottom: 15rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.list {
			.tpl {
				.tip {
					color: #425272;
					text {
						color: #ff383e;
					}
				}
				.top {
					color: #999999;
					padding-top: 15rpx;
				}
				.money {
					padding-right: 10rpx;
				}
			}
			.member {
				color: #425272;
			}
		}
	}
}
.yt-list {
	margin-top: 16rpx;
	background: #fff;
}
.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10rpx 30rpx 10rpx 40rpx;
	line-height: 70rpx;
	position: relative;

	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30rpx;
	}

	.cell-icon {
		height: 32rpx;
		width: 32rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 32rpx;
		background: #f85e52;
		border-radius: 4rpx;
		margin-right: 12rpx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24rpx;
		color: $font-color-light;
		margin-left: 8rpx;
		margin-right: -10rpx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26rpx;
		color: $font-color-light;
		margin-right: 10rpx;
	}

	.cell-tip {
		font-size: 26rpx;
		color: $font-color-dark;
		&.disabled {
			color: $font-color-light;
		}
		&.active {
			color: #b3b3b3;
		}
		&.red {
			color: $base-color;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90rpx;
		}
	}
	.desc {
		flex: 1;
		text-align: right;
		font-size: $font-base;
		color: $font-color-dark;
	}
}
.info {
	margin-top: 25rpx;
	background: #ffffff;
	padding-top: 25rpx !important;
	margin-bottom: 25rpx !important;
	padding: 0rpx 25rpx;
	font-size: 28rpx;
	color: #909399;
	view {
		padding-bottom: 10rpx;
	}
}
.red {
	color: #ff1a27;
}
/* 支付列表 */
.pay-list {
	padding-left: 40rpx;
	margin-top: 16rpx;
	background: #fff;
	.pay-item {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		line-height: 1;
		height: 110rpx;
		position: relative;
	}
	.icon-weixinzhifu {
		width: 80rpx;
		font-size: 40rpx;
		color: #6bcc03;
	}
	.icon-alipay {
		width: 80rpx;
		font-size: 40rpx;
		color: #06b4fd;
	}
	.icon-xuanzhong2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		font-size: 40rpx;
		color: $base-color;
	}
	.tit {
		font-size: 32rpx;
		color: $font-color-dark;
		flex: 1;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90rpx;
	justify-content: space-between;
	font-size: 30rpx;
	background-color: #fff;
	z-index: 998;
	color: $font-color-base;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.price-content {
		padding-left: 30rpx;
	}
	.price-tip {
		color: #ff383e;
		margin-left: 8rpx;
	}
	.price {
		font-size: 36rpx;
		color: #ff383e;
	}
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 280rpx;
		height: 100%;
		color: #fff;
		font-size: 32rpx;
		background-color: $base-color;
		&.submitNo {
			background-color: $font-color-disabled;
		}
	}
}
.check_box {
	padding: 0rpx 25rpx;
	font-size: 28rpx;
	text{
		color: #3DCF35;
	}
	.ziti-text {
		color: $base-color;
		text-decoration: underline;
	}
}
/* 优惠券面板 */
.mask {
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9995;
	transition: 0.3s;
	.mask-content {
		width: 100%;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: 0.3s;
		overflow-y: scroll;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		.name {
			width: 100%;
			text-align: center;
			padding: 15rpx 15rpx;
			margin-top: 15rpx;
		}
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.mask-content {
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item {
	margin: 20rpx 24rpx;
	background: #fff;
	font-size: 26rpx;
	height: 170rpx;
	.left {
		background: #eef9f1;
		width: 28%;
		height: 170rpx;
		text-align: center;
		color: #2dbd59;
		.left-price {
			padding-top: 25%;
			text {
				font-size: 59rpx;
				font-weight: bold;
			}
		}
	}
	.right {
		width: 72%;
		height: 170rpx;
		padding: 0rpx 25rpx;
		.info-name {
			font-weight: bold;
			font-size: 30rpx;
		}
		.info-tip {
			color: #999999;
			font-size: 22rpx;
			padding: 5rpx 0rpx;
		}
		.right-submit {
			background: #2dbd59;
			color: #ffffff;
			border-radius: 25rpx;
			padding: 10rpx 15rpx;
		}
	}
}
//配送券
.deliveryState {
	border-radius: 15rpx;
	margin: 20rpx 24rpx;
	height: 200rpx;
	overflow: hidden;
	background: #ffffff;
	.list-interval {
		border: 1px dashed $border-color-light;
		height: 100%;
		.top,
		.bottom {
			border-radius: 100rpx;
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			background-color: $page-color-base;
			right: -15rpx;
		}
		.top {
			top: -18rpx;
		}
		.bottom {
			bottom: -18rpx;
		}
	}
	.list-money {
		height: 100%;
		image {
			height: 100%;
			width: 20rpx;
			margin-right: 10rpx;
			position: relative;
		}
		.list-money-text {
			width: 220rpx;
			padding: 0 25rpx;
			text-align: center;
			color: #fc4141;
			.tit {
				padding: 15rpx 0rpx;
				font-size: 55rpx;
				font-weight: bold;
			}
			.price {
				padding-bottom: 25rpx;
				color: #999999;
				font-size: 24rpx;
			}
		}
	}
	.row_list_right {
		width: 60%;
		font-size: 26rpx;
		.title {
			text {
				color: #fc4141;
				font-size: 30rpx;
			}
		}
		.text {
			padding: 7rpx;
			color: #999999;
		}
		.use {
			margin-top: 15rpx;
			text {
				border: 2rpx solid #313131;
				padding: 7rpx 20rpx;
				border-radius: 25rpx;
			}
		}
	}
}
//商品券
.goodsState {
	border-radius: 15rpx;
	margin: 20rpx 24rpx;
	height: 200rpx;
	overflow: hidden;
	.img {
		width: 30rpx;
		height: 200rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}
	.delivery-box {
		background: linear-gradient(270deg, rgba(111, 178, 47, 1) 0%, rgba(160, 217, 106, 1) 100%);
		width: 100%;
		height: 100%;
		color: #ffffff;
		.list-money {
			height: 100%;
			font-size: 22rpx;
			text-align: center;
			padding-top: 4%;
			padding-left: 10rpx;
			.tit {
				text {
					font-size: 80rpx;
				}
			}
		}
		.row_list_right {
			width: 43%;
			font-size: 26rpx;
			.title {
				text {
					color: #fc4141;
					font-size: 30rpx;
				}
			}
			.text {
				padding: 7rpx;
				color: #ffffff;
				font-size: 20rpx;
			}
		}
		.use {
			margin-top: 15rpx;
			text {
				background-color: #ffffff;
				font-size: 26rpx;
				padding: 12rpx 30rpx;
				border-radius: 25rpx;
				color: rgba(111, 178, 47, 1);
			}
		}
	}
}

.pop-box {
	background: #FFFFFF;
	width: 500rpx;
	border-radius: 15rpx;
	text-align: center;
	.pop-tit {
		font-size: $font-base;
		padding-top: 60rpx;
	}
	.pop-buttom {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		border: 1px solid #f0f0f0;
		height: 80rpx;
		.pop-sub {
			flex: 1;
			text-align: center;
			font-size: $font-base;
			border-right: 1px solid #f0f0f0;
			&:last-of-type {
				border-right: 0;
			}
			
		}
	}
}

</style>