shop_app/components/sku/directPay.vue

<template>
	<view>
		<up-popup :show="showPopup" mode="bottom" :round="10" :safe-area-inset-bottom="true" catchtouchmove="preventD" :lock-scroll="true" :z-index="202">
			<view class="whole" :class="fontSize == 'small' ? '' : 'large'">
				<view class="titBox">
					<text>跟团购买</text>
					<view class="close" @click="close"><up-icon name="close" color="#898989" size="20" /></view>
				</view>
				
				<view class="content">
					<view class="oneBox" @click="showAddr = true">
						<view class="icon">
							<up-icon name="map-fill" :color="Color" size="20" />
						</view>
						<view class="box">
							<text v-if="!originAddr.id">请填写收货地址</text>
							<template v-else>
								<view class="txt"><text>{{originAddr.name}}</text>&nbsp;{{originAddr.mobile}}</view>
								<view class="txt">{{originAddr.detail}}</view>
							</template>
							<view class="tips" v-if="freightGoods.length"><up-icon name="error-circle" />当前地址超出配送范围，请重新选择</view>
						</view>
						<up-icon name="arrow-right" color="#898989" size="20" />
					</view>
					
					<!-- 跨境实名认证 -->
					<view class="kongxin" v-if="needReal">
						<view class="realbox">
							<text class="iconfont icon-realname"></text>
							<view class="cont">
								<view class="info">
									<view class="title">
										<view class="tit" @click="showKnow = true">实名认证&nbsp;<up-icon name="info-circle" /></view>
										<view class="text" @click="openReal()" v-if="noRealName">添加认证信息&nbsp;<up-icon name="arrow-right" /></view>
									</view>
									<view class="name" v-if="!noRealName" @click="toAddReal()">
										<text>{{realInfo.name}}&nbsp;{{realInfo.cert_id}}</text>
										<up-icon name="arrow-right" />
									</view>
								</view>
								<view class="msg">*为保证顺利清关，请确保实名认证和付款人信息一致</view>
							</view>
						</view>
					</view>
					
					<view class="skuTop">
						<image class="img" :src="pic_url || viewImg" @click="preViewImg(pic_url || viewImg)" mode="aspectFill" />
						<view class="topInfo">
							<view class="title">
								<view class="kuajing" v-if="goodsSpec.is_cross_border === 1">跨境包税</view>
								<view class="kuajing" v-else-if="goodsSpec.overseas_direct_mail === 1">海外直邮</view>{{goodsSpec.title}}
							</view>
							<view class="priceBox">
								<!-- 会员下普通价格 -->
								<view class="text1" v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
									<text>￥{{chooseItem.price}}</text>
								</view>
								
								<template>
									<!-- 显示会员价 -->
									<view v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
										<view class="vip-tag"><text class="txt">会员价&nbsp;￥</text>{{chooseItem.vip_price}}</view>
									</view>
									
									<!-- 显示普通价格 -->
									<view v-else class="vip">
										<text>￥{{chooseItem.price}}</text>
									</view>
								</template>
							</view>
							<view class="sel" v-if="skuName">已选：{{skuName || '-'}}</view>
							<view class="bbox">
								<view class="text" v-if="show_stock === 1">剩余{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件</view>	
								<up-number-box
									v-model="chooseItem.num"
									:min="goodsSpec.limit_type == 1 ? parseInt(goodsSpec.start_sale_num) : goodsSpec.limit_type === 0 ? 1 : 1"
									:max="goodsSpec.limit_type == 2 ? parseInt(goodsSpec.limit) : (chooseItem.stock > 0 ? chooseItem.stock : 0)"
									@overlimit="plusBtn(goodsSpec.limit_type == 1 ? 0 : goodsSpec.limit_type == 2 ? 1 : 2, chooseItem.num, goodsSpec.limit)"
									disabledInput
									bgColor="#f2f3f5"
									:longPress="false"
									:asyncChange="true"
									@change="changeNum($event)">
								</up-number-box>
							</view>
						</view>
					</view>
					
					<view class="skuBox" v-if="specsList.length">
						<view class="item" v-for="(item, index) in specsList" :key="item.spec_id">
							<view class="tit">{{item.spec_name}}</view>
							<view class="row">
								<view class="tag" v-for="(i, i_index) in item.value" :key="i.id"
									@click="!i.show ? chooseSku(i, index, i_index) : ''"
									:class="choose['v' + (index + 1) + '_id'] === i.id || skus_1 ? 'choose' : i.show ? 'box' : '' ">
									<image :src="i.img" v-if="i.img" class="tag_img"></image>
									<text>{{i.value}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<block v-for="(order, index) in orders" :key="index">
						<view class="pay-price">
							<view class="pay-price-item" v-if="order.has_cross_border || order.overseas_direct_mail">
								<view class="title" @click="showTaxation = true">进口税&nbsp;<up-icon name="info-circle" /></view>
								<text class="title">商品已包税</text>
							</view>
							<view class="pay-price-item" v-if="(order.items.length == 1 && order.items[0].goods && (order.items[0].goods.delivery_mode === 1 || order.items[0].goods.delivery_mode === 2)) || order.oneMode">
								<template>
									<text class="title" v-if="Number(order.freight_price) !== 0">发货时效</text>
									<text class="title" v-else>快递(包邮)</text>
								</template>
								
								<view v-if="order.items[0].goods.delivery_mode === 1 && order.items[0].goods.delivery_special_delay === 0" class="mode">
									现货{{order.items[0].goods.delivery_need_time}}天内发货
								</view>
								<view v-if="order.items[0].goods.delivery_mode === 1 && order.items[0].goods.delivery_special_delay === 1" class="mode">
									<!-- 如果当前时间 在不发货时间段，则取最晚发货时间，否则取预计发货 -->
									<template v-if="compareDate(order.items[0].goods.delivery_order_start_time, nowTime) && compareDate(nowTime, order.items[0].goods.delivery_order_end_time)">
										最晚{{parseTime(order.items[0].goods.delivery_latest_time)}}发货
									</template>
									<template v-else>
										现货{{order.items[0].goods.delivery_need_time}}天内发货
									</template>
								</view>
								<view v-if="order.items[0].goods.delivery_mode === 2" class="mode">
									预售{{order.items[0].goods.delivery_need_time}}天内发货
								</view>
							</view>
							
						</view>
					</block>
					
					<view class="trans_detail" v-if="sum.goods_price * 1">
						<view class="row">
							<text>商品总价</text>
							<text>￥{{sum.goods_price}}</text>
						</view>
						<view class="row" v-if="sum.active_discount_amount * 1">
							<text>活动优惠</text>
							<text class="red">-￥{{sum.active_discount_amount}}</text>
						</view>
						
						<template v-for="(order, index) in orders" :key="index">
							<!-- 新增优惠券信息 -->
							<view class="row" v-if="order.use_coupon.length !== 0">
								<!-- 普通优惠券 -->
								<view style="display: flex;align-items: center;" v-if="order.use_coupon.use_type === 10 || order.use_coupon.use_type === 20 || order.use_coupon.use_type === 21">
									<view class="coupon_icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
									<text class="title">优惠券</text>
								</view>
								
								<!-- 满减优惠券 -->
								<view style="display: flex;align-items: center;" v-if="order.use_coupon.use_type === 30 || order.use_coupon.use_type === 31">
									<view class="quanbox">
										<view class="quan">券</view>
										<text>满减券(满{{order.use_coupon.full_amount}}-{{order.use_coupon.amount}})</text>
									</view>
								</view>
								<view style="color: #F14939;display: flex;align-items: center;" @click="openCoupon(order.coupon_id)">
									<text>-￥{{order.use_coupon.amount}}</text>
									<up-icon name="arrow-right" size="14" v-if="from === 0" />
								</view>
							</view>
						</template>
						
						<view class="youhuiBox" v-if="sum.use_coupon && sum.use_coupon.length !== 0">
							<view v-for="it in sum.use_coupon" :key="it.id" class="box1 flex">
								<view style="display: flex;align-items: center;" v-if="it.use_type === 10 || it.use_type === 20 || it.use_type === 21">
									<view class="coupon_icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
									<text class="title">优惠券</text>
								</view>
								
								<!-- 满减优惠券 -->
								<view style="display: flex;align-items: center;" v-if="it.use_type === 30 || it.use_type === 31">
									<view class="quanbox">
										<view class="quan">券</view>
										<text>满减券(满{{it.full_amount}}减{{it.amount}})</text>
									</view>
								</view>
								
								<view style="display: flex;align-items: center;color: #F14939;" @click="openCoupon(it.id)">
									<text style="font-size: 30rpx;">-￥{{it.amount}}</text>
									<up-icon name="arrow-right" size="14" v-if="from === 0" />
								</view>
							</view>
						</view>
						
						<!-- 未使用优惠券且有优惠券可用 -->
						<view class="youhuiBox" v-if="couponId === 0 && canUseCoupon.length && from === 0">
							<view class="box1 flex">
								<view class="quanbox"><view class="quan">券</view></view>
								<view style="display: flex;align-items: center;color: #F14939;" @click="openCoupon(0)">
									<text style="font-size: 28rpx;">有优惠券可用</text>
									<up-icon name="arrow-right" size="14" />
								</view>
							</view>
						</view>
						
						<!-- <view class="row" v-if="sum.freight_price * 1">
							<text>运费</text>
							<text>￥{{sum.freight_price}}</text>
						</view> -->
						
						<template v-for="(order, index) in orders" :key="index">
							<view class="row1" v-if="order.unFull && (order.unFull.length != 0 || Number(order.freight_price) != 0)">
								<text class="title" v-if="!order.unFull.length">运费</text>
								<template v-if="order.unFull.length == 1">
									<block class="title" v-for="(i, index) in order.unFull" :key="index">
										<text v-if="i.type == 'number'">运费(还差{{ i.full_number - i.buyNum}}件即可免费包邮)</text>
										<text v-if="i.type == 'amount'">运费(还差{{(i.full_amount - i.totalPrice).toFixed(2)}}元即可免费配送)</text>
									</block>
								</template>
								<view style="flex: 2">
									<template v-if="order.unFull.length > 1">
										<block class="title-goods" v-for="(i, index) in order.unFull" :key="index">
											<text style="display: block"
												v-if="i.type == 'number'">运费({{ i.shop_goods_title[0].slice(0, 8) }}还差{{i.full_number - i.buyNum}}件即可免费配送)</text>
											<text style="display: block"
												v-if="i.type == 'amount'">运费({{ i.shop_goods_title[0].slice(0, 8) }}还差{{(i.full_amount - i.totalPrice).toFixed(2)}}元即可免费配送)</text>
										</block>
									</template>
								</view>
								<text class="title-price">￥{{ order.freight_price }}</text>
							</view>
						</template>
						
						<view class="row" @click="showScore = true" v-if="detail.score_cash_type">
							<text>积分</text>
							<view class="red">
								<template v-if="is_use_score">使用{{sum.useScore}}积分抵扣，-￥{{sum.deductionProfit}}</template>
								<template v-else><text>可用{{detail.useScore}}积分，抵{{detail.deductionProfit}}元&nbsp;</text>去使用</template>
								<up-icon name="arrow-right" size="14" />
							</view>
						</view>
					</view>
					
					<view class="noticeBox">
						<text class="tit">备注</text>
						<input class="input" v-model="message" placeholder="请填写您的要求" />
					</view>
					
					<view class="payBox">
						<view class="row flex1" v-for="it in payList" :key="it.id" @click="pay_method = it.id">
							<view class="flex">
								<text class="iconfont logo" :class="'icon-' + it.icon" :style="{color: it.color}"></text>
								<text>{{it.name}}</text>
							</view>
							<text class="iconfont icon-checked" v-if="it.id == pay_method"></text>
							<text class="iconfont icon-circle" v-else></text>
						</view>
					</view>
				</view>
				
				<view class="paybtn">
					<!-- :class="canPass && freightGoods.length == 0 ? '' : 'disabled'" -->
					<view class="box" @click="payOrder">立即支付
						<text v-if="canPass">￥{{sum.total_price}}</text>
					</view>
				</view>
				
			</view>
			
			<up-popup :show="showAddr" mode="bottom" :round="10" :safe-area-inset-bottom="true" :lock-scroll="true">
				<view class="contBox">
					<view class="topBox">
						<text>选择地址</text>
						<view class="close" @click="showAddr = false"><up-icon name="close" color="#898989" size="20" /></view>
					</view>
					<view class="BBox">
						<view class="searchBox">
							<view class="box">
								<up-icon name="search" color="#A8A8A8" size="17" />
								<input class="input" type="text" :value="keyWord" placeholder="搜索联系人名字、电话" @input="fillValue" @confirm="searchAddress" />
							</view>
						</view>
						<view class="addrBox" v-if="addrList.length > 0">
							<view class="item" v-for="(item, index) in addrList" :key="item.id">
								<view class="row" @click="chooseAddress(item)">
									<view class="icon">
										<span v-if="item.id == addrId" class="iconfont icon-checked"></span>
										<span v-else class="iconfont icon-circle"></span>
									</view>
									<view class="box">
										<view class="txt"><text>{{item.name}}</text>&nbsp;{{item.mobile}}
											<text v-if="item.is_default === 1" class="default">默认</text>
										</view>
										<view class="txt">{{item.detail}}</view>
									</view>
								</view>
								<view class="btnBox">
									<view class="btn" @click="toEdit(item)">
										<up-icon name="edit-pen" />
										<text>编辑</text>
									</view>
									<view class="btn" @click="delBtn(item.id, index)">
										<up-icon name="trash" />
										<text>删除</text>
									</view>
								</view>
								
							</view>
						</view>
					</view>
					
					<view class="btmBox">
						<view class="add btn" @click="toAdd()">新增地址</view>
					</view>
				</view>
			</up-popup>
			
			<!-- 编辑、新增地址 -->
			<up-popup :show="showEdit" mode="bottom" :round="10" :safe-area-inset-bottom="true" :lock-scroll="true">
				<view class="contBox">
					<view class="topBox">
						<text>{{tempAddr.id ? '编辑' : '新增'}}地址</text>
						<view class="close" @click="showEdit = false"><up-icon name="close" color="#898989" size="20" /></view>
					</view>
					
					<view class="editBox">
						<view class="rowBox">
							<view class="row">
								<text>姓名</text>
								<input v-model="tempAddr.name" placeholder="请输入姓名" />
							</view>
							<view class="row">
								<text>手机号</text>
								<input v-model="tempAddr.mobile" placeholder="请输入手机号" />
							</view>
							<view class="row">
								<text>所在地区</text>
								<view class="area">
									<view class="picker">
										<uni-data-picker
											placeholder="请选择"
											popup-title="请选择"
											:localdata="areaList"
											v-model="tempAddr.area_id"
											@change="chooseArea"
											:map="{text:'name', value:'id'}">
										</uni-data-picker>
									</view>
									<view class="icon" @click="showMap">
										<up-icon name="map-fill" size="20" :color="Color" />
									</view>
								</view>
							</view>
							<view class="row">
								<text>详细地址</text>
								<input v-model="tempAddr.address" placeholder="请填写具体地址" />
							</view>
						</view>
						
						<view class="defaultbox">
							<up-checkbox :checked="tempAddr.is_default === 1" class="check" :activeColor="Color" @change="onChange" shape="circle" usedAlone label="设为默认地址"></up-checkbox>
						</view>
					</view>
					<view class="savebtn" @click="saveBtn">保存地址</view>
				</view>
			</up-popup>
			
			
			<!-- 了解实名认证 -->
			<up-modal :show="showKnow" :showCancelButton="false" :showConfirmButton="false">
				<view>
					<view class="refTitle">关于实名认证</view>
					<view class="mesg">1.根据海关规定：购买跨境商品需要对订购人进行实名认证。提交的姓名与身份证号码必须相符且真实有效，否则会影响海关审放。<br>
						2.实名购物也是您权利的保障，如果您对所购买的商品有疑问，您可以向海关申清查询货品是否经过海关正规进口流程。<br>
						3.妙选商城不会向除中国海关报关相关机构外任何第三方提供用户的身份信息。<br>
						4.如您还有其他关于实名认证的问题可以联系我们客服为您处理。
					</view>
					<view style="padding: 50rpx;">
						<view class="iknow" @click="showKnow = false">我知道了</view>
					</view>
				</view>
			</up-modal>
			
			<!-- 填写实名认证 -->
			<up-modal :show="showReal" :showCancelButton="true" :showConfirmButton="true" @confirm="commitReal()"
				@cancel="showReal = false" :confirmColor="Color">
				<view style="width: 100%;">
					<view class="refTitle">填写实名认证</view>
					<view class="realBox">
						<input v-model="realAddInfo.name" placeholder="因海关清关需要，请填写真实姓名" class="input" />
						<input v-model="realAddInfo.cert_id" placeholder="请填写您的身份证号" class="input" />
					</view>
				</view>
			</up-modal>
			
			<up-modal :show="showTaxation" :showCancelButton="false" :showConfirmButton="false">
				<view>
					<view class="refTitle">进口税</view>
					<view class="mesg" style="text-align: center;">商品售价已包含税费，无需另付税费</view>
					<view style="padding: 50rpx;">
						<view class="iknow" @click="showTaxation = false">我知道了</view>
					</view>
				</view>
			</up-modal>
			
			<!-- 选择优惠券 -->
			<up-popup :show="showCoupon" :round="10" mode="bottom" @close="showCoupon = false" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
				<view class="reTitle">
					<text>优惠券</text>
					<view @click="showCoupon = false" class="close">
						<up-icon name="close" color="#777" size="20" />
					</view>
				</view>
				<view style="padding: 0 20rpx 20rpx;background-color: #F6F6F6;">
					<scroll-view class="couponBox" :scroll-y="true" :scroll-with-animation="true" :enhanced="true" style="height: calc(80vh - 200rpx);">
						<!-- 可用优惠券 -->
						<view class="item" v-for="(item, index) in canUseCoupon" :key="item.id"  @click="selectCoupon(item.id)">
							<view class="coupon-left textColor1">
								<text class="sign">￥<text class="money">{{item.amount}}</text></text>
								<view class="title" v-if="item.use_type === 30 || item.use_type === 31">满{{item.full_amount}}元可用</view>
								<view class="title" v-else>无门槛</view>
							</view>
							<view class="coupon-right">
								<view class="coupon-text">
									<view v-if="item.use_type == 20 || item.use_type === 31" class="text chang textColor">仅该团购可用：{{item.extend.title}}</view>
									<view v-else class="text textColor">
										<text v-if="Number(item.amount) < 3">全场通用</text>
										<text v-else>部分团可用</text>
									</view>
									<text class="time">{{item.finish_time.substring(0, 16)}}前有效</text>
								</view>
								<view class="coupon-btn">
									<span v-if="item.id == tempId" class="iconfont icon-checked"></span>
									<span v-else class="iconfont icon-circle"></span>
								</view>
							</view>
						</view>
						
						<view style="padding: 50rpx 0;" v-if="canUseCoupon.length === 0">
							<up-empty mode="coupon" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/coupon.png" text="无可用优惠券"></up-empty>
						</view>
						
						<!-- 不可用优惠券 -->
						<view style="font-size: 28rpx;color: #888;padding: 30rpx 0 20rpx;" v-if="cannotUseCoupon.length">以下优惠券不可用</view>
						<view class="item" v-for="(item, index) in cannotUseCoupon" :key="item.id">
							<view class="coupon-left textColor2">
								<text class="sign">￥<text class="money">{{item.amount}}</text></text>
								<view class="title" v-if="item.use_type === 30 || item.use_type === 31">满{{item.full_amount}}元可用</view>
								<view class="title" v-else>无门槛</view>
							</view>
							<view class="coupon-right">
								<view class="coupon-text">
									<view v-if="item.use_type == 20 || item.use_type === 31" class="text chang textColor2">仅该团购可用：{{item.extend.title}}</view>
									<view v-else class="text textColor2">
										<text v-if="Number(item.amount) < 3">全场通用</text>
										<text v-else>部分团可用</text>
									</view>
									<text class="time">{{item.finish_time.substring(0, 16)}}前有效</text>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<div @click="handleCoupon()" class="box_btn">确&nbsp;定</div>
				</view>
			</up-popup>
			
			<!-- 使用积分 -->
			<up-popup :show="showScore" :round="10" mode="bottom" @close="showScore = false" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
				<view class="reTitle">
					<text>积分抵扣</text>
					<view @click="showScore = false" class="close">
						<up-icon name="close" color="#777" size="20" />
					</view>
				</view>
				<view class="scoreBox">
					<view class="row" @click="setUseScore(1)">
						<view class="text">使用{{detail.useScore}}积分抵{{detail.deductionProfit}}元</view>
						<span class="iconfont icon-checked" v-if="is_use_score"></span>
						<span class="iconfont icon-circle" v-else></span>
					</view>
					<view class="row" @click="setUseScore(0)">
						<view class="text">不使用</view>
						<span class="iconfont icon-checked" v-if="!is_use_score"></span>
						<span class="iconfont icon-circle" v-else></span>
					</view>
				</view>
			</up-popup>
			
			<!-- 隐私协议弹窗 -->
			<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
			
		</up-popup>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { showToast, compareDate, parseTime, judgePrivacy, getAreaCode } from '../common.js'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	import { areaList } from '@/components/areaList.js'
	import { sp2 } from '@/components/img.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
	
	export default {
		components: {
			privacyPopup, uniDataPicker
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			show_stock: {
				type: Number,
				default: 0
			},
			groupId: {
				type: Number,
				default: 0
			},
			sourceId: {
				type: Number,
				default: 0
			},
			sourceType: {
				type: String,
				default: 'normal'
			},
			goodId: {
				type: Number,
				default: 0
			},
			skus_1: {
				type: Boolean,
				default: false
			},
			source: {
				type: String
			}
		},
		setup(props, context) {
			const data = reactive({
				sp2: sp2,
				showKnow: false,
				message: '',
				show: true,
				chooseItem: {},
				originAddr: {},
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				showPopup: false,
				address: {},
				addrId: 0,
				showAddr: false,
				keyWord: '',
				addrList: [],
				tempAddr: {},
				showEdit: false,
				arealist: [],
				area: '',
				area_id: '',
				showArea: false,
				goodId: 0,
				groupId: 0,
				vipOn: uni.getStorageSync('vip_on') === 1,
				vip_price_show: uni.getStorageSync('vip_price_show'),
				sourceId: 0,
				sourceType: '',
				viewImg: '',
				imgWidth: 200,
				skuInfo: {},
				skuName: '',
				is_vip: uni.getStorageSync('is_vip'),
				specsList: [],
				mainImg: [],
				images: [],
				chooseItem: {},
				choose: {},
				chooseIndex: [],
				pickSkuList: [],
				skusInfo: [],
				curIndex: 0,
				specType: 1,
				goodsSpec: {},
				pic_url: '',
				needReal: false,
				hasActive: false,
				reducePrice: 0,
				vipInfo: {},
				canPass: false,
				canBuy: true,
				noRealName: true,
				showReal: false,
				realAddInfo: {},
				from: 0,
				use_coupons: [],
				couponId: '',
				canUseCoupon: [],
				cannotUseCoupon: [],
				showCoupon: false,
				showTaxation: false,
				tempId: 0,
				nowTime: '',
				freightGoods: [],
				showPrivacy: false,
				is_use_score: 0,
				showScore: false,
				pay_method: 'alipay',
				payList: [
					// { id: 'wxpay', icon: 'wxpay', color: '#15BA11', name: '微信支付' },
					{ id: 'alipay', icon: 'alipay', color: '#00A0EA', name: '支付宝' }
				],
				fontSize: 'small'
			})
			
			const goods = reactive({
				orders: [],
				sum: {},
				detail: {},
				oederNum: 0
			})
			
			function getNowTime() {
				let now = new Date()
				let nowYear = now.getFullYear()
				let nowMonth = now.getMonth() + 1
				let nowDay = now.getDate()
				let month = nowMonth >= 1 && nowMonth <= 9 ? '0' + nowMonth : nowMonth
				let day = nowDay >= 1 && nowDay <= 9 ? '0' + nowDay : nowDay
				
				let hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours() // 时
				let minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes() // 分
				let second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds() // 秒
				data.nowTime = nowYear + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
			}
			
			async function getDefaultAddress() {
				await get('/api/v1/address/default').then(async (res) => {
					if (res.data instanceof Array === false) {
						res.data.detail = 
							res.data.province.name +
							res.data.city.name +
							res.data.area.name +
							res.data.address
						data.originAddr = res.data
						data.addrId = res.data.id
						await checkOrder()
					}
				})
			}
			
			function openCoupon(id) {
				if(data.from === 0) {
					data.tempId = id
					data.showCoupon = true
				}
			}
			
			// 选中优惠券
			function selectCoupon(id) {
				data.tempId = data.tempId == id ? 0 : id
			}
			function handleCoupon() {
				data.showCoupon = false
				data.couponId = data.tempId
				data.use_coupons = data.tempId ? [data.tempId] : [0]
				checkOrder()
			}
			
			async function getUseCoupon(obj) {
				let params = {
					shop_id: uni.getStorageSync('shop_id'),
					shop_goods: obj,
					address: data.originAddr,
					purchase_vip: 0
				}
				await post('/api/v1/order/checkCoupons', params).then((res) => {
					data.canUseCoupon = res.data.can_use
					data.cannotUseCoupon = res.data.cannot_use
				})
			}
			
			function chooseAddress(row) {
				data.addrId = row.id
				data.originAddr = JSON.parse(JSON.stringify(row))
				data.showAddr = false
				checkOrder()
			}
			
			function fillValue(e) {
				data.keyWord = e.detail.value
			}
			
			const searchAddress = () => {
				getAddrList()
			}
			
			async function getAddrList() {
				await get('/api/v1/address', { keyword: data.keyWord}).then((res) => {
					res.data.forEach((item) => {
						item.detail = item.province.name + item.city.name + item.area.name + item.address
						if(item.id == data.addrId) {
							data.originAddr = JSON.parse(JSON.stringify(item))
						}
					})
					data.addrList = res.data
				})
			}
			
			function delBtn(id, index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该地址吗？',
					confirmColor: '#42b983',
					success(res) {
						if (res.confirm) {
							post(`/api/v1/address/${id}`, {}, 'DELETE').then((res) => {
								showToast('删除成功')
								data.addrList.splice(index, 1)
							})
						}
					}
				})
			}
			
			function toEdit(row) {
				let obj = JSON.parse(JSON.stringify(row))
				data.tempAddr = {
					id: obj.id,
					name: obj.name,
					mobile: obj.mobile,
					is_default: obj.is_default,
					province_id: obj.province_id,
					city_id: obj.city_id,
					area_id: obj.area_id,
					address: obj.address,
					postal_code: ''
				}
				data.area_id = obj.area_id
				data.area = row.province.name + row.city.name + row.area.name
				data.showEdit = true
			}
			
			function toAdd() {
				data.tempAddr = {
					id: 0,
					name: '',
					mobile: '',
					is_default: 0,
					province_id: '',
					city_id: '',
					area_id: '',
					address: '',
					postal_code: ''
				}
				data.area = ''
				data.area_id = ''
				data.showEdit = true
			}
			
			function chooseArea(e) {
				let list = e.detail.value
				data.tempAddr.province = {
					id: list[0].value,
					name: list[0].text
				}
				data.tempAddr.province_id = list[0].value
				
				data.tempAddr.city = {
					id: list[1].value,
					name: list[1].text
				}
				data.tempAddr.city_id = list[1].value
				
				data.tempAddr.area = {
					id: list[2].value,
					name: list[2].text
				}
				data.tempAddr.area_id = list[2].value
				
				data.area = list[0].text + list[1].text + list[2].text
				data.area_id = list[2].value
				data.showArea = false
			}
			
			function onChange(e) {
				data.tempAddr.is_default = e ? 1 : 0
			}
			
			function saveBtn() {
				var reg_tel = /(^1[3-9]\d{9}$)|(^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/
				if(!data.tempAddr.mobile || !reg_tel.test(data.tempAddr.mobile)) {
					showToast('请输入正确联系方式')
					return
				}
				if(data.tempAddr.id) {
					post(`/api/v1/address/${data.tempAddr.id}`, { ...data.tempAddr }, 'PUT').then(async () => {
						showToast('编辑成功')
						await getAddrList()
						data.showEdit = false
						if(data.tempAddr.id == data.originAddr.id) {
							await checkOrder()
						}
					})
				} else {
					post(`/api/v1/address`, { ...data.tempAddr }).then(() => {
						showToast('新增成功')
						getAddrList()
						data.showEdit = false
					})
				}
			}
			
			function close() {
				data.showPopup = false
				data.choose = {}
				data.addrId = 0
				data.originAddr = {}
				data.freightGoods = []
				data.chooseItem = {
					num: 1
				}
				data.message = ''
				data.needReal = false
				data.noRealName = true
				data.canPass = false
				data.couponId = ''
				data.use_coupons = []
				data.images = []
				data.specsList = []
				data.chooseIndex = []
				data.skuName = ''
				data.specType = 1
				name = []
				context.emit('close')
			}
			
			let name = []
			function chooseSku(e, index, i_index) {
				data.firstWatch = false
				data.show = false
				if (e.img) {
					data.chooseItem.pic_url = e.img
					data.chooseItem.pic_url_800 = e.img_800
					data.pic_url = e.img_800 || e.img
				}
				data.choose['v' + (index + 1) + '_id'] = data.specsList[index].value[i_index].id
				name[index] = data.specsList[index].value[i_index].value
				data.chooseIndex.push(index)
				data.chooseIndex = Array.from(new Set(data.chooseIndex))
				data.skuName = name.join('-')
			}
			
			async function getSpecList() {
				await get(`/api/v1/goods/spec/${data.goodId}`).then(async (res) => {
					data.goodsSpec = res.data
					data.viewImg = res.data.face_img
					data.mainImg = res.data.gallery || []
					data.chooseItem = {
						stock: res.data.stock,
						num: 1
					}
					data.specType = res.data.specs_type
					data.specsList = res.data.specs || []
					data.skusInfo = res.data.skus || []
					
					if(res.data.specs_type == 0) { // 单规格
						data.chooseItem.price = res.data.price
						data.chooseItem.vip_price = res.data.vip_price
						data.chooseItem.id = 0
					} else {
						if(data.specsList.length) {
							data.specsList[0].value.forEach((it) => {
								if(it.img_800){
									data.images.push(it.img_800)
								}
							})
							// 当只有一种规格时，判断是否还有库存
							if (data.specsList.length === 1) {
								var sku = []
								data.skusInfo.forEach((ress) => {
									if (ress.stock <= 0 || ress.price == 0) {
										sku.push(ress.v1_id)
									}
								})
								data.specsList.forEach((res, index) => {
									res.value.forEach((res1) => {
										if (sku.includes(res1.id)) {
											res1.show = true
										} else {
											res1.show = false
										}
									})
								})
							}
						}
						if(data.skusInfo.length > 0) {
							data.chooseItem.price = data.skusInfo[0].price
						}
						if(data.skusInfo.length == 1 && data.skusInfo[0].stock > 0) {
							data.chooseItem = JSON.parse(JSON.stringify(data.skusInfo[0]))
							data.chooseItem.num = 1
							data.choose = {
								'v1_id': data.chooseItem.v1_id
							}
							data.skuName = data.chooseItem.v1
							name = [data.chooseItem.v1]
							await checkOrder()
						}
					}
				})
			}
			
			watch(
				() => data.choose, async(newChoose) => {
					if (data.specsList.length - Object.keys(data.choose).length == 1) {
			
						// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
						data.specsList.forEach((req, i) => {
							if (data.chooseIndex.indexOf(i) == -1) {
								req.value.forEach((rej, j) => {
									data.skusInfo.forEach((ress, m) => {
										let flag = [rej.id === ress['v' + (i + 1) + '_id']]
										for (const key in data.choose) {
											flag.push(ress[key] == data.choose[key])
										}
										if (flag.findIndex(target => target === false) == -1) {
											if (ress.stock <= 0 || ress.price == 0) {
												rej.show = true
											} else {
												rej.show = false
											}
										}
									})
								})
							}
						})
					} else if (data.specsList.length == Object.keys(data.choose).length) {
						for (const key in data.choose) {
							let i = parseInt(key.substr(1, 1))
							data.specsList[i - 1].value.forEach((req) => {
								data.skusInfo.forEach((ress, m) => {
									let flag = [req.id == ress['v' + i + '_id']]
									for (const k in data.choose) {
										let j = parseInt(k.substr(1, 1))
										if (i != j) {
											flag.push(ress[k] == data.choose[k])
										}
									}
									if (flag.findIndex(target => target === false) == -1) {
										if ((ress.stock <= 0 || ress.price == 0)) {
											req.show = true
										} else {
											req.show = false
										}
									}
								})
							})
						}
					}
					if (newChoose) {
						data.show = false
					}
					if (JSON.stringify(newChoose) == '{}') {
						data.show = true
					}
					// 判断选择规格值是否完整
					for (let i = data.specsList.length; i >= 1; i--) {
						if (!newChoose['v' + i + '_id']) {
							return
						}
					}
					// 对比选中项
					let list = data.skusInfo
					list.forEach((sku, s_index) => {
						let num = data.chooseItem.num
						if (
							sku.v1_id === newChoose.v1_id &&
							sku.v2_id === newChoose.v2_id &&
							sku.v3_id === newChoose.v3_id &&
							sku.v4_id === newChoose.v4_id
						) {
							data.chooseItem = {
								...sku
							}
							if (num > 0) {
								data.chooseItem.num = num < sku.stock ? num : (sku.stock > 0 ? sku.stock : 0)
							} else if (sku.stock > 0) {
								data.chooseItem.num =
									data.goodsSpec.limit_type == 0 ?
									1 :
									data.goodsSpec.limit_type == 1 ?
									parseInt(data.goodsSpec.start_sale_num) :
									1
							} else {
								data.chooseItem.num = 0
							}
							if (sku.pic_url === 'undefined') {
								data.chooseItem.pic_url = props.skuInfo.face_img
							}
						}
					})
					await checkOrder()
				}, {
					deep: true
				}
			)
			
			const preViewImg = (img) => {
				let img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
				let imurl = img + img_preview_suffix
				if(img.indexOf('.gif') >= 0 || img.indexOf('.GIF') >= 0) {
					imurl = img
				}
				uni.previewImage({
					urls: [imurl],
					current: 0
				})
			}
			
			function changeNum(e) {
				if(data.goodsSpec.limit_type === 2 && e.value > data.goodsSpec.limit) {
					showToast('本团商品限购' + data.goodsSpec.limit + '件')
					return
				}
				data.chooseItem.num = e.value
				data.couponId = 0
				data.use_coupons = [0]
				checkOrder()
			}
			
			function plusBtn(number, index, e) {
				if (data.chooseItem.num === data.chooseItem.stock) {
					showToast('库存不足')
				}
				if (number == 0 && !data.show) {
					showToast('该商品不能低于起购件数')
				} else if (number == 1 && !data.show) {
					if (index == e) {
						showToast('已达到商品限购件数')
					} else if (index > e) {
						showToast('已达到商品限购件数')
					} else if (index != e) {
						showToast('该商品不能低于1件')
					}
				} else if (number == 2 && !data.show) {
					showToast('该商品不能低于1件')
				}
			}
			
			// 获取认证信息
			const realInfo = ref(null)
			// 获取默认地址
			function getRealInfo() {
				get('/api/v1/identityCard').then((res) => {
					realInfo.value = res.data[0] || {}
					if(res.data.length === 0) {
						data.noRealName = true
					} else {
						data.noRealName = false
					}
				})
			}
			
			function toAddReal() {
				data.realAddInfo = {
					id: realInfo.value.id,
					name: realInfo.value.name,
					cert_id: realInfo.value.cert_id
				}
				data.showReal = true
			}
			
			function openReal() {
				data.realAddInfo = {}
				data.showReal = true
			}
			
			function commitReal() {
				if(!data.realAddInfo.name || !data.realAddInfo.cert_id) {
					showToast('请填写完整信息')
					return false
				}
				let params = {
					name: data.realAddInfo.name,
					cert_id: data.realAddInfo.cert_id
				}
				if(data.realAddInfo.id) {
					post('/api/v1/identityCard/' + data.realAddInfo.id, params, 'PUT').then((res) => {
						data.showReal = false
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000,
							mask: true
						})
						data.noRealName = false
						getRealInfo()
					})
				} else {
					post('/api/v1/identityCard', params).then((res) => {
						data.showReal = false
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000,
							mask: true
						})
						data.noRealName = false
						realInfo.value = res.data
					})
				}
			}
			
			function payOrder() {
				let arr1 = name.filter((d) => d)
				if(!data.originAddr.id) {
					showToast('请选择您的收货地址')
					return
				} else if (data.specType == 1 && arr1.length < data.specsList.length) {
					showToast('请选择完整规格')
					return
				} else if (data.needReal && !realInfo.value.id) {
					showToast('所购商品为跨境商品，需进行实名认证')
					return
				} else if (data.freightGoods.length) {
					showToast('当前地址超出配送范围，请重新选择')
					return
				} else {
					commitPay()
				}
			}
			
			async function commitPay() {
				data.canBuy = false
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let goodsOrder = []
				goods.orders.forEach((it) => {
					if(it.items.length !== 0) {
						it.message = data.message
						goodsOrder.push(it)
					}
				})
				let params = {
					is_cart: 0,
					purchase_vip: 0,
					sum: goods.sum,
					orders: goodsOrder,
					address: {
						consignee: data.originAddr.name,
						mobile: data.originAddr.mobile,
						address: data.originAddr.detail,
						province_id: data.originAddr.province_id,
						city_id: data.originAddr.city_id,
						area_id: data.originAddr.area_id,
						id: data.originAddr.id
					},
					identity_card_id: 0,
					source: data.source,
					use_coupons: data.use_coupons,
					scene: uni.getEnterOptionsSync().scene,
					score_cash: data.is_use_score,
					pay_type: data.pay_method == 'wxpay' ? 1 : 2,
					channel: 'app'
				}
				if(data.needReal) {
					params.identity_card_id = realInfo.value.id
				}
				post('/api/v1/order/create', params).then(async(res) => {
					await pay(res.data.id, 0)
					data.canBuy = true
					uni.hideLoading()
				}).catch(() => {
					data.canBuy = true
				})
			}
			
			async function pay(id, isBuyVip) {
				await get(`/api/v1/pay/group/${id}`, { pay_style: 'app_pay' }).then((res) => {
					let info = {
						pay_id: res.data.pay_id,
						create_id: id,
						from: data.from,
						source: 'direct'
					}
					context.emit('back', info)
					if(data.pay_method == 'wxpay') {
						// 跳转微信小程序
						plus.share.getServices((ress) => {
							let sweixin = null
							for(let i = 0; i < ress.length; i++) {
								if(ress[i].id == 'weixin') {
									sweixin = ress[i]
								}
							}
							if(sweixin) {
								const path = res.data.jump_mini_path
								sweixin.launchMiniProgram({
									id: res.data.jump_mini_org_id, // 原始id：gh_开头 要跳转的微信小程序原始ID
									path,
									type: 0 // 默认为0, 0: 正式版 1：测试版 2：体验版
								}, (success) => {
									console.log(JSON.stringify(success))
								}, (err) => {
									console.log(err)
									data.backInfo = JSON.stringify(err)
									return uni.showToast({
										title: '请检查手机是否有微信应用~',
										icon: 'none'
									})
								})
							}
						})
					} else if(data.pay_method == 'alipay') {
						// 跳转支付宝小程序
						let alipayUrl = res.data.jump_mini_path
						// let alipayUrl = res.data.jump_mini_path + '&returnSchema=miaoxuan://'
						if (uni.getSystemInfoSync().platform == "ios") {
							alipayUrl = res.data.jump_mini_path.replace('alipays', 'alipay')
						}
						console.log(alipayUrl)
						plus.runtime.openURL(alipayUrl)
					}
				})
			}
			
			async function checkOrder() {
				let arr1 = name.filter((d) => d)
				if(!data.originAddr.id || (data.specType == 1 && arr1.length < data.specsList.length) || (data.specType == 1 && !data.chooseItem.id)) {
					data.canPass = false
				} else {
					data.canPass = true
					uni.showLoading({
						title: '加载中...'
					})
					data.originAddr.province_id = data.originAddr.province.id
					data.originAddr.city_id = data.originAddr.city.id
					data.originAddr.area_id = data.originAddr.area.id
					
					let obj = [{
						num: data.chooseItem.num,
						shop_goods_id: data.goodId,
						shop_goods_sku_id: data.chooseItem.id || 0,
						shop_group_goods_id: data.groupId,
						source_id: data.sourceId,
						source_type: data.sourceType
					}]
					let params = {
						shop_id: uni.getStorageSync('shop_id'),
						shop_goods: obj,
						address: data.originAddr,
						purchase_vip: 0,
						use_coupons: data.use_coupons,
						score_cash: data.is_use_score
					}
					await post('/api/v1/order/check', params).then((res) => {
						goods.oederNum = 0
						goods.orders = []
						data.freightGoods = []
						data.needReal = res.data.sum.has_cross_border
									
						res.data.orders.forEach((orders, ordersIndex) => {
							goods.orders[ordersIndex] = {
								...orders,
								items: []
							}
							orders.items.forEach((items, index) => {
								if (items.goods.freight_status === 1) {
									data.freightGoods.push(items)
								} else {
									goods.orders[ordersIndex].items.push(items)
									goods.oederNum += 1
								}
							})
							if(orders.actives.length !== 0) {
								data.hasActive = true
							}
						})
						goods.orders.forEach((item) => {
							if(item.items.length) {
								item.message = ''
								let expect_time0 = item.items[0] && item.items[0].delivery_expect_time
								let oneMode = true
								item.items.forEach((items, index) => {
									if(expect_time0 !== items.delivery_expect_time) {
										oneMode = false
									}
									expect_time0 = items.delivery_expect_time
								})
								item.oneMode = oneMode
							}
						})
						
						goods.sum = res.data.sum
						goods.detail = res.data.detail
						data.reducePrice = res.data.sum.expect_vip_discount_amount
						data.vipInfo = res.data.vip
						uni.hideLoading()
						getUseCoupon(obj)
					})
				}
			}
			
			async function showMap() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.chooseLocation({
					success(ress) {
						if(ress.address) {
							post('/api/v1/address/parse', {address: ress.address + ress.name}).then((res) => {
								let list = getAreaCode(res.data.province, res.data.city, res.data.region)
								data.tempAddr.province_id = list[0].code
								data.tempAddr.city_id = list[1].code
								data.tempAddr.area_id = list[2].code
								
								data.tempAddr.address = (res.data.street || '') + (res.data.addr || '')
								
								data.tempAddr.province = {
									id: list[0].code,
									name: res.data.province || ''
								}
								data.tempAddr.city = {
									id: list[1].code,
									name: res.data.city || ''
								}
								data.tempAddr.area = {
									id: list[2].code,
									name: res.data.region || ''
								}
								data.area = res.data.province + res.data.city + res.data.region
								data.area_id = list[2].code
							})
						}
					}
				})
			}
			
			function setUseScore(val) {
				data.is_use_score = val
				data.showScore = false
				checkOrder()
			}
			
			watch(props, async(newProps) => {
				if(newProps.show) {
					data.goodId = newProps.goodId
					data.groupId = newProps.groupId
					data.sourceId = newProps.sourceId
					data.sourceType = newProps.sourceType
					data.fontSize = uni.getStorageSync('font') || 'small'
					getNowTime()
					await getSpecList()
					await getDefaultAddress()
					getAddrList()
					getRealInfo()
					data.showPopup = true
				} else {
					data.showPopup = false
				}
			})
			
			return {
				parseTime,
				areaList,
				realInfo,
				compareDate,
				...toRefs(data),
				...toRefs(goods),
				getDefaultAddress,
				getNowTime,
				getAddrList,
				chooseAddress,
				fillValue,
				searchAddress,
				delBtn,
				toEdit,
				toAdd,
				chooseArea,
				onChange,
				saveBtn,
				close,
				getSpecList,
				chooseSku,
				preViewImg,
				payOrder,
				changeNum,
				plusBtn,
				getRealInfo,
				toAddReal,
				openReal,
				commitReal,
				checkOrder,
				openCoupon,
				selectCoupon,
				getUseCoupon,
				handleCoupon,
				getAreaCode,
				showMap,
				setUseScore
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		height: 75vh;
		overflow: hidden;
		font-size: 28rpx;
		.titBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			height: 90rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			text{
				font-weight: 600;
				font-size: 30rpx;
			}
			.close{
				width: 60rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.content{
			height: calc(100% - 200rpx);
			overflow: auto;
			box-sizing: border-box;
			padding-bottom: 100rpx;
			background-color: #f0f0f0;
		}
		.oneBox{
			display: flex;
			align-items: center;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			.icon{
				width: 60rpx;
				font-size: 22px;
			}
			.box{
				width: calc(100% - 60rpx);
				color: #444;
				.txt{
					margin: 4rpx 0;
				}
				text{
					font-size: 30rpx;
					font-weight: 600;
				}
				.tips{
					color: #f00;
					font-size: 24rpx;
				}
			}
		}
		.kongxin{
			margin-top: 18rpx;
			.realbox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				padding: 28rpx;
				border-radius: 10rpx;
				.cont{
					width: calc(100% - 60rpx);
					.info{
						margin-bottom: 10rpx;
						.title{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.tit{
								font-size: 30rpx;
								color: #303030;
								font-weight: 600;
							}
							.text{
								font-size: 26rpx;
								color: #98989F;
							}
						}
						.name{
							font-size: 26rpx;
							color: #000;
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
					.msg{
						font-size: 24rpx;
						color: v-bind('Color');
					}
				}
			}
		}
		.skuTop{
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #eee;
			background-color: #fff;
			.img{
				background: #bbbbbb;
				border-radius: 8rpx;
				margin-right: 24rpx;
				width: 200rpx;
				height: 200rpx;
			}
			.topInfo{
				display: flex;
				width: calc(100% - 224rpx);
				flex-direction: column;
				.title{
					margin-bottom: 10rpx;
				}
				.priceBox{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.text1{
						font-size: 32rpx;
						color: v-bind('priceColor');
						margin-right: 10rpx;
						font-weight: 600;
					}
					.vip{
						display: flex;
						align-items: center;
						font-size: 34rpx;
						color: v-bind('priceColor');
					}
					.vip-tag {
						font-size: 32rpx;
						color: #fbe6c3;
						background: #353648;
						border-radius: 20rpx 0 0 0;
						padding: 8rpx 10rpx;
						line-height: 1;
						.txt{
							font-size: 22rpx;
						}
					}
				}
				.bbox{
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.text{
					font-size: 24rpx;
					color: #999999;
					display: block;
				}
				.sel{
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}
		.skuBox{
			padding: 10rpx 24rpx 30rpx;
			border-top: 1rpx solid #eee;
			position: relative;
			background-color: #fff;
			.item{
				.tit{
					font-size: 26rpx;
					margin-top: 10rpx;
				}
				.row{
					display: flex;
					flex-wrap: wrap;
					font-size: 24rpx;
					.tag{
						display: flex;
						align-items: center;
						justify-content: center;
						color: #000;
						background-color: #f4f4f4;
						margin-right: 22rpx;
						margin-top: 20rpx;
						padding: 10rpx 18rpx;
						box-sizing: border-box;
						border-radius: 6rpx;
						&.box{
							opacity: 0.35;
						}
						.tag_img{
							width: 35rpx;
							height: 35rpx;
							margin-right: 15rpx;
						}
					}
					.choose{
						background-color: v-bind('bgColor');
						color: v-bind('Color');
						border-radius: 8rpx;
					}
				}
			}
		}
		
		.pay-price{
			background-color: #fff;
			border-top: 1rpx solid #eee;
			padding: 12rpx 24rpx 0;
			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-size: 26rpx;
				padding: 12rpx 0;
				.input {
					text-align: right;
				}
				.title {
					font-size: 28rpx;
				}
			}
			.pay-price-item-list {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				.list-title {
					display: flex;
					flex-direction: column;
				}
				.title-price {
					text-align: right;
				}
			}
		}
		
		.noticeBox{
			margin-top: 18rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			align-items: center;
			text{
				font-size: 30rpx;
				margin-right: 20rpx;
				line-height: 1;
			}
			.input{
				flex: 1;
				width: 100%;
			}
		}
		.paybtn{
			background-color: #fff;
			width: 100%;
			.box{
				background-color: v-bind('Color');
				font-size: 30rpx;
				height: 110rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				&.disabled{
					opacity: 0.65;
				}
			}
		}
	}
	.contBox{
		font-size: 28rpx;
		background-color: #F0F0F0;
		border-radius: 10px 10px 0 0;
		.topBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			height: 80rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
			border-radius: 10px 10px 0 0;
			text{
				font-weight: 600;
				font-size: 30rpx;
			}
			.close{
				width: 60rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.searchBox{
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			width: 100%;
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 50rpx;
			}
			.input{
			  font-size: 28rpx;
			  width: calc(100% - 50rpx);
			  color: #333;
			}
		}
		.BBox{
			height: calc(80vh - 200rpx);
			overflow: auto;
		}
		.addrBox{
			padding: 0 24rpx 24rpx;
			box-sizing: border-box;
			.item{
				background-color: #fff;
				margin-bottom: 24rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.row{
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #eee;
					padding: 20rpx 0;
					.icon{
						width: 60rpx;
						font-size: 20px;
					}
					.box{
						color: #444;
						flex: 1;
						.txt{
							margin: 4rpx 0;
						}
						text{
							font-size: 30rpx;
							font-weight: 600;
						}
						.default{
							padding: 4rpx 8rpx;
							font-size: 22rpx;
							color: v-bind('Color');
							border: 1px solid v-bind('Color');
							border-radius: 6rpx;
							line-height: 1;
							margin-left: 6rpx;
						}
					}
				}
				.btnBox{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 20rpx 0;
					.btn{
						margin-left: 30rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		.btmBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				border-radius: 80rpx;
				height: 80rpx;
			}
			.add{
				color: #fff;
				background-color: v-bind('Color');
			}
		}
		
		.editBox{
			height: calc(80vh - 200rpx);
			overflow: auto;
			box-sizing: border-box;
			padding: 24rpx;
		}
		.rowBox{
			padding: 0 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			.row{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				height: 90rpx;
				text {
					width: 160rpx;
					flex-shrink: 0;
					font-size: 30rpx;
					font-weight: bold;
				}
				input {
					flex: 1;
				}
				.area {
					display: flex;
					align-items: center;
					flex: 1;
					justify-content: space-between;
					width: calc(100% - 160rpx);
					.icon{
						width: 60rpx;
						text-align: center;
					}
				}
				.picker{
					width: calc(100% - 60rpx);
					overflow: hidden;
				}
				&:not(:last-child) {
					border-bottom: 2rpx solid #e5e5e5;
				}
			}
		}
		.defaultbox{
			font-size: 26rpx;
			color: #666;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
		}
		.savebtn{
			width: 94%;
			height: 85rpx;
			line-height: 85rpx;
			background-color: v-bind('Color');
			border-radius: 43rpx;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			margin: 20rpx auto;
		}
	}
	
	.refTitle{
		font-size: 30rpx;
		color: #000;
		padding: 0 0 30rpx;
		font-weight: bold;
		position: relative;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.mesg{
		font-size: 24rpx;
		color: #303030;
		line-height: 46rpx;
		font-weight: 600;
	}
	.iknow{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 80rpx;
	}
	.realBox{
		padding: 0 0 60rpx;
		.input{
			background: #F5F5F5;
			width: 100%;
			height: 80rpx;
			margin: 20rpx 0;
			color: #333;
			padding: 0 20rpx;
			border-radius: 8rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}
	
	.youhuiBox{
		margin-top: 24rpx;
		padding: 14rpx 0;
		background: #fff;
		box-sizing: border-box;
		.box1{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.quanbox{
			font-weight: normal;
		}
	}
	.quanbox{
		display: flex;
		align-items: center;
		font-weight: bold;
		.quan{
			width: 36rpx;
			height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			background: #F14939;
			color: #fff;
			margin-right: 10rpx;
		}
		text{
			font-size: 28rpx;
			color: #444;
		}
	}
	.couponBox {
		.item{
			display: flex;
			align-items: center;
			background-color: #ffffff;
			margin: 20rpx 0;
			padding: 30rpx 0;
			border-radius: 8rpx;
		}
		.coupon-left {
			width: 200rpx;
			border-right: 2rpx dashed #f0f0f0;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.sign {
				font-size: 36rpx;
			}
			.money {
				font-size: 42rpx;
			}
			.title {
				font-size: 28rpx;
				padding: 10rpx 16rpx 0;
			}
		}
		.coupon-right {
			width: calc(100% - 200rpx);
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.coupon-text {
				width: calc(100% - 150rpx);
				.text {
					font-size: 32rpx;
					margin-bottom: 10px;
					font-weight: 500;
					padding-right: 20rpx;
					&.chang{
						font-size: 32rpx;
					}
				}
				.time {
					font-size: 24rpx;
					color: #98989f;
				}
			}
		}
		.textColor {
			color: #333333;
		}
		.textColor1 {
			color: v-bind('priceColor');
		}
		.textColor2 {
			color: #98989f;
		}
	}
	.sumActive{
		margin: 24rpx 0 0;
		padding: 10rpx 24rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-sizing: border-box;
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
			.label{
				width: 72rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				background: #F14939;
				color: #fff;
				margin-right: 10rpx;
				border-radius: 6rpx;
			}
			.name{
				font-size: 28rpx;
				color: #444;
			}
			.amount{
				font-size: 30rpx;
				font-weight: 600;
				color: #f14939;
			}
		}
	}
	.trans_detail{
		background: #ffffff;
		border-radius: 10rpx;
		padding: 0 24rpx 12rpx;
		font-size: 28rpx;
		.tit{
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.row{
			padding: 14rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.red{
				color: v-bind('priceColor');
				text{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
		.row1{
			font-size: 28rpx;
			display: flex;
			align-items: center;
			padding: 14rpx 0;
			.title {
				font-size: 28rpx;
			}
			.list-title{
				display: flex;
				flex-direction: column;
			}
			.title-price{
				text-align: right;
			}
		}
	}
	.scoreBox{
		height: 600rpx;
		padding: 24rpx;
		box-sizing: border-box;
		.row{
			padding: 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
		}
	}
	.coupon_icon{
		margin-right: 10rpx;
		width: 17px;
		height: 17px;
		background-repeat: no-repeat;
		background-size: 678px 612px;
		background-position: -36px -207.5px;
	}
	.active_move{
		width: 100%;
		font-size: 28rpx;
		color: #f14939;
		padding: 6rpx 0;
		.name{
			padding: 4rpx 10rpx;
			line-height: 1;
			font-size: 24rpx;
			border: 1px solid #f14939;
		}
		.price{
			font-size: 28rpx;
		}
	}
	.reTitle{
		font-size: 30rpx;
		color: #000;
		padding: 0 30rpx;
		height: 80rpx;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e5e5e5;
		background-color: #F6F6F6;
		border-radius: 10px 10px 0 0;
		.close{
			width: 60rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.box_btn{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		border-radius: 10rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
	}
	.iconfont{
		font-size: 20px;
	}
	.icon-checked{
		color: v-bind('Color');
	}
	.whole.large{
		.titBox{
			text{font-size: 36rpx;}
		}
		.oneBox{
			font-size: 34rpx;
			text{
				font-size: 36rpx;
			}
		}
		.skuTop{
			.title{font-size: 36rpx;}
			.priceBox{
				.vip{
					font-size: 40rpx;
				}
			}
			.sel{
				font-size: 34rpx;
			}
			.bbox{
				.text{
					font-size: 34rpx;
				}
			}
		}
		.skuBox{
			.tit{font-size: 34rpx;}
			.row{font-size: 34rpx;}
		}
		.pay-price-item{
			font-size: 34rpx;
			.title{font-size: 34rpx;}
		}
		.noticeBox{
			font-size: 34rpx;
			.tit{font-size: 34rpx;}
		}
		.trans_detail{
			font-size: 34rpx;
		}
	}
	.payBox{
		background: #ffffff;
		padding: 10rpx 30rpx;
		border-top: 1rpx solid #eee;
		font-size: 28rpx;
		.row{
			padding: 20rpx 0;
			.logo{
				font-size: 16px;
				margin-right: 10rpx;
				display: inline-block;
				width: 20px;
				text-align: center;
			}
		}
	}
</style>