|
|
@@ -1,427 +1,812 @@
|
|
|
+<!--
|
|
|
+ 商城订单详情
|
|
|
+ 用途：订单列表/支付回跳进入；展示状态、收货、商品、金额与售后入口
|
|
|
+ 排版：分区卡片 + 绿主色状态头，避免大段挤在一起
|
|
|
+-->
|
|
|
<template>
|
|
|
- <view class="app-content">
|
|
|
- <view class="page-top">
|
|
|
- <!-- 顶部状态区：绿色渐变背景（替代原 bg.png 纯色图） -->
|
|
|
- <view class="page-top-img"></view>
|
|
|
- <view class="page-top-det">
|
|
|
- <view>
|
|
|
- <view class="page-status">{{ data.status | constantfilter('ORDER_STATUS') }}</view>
|
|
|
- <view v-if="data.groupBuyId > 0 && data.groupBuyStatus" class="page-groupbuy-status">
|
|
|
- {{ data.groupBuyStatus | constantfilter('GROUP_BUY_STATUS') }}
|
|
|
+ <view class="detail-page">
|
|
|
+ <!-- 顶部状态 -->
|
|
|
+ <view class="hero">
|
|
|
+ <view class="hero-bg"></view>
|
|
|
+ <view class="hero-inner">
|
|
|
+ <view class="hero-left">
|
|
|
+ <text class="hero-status">{{ data.status | constantfilter('ORDER_STATUS') }}</text>
|
|
|
+ <text v-if="statusHint" class="hero-hint">{{ statusHint }}</text>
|
|
|
+ <text
|
|
|
+ v-if="data.groupBuyId > 0 && data.groupBuyStatus"
|
|
|
+ class="hero-group"
|
|
|
+ >{{ data.groupBuyStatus | constantfilter('GROUP_BUY_STATUS') }}</text>
|
|
|
+ </view>
|
|
|
+ <image v-if="statusImg" class="hero-img" :src="statusImg" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="body">
|
|
|
+ <!-- 配送 / 收花信息 -->
|
|
|
+ <view class="card card--addr">
|
|
|
+ <view class="addr-main">
|
|
|
+ <view class="addr-icon-wrap">
|
|
|
+ <text class="addr-icon">址</text>
|
|
|
+ </view>
|
|
|
+ <view class="addr-content">
|
|
|
+ <view class="addr-user-row">
|
|
|
+ <text class="addr-name">{{ data.receiveUserName || '收花人' }}</text>
|
|
|
+ <text class="addr-mobile">{{ data.receiveMobile || '' }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="addr-line">{{ (data.address || '') + (data.floor || '') }}</text>
|
|
|
+ <text
|
|
|
+ v-if="data.fullAddress != data.showAddress && data.showAddress"
|
|
|
+ class="addr-sub"
|
|
|
+ >{{ data.showAddress }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="addr-meta">
|
|
|
+ <view v-if="!$util.isEmpty(data.psMethodName)" class="meta-chip">
|
|
|
+ <text class="meta-chip__label">配送</text>
|
|
|
+ <text class="meta-chip__value">{{ data.psMethodName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="meta-chip">
|
|
|
+ <text class="meta-chip__label">时间</text>
|
|
|
+ <text class="meta-chip__value">{{ reachTimeText }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="page-status-img">
|
|
|
- <img :src="statusImg" alt />
|
|
|
+ <view v-if="!$util.isEmpty(data.cardInfo)" class="addr-extra">
|
|
|
+ <text class="addr-extra__label">贺卡</text>
|
|
|
+ <text class="addr-extra__value">{{ data.cardInfo }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="Number(data.anonymity) === 1" class="addr-extra">
|
|
|
+ <text class="addr-extra__label">匿名</text>
|
|
|
+ <text class="addr-extra__value">匿名派送</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="!$util.isEmpty(data.remark)" class="addr-extra">
|
|
|
+ <text class="addr-extra__label">备注</text>
|
|
|
+ <text class="addr-extra__value">{{ data.remark }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="page-det">
|
|
|
- <view class="module-com">
|
|
|
- <view class="module-tit">商品信息</view>
|
|
|
- <view class="module-det">
|
|
|
+
|
|
|
+ <!-- 售后关联提示 -->
|
|
|
+ <view v-if="!$util.isEmpty(data.shOrderMap)" class="card card--warn">
|
|
|
+ <text class="warn-title">本单有售后收入</text>
|
|
|
+ <view class="warn-links">
|
|
|
+ <text
|
|
|
+ v-for="(shItem, shIndex) in data.shOrderMap"
|
|
|
+ :key="shIndex"
|
|
|
+ class="warn-link"
|
|
|
+ @click="goShOrder(shItem)"
|
|
|
+ >{{ shItem.shOrderSn }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品 -->
|
|
|
+ <view class="card">
|
|
|
+ <view class="card-hd">
|
|
|
+ <text class="card-title">商品信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="goods-box">
|
|
|
<block v-if="!$util.isEmpty(data.goodsInfoList)">
|
|
|
- <list-module v-for="(items, subIndex) in data.goodsInfoList" :key="subIndex" :info="items" :groupBuyId="data.groupBuyId" />
|
|
|
+ <list-module
|
|
|
+ v-for="(items, subIndex) in data.goodsInfoList"
|
|
|
+ :key="'g-' + subIndex"
|
|
|
+ :info="items"
|
|
|
+ :groupBuyId="data.groupBuyId"
|
|
|
+ />
|
|
|
</block>
|
|
|
-
|
|
|
<block v-if="!$util.isEmpty(data.itemList)">
|
|
|
- <orderItem v-for="(info, idx) in data.itemList" :key="idx" :info="info" :groupBuyId="data.groupBuyId" ></orderItem>
|
|
|
+ <orderItem
|
|
|
+ v-for="(info, idx) in data.itemList"
|
|
|
+ :key="'i-' + idx"
|
|
|
+ :info="info"
|
|
|
+ :groupBuyId="data.groupBuyId"
|
|
|
+ />
|
|
|
</block>
|
|
|
-
|
|
|
</view>
|
|
|
- <view style="text-align: right;border-top:1upx solid #EEEEEE;padding:10upx 10upx 10upx 0;font-size:28upx;color:#403e3e;">合计 ￥{{ data.goodsPrice ? parseFloat(data.goodsPrice) : 0 }}</view>
|
|
|
+ <view class="goods-total">
|
|
|
+ <text class="goods-total__label">商品合计</text>
|
|
|
+ <text class="goods-total__value">¥{{ money(data.goodsPrice) }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="module-com order-msg">
|
|
|
- <view class="module-tit">订单信息</view>
|
|
|
- <view class="module-det">
|
|
|
- <view v-if="!$util.isEmpty(data.shOrderMap)" style="color:#856404;font-size:26upx;">
|
|
|
- 本单有售后收入：<text v-for="(shItem, shIndex) in data.shOrderMap" :key="shIndex" style="margin-right:10upx;" @click="goShOrder(shItem)">{{ shItem.shOrderSn }}</text>
|
|
|
+
|
|
|
+ <!-- 费用明细 -->
|
|
|
+ <view class="card">
|
|
|
+ <view class="card-hd">
|
|
|
+ <text class="card-title">费用明细</text>
|
|
|
+ </view>
|
|
|
+ <view class="kv-list">
|
|
|
+ <view v-if="Number(data.packingFee) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">包装费</text>
|
|
|
+ <text class="kv-value">¥{{ money(data.packingFee) }}</text>
|
|
|
</view>
|
|
|
- <view class="order-msg-blo">
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">收花人名</view>
|
|
|
- <view class="value">{{ data.receiveUserName }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">电话号码</view>
|
|
|
- <view class="value">{{ data.receiveMobile }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">地址信息</view>
|
|
|
- <view class="value">
|
|
|
- <view style="text-align:right;">{{ data.address+data.floor }}</view>
|
|
|
- <view v-if="data.fullAddress!=data.showAddress && data.showAddress!=''" style="color:#a7a0a0;text-align:right;">{{data.showAddress}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view v-if="Number(data.sendCost) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">运费</text>
|
|
|
+ <text class="kv-value">¥{{ money(data.sendCost) }}</text>
|
|
|
</view>
|
|
|
- <view class="order-msg-blo">
|
|
|
- <!-- 配送方式：xhPsMethod.name（后端按 sendType 解析） -->
|
|
|
- <view class="msg-list" v-if="!$util.isEmpty(data.psMethodName)">
|
|
|
- <view class="label">配送方式</view>
|
|
|
- <view class="value">{{ data.psMethodName }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">配送时间</view>
|
|
|
- <view class="value">
|
|
|
- {{ data.reachDate ? data.reachDate : '' }} {{data.reachPeriod?data.reachPeriod:''}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">贺卡内容</view>
|
|
|
- <view class="value">{{ data.cardInfo}}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">匿名派送</view>
|
|
|
- <view class="value">{{ data.anonymity == 1 ? '是' : '' }}</view>
|
|
|
- </view>
|
|
|
- <!-- xhOrder.remark：匿名派送下方展示 -->
|
|
|
- <view class="msg-list" v-if="!$util.isEmpty(data.remark)">
|
|
|
- <view class="label">备注</view>
|
|
|
- <view class="value">{{ data.remark }}</view>
|
|
|
- </view>
|
|
|
+ <view v-if="Number(data.discountAmount) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">优惠金额</text>
|
|
|
+ <text class="kv-value kv-value--minus">-¥{{ money(data.discountAmount) }}</text>
|
|
|
</view>
|
|
|
- <view class="order-msg-blo">
|
|
|
- <!-- xhOrder.packingFee：大于 0 时展示，排在订单运费前 -->
|
|
|
- <view class="msg-list" v-if="Number(data.packingFee) > 0">
|
|
|
- <view class="label">包装费</view>
|
|
|
- <view class="value">￥{{ data.packingFee ? parseFloat(data.packingFee) : 0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list" v-if="Number(data.sendCost)>0">
|
|
|
- <view class="label">订单运费</view>
|
|
|
- <view class="value">￥{{ data.sendCost?parseFloat(data.sendCost):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list" v-if="data.discountAmount && Number(data.discountAmount) > 0">
|
|
|
- <view class="label">优惠金额</view>
|
|
|
- <view class="value">-￥{{ data.discountAmount?parseFloat(data.discountAmount):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list" v-if="data.orderReachDiscountPrice && Number(data.orderReachDiscountPrice) > 0">
|
|
|
- <view class="label">订单满减</view>
|
|
|
- <view class="value">-￥{{ data.orderReachDiscountPrice?parseFloat(data.orderReachDiscountPrice):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list" v-if="data.hbAmount && Number(data.hbAmount) > 0">
|
|
|
- <view class="label">红包减免</view>
|
|
|
- <view class="value">-￥{{ data.hbAmount?parseFloat(data.hbAmount):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">订单合计</view>
|
|
|
- <view class="value">￥{{ data.mainPay?parseFloat(data.mainPay):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list" v-if="Number(data.remainDebtPrice)>0">
|
|
|
- <view class="label">订单待结</view>
|
|
|
- <view class="value" style="color:red;font-weight:bold;">￥{{ data.remainDebtPrice?parseFloat(data.remainDebtPrice):0 }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">订单编号</view>
|
|
|
- <view class="value">{{ data.orderSn }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">创建时间</view>
|
|
|
- <view class="value">{{ data.addTime ? data.addTime.substr(0,13) : ''}}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">支付渠道</view>
|
|
|
- <view class="value">{{ payChannelInfo }}</view>
|
|
|
- </view>
|
|
|
- <view class="msg-list">
|
|
|
- <view class="label">支付方式</view>
|
|
|
- <view class="value">{{ payWayInfo }}</view>
|
|
|
+ <view v-if="Number(data.orderReachDiscountPrice) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">订单满减</text>
|
|
|
+ <text class="kv-value kv-value--minus">-¥{{ money(data.orderReachDiscountPrice) }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="Number(data.hbAmount) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">红包减免</text>
|
|
|
+ <text class="kv-value kv-value--minus">-¥{{ money(data.hbAmount) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="kv-row kv-row--strong">
|
|
|
+ <text class="kv-label">实付合计</text>
|
|
|
+ <text class="kv-value kv-value--pay">¥{{ money(data.mainPay) }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="Number(data.remainDebtPrice) > 0" class="kv-row">
|
|
|
+ <text class="kv-label">订单待结</text>
|
|
|
+ <text class="kv-value kv-value--debt">¥{{ money(data.remainDebtPrice) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="card">
|
|
|
+ <view class="card-hd">
|
|
|
+ <text class="card-title">订单信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="kv-list">
|
|
|
+ <view class="kv-row">
|
|
|
+ <text class="kv-label">订单编号</text>
|
|
|
+ <view class="kv-value-row">
|
|
|
+ <text class="kv-value">{{ data.orderSn || '--' }}</text>
|
|
|
+ <text v-if="data.orderSn" class="copy-btn" @click="copySn">复制</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="kv-row">
|
|
|
+ <text class="kv-label">创建时间</text>
|
|
|
+ <text class="kv-value">{{ data.addTime ? String(data.addTime).substr(0, 16) : '--' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="kv-row">
|
|
|
+ <text class="kv-label">支付渠道</text>
|
|
|
+ <text class="kv-value">{{ payChannelInfo }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="kv-row">
|
|
|
+ <text class="kv-label">支付方式</text>
|
|
|
+ <text class="kv-value">{{ payWayInfo }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="page-btn app-footer">
|
|
|
- <view class="flex-center" style="align-items: center; display: flex;">
|
|
|
- <span style="font-size:40upx; line-height: 1;"></span>
|
|
|
- <span class="app-price">
|
|
|
- <span class="app-price-text">{{data.forward==0?'':'售后收入 '}}￥</span>
|
|
|
- <span class="app-price-text">{{ data.actPrice?parseFloat(data.actPrice):0 }}</span>
|
|
|
- </span>
|
|
|
+
|
|
|
+ <!-- 底栏 -->
|
|
|
+ <view class="footer safe-bottom">
|
|
|
+ <view class="footer-price">
|
|
|
+ <text class="footer-price__prefix">{{ data.forward == 0 ? '实付' : '售后收入' }}</text>
|
|
|
+ <text class="footer-price__symbol">¥</text>
|
|
|
+ <text class="footer-price__num">{{ money(data.actPrice) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-actions">
|
|
|
+ <template v-if="Number(data.status) === 1">
|
|
|
+ <button class="foot-btn foot-btn--primary" @click="payFn">立即支付</button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <button class="foot-btn foot-btn--ghost" @click="goViewRefund">售后记录</button>
|
|
|
+ <button class="foot-btn foot-btn--ghost" @click="goRefund">申请售后</button>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
- <template v-if="data.status == 1">
|
|
|
- <button class="button-com green big" @click="payFn">立即支付</button>
|
|
|
- </template>
|
|
|
- <!-- 非待支付：申请记录 + 申请售后始终同时展示；有待审时进申请页只能看进度不能再提交 -->
|
|
|
- <template v-else>
|
|
|
- <view class="refund-actions">
|
|
|
- <button class="button-com default big refund-btn" @click="goViewRefund">售后记录</button>
|
|
|
- <button class="button-com default big refund-btn" @click="goRefund">申请售后</button>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
/**
|
|
|
- * 商城订单详情
|
|
|
- * 底栏「申请记录」进本单售后列表；「申请售后」进申请页（有待审核时只展示进度，不可再提交）
|
|
|
+ * 商城订单详情：状态 / 收货 / 商品 / 费用 / 售后入口
|
|
|
+ * 底栏「售后记录」进本单售后列表；「申请售后」进申请页
|
|
|
*/
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import orderItem from "@/components/module/app-order-item";
|
|
|
-import ListModule from "@/components/module/app-order-list";
|
|
|
-import AppCouponSel from "@/components/app-coupon-sel";
|
|
|
-import { getDetail } from "@/api/order";
|
|
|
-import { getShopUser } from "@/utils/auth";
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import orderItem from '@/components/module/app-order-item'
|
|
|
+import ListModule from '@/components/module/app-order-list'
|
|
|
+import { getDetail } from '@/api/order'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "detail",
|
|
|
- components: { ListModule, AppCouponSel,orderItem },
|
|
|
+ name: 'detail',
|
|
|
+ components: {
|
|
|
+ ListModule,
|
|
|
+ orderItem
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- constant: this.$constant,
|
|
|
data: {},
|
|
|
- discountArr: false,
|
|
|
- payWayInfo: "微信支付",
|
|
|
+ payWayInfo: '微信支付',
|
|
|
/** 支付渠道：onlinePay 2=线上 1=线下 */
|
|
|
- payChannelInfo: "线下",
|
|
|
- reachPeriodInfo: "上午",
|
|
|
+ payChannelInfo: '线下',
|
|
|
+ reachPeriodInfo: '',
|
|
|
/** 首次 init 完成后再在 onShow 里重拉，避免进页连打两次 */
|
|
|
detailInited: false
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters({ shopUser: "getShopUser" }),
|
|
|
+ ...mapGetters({ shopUser: 'getShopUser' }),
|
|
|
+ /** 状态配图：与商城 ORDER_STATUS 取值对齐 */
|
|
|
statusImg() {
|
|
|
- let img = "";
|
|
|
- if (this.data.status == 0) {
|
|
|
- img = `${this.$constant.imgUrl}/retail/order/wait-pay.png`;
|
|
|
- } else if (this.data.status == 1) {
|
|
|
- img = `${this.$constant.imgUrl}/retail/order/wait-delivery.png`;
|
|
|
- } else if (this.data.status == 2) {
|
|
|
- img = `${this.$constant.imgUrl}/retail/order/in-delivery.png`;
|
|
|
- } else if (this.data.status == 5) {
|
|
|
- img = `${this.$constant.imgUrl}/retail/order/order-confirm.png`;
|
|
|
+ const status = Number(this.data.status)
|
|
|
+ const base = this.$constant.imgUrl + '/retail/order/'
|
|
|
+ if (status === 1) {
|
|
|
+ return base + 'wait-pay.png'
|
|
|
+ }
|
|
|
+ if (status === 2) {
|
|
|
+ return base + 'wait-delivery.png'
|
|
|
+ }
|
|
|
+ if (status === 3) {
|
|
|
+ return base + 'in-delivery.png'
|
|
|
+ }
|
|
|
+ if (status === 4) {
|
|
|
+ return base + 'order-confirm.png'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ /** 状态下方一句提示，帮助用户理解当前该做什么 */
|
|
|
+ statusHint() {
|
|
|
+ const status = Number(this.data.status)
|
|
|
+ if (status === 1) {
|
|
|
+ return '请尽快完成支付，超时订单可能自动取消'
|
|
|
+ }
|
|
|
+ if (status === 2) {
|
|
|
+ return '商家备货中，请耐心等待配送'
|
|
|
+ }
|
|
|
+ if (status === 3) {
|
|
|
+ return '鲜花配送途中，注意查收'
|
|
|
+ }
|
|
|
+ if (status === 4) {
|
|
|
+ return '订单已完成，感谢您的惠顾'
|
|
|
+ }
|
|
|
+ if (status === 5) {
|
|
|
+ return '订单已取消'
|
|
|
+ }
|
|
|
+ if (status === 6) {
|
|
|
+ return '订单已退款'
|
|
|
}
|
|
|
- return img;
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ /** 配送时间展示：日期 + 时段文案 */
|
|
|
+ reachTimeText() {
|
|
|
+ const date = this.data.reachDate || ''
|
|
|
+ const period = this.reachPeriodInfo || this.data.reachPeriod || ''
|
|
|
+ return (date + ' ' + period).trim() || '--'
|
|
|
}
|
|
|
},
|
|
|
- /**
|
|
|
- * 从申请页返回后重拉详情，刷新金额与状态
|
|
|
- */
|
|
|
onShow() {
|
|
|
if (!this.detailInited) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
- this.getDetail();
|
|
|
+ this.getDetail()
|
|
|
},
|
|
|
methods: {
|
|
|
- goShOrder(info){
|
|
|
- this.$util.pageTo({url:'/pages/order/detail?id='+info.shOrderId})
|
|
|
+ /** 金额两位小数展示 */
|
|
|
+ money(val) {
|
|
|
+ const n = parseFloat(val)
|
|
|
+ return isNaN(n) ? '0' : String(n)
|
|
|
+ },
|
|
|
+ goShOrder(info) {
|
|
|
+ this.$util.pageTo({ url: '/pages/order/detail?id=' + info.shOrderId })
|
|
|
+ },
|
|
|
+ /** 复制订单号 */
|
|
|
+ copySn() {
|
|
|
+ const sn = this.data.orderSn
|
|
|
+ if (!sn) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: String(sn),
|
|
|
+ success: () => {
|
|
|
+ this.$msg('已复制订单号')
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
/**
|
|
|
- * 本单售后申请记录：进售后列表（orderId 只看本单），列表再点进详情
|
|
|
+ * 本单售后申请记录：进售后列表（orderId 只看本单）
|
|
|
*/
|
|
|
goViewRefund() {
|
|
|
if (!this.data || !this.data.id) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
- const account = (this.option && this.option.account) || "";
|
|
|
+ const account = (this.option && this.option.account) || ''
|
|
|
this.$util.pageTo({
|
|
|
- url: "/pages/order/refund-list?account=" + account + "&orderId=" + this.data.id
|
|
|
- });
|
|
|
+ url: '/pages/order/refund-list?account=' + account + '&orderId=' + this.data.id
|
|
|
+ })
|
|
|
},
|
|
|
/**
|
|
|
- * 进申请售后页；有待审核时申请页锁进度不可再提交（后端也会拦）
|
|
|
+ * 进申请售后页；分销已结算则拦截
|
|
|
*/
|
|
|
goRefund() {
|
|
|
if (!this.data.id) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
if (Number(this.data.distOrderSettled) === 1) {
|
|
|
- uni.showToast({ title: "分销佣金已结算，无法申请售后", icon: "none" });
|
|
|
- return;
|
|
|
+ uni.showToast({ title: '分销佣金已结算，无法申请售后', icon: 'none' })
|
|
|
+ return
|
|
|
}
|
|
|
- this.$util.pageTo({ url: "/pages/order/refund?account=" + this.option.account + "&id=" + this.data.id });
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: '/pages/order/refund?account=' + this.option.account + '&id=' + this.data.id
|
|
|
+ })
|
|
|
},
|
|
|
init() {
|
|
|
this.getDetail().then(() => {
|
|
|
- this.detailInited = true;
|
|
|
- getShopUser().then(res => {
|
|
|
- if (this.data.status == 0) {
|
|
|
- this.$refs.couponSel._getUserDiscount().then(status => {
|
|
|
- this.discountArr = status;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ this.detailInited = true
|
|
|
}).catch(() => {
|
|
|
- this.detailInited = true;
|
|
|
- });
|
|
|
+ this.detailInited = true
|
|
|
+ })
|
|
|
},
|
|
|
getDetail() {
|
|
|
- let form = {};
|
|
|
+ const form = {}
|
|
|
if (this.option.id) {
|
|
|
- form.id = this.option.id;
|
|
|
+ form.id = this.option.id
|
|
|
} else if (this.option.orderSn) {
|
|
|
- form.orderSn = this.option.orderSn;
|
|
|
+ form.orderSn = this.option.orderSn
|
|
|
}
|
|
|
return getDetail(form).then(res => {
|
|
|
- this.data = res.data;
|
|
|
+ this.data = res.data || {}
|
|
|
|
|
|
if (res.data.payWay == 0) {
|
|
|
- this.payWayInfo = "微信支付";
|
|
|
+ this.payWayInfo = '微信支付'
|
|
|
} else if (res.data.payWay == 1) {
|
|
|
- this.payWayInfo = "支付宝";
|
|
|
+ this.payWayInfo = '支付宝'
|
|
|
} else if (res.data.payWay == 2) {
|
|
|
- this.payWayInfo = "余额";
|
|
|
+ this.payWayInfo = '余额'
|
|
|
} else if (res.data.payWay == 3) {
|
|
|
- this.payWayInfo = "记账";
|
|
|
+ this.payWayInfo = '记账'
|
|
|
} else {
|
|
|
- this.payWayInfo = "其它";
|
|
|
+ this.payWayInfo = '其它'
|
|
|
}
|
|
|
// onlinePay：字典 yes=2 线上，not=1 线下
|
|
|
- this.payChannelInfo = Number(res.data.onlinePay) === 2 ? "线上" : "线下";
|
|
|
+ this.payChannelInfo = Number(res.data.onlinePay) === 2 ? '线上' : '线下'
|
|
|
|
|
|
if (res.data.reachPeriod == 0) {
|
|
|
- this.reachPeriodInfo = "上午";
|
|
|
+ this.reachPeriodInfo = '上午'
|
|
|
} else if (res.data.reachPeriod == 1) {
|
|
|
- this.reachPeriodInfo = "下午";
|
|
|
+ this.reachPeriodInfo = '下午'
|
|
|
} else if (res.data.reachPeriod == 2) {
|
|
|
- this.reachPeriodInfo = "晚上";
|
|
|
+ this.reachPeriodInfo = '晚上'
|
|
|
+ } else if (res.data.reachPeriod) {
|
|
|
+ // 后端已转成文案时直接用
|
|
|
+ this.reachPeriodInfo = String(res.data.reachPeriod)
|
|
|
} else {
|
|
|
- this.reachPeriodInfo = "上午";
|
|
|
+ this.reachPeriodInfo = ''
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
payFn() {
|
|
|
- let account = this.option.account?this.option.account:0
|
|
|
- let orderSn = this.data.orderSn
|
|
|
- let totalPrice = this.data.prePrice
|
|
|
- let id = this.data.id
|
|
|
- let hdId = this.data.hdId
|
|
|
- this.$util.pageTo({ url: "/pages/callback/pay?account="+account+'&orderSn='+orderSn+'&totalPrice='+totalPrice+'&pageStatus=1&id='+id+'&hdId='+hdId,type:2})
|
|
|
+ const account = this.option.account ? this.option.account : 0
|
|
|
+ const orderSn = this.data.orderSn
|
|
|
+ const totalPrice = this.data.prePrice
|
|
|
+ const id = this.data.id
|
|
|
+ const hdId = this.data.hdId
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: '/pages/callback/pay?account=' + account + '&orderSn=' + orderSn + '&totalPrice=' + totalPrice + '&pageStatus=1&id=' + id + '&hdId=' + hdId,
|
|
|
+ type: 2
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.app-content {
|
|
|
- padding-bottom:20upx;
|
|
|
+.detail-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f6f8;
|
|
|
+ padding-bottom: 160upx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
-.page-top {
|
|
|
+
|
|
|
+.hero {
|
|
|
position: relative;
|
|
|
- height: 160upx;
|
|
|
- .page-top-img {
|
|
|
- height: 160upx;
|
|
|
- overflow: hidden;
|
|
|
- /* 与门店主色一致的斜向绿渐变 */
|
|
|
- background: linear-gradient(135deg, #12c96b 0%, #09c567 55%, #00b894 100%);
|
|
|
- }
|
|
|
- .page-top-det {
|
|
|
- position: absolute;
|
|
|
- top: 36upx; // 进一步减小顶部间距
|
|
|
- left:20upx;
|
|
|
- @include disFlex(center, space-between);
|
|
|
- width: 84%;
|
|
|
- padding: 0 24upx; // 进一步减小左右padding
|
|
|
- color: #fff;
|
|
|
- .page-status {
|
|
|
- font-size: 30upx; // 进一步减小字体大小
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 6upx; // 进一步减小底部间距
|
|
|
- }
|
|
|
- .page-groupbuy-status {
|
|
|
- font-size: 24upx;
|
|
|
- color: #ffe6ec;
|
|
|
- margin-top: 4upx;
|
|
|
- }
|
|
|
- .page-prompt {
|
|
|
- color: #ffdede;
|
|
|
- }
|
|
|
- .page-status-img {
|
|
|
- width: 120upx; // 进一步减小图片宽度
|
|
|
- }
|
|
|
- }
|
|
|
+ padding-bottom: 36upx;
|
|
|
}
|
|
|
-.page-det {
|
|
|
- width: 94%;
|
|
|
- /* #ifdef MP-WEIXIN */
|
|
|
- margin: 0 auto 90upx auto;
|
|
|
- /* #endif */
|
|
|
- /* #ifdef H5 */
|
|
|
- margin: 0 auto 25upx auto;
|
|
|
- /* #endif */
|
|
|
- position: relative;
|
|
|
- top: -40upx;
|
|
|
- .order-msg {
|
|
|
- .order-msg-blo {
|
|
|
- font-size: 28upx;
|
|
|
- padding: 20upx 0;
|
|
|
- border-top: 1upx solid $borderColor;
|
|
|
- .msg-list {
|
|
|
- @include disFlex(flex-start, space-between);
|
|
|
- margin: 16upx 0;
|
|
|
- .label {
|
|
|
- width: 40%;
|
|
|
- color: $fontColor3;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- & .order-msg-blo:first-child {
|
|
|
- border-top: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-wrap {
|
|
|
- .module-det {
|
|
|
- padding: 20upx 0;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+.hero-bg {
|
|
|
+ height: 210upx;
|
|
|
+ background: linear-gradient(135deg, #12c96b 0%, #09c567 50%, #00b894 100%);
|
|
|
}
|
|
|
-// 底部按钮
|
|
|
-.page-btn {
|
|
|
- width: 100%;
|
|
|
- @include disFlex(center, space-between);
|
|
|
- padding: 0 30upx;
|
|
|
- .app-price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8upx;
|
|
|
- margin-left: 4upx;
|
|
|
- color: $greenColor;
|
|
|
- }
|
|
|
- .app-price-text {
|
|
|
- font-size: 40upx;
|
|
|
- line-height: 1;
|
|
|
- color: $greenColor;
|
|
|
- }
|
|
|
- .green {
|
|
|
- width: 300upx;
|
|
|
- }
|
|
|
- .red {
|
|
|
- width: 300upx;
|
|
|
- }
|
|
|
- .default {
|
|
|
- width: 300upx;
|
|
|
- }
|
|
|
- /* 申请记录 / 申请售后：描边主色，与「立即支付」实心区分；两钮并排收窄 */
|
|
|
- .refund-btn {
|
|
|
- color: $mainColor !important;
|
|
|
- border: 1upx solid $mainColor !important;
|
|
|
- background-color: #fff !important;
|
|
|
- }
|
|
|
- .refund-actions {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .refund-actions .refund-btn {
|
|
|
- margin-left: 0;
|
|
|
- width: 200upx;
|
|
|
- }
|
|
|
- .refund-actions .refund-btn + .refund-btn {
|
|
|
- margin-left: 16upx;
|
|
|
- }
|
|
|
+
|
|
|
+.hero-inner {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 210upx;
|
|
|
+ /* 内容靠上，避免「待配送」等字在竖直居中时头顶太空 */
|
|
|
+ padding: 28upx 36upx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-left {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ margin-right: 24upx;
|
|
|
+ padding-top: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-status {
|
|
|
+ display: block;
|
|
|
+ font-size: 40upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-hint {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: rgba(255, 255, 255, 0.88);
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
-// 公共模块
|
|
|
-.module-com {
|
|
|
- border-radius: 10upx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 0 20upx;
|
|
|
- box-shadow: 0upx 6upx 16upx #ddd;
|
|
|
+
|
|
|
+.hero-group {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #fff3c4;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-img {
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-top: 4upx;
|
|
|
+}
|
|
|
+
|
|
|
+.body {
|
|
|
+ position: relative;
|
|
|
+ /* 状态文案上移后，收花等信息卡同步上提，减少中间空白 */
|
|
|
+ margin-top: -72upx;
|
|
|
+ padding: 0 24upx 24upx;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20upx;
|
|
|
+ padding: 28upx 28upx 24upx;
|
|
|
margin-bottom: 20upx;
|
|
|
- .module-tit {
|
|
|
- padding: 20upx 0;
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 1upx solid $borderColor;
|
|
|
- }
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.card--addr {
|
|
|
+ padding-bottom: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.card--warn {
|
|
|
+ background: #fffbeb;
|
|
|
+ border: 1upx solid #fde68a;
|
|
|
+}
|
|
|
+
|
|
|
+.card-hd {
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ padding-bottom: 16upx;
|
|
|
+ border-bottom: 1upx solid #f0f1f3;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-icon-wrap {
|
|
|
+ width: 56upx;
|
|
|
+ height: 56upx;
|
|
|
+ border-radius: 28upx;
|
|
|
+ background: rgba(4, 158, 44, 0.12);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-icon {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: $greenColor;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-user-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-name {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-right: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-mobile {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-line {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 1.5;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-sub {
|
|
|
+ display: block;
|
|
|
+ margin-top: 6upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #a7a0a0;
|
|
|
+ line-height: 1.4;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-meta {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding-top: 20upx;
|
|
|
+ border-top: 1upx solid #f3f4f6;
|
|
|
+}
|
|
|
+
|
|
|
+.meta-chip {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 24upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ padding: 8upx 16upx;
|
|
|
+ background: #f5faf7;
|
|
|
+ border-radius: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.meta-chip__label {
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #7a9b86;
|
|
|
+ margin-right: 10upx;
|
|
|
+}
|
|
|
+
|
|
|
+.meta-chip__value {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-extra {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-top: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-extra__label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 72upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-extra__value {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.5;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.warn-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #92400e;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.warn-links {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.warn-link {
|
|
|
+ margin-right: 20upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #3385ff;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-box {
|
|
|
+ padding: 8upx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-total {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-top: 16upx;
|
|
|
+ border-top: 1upx solid #f0f1f3;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-total__label {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666666;
|
|
|
+ margin-right: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-total__value {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-list {
|
|
|
+ padding-top: 4upx;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14upx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-row--strong {
|
|
|
+ margin-top: 8upx;
|
|
|
+ padding-top: 20upx;
|
|
|
+ border-top: 1upx solid #f0f1f3;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 24upx;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-value {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: right;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-value-row {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-value--minus {
|
|
|
+ color: #e62e45;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-value--pay {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: $greenColor;
|
|
|
+}
|
|
|
+
|
|
|
+.kv-value--debt {
|
|
|
+ color: #e62e45;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.copy-btn {
|
|
|
+ margin-left: 16upx;
|
|
|
+ padding: 4upx 14upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ color: $greenColor;
|
|
|
+ background: rgba(4, 158, 44, 0.08);
|
|
|
+ border-radius: 8upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 50;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 112upx;
|
|
|
+ padding: 16upx 24upx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 -4upx 20upx rgba(0, 0, 0, 0.06);
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.safe-bottom {
|
|
|
+ padding-bottom: calc(16upx + env(safe-area-inset-bottom));
|
|
|
+}
|
|
|
+
|
|
|
+.footer-price {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.footer-price__prefix {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666666;
|
|
|
+ margin-right: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.footer-price__symbol {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: $greenColor;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.footer-price__num {
|
|
|
+ font-size: 40upx;
|
|
|
+ color: $greenColor;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.footer-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-btn {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 28upx;
|
|
|
+ height: 72upx;
|
|
|
+ line-height: 72upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border-radius: 36upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-btn::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-btn--primary {
|
|
|
+ min-width: 220upx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: $greenColor;
|
|
|
+ border: 1upx solid $greenColor;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-btn--ghost {
|
|
|
+ min-width: 160upx;
|
|
|
+ color: #666666;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1upx solid #d9d9d9;
|
|
|
+}
|
|
|
+
|
|
|
+.foot-btn--ghost + .foot-btn--ghost {
|
|
|
+ margin-left: 16upx;
|
|
|
}
|
|
|
</style>
|
