压缩图片资源
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | likeshop开源商城系统
|
||||
// +----------------------------------------------------------------------
|
||||
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
|
||||
// | gitee下载：https://gitee.com/likeshop_gitee
|
||||
// | github下载：https://github.com/likeshop-github
|
||||
// | 访问官网：https://www.likeshop.cn
|
||||
// | 访问社区：https://home.likeshop.cn
|
||||
// | 访问手册：http://doc.likeshop.cn
|
||||
// | 微信公众号：likeshop技术社区
|
||||
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
|
||||
// | likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
|
||||
// | 禁止对系统程序代码以任何目的，任何形式的再发布
|
||||
// | likeshop团队版权所有并拥有最终解释权
|
||||
// +----------------------------------------------------------------------
|
||||
// | author: likeshop.cn.team
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
<template>
|
||||
<view class="every-day-coupon bg-white mb20" v-if="list.length">
|
||||
<view class="coupon-header row-between" @tap="goPage">
|
||||
<view class="normal lg title">每日领券</view>
|
||||
<view class="row">
|
||||
<view class="muted sm mr5">进入领券中心</view>
|
||||
<image src="/static/images/arrow_right.png" class="icon-sm"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-scroll">
|
||||
<scroll-view style="heigth: 138rpx" scroll-x="true" scroll-with-animation="true" @scroll="scrollBarChange">
|
||||
<view class="coupon-contain row">
|
||||
<view v-for="(item, index) in list" :key="index" :class="'coupon-item mr20 row-between ' + (item.is_get ? 'recieve' : '')"
|
||||
@tap="onRecive(item.id)">
|
||||
<view class="coupon-left">
|
||||
<view class="row info">
|
||||
<price-format :subscript-size="30" :first-size="56" :second-size="50" :price="item.money"></price-format>
|
||||
<view class="sm ml10" style="align-self: flex-end;line-height: 50rpx;margin-bottom: 3rpx">
|
||||
优惠券
|
||||
</view>
|
||||
</view>
|
||||
<view class="desc xs">{{item.use_condition}}</view>
|
||||
</view>
|
||||
<view class="coupon-right xxs primary column-center">立即领取</view>
|
||||
<image v-if="item.is_get" class="coupon-img" src="/static/images/home_img_ receive.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="row-center mt20" v-if="list.length > 2">
|
||||
<cu-progress progressBarColor="#FF2C3C" :left="progressPer"></cu-progress>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
toLogin
|
||||
} from '@/utils/login';
|
||||
import {
|
||||
getCoupon
|
||||
} from '@/api/user';
|
||||
import {
|
||||
getRect
|
||||
} from '@/utils/tools'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progressPer: 0
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler() {
|
||||
this.$nextTick(function(){
|
||||
getRect(".coupon-scroll", false, this).then(res => {
|
||||
this.rectWidth = res.width;
|
||||
});
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrollBarChange(e) {
|
||||
let {
|
||||
progressPer
|
||||
} = this;
|
||||
let {
|
||||
scrollLeft,
|
||||
scrollWidth
|
||||
} = e.detail;
|
||||
progressPer = scrollLeft / (scrollWidth - this.rectWidth) * 100;
|
||||
this.progressPer = Number(progressPer.toFixed(0));
|
||||
},
|
||||
|
||||
onRecive(id) {
|
||||
if (!this.isLogin) {
|
||||
toLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
getCoupon(id).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.$toast({
|
||||
title: res.msg
|
||||
})
|
||||
this.$emit('reflash');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goPage() {
|
||||
if (!this.isLogin) {
|
||||
toLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/user_getcoupon/user_getcoupon'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.every-day-coupon {
|
||||
background-image: url(../../static/images/home_bg_coupon.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 264rpx;
|
||||
width: 710rpx;
|
||||
margin: 0 20rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 14rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.coupon-header {
|
||||
height: 90rpx;
|
||||
|
||||
.title {
|
||||
margin-left: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-contain {
|
||||
.coupon-item {
|
||||
height: 134rpx;
|
||||
width: 326rpx;
|
||||
flex: none;
|
||||
position: relative;
|
||||
background: url(../../static/images/home_bg_coupon_red.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.recieve {
|
||||
background-image: url(../../static/images/home_bg_coupon_gray.png);
|
||||
|
||||
.coupon-right {
|
||||
background-color: #E5E5E5;
|
||||
color: $color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
width: 269rpx;
|
||||
padding-left: 20rpx;
|
||||
color: white;
|
||||
|
||||
.info {
|
||||
height: 70rpx;
|
||||
border-bottom: 3rpx dashed #fff;
|
||||
|
||||
.money-logo {
|
||||
font-weight: bold;
|
||||
align-self: flex-end;
|
||||
line-height: 50rpx;
|
||||
margin-right: 6rpx;
|
||||
margin-bottom: 4rpx
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
width: 57rpx;
|
||||
height: 100%;
|
||||
background-color: #FFE5E6;
|
||||
border-radius: 0rpx 14rpx 14rpx 0rpx;
|
||||
writing-mode: tb;
|
||||
|
||||
}
|
||||
|
||||
.coupon-img {
|
||||
height: 77rpx;
|
||||
width: 99rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 73rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user