From 18b45638fe3aac07e65aeb5b1da337d4e4bdc87c Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期日, 30 十一月 2025 18:24:36 +0800
Subject: [PATCH] fix(pay): 更新支付页面文案及逻辑
---
pages/pay/shuaKa/shuaKa.vue | 673 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 673 insertions(+), 0 deletions(-)
diff --git a/pages/pay/shuaKa/shuaKa.vue b/pages/pay/shuaKa/shuaKa.vue
new file mode 100644
index 0000000..0e10c5a
--- /dev/null
+++ b/pages/pay/shuaKa/shuaKa.vue
@@ -0,0 +1,673 @@
+<template>
+ <view>
+ <view :class="join?'page1':'page'">
+ <image class="logo1" :src="bankCardStyle.logo"></image>
+ <view class="douyu-txt page-title">鍒�<text>{{info.bankCardName}}</text></view>
+ <view class="douyu-txt page-title">鏈�楂樺彲寰梴{info.totalDiscount/100}}鍏冪ぜ鍖�</view>
+ <view class="detils-title">鍒穥{info.bankCardName}}锛岀疮绉瑪鏁拌幏绀煎寘 <navigator class="detail"
+ url="/pages/pay/shuaKa/introduce">璇︽儏
+ </navigator>
+ </view>
+ <view v-if="join" class="step-box">
+ <view class="step">
+ <view class="step-title">鏈椿鍔ㄥ墿浣�<text>{{diffDay}}</text>澶�</view>
+ <scroll-view :scroll-into-view="`step-item-${current-1}`" class="step-item-box"
+ scroll-with-animation scroll-x>
+ <view :id="`step-item-${i}`" class="jmy-flex step-item" v-for="(item,i) in milepost" :key="i">
+ <view @click="stepClick(i)" class="jmy-text-center">
+ <image class="step-icon"
+ :src="item.lackBrushCount>0?'/static/shuaka/pay-by-card-step.png':'/static/shuaka/pay-by-card-step-act.png'">
+ </image>
+ <view :class="['step-item-title',{'step-item-title-act':current==i}]">
+ {{item.nodeName}}
+ </view>
+ </view>
+ <view v-if="item.lackBrushCount==0&&item.curt&&i<milepost.length-1"
+ class="step-line step-line-cur"></view>
+ <view v-else-if="item.lackBrushCount>0&&i<milepost.length-1"
+ class="step-line step-line-next">
+ </view>
+ <view v-else-if="item.lackBrushCount==0&&i<milepost.length-1" class="step-line"></view>
+ </view>
+ </scroll-view>
+ </view>
+ <swiper @change="bindchange" next-margin="62rpx" style="height: calc(100vh - 600rpx);" :current="current">
+ <swiper-item v-for="(post,i) in milepost" :key="i">
+ <scroll-view scroll-y="true" style="height: calc(100% - 40rpx);">
+ <view class="coupon-box">
+ <view class="jmy-flex coupon-box-title">
+ <image src="/static/shuaka/coupon-title-left.png"></image>
+ <view v-if="post.lackBrushCount==0">浣犲凡鑾峰緱浠ヤ笅浼樻儬鍒�</view>
+ <view v-else>
+ <view v-if="post.nodeNumOfMin-post.lackBrushCount">
+ 宸插埛{{post.nodeNumOfMin-post.lackBrushCount}}绗�</view>
+ <view>鍐嶅埛<text style="color: #D31F28;">{{post.lackBrushCount}}</text>绗斿彲瑙ｉ攣浠ヤ笅浼樻儬鍒�
+ </view>
+ </view>
+
+ <image src="/static/shuaka/coupon-title-right.png"></image>
+ </view>
+ <view v-for="(item,i) in post.lackBrushCount==0?post.coupIdsMap:post.coupIds" :key="i"
+ :class="['coupon',post.lackBrushCount==0?'coupon-get':'coupon-lock' ]">
+ <view class="num">
+ <view>
+ <text class="unit">锟�</text>
+ <text class="money">{{parseFloat(item.discount/100)}}</text>
+ </view>
+ <view class="condition">
+ 婊{parseFloat((item.threshold_value||item.thresholdValue)/100)}}鍏冧娇鐢�
+ </view>
+ </view>
+ <view class="info">
+ <view class="title">{{item.name}}</view>
+ <view v-if="item.validityDay" class="validity">
+ 鏈夋晥鏈燂細棰嗗彇鍚巤{item.validityDay}}澶�</view>
+ <view v-else class="validity">
+ 鏈夋晥鏈熻嚦锛歿{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}
+ </view>
+ </view>
+ <image v-if="post.lackBrushCount!=0" class="lock-icon"
+ src="/static/shuaka/pay-by-card-lock.png" mode=""></image>
+ </view>
+ </view>
+ </scroll-view>
+ </swiper-item>
+ </swiper>
+
+ <!-- <view @click="checkNotice" :class="['notice',{'check':notice}]">閫氱煡鎴戝弬涓庢椿鍔ㄨ繘灞�</view> -->
+ </view>
+ <image v-else @click="joinActivity" class="btn" src="/static/shuaka/pay-by-card-btn.png"></image>
+ </view>
+ <u-popup :show="popup" @close="popup=false;getDto()" mode="center" bgColor="transparent">
+ <view class="popup">
+ <view class="popup-title">鎭枩鑾峰緱</view>
+ <view class="jmy-flex popup-sub-title">
+ <image src="/static/shuaka/coupon-title-left.png"></image>
+ <view>宸茶幏<text>{{couponIds.length}}</text>寮犱紭鎯犲埜</view>
+ <image src="/static/shuaka/coupon-title-right.png"></image>
+ </view>
+ <scroll-view class="scroll-view" scroll-y>
+ <view v-for="(item,i) in couponIds" :key="i" class="coupon1">
+ <view class="num">
+ <view>
+ <text class="unit">锟�</text>
+ <text class="money">{{parseFloat(item.discount/100)}}</text>
+ </view>
+ <view class="condition">婊{parseFloat(item.threshold_value/100)}}鍏冧娇鐢�</view>
+ </view>
+ <view class="info">
+ <view class="title">{{item.name}}</view>
+ <view v-if="item.validityDay" class="validity">
+ 鏈夋晥鏈燂細棰嗗彇鍚巤{item.validityDay}}澶�</view>
+ <view v-else class="validity">
+ 鏈夋晥鏈熻嚦锛歿{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}</view>
+ </view>
+ </view>
+ </scroll-view>
+ <navigator class="popup-btn jmy-flex" url="/pages/myCard/myCard">鏌ョ湅鍗″寘</navigator>
+ </view>
+ <image @click="popup=false;getDto()" class="popup-close" src="/static/shuaka/popup-close.png"></image>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import {
+ bankCardStyle,
+ } from '@/common/api/index'
+ import {
+ activityInfo,
+ signActivity,
+ myBrushDetail
+ } from '@/common/api/shuaka'
+ export default {
+ data() {
+ return {
+ brushCount: 0,
+ bankCardStyle: {
+ color: '',
+ logo: ''
+ }, //閾惰鍗￠鏍�
+ current: 0,
+ join: false,
+ notice: true,
+ popup: false,
+ couponList: [],
+ couponIds: [],
+ info: {
+ bankCardName: '',
+ totalDiscount: 0,
+ milepost: []
+ },
+ milepost: [],
+ diffDay: 0,
+ };
+ },
+ onLoad() {
+ //鑾峰彇閾惰鍗￠鏍奸厤缃�
+ bankCardStyle().then(res => {
+ try {
+ res.logo = this.$utils.getGoodsImg(res.logo, '2')
+ } catch (e) {
+ //TODO handle the exception
+ res.logo = ''
+ }
+ this.bankCardStyle = res
+ // console.log(this.bankCardStyle);
+ }).catch(() => {
+ uni.hideLoading()
+ })
+ /* 娲诲姩璇︽儏 */
+ activityInfo().then(res => {
+ this.info = res
+ })
+ this.getDto()
+ },
+ methods: {
+ getDto() {
+ uni.showLoading()
+ /* 鍙備笌淇℃伅 */
+ myBrushDetail().then(res => {
+ uni.hideLoading()
+ if (res) {
+ this.diffDay = this.$utils.getDiffDay(res.taskStartTime, res.taskEndTime)
+ this.join = true
+ this.brushCount = Number(res.brushCount)
+ res.milePost.map((item, i) => {
+ if (item.lackBrushCount == 0) {
+ this.current = i
+ }
+ })
+ res.milePost[this.current].curt = true
+ if (res.milePost[this.current].lackBrushCount == 0) {
+ this.couponList = res.milePost[this.current].coupIdsMap
+ } else {
+ this.couponList = res.milePost[this.current].coupIds
+ }
+
+ this.milepost = res.milePost
+ }
+ }).catch(() => {
+ uni.hideLoading()
+ })
+ },
+ stepClick(i) {
+ const cur = this.milepost[i]
+ if (cur.lackBrushCount == 0) {
+ this.couponList = cur.coupIdsMap
+ } else {
+ this.couponList = cur.coupIds
+ }
+ this.current = i
+ },
+ bindchange({
+ detail: {
+ current
+ }
+ }) {
+ this.current = current
+ },
+ joinActivity() {
+ signActivity().then(res => {
+ if (res.isOk) {
+ if (this.couponIds) {
+ this.couponIds = res.couponIds
+ this.popup = true
+ } else {
+ this.join = true
+ uni.showToast({
+ icon: 'success',
+ title: '鍙備笌鎴愬姛'
+ })
+ }
+ } else {
+ uni.showToast({
+ icon: 'none',
+ title: res.reason
+ })
+ }
+ })
+ },
+ checkNotice() {
+ this.notice = !this.notice
+ },
+ closePopup() {
+ this.popup = !this.popup
+ },
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @font-face {
+ font-family: "DOUYU";
+ src: url("https://zhkj.jinmingyuan.com:8443/sftpxcx/jrstq/font/DOUYU.ttf");
+ }
+
+ .jmy-flex {
+ display: flex;
+ align-items: center;
+ }
+
+ .jmy-flex-nowrap {
+ flex-wrap: nowrap;
+ }
+
+ .jmy-text-center {
+ text-align: center;
+ }
+
+
+ .douyu-txt {
+ font-family: "DOUYU";
+ }
+
+ .page {
+ min-height: 100vh;
+ background-image: url('~@/static/shuaka/pay-by-card-bg.png');
+ background-position: center top;
+ background-color: #FDEDDE;
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ }
+
+ .page1 {
+ min-height: 100vh;
+ background-image: url('~@/static/shuaka/pay-by-card-bg-top.png');
+ background-position: center top;
+ background-color: #F8F9F9;
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ }
+
+ .logo1 {
+ box-sizing: border-box;
+ padding: 10rpx;
+ width: 90rpx;
+ height: 90rpx;
+ background-color: #ffffff;
+ border-radius: 45rpx;
+ margin: 30rpx 30rpx 0;
+ }
+
+ .page-title {
+ font-size: 60rpx;
+ font-weight: 400;
+ color: #6670E7;
+ text-align: center;
+ line-height: 1.3;
+ }
+
+ .page-title text {
+ color: #FB5B4A;
+ }
+
+ .detils-title {
+ width: 590rpx;
+ height: 65rpx;
+ line-height: 65rpx;
+ margin: 20rpx auto;
+ background-image: url('~@/static/shuaka/pay-by-card-dto-ttitle-bg.png');
+ background-size: cover;
+ color: #6670E7;
+ font-size: 25rpx;
+ font-weight: 400;
+ text-align: center;
+ }
+
+ .detail {
+ display: inline-block;
+ font-size: 28rpx;
+ color: #FB5B4A;
+ margin-left: 30rpx;
+ }
+
+ .detail::after {
+ content: '';
+ display: inline-block;
+ width: 10rpx;
+ height: 10rpx;
+ border-top: 1rpx solid #FB5B4A;
+ border-right: 1rpx solid #FB5B4A;
+ transform: rotate(45deg);
+ position: relative;
+ bottom: 4rpx;
+ }
+
+ .demo {
+ display: block;
+ width: 683rpx;
+ height: 708rpx;
+ margin: auto;
+ }
+
+ .btn {
+ position: fixed;
+ bottom: 30rpx;
+ bottom: calc(24rpx + constant(safe-area-inset-bottom));
+ /* 鍏煎 iOS < 11.2 */
+ bottom: calc(24rpx + env(safe-area-inset-bottom));
+ /* 鍏煎 iOS >= 11.2 */
+ left: 0;
+ width: 703rpx;
+ height: 137rpx;
+ }
+
+ .step-box {
+ flex: 1;
+ background-color: #F8F9F9;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .step {
+ background-color: #ffffff;
+ }
+
+ .step-title {
+ font-size: 28rpx;
+ color: #7B4324;
+ font-weight: 500;
+ text-align: center;
+ padding: 20rpx;
+ }
+
+ .step-title text {
+ color: #D31F28;
+ font-weight: 700;
+ }
+
+ .step-icon {
+ width: 70rpx;
+ height: 70rpx;
+ }
+
+ .step-item-title {
+ font-size: 22rpx;
+ font-weight: 400;
+ color: #7B4324;
+ }
+
+ .step-item-title-act {
+ color: #FB5B4A;
+ }
+
+ .step-line {
+ background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 100%);
+ width: 117rpx;
+ height: 4rpx;
+ border-radius: 2rpx;
+ position: relative;
+ top: -20rpx;
+ }
+
+ .step-line-cur {
+ background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 50%, #EFEFEF 51%, #EFEFEF 100%);
+ }
+
+ .step-line-next {
+ background-image: linear-gradient(to right, #EFEFEF 0, #EFEFEF 100%);
+ }
+
+ .step-item-box {
+ background-color: #ffffff;
+ white-space: nowrap;
+ }
+
+ .step-item {
+ display: inline-flex;
+ padding-bottom: 20rpx;
+ }
+
+ .step-item-box .step-item:first-child {
+ padding-left: 40rpx;
+ }
+
+ .step-item-box .step-item:last-child {
+ padding-right: 40rpx;
+ }
+
+ .coupon-box {
+ width: 652rpx;
+ margin: 32rpx;
+ border-radius: 10rpx;
+ border: 1rpx solid rgba(255, 177, 166, 1);
+ background: linear-gradient(180.4deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 249, 1) 100%);
+ }
+
+ .coupon-box-title {
+ justify-content: center;
+ text-align: center;
+ margin: 20rpx;
+ font-size: 28rpx;
+ font-weight: 400;
+ color: #333;
+ }
+
+ .coupon-box-title image {
+ width: 132rpx;
+ height: 21rpx;
+ }
+
+ .coupon-box-title text {
+ font-size: 28rpx;
+ font-weight: 400;
+ color: #333;
+ margin: 0 10rpx;
+ }
+
+ .coupon {
+ width: 598rpx;
+ height: 180rpx;
+ background-size: cover;
+ margin: 20rpx auto;
+ display: flex;
+ align-items: center;
+ }
+
+ .lock-icon {
+ width: 58rpx;
+ height: 58rpx;
+ margin-left: 15rpx;
+ }
+
+ .coupon-get {
+ background-image: url('~@/static/shuaka/pay-by-card-coupon-get.png');
+ }
+
+ .coupon-lock {
+ background-image: url('~@/static/shuaka/pay-by-card-coupon-lock.png');
+ }
+
+ .num {
+ color: #D31F28;
+ width: 150rpx;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .coupon-lock .num {
+ color: #CBCBCB;
+ }
+
+ .unit {
+ font-size: 36rpx;
+ font-weight: 900;
+ }
+
+ .money {
+ line-height: 1;
+ font-size: 64rpx;
+ font-weight: 900;
+ }
+
+ .condition {
+ font-size: 20rpx;
+ font-weight: 400;
+ }
+
+ .info {
+ width: 360rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 0 10rpx;
+ }
+
+ .title {
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #333;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ /* white-space:nowrap; */
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ .coupon-lock .title {
+ opacity: 0.33;
+ }
+
+ .validity {
+ margin-top: 15rpx;
+ font-size: 20rpx;
+ font-weight: 400;
+ color: #999;
+ }
+
+ .coupon-lock .validity {
+ opacity: 0.33;
+ }
+
+ .notice {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24rpx;
+ line-height: 1;
+ font-weight: 400;
+ color: #333;
+ margin-bottom: 40rpx;
+ }
+
+ .notice::before {
+ box-sizing: border-box;
+ display: inline-block;
+ content: '';
+ margin-right: 10rpx;
+ width: 28rpx;
+ height: 28rpx;
+ border: 1px solid #999;
+ border-radius: 4rpx;
+ transition: all 0.3s;
+ }
+
+ .notice.check::before {
+ border: none;
+ background-image: url('~@/static/shuaka/notice-check.png');
+ background-size: cover;
+ transition: all 0.3s;
+ }
+
+
+ .popup {
+ box-sizing: border-box;
+ width: 632rpx;
+ height: 935rpx;
+ background-image: url('~@/static/shuaka/pay-by-card-modal-bg.png');
+ background-size: cover;
+ padding: 210rpx 40rpx 20rpx;
+ }
+
+ .popup-close {
+ display: block;
+ margin: 40rpx auto 0;
+ width: 64rpx;
+ height: 64rpx;
+ }
+
+ .popup-title {
+ font-size: 42rpx;
+ font-weight: 700;
+ color: #F2281F;
+ text-align: center;
+ line-height: 1;
+ margin-top: 20rpx;
+ }
+
+ .popup-sub-title {
+ justify-content: center;
+ margin: 20rpx 0 10rpx;
+ color: #B36C44;
+ font-size: 28rpx;
+ }
+
+ .popup-sub-title view {
+ margin: 0 10rpx;
+ }
+
+ .popup-sub-title text {
+ color: #D31F28;
+ }
+
+ .popup-sub-title image {
+ width: 132rpx;
+ height: 21rpx;
+ }
+
+ .popup-btn {
+ margin: 20rpx auto 0;
+ width: 478rpx;
+ height: 88rpx;
+ border-radius: 44rpx;
+ background-color: rgba(238, 68, 82, 1);
+ font-size: 36rpx;
+ font-weight: 500;
+ color: #fff;
+ justify-content: center;
+ }
+
+ .scroll-view {
+ height: 435rpx;
+ }
+
+ .coupon1 {
+ width: 508rpx;
+ height: 145rpx;
+ background-image: url('~@/static/shuaka/pay-by-card-coupon.png');
+ background-size: cover;
+ margin: 20rpx auto;
+ display: flex;
+ align-items: center;
+ }
+
+ .coupon1 .num {
+ height: 110rpx;
+ border-right: 1rpx dashed #FA969A;
+ }
+
+ .coupon1 .unit {
+ font-size: 24rpx;
+ }
+
+ .coupon1 .money {
+ font-size: 50rpx;
+ }
+
+ .coupon1 .condition {
+ font-size: 20rpx;
+ }
+
+ .coupon1 .title {
+ text-align: left;
+ font-size: 24rpx;
+ }
+
+ .coupon1 .validity {
+ font-size: 20rpx;
+ }
+</style>
--
Gitblit v1.9.1