|
|
@@ -0,0 +1,661 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <view class="page-det">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 商品信息模块 -->
|
|
|
+ <view class="module-com goods-info-module">
|
|
|
+ <view class="module-tit">
|
|
|
+ <text class="module-tit__text">商品信息</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="module-det">
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="goods-list" v-if="!$util.isEmpty(orderInfo.goodsInfoList)">
|
|
|
+ <detailGoods
|
|
|
+ v-for="(item, index) in orderInfo.goodsInfoList"
|
|
|
+ :key="`goods-${index}`"
|
|
|
+ :info="item">
|
|
|
+ </detailGoods>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 项目列表 -->
|
|
|
+ <view class="items-list" v-if="!$util.isEmpty(orderInfo.itemInfoList)">
|
|
|
+ <detailItem
|
|
|
+ v-for="(item, index) in orderInfo.itemInfoList"
|
|
|
+ :key="`item-${index}`"
|
|
|
+ :info="item">
|
|
|
+ </detailItem>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 合计金额 -->
|
|
|
+ <view class="total-price">
|
|
|
+ <text class="total-label">合计</text>
|
|
|
+ <text class="total-amount">￥{{ orderInfo.goodsPrice ? parseFloat(orderInfo.goodsPrice) : 0 }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 收花人信息模块 -->
|
|
|
+ <view class="module-com order-msg" v-if="orderInfo.forward == 0">
|
|
|
+ <view class="module-tit">
|
|
|
+ <text class="module-tit__text">
|
|
|
+ 收花人信息
|
|
|
+ <text v-if="orderInfo.fromType == 4 && !$util.isEmpty(orderInfo.thirdSn)">（美团编号：{{orderInfo.thirdSn}}）</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="module-det">
|
|
|
+ <view class="order-msg-blo">
|
|
|
+ <!-- 备注信息 -->
|
|
|
+ <view class="msg-list" v-if="!$util.isEmpty(orderInfo.remark)">
|
|
|
+ <view class="label">备注：</view>
|
|
|
+ <view class="value remark-box">{{orderInfo.remark}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 收花人信息 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">收花姓名：</view>
|
|
|
+ <view class="value">
|
|
|
+ {{ orderInfo.receiveUserName }}
|
|
|
+ <text
|
|
|
+ class="ml-18 phone-link link-primary"
|
|
|
+ v-if="!$util.isEmpty(orderInfo.receiveMobile)"
|
|
|
+ @click="callUp(orderInfo.receiveMobile)">{{orderInfo.receiveMobile}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 地址信息 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">收花地址：</view>
|
|
|
+ <view class="value">
|
|
|
+ <view>{{orderInfo.address}}{{orderInfo.floor}}</view>
|
|
|
+ <view v-if="orderInfo.fullAddress!=orderInfo.showAddress && orderInfo.showAddress!=''" style="color:#a7a0a0;">
|
|
|
+ {{ orderInfo.showAddress }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 匿名派送 -->
|
|
|
+ <view class="msg-list" v-if="orderInfo.anonymity && Number(orderInfo.anonymity) == 1">
|
|
|
+ <view class="label">要求：</view>
|
|
|
+ <view class="value"><text class="tag tag--danger">匿名派送</text></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 送达时间 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">{{orderInfo.sendType == 1?'取花时间':'配送时间'}}：</view>
|
|
|
+ <view class="value">
|
|
|
+ <text v-if="orderInfo.reachDate == orderInfo.today">今天</text>
|
|
|
+ <text v-else-if="orderInfo.reachDate == orderInfo.tomorrow">明天</text>
|
|
|
+ <text v-else>{{thisYear==orderInfo.reachDate.substr(0,4)?'':orderInfo.reachDate.substr(0,4)+'-'}}{{orderInfo.reachDate ? orderInfo.reachDate.substr(5,11):''}}</text>
|
|
|
+ <text class="ml-10">{{orderInfo.reachPeriod||''}}前</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 寄语信息 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">贺卡内容：</view>
|
|
|
+ <view class="value">{{ orderInfo.cardInfo || '' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 自取信息 -->
|
|
|
+ <view class="msg-list" v-if="orderInfo.sendType == 1">
|
|
|
+ <view class="label">配送类型：</view>
|
|
|
+ <view class="value"><text class="tag tag--primary">到店自取</text></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单信息模块 -->
|
|
|
+ <view class="module-com order-msg">
|
|
|
+ <view class="module-tit">
|
|
|
+ <text class="module-tit__text">订单信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="module-det">
|
|
|
+ <view class="order-msg-blo">
|
|
|
+ <!-- 付款类型 -->
|
|
|
+ <view class="msg-list" v-if="orderInfo.payStatus == 1">
|
|
|
+ <view class="label">付款类型：</view>
|
|
|
+ <view class="value" v-if="orderInfo.onlinePay == 2"><text class="tag tag--primary">线上付款</text></view>
|
|
|
+ <view class="value" v-else>线下付款</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 付款方式 -->
|
|
|
+ <view class="msg-list" v-if="orderInfo.payStatus == 1">
|
|
|
+ <view class="label">付款方式：</view>
|
|
|
+ <block v-if="orderInfo.payWay==3">
|
|
|
+ <view
|
|
|
+ class="value"
|
|
|
+ v-if="Number(orderInfo.remainDebtPrice)>0"
|
|
|
+ style="color:red;font-weight:bold;">
|
|
|
+ 赊账
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-else
|
|
|
+ class="value"
|
|
|
+ style="color:#3385ff;font-weight:bold;">
|
|
|
+ 赊账<text>（已结清）</text>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <view class="value" v-else>
|
|
|
+ {{ orderInfo.payWay == 0 ? '微信支付':
|
|
|
+ orderInfo.payWay == 1 ? '支付宝':
|
|
|
+ orderInfo.payWay == 2 ? '余额':
|
|
|
+ orderInfo.payWay == 4 ? '现金':
|
|
|
+ orderInfo.payWay == 5 ? '银行卡':'其它'}}
|
|
|
+ <text v-if="Number(orderInfo.mainPay)>0 && Number(orderInfo.cash)>0">
|
|
|
+ （现金付了￥{{ orderInfo.cash ? parseFloat(orderInfo.cash) : 0 }}）
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 欠款信息 -->
|
|
|
+ <view class="msg-list rel" v-if="Number(orderInfo.remainDebtPrice)>0">
|
|
|
+ <view class="label">欠款金额：</view>
|
|
|
+ <view class="value" style="color:red;font-weight:bold;">
|
|
|
+ ￥{{ orderInfo.remainDebtPrice ? parseFloat(orderInfo.remainDebtPrice) : 0 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 运费 -->
|
|
|
+ <view class="msg-list" v-if="Number(orderInfo.sendCost)>0">
|
|
|
+ <view class="label">运费金额：</view>
|
|
|
+ <view class="value">￥{{ orderInfo.sendCost ? parseFloat(orderInfo.sendCost) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 手续费 -->
|
|
|
+ <view class="msg-list" v-if="Number(orderInfo.serviceFee)>0">
|
|
|
+ <view class="label">手续费用：</view>
|
|
|
+ <view class="value">￥{{ orderInfo.serviceFee ? parseFloat(orderInfo.serviceFee) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 包装费(劳务) -->
|
|
|
+ <view class="msg-list" v-if="Number(orderInfo.labourCost)>0">
|
|
|
+ <view class="label">材料费用：</view>
|
|
|
+ <view class="value">￥{{ orderInfo.labourCost ? parseFloat(orderInfo.labourCost) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 包装费 -->
|
|
|
+ <view class="msg-list" v-if="Number(orderInfo.packingFee)>0">
|
|
|
+ <view class="label">包装费用：</view>
|
|
|
+ <view class="value">￥{{ orderInfo.packingFee ? parseFloat(orderInfo.packingFee) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 应付金额 -->
|
|
|
+ <view class="msg-list" v-if="Number(orderInfo.tkPrice)>0">
|
|
|
+ <view class="label">订单金额：</view>
|
|
|
+ <view class="value">￥{{ orderInfo.orderPrice ? parseFloat(orderInfo.orderPrice) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 退款信息 -->
|
|
|
+ <view class="msg-list rel" v-if="Number(orderInfo.tkPrice)>0">
|
|
|
+ <view class="label">退款金额：</view>
|
|
|
+ <view class="value" style="color:red;font-weight:bold;">
|
|
|
+ -￥{{ orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 优惠金额 -->
|
|
|
+ <view v-if="orderInfo.discountAmount > 0" class="msg-list">
|
|
|
+ <view class="label">优惠金额：</view>
|
|
|
+ <view class="value">-￥{{ orderInfo.discountAmount ? parseFloat(orderInfo.discountAmount) : 0 }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 实际金额 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">实际金额：</view>
|
|
|
+ <view class="value">
|
|
|
+ {{orderInfo.forward==0?'':'-'}}￥{{ orderInfo.realPrice ? parseFloat(orderInfo.realPrice) : 0 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单状态 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">订单状态：</view>
|
|
|
+ <view class="value">
|
|
|
+ {{orderInfo.status == 1 ? '待付款':
|
|
|
+ orderInfo.status == 2 ? '待发货':
|
|
|
+ orderInfo.status == 3 ? '配送中':
|
|
|
+ orderInfo.status == 4 ? '已完成':
|
|
|
+ orderInfo.status == 5 ? '已取消':'待付款'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">配送编号：</view>
|
|
|
+ <view class="value">{{ orderInfo.sendNum || '' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">订单编号：</view>
|
|
|
+ <view class="value">{{ orderInfo.orderSn || '' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 下单时间 -->
|
|
|
+ <view class="msg-list">
|
|
|
+ <view class="label">下单时间：</view>
|
|
|
+ <view class="value">{{ orderInfo.addTime ? orderInfo.addTime.substr(5,11) : ''}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 过期时间 -->
|
|
|
+ <view class="msg-list" v-if="orderInfo.status == 1">
|
|
|
+ <view class="label">过期时间：</view>
|
|
|
+ <view class="value">{{ orderInfo.deadline ? orderInfo.deadline : ''}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import detailGoods from "./components/detail-goods.vue";
|
|
|
+import detailWork from "./components/detail-work.vue";
|
|
|
+import detailItem from "./components/detail-item.vue";
|
|
|
+import AppCoupon from "@/components/app-coupon-sel";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+import RateModule from "@/components/plugin/rate";
|
|
|
+import { getOrderInfo } from "@/api/order";
|
|
|
+const commonUtil = require("@/utils/common.js");
|
|
|
+import { confirmSettle } from "@/api/settle/index"
|
|
|
+import { refundAmount } from "@/api/refund";
|
|
|
+export default {
|
|
|
+ name: "info",
|
|
|
+ components: {
|
|
|
+ detailGoods,
|
|
|
+ AppCoupon,
|
|
|
+ ModalModule,
|
|
|
+ RateModule,
|
|
|
+ detailItem,
|
|
|
+ detailWork
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ orderInfo: {},
|
|
|
+ refreshPage: 0,
|
|
|
+ showModal: false,
|
|
|
+ inputValue:0,
|
|
|
+ thisYear: new Date().getFullYear()
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getDetailInfo()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取配送平台
|
|
|
+ */
|
|
|
+ getExpressPlatformText(platform) {
|
|
|
+ const platformMap = {
|
|
|
+ 'DADA': '达达',
|
|
|
+ 'SFTC': '顺丰',
|
|
|
+ }
|
|
|
+ return platformMap[platform] || platform
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 转换配送状态为中文显示
|
|
|
+ */
|
|
|
+ getProgressText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 0: '已叫跑腿，等跑腿接单',
|
|
|
+ 1: '跑腿已接单',
|
|
|
+ 2:'已送达',
|
|
|
+ 3:'已取消',
|
|
|
+ 4:'跑腿已到店',
|
|
|
+ 5:'跑腿配送中'
|
|
|
+ }
|
|
|
+ return statusMap[status] || status
|
|
|
+ },
|
|
|
+ callUp(mobile) {
|
|
|
+ this.$util.callUp(mobile)
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ },
|
|
|
+ getDetailInfo() {
|
|
|
+ let salt = this.option.salt?this.option.salt:''
|
|
|
+ return getOrderInfo({ id: this.option.id,salt:salt }).then(res => {
|
|
|
+ this.orderInfo = res.data;
|
|
|
+ this.orderInfo.deadline = commonUtil.getFormatDate(this.orderInfo.deadline, 'MM-dd hh:mm')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ padding-bottom: 120upx;
|
|
|
+}
|
|
|
+
|
|
|
+.page-det {
|
|
|
+ width: 94%;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ top: 20upx;
|
|
|
+
|
|
|
+ .order-msg {
|
|
|
+ .order-msg-blo {
|
|
|
+ font-size: 28upx;
|
|
|
+ padding: 20upx 0;
|
|
|
+ border-top: 1px solid $borderColor;
|
|
|
+
|
|
|
+ .msg-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 16upx 0;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #999999;
|
|
|
+ width: 160upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 12upx;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ line-height: 1.6;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .order-msg-blo:first-child {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-btn {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ padding: 0 30upx;
|
|
|
+
|
|
|
+ .app-price {
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ margin-left: 4upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ width: 270upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .default {
|
|
|
+ width: 260upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operate-btn-wrap {
|
|
|
+ .admin-button-com {
|
|
|
+ margin-left: 30upx;
|
|
|
+ padding: 20upx 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.module-com {
|
|
|
+ border-radius: 10upx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 20upx;
|
|
|
+ box-shadow: 0upx 6upx 16upx #ddd;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+
|
|
|
+ .module-tit {
|
|
|
+ padding: 20upx 0;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .module-tit__text {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module-tit__actions {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-tip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
|
|
|
+ border: 1px solid #ffc107;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(255, 193, 7, 0.2);
|
|
|
+
|
|
|
+ .tip-content {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tip-text {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #856404;
|
|
|
+ line-height: 1.4;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 通用工具类 */
|
|
|
+.ml-10 { margin-left: 10upx; }
|
|
|
+.ml-18 { margin-left: 18upx; }
|
|
|
+.ml-22 { margin-left: 22upx; }
|
|
|
+.mr-10 { margin-right: 10upx; }
|
|
|
+.rel { position: relative; }
|
|
|
+.abs-tr { position: absolute; right: 0upx; top: 0upx; }
|
|
|
+
|
|
|
+/* 链接与强调 */
|
|
|
+.link-primary { color: #3385ff; }
|
|
|
+.phone-link { text-decoration: underline; }
|
|
|
+
|
|
|
+/* 标签与状态 */
|
|
|
+.tag { display: inline-block; padding: 2upx 8upx; border-radius: 6upx; font-size: 24upx; }
|
|
|
+.tag--primary { background: #e8f2ff; color: #3385ff; }
|
|
|
+.tag--danger { background: #ffecec; color: #ff4d4f; font-weight: 600; }
|
|
|
+
|
|
|
+/* 备注盒子 */
|
|
|
+.remark-box {
|
|
|
+ color: red;
|
|
|
+ font-weight: bold;
|
|
|
+ width: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ min-height: 28upx;
|
|
|
+ height: auto;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+/* 描边按钮（红色） */
|
|
|
+.btn-outline-danger {
|
|
|
+ border: 1upx solid red;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+/* 配送进度行样式 */
|
|
|
+.express-progress-row {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .express-actions {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .admin-button-com {
|
|
|
+ font-size: 24upx;
|
|
|
+ padding: 8upx 16upx;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ &.btn-danger {
|
|
|
+ background-color: #ff6b6b;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品信息模块样式 */
|
|
|
+.goods-info-module {
|
|
|
+ .order-number {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #666;
|
|
|
+ font-size: 26upx;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-list,
|
|
|
+ .items-list {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10upx;
|
|
|
+ padding: 16upx 8upx 16upx 0;
|
|
|
+ margin-top: 12upx;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ .total-label {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-amount {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品信息弹框样式 */
|
|
|
+.goods-modal-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-modal {
|
|
|
+ width: 80%;
|
|
|
+ max-width: 600upx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12upx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 10upx 30upx rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-close {
|
|
|
+ font-size: 40upx;
|
|
|
+ color: #999;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 10upx;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ padding: 40upx;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 80upx;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #3385ff;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 20upx;
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-top: 1px solid #e9ecef;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-btn {
|
|
|
+ padding: 20upx 40upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ min-width: 120upx;
|
|
|
+
|
|
|
+ &.cancel-btn {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #e9ecef;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm-btn {
|
|
|
+ background-color: #3385ff;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #2d74e7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
