|
|
<!-- 确认订单 -->
|
|
|
<template>
|
|
|
<view class="order-wrap">
|
|
|
<!-- 地址栏 -->
|
|
|
<view class="head_box" v-if="orderPre.need_address" @tap="jump('/pages/user/address/list', { from: 'order' })">
|
|
|
<view class="add-address-box u-flex u-flex-1" v-if="!addressId">
|
|
|
<view class="box-bg u-p-30 u-flex-1 u-flex u-row-between">
|
|
|
<text class="select-notice">请选择收货地址</text>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="add-address-box u-p-30" v-else>
|
|
|
<view class="top u-flex">
|
|
|
<text class="name">{{ addressData.consignee }}</text>
|
|
|
<text class="phone">{{ addressData.phone }}</text>
|
|
|
<text class="tag" v-show="addressData.is_default == 1">默认</text>
|
|
|
</view>
|
|
|
<view class="detail u-flex u-row-between">
|
|
|
<view class="address">
|
|
|
{{ addressData.province_name }}{{ addressData.city_name
|
|
|
}}{{ addressData.area_name }}{{ addressData.address }}
|
|
|
</view>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="u-m-b-10">
|
|
|
<!-- 确认订单商品卡片 -->
|
|
|
<view class="goods-list" v-for="g in perGoodsList" :key="g.sku_price_id">
|
|
|
<view class="goods-card u-p-30">
|
|
|
<shopro-mini-card :title="g.detail.title" :image="g.detail.image">
|
|
|
<template #describe>
|
|
|
<view class="order-sku u-ellipsis-1">
|
|
|
<text class="order-num">
|
|
|
{{
|
|
|
g.detail.current_sku_price &&
|
|
|
g.detail.current_sku_price.goods_sku_text
|
|
|
? g.detail.current_sku_price.goods_sku_text
|
|
|
: ""
|
|
|
}}
|
|
|
</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
<template #cardBottom>
|
|
|
<view class="goods-price u-flex u-row-between">
|
|
|
<view class="">
|
|
|
<text v-show="orderType === 'score'">
|
|
|
{{ g.detail.current_sku_price && g.detail.current_sku_price.score ? g.detail.current_sku_price.score + '积分+' : '' }}
|
|
|
<!-- {{ g.detail.current_sku_price.score }}积分+ --></text>
|
|
|
<text>￥<!-- {{ g.detail.current_sku_price.price }} -->
|
|
|
<!-- {{ g.detail.current_sku_price && g.detail.current_sku_price.price ? g.detail.current_sku_price.price : '0.00' }} -->
|
|
|
{{ g.pay_price && g.pay_price ? g.pay_price : '0.00' }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<text class="goods-num">x{{ g.goods_num }}</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
</shopro-mini-card>
|
|
|
</view>
|
|
|
|
|
|
<!-- 配送方式 -->
|
|
|
<view class="logistic item-list u-flex u-row-between" @tap="onSelExpressType(g)">
|
|
|
<view class="item-title">配送方式</view>
|
|
|
<view class="u-flex">
|
|
|
<view class="detail">{{ getCurGoodsExpress(g) }}</view>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<block v-if="perGoodsList.length">
|
|
|
<!-- 备注 -->
|
|
|
<view class="remark-box u-flex item-list u-p-30">
|
|
|
<view class="item-title">备注</view>
|
|
|
<input class="item-input" placeholder-class="input-pl" type="text" v-model="remark"
|
|
|
placeholder="建议留言前先于卖家沟通确认" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 选择优惠券 -->
|
|
|
<sh-select-coupon v-if="hasCoupons" :couponList="couponList" @change="selectCoupon"></sh-select-coupon>
|
|
|
|
|
|
<!-- 积分 -->
|
|
|
<view class="score item-list u-flex u-row-between" v-show="orderType === 'score'">
|
|
|
<view class="u-flex"><text class="item-title">积分</text></view>
|
|
|
<view class="price">-{{ orderPre.score_amount || 0 }}积分</view>
|
|
|
</view>
|
|
|
<!-- 金额明细 -->
|
|
|
<view class="u-flex u-row-between item-list border-top u-m-b-10">
|
|
|
<view class="item-title">商品金额</view>
|
|
|
<view class="u-flex">
|
|
|
<text class="price">￥{{ orderPre.goods_amount || "0.00" }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 活动优惠 -->
|
|
|
<u-collapse v-if="
|
|
|
orderPre.activity_discount_infos &&
|
|
|
orderPre.activity_discount_infos.length &&
|
|
|
Number(orderPre.activity_discount_money)
|
|
|
" event-type="close" :arrow="true" :accordion="true" arrowColor="#bfbfbf"
|
|
|
:head-style="{ background: '#fff', height: '100rpx' }">
|
|
|
<u-collapse-item>
|
|
|
<block slot="title">
|
|
|
<view style="width: 680rpx; padding-right: 0" class="u-flex u-row-between item-list">
|
|
|
<view class="item-title">活动优惠</view>
|
|
|
<view class="u-flex">
|
|
|
<text class="price"
|
|
|
style="margin-right: 0">-￥{{ orderPre.activity_discount_money || "0.00" }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<view class="" v-for="item in orderPre.activity_discount_infos" :key="item.activity_id">
|
|
|
<view class="u-flex u-row-between item-list" v-if="item.activity_type !== 'free_shipping'">
|
|
|
<view class="item-title">{{ item.activity_title }}</view>
|
|
|
<view class="u-flex">
|
|
|
<text class="price"
|
|
|
style="color: #666">-￥{{ item.activity_discount_money || "0.00" }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-collapse-item>
|
|
|
</u-collapse>
|
|
|
<!-- 价格 -->
|
|
|
<view class="price-box u-flex u-row-between item-list">
|
|
|
<view class="item-title u-flex u-col-center">
|
|
|
<view class="u-m-r-10">运费</view>
|
|
|
<view class="activity-title" v-if="Number(orderPre.dispatch_discount_money) > 0">活动减￥
|
|
|
{{ orderPre.dispatch_discount_money }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="u-flex">
|
|
|
<text class="origin-price u-m-r-10"
|
|
|
v-if="Number(orderPre.dispatch_discount_money) > 0">-￥{{ orderPre.dispatch_amount }}</text>
|
|
|
<text class="price">￥{{
|
|
|
Number(orderPre.dispatch_amount) -
|
|
|
Number(orderPre.dispatch_discount_money) || "0.00"
|
|
|
}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 发票 -->
|
|
|
<view v-if="orderPre && Number(orderPre.invoice_amount)"
|
|
|
class="u-flex u-row-between item-list u-p-20 border-top">
|
|
|
<view class="item-title">申请发票</view>
|
|
|
<view class="u-flex u-col-center" @tap="onInvoice">
|
|
|
<text class="selected-invoice"
|
|
|
style="font-size: 28rpx; color: #c4c4c4">{{ selectedInvoice }}</text>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
<view class="foot-box-wrap">
|
|
|
<view class="foot-box u-flex u-row-between safe-area-inset-bottom">
|
|
|
<view class="u-flex">
|
|
|
<text class="num">共{{ totalNum }}件</text>
|
|
|
<view class="all-money">
|
|
|
<text>合计：</text>
|
|
|
<text class="price">￥{{ orderPre.total_fee || "0.00" }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<button class="cu-btn sub-btn" @tap="subOrder" :disabled="isDisabled" hover-class="btn-hover">
|
|
|
提交订单
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 发票弹窗 -->
|
|
|
<u-popup v-model="showInvoice" @close="showInvoice = false" safe-area-inset-bottom mode="bottom"
|
|
|
:closeable="false" border-radius="20">
|
|
|
<view class="invoice-modal page_box">
|
|
|
<view class="invoice-head u-flex u-col-center">
|
|
|
<view class="head-nav u-flex u-col-center u-row-center" @tap="changeInvoiceType('person')">
|
|
|
<text class="nav-title" :class="{ 'nav-title--active': invoiceType === 'person' }">个人</text>
|
|
|
<view v-show="invoiceType === 'person'" class="head-nav--active"></view>
|
|
|
</view>
|
|
|
<view class="head-nav u-flex u-col-center u-row-center" @tap="changeInvoiceType('company')">
|
|
|
<text class="nav-title"
|
|
|
:class="{ 'nav-title--active': invoiceType === 'company' }">企/事业单位</text>
|
|
|
<view v-show="invoiceType === 'company'" class="head-nav--active"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="invoice-content content_box">
|
|
|
<u-form :labelStyle="{
|
|
|
'font-size': '28rpx',
|
|
|
'font-weight': '600',
|
|
|
color: '#595959',
|
|
|
'padding-left': '20rpx',
|
|
|
}" label-position="left" :model="invoiceForm.model" :rules="invoiceForm.rules" ref="invoiceRef"
|
|
|
:errorType="['toast']">
|
|
|
<u-form-item class="u-p-r-20" label-width="150" label="名称:" prop="header_name">
|
|
|
<u-input placeholder="请填写名称" v-model="invoiceForm.model.header_name" type="text"></u-input>
|
|
|
</u-form-item>
|
|
|
<u-form-item class="u-p-r-20" v-if="invoiceType === 'company'" label-width="220" label="纳税人识别号:"
|
|
|
prop="tax_no">
|
|
|
<u-input placeholder="请输入纳税人识别号" v-model="invoiceForm.model.tax_no" type="text"></u-input>
|
|
|
</u-form-item>
|
|
|
<u-form-item class="u-p-r-20" label-width="150" label="手机号:" prop="mobile">
|
|
|
<u-input placeholder="请输入填写手机号" v-model="invoiceForm.model.mobile" type="number"></u-input>
|
|
|
</u-form-item>
|
|
|
</u-form>
|
|
|
</view>
|
|
|
<view class="invoice-foot">
|
|
|
<view class="invoite-price u-flex u-col-center u-row-center u-m-b-40">
|
|
|
<text class="price-title">可开票金额：</text>
|
|
|
<text class="price-num">{{ orderPre.invoice_amount }}元</text>
|
|
|
</view>
|
|
|
<view class="u-flex u-col-center u-row-around u-p-b-30">
|
|
|
<button class="cancel-btn u-reset-button" @tap="cancelInvoice">
|
|
|
取消
|
|
|
</button>
|
|
|
<button class="save-btn u-reset-button" @tap="saveInvoice">
|
|
|
确定
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<!-- 配送方式弹窗 -->
|
|
|
<u-popup v-model="showExpressType" @close="showExpressType = false" safe-area-inset-bottom mode="bottom"
|
|
|
:closeable="false" border-radius="20">
|
|
|
<!-- 配送方式tab-->
|
|
|
<view class="express-type page_box">
|
|
|
<view class="express-type__head head-box u-flex u-col-center">
|
|
|
<view class="express-type__head-nav u-flex u-col-center u-row-center"
|
|
|
v-for="(nav, index) in expressType" :key="nav.id" @tap="changeExpressType(nav.value)"
|
|
|
v-if="inExpressType.includes(nav.value)">
|
|
|
<text class="head-nav__title" :class="{
|
|
|
'head-nav__title--active': expressTypeCur === nav.value,
|
|
|
}">{{ nav.title }}</text>
|
|
|
<view :class="expressClass" v-show="expressTypeCur === nav.value"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-type__content content_box">
|
|
|
<!-- 快递 -->
|
|
|
<!-- 空 -->
|
|
|
<view class="empty-address u-flex u-col-center" v-if="
|
|
|
!addressId &&
|
|
|
expressTypeCur !== 'selfetch' &&
|
|
|
expressTypeCur !== 'autosend'
|
|
|
" @tap="jump('/pages/user/address/list', { from: 'order' })">
|
|
|
请选择收货地址
|
|
|
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #999"></text>
|
|
|
</view>
|
|
|
<!-- 地址 -->
|
|
|
<view class="express-address" v-if="expressTypeCur == 'express' && addressId">
|
|
|
<view class="express-top u-flex u-row-between"
|
|
|
@tap="jump('/pages/user/address/list', { from: 'order' })">
|
|
|
<view class="u-flex">
|
|
|
<text class="tag" style="white-space: nowrap"
|
|
|
v-show="addressData.is_default == 1">默认</text>
|
|
|
<text class="address">{{ addressData.province_name }}{{ addressData.city_name
|
|
|
}}{{ addressData.area_name }}{{ addressData.address }}</text>
|
|
|
<view class="address-guide"><text class="u-iconfont uicon-arrow-right"
|
|
|
style="color: #bfbfbf"></text></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="address-location u-flex-col u-col-center">
|
|
|
<image class="location-img" :src="$IMG_URL + '/imgs/order/e0.png'" mode=""></image>
|
|
|
<text class="location-text">物流快递</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-content">
|
|
|
<view class="phone-box1">
|
|
|
<text class="name">{{ addressData.consignee }}</text>
|
|
|
<text class="phone">{{ addressData.phone }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 自提 -->
|
|
|
<view class="express-address" v-if="expressTypeCur == 'selfetch'">
|
|
|
<!-- 定位 -->
|
|
|
<view class="u-flex-col u-col-center location-box" v-if="!lat">
|
|
|
<image class="nolocation-img" :src="$IMG_URL + '/imgs/order/location.png'" mode=""></image>
|
|
|
<text class="location-title">开启定位服务</text>
|
|
|
<text class="location-tip">为你推荐更精准的位置信息噢~</text>
|
|
|
<button class="u-reset-button open-location" @tap="getLocation">
|
|
|
去开启
|
|
|
</button>
|
|
|
</view>
|
|
|
<!-- 已定位 -->
|
|
|
<view class="" v-else>
|
|
|
<view class="express-top u-flex u-col-center u-row-between" @tap="
|
|
|
jump('/pages/order/express/store-address', {
|
|
|
goodsId: currentGoodsId,
|
|
|
lat: lat,
|
|
|
lng: lng,
|
|
|
storeId: storeInfo ? storeInfo.id : 0,
|
|
|
})
|
|
|
">
|
|
|
<view class="u-flex">
|
|
|
<text class="tag1" v-if="addressData.is_default == 1">最近</text>
|
|
|
<text class="address">{{
|
|
|
storeInfo ? storeInfo.name : "暂无自提点"
|
|
|
}}</text>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #999"></text>
|
|
|
</view>
|
|
|
<view class="address-location u-flex-col u-col-center">
|
|
|
<image class="location-img" :src="$IMG_URL + '/imgs/order/e1.png'" mode=""></image>
|
|
|
<view class="location-text">距您{{ storeInfo ? storeInfo.distance_text : 0 }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-content u-flex u-col-cetner">
|
|
|
<view class="time-box">
|
|
|
<view class="box-title u-m-b-20">到店时间</view>
|
|
|
<view class="box-content u-flex u-col-center" @tap="checkExpressTime('selfetch')">
|
|
|
<text class="box-text">{{ checkTime[checkDayCur].title
|
|
|
}}{{
|
|
|
checkTime[checkDayCur].timeRange[checkTimeCur]
|
|
|
}}</text>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #999"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="box-line"></view>
|
|
|
<view class="phone-box">
|
|
|
<view class="box-title u-m-b-20">预留电话</view>
|
|
|
<view class="box-content u-flex" style="width: 340rpx">
|
|
|
<u-input placeholder="请输入预留电话" placeholderStyle="font-size:24rpx" border
|
|
|
height="40" :focus="getFocus" v-model="selfPhone" type="number"></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-bottom" @tap="checkProtocol">
|
|
|
<u-checkbox active-color="#f0c785" :value="isProtocol">
|
|
|
<view class="protocol">
|
|
|
同意并接受
|
|
|
<text class="protocol-text" @tap.stop="
|
|
|
jump('/pages/public/richtext', {
|
|
|
id: initStore.selfetch_protocol,
|
|
|
})
|
|
|
">《到店自提服务协议》</text>
|
|
|
</view>
|
|
|
</u-checkbox>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 商家配送 -->
|
|
|
<view class="express-address" v-if="expressTypeCur == 'store' && addressId">
|
|
|
<view class="express-top u-flex u-row-between"
|
|
|
@tap="jump('/pages/user/address/list', { from: 'order' })">
|
|
|
<view class="">
|
|
|
<text class="tag" v-if="addressData.is_default == 1">默认</text>
|
|
|
<text class="address">{{ addressData.province_name }}{{ addressData.city_name
|
|
|
}}{{ addressData.area_name }}{{ addressData.address }}</text>
|
|
|
<text class="address-guide u-iconfont uicon-arrow-right" style="color: #999"></text>
|
|
|
</view>
|
|
|
|
|
|
<view class="address-location u-flex-col u-col-center">
|
|
|
<image class="location-img" :src="$IMG_URL + '/imgs/order/e2.png'" mode=""></image>
|
|
|
<text class="location-text">商家配送</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-content u-flex">
|
|
|
<view class="time-box">
|
|
|
<view class="box-title u-m-b-20">配送时间</view>
|
|
|
<view class="box-content u-flex" @tap="checkExpressTime('store')">
|
|
|
<text class="box-text">{{ checkTime[checkDayCur].title
|
|
|
}}{{ checkTime[checkDayCur].timeRange[checkTimeCur] }}</text>
|
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #999"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="box-line"></view>
|
|
|
<view class="phone-box">
|
|
|
<view class="box-title u-m-b-20">预留电话</view>
|
|
|
<view class="box-content u-flex">
|
|
|
<view class="box-content u-flex" style="width: 340rpx">
|
|
|
<u-input placeholder="请输入预留电话" placeholderStyle="font-size:24rpx" border
|
|
|
height="40" :focus="getFocus" v-model="selfPhone" type="number"></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 自动发货 -->
|
|
|
<view class="express-address" v-if="expressTypeCur == 'autosend'">
|
|
|
<view class="express-top u-flex u-row-between">
|
|
|
<text class="dispatch-notice">订单支付完成后，请在订单详情页查看发货信息</text>
|
|
|
<view class="address-location u-flex-col u-col-center">
|
|
|
<image class="location-img" :src="$IMG_URL + '/imgs/order/e3.png'" mode=""></image>
|
|
|
<text class="location-text">自动发货</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="express-type__bottom u-flex u-row-between u-p-b-20" v-show="
|
|
|
expressTypeCur !== 'selfetch' ||
|
|
|
(expressTypeCur == 'selfetch' && lat)
|
|
|
">
|
|
|
<button class="u-reset-button cancel-btn" @tap="hideExpressType">
|
|
|
取消
|
|
|
</button>
|
|
|
<button class="u-reset-button save-btn" @tap="saveExpressType">
|
|
|
确定
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<!-- 配送时间弹窗 -->
|
|
|
<u-popup v-model="showCheckTime" mode="bottom" safe-area-inset-bottom :closeable="true"
|
|
|
close-icon-pos="top-right" border-radius="20">
|
|
|
<view class="checkTime-box page_box">
|
|
|
<view class="checkTime-head">选择{{ checkType }}时间</view>
|
|
|
<view class="checkTime-content content_box u-flex">
|
|
|
<view class="checkTime-content__left">
|
|
|
<view v-for="(day, index) in checkTime" :key="day.value"
|
|
|
class="left-item u-flex u-row-center u-col-center" @tap="check('day', index)"
|
|
|
:class="{ 'item--active': checkDayCur == index }">
|
|
|
{{ day.title }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<scroll-view class="checkTime-content__right scroll-box" :scroll-into-view="'c' + checkTimeId"
|
|
|
scroll-y scroll-with-animation>
|
|
|
<view v-if="checkTime[checkDayCur].timeRange.length > 0">
|
|
|
<view v-for="(time, index) in checkTime[checkDayCur].timeRange" :key="time"
|
|
|
class="right-item" :id="'c' + time.split(':')[0]" @tap="check('time', index)"
|
|
|
:class="{ 'item--active': checkTimeCur == index }">
|
|
|
<view>{{ time }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else class="right-item-none">请选择其它日期</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="checkTime-foot u-flex u-row-center u-col-center"><button class="u-reset-button save-btn"
|
|
|
@tap="showCheckTime = false">
|
|
|
保存并使用
|
|
|
</button></view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import jsonrpc from '@/shopro/request/indexJson.js'
|
|
|
import shSelectCoupon from "./components/sh-select-coupon.vue";
|
|
|
import {
|
|
|
mapMutations,
|
|
|
mapActions,
|
|
|
mapState,
|
|
|
mapGetters
|
|
|
} from "vuex";
|
|
|
import Auth from "@/shopro/permission/index.js";
|
|
|
export default {
|
|
|
components: {
|
|
|
shSelectCoupon,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
platform: this.$platform.get(),
|
|
|
totalNum: 0,
|
|
|
couponList: [], //优惠券列表
|
|
|
addressData: {}, //收货地址
|
|
|
addressId: 0, //收货地址ID
|
|
|
customStyle: {
|
|
|
//自定义按钮样式
|
|
|
width: "210rpx",
|
|
|
lineHeight: "70rpx",
|
|
|
background: "linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))",
|
|
|
boxShadow: " 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22)",
|
|
|
borderRadius: "100rpx",
|
|
|
fontSize: "28rpx",
|
|
|
border: "none",
|
|
|
color: "#fff",
|
|
|
margin: "0",
|
|
|
},
|
|
|
isDisabled: false, //提交
|
|
|
showCheckTime: false, //配送时间弹窗。
|
|
|
checkTime: {}, //配送时间数据
|
|
|
showExpressType: false, //配送方式弹窗
|
|
|
expressTypeMap: {
|
|
|
express: "物流快递",
|
|
|
selfetch: "到店/自提",
|
|
|
store: "商家配送",
|
|
|
autosend: "自动发货",
|
|
|
},
|
|
|
expressType: [
|
|
|
//配送方式
|
|
|
{
|
|
|
id: "e1",
|
|
|
title: "物流快递",
|
|
|
value: "express",
|
|
|
},
|
|
|
{
|
|
|
id: "e2",
|
|
|
title: "到店/自提",
|
|
|
value: "selfetch",
|
|
|
},
|
|
|
{
|
|
|
id: "e3",
|
|
|
title: "商家配送",
|
|
|
value: "store",
|
|
|
},
|
|
|
{
|
|
|
id: "e4",
|
|
|
title: "自动发货",
|
|
|
value: "autosend",
|
|
|
},
|
|
|
],
|
|
|
storeList: [], //门店列表
|
|
|
storeInfo: {
|
|
|
id: 0,
|
|
|
name: "",
|
|
|
dispatch_text: "",
|
|
|
}, //自提点商家信息
|
|
|
from: "",
|
|
|
orderType: "",
|
|
|
grouponBuyType: "alone",
|
|
|
grouponId: 0,
|
|
|
goodsList: [], //传递过来的参数
|
|
|
perGoodsList: {}, //确认单订单商品
|
|
|
currentGoodsId: 0, //当前商品id.
|
|
|
currentSkuId: 0, //商品的规格ID
|
|
|
remark: "",
|
|
|
orderPre: {},
|
|
|
couponId: 0,
|
|
|
couponPrice: "选择优惠券",
|
|
|
expressTypeCur: "",
|
|
|
inExpressType: [], //当前商品支持的配送方式。
|
|
|
|
|
|
isProtocol: true, //自提协议。
|
|
|
selfPhone: "", //编辑手机号
|
|
|
getFocus: false, //获取焦点。
|
|
|
checkType: "自提",
|
|
|
checkTimeCur: 0, //默认选中时间。
|
|
|
checkTimeId: "c1", //锚点用
|
|
|
checkDayCur: 0, //默认日期
|
|
|
lat: 0, //地理位置
|
|
|
lng: 0,
|
|
|
|
|
|
showInvoice: false, //申请发票
|
|
|
invoiceType: "person",
|
|
|
selectedInvoice: "不开具发票",
|
|
|
invoiceForm: {
|
|
|
model: {
|
|
|
header_name: "",
|
|
|
mobile: "",
|
|
|
tax_no: "",
|
|
|
type: "person",
|
|
|
},
|
|
|
rules: {
|
|
|
mobile: [{
|
|
|
required: true,
|
|
|
message: "请输入手机号",
|
|
|
trigger: ["change", "blur"],
|
|
|
},
|
|
|
{
|
|
|
validator: (rule, value, callback) => {
|
|
|
return this.$u.test.mobile(value);
|
|
|
},
|
|
|
message: "手机号码不正确",
|
|
|
trigger: ["change", "blur"],
|
|
|
},
|
|
|
],
|
|
|
header_name: [{
|
|
|
required: true,
|
|
|
message: "请填写名称",
|
|
|
trigger: ["change", "blur"],
|
|
|
}, ],
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(["initStore"]),
|
|
|
expressClass() {
|
|
|
let cl = "head-nav--active";
|
|
|
const {
|
|
|
expressType,
|
|
|
expressTypeCur
|
|
|
} = this;
|
|
|
if (expressTypeCur === 0) {
|
|
|
cl = "head-nav__left--active";
|
|
|
}
|
|
|
if (expressTypeCur === expressType.length - 1) {
|
|
|
cl = "head-nav__right--active";
|
|
|
}
|
|
|
return cl;
|
|
|
},
|
|
|
// 是否可以使用优惠券
|
|
|
hasCoupons() {
|
|
|
if (this.couponList.length && !this.orderPre.activity_type) {
|
|
|
return true;
|
|
|
}
|
|
|
return Boolean(
|
|
|
this.couponList.length &&
|
|
|
this.orderPre.activity_type &&
|
|
|
this.orderPre.activity_type.indexOf("groupon") === -1 &&
|
|
|
this.orderPre.activity_type.indexOf("seckill") === -1 &&
|
|
|
this.orderType !== "score"
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
onShow() {
|
|
|
// 监听选择自提点
|
|
|
uni.$once("SELECT_STORE", (res) => {
|
|
|
this.storeInfo = JSON.parse(res.storeInfo);
|
|
|
});
|
|
|
// 监听地址
|
|
|
uni.$on("SELECT_ADDRESS", (res) => {
|
|
|
if (res.addressData) {
|
|
|
this.addressData = JSON.parse(res.addressData);
|
|
|
this.addressId = this.addressData.id;
|
|
|
} else {
|
|
|
this.addressId = 0;
|
|
|
}
|
|
|
this.getPre();
|
|
|
res.addressData && uni.$off("SELECT_ADDRESS");
|
|
|
});
|
|
|
},
|
|
|
async onLoad() {
|
|
|
this.goodsList = this.$Route.query.goodsList;
|
|
|
this.from = this.$Route.query.from;
|
|
|
this.orderType = this.$Route.query.orderType;
|
|
|
this.grouponBuyType = this.$Route.query.grouponBuyType;
|
|
|
this.grouponId = this.$Route.query.grouponId;
|
|
|
await this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(["getCartList"]),
|
|
|
// 切换发票类型
|
|
|
changeInvoiceType(type) {
|
|
|
this.invoiceType = type;
|
|
|
this.invoiceForm.model.type = type;
|
|
|
},
|
|
|
// 点击开发票
|
|
|
onInvoice() {
|
|
|
this.showInvoice = !this.showInvoice;
|
|
|
this.$nextTick(() => {
|
|
|
if (this.showInvoice) {
|
|
|
this.invoiceForm.model.type = "person";
|
|
|
this.$refs.invoiceRef.setRules(this.invoiceForm.rules);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 发票确认取消
|
|
|
cancelInvoice() {
|
|
|
this.selectedInvoice = "不开具发票";
|
|
|
Object.keys(this.invoiceForm.model).map(
|
|
|
(key) => (this.invoiceForm.model[key] = "")
|
|
|
);
|
|
|
this.showInvoice = false;
|
|
|
},
|
|
|
saveInvoice() {
|
|
|
this.$refs.invoiceRef.validate((valid) => {
|
|
|
if (valid) {
|
|
|
if (
|
|
|
this.invoiceType === "company" &&
|
|
|
!this.invoiceForm.model.tax_no
|
|
|
) {
|
|
|
this.$u.toast("请输入纳税人识别号");
|
|
|
}
|
|
|
this.selectedInvoice = this.invoiceForm.model.header_name;
|
|
|
this.showInvoice = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 初始化
|
|
|
init() {
|
|
|
uni.showLoading({
|
|
|
title: "加载中...",
|
|
|
mask: true,
|
|
|
});
|
|
|
return Promise.all([
|
|
|
this.getDefaultAddress(),
|
|
|
this.initDate(),
|
|
|
this.getCoupons(),
|
|
|
]).then(() => {
|
|
|
uni.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
jump(path, parmas) {
|
|
|
this.$Router.push({
|
|
|
path: path,
|
|
|
query: parmas,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 格式化选择时间
|
|
|
initDate() {
|
|
|
const weekRange = {
|
|
|
0: "周日",
|
|
|
1: "周一",
|
|
|
2: "周二",
|
|
|
3: "周三",
|
|
|
4: "周四",
|
|
|
5: "周五",
|
|
|
6: "周六",
|
|
|
};
|
|
|
const timeRange = [
|
|
|
"08:00",
|
|
|
"09:00",
|
|
|
"10:00",
|
|
|
"11:00",
|
|
|
"12:00",
|
|
|
"13:00",
|
|
|
"14:00",
|
|
|
"15:00",
|
|
|
"16:00",
|
|
|
"17:00",
|
|
|
"18:00",
|
|
|
"19:00",
|
|
|
];
|
|
|
let now = new Date().getTime();
|
|
|
let today = this.$u.timeFormat(now);
|
|
|
let tomorrow = this.$u.timeFormat(now + 86400000);
|
|
|
let aftertomorrow = this.$u.timeFormat(now + 172800000);
|
|
|
let week1 = weekRange[new Date().getDay()];
|
|
|
let week2 = weekRange[new Date(now + 86400000).getDay()];
|
|
|
let week3 = weekRange[new Date(now + 172800000).getDay()];
|
|
|
|
|
|
|
|
|
function getTimeRange() {
|
|
|
const nowHours = new Date().getHours();
|
|
|
return timeRange.filter((item) => item.split(":")[0] > nowHours);
|
|
|
}
|
|
|
|
|
|
const selectDays = [{
|
|
|
title: "今天（" + week1 + "）",
|
|
|
value: today,
|
|
|
timeRange: getTimeRange(),
|
|
|
},
|
|
|
{
|
|
|
title: "明天（" + week2 + "）",
|
|
|
value: tomorrow,
|
|
|
timeRange,
|
|
|
},
|
|
|
{
|
|
|
title: "后天（" + week3 + "）",
|
|
|
value: aftertomorrow,
|
|
|
timeRange,
|
|
|
},
|
|
|
];
|
|
|
if (selectDays[0].timeRange.length === 0) {
|
|
|
selectDays.shift();
|
|
|
}
|
|
|
this.checkTime = selectDays;
|
|
|
},
|
|
|
|
|
|
// 格式日期
|
|
|
check(type, index) {
|
|
|
if (type == "day") {
|
|
|
this.checkDayCur = index;
|
|
|
}
|
|
|
|
|
|
if (type == "time") {
|
|
|
this.checkTimeCur = index;
|
|
|
this.checkTimeId =
|
|
|
this.checkTime[this.checkDayCur].timeRange[index].split(":")[0];
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 获取当前商品配送方式
|
|
|
getCurGoodsExpress(goods) {
|
|
|
for (let item of this.goodsList) {
|
|
|
console.log("item", item)
|
|
|
if (
|
|
|
item.goods_id == goods.goods_id &&
|
|
|
goods.sku_price_id == item.sku_price_id
|
|
|
) {
|
|
|
console.log(this.expressTypeMap["express"])
|
|
|
return this.expressTypeMap["express"];
|
|
|
/* return this.expressTypeMap[item.dispatch_type]; */
|
|
|
}
|
|
|
return this.expressTypeMap["express"];
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 获取位置
|
|
|
async getLocation() {
|
|
|
let authState = await new Auth("userLocation").check();
|
|
|
// #ifdef MP || APP-VUE
|
|
|
authState &&
|
|
|
uni.getLocation({
|
|
|
type: "gcj02",
|
|
|
success: (res) => {
|
|
|
this.lng = res.longitude;
|
|
|
this.lat = res.latitude;
|
|
|
this.getStoreAddress();
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.log("确认订单自提位置：", err);
|
|
|
},
|
|
|
});
|
|
|
// #endif
|
|
|
// #ifdef H5
|
|
|
uni.getLocation({
|
|
|
type: "gcj02",
|
|
|
success: (res) => {
|
|
|
this.lng = res.longitude;
|
|
|
this.lat = res.latitude;
|
|
|
this.getStoreAddress();
|
|
|
},
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
// 获取商品支持的自提点。
|
|
|
getStoreAddress() {
|
|
|
let that = this;
|
|
|
that
|
|
|
.$http("goods.storeAddress", {
|
|
|
id: that.currentGoodsId,
|
|
|
latitude: that.lat,
|
|
|
longitude: that.lng,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.code == 1) {
|
|
|
that.storeInfo = res.data.data[0];
|
|
|
that.storeList = res.data.data;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 订单信息
|
|
|
getPre() {
|
|
|
let that = this;
|
|
|
jsonrpc("order.pre", {
|
|
|
goods_list: that.goodsList,
|
|
|
from: that.from,
|
|
|
address_id: that.addressId,
|
|
|
coupons_id: that.couponId,
|
|
|
order_type: that.orderType,
|
|
|
buy_type: that.grouponBuyType,
|
|
|
groupon_id: that.grouponId,
|
|
|
}).then((res) => {
|
|
|
console.log(res)
|
|
|
if (res.result) {
|
|
|
that.orderPre = res.result;
|
|
|
that.perGoodsList = res.result.new_goods_list;
|
|
|
that.totalNum = 0;
|
|
|
that.perGoodsList.map((item) => {
|
|
|
item.selType = item.dispatch_type;
|
|
|
that.totalNum += item.goods_num;
|
|
|
that.goodsList.forEach((goods) => {
|
|
|
if (
|
|
|
item.goods_id == goods.goods_id &&
|
|
|
item.sku_price_id == goods.sku_price_id
|
|
|
) {
|
|
|
goods.dispatch_type = "express";
|
|
|
/* goods.dispatch_type = item.dispatch_type; */
|
|
|
if (item.store_id) {
|
|
|
goods.store_id = item.store_id;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
/*
|
|
|
that.$http("order.pre", {
|
|
|
goods_list: that.goodsList,
|
|
|
from: that.from,
|
|
|
address_id: that.addressId,
|
|
|
coupons_id: that.couponId,
|
|
|
order_type: that.orderType,
|
|
|
buy_type: that.grouponBuyType,
|
|
|
groupon_id: that.grouponId,
|
|
|
}).then((res) => {
|
|
|
if (res.data) {
|
|
|
that.orderPre = res.data;
|
|
|
that.perGoodsList = res.data.new_goods_list;
|
|
|
that.totalNum = 0;
|
|
|
that.perGoodsList.map((item) => {
|
|
|
item.selType = item.dispatch_type;
|
|
|
that.totalNum += item.goods_num;
|
|
|
that.goodsList.forEach((goods) => {
|
|
|
if (
|
|
|
item.goods_id == goods.goods_id &&
|
|
|
item.sku_price_id == goods.sku_price_id
|
|
|
) {
|
|
|
goods.dispatch_type = item.dispatch_type;
|
|
|
|
|
|
if (item.store_id) {
|
|
|
goods.store_id = item.store_id;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
}); */
|
|
|
},
|
|
|
// 提交订单
|
|
|
subOrder() {
|
|
|
let that = this;
|
|
|
that.isDisabled = true;
|
|
|
jsonrpc(
|
|
|
"order.createOrder", {
|
|
|
goods_list: that.goodsList,
|
|
|
from: that.from,
|
|
|
address_id: that.addressId,
|
|
|
coupons_id: that.couponId,
|
|
|
remark: that.remark,
|
|
|
order_type: that.orderType,
|
|
|
buy_type: that.grouponBuyType,
|
|
|
groupon_id: that.grouponId,
|
|
|
invoice: Number(that.orderPre.invoice_amount) &&
|
|
|
that.selectedInvoice !== "不开具发票" ? {
|
|
|
...that.invoiceForm.model,
|
|
|
amount: that.orderPre.invoice_amount,
|
|
|
} : {},
|
|
|
},
|
|
|
"提交中..."
|
|
|
)
|
|
|
.then((res) => {
|
|
|
that.isDisabled = false;
|
|
|
if (res.error.code === 200) {
|
|
|
that.getCartList();
|
|
|
that.$Router.replace({
|
|
|
path: res.result.status > 0 ?
|
|
|
`/pages/order/payment/result` : `/pages/order/payment/method`,
|
|
|
query: {
|
|
|
orderId: res.result.id,
|
|
|
payState: res.result.status > 0 ? "success" : "paying",
|
|
|
orderType: "goods",
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
/* that.$http(
|
|
|
"order.createOrder", {
|
|
|
goods_list: that.goodsList,
|
|
|
from: that.from,
|
|
|
address_id: that.addressId,
|
|
|
coupons_id: that.couponId,
|
|
|
remark: that.remark,
|
|
|
order_type: that.orderType,
|
|
|
buy_type: that.grouponBuyType,
|
|
|
groupon_id: that.grouponId,
|
|
|
invoice: Number(that.orderPre.invoice_amount) &&
|
|
|
that.selectedInvoice !== "不开具发票" ? {
|
|
|
...that.invoiceForm.model,
|
|
|
amount: that.orderPre.invoice_amount,
|
|
|
} : {},
|
|
|
},
|
|
|
"提交中..."
|
|
|
)
|
|
|
.then((res) => {
|
|
|
that.isDisabled = false;
|
|
|
if (res.code === 1) {
|
|
|
that.getCartList();
|
|
|
that.$Router.replace({
|
|
|
path: res.data.status > 0 ?
|
|
|
`/pages/order/payment/result` : `/pages/order/payment/method`,
|
|
|
query: {
|
|
|
orderId: res.data.id,
|
|
|
payState: res.data.status > 0 ? "success" : "paying",
|
|
|
orderType: "goods",
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
}); */
|
|
|
},
|
|
|
|
|
|
// 初始地址
|
|
|
getDefaultAddress() {
|
|
|
this.$http("address.defaults", {}, "", false).then((res) => {
|
|
|
if (res.code === 1 && res.data) {
|
|
|
this.addressData = res.data;
|
|
|
this.addressId = res.data.id;
|
|
|
}
|
|
|
this.getPre();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 可用优惠券
|
|
|
getCoupons() {
|
|
|
let that = this;
|
|
|
that
|
|
|
.$http("order.coupons", {
|
|
|
goods_list: that.goodsList,
|
|
|
from: that.from,
|
|
|
address_id: that.addressId,
|
|
|
coupons_id: that.couponId,
|
|
|
order_type: that.orderType,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.code === 1) {
|
|
|
that.couponList = res.data;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 选择优惠券
|
|
|
selectCoupon(index) {
|
|
|
this.couponId = index >= 0 ? this.couponList[index].user_coupons_id : 0;
|
|
|
this.getPre();
|
|
|
},
|
|
|
|
|
|
// 显示配送方式弹窗
|
|
|
async onSelExpressType(goods) {
|
|
|
this.showExpressType = true;
|
|
|
this.inExpressType = goods.detail.dispatch_type_arr;
|
|
|
this.currentGoodsId = goods.goods_id;
|
|
|
this.currentSkuId = goods.sku_price_id;
|
|
|
this.goodsList.forEach((item) => {
|
|
|
if (
|
|
|
item.goods_id == this.currentGoodsId &&
|
|
|
this.currentSkuId == item.sku_price_id
|
|
|
) {
|
|
|
/* this.expressTypeCur = item.dispatch_type; */
|
|
|
this.expressTypeCur = "express";
|
|
|
this.selfPhone = item.dispatch_phone ?
|
|
|
item.dispatch_phone :
|
|
|
this.addressData && this.addressData.phone;
|
|
|
this.checkDayCur = item.checkDayCur ? item.checkDayCur : 0;
|
|
|
this.checkTimeCur = item.checkTimeCur ? item.checkTimeCur : 0;
|
|
|
if (this.expressTypeCur == "selfetch") {
|
|
|
!this.lat && this.getLocation();
|
|
|
this.storeList.forEach((store) => {
|
|
|
if (item.store_id == store.id) {
|
|
|
this.storeInfo = store;
|
|
|
}
|
|
|
});
|
|
|
this.selfPhone = item.dispatch_phone ?
|
|
|
item.dispatch_phone :
|
|
|
this.addressData && this.addressData.phone;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 关闭配送方式弹窗
|
|
|
hideExpressType() {
|
|
|
this.showExpressType = false;
|
|
|
this.changeGoodsList();
|
|
|
},
|
|
|
// 保存配送方式
|
|
|
saveExpressType() {
|
|
|
if (this.expressTypeCur === "selfetch") {
|
|
|
if (!this.storeInfo) {
|
|
|
this.$u.toast("暂无自提点，请选择其他配送方式");
|
|
|
return false;
|
|
|
}
|
|
|
if (!this.isProtocol) {
|
|
|
this.$u.toast("请先勾选门店协议");
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.showExpressType = false;
|
|
|
this.changeGoodsList();
|
|
|
this.getPre();
|
|
|
},
|
|
|
|
|
|
// 更改提交数据
|
|
|
changeGoodsList() {
|
|
|
this.goodsList.forEach((goods) => {
|
|
|
if (
|
|
|
goods.goods_id == this.currentGoodsId &&
|
|
|
this.currentSkuId == goods.sku_price_id
|
|
|
) {
|
|
|
goods.dispatch_type = this.expressTypeCur;
|
|
|
goods.dispatch_phone = this.selfPhone;
|
|
|
goods.dispatch_date =
|
|
|
this.checkTime[this.checkDayCur].value +
|
|
|
" " +
|
|
|
this.checkTime[this.checkDayCur].timeRange[this.checkTimeCur] +
|
|
|
":00";
|
|
|
if (this.expressTypeCur == "selfetch") {
|
|
|
if (!this.storeInfo) {
|
|
|
this.$u.toast("暂无自提点，请选择其他配送方式");
|
|
|
return false;
|
|
|
}
|
|
|
goods.store_id = this.storeInfo.id;
|
|
|
}
|
|
|
goods.checkDayCur = this.checkDayCur;
|
|
|
goods.checkTimeCur = this.checkTimeCur;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 选择快递方式
|
|
|
changeExpressType(cur) {
|
|
|
this.expressTypeCur = cur;
|
|
|
this.getFocus = false;
|
|
|
cur === "selfetch" && !this.lat && this.getLocation();
|
|
|
},
|
|
|
|
|
|
// 是否同意协议
|
|
|
checkProtocol() {
|
|
|
this.isProtocol = !this.isProtocol;
|
|
|
},
|
|
|
// 选择配送时间
|
|
|
checkExpressTime(type) {
|
|
|
switch (type) {
|
|
|
case "store":
|
|
|
this.checkType = "配送";
|
|
|
break;
|
|
|
case "selfetch":
|
|
|
this.checkType = "自提";
|
|
|
break;
|
|
|
default:
|
|
|
this.checkType = "自提";
|
|
|
}
|
|
|
this.showCheckTime = !this.showCheckTime;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
// 发票弹窗
|
|
|
.invoice-modal {
|
|
|
width: 750rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
height: 700rpx;
|
|
|
overflow: visible;
|
|
|
|
|
|
.invoice-foot {
|
|
|
.price-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.price-num {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #eab662;
|
|
|
}
|
|
|
|
|
|
.cancel-btn {
|
|
|
width: 335rpx;
|
|
|
line-height: 74rpx;
|
|
|
background: rgba(238, 238, 238, 1);
|
|
|
border-radius: 37rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
}
|
|
|
|
|
|
.save-btn {
|
|
|
width: 335rpx;
|
|
|
line-height: 74rpx;
|
|
|
background: linear-gradient(90deg,
|
|
|
rgba(233, 180, 97, 1),
|
|
|
rgba(238, 204, 137, 1));
|
|
|
border-radius: 37rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.invoice-head {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
background: #f8e3bd;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
|
|
.head-nav {
|
|
|
width: (750rpx/2);
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.nav-title {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666;
|
|
|
position: relative;
|
|
|
z-index: 6;
|
|
|
}
|
|
|
|
|
|
.nav-title--active {
|
|
|
color: #a8700d;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
.head-nav--active {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 0;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 80rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(20deg);
|
|
|
background: #fff;
|
|
|
border-top-right-radius: 20rpx;
|
|
|
top: 0;
|
|
|
right: -15rpx;
|
|
|
}
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 80rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(-20deg);
|
|
|
background: #fff;
|
|
|
border-top-left-radius: 20rpx;
|
|
|
top: 0;
|
|
|
left: -15rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 收货地址栏
|
|
|
.head_box {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.add-address-box {
|
|
|
min-height: 100rpx;
|
|
|
background: url($IMG_URL + "/imgs/order/order_address_line.png") no-repeat;
|
|
|
background-size: 100% auto;
|
|
|
background-position: bottom center;
|
|
|
|
|
|
.select-notice {
|
|
|
font-weight: 400;
|
|
|
color: rgba(153, 153, 153, 1);
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.name,
|
|
|
.phone {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.phone {
|
|
|
margin: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.tag {
|
|
|
background: rgba(233, 191, 113, 0.2);
|
|
|
border-radius: 6rpx;
|
|
|
padding: 0 16rpx;
|
|
|
line-height: 38rpx;
|
|
|
color: #a8700d;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
|
|
|
.detail {
|
|
|
.address {
|
|
|
margin-top: 25rpx;
|
|
|
width: 543rpx;
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: rgba(153, 153, 153, 1);
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 备注
|
|
|
.remark-box {
|
|
|
margin-top: 20rpx;
|
|
|
background: #fff;
|
|
|
padding: 25rpx;
|
|
|
|
|
|
.item-input {
|
|
|
flex: 1;
|
|
|
text-align: end;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.input-pl {
|
|
|
color: #c4c4c4;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 商品卡片
|
|
|
.goods-list {
|
|
|
background: #fff;
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
.goods-card {
|
|
|
min-height: 200rpx;
|
|
|
|
|
|
.goods-price {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
width: 480rpx;
|
|
|
color: #333333;
|
|
|
|
|
|
.goods-num {
|
|
|
font-size: 28rpx;
|
|
|
color: #c4c4c4;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.order-sku {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: rgba(153, 153, 153, 1);
|
|
|
width: 440rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.order-num {
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-list {
|
|
|
height: 100rpx;
|
|
|
background: #fff;
|
|
|
padding: 0 25rpx;
|
|
|
|
|
|
.item-title {
|
|
|
font-size: 28rpx;
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
.activity-title {
|
|
|
font-size: 26rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.detail {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.origin-price {
|
|
|
font-size: 26rpx;
|
|
|
color: #666;
|
|
|
text-decoration: line-through;
|
|
|
}
|
|
|
|
|
|
.price {
|
|
|
font-size: 26rpx;
|
|
|
color: #ff0000;
|
|
|
margin-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
.sel-coupon {
|
|
|
font-size: 26rpx;
|
|
|
color: #c4c4c4;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.logistic,
|
|
|
.price-box,
|
|
|
.remark-box,
|
|
|
.score,
|
|
|
.coupon {
|
|
|
border-top: 1rpx solid rgba(#dfdfdf, 0.5);
|
|
|
}
|
|
|
|
|
|
.border-top {
|
|
|
border-top: 1rpx solid rgba(#dfdfdf, 0.5);
|
|
|
}
|
|
|
|
|
|
.foot-box-wrap {
|
|
|
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
z-index: 70;
|
|
|
}
|
|
|
|
|
|
.foot-box {
|
|
|
position: fixed;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
|
|
border-top: 1rpx solid #eeeeee;
|
|
|
background-color: #fff;
|
|
|
z-index: 998;
|
|
|
bottom: 0;
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
.btn-hover {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.num {
|
|
|
font-size: 26rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.all-money {
|
|
|
margin: 0 60rpx 0 20rpx;
|
|
|
|
|
|
.price {
|
|
|
color: #ff0000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sub-btn {
|
|
|
width: 210rpx;
|
|
|
line-height: 70rpx;
|
|
|
background: linear-gradient(90deg,
|
|
|
rgba(233, 180, 97, 1),
|
|
|
rgba(238, 204, 137, 1));
|
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
|
border-radius: 50rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 弹窗之配送方式
|
|
|
// 配送方式
|
|
|
.express-type {
|
|
|
width: 750rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
height: 700rpx;
|
|
|
overflow: visible;
|
|
|
|
|
|
.express-type__head {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
background: #f8e3bd;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
|
|
&-nav {
|
|
|
width: (750rpx/4);
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.head-nav--active {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 0;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 80rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(20deg);
|
|
|
background: #fff;
|
|
|
border-top-right-radius: 20rpx;
|
|
|
top: 0;
|
|
|
right: -15rpx;
|
|
|
}
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 80rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(-20deg);
|
|
|
background: #fff;
|
|
|
border-top-left-radius: 20rpx;
|
|
|
top: 0;
|
|
|
left: -15rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.head-nav__left--active {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 0;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
height: 74rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 74rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(20deg);
|
|
|
background: #fff;
|
|
|
border-top-right-radius: 20rpx;
|
|
|
top: 0;
|
|
|
right: -15rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.head-nav__right--active {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 0;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
height: 74rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 40rpx;
|
|
|
height: 74rpx;
|
|
|
position: absolute;
|
|
|
transform: skewX(-20deg);
|
|
|
background: #fff;
|
|
|
border-top-left-radius: 20rpx;
|
|
|
top: 0;
|
|
|
left: -15rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.head-nav__title {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666;
|
|
|
position: relative;
|
|
|
z-index: 6;
|
|
|
}
|
|
|
|
|
|
.head-nav__title--active {
|
|
|
color: #a8700d;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.express-type__content {
|
|
|
.empty-address {
|
|
|
height: 120rpx;
|
|
|
padding: 0 25rpx;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: rgba(153, 153, 153, 1);
|
|
|
}
|
|
|
|
|
|
// 无定位
|
|
|
.location-box {
|
|
|
height: 500rpx;
|
|
|
justify-content: center;
|
|
|
|
|
|
.nolocation-img {
|
|
|
width: 74rpx;
|
|
|
height: 90rpx;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.location-title {
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
color: rgba(70, 53, 27, 1);
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.location-tip {
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: rgba(153, 153, 153, 1);
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.open-location {
|
|
|
width: 492rpx;
|
|
|
line-height: 70rpx;
|
|
|
background: linear-gradient(90deg,
|
|
|
rgba(233, 180, 97, 1),
|
|
|
rgba(238, 204, 137, 1));
|
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
|
border-radius: 35rpx;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 快递
|
|
|
.express-address {
|
|
|
position: relative;
|
|
|
padding: 30rpx 25rpx;
|
|
|
background: url($IMG_URL + "/imgs/order/address_bg.png") no-repeat;
|
|
|
background-size: 430rpx 300rpx;
|
|
|
background-position: top right;
|
|
|
|
|
|
.express-top {
|
|
|
margin-bottom: 20rpx;
|
|
|
width: 550rpx;
|
|
|
text-align: left;
|
|
|
|
|
|
.address {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
line-height: 40rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.dispatch-notice {
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
line-height: 40rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.address-location {
|
|
|
position: absolute;
|
|
|
right: 60rpx;
|
|
|
top: 30rpx;
|
|
|
|
|
|
.location-img {
|
|
|
width: 80rpx;
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
|
|
|
.location-text {
|
|
|
font-size: 18rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tag {
|
|
|
background: rgba(233, 191, 113, 0.2);
|
|
|
border-radius: 6rpx;
|
|
|
padding: 0 16rpx;
|
|
|
line-height: 38rpx;
|
|
|
color: #a8700d;
|
|
|
font-size: 22rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.tag1 {
|
|
|
background: rgba(53, 190, 105, 0.2);
|
|
|
border-radius: 6rpx;
|
|
|
padding: 0 16rpx;
|
|
|
line-height: 38rpx;
|
|
|
color: #1bbc50;
|
|
|
font-size: 22rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.address-guide {
|
|
|
position: absolute;
|
|
|
right: 25rpx;
|
|
|
top: 40rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.express-content {
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.box-line {
|
|
|
width: 1rpx;
|
|
|
height: 61rpx;
|
|
|
border-left: 1rpx solid rgba(238, 238, 238, 1);
|
|
|
margin: 0 40rpx;
|
|
|
}
|
|
|
|
|
|
.phone-box1 {
|
|
|
|
|
|
.name,
|
|
|
.phone {
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: rgba(102, 102, 102, 1);
|
|
|
}
|
|
|
|
|
|
.phone {
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.time-box,
|
|
|
.phone-box {
|
|
|
text-align: left;
|
|
|
min-height: 120rpx;
|
|
|
|
|
|
.box-title {
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: #666;
|
|
|
padding-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.box-text {
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.edit-phone {
|
|
|
width: 160rpx;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.box-icon {
|
|
|
font-size: 28rpx;
|
|
|
color: #999;
|
|
|
display: inline-block;
|
|
|
width: 40rpx;
|
|
|
text-align: center;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.express-bottom {
|
|
|
.protocol {
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
color: rgba(102, 102, 102, 1);
|
|
|
|
|
|
.protocol-text {
|
|
|
color: #6487a4;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.express-type__bottom {
|
|
|
height: 90rpx;
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
.cancel-btn {
|
|
|
width: 335rpx;
|
|
|
line-height: 74rpx;
|
|
|
background: rgba(238, 238, 238, 1);
|
|
|
border-radius: 37rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
}
|
|
|
|
|
|
.save-btn {
|
|
|
width: 335rpx;
|
|
|
line-height: 74rpx;
|
|
|
background: linear-gradient(90deg,
|
|
|
rgba(233, 180, 97, 1),
|
|
|
rgba(238, 204, 137, 1));
|
|
|
border-radius: 37rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 选择配送给时间
|
|
|
.checkTime-box {
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
|
height: 720rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
.checkTime-head {
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
line-height: 100rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.checkTime-foot {
|
|
|
height: 100rpx;
|
|
|
|
|
|
.save-btn {
|
|
|
width: 690rpx;
|
|
|
line-height: 80rpx;
|
|
|
background: linear-gradient(90deg,
|
|
|
rgba(240, 199, 133, 1),
|
|
|
rgba(246, 214, 157, 1));
|
|
|
border-radius: 40rpx;
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.checkTime-content {
|
|
|
.checkTime-content__left {
|
|
|
height: 100%;
|
|
|
width: 190rpx;
|
|
|
background: #f5f5f5;
|
|
|
|
|
|
.left-item {
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
height: 100rpx;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.checkTime-content__right {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
.right-item {
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
border-bottom: 1rpx solid rgba(#dfdfdf, 0.6);
|
|
|
margin: 0 30rpx;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
|
|
|
.right-item-none {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #999999;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
margin-top: 200rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item--active {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: rgba(168, 112, 13, 1) !important;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
