charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：抖音支付

Browse Source
This commit is contained in:
charles
2026-09-09 11:46:36 +08:00
parent 75060faa39
commit b350f1c07a
18 changed files with 2670 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/home.vue
+320
View File
@@ -113,6 +113,8 @@
</view>
</view>
<view @click="aaa">亲星星</view>
<view class="home_actived_warp">
<view class="home_actived_item_warp" v-for="item in homeActivedList" :key="item.id">
<view class="home_actived_item">
@@ -215,7 +217,66 @@
</view>
</view>
</up-overlay>
<!-- 专属优惠券弹窗 -->
<up-overlay :show="showCouponPop" @click="showCouponPop = false" zIndex="10090">
<view class="coupon_pop_wrapper">
<view class="coupon_pop_card" @tap.stop>
<!-- 头部标题与关闭按钮 -->
<view class="coupon_pop_header">
<view class="coupon_pop_title">专属优惠券已到账</view>
<view class="coupon_pop_close" @click="showCouponPop = false">
<text class="close_x">✕</text>
</view>
</view>
<!-- 优惠券列表 -->
<scroll-view class="coupon_pop_list" scroll-y>
<view class="coupon_item" v-for="(item, index) in popCouponList"
:key="item.couponUserId || item.templateId || index">
<!-- 左侧金额与门槛 -->
<view class="coupon_left">
<view class="price_wrap">
<text class="currency">¥</text>
<text class="amount">{{ item.discountAmount }}</text>
</view>
<view class="threshold_tag">{{ formatThresholdText(item) }}</view>
</view>
<!-- 垂直虚线分割线 -->
<view class="coupon_divider">
<view class="notch notch_top"></view>
<view class="dashed_line"></view>
<view class="notch notch_bottom"></view>
</view>
<!-- 右侧优惠券信息 -->
<view class="coupon_right">
<view class="coupon_name">{{ item.title || '限时秒杀优惠券' }}</view>
<view class="coupon_scope_box">
<text class="scope_badge">{{ formatScopeBadge(item) }}</text>
<text class="scope_text">{{ item.scopeText || (item.scopeType === 1 ? '所有商品可用' : '部分商品可用') }}</text>
</view>
<view class="coupon_validity">{{ formatValidityText(item) }}</view>
</view>
</view>
</scroll-view>
<!-- 立即收下按钮 -->
<view class="coupon_pop_btn" @click="showCouponPop = false">
立即收下
</view>
<!-- 底部说明文案 -->
<view class="coupon_pop_tip">
优惠券详情可在【我的-优惠券】中查看
</view>
</view>
</view>
</up-overlay>
<HomePopup :show="homeShow" :dataObj="curData" @jumpShop="onJumpShop" @close="homeShow = false"></HomePopup>
<GuidePopup />
<qiaobao-assistant page-key="pages/home/home" title="商城首页" />
</view>
</template>
@@ -238,6 +299,7 @@ import useTabber from "tabber-component";
import { getNewsList } from "@/api/news.js";
import { comparisonVersionHandler } from "@/utils/index.js";
import HomePopup from "@/components/common/home-popup.vue";
import GuidePopup from "@/components/common/guide-popup.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";
import { SHARE_URL } from "@/utils/config.js";
import { getUnreadCount as getKefuUnreadCount } from "@/uni_modules/hashmall-customer-service/js_sdk/api.js";
@@ -246,12 +308,14 @@ import {
startKefuRealtime,
} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
import { getStorageFun, TOKEN_NAME, USER_DATA } from "@/utils/auth.js";
import { getPopNotifyList } from "@/api/coupon.js";
export default {
components: {
choiceness,
CustomTabBar,
HomePopup,
GuidePopup,
productSeckillCard,
},
data() {
@@ -304,6 +368,8 @@ export default {
kefuUnreadRefreshTimer: null,
isScrolled: false,
scrollTop: 0,
showCouponPop: false,
popCouponList: [],
};
},
onPageScroll(e) {
@@ -337,6 +403,7 @@ export default {
this.querySearchList(SEARCH_TYPE.EXPLOSIVE); // 爆单专区
this.onNews(); // 获取公告
this.getCarouselImage();
this.fetchPopNotifyList(); // 获取专属优惠券弹窗通知
// 秒杀
@@ -394,6 +461,11 @@ export default {
// #endif
},
methods: {
aaa() {
uni.navigateTo({
url: '/pages/other_package/douyin_pay_test/douyin_pay_test'
});
},
getScrollTop(e) {
let top = 0;
if (typeof e === "number") {
@@ -885,6 +957,47 @@ export default {
url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
});
},
/**
* 查询专属优惠券弹窗通知
*/
fetchPopNotifyList() {
if (!getStorageFun(TOKEN_NAME)) {
return;
}
getPopNotifyList({ page: 1, pageSize: 100 })
.then((res) => {
if (res && res.bizcode === 100) {
const list = res.data?.entitys || res.data || [];
if (Array.isArray(list) && list.length > 0) {
this.popCouponList = list;
this.showCouponPop = true;
}
}
})
.catch((err) => {
console.error("获取首页优惠券弹窗失败", err);
});
},
formatThresholdText(item) {
if (!item || !item.thresholdAmount || Number(item.thresholdAmount) === 0) {
return "无门槛";
}
return "满减券";
},
formatScopeBadge(item) {
if (item && item.scopeType === 1) {
return "通用券";
}
return "满减券";
},
formatValidityText(item) {
if (item && item.startTime && item.endTime) {
const start = dayjs(item.startTime).format("YYYY.MM.DD");
const end = dayjs(item.endTime).format("YYYY.MM.DD");
return `${start}-${end}`;
}
return "领取之日起30天有效";
},
},
computed: {
isBlockedDate() {
@@ -1657,4 +1770,211 @@ export default {
bottom: 60rpx;
}
}
/* 专属优惠券弹窗 */
.coupon_pop_wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.coupon_pop_card {
width: 620rpx;
background: #ffffff;
border-radius: 32rpx;
padding: 36rpx 32rpx 36rpx;
box-sizing: border-box;
position: relative;
.coupon_pop_header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 28rpx;
.coupon_pop_title {
font-size: 34rpx;
font-weight: bold;
color: #333333;
text-align: center;
}
.coupon_pop_close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 44rpx;
height: 44rpx;
// border: 2rpx solid #dcdcdc;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
.close_x {
color: #999999;
font-size: 24rpx;
line-height: 1;
}
}
}
.coupon_pop_list {
max-height: 520rpx;
margin-bottom: 24rpx;
}
.coupon_item {
display: flex;
align-items: center;
background: #fff5f5;
border-radius: 20rpx;
height: 160rpx;
margin-bottom: 20rpx;
position: relative;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
}
.coupon_left {
width: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.price_wrap {
display: flex;
align-items: baseline;
color: #ff1e27;
.currency {
font-size: 28rpx;
font-weight: bold;
margin-right: 2rpx;
}
.amount {
font-size: 56rpx;
font-weight: bold;
line-height: 1;
}
}
.threshold_tag {
font-size: 24rpx;
color: #ff1e27;
font-weight: bold;
margin-top: 8rpx;
}
}
.coupon_divider {
width: 1rpx;
height: 100%;
position: relative;
.dashed_line {
position: absolute;
top: 16rpx;
bottom: 16rpx;
width: 0;
border-left: 2rpx dashed #ffcdcd;
}
.notch {
width: 20rpx;
height: 20rpx;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
&.notch_top {
top: -10rpx;
}
&.notch_bottom {
bottom: -10rpx;
}
}
}
.coupon_right {
flex: 1;
padding-left: 24rpx;
padding-right: 16rpx;
display: flex;
flex-direction: column;
justify-content: center;
.coupon_name {
font-size: 30rpx;
font-weight: bold;
color: #222222;
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coupon_scope_box {
display: flex;
align-items: center;
margin-bottom: 8rpx;
.scope_badge {
font-size: 20rpx;
color: #ff2437;
border: 1rpx solid #ff8d96;
background: #fff0f0;
border-radius: 6rpx;
padding: 2rpx 10rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.scope_text {
font-size: 22rpx;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.coupon_validity {
font-size: 22rpx;
color: #999999;
}
}
.coupon_pop_btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #ff1e27;
border-radius: 44rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-top: 10rpx;
}
.coupon_pop_tip {
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 24rpx;
}
}
</style>