Ver Fonte

feat: 更新开发环境API地址并添加结算时效选择功能

将开发环境的API地址更新为 https://bk.shuhi.com。新增结算时效选择组件,允许用户选择结算时效,并在订单详情中展示相关信息。优化了相关样式和逻辑,确保用户体验流畅。
ylong há 1 semana atrás
pai
commit
166504a8d3

+ 1 - 1
.env.dev.js

@@ -1,5 +1,5 @@
 export default {
     "NODE_ENV": 'development',
-    "apiUrl":"https://bpi.shuhi.com",
+    "apiUrl":"https://bk.shuhi.com",
     "apiUrlPrefix":"/api",
 };

+ 284 - 0
pages-home/components/VerifyPeriodPicker.vue

@@ -0,0 +1,284 @@
+<template>
+    <u-popup v-model="visible" mode="center" border-radius="50" width="88%" :mask-close-able="true" :custom-style="popupCustomStyle" @close="close">
+        <view class="verify-period-picker">
+            <image class="popup-bg" src="/pages-home/static/images/verify-period-popup-bg.png" mode="scaleToFill"></image>
+            <view class="picker-content">
+                <view class="picker-header">
+                    <view class="close-btn" @click.stop="close">
+                        <image class="close-icon" src="/pages-home/static/images/verify-period-close.png" mode="aspectFit"></image>
+                    </view>
+                </view>
+
+                <view class="options-row">
+                    <view class="option-item" :class="{ 'is-selected': tempDays === 7 }" @click="selectDays(7)">
+                        <view class="option-content">
+                            <image
+                                class="radio-icon"
+                                :src="tempDays === 7 ? checkSrc : radioUnselectedSrc"
+                                mode="aspectFit"
+                            ></image>
+                            <view class="option-days">7天</view>
+                            <view class="option-type">普通验货</view>
+                            <view class="option-desc">快速完成结算</view>
+                        </view>
+                    </view>
+
+                    <view class="option-item" :class="{ 'is-selected': tempDays === 15 }" @click="selectDays(15)">
+                        <view class="option-content">
+                            <image
+                                class="radio-icon"
+                                :src="tempDays === 15 ? checkSrc : radioUnselectedSrc"
+                                mode="aspectFit"
+                            ></image>
+                            <view class="option-days">15天</view>
+                            <view class="option-type">安心验货</view>
+                            <view class="option-badge">98%用户选择</view>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="benefits-wrap is-visible" :class="{ 'is-visible': tempDays === 15 || tempDays === 7 }">
+                    <image
+                        class="benefits-img"
+                        src="/pages-home/static/images/verify-period-benefits.png"
+                        mode="widthFix"
+                    ></image>
+                </view>
+
+                <view class="confirm-wrap" @click="confirm">
+                    <image class="confirm-btn" src="/pages-home/static/images/verify-period-confirm-btn.png" mode="widthFix"></image>
+                </view>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    data() {
+        return {
+            tempDays: 15,
+            popupCustomStyle: {
+                background: 'transparent'
+            },
+            checkSrc: '/pages-home/static/images/verify-period-check.png',
+            radioUnselectedSrc: '/pages-home/static/images/verify-period-radio-unselected.png'
+        };
+    },
+    computed: {
+        visible: {
+            get() {
+                return this.show;
+            },
+            set(val) {
+                this.$emit('update:show', val);
+            }
+        }
+    },
+    watch: {
+        show(val) {
+            if (val) {
+                this.tempDays = this.value || 15;
+            }
+        }
+    },
+    methods: {
+        selectDays(days) {
+            this.tempDays = days;
+        },
+        confirm() {
+            if (this.tempDays !== 7 && this.tempDays !== 15) {
+                uni.showToast({ title: '请选择结算时效', icon: 'none' });
+                return;
+            }
+            this.$emit('confirm', {
+                verifyPeriodDays: this.tempDays,
+                label: this.getVerifyPeriodLabel(this.tempDays)
+            });
+            this.close();
+        },
+        getVerifyPeriodLabel(days) {
+            if (days === 7) return '7天普通验货';
+            if (days === 15) return '15天安心验货';
+            return '';
+        },
+        close() {
+            this.$emit('update:show', false);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .u-mode-center-box {
+    background-color: transparent !important;
+    overflow: hidden;
+    border-radius: 50rpx;
+}
+
+::v-deep .u-drawer__scroll-view {
+    background: transparent !important;
+}
+
+::v-deep .u-drawer-content {
+    background: transparent !important;
+}
+
+.verify-period-picker {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 50rpx;
+    background: transparent;
+
+    .popup-bg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 50rpx;
+    }
+
+    .picker-content {
+        position: relative;
+        z-index: 1;
+        padding: 0 28rpx 36rpx;
+        box-sizing: border-box;
+    }
+
+    .picker-header {
+        position: relative;
+        height: 108rpx;
+    }
+
+    .close-btn {
+        position: absolute;
+        right: -8rpx;
+        top: 8rpx;
+        width: 56rpx;
+        height: 56rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 3;
+
+        .close-icon {
+            width: 44rpx;
+            height: 44rpx;
+        }
+    }
+
+    .options-row {
+        display: flex;
+        gap: 16rpx;
+        margin-bottom: 20rpx;
+        margin-top: 54rpx;
+    }
+
+    .option-item {
+        flex: 1;
+        position: relative;
+        height: 196rpx;
+        background: #ffffff;
+        border: 3rpx solid #38c148;
+        border-radius: 20rpx;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        &.is-selected {
+            background: #edfbe8;
+        }
+    }
+
+    .option-content {
+        position: relative;
+        z-index: 1;
+        height: 100%;
+        padding: 28rpx 20rpx 20rpx;
+        box-sizing: border-box;
+    }
+
+    .radio-icon {
+        position: absolute;
+        right: 14rpx;
+        top: 14rpx;
+        width: 40rpx;
+        height: 40rpx;
+    }
+
+    .option-days {
+        font-size: 48rpx;
+        font-weight: 700;
+        color: #222222;
+        line-height: 1.1;
+    }
+
+    .option-type {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #5e9f02;
+        margin-top: 10rpx;
+        line-height: 1.2;
+    }
+
+    .option-desc {
+        font-size: 28rpx;
+        color: #999999;
+        margin-top: 14rpx;
+        line-height: 1.3;
+    }
+
+    .option-badge {
+        display: inline-flex;
+        align-items: center;
+        margin-top: 12rpx;
+        padding: 6rpx 14rpx;
+        background: #59b828;
+        border-radius: 24rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 1;
+    }
+
+    .benefits-wrap {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        margin-bottom: 0;
+
+        &.is-visible {
+            max-height: 520rpx;
+            opacity: 1;
+            margin-bottom: 20rpx;
+        }
+    }
+
+    .benefits-img {
+        width: 100%;
+        display: block;
+        border-radius: 16rpx;
+    }
+
+    .confirm-wrap {
+        padding-top: 24rpx;
+    }
+
+    .confirm-btn {
+        width: 100%;
+        display: block;
+    }
+}
+</style>

+ 38 - 0
pages-home/pages/book-order.vue

@@ -45,6 +45,19 @@
                     <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
                 </view>
             </view>
+
+            <view class="flex-a flex-j-b time-card mt-20" style="padding: 0 10rpx" @click="showVerifyPeriodPicker = true">
+                <view class="flex-a">
+                    <view :style="titleStyle" class="ml-10 font-28">结算时效</view>
+                    <text class="u-required">*</text>
+                </view>
+
+                <view class="flex-a">
+                    <view v-if="verifyPeriodLabel" :style="titleStyle" class="ml-10">{{ verifyPeriodLabel }}</view>
+                    <view v-else :style="titleStyle" class="ml-10">请选择结算时效</view>
+                    <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
+                </view>
+            </view>
         </view>
 
         <!-- 快递备注部分 -->
@@ -91,6 +104,12 @@
 
         <pickup-time-picker :show.sync="showTimePicker" @confirm="onTimeConfirm"></pickup-time-picker>
 
+        <verify-period-picker
+            :show.sync="showVerifyPeriodPicker"
+            :value="submitData.verifyPeriodDays"
+            @confirm="onVerifyPeriodConfirm"
+        ></verify-period-picker>
+
         <submit-confirm ref="submitConfirmDialog" @confirm="handleConfirmSubmit"></submit-confirm>
     </view>
 </template>
@@ -98,12 +117,14 @@
 <script>
     import bookItem from "@/pages-home/components/BookItem.vue";
     import pickupTimePicker from "@/pages-home/components/PickupTimePicker.vue";
+    import VerifyPeriodPicker from "@/pages-home/components/VerifyPeriodPicker.vue";
     import SubmitConfirm from "@/pages-home/components/SubmitConfirm.vue";
 
     export default {
         components: {
             bookItem,
             pickupTimePicker,
+            VerifyPeriodPicker,
             SubmitConfirm,
         },
         data() {
@@ -119,7 +140,9 @@
                 showPicker: false,
                 expressList: [],
                 showTimePicker: false,
+                showVerifyPeriodPicker: false,
                 selectedTime: {},
+                verifyPeriodLabel: "",
                 defaultAddr: {},
 
                 submitData: {
@@ -130,6 +153,7 @@
                     schedulePickupEndTime: "",
                     expressDelivery: "",
                     remark: "",
+                    verifyPeriodDays: null,
                 },
                 totalNum: 0,
                 totalRecycleMoney: 0,
@@ -141,6 +165,12 @@
                     url: '/pages-mine/pages/rules-for-sellbooks'
                 })
             },
