123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- <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>
|