|
|
@@ -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>
|