功能完善
This commit is contained in:
lzh
@@ -1,93 +1,190 @@
|
||||
<template>
|
||||
<view class="coupon-item">
|
||||
<view class="coupon-item">
|
||||
<view class="coupon-money">
|
||||
<view class="nick" ></view>
|
||||
<view class="nick">{{item.name}}</view>
|
||||
<view class="layof" :style="{color:theme}">￥{{item.amount}}</view>
|
||||
<view class="end_time">{{item.endTime | formatCreateTime}}前使用</view>
|
||||
<view >
|
||||
<view class="demand">满{{ item.minPoint }} 减 {{ item.amount }}</view>
|
||||
<view>
|
||||
<view class="demand">满{{ item.minPoint }} 减 {{ item.amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="get-btn" v-if="!types" :style="{color:color, borderColor:color, background:solid}" @click="acceptCoupon(item)" >立即领取</view>
|
||||
<navigator class="get-btn" v-if="types" :style="{color:color, borderColor:color, background:solid}" :url='item.url' @click="acceptCoupon(item)">立即使用</navigator>
|
||||
</view>
|
||||
<view class="get-btn" v-if="!types" :style="{color:color, borderColor:color, background:solid}"
|
||||
@click="acceptCoupon(item)">立即领取</view>
|
||||
<navigator class="get-btn" v-if="types" :style="{color:color, borderColor:color, background:solid}"
|
||||
:url='item.url' @click="useCoupon(item)">立即使用</navigator>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from '@/common/api';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import { formatDate } from '@/common/date';
|
||||
import Api from '@/common/api';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import {
|
||||
formatDate
|
||||
} from '@/common/date';
|
||||
|
||||
export default {
|
||||
components:{
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
types: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: '#ff9000'
|
||||
},
|
||||
solid: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#ff9000'
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async acceptCoupon(item) {
|
||||
this.types =!this.types
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
|
||||
let params = {
|
||||
couponId: item.id
|
||||
};
|
||||
let data = await Api.apiCall('post', Api.index.acceptCoupon, params);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
uni.hideLoading();
|
||||
|
||||
},
|
||||
async useCoupon(item){
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
props:{
|
||||
item:{
|
||||
type: Object
|
||||
},
|
||||
types:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
theme:{
|
||||
type: String,
|
||||
default: '#ff9000'
|
||||
},
|
||||
solid:{
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
color:{
|
||||
type: String,
|
||||
default: '#ff9000'
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async acceptCoupon(item){
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
|
||||
let params = { couponId: item.id };
|
||||
let data = await Api.apiCall('post', Api.index.acceptCoupon, params);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
uni.hideLoading();
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.coupon-item {
|
||||
width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
|
||||
.coupon-money {
|
||||
width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
|
||||
.coupon-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: table;
|
||||
border-radius: 10upx;
|
||||
padding: 0 20upx;
|
||||
margin-top: 22upx;
|
||||
border: 1px solid #eeeeee;
|
||||
position: relative;
|
||||
|
||||
.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
|
||||
.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
|
||||
.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
|
||||
.coupon-money {
|
||||
width: 465upx;
|
||||
height: auto;
|
||||
display: table;
|
||||
float: left;
|
||||
padding: 26upx 0;
|
||||
border-style: none dotted none none;
|
||||
border-color: #eeeeee;
|
||||
|
||||
.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
|
||||
.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
|
||||
.nick {
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
line-height: 30upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-999;
|
||||
}
|
||||
|
||||
.tit {
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-999;
|
||||
}
|
||||
|
||||
.demand {
|
||||
width: 100%;
|
||||
height: 30upx;
|
||||
line-height: 30upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-999;
|
||||
}
|
||||
|
||||
.layof {
|
||||
width: 100%;
|
||||
height: 48upx;
|
||||
line-height: 30upx;
|
||||
font-size: 44upx;
|
||||
color: #ff9000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.end_time {
|
||||
width: 100%;
|
||||
height: 30upx;
|
||||
line-height: 30upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-999;
|
||||
}
|
||||
}
|
||||
|
||||
.get-btn {
|
||||
width: 146upx;
|
||||
height: 52upx;
|
||||
line-height: 50upx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 26upx;
|
||||
margin-top: -26upx;
|
||||
text-align: center;
|
||||
border-radius: 60upx;
|
||||
color: #ff9000;
|
||||
border: 1px solid #ff9000;
|
||||
font-size: $font-sm;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-item:after {
|
||||
width: 40upx;
|
||||
height: 20upx;
|
||||
position: absolute;
|
||||
left: 460upx;
|
||||
top: -1px;
|
||||
border-radius: 0 0 40upx 40upx;
|
||||
content: "";
|
||||
display: block;
|
||||
background: $bgcolor_white;
|
||||
border: 1px solid #eeeeee;
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.coupon-item:before {
|
||||
width: 40upx;
|
||||
height: 20upx;
|
||||
position: absolute;
|
||||
left: 460upx;
|
||||
bottom: -1px;
|
||||
border-radius: 40upx 40upx 0 0;
|
||||
content: "";
|
||||
display: block;
|
||||
background: $bgcolor_white;
|
||||
border: 1px solid #eeeeee;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
|
||||
}
|
||||
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
|
||||
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
|
||||
</style>
|
||||
|
||||
71
mallplusui-uniapp-app/components/likes/likes.vue
Normal file
71
mallplusui-uniapp-app/components/likes/likes.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="icons" @click.stop="likeTab">
|
||||
<uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'" ></uni-icons>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
item:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {}
|
||||
}
|
||||
},
|
||||
types:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
item(newVal){
|
||||
this.like = this.item.is_like
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.like = this.item.is_like
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
like:false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
likeTab(){
|
||||
this.like = !this.like;
|
||||
this.updateLikes();
|
||||
},
|
||||
updateLikes(){
|
||||
uni.showLoading();
|
||||
this.$api.update_likes({
|
||||
user_id:'5f3d11c03d11c60001141e5f',
|
||||
article_id:this.item._id
|
||||
}).then(res=>{
|
||||
uni.hideLoading();
|
||||
console.log(res);
|
||||
uni.showToast({
|
||||
title:this.like?"收藏成功":"取消收藏",
|
||||
icon:'none'
|
||||
})
|
||||
uni.$emit('update_article',this.types)
|
||||
}).catch(()=>{
|
||||
uni.hideLoading();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icons {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -21,6 +21,10 @@ export default {
|
||||
|
||||
<style>
|
||||
.cpr{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
margin: 20upx 0;
|
||||
|
||||
Reference in New Issue
Block a user