1993 lines
54 KiB
Vue
1993 lines
54 KiB
Vue
<template>
|
||
<scroll-view class="pay" v-if="loading" :scroll-y="isScroll" :class="showCoupon ? 'hidden' : ''">
|
||
<view class="pay-none" @click="chooseAddress" v-if="!address">
|
||
<view class="plus">
|
||
<up-icon name="plus" color="#5780B0" size="16"/>
|
||
<text>添加收货地址</text>
|
||
</view>
|
||
</view>
|
||
<view class="pay-address" v-else>
|
||
<view class="pay-address-info">
|
||
<view class="left">
|
||
<up-icon class="icon" size="25" :color="Color" name="map-fill" />
|
||
<view class="">
|
||
<view>
|
||
<text class="name">{{address.name}}</text>
|
||
<text class="text">{{address.mobile}}</text>
|
||
</view>
|
||
<view class="address text">{{address.detailedAddress}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" @click="chooseAddress">修改</view>
|
||
</view>
|
||
<view class="tip">请确认收货地址，如需更换，请点击右侧按钮更换</view>
|
||
</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">实名认证 <up-icon name="info-circle" /></view>
|
||
<view class="text" @click="openReal()" v-if="noRealName">添加认证信息 <up-icon name="arrow-right" /></view>
|
||
</view>
|
||
<view class="name" v-if="!noRealName" @click="toAddReal()">
|
||
<text>{{realInfo.name}} {{realInfo.cert_id}}</text>
|
||
<up-icon name="arrow-right" />
|
||
</view>
|
||
</view>
|
||
<view class="msg">*为保证顺利清关，请确保实名认证和付款人信息一致</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 有效商品 -->
|
||
<block v-for="(order, index) in goods.orders" :key="index">
|
||
<view class="goods box" v-if="order.items.length > 0 && !order.items[0].is_add">
|
||
<view class="pay-goods">
|
||
<block v-for="(item, i) in order.items" :key="i">
|
||
<template v-if="!item.is_add">
|
||
<!-- 赠品 -->
|
||
<view class="item" v-if="item.goods.is_gift == 1">
|
||
<image :src="item.goods.sku.pic_url || item.goods.face_img" mode="aspectFill"></image>
|
||
<view class="tag">福利品</view>
|
||
<view class="flexBox">
|
||
<view class="txtBox">{{item.goods.title}}</view>
|
||
<view class="price">
|
||
<text>￥{{item.price}}</text>
|
||
<view @click="checkedGifts(item.goods.goods_id)">
|
||
<span v-if="gift_ids && gift_ids.indexOf(item.goods.goods_id) >= 0" class="iconfont icon-checked"></span>
|
||
<span v-else class="iconfont icon-circle"></span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item" v-else>
|
||
<image :src="item.goods.sku.pic_url || item.goods.face_img" mode="aspectFill"></image>
|
||
<view class="info">
|
||
<view class="info-name box1">
|
||
<view class="name">
|
||
<view class="kuajing" v-if="item.goods.is_cross_border === 1">跨境包税</view>
|
||
<view class="kuajing" v-else-if="item.goods.overseas_direct_mail === 1">海外直邮</view>{{item.goods.title}}
|
||
</view>
|
||
<view class="price">
|
||
<text class="icon">￥</text>
|
||
<text>{{item.price}}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.goods.limit_type == 1" class="box_number">
|
||
{{item.goods.start_sale_num}}件起购</view>
|
||
<view v-if="item.goods.limit_type == 2" class="box_number">限购{{item.goods.limit}}件</view>
|
||
<view class="info-num box1" style="margin-top: 10rpx;">
|
||
<view class="text">
|
||
<text>{{item.goods.sku.v1}}</text>
|
||
<text v-if="item.goods.sku.v2">-{{item.goods.sku.v2}}</text>
|
||
<text v-if="item.goods.sku.v3">-{{ item.goods.sku.v3}}</text>
|
||
<text v-if="item.goods.sku.v4">-{{ item.goods.sku.v4}}</text>
|
||
</view>
|
||
|
||
<template v-if="from === 0">
|
||
<template v-if="item.goods.limit_type == 1">
|
||
<up-number-box
|
||
v-model="item.num"
|
||
:min="parseInt(item.goods.start_sale_num)"
|
||
:max="item.goods.specs_type === 1 ? (item.goods.sku.stock <= 0 ? 0 : item.goods.sku.stock) : (item.goods.stock <= 0 ? 0 : item.goods.stock)"
|
||
@overlimit="plusBtn(1)"
|
||
disabledInput
|
||
bgColor="#f2f3f5"
|
||
:longPress="false"
|
||
:asyncChange="true"
|
||
@change="changeNum($event, item, index, i)">
|
||
</up-number-box>
|
||
</template>
|
||
|
||
<template v-else-if="item.goods.limit_type == 2">
|
||
<up-number-box
|
||
v-model="item.num"
|
||
:min="1"
|
||
:max="parseInt(item.goods.limit)"
|
||
@overlimit="plusBtn(2, item.num ,item.goods.limit)"
|
||
disabledInput
|
||
bgColor="#f2f3f5"
|
||
:longPress="false"
|
||
:asyncChange="true"
|
||
@change="changeNum($event, item, index, i)">
|
||
</up-number-box>
|
||
</template>
|
||
<template v-else>
|
||
<up-number-box
|
||
v-model="item.num"
|
||
:min="1"
|
||
:max="item.goods.specs_type === 1 ? (item.goods.sku.stock <= 0 ? 0 : item.goods.sku.stock) : (item.goods.stock <= 0 ? 0 : item.goods.stock)"
|
||
@overlimit="plusBtn(0, (item.goods.stock <= 0 ? 0 : item.goods.stock))"
|
||
disabledInput
|
||
bgColor="#f2f3f5"
|
||
:longPress="false"
|
||
:asyncChange="true"
|
||
@change="changeNum($event, item, index, i)">
|
||
</up-number-box>
|
||
</template>
|
||
</template>
|
||
<text v-else>x1</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</block>
|
||
|
||
|
||
</view>
|
||
<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">进口税 <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 class="pay-price-item-list" 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>
|
||
<view class='active_move' v-if="order.actives && order.actives.length > 0">
|
||
<view v-for="(val ,index) in order.actives" :key='val.id' style="margin-bottom: 10px;" class="flex">
|
||
<text class="active_movename">活动优惠</text>
|
||
<text class="active_moveparice">{{val.name}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新增优惠券信息 -->
|
||
<view class="pay-price-item" v-if="order.use_coupon.length !== 0">
|
||
<!-- 普通优惠券 -->
|
||
<view class="flex1" 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 class="flex1" 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 class="flex1" style="color: #F14939;" @click="openCoupon(order.coupon_id)">
|
||
<text style="font-weight: 600;">-￥{{order.use_coupon.amount}}</text>
|
||
<up-icon name="arrow-right" v-if="from === 0" color="#F14939" />
|
||
</view>
|
||
</view>
|
||
<view class="pay-price-item">
|
||
<text class="title">备注</text>
|
||
<input class="input" v-model="order.message" placeholder="请填写您的要求" @blur="isScroll = true" @focus="isScroll = false" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 优惠详情 -->
|
||
<view class="youhuiBox" v-if="goods.sum.use_coupon && goods.sum.use_coupon.length !== 0">
|
||
<view v-for="it in goods.sum.use_coupon" :key="it.id" class="box1">
|
||
<view class="flex1" 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 class="flex1" 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 class="flex1" style="color: #F14939;" @click="openCoupon(it.id)">
|
||
<text style="font-weight: 600;font-size: 30rpx;">-￥{{it.amount}}</text>
|
||
<up-icon name="arrow-right" v-if="from === 0" color="#F14939" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未使用优惠券且有优惠券可用 -->
|
||
<view class="youhuiBox" v-if="couponId === 0 && canUseCoupon.length && from === 0">
|
||
<view class="box1">
|
||
<view class="quanbox"><view class="quan">券</view></view>
|
||
<view class="flex1" style="color: #F14939;" @click="openCoupon(0)">
|
||
<text style="font-size: 28rpx;">有优惠券可用</text>
|
||
<up-icon name="arrow-right" color="#F14939" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sumActive" v-if="goods.sum && goods.sum.actives && goods.sum.actives.length > 0">
|
||
<view class="row" v-for="(val, index) in goods.sum.actives" :key="val.id">
|
||
<view class="flex1">
|
||
<view class="label">活动</view>
|
||
<text class="name">{{val.name}}</text>
|
||
</view>
|
||
<text class="amount" v-if="val.type === 2">-￥{{val.amount}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="onTheGo" v-if="theGoGoods.length">
|
||
<view class="tit">
|
||
<view class="text">顺手<text>买1件</text></view>
|
||
<view class="huan" @click="changeGoods()" v-if="theGoGoods.length !== 1"><span class="iconfont icon-huanyihuan"></span>换一换</view>
|
||
</view>
|
||
<view class="spBox">
|
||
<image :src="curGoGoods.shop_goods.face_img" mode="aspectFill" @click="toGroup"></image>
|
||
<view class="txtBox" @click="toGroup">
|
||
<view class="tt">
|
||
<view class="name">{{curGoGoods.shop_goods.title}}</view>
|
||
<view class="sku" v-if="curGoGoods.shop_goods_sku && curGoGoods.shop_goods_sku.sku">
|
||
<text>{{curGoGoods.shop_goods_sku.sku.v1}}</text>
|
||
<text v-if="curGoGoods.shop_goods_sku.sku.v2">-{{curGoGoods.shop_goods_sku.sku.v2}}</text>
|
||
<text v-if="curGoGoods.shop_goods_sku.sku.v3">-{{curGoGoods.shop_goods_sku.sku.v3}}</text>
|
||
<text v-if="curGoGoods.shop_goods_sku.sku.v4">-{{curGoGoods.shop_goods_sku.sku.v4}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="price">
|
||
<text class="prefix">￥</text>
|
||
<text v-if="curGoGoods.shop_goods_sku">{{curGoGoods.shop_goods_sku.price}}</text>
|
||
<text v-else>{{curGoGoods.shop_goods.price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="icon" @click="checkedTheGo()">
|
||
<span v-if="theChecked" class="iconfont icon-checked"></span>
|
||
<span v-else class="iconfont icon-circle"></span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="trans_detail" v-if="goods.sum.goods_price * 1">
|
||
<view class="tit">交易明细</view>
|
||
<view class="row">
|
||
<text>商品总价</text>
|
||
<text>￥{{goods.sum.goods_price}}</text>
|
||
</view>
|
||
<view class="row" v-if="goods.sum.active_discount_amount * 1">
|
||
<text>活动优惠</text>
|
||
<text class="red">-￥{{goods.sum.active_discount_amount}}</text>
|
||
</view>
|
||
<view class="row" v-if="goods.sum.coupon_price * 1">
|
||
<text>优惠券</text>
|
||
<text class="red">-￥{{goods.sum.coupon_price}}</text>
|
||
</view>
|
||
<view class="row" v-if="goods.sum.freight_price * 1">
|
||
<text>运费</text>
|
||
<text>￥{{goods.sum.freight_price}}</text>
|
||
</view>
|
||
<view class="row" @click="checkedVal = 1, showScore = true" v-if="goods.detail.score_cash_type">
|
||
<text>积分</text>
|
||
<view class="red">
|
||
<template v-if="is_use_score">使用{{goods.sum.useScore}}积分抵扣，-￥{{goods.sum.deductionProfit}}</template>
|
||
<template v-else><text>可用{{goods.detail.useScore}}积分，抵{{goods.detail.deductionProfit}}元 </text>去使用</template>
|
||
<up-icon name="arrow-right" size="14" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="payBox">
|
||
<view class="row flex" v-for="it in payList" :key="it.id" @click="pay_method = it.id">
|
||
<view class="flex1">
|
||
<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 class="">返回信息：{{backInfo}}</view> -->
|
||
|
||
<view class="goods box" v-if="freightGoods.length">
|
||
<view class="pay-title" style="color: #F14939;" v-if="address">以下商品无法购买(不在配送范围内)</view>
|
||
<view class="pay-goods">
|
||
<view class="item" v-for="item in freightGoods">
|
||
<image :src="item.goods.sku.pic_url || item.goods.face_img"></image>
|
||
<view class="info">
|
||
<view class="info-name box1">
|
||
<text class="name">{{item.goods.title}}</text>
|
||
<view class="price">
|
||
<text class="icon">￥</text>
|
||
<text>{{item.price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-num box1">
|
||
<view class="text">
|
||
<text>{{item.goods.sku.v1}}</text>
|
||
<text v-if="item.goods.sku.v2">-{{item.goods.sku.v2}}</text>
|
||
<text v-if="item.goods.sku.v3">-{{ item.goods.sku.v3}}</text>
|
||
</view>
|
||
<view class="num">x{{item.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="openvip" v-if="isShowOpen && !hasActive" @click="selectVip">
|
||
<view class="left">
|
||
<view class="sheng">省</view>会员价本单再减{{reducePrice}}元
|
||
</view>
|
||
<view class="right">{{vipInfo.vip_name}}￥{{vipInfo.vip_price}}元/{{vipInfo.vip_type == 1 ? '月' : '年'}}
|
||
<view class="xuanzhe">
|
||
<span v-if="isChecked" class="iconfont icon-checked"></span>
|
||
<span v-else class="iconfont icon-circle"></span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交订单 -->
|
||
<view class="pay-btn">
|
||
<view class="flex1">
|
||
<text class="text">合计：</text>
|
||
<view class="price">
|
||
<view class="icon">￥<text>{{goods.sum.total_price}}</text></view>
|
||
<view class="reduce" v-if="goods.sum.total_discount_amount * 1">共减￥{{goods.sum.total_discount_amount}}</view>
|
||
</view>
|
||
</view>
|
||
<text class="btn" @click="payBtn()">提交订单</text>
|
||
</view>
|
||
|
||
<!-- 了解实名认证 -->
|
||
<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="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-modal :show="showAuth" :showCancelButton="false" :showConfirmButton="false">
|
||
<view>
|
||
<view class="authMesg">您需通过手机号码或者昵称头像完成小程序授权，才能继续购买</view>
|
||
<view style="padding: 50rpx;">
|
||
<button class="authBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event)">获取手机号码</button>
|
||
<view class="authBtn" @click="toUpdateNickName()">更新昵称头像</view>
|
||
<view class="cancelAuth" @click="showAuth = 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>
|
||
|
||
<view class="lineBox"></view>
|
||
|
||
<!-- 选择优惠券 -->
|
||
<up-popup :show="showCoupon" class="popupbox" :round="10" mode="bottom" @close="showCoupon = false" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
|
||
<view class="reTitle">
|
||
<text>优惠券</text>
|
||
<view @click="showCoupon = false">
|
||
<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">确 定</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>
|
||
<up-icon name="close" color="#777" size="20" @click="showScore = false"/>
|
||
</view>
|
||
<view class="scoreBox">
|
||
<view class="row" @click="checkedVal = 1">
|
||
<view class="text">使用{{goods.detail.useScore}}积分抵{{goods.detail.deductionProfit}}元</view>
|
||
<up-icon v-if="checkedVal === 1" name="checkmark-circle-fill" :color="Color" size="20" />
|
||
<up-icon v-else name="checkmark-circle" color="#999999" size="20" />
|
||
</view>
|
||
<view class="row" @click="checkedVal = 0">
|
||
<view class="text">不使用</view>
|
||
<up-icon v-if="checkedVal === 0" name="checkmark-circle-fill" :color="Color" size="20" />
|
||
<up-icon v-else name="checkmark-circle" color="#999999" size="20" />
|
||
</view>
|
||
</view>
|
||
<view style="padding: 30rpx;box-sizing: border-box;">
|
||
<view @click="setUseScore()" class="box_btn">确 定</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, watch } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import { goodsItem, showToast, getUserInfo, getUserPhone, compareDate } from '@/components/common.js'
|
||
import { Style } from '@/utils/list.js'
|
||
import { sp2 } from '@/components/img.js'
|
||
|
||
export default {
|
||
setup() {
|
||
const data = reactive({
|
||
sp2: sp2,
|
||
is_cart: '',
|
||
shop_goods: uni.getStorageSync('shopGoods'),
|
||
loading: false,
|
||
isScroll: true,
|
||
freightGoods: [],
|
||
is_vip: uni.getStorageSync('is_vip'),
|
||
vip_on: uni.getStorageSync('vip_on'),
|
||
is_authorized: uni.getStorageSync('is_authorized'),
|
||
activeName: [],
|
||
isShowOpen: false,
|
||
reducePrice: 0,
|
||
isChecked: false,
|
||
vipInfo: {},
|
||
needReal: false,
|
||
noRealName: true,
|
||
showKnow: false,
|
||
showTaxation: false,
|
||
showAuth: false,
|
||
showReal: false,
|
||
realAddInfo: {},
|
||
hasActive: false,
|
||
source: '',
|
||
nowTime: '',
|
||
lastId: 0,
|
||
first: true,
|
||
couponId: '',
|
||
canUseCoupon: [],
|
||
cannotUseCoupon: [],
|
||
showCoupon: false,
|
||
use_coupons: [],
|
||
from: 0,
|
||
Color: uni.getStorageSync('theme_color'),
|
||
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
||
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
canBuy: true,
|
||
tempId: 0,
|
||
gift_ids: null,
|
||
firstLoad: true, // 标识首次执行/check接口赋值赠品id
|
||
theChecked: false,
|
||
theGoGoods: [],
|
||
curGoGoods: {},
|
||
curGoIndex: 0,
|
||
is_use_score: 0,
|
||
showScore: false,
|
||
checkedVal: 1,
|
||
backInfo: '',
|
||
pay_method: 'alipay',
|
||
payList: [
|
||
// { id: 'wxpay', icon: 'wxpay', color: '#15BA11', name: '微信支付' },
|
||
{ id: 'alipay', icon: 'alipay', color: '#00A0EA', name: '支付宝' }
|
||
],
|
||
pay_id: '',
|
||
create_id: 0
|
||
})
|
||
|
||
// 检查订单
|
||
const goods = reactive({
|
||
orders: [],
|
||
sum: {},
|
||
oederNum: 0,
|
||
detail: {}
|
||
})
|
||
|
||
const to_VipPage = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/vip/mine/index'
|
||
})
|
||
}
|
||
|
||
const plusBtn = (type, index, e) => {
|
||
if (type === 0) {
|
||
if (index <= 1) {
|
||
showToast('已达到该商品最大件数')
|
||
} else {
|
||
showToast('该商品不能低于1件')
|
||
}
|
||
} else if (type === 1) {
|
||
showToast('该商品不能低于起购数')
|
||
} else {
|
||
if (index == e) {
|
||
showToast('已达到商品限购件数')
|
||
} else if (index > e) {
|
||
showToast('已达到商品限购件数')
|
||
} else if (index != e) {
|
||
showToast('该商品不能低于1件')
|
||
}
|
||
}
|
||
}
|
||
async function checkOrder(val = 1) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
let res = await post('/api/v1/order/check', {
|
||
shop_id: 1,
|
||
shop_goods: data.shop_goods,
|
||
address: address.value,
|
||
purchase_vip: data.isChecked ? 1 : 0,
|
||
use_coupons: data.use_coupons,
|
||
gift_goods_ids: data.gift_ids,
|
||
score_cash: data.is_use_score
|
||
})
|
||
if (res.code == 0) {
|
||
uni.hideLoading()
|
||
}
|
||
goods.oederNum = 0
|
||
goods.orders = []
|
||
data.freightGoods = []
|
||
data.needReal = res.data.sum.has_cross_border
|
||
if(val == 0 && !data.needReal) {
|
||
getRandomGoods(res.data.orders)
|
||
}
|
||
|
||
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(items.goods.is_gift == 0) {
|
||
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
|
||
if(data.firstLoad) {
|
||
data.gift_ids = res.data.gift_goods_ids
|
||
}
|
||
data.firstLoad = false
|
||
data.reducePrice = res.data.sum.expect_vip_discount_amount
|
||
data.vipInfo = res.data.vip
|
||
data.first = false
|
||
}
|
||
|
||
// 选择地址
|
||
const address = ref(null)
|
||
// 获取默认地址
|
||
async function getAddress() {
|
||
await get('/api/v1/address/default').then((res) => {
|
||
if (res.data.id) {
|
||
res.data.detailedAddress =
|
||
res.data.province.name +
|
||
res.data.city.name +
|
||
res.data.area.name +
|
||
res.data.address
|
||
address.value = res.data
|
||
data.lastId = res.data.id
|
||
}
|
||
})
|
||
}
|
||
|
||
async function getUseCoupon() {
|
||
let params = {
|
||
shop_id: 1,
|
||
shop_goods: data.shop_goods,
|
||
address: address.value,
|
||
purchase_vip: data.isChecked ? 1 : 0
|
||
}
|
||
await post('/api/v1/order/checkCoupons', params).then((res) => {
|
||
data.canUseCoupon = res.data.can_use
|
||
data.cannotUseCoupon = res.data.cannot_use
|
||
})
|
||
}
|
||
|
||
// 在进入到地址列表之后将地址删除再次返回之后，原来地址信息还存在的场景
|
||
function isHasAddress() {
|
||
let flag = false
|
||
if(data.lastId) {
|
||
get('/api/v1/address').then((res) => {
|
||
res.data.forEach((it) => {
|
||
if(it.id === data.lastId) {
|
||
flag = true
|
||
}
|
||
})
|
||
if(!flag) {
|
||
address.value = null
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 重新选择地址
|
||
function chooseAddress() {
|
||
let url = '/pages/address/list/index?type=1'
|
||
if (address.value) {
|
||
url += `&id=${address.value.id}`
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
watch(address, async(newValue, oldValue) => {
|
||
data.lastId = newValue.id || ''
|
||
if(!data.first) {
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
})
|
||
|
||
watch(() => data.showCoupon, (newData) => {
|
||
data.isScroll = !newData
|
||
}, {
|
||
deep: true
|
||
})
|
||
|
||
// 修改数量
|
||
async function changeNum(e, item, index, i) {
|
||
for (let i = 0; i < data.shop_goods.length; i++) {
|
||
if (
|
||
data.shop_goods[i].shop_goods_id === item.shop_goods_id &&
|
||
data.shop_goods[i].shop_group_goods_id === item.shop_group_goods_id &&
|
||
data.shop_goods[i].shop_goods_sku_id === item.shop_goods_sku_id
|
||
) {
|
||
data.shop_goods[i].num = e.value
|
||
break
|
||
}
|
||
}
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
|
||
// 创建订单
|
||
async function payBtn() {
|
||
if (!address.value) {
|
||
showToast('请选择收货地址')
|
||
return
|
||
}
|
||
if (data.needReal && !realInfo.value.id) {
|
||
showToast('所购商品有跨境商品，需进行实名认证')
|
||
return
|
||
}
|
||
if (goods.oederNum === 0 || !data.canBuy) {
|
||
return
|
||
}
|
||
data.canBuy = false
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
})
|
||
let goodsOrder = []
|
||
goods.orders.forEach((itm) => {
|
||
let obj = JSON.parse(JSON.stringify(itm))
|
||
obj.items = []
|
||
for (let i = 0; i < itm.items.length; i++) {
|
||
let it = itm.items[i]
|
||
if(it.goods.is_gift == 0 || (it.goods.is_gift == 1 && data.gift_ids.indexOf(it.goods.goods_id) >= 0)) {
|
||
obj.items.push(it)
|
||
}
|
||
}
|
||
if(obj.items.length !== 0) {
|
||
goodsOrder.push(obj)
|
||
}
|
||
})
|
||
let params = {
|
||
is_cart: data.is_cart,
|
||
purchase_vip: data.isChecked,
|
||
sum: goods.sum,
|
||
orders: goodsOrder,
|
||
address: {
|
||
consignee: address.value.name,
|
||
mobile: address.value.mobile,
|
||
address: address.value.detailedAddress,
|
||
province_id: address.value.province_id,
|
||
city_id: address.value.city_id,
|
||
area_id: address.value.area_id,
|
||
id: address.value.id
|
||
},
|
||
identity_card_id: 0,
|
||
source: data.source,
|
||
use_coupons: data.use_coupons,
|
||
scene: uni.getEnterOptionsSync().scene,
|
||
gift_goods_ids: data.gift_ids,
|
||
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) => {
|
||
uni.removeStorageSync('shopGoods')
|
||
let pages = getCurrentPages()
|
||
let prevPage = pages[pages.length - 2]
|
||
if (prevPage.route === 'pages/groups/index') {
|
||
} else {
|
||
prevPage.$vm.checked = []
|
||
prevPage.$vm.checkAll = false
|
||
}
|
||
uni.hideLoading()
|
||
await pay(res.data.id, data.isChecked)
|
||
data.canBuy = true
|
||
// uni.hideLoading()
|
||
}).catch(() => {
|
||
data.canBuy = true
|
||
})
|
||
}
|
||
async function pay(id, isBuyVip) {
|
||
data.backInfo = ''
|
||
await get(`/api/v1/pay/group/${id}`, { pay_style: 'app_pay' }).then((res) => {
|
||
data.pay_id = res.data.pay_id
|
||
data.create_id = id
|
||
getNum()
|
||
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) => {
|
||
data.backInfo = 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 selectVip() {
|
||
data.isChecked = !data.isChecked
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
const { getNum } = goodsItem()
|
||
|
||
// 获取认证信息
|
||
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() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/realName/list?from=1'
|
||
})
|
||
}
|
||
|
||
function openReal() {
|
||
data.realAddInfo = {}
|
||
data.showReal = true
|
||
}
|
||
|
||
function toUpdateNickName() {
|
||
data.showAuth = false
|
||
uni.navigateTo({
|
||
url: '/pages/user/info'
|
||
})
|
||
}
|
||
|
||
// 授权手机号码
|
||
async function getPhoneNumber(e) {
|
||
if(e.detail.errMsg == 'getPhoneNumber:ok') {
|
||
await getUserPhone(e.detail).then((res) => {
|
||
data.is_authorized = 1
|
||
})
|
||
}
|
||
}
|
||
|
||
function commitReal() {
|
||
if(!data.realAddInfo.name || !data.realAddInfo.cert_id) {
|
||
showToast('请填写完整信息')
|
||
return false
|
||
}
|
||
post('/api/v1/identityCard', data.realAddInfo).then((res) => {
|
||
data.showReal = false
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
duration: 1000,
|
||
mask: true
|
||
})
|
||
data.noRealName = false
|
||
realInfo.value = res.data
|
||
})
|
||
}
|
||
|
||
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
|
||
}
|
||
|
||
function parseTime(time) {
|
||
let month = Number(time.substr(0, 10).split('-')[1])
|
||
let day = Number(time.substr(0, 10).split('-')[2])
|
||
return month + '月' + day + '日'
|
||
}
|
||
|
||
// 打开优惠券
|
||
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 checkedGifts(id) {
|
||
let index = data.gift_ids.indexOf(id)
|
||
if(index >= 0) {
|
||
data.gift_ids.splice(index, 1)
|
||
} else {
|
||
data.gift_ids.push(id)
|
||
}
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
|
||
async function changeGoods() {
|
||
data.curGoIndex = data.curGoIndex == data.theGoGoods.length - 1 ? 0 : data.curGoIndex + 1
|
||
data.curGoGoods = data.theGoGoods[data.curGoIndex]
|
||
if(data.theChecked) {
|
||
data.theChecked = false
|
||
let list = JSON.parse(JSON.stringify(data.shop_goods))
|
||
data.shop_goods = []
|
||
for (var i = 0; i < list.length; i++) {
|
||
if(!list[i].is_add) {
|
||
data.shop_goods.push(list[i])
|
||
}
|
||
}
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
}
|
||
|
||
async function checkedTheGo() {
|
||
data.theChecked = !data.theChecked
|
||
if(data.theChecked) {
|
||
let params = {
|
||
shop_goods_id: data.curGoGoods.shop_goods_id,
|
||
shop_goods_sku_id: data.curGoGoods.shop_goods_sku_id || 0,
|
||
num: 1,
|
||
shop_group_goods_id: data.curGoGoods.shop_group_goods_id,
|
||
source_id: 0,
|
||
source_type: 'normal',
|
||
is_add: true
|
||
}
|
||
data.shop_goods.push(params)
|
||
} else {
|
||
let list = JSON.parse(JSON.stringify(data.shop_goods))
|
||
data.shop_goods = []
|
||
for (var i = 0; i < list.length; i++) {
|
||
if(!list[i].is_add) {
|
||
data.shop_goods.push(list[i])
|
||
}
|
||
}
|
||
}
|
||
await checkOrder()
|
||
getUseCoupon()
|
||
}
|
||
|
||
async function getRandomGoods(list) {
|
||
let goodsIds = []
|
||
list.forEach((itm) => {
|
||
itm.items.forEach((it) => {
|
||
goodsIds.push(it.shop_goods_id)
|
||
})
|
||
})
|
||
await post('/api/v1/recommend/goods/v2', {goods_ids: goodsIds}).then((res) => {
|
||
data.theGoGoods = res.data
|
||
data.curGoGoods = data.theGoGoods[0]
|
||
})
|
||
}
|
||
|
||
function toGroup() {
|
||
uni.navigateTo({ url: '/pages/groups/index?id=' + data.curGoGoods.shop_group_goods_id })
|
||
}
|
||
|
||
function setUseScore() {
|
||
data.is_use_score = data.checkedVal == 1
|
||
data.showScore = false
|
||
checkOrder()
|
||
}
|
||
|
||
function isPayOrder() {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
})
|
||
get(`/api/v1/pay/check/${data.pay_id}`).then((res) => {
|
||
uni.hideLoading()
|
||
if(res.data.status) {
|
||
uni.redirectTo({
|
||
url: '/pages/success/index?id=' + data.create_id + '&type=1&pay_id=' + data.pay_id + '&from=0'
|
||
})
|
||
} else {
|
||
showToast('支付失败')
|
||
uni.redirectTo({ url: '/pages/order/list/index' })
|
||
}
|
||
})
|
||
}
|
||
|
||
return {
|
||
realInfo,
|
||
...toRefs(data),
|
||
plusBtn,
|
||
goods,
|
||
checkOrder,
|
||
address,
|
||
chooseAddress,
|
||
getUseCoupon,
|
||
getAddress,
|
||
payBtn,
|
||
getNum,
|
||
changeNum,
|
||
to_VipPage,
|
||
selectVip,
|
||
getRealInfo,
|
||
toAddReal,
|
||
toUpdateNickName,
|
||
getPhoneNumber,
|
||
commitReal,
|
||
openReal,
|
||
isHasAddress,
|
||
compareDate,
|
||
getNowTime,
|
||
parseTime,
|
||
selectCoupon,
|
||
handleCoupon,
|
||
openCoupon,
|
||
checkedGifts,
|
||
checkedTheGo,
|
||
changeGoods,
|
||
getRandomGoods,
|
||
toGroup,
|
||
setUseScore,
|
||
isPayOrder
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
console.log(options)
|
||
// await this.$onLaunched
|
||
await this.getAddress()
|
||
this.is_cart = options.type
|
||
this.source = options.source || ''
|
||
this.from = Number(options.from) || 0
|
||
this.use_coupons = options.coupon_id ? [options.coupon_id] : []
|
||
await this.checkOrder(0)
|
||
this.loading = true
|
||
if (!this.is_vip && this.vip_on == 1) {
|
||
this.isShowOpen = true
|
||
}
|
||
this.getNowTime()
|
||
this.getUseCoupon()
|
||
|
||
},
|
||
onShow() {
|
||
setTimeout(() => {
|
||
this.isHasAddress()
|
||
}, 500)
|
||
this.getRealInfo()
|
||
|
||
// 在此判断订单是否已经支付成功
|
||
let args = plus.runtime.arguments
|
||
console.log(args)
|
||
this.backInfo = JSON.stringify(args)
|
||
if (args) {
|
||
plus.runtime.arguments = null
|
||
this.isPayOrder()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flexc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.flex1{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.box_number {
|
||
background: rgba(255, 255, 255, 0.39);
|
||
border: 1px solid #656565;
|
||
color: #656565;
|
||
font-size: 25rpx;
|
||
border-radius: 10rpx;
|
||
display: inline-block;
|
||
margin: 10rpx 0;
|
||
padding: 2rpx 10rpx;
|
||
}
|
||
.lineBox{
|
||
width: 100%;
|
||
height: calc(200rpx + env(safe-area-inset-bottom));
|
||
}
|
||
.pay {
|
||
height: 100vh;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
&.hidden{
|
||
overflow: hidden;
|
||
}
|
||
.vip_advert {
|
||
margin: 20rpx 30rpx -25rpx;
|
||
height: 67rpx;
|
||
background: rgba(255, 255, 255, 0.39);
|
||
|
||
.vip_advert_img {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
}
|
||
|
||
.pay-none {
|
||
padding: 24rpx 24rpx 0;
|
||
box-sizing: border-box;
|
||
.plus{
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: url(https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/12/05/p15B2jVlAIlWfw9M7iC1Wwzwvm2kp125Pby3ZK1i.png) no-repeat center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #5780B0;
|
||
background-color: #fff;
|
||
background-size: 100% 100%;
|
||
}
|
||
text{
|
||
margin-left: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.pay-address {
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
|
||
&-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// height: 100rpx;
|
||
.left {
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
margin-right: 30rpx;
|
||
|
||
.icon {
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.name {
|
||
font-weight: bold;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.text {
|
||
color: #666666;
|
||
}
|
||
|
||
.address {
|
||
font-size: 24rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #4c4c4c;
|
||
border-radius: 34rpx;
|
||
padding: 4rpx 34rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip {
|
||
margin-top: 10rpx;
|
||
color: v-bind('priceColor');
|
||
font-size: 24rpx;
|
||
margin-left: 25px;
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
flex-direction: column;
|
||
align-items: normal !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
&-goods {
|
||
align-items: normal !important;
|
||
flex-direction: column;
|
||
padding: 20rpx !important;
|
||
|
||
.item{
|
||
display: flex;
|
||
position: relative;
|
||
image {
|
||
width: 174rpx;
|
||
height: 174rpx;
|
||
background: #bbb;
|
||
border-radius: 10rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
.info {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
.box1 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
&-name {
|
||
align-items: flex-start;
|
||
.name {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
.price {
|
||
font-size: 30rpx;
|
||
margin-left: 15rpx;
|
||
.icon {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text {
|
||
color: #7b7b7b;
|
||
}
|
||
|
||
&-num {
|
||
.text {
|
||
flex: 1;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.num {
|
||
font-size: 28rpx;
|
||
border: 2rpx solid #d1d1d1;
|
||
padding: 0 5rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.tag{
|
||
background: v-bind('Color');
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 4rpx 8rpx;
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
border-radius: 10rpx 0 10rpx 0;
|
||
}
|
||
.flexBox{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
.txtBox{
|
||
font-size: 28rpx;
|
||
}
|
||
.price{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
text{
|
||
font-size: 30rpx;
|
||
color: v-bind('Color');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item:not(:first-child) {
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
&-price {
|
||
flex-direction: column;
|
||
padding: 0 20rpx !important;
|
||
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
.input {
|
||
text-align: right;
|
||
}
|
||
.title {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 98rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
background-color: #fff;
|
||
font-size: 30rpx;
|
||
z-index: 100;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.text {
|
||
color: #555555;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.price {
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.btn {
|
||
color: #fff;
|
||
// background: #f14939;
|
||
background: v-bind('Color');
|
||
margin-right: 30rpx;
|
||
height: 66rpx;
|
||
width: 190rpx;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
border-radius: 34rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.pay-title {
|
||
padding: 30rpx 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.pay-price-item-list {
|
||
font-size: 14px;
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
align-items: center;
|
||
.list-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.title-price {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.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;
|
||
margin-bottom: 10px;
|
||
.active_movename {
|
||
padding: 4rpx 10rpx;
|
||
line-height: 1;
|
||
font-size: 24rpx;
|
||
border: 1px solid #f14939;
|
||
}
|
||
.active_moveprice {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.sumActive{
|
||
margin: 24rpx 24rpx 0;
|
||
padding: 10rpx 20rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.onTheGo{
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 0 20rpx 20rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
font-size: 28rpx;
|
||
.tit{
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.text{
|
||
font-style: italic;
|
||
font-weight: bold;
|
||
text{
|
||
color: v-bind('Color');
|
||
}
|
||
}
|
||
.huan{
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
display: flex;
|
||
align-items: center;
|
||
.iconfont{
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
.spBox{
|
||
display: flex;
|
||
height: 220rpx;
|
||
image{
|
||
width: 220rpx;
|
||
height: 100%;
|
||
background: #bbb;
|
||
border-radius: 10rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
.txtBox{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.price{
|
||
font-size: 38rpx;
|
||
color: v-bind('priceColor');
|
||
.prefix{
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.sku{
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
background: #f7f8fa;
|
||
border-radius: 5rpx;
|
||
padding: 4rpx 14rpx;
|
||
}
|
||
}
|
||
.icon{
|
||
width: 90rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.trans_detail{
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
font-size: 28rpx;
|
||
.tit{
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.row{
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.red{
|
||
color: v-bind('priceColor');
|
||
text{
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.payBox{
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
font-size: 28rpx;
|
||
.row{
|
||
padding: 20rpx 0;
|
||
.logo{
|
||
font-size: 16px;
|
||
margin-right: 10rpx;
|
||
display: inline-block;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.openvip {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: v-bind('bgColor');
|
||
font-size: 26rpx;
|
||
color: v-bind('Color');
|
||
padding: 0 30rpx;
|
||
position: fixed;
|
||
bottom: 98rpx;
|
||
box-sizing: border-box;
|
||
z-index: 1;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.sheng {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
background: v-bind('Color');
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 100;
|
||
margin-right: 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.van-checkbox {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
.btn {
|
||
margin-right: 0;
|
||
}
|
||
.price {
|
||
color: v-bind('priceColor');
|
||
.icon {
|
||
font-weight: bold;
|
||
text{
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
.reduce{
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.kongxin{
|
||
padding: 0 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.realbox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding: 28rpx 20rpx;
|
||
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');
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.authMesg{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 48rpx;
|
||
padding: 0rpx 50rpx 0;
|
||
}
|
||
.authBtn{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: v-bind('Color');
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
.cancelAuth{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #f3f3f3;
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.mode{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.youhuiBox{
|
||
margin: 24rpx 24rpx 0;
|
||
padding: 10rpx 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
.box1{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0;
|
||
}
|
||
.quanbox{
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.reTitle{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding: 30rpx;
|
||
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;
|
||
}
|
||
.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');
|
||
}
|
||
.icon-circle{
|
||
color: #aaa;
|
||
}
|
||
</style>
|