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', // 获取优惠券列表
|
couponList: '/api/v1/wechat/discuss/list', // 获取优惠券列表
|
||||||
getUserCommunity:"/api/v1/wechat/community/owner/mylist",//获取用户社区信息
|
getUserCommunity:"/api/v1/wechat/community/owner/mylist",//获取用户社区信息
|
||||||
createQrcode: '/api/v1/wechat/water/device/qr-code', //获取小程序码
|
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', //我的红包分页
|
||||||
};
|
};
|
||||||
@ -245,6 +245,7 @@ page {
|
|||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Msg_iconList_right div {
|
.Msg_iconList_right div {
|
||||||
margin-left: 10rpx;
|
margin-left: 10rpx;
|
||||||
}
|
}
|
||||||
@ -252,3 +253,176 @@ page {
|
|||||||
.mb32 {
|
.mb32 {
|
||||||
margin-bottom: 32rpx;
|
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" /> -->
|
<!-- <u-icon name="star-fill" color="#FFB84D" /> -->
|
||||||
<view class="startList">
|
<view class="startList">
|
||||||
<image v-for="index in 5" :key="index"
|
<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>
|
mode="aspectFill"></image>
|
||||||
</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="showCouponDetail">
|
||||||
|
<view class="more_text">更多优惠</view>
|
||||||
|
<u-icon name="arrow-right" color="#FF370B" size="28" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<u-line margin="46rpx 0 30rpx 0" />
|
<u-line margin="46rpx 0 30rpx 0" />
|
||||||
<view class="table">
|
<view class="table">
|
||||||
<view class="label">联系电话</view>
|
<view class="label">联系电话</view>
|
||||||
@ -48,8 +63,8 @@
|
|||||||
<view class="Msg">
|
<view class="Msg">
|
||||||
<view class="Msg_Tit">
|
<view class="Msg_Tit">
|
||||||
<view class="Msg_Tit_left">
|
<view class="Msg_Tit_left">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/user_ava.png"
|
<image src="https://static.hshuishang.com/property-img-file/user_ava.png" v-if="!item.user.avatar"
|
||||||
v-if="!item.user.avatar" mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
<image :src="picUrl + item.user.avatar" 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 }}
|
{{ item.user.nick_name }}
|
||||||
</view>
|
</view>
|
||||||
@ -73,17 +88,14 @@
|
|||||||
<view class="Msg_iconList">
|
<view class="Msg_iconList">
|
||||||
<view class="Msg_iconList_left">
|
<view class="Msg_iconList_left">
|
||||||
<view class="Msg_iconList_leftIcon">
|
<view class="Msg_iconList_leftIcon">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/local_review.png"
|
<image src="https://static.hshuishang.com/property-img-file/local_review.png" mode="widthFix"></image>
|
||||||
mode="widthFix"></image>
|
|
||||||
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
|
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="Msg_iconList_leftIcon">
|
<view class="Msg_iconList_leftIcon">
|
||||||
<image v-if="item.is_like == 2"
|
<image v-if="item.is_like == 2" src="https://static.hshuishang.com/property-img-file/com_likeIcon.png"
|
||||||
src="https://static.hshuishang.com/property-img-file/com_likeIcon.png"
|
|
||||||
mode="widthFix" @click="like(item)"></image>
|
mode="widthFix" @click="like(item)"></image>
|
||||||
<image v-if="item.is_like == 1"
|
<image v-if="item.is_like == 1" src="https://static.hshuishang.com/property-img-file/com_likeIcon2.png"
|
||||||
src="https://static.hshuishang.com/property-img-file/com_likeIcon2.png"
|
|
||||||
mode="widthFix" @click="unlike(item)"></image>
|
mode="widthFix" @click="unlike(item)"></image>
|
||||||
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
||||||
</view>
|
</view>
|
||||||
@ -101,14 +113,11 @@
|
|||||||
<view>导航</view>
|
<view>导航</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left_label" @click="handlePhoneClick" v-if="info.phone">
|
<view class="left_label" @click="handlePhoneClick" v-if="info.phone">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/localLife_detail_Frame.png"
|
<image src="https://static.hshuishang.com/property-img-file/localLife_detail_Frame.png" mode="" />
|
||||||
mode="" />
|
|
||||||
<view>电话</view>
|
<view>电话</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left_label" @click="handleDiscussClick">
|
<view class="left_label" @click="handleDiscussClick">
|
||||||
<image
|
<image src="https://static.hshuishang.com/property-img-file/localLife_shopList_Group_1334.png" mode="" />
|
||||||
src="https://static.hshuishang.com/property-img-file/localLife_shopList_Group_1334.png"
|
|
||||||
mode="" />
|
|
||||||
<view>点评</view>
|
<view>点评</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left_label" @click="handleKfClick">
|
<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" @click="handleQuickPayClick">快捷买单</button>
|
||||||
<button v-if="isShow && isDisabled" class="btn_disabled" @click="handleQuickPayClick">快捷买单</button>
|
<button v-if="isShow && isDisabled" class="btn_disabled" @click="handleQuickPayClick">快捷买单</button>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -130,6 +165,7 @@ import {
|
|||||||
} from "../../../utils";
|
} from "../../../utils";
|
||||||
|
|
||||||
import { apiArr } from "../../../api/v2local";
|
import { apiArr } from "../../../api/v2local";
|
||||||
|
import { apiArr as apiArr2 } from "../../../api/user";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -142,6 +178,9 @@ export default {
|
|||||||
flag: false,
|
flag: false,
|
||||||
isShow: false,
|
isShow: false,
|
||||||
isDisabled: false,
|
isDisabled: false,
|
||||||
|
coupons: [],
|
||||||
|
couponDetails: [],
|
||||||
|
showCouponPopup: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@ -164,6 +203,7 @@ export default {
|
|||||||
this.getCommentList()
|
this.getCommentList()
|
||||||
}
|
}
|
||||||
this.getMerchantInfo()
|
this.getMerchantInfo()
|
||||||
|
this.getCouponList()
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
@ -172,6 +212,29 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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() {
|
handleQuickPayClick() {
|
||||||
if (this.isDisabled) {
|
if (this.isDisabled) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@ -313,6 +376,24 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 显示优惠详情弹窗
|
||||||
|
showCouponDetail() {
|
||||||
|
this.showCouponPopup = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭优惠详情弹窗
|
||||||
|
closeCouponPopup() {
|
||||||
|
this.showCouponPopup = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 领取优惠劵
|
||||||
|
receiveCoupon() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '领取成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -834,3 +834,176 @@ image {
|
|||||||
width: 220rpx;
|
width: 220rpx;
|
||||||
margin-left: 20rpx;
|
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>
|
</view>
|
||||||
<view class="GG_rigth" @click="showSizePopup">
|
<view class="GG_rigth" @click="showSizePopup">
|
||||||
共{{ info.commodity_goods_info_list ? info.commodity_goods_info_list.length : 0 }}款<u-icon size="26rpx"
|
共{{ info.commodity_goods_info_list ? info.commodity_goods_info_list.length : 0 }}款
|
||||||
name="arrow-right"></u-icon>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -54,7 +70,7 @@
|
|||||||
<view class="fenge"></view>
|
<view class="fenge"></view>
|
||||||
|
|
||||||
<!-- 促销信息区域 -->
|
<!-- 促销信息区域 -->
|
||||||
<view class="promotions-container">
|
<!-- <view class="promotions-container">
|
||||||
<view class="promotion-item">
|
<view class="promotion-item">
|
||||||
<view class="promotion-tag">优惠</view>
|
<view class="promotion-tag">优惠</view>
|
||||||
<view class="promotion-content promotion-content1">满100减10</view>
|
<view class="promotion-content promotion-content1">满100减10</view>
|
||||||
@ -75,7 +91,7 @@
|
|||||||
<view class="promotion-tag">满减</view>
|
<view class="promotion-tag">满减</view>
|
||||||
<view class="promotion-content">满100减5，满200减20</view>
|
<view class="promotion-content">满100减5，满200减20</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<view class="fenge"></view>
|
<view class="fenge"></view>
|
||||||
|
|
||||||
@ -162,15 +178,13 @@
|
|||||||
<view class="Car">
|
<view class="Car">
|
||||||
<view class="car_left">
|
<view class="car_left">
|
||||||
<view class="share" @click="share">
|
<view class="share" @click="share">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/shop_share.png"
|
<image src="https://static.hshuishang.com/property-img-file/shop_share.png" mode="widthFix"></image>
|
||||||
mode="widthFix"></image>
|
|
||||||
分享
|
分享
|
||||||
</view>
|
</view>
|
||||||
<view class="cars" @click="car">
|
<view class="cars" @click="car">
|
||||||
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
||||||
|
|
||||||
<image src="https://static.hshuishang.com/property-img-file/shop_car.png"
|
<image src="https://static.hshuishang.com/property-img-file/shop_car.png" mode="widthFix"></image>
|
||||||
mode="widthFix"></image>
|
|
||||||
购物车
|
购物车
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -207,13 +221,12 @@
|
|||||||
<view class="shadowBox1">
|
<view class="shadowBox1">
|
||||||
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick" />
|
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick" />
|
||||||
<view class="shadowBox1Item" @click="shareFriend">
|
<view class="shadowBox1Item" @click="shareFriend">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/shop_WX.png"
|
<image src="https://static.hshuishang.com/property-img-file/shop_WX.png" mode="aspectFill"></image>
|
||||||
mode="aspectFill"></image>
|
|
||||||
微信好友
|
微信好友
|
||||||
</view>
|
</view>
|
||||||
<view class="shadowBox1Item" @click="openSave">
|
<view class="shadowBox1Item" @click="openSave">
|
||||||
<image src="https://static.hshuishang.com/property-img-file/shop_saveImg.png"
|
<image src="https://static.hshuishang.com/property-img-file/shop_saveImg.png" mode="aspectFill">
|
||||||
mode="aspectFill"></image>
|
</image>
|
||||||
生成海报
|
生成海报
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -227,8 +240,7 @@
|
|||||||
<image v-if="currentGG && currentGG.commodity_pic && currentGG.commodity_pic.length > 0"
|
<image v-if="currentGG && currentGG.commodity_pic && currentGG.commodity_pic.length > 0"
|
||||||
:src="picUrl + currentGG.commodity_pic[0]">
|
:src="picUrl + currentGG.commodity_pic[0]">
|
||||||
</image>
|
</image>
|
||||||
<image v-else
|
<image v-else src="https://static.hshuishang.com/property-img-file/shop_share_img.png">
|
||||||
src="https://static.hshuishang.com/property-img-file/shop_share_img.png">
|
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
@ -288,6 +300,34 @@
|
|||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</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">
|
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize" @open="open">
|
||||||
<!-- <view round="20rpx" mode="bottom"> -->
|
<!-- <view round="20rpx" mode="bottom"> -->
|
||||||
@ -361,22 +401,19 @@
|
|||||||
<view class="payment-section">
|
<view class="payment-section">
|
||||||
<view class="payment-item" @click="selectPayment('wechat')">
|
<view class="payment-item" @click="selectPayment('wechat')">
|
||||||
<view class="payment-icon">
|
<view class="payment-icon">
|
||||||
<image
|
<image src="https://static.hshuishang.com/property-img-file/com_wechat.png" mode="aspectFit">
|
||||||
src="https://static.hshuishang.com/property-img-file/com_wechat.png"
|
</image>
|
||||||
mode="aspectFit"></image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="payment-content">
|
<view class="payment-content">
|
||||||
<view class="payment-name">微信支付</view>
|
<view class="payment-name">微信支付</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||||
<image
|
<image src="https://static.hshuishang.com/property-img-file/com_check2.png" mode="aspectFit"
|
||||||
src="https://static.hshuishang.com/property-img-file/com_check2.png"
|
style="width: 30rpx; height: 30rpx;"></image>
|
||||||
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="payment-select" v-else>
|
<view class="payment-select" v-else>
|
||||||
<image
|
<image src="https://static.hshuishang.com/property-img-file/com_check1.png" mode="aspectFit"
|
||||||
src="https://static.hshuishang.com/property-img-file/com_check1.png"
|
style="width: 30rpx; height: 30rpx;"></image>
|
||||||
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -389,6 +426,7 @@
|
|||||||
import {
|
import {
|
||||||
apiArr
|
apiArr
|
||||||
} from "../../../api/shop";
|
} from "../../../api/shop";
|
||||||
|
import { apiArr as apiArr2 } from "../../../api/user";
|
||||||
import {
|
import {
|
||||||
picUrl,
|
picUrl,
|
||||||
menuButtonInfo,
|
menuButtonInfo,
|
||||||
@ -432,6 +470,10 @@ export default {
|
|||||||
goodsUnit: "",
|
goodsUnit: "",
|
||||||
selectedGoods: null, // 保存传入的商品规格信息
|
selectedGoods: null, // 保存传入的商品规格信息
|
||||||
qrcodePath: null, // 存储当前页面的二维码路径
|
qrcodePath: null, // 存储当前页面的二维码路径
|
||||||
|
// 红包相关
|
||||||
|
coupons: [],
|
||||||
|
couponDetails: [],
|
||||||
|
showCouponPopup: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -901,6 +943,30 @@ export default {
|
|||||||
review_image: item.review_image ? item.review_image.split(',') : []
|
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) {
|
}, onLoad(options) {
|
||||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||||
@ -908,7 +974,6 @@ export default {
|
|||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
|
|
||||||
|
|
||||||
this.id = itemObj.commodity_id ? itemObj.commodity_id : itemObj.id;
|
this.id = itemObj.commodity_id ? itemObj.commodity_id : itemObj.id;
|
||||||
this.selectedGoods = itemObj; // 保存传入的完整商品信息
|
this.selectedGoods = itemObj; // 保存传入的完整商品信息
|
||||||
},
|
},
|
||||||
@ -918,6 +983,7 @@ export default {
|
|||||||
this.getGoodsInfo();
|
this.getGoodsInfo();
|
||||||
// this.getShopCar();
|
// this.getShopCar();
|
||||||
this.getComment();
|
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",
|
"navigationBarBackgroundColor": "#fff",
|
||||||
"navigationStyle": "custom"
|
"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>{{ userInfo.property_housing_fund }}元</view>
|
||||||
<view>物业费</view>
|
<view>物业费</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="section_label" @click="goWallet(3)">
|
<view class="section_label" @click="goRedPacket()">
|
||||||
<view>0元</view>
|
<view>0元</view>
|
||||||
<view>红包卡券</view>
|
<view>红包中心</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -274,6 +274,9 @@ export default {
|
|||||||
goWallet(type, item) {
|
goWallet(type, item) {
|
||||||
NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
|
NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
|
||||||
},
|
},
|
||||||
|
goRedPacket() {
|
||||||
|
NavgateTo('/packages/user/redPacket/index');
|
||||||
|
},
|
||||||
// 头像点击
|
// 头像点击
|
||||||
toLogin() {
|
toLogin() {
|
||||||
NavgateTo('/packages/user/replenishInfo/index');
|
NavgateTo('/packages/user/replenishInfo/index');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user