Compare commits
4 Commits
6117026fbb
...
7d1e861e3e
| Author | SHA1 | Date | |
|---|---|---|---|
|
7d1e861e3e | ||
|
|
718b3a2066 | ||
|
|
62cc81168f | ||
|
|
f70843f3dd |
@ -17,4 +17,8 @@ export const apiArr = {
|
||||
couponList: '/api/v1/wechat/discuss/list', // 获取优惠券列表
|
||||
getUserCommunity:"/api/v1/wechat/community/owner/mylist",//获取用户社区信息
|
||||
createQrcode: '/api/v1/wechat/water/device/qr-code', //获取小程序码
|
||||
|
||||
redPackageCenter: '/api/v2/wechat/red-package/center', //红包中心分页
|
||||
redPackageClaim: '/api/v2/wechat/red-package/claim', //领取红包
|
||||
redPackageMyred: '/api/v2/wechat/red-package/my-red', //我的红包分页
|
||||
};
|
||||
@ -82,7 +82,7 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255,27,27,0.05);
|
||||
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
@ -207,7 +207,7 @@ page {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.Msg_con_video{
|
||||
.Msg_con_video {
|
||||
width: calc(33.33% - 11rpx);
|
||||
height: 225rpx;
|
||||
flex-shrink: 0;
|
||||
@ -245,10 +245,184 @@ page {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.Msg_iconList_right div{
|
||||
|
||||
.Msg_iconList_right div {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.mb32{
|
||||
.mb32 {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 优惠劵样式 */
|
||||
.coupon_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
padding: 20rpx 0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.coupon_used1 {
|
||||
background: #ffece7;
|
||||
border: 1rpx solid #FF5757;
|
||||
color: #ff3a0d;
|
||||
}
|
||||
|
||||
.coupon_amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.coupon_condition {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_status {
|
||||
width: 60rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more_coupon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #FF370B;
|
||||
font-size: 30rpx;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
left: 750rpx;
|
||||
z-index: 1000;
|
||||
background-color: #fff;
|
||||
height: 122rpx;
|
||||
padding: 0 20rpx;
|
||||
border-left: 1rpx solid #cccc;
|
||||
}
|
||||
|
||||
.more_text {
|
||||
width: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 优惠详情弹窗样式 */
|
||||
.coupon_popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
.popup_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.popup_close {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup_content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
background: white;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_left {
|
||||
background: #FF5757;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
.coupon_item_amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon_item_condition {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.coupon_item_center {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon_item_expire {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.coupon_item_right {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_button {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
background: #FF370B;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.coupon_item_button::after {
|
||||
border: none;
|
||||
}
|
||||
@ -14,10 +14,25 @@
|
||||
<!-- <u-icon name="star-fill" color="#FFB84D" /> -->
|
||||
<view class="startList">
|
||||
<image v-for="index in 5" :key="index"
|
||||
:src="index < item.rating ? 'https://static.hshuishang.com/property-img-file/local_start1.png' : 'https://static.hshuishang.com/property-img-file/local_start2.png'"
|
||||
:src="index < info.rating ? 'https://static.hshuishang.com/property-img-file/local_start1.png' : 'https://static.hshuishang.com/property-img-file/local_start2.png'"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 优惠劵区域 -->
|
||||
<view class="coupon_container" v-if="coupons.length > 0">
|
||||
<view class="coupon" :class="{ 'coupon_used1': coupon.is_received }" v-for="(coupon, index) in coupons"
|
||||
:key="index">
|
||||
<view class="coupon_amount">¥{{ coupon.money }}</view>
|
||||
<view class="coupon_condition" v-if="coupon.full_amount != 0">满{{ coupon.full_amount }}元可用</view>
|
||||
<view class="coupon_condition" v-else>无门槛</view>
|
||||
<view class="coupon_status" @click="handleCouponClick(coupon)">{{ coupon.is_received ? '已领' : '领取' }}</view>
|
||||
</view>
|
||||
<view class="more_coupon" @click="showCouponDetail">
|
||||
<view class="more_text">更多优惠</view>
|
||||
<u-icon name="arrow-right" color="#FF370B" size="28" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-line margin="46rpx 0 30rpx 0" />
|
||||
<view class="table">
|
||||
<view class="label">联系电话</view>
|
||||
@ -48,8 +63,8 @@
|
||||
<view class="Msg">
|
||||
<view class="Msg_Tit">
|
||||
<view class="Msg_Tit_left">
|
||||
<image src="https://static.hshuishang.com/property-img-file/user_ava.png"
|
||||
v-if="!item.user.avatar" mode="aspectFill"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/user_ava.png" v-if="!item.user.avatar"
|
||||
mode="aspectFill"></image>
|
||||
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
||||
{{ item.user.nick_name }}
|
||||
</view>
|
||||
@ -73,17 +88,14 @@
|
||||
<view class="Msg_iconList">
|
||||
<view class="Msg_iconList_left">
|
||||
<view class="Msg_iconList_leftIcon">
|
||||
<image src="https://static.hshuishang.com/property-img-file/local_review.png"
|
||||
mode="widthFix"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/local_review.png" mode="widthFix"></image>
|
||||
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
|
||||
</view>
|
||||
|
||||
<view class="Msg_iconList_leftIcon">
|
||||
<image v-if="item.is_like == 2"
|
||||
src="https://static.hshuishang.com/property-img-file/com_likeIcon.png"
|
||||
<image v-if="item.is_like == 2" src="https://static.hshuishang.com/property-img-file/com_likeIcon.png"
|
||||
mode="widthFix" @click="like(item)"></image>
|
||||
<image v-if="item.is_like == 1"
|
||||
src="https://static.hshuishang.com/property-img-file/com_likeIcon2.png"
|
||||
<image v-if="item.is_like == 1" src="https://static.hshuishang.com/property-img-file/com_likeIcon2.png"
|
||||
mode="widthFix" @click="unlike(item)"></image>
|
||||
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
||||
</view>
|
||||
@ -101,14 +113,11 @@
|
||||
<view>导航</view>
|
||||
</view>
|
||||
<view class="left_label" @click="handlePhoneClick" v-if="info.phone">
|
||||
<image src="https://static.hshuishang.com/property-img-file/localLife_detail_Frame.png"
|
||||
mode="" />
|
||||
<image src="https://static.hshuishang.com/property-img-file/localLife_detail_Frame.png" mode="" />
|
||||
<view>电话</view>
|
||||
</view>
|
||||
<view class="left_label" @click="handleDiscussClick">
|
||||
<image
|
||||
src="https://static.hshuishang.com/property-img-file/localLife_shopList_Group_1334.png"
|
||||
mode="" />
|
||||
<image src="https://static.hshuishang.com/property-img-file/localLife_shopList_Group_1334.png" mode="" />
|
||||
<view>点评</view>
|
||||
</view>
|
||||
<view class="left_label" @click="handleKfClick">
|
||||
@ -119,6 +128,32 @@
|
||||
<button v-if="isShow && !isDisabled" class="btn" @click="handleQuickPayClick">快捷买单</button>
|
||||
<button v-if="isShow && isDisabled" class="btn_disabled" @click="handleQuickPayClick">快捷买单</button>
|
||||
</view>
|
||||
|
||||
<!-- 优惠详情弹窗 -->
|
||||
<u-popup :show="showCouponPopup" width="650rpx" height="800rpx" round="20rpx">
|
||||
<view class="coupon_popup">
|
||||
<view class="popup_header">
|
||||
<view class="popup_title">优惠详情</view>
|
||||
<view class="popup_close" @click="closeCouponPopup">取消</view>
|
||||
</view>
|
||||
<view class="popup_content">
|
||||
<view class="coupon_item" v-for="(item, index) in couponDetails" :key="index">
|
||||
<view class="coupon_item_left">
|
||||
<view class="coupon_item_amount">¥{{ item.money }}</view>
|
||||
<view class="coupon_item_condition" v-if="item.full_amount != 0">满{{ item.full_amount }}元可用</view>
|
||||
<view class="coupon_item_condition" v-else>无门槛</view>
|
||||
</view>
|
||||
<view class="coupon_item_center">
|
||||
<view class="coupon_item_name">{{ item.red_package_name }}</view>
|
||||
<view class="coupon_item_expire">{{ item.end_time }}到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_right">
|
||||
<view class="coupon_item_button" @click="handleCouponClick(item)">{{ item.is_received ? '已领' : '领取' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -130,6 +165,7 @@ import {
|
||||
} from "../../../utils";
|
||||
|
||||
import { apiArr } from "../../../api/v2local";
|
||||
import { apiArr as apiArr2 } from "../../../api/user";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -142,6 +178,9 @@ export default {
|
||||
flag: false,
|
||||
isShow: false,
|
||||
isDisabled: false,
|
||||
coupons: [],
|
||||
couponDetails: [],
|
||||
showCouponPopup: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -164,6 +203,7 @@ export default {
|
||||
this.getCommentList()
|
||||
}
|
||||
this.getMerchantInfo()
|
||||
this.getCouponList()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.flag) {
|
||||
@ -172,6 +212,29 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCouponList() {
|
||||
const params = {
|
||||
mch_id: uni.getStorageSync("merchantInfo").id,
|
||||
}
|
||||
request(apiArr2.redPackageCenter, "POST", params).then(res => {
|
||||
this.coupons = res.rows
|
||||
this.couponDetails = res.rows
|
||||
})
|
||||
},
|
||||
// 领取红包
|
||||
handleCouponClick(item) {
|
||||
if (item.is_received) {
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
red_package_config_id: item.id,
|
||||
mch_id: item.belong_role == 1 ? item.merchant_id : ''
|
||||
}
|
||||
request(apiArr2.redPackageClaim, 'POST', params).then(res => {
|
||||
this.getCouponList()
|
||||
})
|
||||
},
|
||||
handleQuickPayClick() {
|
||||
if (this.isDisabled) {
|
||||
uni.showToast({
|
||||
@ -313,6 +376,24 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 显示优惠详情弹窗
|
||||
showCouponDetail() {
|
||||
this.showCouponPopup = true;
|
||||
},
|
||||
|
||||
// 关闭优惠详情弹窗
|
||||
closeCouponPopup() {
|
||||
this.showCouponPopup = false;
|
||||
},
|
||||
|
||||
// 领取优惠劵
|
||||
receiveCoupon() {
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -313,10 +313,10 @@ image {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shadowBox1Item_btn{
|
||||
.shadowBox1Item_btn {
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
opacity:0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 100rpx;
|
||||
top: 40rpx;
|
||||
@ -834,3 +834,176 @@ image {
|
||||
width: 220rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 优惠劵样式 */
|
||||
.coupon_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.coupon_used1 {
|
||||
background: #ffece7;
|
||||
border: 1rpx solid #FF5757;
|
||||
color: #ff3a0d;
|
||||
}
|
||||
|
||||
.coupon_amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.coupon_condition {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_status {
|
||||
width: 60rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more_coupon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #FF370B;
|
||||
font-size: 30rpx;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
left: 750rpx;
|
||||
z-index: 1000;
|
||||
background-color: #fff;
|
||||
height: 122rpx;
|
||||
padding: 0 10rpx 0 20rpx;
|
||||
border-left: 1rpx solid #cccc;
|
||||
}
|
||||
|
||||
.more_text {
|
||||
width: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 优惠详情弹窗样式 */
|
||||
.coupon_popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
.popup_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.popup_close {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup_content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
background: white;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_left {
|
||||
background: #FF5757;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
.coupon_item_amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon_item_condition {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.coupon_item_center {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon_item_expire {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.coupon_item_right {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.coupon_item_button {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
background: #FF370B;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.coupon_item_button::after {
|
||||
border: none;
|
||||
}
|
||||
@ -40,8 +40,24 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="GG_rigth" @click="showSizePopup">
|
||||
共{{ info.commodity_goods_info_list ? info.commodity_goods_info_list.length : 0 }}款<u-icon size="26rpx"
|
||||
name="arrow-right"></u-icon>
|
||||
共{{ info.commodity_goods_info_list ? info.commodity_goods_info_list.length : 0 }}款
|
||||
<u-icon size="26rpx" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠劵区域 -->
|
||||
<view class="coupon_container" v-if="coupons.length > 0">
|
||||
<view class="coupon" :class="{ 'coupon_used1': coupon.is_received }" v-for="(coupon, index) in coupons"
|
||||
:key="index">
|
||||
<view class="coupon_amount">¥{{ coupon.money }}</view>
|
||||
<view class="coupon_condition" v-if="coupon.full_amount != 0">满{{ coupon.full_amount }}元可用</view>
|
||||
<view class="coupon_condition" v-else>无门槛</view>
|
||||
<view class="coupon_status" @click="handleCouponClick(coupon)">{{ coupon.is_received ? '已领' : '领取' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="more_coupon" @click="showCouponPopup = true">
|
||||
<view class="more_text">更多优惠</view>
|
||||
<u-icon name="arrow-right" color="#FF370B" size="28" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -54,7 +70,7 @@
|
||||
<view class="fenge"></view>
|
||||
|
||||
<!-- 促销信息区域 -->
|
||||
<view class="promotions-container">
|
||||
<!-- <view class="promotions-container">
|
||||
<view class="promotion-item">
|
||||
<view class="promotion-tag">优惠</view>
|
||||
<view class="promotion-content promotion-content1">满100减10</view>
|
||||
@ -75,7 +91,7 @@
|
||||
<view class="promotion-tag">满减</view>
|
||||
<view class="promotion-content">满100减5，满200减20</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="fenge"></view>
|
||||
|
||||
@ -162,15 +178,13 @@
|
||||
<view class="Car">
|
||||
<view class="car_left">
|
||||
<view class="share" @click="share">
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_share.png"
|
||||
mode="widthFix"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_share.png" mode="widthFix"></image>
|
||||
分享
|
||||
</view>
|
||||
<view class="cars" @click="car">
|
||||
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
||||
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_car.png"
|
||||
mode="widthFix"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_car.png" mode="widthFix"></image>
|
||||
购物车
|
||||
</view>
|
||||
</view>
|
||||
@ -207,13 +221,12 @@
|
||||
<view class="shadowBox1">
|
||||
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick" />
|
||||
<view class="shadowBox1Item" @click="shareFriend">
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_WX.png"
|
||||
mode="aspectFill"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_WX.png" mode="aspectFill"></image>
|
||||
微信好友
|
||||
</view>
|
||||
<view class="shadowBox1Item" @click="openSave">
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_saveImg.png"
|
||||
mode="aspectFill"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/shop_saveImg.png" mode="aspectFill">
|
||||
</image>
|
||||
生成海报
|
||||
</view>
|
||||
</view>
|
||||
@ -227,8 +240,7 @@
|
||||
<image v-if="currentGG && currentGG.commodity_pic && currentGG.commodity_pic.length > 0"
|
||||
:src="picUrl + currentGG.commodity_pic[0]">
|
||||
</image>
|
||||
<image v-else
|
||||
src="https://static.hshuishang.com/property-img-file/shop_share_img.png">
|
||||
<image v-else src="https://static.hshuishang.com/property-img-file/shop_share_img.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
@ -288,6 +300,34 @@
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 优惠详情弹窗 -->
|
||||
<u-popup :show="showCouponPopup" width="650rpx" height="800rpx" round="20rpx">
|
||||
<view class="coupon_popup">
|
||||
<view class="popup_header">
|
||||
<view class="popup_title">优惠详情</view>
|
||||
<view class="popup_close" @click="showCouponPopup = false">取消</view>
|
||||
</view>
|
||||
<view class="popup_content">
|
||||
<view class="coupon_item" v-for="(item, index) in couponDetails" :key="index">
|
||||
<view class="coupon_item_left">
|
||||
<view class="coupon_item_amount">¥{{ item.money }}</view>
|
||||
<view class="coupon_item_condition" v-if="item.full_amount != 0">满{{ item.full_amount }}元可用
|
||||
</view>
|
||||
<view class="coupon_item_condition" v-else>无门槛</view>
|
||||
</view>
|
||||
<view class="coupon_item_center">
|
||||
<view class="coupon_item_name">{{ item.red_package_name }}</view>
|
||||
<view class="coupon_item_expire">{{ item.end_time }}到期</view>
|
||||
</view>
|
||||
<view class="coupon_item_right">
|
||||
<view class="coupon_item_button" @click="handleCouponClick(item)">{{ item.is_received ? '已领'
|
||||
: '领取' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 选择款式 -->
|
||||
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize" @open="open">
|
||||
<!-- <view round="20rpx" mode="bottom"> -->
|
||||
@ -361,22 +401,19 @@
|
||||
<view class="payment-section">
|
||||
<view class="payment-item" @click="selectPayment('wechat')">
|
||||
<view class="payment-icon">
|
||||
<image
|
||||
src="https://static.hshuishang.com/property-img-file/com_wechat.png"
|
||||
mode="aspectFit"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/com_wechat.png" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="payment-content">
|
||||
<view class="payment-name">微信支付</view>
|
||||
</view>
|
||||
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||
<image
|
||||
src="https://static.hshuishang.com/property-img-file/com_check2.png"
|
||||
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/com_check2.png" mode="aspectFit"
|
||||
style="width: 30rpx; height: 30rpx;"></image>
|
||||
</view>
|
||||
<view class="payment-select" v-else>
|
||||
<image
|
||||
src="https://static.hshuishang.com/property-img-file/com_check1.png"
|
||||
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
||||
<image src="https://static.hshuishang.com/property-img-file/com_check1.png" mode="aspectFit"
|
||||
style="width: 30rpx; height: 30rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -389,6 +426,7 @@
|
||||
import {
|
||||
apiArr
|
||||
} from "../../../api/shop";
|
||||
import { apiArr as apiArr2 } from "../../../api/user";
|
||||
import {
|
||||
picUrl,
|
||||
menuButtonInfo,
|
||||
@ -432,6 +470,10 @@ export default {
|
||||
goodsUnit: "",
|
||||
selectedGoods: null, // 保存传入的商品规格信息
|
||||
qrcodePath: null, // 存储当前页面的二维码路径
|
||||
// 红包相关
|
||||
coupons: [],
|
||||
couponDetails: [],
|
||||
showCouponPopup: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -901,6 +943,30 @@ export default {
|
||||
review_image: item.review_image ? item.review_image.split(',') : []
|
||||
}));
|
||||
});
|
||||
},
|
||||
// 获取优惠券列表
|
||||
getCouponList() {
|
||||
const params = {
|
||||
goods_id: this.id,
|
||||
}
|
||||
request(apiArr2.redPackageCenter, "POST", params).then(res => {
|
||||
this.coupons = res.rows
|
||||
this.couponDetails = res.rows
|
||||
})
|
||||
},
|
||||
// 领取红包
|
||||
handleCouponClick(item) {
|
||||
if (item.is_received) {
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
red_package_config_id: item.id,
|
||||
mch_id: item.belong_role == 1 ? item.merchant_id : ''
|
||||
}
|
||||
request(apiArr2.redPackageClaim, 'POST', params).then(res => {
|
||||
this.getCouponList()
|
||||
})
|
||||
}
|
||||
}, onLoad(options) {
|
||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||
@ -908,7 +974,6 @@ export default {
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
|
||||
|
||||
this.id = itemObj.commodity_id ? itemObj.commodity_id : itemObj.id;
|
||||
this.selectedGoods = itemObj; // 保存传入的完整商品信息
|
||||
},
|
||||
@ -918,6 +983,7 @@ export default {
|
||||
this.getGoodsInfo();
|
||||
// this.getShopCar();
|
||||
this.getComment();
|
||||
this.getCouponList();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
161
packages/user/history/index.css
Normal file
161
packages/user/history/index.css
Normal file
@ -0,0 +1,161 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 顶部统计 */
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 28rpx;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 分类标签 */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: 15rpx 25rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #409eff;
|
||||
border-bottom: 5rpx solid #409eff;
|
||||
}
|
||||
|
||||
/* 红包列表 */
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 20rpx;
|
||||
height: 130rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f2f2f2;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item_left {
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.full {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.item_center {
|
||||
flex: 1;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item_right {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.status2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 150rpx;
|
||||
height: 120rpx;
|
||||
overflow: hidden;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.status2::after {
|
||||
content: attr(data-status);
|
||||
position: absolute;
|
||||
top: 25rpx;
|
||||
right: -50rpx;
|
||||
width: 180rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 0 20rpx 0 0;
|
||||
background: #cccccc;
|
||||
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
73
packages/user/history/index.vue
Normal file
73
packages/user/history/index.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 分类标签 -->
|
||||
<view class="tabs">
|
||||
<view v-for="(tab, index) in tabList" :key="index" :class="['tab', { active: currentTab === index }]"
|
||||
@click="switchTab(index)">
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 红包列表 -->
|
||||
<view class="content">
|
||||
<view v-for="(item, index) in redPacketList" :key="index">
|
||||
<view class="item" v-if="item.red_package_config">
|
||||
<view class="item_left">
|
||||
<view class="price">￥{{ item.red_package_config.money }}</view>
|
||||
<view class="full" v-if="item.red_package_config.full_amount">
|
||||
满{{ item.red_package_config.full_amount }}元可用
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_center">
|
||||
<view class="title">{{ item.red_package_config.red_package_name }}</view>
|
||||
<view class="time">{{ item.red_package_config.start_time }} -
|
||||
{{ item.red_package_config.end_time }}</view>
|
||||
<view class="desc">{{ item.red_package_config.belong_role === 1 ? '限指定店铺使用' :
|
||||
(item.red_package_config.belong_role === 2 ? '限指定地区使用' :
|
||||
'全平台使用') }}</view>
|
||||
</view>
|
||||
<view class="status2" :data-status="currentTab == 1 ? '已过期' : '已使用'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/user';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0, // 当前选中的标签索引
|
||||
changeIndex: 1,
|
||||
tabList: ['已使用', '已过期'],
|
||||
redPacketList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getRedPacketHistory(changeIndex) {
|
||||
console.log("🚀 ~ changeIndex:", changeIndex)
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
history: changeIndex,
|
||||
}
|
||||
const res = await request(apiArr.redPackageMyred, 'POST', params);
|
||||
this.redPacketList = res.rows;
|
||||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
this.changeIndex = index === 0 ? 1 : 3;
|
||||
this.getRedPacketHistory(this.changeIndex);
|
||||
console.log('选中的标签:', this.tabList[index]);
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getRedPacketHistory(1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
171
packages/user/myRedPacket/index.css
Normal file
171
packages/user/myRedPacket/index.css
Normal file
@ -0,0 +1,171 @@
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 顶部统计 */
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 28rpx;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 分类标签 */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
padding: 15rpx 25rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 红包列表 */
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
height: 75vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ad_name{
|
||||
margin: 15rpx 0 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ad_name image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 20rpx;
|
||||
height: 170rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 3rpx solid #ff775a;
|
||||
background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.item_left {
|
||||
width: 200rpx;
|
||||
height: 170rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx 80rpx 80rpx 20rpx;
|
||||
border: 3rpx solid #ff775a;
|
||||
position: relative;
|
||||
left: -22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ff7557;
|
||||
}
|
||||
|
||||
.full {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.manjian {
|
||||
font-size: 20rpx;
|
||||
color: #ff7557;
|
||||
background-color: #fff0ed;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item_center {
|
||||
flex: 1;
|
||||
margin: 0 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #ffffff9a;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item_right {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 120rpx;
|
||||
padding: 15rpx 10rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
color: #ff7557;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
224
packages/user/myRedPacket/index.vue
Normal file
224
packages/user/myRedPacket/index.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部统计 -->
|
||||
<view class="stats">
|
||||
<view class="stat-item">
|
||||
<view class="stat-label">红包数（个）</view>
|
||||
<view class="stat-value">{{ redPacketNum }}</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-label">红包金额（元）</view>
|
||||
<view class="stat-value">{{ redPacketMoney }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<view class="tabs">
|
||||
<view v-for="(tab, index) in tabList" :key="index" :class="['tab', { active: currentTab === index }]"
|
||||
@click="switchTab(index)">
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 红包列表 -->
|
||||
<view class="content">
|
||||
<!-- 地区分组显示 -->
|
||||
<view v-if="currentTab === 2">
|
||||
<view v-for="(group, groupIndex) in redPacketList" :key="groupIndex">
|
||||
<view class="ad_name">
|
||||
<image src="https://static.hshuishang.com/Index_add.png" mode="widthFix" />
|
||||
限{{ group.ad_name }}地区使用
|
||||
</view>
|
||||
<view v-for="(item, itemIndex) in group.packets" :key="itemIndex">
|
||||
<view v-if="item.red_package_config">
|
||||
<view class="item">
|
||||
<view class="item_left">
|
||||
<view class="price">￥{{ item.red_package_config.money }}</view>
|
||||
<view class="full" v-if="item.red_package_config.full_amount">
|
||||
满{{ item.red_package_config.full_amount }}元可用
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_center">
|
||||
<view class="title">{{ item.red_package_config.red_package_name }}</view>
|
||||
<view class="time">{{ item.red_package_config.end_time }}到期</view>
|
||||
<view class="desc">{{ item.red_package_config.belong_role === 1 ? '限指定店铺使用' :
|
||||
(item.red_package_config.belong_role === 2 ? '限指定地区使用' :
|
||||
'全平台使用') }}</view>
|
||||
</view>
|
||||
<view class="item_right" v-if="item.status === 2">
|
||||
<view class="status" @click="useRedPacket(item)">去使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 店铺分组显示 -->
|
||||
<view v-else-if="currentTab === 3">
|
||||
<view v-for="(group, groupIndex) in redPacketList" :key="groupIndex">
|
||||
<view class="ad_name">
|
||||
<image src="https://static.hshuishang.com/Index_add.png" mode="widthFix" />
|
||||
{{ group.merchant_name }}
|
||||
</view>
|
||||
<view v-for="(item, itemIndex) in group.packets" :key="itemIndex">
|
||||
<view v-if="item.red_package_config">
|
||||
<view class="item">
|
||||
<view class="item_left">
|
||||
<view class="price">￥{{ item.red_package_config.money }}</view>
|
||||
<view class="full" v-if="item.red_package_config.full_amount">满{{
|
||||
item.red_package_config.full_amount }}元可用</view>
|
||||
</view>
|
||||
<view class="item_center">
|
||||
<view class="title">{{ item.red_package_config.red_package_name }}</view>
|
||||
<view class="time">{{ item.red_package_config.end_time }}到期</view>
|
||||
<view class="desc">{{ item.red_package_config.belong_role === 1 ? '限指定店铺使用' :
|
||||
(item.red_package_config.belong_role === 2 ? '限指定地区使用' :
|
||||
'全平台使用') }}</view>
|
||||
</view>
|
||||
<view class="item_right" v-if="item.status === 2">
|
||||
<view class="status" @click="useRedPacket(item)">去使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 普通显示 -->
|
||||
<view v-else>
|
||||
<view v-for="(item, index) in redPacketList" :key="index">
|
||||
<view v-if="item.red_package_config">
|
||||
<view class="item">
|
||||
<view class="item_left">
|
||||
<view class="price">￥{{ item.red_package_config.money }}</view>
|
||||
<view class="full" v-if="item.red_package_config.full_amount">满{{
|
||||
item.red_package_config.full_amount }}元可用</view>
|
||||
</view>
|
||||
<view class="item_center">
|
||||
<view class="title">{{ item.red_package_config.red_package_name }}</view>
|
||||
<view class="time">{{ item.red_package_config.end_time }}到期</view>
|
||||
<view class="desc">{{ item.red_package_config.belong_role === 1 ? '限指定店铺使用' :
|
||||
(item.red_package_config.belong_role === 2 ? '限指定地区使用' :
|
||||
'全平台使用') }}</view>
|
||||
</view>
|
||||
<view class="item_right" v-if="item.status === 2">
|
||||
<view class="status" @click="useRedPacket(item)">去使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/user';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0, // 当前选中的标签索引
|
||||
tabList: ['全部', '平台', '地区', '店铺', '历史记录'], // 标签列表
|
||||
redPacketList: [],
|
||||
changeIndex: 0,
|
||||
redPacketNum: 0,
|
||||
redPacketMoney: 0.00,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getMyRedPacket(changeIndex) {
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
belong_role: changeIndex == 0 ? '' : changeIndex,
|
||||
}
|
||||
const res = await request(apiArr.redPackageMyred, 'POST', params);
|
||||
let processedList = res.rows.map(item => {
|
||||
const newItem = { ...item };
|
||||
|
||||
if (newItem?.agent_info?.ad?.ad_name) {
|
||||
newItem.agent_info.ad.ad_name = newItem.agent_info.ad.ad_name.split(',').join('');
|
||||
}
|
||||
|
||||
return newItem;
|
||||
});
|
||||
|
||||
if (this.currentTab == 2) {
|
||||
// 地区标签：按 ad_name 分组
|
||||
const grouped = {};
|
||||
processedList.forEach(item => {
|
||||
if (item?.agent_info?.ad?.ad_name) {
|
||||
const adName = item.agent_info.ad.ad_name;
|
||||
if (!grouped[adName]) {
|
||||
grouped[adName] = {
|
||||
ad_name: adName,
|
||||
packets: []
|
||||
};
|
||||
}
|
||||
grouped[adName].packets.push(item);
|
||||
}
|
||||
});
|
||||
this.redPacketList = Object.values(grouped);
|
||||
} else if (this.currentTab == 3) {
|
||||
// 店铺标签：按 merchant_name 分组
|
||||
const grouped = {};
|
||||
processedList.forEach(item => {
|
||||
if (item?.merchant_info?.merchant_name) {
|
||||
const merchantName = item.merchant_info.merchant_name;
|
||||
if (!grouped[merchantName]) {
|
||||
grouped[merchantName] = {
|
||||
merchant_name: merchantName,
|
||||
packets: []
|
||||
};
|
||||
}
|
||||
grouped[merchantName].packets.push(item);
|
||||
}
|
||||
});
|
||||
this.redPacketList = Object.values(grouped);
|
||||
} else {
|
||||
this.redPacketList = processedList;
|
||||
}
|
||||
this.redPacketNum = res.rows.filter(item => item.red_package_config).length;
|
||||
this.redPacketMoney = res.rows.reduce((total, item) =>
|
||||
item.red_package_config ? total + item.red_package_config.money : total, 0.00
|
||||
).toFixed(2);
|
||||
},
|
||||
useRedPacket(item) {
|
||||
console.log('使用红包:', item);
|
||||
if (item.belong_role == 1) {
|
||||
uni.setStorageSync('merchantInfo', item.merchant_info);
|
||||
NavgateTo('/packages/localLife/detail/index')
|
||||
} else if (item.belong_role == 2) {
|
||||
NavgateTo('/pages/index/index');
|
||||
} else if (item.belong_role == 3) {
|
||||
NavgateTo('/packages/shop/index/index');
|
||||
}
|
||||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
console.log('选中的标签:', this.tabList[index]);
|
||||
if (index == 0) {
|
||||
this.changeIndex = 0;
|
||||
} else if (index == 1) {
|
||||
this.changeIndex = 3;
|
||||
} else if (index == 2) {
|
||||
this.changeIndex = 2;
|
||||
} else if (index == 3) {
|
||||
this.changeIndex = 1;
|
||||
}
|
||||
this.getMyRedPacket(this.changeIndex);
|
||||
if (this.tabList[index] == '历史记录') {
|
||||
NavgateTo('/packages/user/history/index');
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.switchTab(0);
|
||||
this.getMyRedPacket(0);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
212
packages/user/redPacket/index.css
Normal file
212
packages/user/redPacket/index.css
Normal file
@ -0,0 +1,212 @@
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 20rpx;
|
||||
height: 170rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 3rpx solid #ff775a;
|
||||
background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%);
|
||||
}
|
||||
|
||||
.item_left {
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
padding-left: 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx 80rpx 80rpx 20rpx;
|
||||
border: 3rpx solid #ff775a;
|
||||
position: relative;
|
||||
left: -22rpx;
|
||||
color: #ff370b;
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直排列 */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.full {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item_center {
|
||||
flex: 1;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #ffffff9a;
|
||||
font-size: 24rpx;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item_right {
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
/* 添加相对定位 */
|
||||
z-index: 10;
|
||||
/* 添加更高的z-index值 */
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 120rpx;
|
||||
padding: 10rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
color: #ff7557;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
/* 添加相对定位 */
|
||||
z-index: 10;
|
||||
/* 添加更高的z-index值 */
|
||||
}
|
||||
|
||||
.status2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 150rpx;
|
||||
height: 120rpx;
|
||||
overflow: hidden;
|
||||
transform: rotate(0deg);
|
||||
z-index: 1;
|
||||
/* 添加较低的z-index值 */
|
||||
}
|
||||
|
||||
.status2::after {
|
||||
content: attr(data-status);
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: -50rpx;
|
||||
width: 180rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
color: #921d0c;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
transform: rotate(30deg);
|
||||
border-radius: 0 20rpx 0 0;
|
||||
background: linear-gradient(90deg, #f0dfa5 0%, #c6a437 100%);
|
||||
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
color: #0079fe;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0 40rpx 0;
|
||||
}
|
||||
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
width: 600rpx;
|
||||
padding: 60rpx 40rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.popup-icon {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #e8fdf2;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto 40rpx;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
width: 30rpx;
|
||||
height: 70rpx;
|
||||
border-right: 20rpx solid #52c41a;
|
||||
border-bottom: 20rpx solid #52c41a;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #262626;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 28rpx;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 50rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
111
packages/user/redPacket/index.vue
Normal file
111
packages/user/redPacket/index.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<scroll-view class="content" scroll-y @scrolltolower="loadMore">
|
||||
<view v-for="(item, index) in redPacketList" :key="index">
|
||||
<view class="item">
|
||||
<view class="item_left">
|
||||
<view class="money">￥{{ item.money }}</view>
|
||||
<view class="full" v-if="item.full_amount">满{{ item.full_amount }}元可用</view>
|
||||
</view>
|
||||
<view class="item_center">
|
||||
<view class="title">{{ item.red_package_name }}</view>
|
||||
<view class="time">{{ item.end_time }}到期</view>
|
||||
<view class="desc">{{ item.scope }}</view>
|
||||
</view>
|
||||
<view class="item_right">
|
||||
<view class="status" @click="showPopup(item)">{{ item.is_received ? '已领取' : '领取' }}</view>
|
||||
</view>
|
||||
<view class="status2" :data-status="item.is_received ? '' : '待领取'" v-if="!item.is_received"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
</scroll-view>
|
||||
<view class="bottom">
|
||||
<view @click="goRedPacket()">我的权益</view>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
|
||||
<view class="popup-content" @click.stop>
|
||||
<view class="popup-icon">
|
||||
<view class="checkmark"></view>
|
||||
</view>
|
||||
<view class="popup-title">领取成功!</view>
|
||||
<view class="popup-desc">{{ currentItem.red_package_name }}{{ currentItem.money }}元已存入您的账户</view>
|
||||
<button class="popup-btn" @click="hidePopup">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/user';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
redPacketList: [],
|
||||
popupVisible: false,
|
||||
currentItem: null,
|
||||
page_num: 1,
|
||||
page_size: 10,
|
||||
loading: false,
|
||||
noMore: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getRedPacketCenter() {
|
||||
const params = {
|
||||
pageNum: this.page_num,
|
||||
pageSize: this.page_size,
|
||||
}
|
||||
const res = await request(apiArr.redPackageCenter, 'POST', params);
|
||||
// 触底加载时合并数据，而不是替换
|
||||
if (this.page_num === 1) {
|
||||
this.redPacketList = res.rows;
|
||||
} else {
|
||||
this.redPacketList = [...this.redPacketList, ...res.rows];
|
||||
}
|
||||
// 判断是否还有更多数据
|
||||
this.noMore = res.rows.length < this.page_size;
|
||||
this.loading = false;
|
||||
},
|
||||
showPopup(item) {
|
||||
if (item.is_received) {
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
red_package_config_id: item.id,
|
||||
mch_id: item.belong_role == 1 ? item.merchant_id : ''
|
||||
}
|
||||
request(apiArr.redPackageClaim, 'POST', params).then(res => {
|
||||
this.currentItem = item;
|
||||
this.popupVisible = true;
|
||||
this.getRedPacketCenter()
|
||||
})
|
||||
},
|
||||
hidePopup() {
|
||||
this.popupVisible = false;
|
||||
this.currentItem = null;
|
||||
},
|
||||
goRedPacket() {
|
||||
NavgateTo('/packages/user/myRedPacket/index');
|
||||
},
|
||||
// 触底加载更多
|
||||
loadMore() {
|
||||
if (this.loading || this.noMore) return;
|
||||
this.loading = true;
|
||||
this.page_num++;
|
||||
this.getRedPacketCenter();
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getRedPacketCenter();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
21
pages.json
21
pages.json
@ -499,6 +499,27 @@
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "redPacket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "红包中心",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "myRedPacket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的权益",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "history/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史记录",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -40,9 +40,9 @@
|
||||
<view>{{ userInfo.property_housing_fund }}元</view>
|
||||
<view>物业费</view>
|
||||
</view>
|
||||
<view class="section_label" @click="goWallet(3)">
|
||||
<view class="section_label" @click="goRedPacket()">
|
||||
<view>0元</view>
|
||||
<view>红包卡券</view>
|
||||
<view>红包中心</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -274,6 +274,9 @@ export default {
|
||||
goWallet(type, item) {
|
||||
NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
|
||||
},
|
||||
goRedPacket() {
|
||||
NavgateTo('/packages/user/redPacket/index');
|
||||
},
|
||||
// 头像点击
|
||||
toLogin() {
|
||||
NavgateTo('/packages/user/replenishInfo/index');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user