123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440 |
- <template>
- <view>
- <!-- tab切换 -->
- <view class="recently flex-between">
- <!-- <van-tab @click="onTab" /> -->
- <liuyuno-tabs :tabData="tabs" @tabClick='onTab' />
- </view>
- <view class="" style="height: 80rpx;"></view>
- <no-none v-if='CouponList.length<=0'></no-none>
- <block v-else>
- <block v-for=" (item,index) in CouponList" :key="index">
- <view class="CouponList" @click="CouponUse" :data-id="item.id">
- <image src="../../static/images/discount-Couponimg.png" mode="" class="CouponListimg"></image>
- <view class="CouponL">
- <view class="CouponLmoney">¥{{ Number(item.cut_price) }}</view>
- <view class="CouponLmoneys">满{{ Number(item.full_price)}}可用</view>
- </view>
- <view class="CouponContent">
- <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" @click="open(item.code,item.qrcode)">
- <view class="CouponRtext">立即使用</view>
- </view>
- </view>
- </block>
- <view class="" style="height: 10rpx;"></view>
- <block v-if="isCoupon">
- <view class="no-more">
- ---没有更多了---
- </view>
- </block>
- </block>
- <uni-popup ref="popup" type="center">
- <view class="pop">
- <view style="text-align: center;padding: 40rpx 0 30rpx 0;">
- <view class="flex-center">
- <view class="pop-title">
- <view class="pop-color left">
- </view>
- <view class="">
- 核销码
- </view>
- <view class="pop-color right">
- </view>
- </view>
- </view>
- <view>
- {{code}}
- </view>
- </view>
- <view class="pop-code">
- <image class="pop-code-img" :src="qrcode" mode=""></image>
- </view>
- <!--<view class="box-pack-between pop-shop flex-y-center">
- <text @click="merchant"data-index="1">商户位置</text>
- <view class="line"></view>
- <text @click="merchant" data-index="2">前往商户</text>
- <view class="line"></view>
- <text @click="close">关闭窗口</text>
- </view> -->
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
- export default {
- components: {
- liuyunoTabs
- },
- data() {
- return {
- tabs: ["未使用", "已使用", "已过期"],
- page: 1,
- limit: 10,
- type: 1,
- token: '', //获取用户的token
- power_id: '',
- CouponList: [], //优惠券列表
- isCoupon: false,
- code: "",
- qrcode: '',
- }
- },
- onLoad(e) {
- this.token = e.token, this.power_id = e.power_id; //读取缓存手机号码
- this.Coupon();
- },
- onReachBottom() {
- this.Coupon();
- },
- methods: { // 使用优惠券
- onTab(e) {
- console.log(e, "e")
- this.activeindexs = e + 1;
- this.type = this.activeindexs;
- this.CouponList = [];
- this.page = 1;
- this.Coupon();
- },
- open(code, qrcode) {
- this.code = code;
- this.qrcode = getApp().globalData.URL + qrcode;
- this.$refs.popup.open();
- },
- CouponUse(e) {
- console.log(e.currentTarget.dataset.id)
- let id = e.currentTarget.dataset.id;
- uni.navigateTo({
- url: './CouponDetails?id=' + id
- })
- },
- // 请求优惠券
- Coupon() {
- this.request({
- url: "game/memberPrizeList",
- data: {
- token: this.token,
- power_id: this.power_id,
- page: this.page,
- limit: 10,
- status: Number(this.type) - 1,
- },
- is_agent:'member',
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- // this.CouponList = res.data;
- if (res.code == "200" && res.data.length > 0) {
- this.CouponList = this.CouponList.concat(res.data);
- this.page = this.page + 1;
- this.isCoupon = false;
- } else {
- this.isCoupon = true;
- }
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- }
- }
- </script>
- <style lang="scss">
- /* 优惠券列表 */
- page {
- background: #fff;
- }
- .recently {
- position: fixed;
- top: 0;
- width: 100%;
- background: #FFFFFF;
- z-index: 99;
- }
- .flex-between {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
- }
- .flex-y-center {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- -ms-grid-row-align: center;
- align-items: center;
- }
- .CouponList {
- position: relative;
- width: 750rpx;
- height: 170rpx;
- margin-bottom: 20rpx;
- }
- .CouponListimg {
- margin: 30rpx 32rpx;
- width: 686rpx;
- height: 165rpx;
- /* border: 1px solid #f1f1f1; */
- /* font-family: -webkit-body; */
- /* border-radius: 10px; */
- }
- .CouponL {
- position: absolute;
- left: 60rpx;
- top: 60rpx;
- text-align: center;
- width: 150rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .CouponLmoney {
- font-size: 47rpx;
- font-family: PingFangSC-Medium;
- color: #FF5722;
- width: 150rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .CouponLmoneys {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #FF5722;
- width: 150rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- /* 已过期状态 */
- .pastDue {
- position: absolute;
- left: 90rpx;
- top: 70rpx;
- text-align: center;
- }
- .pastDueMoney {
- font-size: 47rpx;
- font-family: PingFangSC-Medium;
- color: #c9c9c9;
- }
- .pastDueMoneys {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #c9c9c9;
- }
- /* 已过期状态 end*/
- .CouponContent {
- position: absolute;
- left: 220rpx;
- top: 65rpx;
- width: 400rpx;
- }
- .CouponContenttitle {
- font-size: 31rpx;
- font-family: PingFangSC-Medium;
- color: #514f50;
- font-weight: 700;
- }
- .CouponContentB {
- font-size: 24rpx;
- font-family: PingFangSC-Regular;
- color: #99a0ad;
- padding: 9rpx 0;
- }
- .CouponContentC {
- font-size: 24rpx;
- font-family: PingFangSC-Regular;
- color: #99a0ad;
- padding-top: 20rpx;
- }
- .CouponR {
- -webkit-writing-mode: vertical-rl;
- writing-mode: vertical-rl;
- position: absolute;
- right: 62rpx;
- top: 52rpx;
- }
- .CouponRtext {
- font-size: 28rpx;
- font-family: PingFangSC-Medium;
- color: #fff;
- }
- /* 已使用或者已过期 */
- .haveExpired {
- -webkit-writing-mode: vertical-rl;
- writing-mode: vertical-rl;
- position: absolute;
- right: 62rpx;
- top: 75rpx;
- letter-spacing: 4rpx
- }
- .haveExpiredtext {
- font-size: 28rpx;
- font-family: PingFangSC-Medium;
- color: #fff;
- }
- /* 底部按钮 */
- .bottomButton {
- position: fixed;
- left: 0;
- bottom: 40rpx;
- width: 750rpx;
- }
- .bottomButtonL {
- margin-left: 40rpx;
- background: #F0F2F5;
- width: 320rpx;
- height: 98rpx;
- line-height: 98rpx;
- text-align: center;
- border: 2rpx solid #fff;
- border-radius: 8rpx;
- font-size: 32rpx;
- font-family: PingFangSC-Medium;
- color: #141F33;
- opacity: 1;
- }
- .bottomButtonR {
- margin-right: 40rpx;
- width: 320rpx;
- height: 98rpx;
- line-height: 98rpx;
- text-align: center;
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- font-size: 32rpx;
- font-family: PingFangSC-Medium;
- color: #FFFFFF;
- opacity: 1;
- }
- .bottomButtonB {
- width: 670rpx;
- height: 98rpx;
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- color: #FFFFFF;
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- margin: 0 auto;
- margin-top: 20rpx;
- }
- .pop {
- width: 600rpx;
- height: 600rpx;
- background: #ffffff;
- border-radius: 16rpx;
- .flex-center {
- font-size: 36rpx;
- .pop-title {
- font-size: 36rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- font-weight: 500;
- text-align: center;
- color: #ff2d5a;
- position: relative;
- display: inline-block;
- .pop-color {
- width: 41rpx;
- height: 41rpx;
- opacity: 0.3;
- background: linear-gradient(150deg, #ff2d5a 13%, rgba(251, 45, 89, 0.00) 87%);
- border-radius: 50%;
- }
- .left {
- position: absolute;
- left: -28rpx;
- top: 36rpx;
- }
- .right {
- position: absolute;
- right: -28rpx;
- bottom: 36rpx;
- }
- }
- }
- .pop-code {
- margin: 0 auto;
- text-align: center;
- .pop-code-img {
- width: 337rpx;
- height: 337rpx;
- background: rgba(0, 0, 0, 0.00);
- }
- }
- .pop-shop {
- font-size: 30rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- font-weight: 500;
- text-align: center;
- color: #ff2d5a;
- padding: 0 48rpx;
- margin-top: 48rpx;
- .line {
- width: 2rpx;
- height: 24rpx;
- opacity: 0.4;
- background: #ff2d5a;
- border-radius: 1rpx;
- }
- }
- }
- </style>
|