Skip to content

肖康 / H5_2.0

Go to a project
Commit 58c40dc3 by LJM
Options

css

parent 2dcadab0
Inline Side-by-side
Showing with 278 additions and 0 deletions
assets/css/mine/activityCenter.scss 0 → 100644
.page-activity {
padding-top: 202rpx;
padding-bottom: 100rpx;
.tab {
position: fixed;
top: 88rpx;
width: 100%;
background: #ffffff;
height: 88rpx;
z-index: 99;
.box {
position: relative;
height: 100%;
transition: all 0.4s ease;
&.curr {
font-weight: bold;
&::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 53rpx;
height: 7rpx;
margin: 0 auto;
background: #1969f9;
border-radius: 4rpx;
content: '';
}
}
}
}
.list {
padding: 0 24rpx;
.box {
margin-bottom: 16rpx;
.pic {
width: 100%;
height: 144rpx;
border-radius: 10rpx 10rpx 0 0;
image {
width: 100%;
height: 144rpx;
border-radius: 10rpx 10rpx 0 0;
}
}
.text {
border-radius: 0 0 10rpx 10rpx;
background-color: #fff;
padding: 16rpx 0 16rpx 24rpx;
.p1 {
font-size: 28rpx;
color: #484b59;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 16rpx;
width: 95%;
}
.p2 {
font-size: 22rpx;
color: #919399;
}
}
}
}
.coupon-list {
padding: 0 24rpx;
.box {
position: relative;
height: 176rpx;
background: #ffffff;
border-radius: 0px 10rpx 10rpx 0px;
margin-bottom: 16rpx;
.left {
width: 230rpx;
height: 176rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/19/e8f03900544551d09436a542ee7d0ea0.png') no-repeat center;
background-size: cover;
.p1 {
margin-bottom: 8rpx;
.t1 {
font-size: 22rpx;
color: #ffffff;
}
.t2 {
margin-left: 10rpx;
font-size: 60rpx;
color: #ffffff;
font-family: Impact;
}
}
.p2 {
font-size: 20rpx;
color: #ffffff;
}
}
.right {
padding-left: 24rpx;
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #484b59;
}
.t2 {
font-size: 22rpx;
color: #1969f9;
}
}
.p2 {
margin-bottom: 16rpx;
}
.p3 {
width: 142rpx;
height: 40rpx;
border-radius: 6rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
}
.type {
position: absolute;
right: 0;
top: 0;
width: 82rpx;
height: 68rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/22/0aaf37437c984408376b330da3dbf323.png') no-repeat center;
background-size: cover;
z-index: 99;
.tt {
margin-left: 22rpx;
margin-top: 6rpx;
text-align: center;
transform: rotate(45deg);
color: #fff;
font-size: 22rpx;
}
}
&.disabled {
.left {
background: url('https://img.ichunt.com/images/ichunt/202305/19/ebf691eb49a2a3dffe612baea352a7b6.png') no-repeat center;
background-size: cover;
}
}
}
}
}
.no-data {
image {
width: 356rpx;
height: 356rpx;
}
.tt {
margin-top: 32rpx;
font-size: 28rpx;
color: #292b33;
}
}
pages/mine/activityCenter.vue 0 → 100644
<template>
<view class="page-activity">
<navElement title="活动中心"></navElement>
<view class="tab row verCenter avarage">
<view class="box row verCenter" @click="tab(index)" v-for="(item, index) in text_arr" :key="index" :class="{ curr: index == curr }">{{ item }}</view>
</view>
<!-- 活动中心 -->
<template v-if="curr == 0">
<view class="list" v-if="activity_list.length > 0">
<view class="box" v-for="(item, index) in activity_list" :key="index">
<view class="pic"><image mode="aspectFill" :src="item.image_h5"></image></view>
<view class="text">
<view class="p1">{{ item.web_description }}</view>
<view class="p2">{{ item.create_time }}</view>
</view>
</view>
</view>
<view class="no-data column rowCenter verCenter" v-else>
<image src="../../static/nodate.png"></image>
<text class="tt">暂无活动</text>
</view>
</template>
<!-- 领券中心 -->
<template v-else-if="curr == 1">
<view class="coupon-list" v-if="coupon_list.length > 0">
<view class="box row verCenter" v-for="(item, index) in coupon_list" :key="item.coupon_id">
<view class="left column rowCenter verCenter">
<view class="p1">
<template v-if="item.coupon_type == 1">
<text class="t1">￥</text>
<text class="t2">{{ Number(item.sale_amount).toFixed(2) }}</text>
</template>
<template v-else-if="item.coupon_type == 2">
<text class="t2">{{ (Number(item.sale_amount) * 10).toFixed(2) }}</text>
<text class="t1">折</text>
</template>
</view>
<view class="p2">{{ item.require_desc }}</view>
</view>
<view class="right">
<view class="p1">
<template v-if="item.coupon_goods_range == 1">
<text class="t1">适用于</text>
<text class="t2">{{ item.coupon_mall_type == 1 ? '全站' : item.coupon_mall_type == 2 ? '全部自营' : '全部联营' }}</text>
<text class="t1">商品</text>
</template>
<template v-else>
<text class="t1">适用于</text>
<text class="t2">{{ item.selected_supplier ? '供应商' + item.selected_supplier : '' }}{{ item.selected_brand ? '制造商' + item.selected_brand : '' }}</text>
<text class="t1">所有商品</text>
</template>
</view>
<view class="p2">{{ item.start_time }} - {{ item.end_time }}</view>
<navigator class="p3 row rowCenter verCenter" v-if="item.status == -1" url="/" hover-class="none">立即使用</navigator>
</view>
<view class="type">
<view class="tt">{{ item.coupon_mall_type == 1 ? '全站' : item.coupon_mall_type == 2 ? '自营' : '联营' }}</view>
</view>
</view>
</view>
<view class="no-data column rowCenter verCenter" v-else>
<image src="../../static/nodate.png"></image>
<text class="tt">暂无优惠券</text>
</view>
</template>
</view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {
curr: 0,
text_arr: ['活动中心', '领券中心'],
activity_list: [],
coupon_list: []
};
},
onLoad(options) {
this.curr = options.curr || 0;
},
onShow() {
this.getData();
},
methods: {
tab(index) {
this.curr = index;
this.getData();
},
getData() {
this.request(Api_Url + '/Activity/Cube/getActivityCenterData', 'GET', {}, true, true).then(res => {
if (res.err_code === 0) {
if (this.curr == 0) {
this.activity_list = res.data.activity_list;
}
if (this.curr == 1) {
this.coupon_list = res.data.coupon_list;
}
} else if (res.err_code === 11012) {
uni.navigateTo({
url: '/login'
});
}
});
}
}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/activityCenter.scss';
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment