123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <template>
- <view class="container">
- <!-- <view class="tab-h flex box-pack-between flex-y-center">
- <view :class="['item',active == 1?'active':'']" @click="onChangeTab(1)">
- <view class="title">全部</view>
- </view>
- <view :class="['item',active == 2?'active':'']" @click="onChangeTab(2)">
- <view class="title">新人券</view>
- </view>
- <view :class="['item', active == 3?'active':'']" @click="onChangeTab(3)">
- <view class="title">所有品类</view>
- </view>
- <view :class="['item', active == 4?'active':'']" @click="onChangeTab(4)">
- <view class="title">已过期</view>
- </view>
- </view> -->
-
- <view class="tab-b">
- <view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
- <image src="../static/images/coupon_bg_1.png" class="coupon-bg" mode="aspectFit"></image>
- <view class="content flex flex-nowarp flex-y-center">
- <view class="left-bar flex flex-nowarp flex-col flex-x-center flex-y-center">
- <view class="money-block flex flex-nowarp flex-x-center flex-y-baseline">
- <view class="money text-1" :style="{'font-size':computeFontSize(Number(item.reduce))}">{{Number(item.reduce)}}</view>
- <view class="unit">元</view>
- </view>
- <view class="desc text-1">满{{Number(item.full)}}元可用</view>
- </view>
- <view class="right-bar">
- <view class="title-block flex flex-y-center">
- <view class="tips">{{item.type == 1?'满减券':'指定商品'}}</view>
- <view class="title text-1">{{item.name}}</view>
- </view>
- <view class="time">有效期:{{item.start_time}} - {{item.end_time}}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="footer-bar">
- <view class="content flex flex-center">
- <view class="btn" @click="toAdd">立即添加</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- store_id:"",
- active: 1,
- list: [],
- page: 1,
- is_bottom: false
- }
- },
- onLoad(options) {
- this.store_id = uni.getStorageSync("store_id")
- this.getData(1)
- },
- onReachBottom() {
- if(!this.is_bottom){
- this.getData(this.page+1)
- }
- },
- methods: {
- computeFontSize(txt){
- txt = txt+''
- if(txt.length>5){
- return '42rpx'
- }else{
- return ''
- }
- },
- onChangeTab(index) {
- if (index != this.active) {
- this.active = index
- }
- },
- getData(page) {
- if (page == 1) {
- this.list = []
- this.page = 1
- this.is_bottom = false
- }
- this.request({
- url: 'Smdcshop/coupon_index',
- data: {
- page,
- limit: 10,
- store_id: this.store_id
- }
- }).then(res => {
- if (res.code == 200 && res.data.length) {
- this.list = this.list.concat(res.data)
- this.page = page
- } else {
- this.is_bottom = true
- }
- })
- },
- toDetail(id){
-
- uni.navigateTo({
- url:`/saomaDiancan/couponDetail/couponDetail?id=${id}`
- })
- },
- toAdd(){
- uni.navigateTo({
- url:`/saomaDiancan/editCoupon/editCoupon?store_id=${this.store_id}`
- })
- }
- }
- }
- </script>
- <style>
- @import url("../static/css/common.css");
- page {
- background-color: #F4F5F7;
- }
- .content{
- position: relative;
- }
- .tab-h {
- background-color: #fff;
- position: sticky;
- top: 0;
- z-index: 100
- }
- .tab-h .item {
- padding: 0 30rpx;
- height: 88rpx;
- position: relative;
- }
- .tab-h .item .title {
- font-size: 28rpx;
- line-height: 88rpx;
- font-weight: 500;
- }
- .tab-h .item.active::after {
- content: "";
- display: block;
- height: 4rpx;
- width: 40rpx;
- border-radius: 2rpx;
- background-color: #247EFF;
- position: absolute;
- bottom: 5rpx;
- left: 50%;
- transform: translateX(-50%)
- }
- .tab-h .item.active .title {
- font-size: 32rpx;
- font-weight: 600;
- color: #247EFF;
- }
- .tab-b {
- padding: 30rpx 25rpx 0;
- }
- .tab-b .item {
- margin-bottom: 30rpx;
- width: 700rpx;
- height: 180rpx;
- position: relative;
- }
- .tab-b .item .coupon-bg {
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- z-index: 0;
- }
- .tab-b .item .content {
- position: relative;
- z-index: 10;
- }
- .tab-b .item .content .left-bar {
- flex: none;
- width: 200rpx;
- height: 180rpx;
- text-align: center;
- }
- .tab-b .item .content .left-bar .money {
- font-size: 58rpx;
- line-height: 70rpx;
- color: #fff;
- font-weight: bold;
- }
- .tab-b .item .content .left-bar .unit {
- font-size: 24rpx;
- color: #fff;
- font-weight: 500;
- margin-left: 6rpx;
- }
- .tab-b .item .content .left-bar .desc {
- font-size: 24rpx;
- line-height: 33rpx;
- margin-top: 16rpx;
- color: #fff;
- }
- .tab-b .item .content .right-bar {
- width: 500rpx;
- flex: none;
- box-sizing: border-box;
- height: 180rpx;
- padding: 0 25rpx;
- }
- .tab-b .item .content .right-bar .title-block {
- height: 106rpx;
- border-bottom: 1rpx dashed #E5E5E5;
- }
- .tab-b .item .content .right-bar .title-block .tips{
- flex:none;
- height: 40rpx;
- background: linear-gradient(316deg,#ffae2c 1%, #ffbc00 99%);
- border-radius: 4rpx;
- font-size: 20rpx;
- color: #fff;
- padding:0 10rpx;
- line-height: 40rpx;
- margin-right: 16rpx;
- }
- .tab-b .item .content .right-bar .title-block .title{
- font-size: 28rpx;
- color: #333;
- font-weight: bold;
- }
- .tab-b .item .content .right-bar .time{
- font-size: 24rpx;
- color: #999;
- height: 73rpx;
- line-height: 73rpx;
- }
- </style>
|