['设置中心']
This commit is contained in:
269
pages/coupons/magDetails.vue
Normal file
269
pages/coupons/magDetails.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="content" v-if="!isLoding">
|
||||
<view class="details">
|
||||
<view class="header">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">优惠券标题</view>
|
||||
<view class="info-item-text">{{details.title}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">优惠券类型</view>
|
||||
<view class="info-item-text">{{details.type.text}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">上架状态</view>
|
||||
<view class="info-item-text">已{{details.status.text}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">使用渠道</view>
|
||||
<view class="info-item-text">{{details.use_way}}</view>
|
||||
</view>
|
||||
<view class="info-item" v-if="details.type.value === 2">
|
||||
<view class="info-item-title">满减</view>
|
||||
<view class="info-item-text">满{{details.price}}减{{details.full}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券发放量</view>
|
||||
<view class="info-item-text">{{details.quantity}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">已发放量</view>
|
||||
<view class="info-item-text">{{details.grant_quantity}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">每人限领</view>
|
||||
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
|
||||
</view>
|
||||
<block v-if="details.time_type.value === 1">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期(起)</view>
|
||||
<view class="info-item-text">{{details.start_at}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期(止)</view>
|
||||
<view class="info-item-text">{{details.end_at}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="details.time_type.value === 2">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期</view>
|
||||
<view class="info-item-text">领取后{{details.days}}天内有效</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">创建时间</view>
|
||||
<view class="info-item-text">{{details.created_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mian">
|
||||
<block v-if="details.goods.length > 0">
|
||||
<view class="mian-title">关联商品</view>
|
||||
<view class="mian-goods">
|
||||
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
||||
<view class="item-title nowrap">{{item.name}}</view>
|
||||
<view class="item-price nowrap">￥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="mian-title">使用说明</view>
|
||||
<view class="mian-text">
|
||||
<text>{{details.description || '-'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-flex">
|
||||
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
|
||||
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoding : true,
|
||||
recommended : false,
|
||||
details : {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
magCouponsInfo(this.$Route.query.couponId).then(res => {
|
||||
this.recommended = res.can.recommended
|
||||
this.details = res
|
||||
this.isLoding = false
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 上下架
|
||||
putStatus(){
|
||||
magCouponsStatus(this.details.coupon_id).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon : 'none'
|
||||
})
|
||||
this.$set(this.details, 'status', this.details.status.value == 4 ? {'value': 2,'text': "上架"} : {'value': 4,'text': "下架"})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设为推荐
|
||||
onCouponsRecommend(){
|
||||
magCouponsRecommend(this.details.coupon_id).then(res => {
|
||||
this.recommended = !this.recommended
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon : 'none'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// content
|
||||
.content{
|
||||
padding-bottom: $padding + 90;
|
||||
}
|
||||
// footer
|
||||
.footer{
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: ($padding/2) $padding;
|
||||
.footer-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
line-height: 70rpx;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: $text-price;
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
border-right: solid 1rpx $border-color;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.details{
|
||||
margin: $margin;
|
||||
background: white;
|
||||
border-radius: $radius;
|
||||
// 优惠券信息
|
||||
.header{
|
||||
position: relative;
|
||||
border-bottom: dashed 2rpx $border-color;
|
||||
padding: $padding;
|
||||
&::after,&::before{
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: #f8f8f8;
|
||||
content: " ";
|
||||
bottom: -16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after{
|
||||
left: -16rpx;
|
||||
}
|
||||
&::before{
|
||||
right: -16rpx;
|
||||
}
|
||||
.info{
|
||||
padding: $padding 0;
|
||||
text-align: center;
|
||||
.info-cover{
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.info-title{
|
||||
padding-top: $padding;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
.info-item{
|
||||
position: relative;
|
||||
padding-left: 200rpx;
|
||||
min-height: 60rpx;
|
||||
font-size: $title-size-lg;
|
||||
padding-bottom: $padding/3;
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.info-item-title{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 50rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.info-item-text{
|
||||
line-height: 50rpx;
|
||||
color: $text-gray;
|
||||
text-align: right;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 优惠券介绍
|
||||
.mian{
|
||||
padding: $padding;
|
||||
.mian-title{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.mian-text{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
padding-top: $padding/3;
|
||||
}
|
||||
.mian-goods{
|
||||
padding-bottom: $padding;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-size: $title-size-m;
|
||||
padding-top: $padding/3;
|
||||
.item-title{
|
||||
width: 75%;
|
||||
color: $text-gray;
|
||||
}
|
||||
.item-price{
|
||||
width: 25%;
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user