yangjie
/
high-unionPay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修改视频播放方式

Browse Source
master
杨杰 3 years ago
parent a585a6714e
commit 8866ea3313
1 changed files with 237 additions and 220 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 457
      high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue

457
high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save