|
@@ -0,0 +1,187 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="header-img">
|
|
|
+ <u-image src="/static/hbheader.jpg" width="750" height="578"></u-image>
|
|
|
+ <!-- 滚动区域 -->
|
|
|
+ <view class="scroll-list" v-if="slist.length">
|
|
|
+ <scrollBox :list="slist" placeText="刚刚得到了1.5元 红包奖励" bgColor="rgba(250, 224, 188, 0.6)"></scrollBox>
|
|
|
+ </view>
|
|
|
+ <view class="amount-box">
|
|
|
+ 345.5
|
|
|
+ <text>元</text>
|
|
|
+ </view>
|
|
|
+ <view class="view-gz">查看活动规则>></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="codes flex align_center">
|
|
|
+ <view @click="openImg('/static/codetemp.jpg')">
|
|
|
+ <u-image src="/static/codetemp.jpg" width="160" height="160"></u-image>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>扫描添加客服微信,领取待发放红包</view>
|
|
|
+ <view>点击二维码查看大图,长按识别二维码</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabbox">
|
|
|
+ <view class="tabhead flex align_center justify_between">
|
|
|
+ <view class="active">所有红包</view>
|
|
|
+ <view>已发红包</view>
|
|
|
+ <view>待发红包</view>
|
|
|
+ </view>
|
|
|
+ <view class="tablist">
|
|
|
+ <view class="flex align_center justify_between" v-for="item in 12">
|
|
|
+ <view class="flex align_center">
|
|
|
+ <view class="imgs">
|
|
|
+ <u-icon size="30" color="#fff" name="red-packet"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="txts">
|
|
|
+ <view class="txts-name">扫描VIN码下单得红包</view>
|
|
|
+ <view class="txts-time">2022-10-28 12:36</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="amount">+0.50</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import scrollBox from '@/components/scrollBox.vue'
|
|
|
+ import { scanVinLogQueryRoll }from '@/api/car.js'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ scrollBox,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ slist:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.getScrollLog()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openImg(url){
|
|
|
+ uni.previewImage({
|
|
|
+ urls:[url]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取上方滚动扫描记录
|
|
|
+ getScrollLog(){
|
|
|
+ scanVinLogQueryRoll({pageNo:1,pageSize:1000}).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.slist = res.data.list || []
|
|
|
+ this.slist.map(item => {
|
|
|
+ item.placeText = item.userName + '刚刚得到了1.5元 红包奖励'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .content{
|
|
|
+ padding: 0;
|
|
|
+ background-color: #fae0bc;
|
|
|
+ .header-img{
|
|
|
+ position: relative;
|
|
|
+ color: #fff;
|
|
|
+ .amount-box{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 80rpx;
|
|
|
+ text{
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ top: 50%;
|
|
|
+ color: #f5563d;
|
|
|
+ }
|
|
|
+ .view-gz{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 45rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ .scroll-list{
|
|
|
+ width:100%;
|
|
|
+ position: absolute;
|
|
|
+ left:10rpx;
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-box{
|
|
|
+ padding: 30rpx;
|
|
|
+ .codes{
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ padding: 10rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ padding: 0 20rpx;
|
|
|
+ > view{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabbox{
|
|
|
+ background-color: #fff5e7;
|
|
|
+ box-shadow: 0 0 10rpx #e75115;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ .tabhead{
|
|
|
+ border-bottom: 1rpx solid #f0b675;
|
|
|
+ > view{
|
|
|
+ width: 30%;
|
|
|
+ color: #5a4f49;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #e7463c;
|
|
|
+ border-bottom: 4rpx solid #e7463c;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tablist{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ > view{
|
|
|
+ border-bottom: 1rpx solid #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ .txts-name{
|
|
|
+ color: #e7463c;
|
|
|
+ }
|
|
|
+ .txts-time{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ color: #e7463c;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txts{
|
|
|
+ padding:0 20rpx;
|
|
|
+ }
|
|
|
+ .imgs{
|
|
|
+ background-color: #fe9790;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|