+            // 结算时效选择
+            onVerifyPeriodConfirm(data) {
+                this.submitData.verifyPeriodDays = data.verifyPeriodDays;
+                this.verifyPeriodLabel = data.label;
+            },
+
             //时间选择
             onTimeConfirm(data) {
                 this.selectedTime = data;
@@ -180,6 +210,10 @@
                     this.$u.toast("请选择取件时间");
                     return;
                 }
+                if (!this.submitData.verifyPeriodDays) {
+                    this.$u.toast("请选择结算时效");
+                    return;
+                }
                 if (!this.agreed) {
                     this.$u.toast("请先同意用户协议");
                     return;
@@ -297,6 +331,10 @@
         margin-left: 8rpx;
     }
 
+    .mt-20 {
+        margin-top: 20rpx;
+    }
+
     .time-card {
         height: 80rpx;
         background: #f8f8f8;

BIN
pages-home/static/images/verify-period-benefits.png


BIN
pages-home/static/images/verify-period-card-bg.png


BIN
pages-home/static/images/verify-period-card-selected.png


BIN
pages-home/static/images/verify-period-card-unselected.png


BIN
pages-home/static/images/verify-period-check.png


BIN
pages-home/static/images/verify-period-close.png


BIN
pages-home/static/images/verify-period-confirm-btn.png


BIN
pages-home/static/images/verify-period-popup-bg.png


BIN
pages-home/static/images/verify-period-radio-unselected.png


BIN
pages-home/static/images/verify-period-title.png


+ 23 - 0
pages-mine/pages/order-detail.vue

@@ -34,6 +34,10 @@
 					</view>
 					<text class="common-text-2 font-26">¥{{ orderInfo.expectMoney }}</text>
 				</view>
+				<view class="flex-a flex-j-b" v-if="orderInfo.verifyPeriodDays === 15 && orderInfo.verifyUpMoney" style="margin-top: 10rpx;">
+					<text class="common-text-2 font-26">15天安心验货上浮2%:</text>
+					<text class="common-text-2 font-26">¥{{ orderInfo.verifyUpMoney }}</text>
+				</view>
 			</view>
 		</view>
 		<!-- 订单信息区块 -->
@@ -71,6 +75,14 @@
 			</view>
 		</view>
 
+		<!-- 结算时效信息 -->
+		<view class="info-block" v-if="orderInfo.verifyPeriodDays">
+			<view class="flex-d">
+				<text class="common-title font-32">已选择结算时效</text>
+				<text class="common-text font-26 mt-12">{{ verifyPeriodText }}</text>
+			</view>
+		</view>
+
 		<!-- 底部操作栏 -->
 		<view class="bottom-fixed-con detail-bottom flex-d">
 			<service-info :firstOrder="orderInfo.firstOrder"></service-info>
@@ -157,6 +169,13 @@ export default {
 			this.orderId = options.orderId;
 		}
 	},
+	computed: {
+		verifyPeriodText() {
+			if (this.orderInfo.verifyPeriodDays === 7) return '7天普通验货';
+			if (this.orderInfo.verifyPeriodDays === 15) return '15天安心验货';
+			return '';
+		}
+	},
 	onShow() {
 		if (this.orderId) {
 			this.getOrderInfo(this.orderId);
@@ -335,6 +354,10 @@ export default {
 		margin-top: 20rpx;
 	}
 
+	.mt-12 {
+		margin-top: 12rpx;
+	}
+
 	.info-block {
 		background: #ffffff;
 		padding: 30rpx;