forked from angelo/web-retail-h5
feat(bonus): 奖金明细接口联调
This commit is contained in:
woody
parent
81f27a0d7c
commit
acf1e05b4e
|
|
@ -47,7 +47,7 @@
|
|||
></u-icon>
|
||||
<text class="header-title">奖金明细</text>
|
||||
</view>
|
||||
<text class="header-date">{{ dailyBonus.date }}</text>
|
||||
<text class="header-date">{{ dailyBonus.settleDate }}</text>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<view
|
||||
|
|
@ -61,7 +61,9 @@
|
|||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="subtotal-label">小计(¥)</text>
|
||||
<text class="subtotal-value">{{ dailyBonus.subtotal }}</text>
|
||||
<text class="subtotal-value">{{
|
||||
dailyBonus.retailRealSubtotal
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -131,7 +133,9 @@ export default {
|
|||
setDefaultDateRange() {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(end.getDate() - 15) // 默认查询最近7天
|
||||
end.setDate(end.getDate() - 1)
|
||||
start.setDate(end.getDate() - 15) // 默认查询最近15天
|
||||
|
||||
this.startDate = this.formatDate(start)
|
||||
this.endDate = this.formatDate(end)
|
||||
this.startDateValue = Number(start)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<view class="share-container">
|
||||
<!-- This is the content that will be shared as an image -->
|
||||
<view class="share-content" :class="{ 'is-loaded': isLoaded }">
|
||||
<view class="title">扫码注册</view>
|
||||
<image
|
||||
class="qr-code"
|
||||
:src="qrCodeImage"
|
||||
|
|
@ -12,7 +11,6 @@
|
|||
<view v-else class="qr-code-placeholder">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
<view class="tip">扫描二维码，即可完成操作</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
|
|
@ -278,98 +276,36 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.share-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
background: linear-gradient(to bottom, #e0f7fa 0%, #ffffff 100%);
|
||||
min-height: 100vh;
|
||||
background: url('@/static/images/share-bg.jpg') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: calc(100vh - 80rpx);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.7;
|
||||
.share-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.03);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.share-container::before,
|
||||
.share-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 198, 255, 0.05),
|
||||
rgba(0, 114, 255, 0.1)
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.share-container::before {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
top: -150rpx;
|
||||
left: -150rpx;
|
||||
animation: float 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.share-container::after {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
bottom: -200rpx;
|
||||
right: -200rpx;
|
||||
animation: float 15s ease-in-out infinite -5s;
|
||||
}
|
||||
|
||||
.share-content {
|
||||
background: radial-gradient(
|
||||
circle at 50% 0%,
|
||||
rgba(220, 235, 255, 0.9),
|
||||
#ffffff 80%
|
||||
);
|
||||
border-radius: 30rpx;
|
||||
padding: 80rpx 50rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
0 16rpx 48rpx rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 60rpx;
|
||||
// 垃圾小米适配
|
||||
margin-top: 480rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
opacity 0.6s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.share-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background-image: linear-gradient(90deg, #00c6ff, #0072ff);
|
||||
opacity: 0.9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.share-content.is-loaded {
|
||||
|
|
@ -423,25 +359,83 @@ export default {
|
|||
}
|
||||
|
||||
.share-button {
|
||||
margin-top: 0;
|
||||
width: 90%;
|
||||
background-image: linear-gradient(90deg, #0072ff, #00c6ff);
|
||||
color: white;
|
||||
// 垃圾小米适配
|
||||
margin-top: 20rpx;
|
||||
width: 450rpx;
|
||||
background:
|
||||
linear-gradient(100deg, #0ff0fc 0%, #0072ff 50%, #00c6ff 100%),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.35) 0%,
|
||||
rgba(0, 0, 0, 0.05) 100%
|
||||
);
|
||||
background-blend-mode: lighten, normal;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
font-size: 34rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 114, 255, 0.25);
|
||||
border: none;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
box-shadow:
|
||||
0 8rpx 32rpx 0 rgba(0, 255, 255, 0.35),
|
||||
0 2rpx 8rpx 0 #00eaff99,
|
||||
0 1.5rpx 0.5rpx 0 #00eaff inset,
|
||||
0 0 0 4rpx #fff3 inset;
|
||||
border: 2.5rpx solid #00eaff;
|
||||
outline: 2rpx solid #fff8;
|
||||
outline-offset: -4rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s,
|
||||
opacity 0.6s ease 0.1s;
|
||||
/* 立体感 */
|
||||
text-shadow:
|
||||
0 2rpx 8rpx #00eaff,
|
||||
0 1rpx 0 #fff;
|
||||
}
|
||||
|
||||
.share-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -75%;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(0, 255, 255, 0.5) 50%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
filter: blur(2px);
|
||||
transform: skewX(-20deg);
|
||||
animation: flowing-light 2.2s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes flowing-light {
|
||||
0% {
|
||||
left: -75%;
|
||||
}
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
.share-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50rpx;
|
||||
box-shadow:
|
||||
0 0 24rpx 4rpx #00eaff66,
|
||||
0 0 60rpx 0 #00c6ff33,
|
||||
0 0 0 4rpx #fff6 inset;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.share-button.is-loaded {
|
||||
|
|
@ -451,6 +445,6 @@ export default {
|
|||
|
||||
.share-button:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 114, 255, 0.3);
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
Loading…
Reference in New Issue