Skip to content

M
mayi-mp-shop
Commit f243cead by liujinsa
Options

优惠券大转盘迁移

parent 370a1389
Showing with 620 additions and 1 deletions
src/api/coupon.js 0 → 100644
import { requestPOST } from "@/utils/request.js";
export default {
// 组件查询优惠券列表
queryCouponIdsList(data) {
return requestPOST(`${process.env.OLSHOP_URL}/promotion/query_coupon_detail_by_ids`, data)
},
// 领取优惠券
receive_coupon(params) {
return requestPOST(`${process.env.OLSHOP_URL}/promotion/receive_coupon/?couponCode=`+params+``)
},
};
src/components/activity/coupon.vue 0 → 100644
<!-- 优惠券 -->
<template>
<div class="domin" v-if="showList">
<div class="tops">
<h3 class="line-clamp1">{{datas.componentData['title']}}</h3>
</div>
<!-- 优惠券列表 -->
<div class="couponBg">
<div class="coupon" :class="'coupon'+datas.componentData.style">
<div class="couponList clearfix">
<div
class="item clearfix"
v-for="(item,index) in datas.componentData.couponList"
:key="index"
>
<img
class="img"
:class="'imgWidth'+datas.componentData.style"
:src="datas.componentData.couponStyleList[datas.componentData.style-1]"
alt
/>
<div v-if="datas.componentData.style==1" class="info info1" @click="receiveCoupon(item.couponCode,item)">
<div v-if="item.preferentialType!=1">
<span
class="price"
v-if="(item.preferentialMoney-0)%1==0"
>{{item.preferentialMoney | keepIntNum}}</span>
<span class="price" v-else>{{parseFloat(item.preferentialMoney)}}</span>
<span style="font-size:10px;color:#e74745;">元</span>
</div>
<div v-else>
<span
class="price"
v-if="(item.preferentialDiscount-0)%1==0"
>{{item.preferentialDiscount | keepIntNum}}</span>
<span class="price" v-else>{{parseFloat(item.preferentialDiscount)}}</span>
<span style="font-size:10px;color:#e74745;">折</span>
</div>
<p class="name line-clamp1">{{item.couponName}}</p>
<p class="describe line-clamp2">{{item.info}}</p>
<p class="btn">立即领取</p>
</div>
<div v-else-if="datas.componentData.style==2" class="info info2" @click="receiveCoupon(item.couponCode,item)">
<p class="name line-clamp1">{{item.couponName}}</p>
<div v-if="item.preferentialType!=1" class="priceItem">
<div
class="price"
:class="{'priceCopy':String(item.preferentialMoney-0).length>3}"
v-if="(item.preferentialMoney-0)%1==0"
>
<span>{{item.preferentialMoney | keepIntNum}}</span>
<span
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
>
<i>元</i>
</span>
</div>
<div
class="price"
:class="{'priceCopy':String(item.preferentialMoney-0).length>3}"
v-else
>
<span>{{parseFloat(item.preferentialMoney)}}</span>
<span
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
>
<i>元</i>
</span>
</div>
</div>
<div v-else class="priceItem">
<div
class="price"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>3}"
v-if="(item.preferentialDiscount-0)%1==0"
>
<span>{{item.preferentialDiscount | keepIntNum}}</span>
<span
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
>
<i>折</i>
</span>
</div>
<div
class="price"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>3}"
v-else
>
<span>{{parseFloat(item.preferentialDiscount)}}</span>
<span
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
>
<i>折</i>
</span>
</div>
</div>
<p class="describe line-clamp2">{{item.info}}</p>
</div>
<div v-else-if="datas.componentData.style==3" class="info info3" @click="receiveCoupon(item.couponCode,item)">
<div v-if="item.preferentialType!=1">
<div
class="price"
:class="{'priceCopy':String(item.preferentialMoney-0).length>2}"
v-if="(item.preferentialMoney-0)%1==0"
>
<span style="font-size:10px;">￥</span>
<span class="isPrice">{{item.preferentialMoney | keepIntNum}}</span>
</div>
<div
class="price"
:class="{'priceCopy':String(item.preferentialMoney-0).length>2}"
v-else
>
<span style="font-size:10px;">￥</span>
<span class="isPrice">{{parseFloat(item.preferentialMoney)}}</span>
</div>
</div>
<div v-else>
<div
class="price"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>2}"
v-if="(item.preferentialDiscount-0)%1==0"
>
<span class="isPrice">{{item.preferentialDiscount | keepIntNum}}</span>
<span style="font-size:10px;">折</span>
</div>
<div
class="price"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>2}"
v-else
>
<span class="isPrice">{{parseFloat(item.preferentialDiscount)}}</span>
<span style="font-size:10px;">折</span>
</div>
</div>
<div class="right">
<p class="name line-clamp1">{{item.couponName}}</p>
<p class="btn">立即领取</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import coupon from '@/api/coupon'
export default {
name: "coupon",
props: {
datas: {
type: Object,
default: {
componentData: {
couponList: []
}
}
}
},
data() {
return {
showGetCouponPop: false, //消耗积分领取
usingIntegrals: 0, //使用积分
couponCode: 0, //优惠券code
couItem: "", //当前优惠券
showList: true, //展示优惠券组件
};
},
mounted() {
this.getList();
},
watch:{
// 'datas.componentData.couponList' : function(newVal){
// if(newVal){
// if(newVal.length){
// this.showList=true;
// }else{
// this.showList=false;
// }
// }
// }
},
components: {},
methods: {
getList() {
let query = this.datas.componentData.selectionIds;
coupon.queryCouponIdsList(query).then(res => {
if (res.data.code == 200&&res.data.data.length!=0) {
this.datas.componentData.couponList = res.data.data.filter((item,index)=>{return item.publicFlag != 0});
if(this.datas.componentData.couponList.length==0){
this.showList=false;
}
}else{
this.showList=false;
}
});
},
// 领取优惠券
receiveCoupon(code,item) {
this.usingIntegrals = (item.consumeIntegral - 0).toFixed(0);
this.couponCode = code;
this.couItem = item;
if (item.receiveCostType == 1) {
this.showGetCouponPop = true;
return;
} else {
this.useCoupon(1);
}
// if (!this.$store.state.sessionId) {
// this.toEnvPage();
// return;
// }
// this.usingIntegrals = (item.consumeIntegral - 0).toFixed(0);
// this.couponCode = code;
// this.couItem = item;
// if (item.receiveCostType == 1) {
// // this.showGetCouponPop = true;
// this.$dialog
// .confirm({
// confirmButtonColor:"#CA173B",
// message: `是否消耗${this.usingIntegrals}积分领取`
// })
// .then(() => {
// this.useCoupon(2);
// })
// .catch(() => {
// // on cancel
// });
// return;
// } else {
// this.useCoupon(1);
// }
},
useCoupon(val) {
coupon.receive_coupon(this.couponCode).then(res => {
console.log(res, "cou137");
if (res.data.data == 'true') {
this.couItem.receiveStatus = 1;
if (val == 1) {
wx.showToast({
title:'领取成功',
icon: "success"
})
} else {
let tit = "积分-" + this.usingIntegrals;
wx.showToast({
title:tit,
icon: "success"
})
}
// item.receive=false;
} else {
this.$toast(res.msg);
// item.receive=true;
}
});
},
toEnvPage() {
if (this.isWx()) {
wx.miniProgram.getEnv(res => {
if (res.miniprogram) {
const url = `/pages/login/main?back=${encodeURIComponent(
this.$route.path
)}&params=${JSON.stringify({
productId: this.$route.params.goodsInfo
})}`;
wx.miniProgram.navigateTo({
url: url
});
} else {
let query = {
back: this.$route.path,
productId: this.$route.params.goodsInfo
};
this.$router.push({ name: "login-accountLogin", query });
}
});
} else {
let query = {
back: this.$route.path,
productId: this.$route.params.goodsInfo
};
this.$router.push({ name: "login-accountLogin", query });
}
}
}
};
</script>
<style lang="scss" scoped>
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.domin {
font-size: 16px;
padding: 10px;
.tops {
padding: 0px 0px 10px 10px;
h3 {
font-size: 18px;
color: #333;
}
}
.coupon {
width: 100%;
overflow: hidden;
.couponList {
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
.item {
padding: 25px 20px;
display: inline-block;
vertical-align: top;
white-space: initial;
padding-bottom: 40px;
position: relative;
.img {
transform: scale(1.3);
}
.imgWidth1 {
width: 70px;
height: 112px;
}
.imgWidth2 {
width: 76px;
height: 76px;
}
.imgWidth3 {
width: 128px;
height: 64px;
}
.info {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
font-size: 12px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.info1 {
.price {
display: inline-block;
padding: 9px 0;
color: #e74745;
font-weight: bold;
font-size: 16px;
}
.name {
margin-top: 4px;
color: #e74745;
}
.describe {
margin-top: 4px;
}
.btn {
font-size: 12px;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #e74745;
}
}
.info2 {
color: #fff;
.name {
transform: scale(0.8);
margin-top: 5px;
}
.priceItem {
margin-top: 5px;
line-height: 30px;
}
.price {
display: inline-block;
padding: 2px;
font-size: 29px;
font-weight: bold;
position: relative;
.label {
position: absolute;
bottom: 5px;
font-size: 12px;
// transform:rotateZ(90deg) scale(0.8);
i {
transform: translateX(-10px);
font-style: normal;
}
}
.labelCopy {
right: -12px;
}
}
.priceCopy {
font-size: 24px;
}
.describe {
transform: scale(0.8);
}
}
.info3 {
color: #fff;
height: 60%;
display: flex;
justify-content: space-around;
align-items: center;
.price {
display: inline-block;
font-size: 30px;
}
.priceCopy {
// transform:translateY(-10px);
font-size: 18px;
}
.right {
width: 50%;
padding-bottom: 10px;
.name {
font-size: 16px;
}
.btn {
margin-top: 3px;
background: #fff;
color: #ff6ca2;
}
}
}
}
}
}
.coupon1 {
// height: 160px;
}
.coupon2 {
// height: 134px;
.couponList {
.item {
padding-left: 24px;
}
}
}
.coupon3 {
// height: 100px;
.couponList {
.item {
padding-left: 30px;
}
}
}
}
</style>
src/components/activity/integralTurntable.vue 0 → 100644
<!-- 积分大转盘 -->
<template>
<div class="IntegralTurntable" v-if="isShow == true">
<div class="img" @click="toPrizePage">
<img v-if="datas.componentData.imgUrl" mode="widthFix" :src="datas.componentData.imgUrl" lazy-load alt />
<img
v-else
src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/2a61b201-4fe3-406b-9d76-9ec606ed08c0.png"
alt
/>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import coupon from '@/api/coupon'
const app = getApp()
export default {
name: "integral-turntable",
props: {
datas: {
type: Object,
default: function() {
return {
id: "",
pageCode: 0,
pageType: 0,
queueNumber: 0,
componentName: "积分大转盘",
componentCode: "Integral-turntable",
code: 3,
componentData: {
imgUrl:
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/2a61b201-4fe3-406b-9d76-9ec606ed08c0.png",
turntableCode: ""
}
};
}
}
},
data() {
return {
isShow: false,
};
},
components: {},
watch : {
// "datas.componentData._tempData" : function(newVal){
// this.isShow = newVal
// }
},
mounted() {
if (this.render) {
try {
this.$on('getEnvInfo',([val])=>{
console.log(val,'ggggggggggggg',typeof val)
this.api=val;
this.init();
})
} catch (error) {}
} else {
this.isShow=true;
}
},
methods: {
// 初始化--查询列表看活动是否可用
// init() {
// let activityId=this.datas.componentData.turntableCode;
// coupon.queryPrizeFlag({activityId}).then(res=>{
// if(res.data.code==200){
// this.isShow=res.data=='true'?true:false;
// }else{
// this.isShow=true;
// }
// })
// },
// 跳转到大转盘页
toPrizePage() {
let link = `/turntable?turntableCode=${this.datas.componentData.turntableCode}`
app.$themeToLink(link);
},
// toEnvPage() {
// let query = {
// back: this.$route.path,
// };
// this.$router.push({ name: "login-accountLogin", query });
// }
}
};
</script>
<style lang="scss" scoped>
.IntegralTurntable {
.img {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
max-height: 200px;
img {
width: 100%;
object-fit: cover;
}
}
}
</style>
src/pages/home/index.vue
......@@ -54,6 +54,12 @@
<div v-if="item.componentCode == 'pop-up'">
<pop-up :datas="item"></pop-up>
</div>
<div v-if="item.componentCode == 'coupon'">
<coupon :datas="item"></coupon>
</div>
<div v-if="item.componentCode == 'integral-turntable'">
<integralTurntable :datas="item"></integralTurntable>
</div>
</div>
<bottomCont></bottomCont>
......@@ -86,6 +92,8 @@ import shopPopup from '@/components/basicTool/shop-popup/index.vue'
import text from '@/components/content/text'
import imgText from '@/components/content/imgText'
import videoPlayer from '@/components/content/videoPlayer'
import coupon from '@/components/activity/coupon'
import integralTurntable from '@/components/activity/integralTurntable'
import { setTabBarActive, checkTabbarPage } from "../../utils/mayi.js";
const app = getApp();
......@@ -105,7 +113,9 @@ export default {
ThemeDataPlant,
'text-text':text,
'img-text':imgText,
videoPlayer
videoPlayer,
coupon,
integralTurntable
},
onShareAppMessage(res) {
let shareVal={};
......
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 to comment