123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <template>
- <view>
- <no-none v-if='CouponList.length<=0'></no-none>
- <block v-else>
- <view class="CouponList flex" @click="CouponUse" :data-num="item.num" :data-title="item.title" v-for=" (item,index) in CouponList" :key="index" :data-id="item.id">
- <view class="CouponL flex-grow-1">
- <view class="CouponContenttitle text-1">{{item.title}}</view>
- <view class="CouponContentC">
- <text>有效期:</text>
- <text>{{item.start_time}}-{{item.end_time}}</text>
- </view>
- </view>
- <view class="CouponR flex-grow-0">
- <view class="coupon-center">
- <view class="rund top">
- </view>
- <view class="line">
- </view>
- <view class="rund bottom">
- </view>
- </view>
- <view class="CouponLmoney"> <text class="unit">¥</text>{{ Number(item.cut_price) }}</view>
- <view class="CouponLmoneys">满{{ Number(item.full_price)}}可用</view>
- <view class="CouponRtext">立即查看</view>
- </view>
- </view>
- <loading :is_load="is_load" :is_load_more='is_load_more'></loading>
- </block>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- token: '', //获取用户的token
- page: 1,
- limit: 10,
- CouponList: [], //优惠券列表
- page: 1,
- is_load: false,
- is_load_more: false,
- }
- },
- onLoad() {
- this.token = uni.getStorageSync('token'); //读取缓存手机号码
- },
- onShow() {
- this.page = 1;
- this.CouponList = [];
- this.Coupon();
- },
- onPullDownRefresh() {
- console.log("下拉")
- this.page = 1;
- this.CouponList = [];
- this.Coupon();
- setTimeout(() => {
- uni.stopPullDownRefresh();
- }, 1000)
- },
- onReachBottom() {
- if (!this.is_load) {
- this.page = this.page + 1;
- this.Coupon();
- }
- },
- methods: {
-
- CouponUse(e) {
- console.log(e.currentTarget.dataset.id)
- let {id,title,num} = e.currentTarget.dataset;
-
- // let title = e.currentTarget.dataset.title;
-
- // let title = e.currentTarget.dataset.num;
-
- uni.$emit("handleFun",{title:title,coupon_id:id,num:num});
- uni.navigateBack();
- },
-
- loginOut() {
- uni.removeStorageSync("token")
- uni.removeStorage({
- key: 'login',
- success: (res) => {
- uni.reLaunch({
- url: "../login/login"
- })
- }
- })
- },
- Coupon() {
- this.request({
- url: "coupon/lists",
- data: {
- token: uni.getStorageSync('token'),
- page: this.page,
- limit: 15,
- status:1
- },
- }).then(res => {
- console.log(res, "res")
- if (res.data.list.length == 0) {
- this.is_load = true,
- this.is_load_more = true,
- setTimeout(() => {
- this.is_load_more = false
- }, 1e3);
- return
- }
- this.is_load = false;
- this.CouponList = this.CouponList.concat(res.data.list);
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- }
- }
- </script>
- <style lang="scss">
- page {
- background: #fff;
- }
- .no-more {
- font-size: 28rpx;
- color: #999999;
- text-align: center;
- padding: 20rpx 0;
- }
- .CouponList {
- margin: 0 40rpx;
- margin-top: 20rpx;
- border-radius: 8rpx;
- height: 180rpx;
- overflow: hidden;
- .CouponL {
- text-align: left;
- padding: 10rpx 20rpx;
- border: 1rpx solid #F1F1F1;
- .CouponContenttitle {
- font-size: 34rpx;
- padding-top: 15rpx;
- }
- .CouponContentC {
- color: #999;
- font-size: 24rpx;
- padding-top: 15rpx;
- }
- }
- .CouponR {
- background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 172, 238, 1) 100%);
- color: #FFFFFF;
- width: 200rpx;
- text-align: center;
- position: relative;
- .coupon-center {
- position: absolute;
- left: -16rpx;
- top: 0;
- width: 30rpx;
- .rund {
- width: 24rpx;
- height: 24rpx;
- background: #FFFFFF;
- border-radius: 50%;
- position: absolute;
- }
- .top {
- top: -15rpx;
- }
- .bottom {
- bottom: -15rpx;
- }
- .line {
- width: 1rpx;
- height: 180rpx;
- }
- }
- .CouponLmoney {
- font-size: 47rpx;
- padding-top: 15rpx;
- .unit {
- font-size: 28rpx;
- }
- }
- .CouponRtext {
- font-size: 22rpx;
- border: 1rpx solid #FFFFFF;
- text-align: center;
- border-radius: 50px;
- display: inline-block;
- padding: 4rpx 18rpx;
- }
- .CouponLmoneys {
- font-size: 20rpx;
- margin-bottom: 10rpx;
- }
- }
- }
- </style>
|