parent
a585a6714e
commit
8866ea3313
@ -1,224 +1,241 @@ |
||||
<template> |
||||
<view> |
||||
<view class="width90"> |
||||
<view class="flright fotct"> |
||||
<image class="coupon-img" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image> |
||||
</view> |
||||
<view class="coupon-mes mart10" style="margin-right: 90px;"> |
||||
<view class="fcor333 fontwig6 font24 width100 text2">{{couponsDetails.highDiscount.discountName}}</view> |
||||
<view class="fcor666 font13 width100 mart5"> |
||||
使用截止时间:{{salesEndTime | formatDate('-')}}</view> |
||||
</view> |
||||
<view class="fcor666 font13 width100 mart5"> |
||||
领取有效期:{{couponsDetails.highDiscount.effectiveDay}}天 |
||||
</view> |
||||
</view> |
||||
<view class="line1 mart15"></view> |
||||
<view class="width90 mart10 fcor666">可购买的商品</view> |
||||
<view v-if="minecoupones == '' " class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="product-list mart20 width90"> |
||||
<view class="product" v-for="product in minecoupones" :key="product.id" |
||||
@tap="toGoods(product.highCoupon.id)"> |
||||
<image mode="widthFix" :src="imageUrl+product.highCoupon.couponImg"></image> |
||||
<view class="name">{{ product.highCoupon.couponName }}</view> |
||||
<view class="info" v-if="product.highCoupon.payType == 1"> |
||||
<view class="price"> |
||||
￥{{ product.highCoupon.discountPrice}} |
||||
</view> |
||||
<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice"> |
||||
￥{{ product.highCoupon.salesPrice}} |
||||
</view> |
||||
</view> |
||||
<view class="info" v-else> |
||||
<view class="price"> |
||||
<image style="width: 15px;height: 15px;vertical-align: sub;" |
||||
src="../../../static/img/jfx.png"> |
||||
</image>{{ product.highCoupon.discountPrice*100}} |
||||
</view> |
||||
<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice"> |
||||
<image style="width: 15px;height: 15px;vertical-align: sub;" |
||||
src="../../../static/img/jfh.png"> |
||||
</image>{{ product.highCoupon.salesPrice*100}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 mart10 fcor666" v-if="videourl !=''">视频教程</view> |
||||
<view class="width80 mart10 marb30" v-if="videourl !=''"> |
||||
<yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true"> |
||||
</yy-video-player> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getCouponByDiscount, |
||||
getDiscountByUserDiscountId, |
||||
getCmsContent |
||||
} from '../../../Utils/Api.js'; |
||||
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue' |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
xiaoVideoElement |
||||
}, |
||||
data() { |
||||
return { |
||||
minecoupones: [], |
||||
imageUrl: app.globalData.imgUrl, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres:'noorder.png', |
||||
imagedess1: '/CMS/html/11641540903873.mp4', |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
couponsDetails: '', |
||||
salesEndTime: '', |
||||
couponId: '', |
||||
videourl: '' //视频地址 |
||||
} |
||||
}, |
||||
filters: { |
||||
//过滤器 用于格式化时间 |
||||
formatDate: function(value, spe = '/') { |
||||
let data = new Date(value); |
||||
let year = data.getFullYear(); |
||||
let month = data.getMonth() + 1; |
||||
let day = data.getDate(); |
||||
let h = data.getHours(); |
||||
let mm = data.getMinutes(); |
||||
let s = data.getSeconds(); |
||||
month = month >= 10 ? month : "0" + month; |
||||
day = day >= 10 ? day : "0" + day; |
||||
h = h >= 10 ? h : "0" + h; |
||||
mm = mm >= 10 ? mm : "0" + mm; |
||||
s = s >= 10 ? s : "0" + s; |
||||
return `${year}${spe}${month}${spe}${day}`; |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.couponId = option.id; |
||||
this.getDiscountByUserDiscountId(); |
||||
this.getCmsContentvideo(); |
||||
}, |
||||
methods: { |
||||
//获取视频资料 |
||||
getCmsContentvideo() { |
||||
let params = { |
||||
regionId: app.globalData.cityId, |
||||
categoryCode: 'CMS_H5_VIDEO' |
||||
} |
||||
getCmsContent(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.videourl = res.return_data; |
||||
} |
||||
}); |
||||
<template> |
||||
<view> |
||||
<view class="width90"> |
||||
<view class="flright fotct"> |
||||
<image class="coupon-img" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image> |
||||
</view> |
||||
<view class="coupon-mes mart10" style="margin-right: 90px;"> |
||||
<view class="fcor333 fontwig6 font24 width100 text2">{{couponsDetails.highDiscount.discountName}}</view> |
||||
<view class="fcor666 font13 width100 mart5"> |
||||
使用截止时间:{{salesEndTime | formatDate('-')}}</view> |
||||
</view> |
||||
<view class="fcor666 font13 width100 mart5"> |
||||
领取有效期:{{couponsDetails.highDiscount.effectiveDay}}天 |
||||
</view> |
||||
</view> |
||||
<view class="line1 mart15"></view> |
||||
<view class="width90 mart10 fcor666">可购买的商品</view> |
||||
<view v-if="minecoupones == '' " class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="product-list mart20 width90"> |
||||
<view class="product" v-for="product in minecoupones" :key="product.id" |
||||
@tap="toGoods(product.highCoupon.id)"> |
||||
<image mode="widthFix" :src="imageUrl+product.highCoupon.couponImg"></image> |
||||
<view class="name">{{ product.highCoupon.couponName }}</view> |
||||
<view class="info" v-if="product.highCoupon.payType == 1"> |
||||
<view class="price"> |
||||
￥{{ product.highCoupon.discountPrice}} |
||||
</view> |
||||
<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice"> |
||||
￥{{ product.highCoupon.salesPrice}} |
||||
</view> |
||||
</view> |
||||
<view class="info" v-else> |
||||
<view class="price"> |
||||
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> |
||||
</image>{{ product.highCoupon.discountPrice*100}} |
||||
</view> |
||||
<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice"> |
||||
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfh.png"> |
||||
</image>{{ product.highCoupon.salesPrice*100}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="width90 mart40 fcor666" v-if="videourl != ''">视频教程</view> |
||||
<view class="btnplay" @click="playvideo" v-if="videourl != ''">播放视频教学</view> |
||||
<view class="width80 mart20 marb30" v-if="isplayvideo"> |
||||
<yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true"> |
||||
</yy-video-player> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getCouponByDiscount, |
||||
getDiscountByUserDiscountId, |
||||
getCmsContent |
||||
} from '../../../Utils/Api.js'; |
||||
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue' |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
xiaoVideoElement |
||||
}, |
||||
data() { |
||||
return { |
||||
minecoupones: [], |
||||
imageUrl: app.globalData.imgUrl, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'noorder.png', |
||||
imagedess1: '/CMS/html/11641540903873.mp4', |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
couponsDetails: '', |
||||
salesEndTime: '', |
||||
couponId: '', |
||||
videourl: '' ,//视频地址 |
||||
isplayvideo: false //视频播放 |
||||
} |
||||
}, |
||||
filters: { |
||||
//过滤器 用于格式化时间 |
||||
formatDate: function(value, spe = '/') { |
||||
let data = new Date(value); |
||||
let year = data.getFullYear(); |
||||
let month = data.getMonth() + 1; |
||||
let day = data.getDate(); |
||||
let h = data.getHours(); |
||||
let mm = data.getMinutes(); |
||||
let s = data.getSeconds(); |
||||
month = month >= 10 ? month : "0" + month; |
||||
day = day >= 10 ? day : "0" + day; |
||||
h = h >= 10 ? h : "0" + h; |
||||
mm = mm >= 10 ? mm : "0" + mm; |
||||
s = s >= 10 ? s : "0" + s; |
||||
return `${year}${spe}${month}${spe}${day}`; |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.couponId = option.id; |
||||
this.getDiscountByUserDiscountId(); |
||||
this.getCmsContentvideo(); |
||||
}, |
||||
methods: { |
||||
//获取视频资料 |
||||
getCmsContentvideo() { |
||||
let params = { |
||||
regionId: app.globalData.cityId, |
||||
categoryCode: 'CMS_H5_VIDEO' |
||||
} |
||||
getCmsContent(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.videourl = res.return_data; |
||||
} |
||||
}); |
||||
}, |
||||
//获取卡券详情 |
||||
getDiscountByUserDiscountId() { |
||||
let params = { |
||||
userDiscountId: this.couponId |
||||
} |
||||
getDiscountByUserDiscountId(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.couponsDetails = res.return_data; |
||||
this.salesEndTime = res.return_data.useEndTime; |
||||
this.getCouponByDiscount(res.return_data.highDiscount.id); |
||||
} |
||||
}) |
||||
}, |
||||
//根据优惠券查询卡券列表 |
||||
getCouponByDiscount(item) { |
||||
let params = { |
||||
discountId: item |
||||
} |
||||
getCouponByDiscount(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.minecoupones = res.return_data; |
||||
} |
||||
}) |
||||
}, |
||||
//商品跳转 |
||||
toGoods(e) { |
||||
uni.navigateTo({ |
||||
url: '../../order/confirmation?id=' + e |
||||
}) |
||||
// uni.navigateTo({ |
||||
// url: '../../goods/goods?id='+e |
||||
// }); |
||||
}, |
||||
//获取卡券详情 |
||||
getDiscountByUserDiscountId() { |
||||
let params = { |
||||
userDiscountId: this.couponId |
||||
} |
||||
getDiscountByUserDiscountId(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.couponsDetails = res.return_data; |
||||
this.salesEndTime = res.return_data.useEndTime; |
||||
this.getCouponByDiscount(res.return_data.highDiscount.id); |
||||
} |
||||
}) |
||||
}, |
||||
//根据优惠券查询卡券列表 |
||||
getCouponByDiscount(item) { |
||||
let params = { |
||||
discountId: item |
||||
} |
||||
getCouponByDiscount(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.minecoupones = res.return_data; |
||||
} |
||||
}) |
||||
}, |
||||
//商品跳转 |
||||
toGoods(e) { |
||||
uni.navigateTo({ |
||||
url: '../../order/confirmation?id=' + e |
||||
}) |
||||
// uni.navigateTo({ |
||||
// url: '../../goods/goods?id='+e |
||||
// }); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.coupon-mes { |
||||
// margin-right: 90px; |
||||
//播放视频 |
||||
playvideo(){ |
||||
this.isplayvideo = true; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.coupon-mes { |
||||
// margin-right: 90px; |
||||
} |
||||
|
||||
.coupon-img { |
||||
width: 80px; |
||||
height: 80px; |
||||
} |
||||
|
||||
.product-list { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
|
||||
.product { |
||||
width: 48%; |
||||
border-radius: 20upx; |
||||
background-color: #fff; |
||||
margin: 0 0 15upx 0; |
||||
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); |
||||
|
||||
image { |
||||
width: 100%; |
||||
border-radius: 20upx 20upx 0 0; |
||||
} |
||||
|
||||
.name { |
||||
width: 92%; |
||||
padding: 8upx 4%; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 1; |
||||
text-align: justify; |
||||
overflow: hidden; |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
width: 92%; |
||||
padding: 10upx 4% 10upx 4%; |
||||
|
||||
.price { |
||||
color: #e65339; |
||||
font-size: 30upx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.slogan { |
||||
color: #807c87; |
||||
font-size: 24upx; |
||||
text-decoration: line-through; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.coupne-btn { |
||||
position: fixed; |
||||
bottom: 0px; |
||||
background-color: red; |
||||
color: #FFFFFF; |
||||
border-radius: 0px; |
||||
} |
||||
|
||||
.coupon-img { |
||||
width: 80px; |
||||
height: 80px; |
||||
} |
||||
|
||||
.product-list { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
|
||||
.product { |
||||
width: 48%; |
||||
border-radius: 20upx; |
||||
background-color: #fff; |
||||
margin: 0 0 15upx 0; |
||||
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); |
||||
|
||||
image { |
||||
width: 100%; |
||||
border-radius: 20upx 20upx 0 0; |
||||
} |
||||
|
||||
.name { |
||||
width: 92%; |
||||
padding: 8upx 4%; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 1; |
||||
text-align: justify; |
||||
overflow: hidden; |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
width: 92%; |
||||
padding: 10upx 4% 10upx 4%; |
||||
|
||||
.price { |
||||
color: #e65339; |
||||
font-size: 30upx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.slogan { |
||||
color: #807c87; |
||||
font-size: 24upx; |
||||
text-decoration: line-through; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.coupne-btn { |
||||
position: fixed; |
||||
bottom: 0px; |
||||
background-color: red; |
||||
.btnplay{ |
||||
width: 120px; |
||||
text-align: center; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
color: #FFFFFF; |
||||
} |
||||
background-color: #089bf5; |
||||
border-radius: 5px; |
||||
margin-left: 5%; |
||||
margin-top: 20px; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue