新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
216
components/canvasShow/basics/coupon/index.vue
Normal file
216
components/canvasShow/basics/coupon/index.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="coupon-box" >
|
||||
<div class="coupon-list coupon-flex coupon-swiper" v-if="componentContent.arrangeType == '横向滑动'">
|
||||
<swiper class="swiper"
|
||||
:disable-touch="couponsData.length < 3"
|
||||
:circular="false"
|
||||
:indicator-dots="false"
|
||||
:autoplay="couponsData.length > 2"
|
||||
:display-multiple-items="2"
|
||||
:previous-margin="swiperCurrent === couponsData.length - 2?'32rpx':'0rpx'"
|
||||
:next-margin="swiperCurrent === couponsData.length - 2?'0rpx':'32rpx'">
|
||||
<swiper-item class="swiper-slide" v-for="(item, index) in couponsData" :key="index">
|
||||
<couponItem :item="item" :componentContent="componentContent" @receive="receiveCoupon" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="coupon-list" v-else :class="componentContent.arrangeType === '多行多列' && 'coupon-flex'">
|
||||
<couponItem class="item" v-for="(item, index) in couponsData" :key="index" :item="item" :componentContent="componentContent" @receive="receiveCoupon" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import commonMixin from './mixin';
|
||||
import couponItem from './item.vue';
|
||||
import { toRefs } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
typeId: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
shopId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
componentContent: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
});
|
||||
const { typeId, shopId, componentContent } = toRefs(props);
|
||||
const { couponsData, receiveCoupon } = commonMixin(componentContent, typeId, shopId);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-box{
|
||||
padding: 0 35rpx;
|
||||
::v-deep .coupon-list{
|
||||
.item{
|
||||
margin-top: 24rpx;
|
||||
display: block;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.coupon-item {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: url('https://b2c-pro-static-dev.zkthink.com/static/images/canvas/bg-coupon-l.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.discount{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 68rpx;
|
||||
line-height: 64rpx;
|
||||
font-weight: bold;
|
||||
.unit{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
font-size: 38rpx;
|
||||
.type{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
.tip{
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
width: 144rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #ee6d46;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.disable{
|
||||
background: #666666;
|
||||
}
|
||||
.expired{
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
.coupon-left{
|
||||
width: 206rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.coupon-right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 0 32rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&.coupon-flex{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item:nth-child(2){
|
||||
margin-top: 0;
|
||||
}
|
||||
.coupon-item {
|
||||
width: 333rpx;
|
||||
height: 140rpx;
|
||||
background-image: url('https://b2c-pro-static-dev.zkthink.com/static/images/canvas/bg-coupon-m.png');
|
||||
.coupon-left{
|
||||
width: 147rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.type{
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
.coupon-right{
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
.discount{
|
||||
font-size: 32rpx;
|
||||
line-height: 45rpx;
|
||||
.unit{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
.tip{
|
||||
font-size: 20rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 9rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
width: 132rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.coupon-swiper{
|
||||
.swiper{
|
||||
height: 140rpx;
|
||||
}
|
||||
.swiper-slide{
|
||||
width: 310rpx;
|
||||
.coupon-item {
|
||||
width: 310rpx;
|
||||
background-image: url('https://b2c-pro-static-dev.zkthink.com/static/images/canvas/bg-coupon-s.png');
|
||||
margin-bottom: 0;
|
||||
.coupon-left{
|
||||
width: 130rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .uni-swiper-dots{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
bottom: 27rpx;
|
||||
.uni-swiper-dot{
|
||||
width: 24upx;
|
||||
height: 4upx;
|
||||
background: #fff;
|
||||
opacity: 0.5;
|
||||
border-radius: 2upx;
|
||||
margin: 0 5upx;
|
||||
&-active{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
57
components/canvasShow/basics/coupon/item.vue
Normal file
57
components/canvasShow/basics/coupon/item.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-left">
|
||||
<!-- 折扣力度 -->
|
||||
<div class="discount">
|
||||
<div class="unit pre-unit" v-if="item.couponType === 1">
|
||||
￥
|
||||
</div>
|
||||
{{item.couponType === 1 ? item.couponValue : item.discount}}
|
||||
<div class="unit" v-if="item.couponType === 2">
|
||||
折
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" v-if="componentContent.arrangeType === '多行多列'">
|
||||
{{item.couponType === 1 ? '满减券' : '折扣券'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-right">
|
||||
<div class="info">
|
||||
<div class="type" v-if="componentContent.arrangeType === '一行一个'">
|
||||
{{item.couponType === 1 ? '满减券' : '折扣券'}}
|
||||
</div>
|
||||
<div class="tip">
|
||||
{{item.threshold!==0?`(实付${item.threshold}元使用)`:'无门槛使用'}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- button -->
|
||||
<div class="button get-coupon" @click="receiveCoupon(item)">
|
||||
领取
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {toRefs} from "vue";
|
||||
|
||||
const emits = defineEmits(['receive'])
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
componentContent: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
});
|
||||
const { item, componentContent } = toRefs(props);
|
||||
function receiveCoupon (item) {
|
||||
emits('receive', item)
|
||||
}
|
||||
|
||||
</script>
|
||||
122
components/canvasShow/basics/coupon/mixin.js
Normal file
122
components/canvasShow/basics/coupon/mixin.js
Normal file
@ -0,0 +1,122 @@
|
||||
import api from '../../config/api'
|
||||
import { funMixin } from '../../config/mixin'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import cookie from '@/utils/cookie'
|
||||
|
||||
export default function (componentContent, typeId, shopId) {
|
||||
const { sendReq, beforeGetData, afterGetData, jumpStore } = funMixin()
|
||||
const couponsData = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
// 获取优惠券列表
|
||||
function getData () {
|
||||
if (
|
||||
componentContent.value.selectedCoupon &&
|
||||
componentContent.value.selectedCoupon.length > 0
|
||||
) {
|
||||
beforeGetData()
|
||||
let _url = `${api.getCoupons}?isPage=2&ids=${componentContent.value.selectedCoupon}`
|
||||
const params = {
|
||||
method: 'GET',
|
||||
url: _url,
|
||||
}
|
||||
sendReq(
|
||||
params,
|
||||
(res) => {
|
||||
afterGetData()
|
||||
couponsData.value = res.data.list
|
||||
},
|
||||
() => {
|
||||
afterGetData()
|
||||
}
|
||||
)
|
||||
} else {
|
||||
couponsData.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 领取优惠券
|
||||
async function receiveCoupon (item) {
|
||||
var token = cookie.get('accessToken')
|
||||
if (typeof uni !== 'undefined') {
|
||||
if (token) {
|
||||
const params = {
|
||||
url: `${api.takeCoupon}${item.id}`,
|
||||
method: 'GET',
|
||||
}
|
||||
sendReq(
|
||||
params,
|
||||
(res) => {
|
||||
if (res.code !== 0) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
getData()
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
() => {
|
||||
if (res.code !== 0) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/guid'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (token) {
|
||||
const params = {
|
||||
url: `${api.takeCoupon}${item.id}`,
|
||||
method: 'GET',
|
||||
}
|
||||
sendReq(params).then(res => {
|
||||
ElMessage({
|
||||
message: '领取成功！',
|
||||
type: 'success'
|
||||
})
|
||||
getData()
|
||||
}).catch(res => {
|
||||
if (res.data.code !== '200') {
|
||||
ElMessage({
|
||||
message: res.data.message,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '请先登录'
|
||||
})
|
||||
// 登录弹框
|
||||
// store.commit('IS_LOGIN', false) // 清除顶部个人中心数据
|
||||
// store.commit('SHOW_LOGIN') // 调用登录弹框
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
componentContent,
|
||||
couponsData,
|
||||
receiveCoupon,
|
||||
jumpStore
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user