Commit 82e02052 authored by 罗超's avatar 罗超

1

parent 3b03bc16
...@@ -750,6 +750,13 @@ ...@@ -750,6 +750,13 @@
} }
},{ },{
"path": "imgList" "path": "imgList"
},
{
"path": "buyNotice",
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
} }
] ]
} }
......
...@@ -220,7 +220,6 @@ ...@@ -220,7 +220,6 @@
this.active = i; this.active = i;
}, },
previewImage(i) { previewImage(i) {
console.log(i)
uni.previewImage({ uni.previewImage({
urls: this.detailData.BannerList, urls: this.detailData.BannerList,
current: i, current: i,
......
...@@ -24,15 +24,6 @@ ...@@ -24,15 +24,6 @@
</view> </view>
</view> </view>
</view> </view>
<!-- <u-collapse >
<u-collapse-item :title="item.Name" v-for="(item) in dataList" >
<u-collapse v-if="item.ChildrenList">
<u-collapse-item :title="_item.Name" v-for="(_item) in item.ChildrenList" >
</u-collapse-item>
</u-collapse>
</u-collapse-item>
</u-collapse> -->
</view> </view>
</template> </template>
......
...@@ -2,34 +2,7 @@ ...@@ -2,34 +2,7 @@
<view class="content"> <view class="content">
<scroll-view :scroll-y="true" style="height: 100%;"> <scroll-view :scroll-y="true" style="height: 100%;">
<view class="header"> <view class="header">
<!-- <view class="bar"></view>
<view class="set text-gray">
<text @click="close" style="font-size:40upx;">返回</text>
<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
</view> -->
<!-- <view class="in-and-out">
<view class="item" v-if="start.length > 0">
<view style="font-size:30upx;color:#C0C0C0">入住日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
</view>
<view class="item text" v-if="start.length == 0">
<view>入住日期</view>
</view>
<view class="item">
<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
<view class="count" style="font-size:26upx;line-height:26upx;">{{ day }}</view>
</view>
</view>
<view class="item text" v-if="end.length == 0">
<view>离店日期</view>
</view>
<view class="item" v-if="end.length > 0">
<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
</view>
</view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;"> <view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>选择日期</text> <text>选择日期</text>
</view> </view>
...@@ -61,12 +34,12 @@ ...@@ -61,12 +34,12 @@
]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#111':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}"> ]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#111':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}">
<view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view> <view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view>
<view class="select-style" v-if="line == start[0] && index == start[1]">入住</view> <!-- <view class="select-style" v-if="line == start[0] && index == start[1]">入住</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">离店</view> <view class="select-style" v-if="line == end[0] && index == end[1]">离店</view>
<view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0"> <view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index]>0">{{ priceStauts[line][index] }}</view> <view v-if="priceStauts[line][index]>0">{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index] <0">无房</view> <view v-if="priceStauts[line][index] <0">无房</view>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -74,7 +47,7 @@ ...@@ -74,7 +47,7 @@
<view class="submit"> <view class="submit">
<button class="sub-btn" :disabled="!isSub" @click="submit"> <button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text> <text v-if="isSub">确定</text>
<text v-if="!isSub">请选择入住日期</text> <text v-if="!isSub">请选择日期</text>
</button> </button>
</view> </view>
</scroll-view> </scroll-view>
......
...@@ -2,11 +2,10 @@ ...@@ -2,11 +2,10 @@
<view style="height: 100vh; overflow: hidden;width:100vw;"> <view style="height: 100vh; overflow: hidden;width:100vw;">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll"> <scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
<view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}"> <view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}">
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" <view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;z-index: 9; padding-left: 6rpx;">
style="position: fixed;top: 0;left: 0;z-index: 9; padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#000" style="margin-top: 22rpx;"></u-icon> <u-icon name="arrow-left" size="44" color="#000" style="margin-top: 22rpx;"></u-icon>
</view> </view>
<image class="banner-img" :src="imgBaseUrl+details.AllPicList[0].TagPicList[0].Path" mode="aspectFit" @click="goUrl"></image> <image class="banner-img" :src="imgBaseUrl+details.AllPicList[0].TagPicList[0].Path" mode="aspectFit" @click="goUrl('/pages/ticketCoupons/imgList')"></image>
</view> </view>
<view class="ticket-title" :style="[titleStyleFix]"> <view class="ticket-title" :style="[titleStyleFix]">
<view @click="goback"> <view @click="goback">
...@@ -15,8 +14,7 @@ ...@@ -15,8 +14,7 @@
<view style="flex: 1;margin-left: 30rpx; text-align: left;'background-color':'#000'">{{details.Name}}</view> <view style="flex: 1;margin-left: 30rpx; text-align: left;'background-color':'#000'">{{details.Name}}</view>
</view> </view>
<view style="position: relative;z-index: 2;"> <view style="position: relative;z-index: 2;">
<view <view style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;background-color: #FFF;">
style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;height: 900px;background-color: #FFF;">
<view class="baseinfo"> <view class="baseinfo">
<view class="info1"> <view class="info1">
<view class="name"> <view class="name">
...@@ -24,8 +22,7 @@ ...@@ -24,8 +22,7 @@
</view> </view>
<view class="score"> <view class="score">
{{details.ScoreNum}} {{details.ScoreNum}}
<text <text v-if="details.ScoreNum===1||details.ScoreNum===2||details.ScoreNum===3||details.ScoreNum===4||details.ScoreNum===5">.0</text>
v-if="details.ScoreNum===1||details.ScoreNum===2||details.ScoreNum===3||details.ScoreNum===4||details.ScoreNum===5">.0</text>
</view> </view>
</view> </view>
<view class="info2"> <view class="info2">
...@@ -35,12 +32,10 @@ ...@@ -35,12 +32,10 @@
<view class="info3"> <view class="info3">
<view class="tag-box"> <view class="tag-box">
<view v-for="(_item,_index) in details.ScenicSpotTag" :key="_index"> <view v-for="(_item,_index) in details.ScenicSpotTag" :key="_index">
<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" <u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
size="mini" class="tag" v-if="_item"></u-tag>
</view> </view>
<view v-for="(_item,_index) in details.GeographicTag" :key="_index"> <view v-for="(_item,_index) in details.GeographicTag" :key="_index">
<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" <u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
size="mini" class="tag" v-if="_item"></u-tag>
</view> </view>
</view> </view>
<view class="policy-detail"> <view class="policy-detail">
...@@ -75,13 +70,15 @@ ...@@ -75,13 +70,15 @@
明日票 明日票
</view> </view>
<view class="ticket-nav" :class="{'check-ticket-nav':checkTicketNavIndex===3}" @click="changeCheckTicketNavIndex(3)"> <view class="ticket-nav" :class="{'check-ticket-nav':checkTicketNavIndex===3}" @click="changeCheckTicketNavIndex(3)">
其他日期> 其他日期
</view> </view>
<calendar ref="calendar" :insert="false" :selected="calendar" @confirm="confirm"></calendar>
</view> </view>
<view > <view>
<view v-for="(item,index) in details.mealList" :key="index" class="ticket-list-box" <view v-for="(item,index) in details.mealList" :key="index" class="ticket-list-box" :class="{'last-item':index==details.mealList.length-1}">
:class="{'last-item':index==details.mealList.length-1}"
>
<view class="ticket-key"> <view class="ticket-key">
{{item.Key}} {{item.Key}}
</view> </view>
...@@ -94,9 +91,10 @@ ...@@ -94,9 +91,10 @@
<text class="price-pre"></text>{{_item.HPriceB}}<text class="price-nex"></text> <text class="price-pre"></text>{{_item.HPriceB}}<text class="price-nex"></text>
</view> </view>
<view class="tag"> <view class="tag">
<image class="tag-img" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/likeruyuan.png" mode="aspectFit" v-if="_item.IsSameDayBuy==1"></image> <image class="tag-img" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/likeruyuan.png"
mode="aspectFit" v-if="_item.IsSameDayBuy==1"></image>
<view class="tag-item" v-if="_item.SubscribeTime||_item.ChangeTickets"> <view class="tag-item" v-if="_item.SubscribeTime||_item.ChangeTickets">
<text >{{_item.SubscribeTime}}</text> <text>{{_item.SubscribeTime}}</text>
<text class="gap">{{_item.ChangeTickets}}</text> <text class="gap">{{_item.ChangeTickets}}</text>
</view> </view>
</view> </view>
...@@ -113,7 +111,7 @@ ...@@ -113,7 +111,7 @@
<view class="ticket-sell"> <view class="ticket-sell">
<view class="sell">已售 {{_item.SaleCount}}</view> <view class="sell">已售 {{_item.SaleCount}}</view>
<view class="vertical-line"></view> <view class="vertical-line"></view>
<view class="buy-know">购买须知</view> <view class="buy-know" @click="goUrl('/pages/ticketCoupons/buyNotice')">购买须知</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -145,19 +143,22 @@ ...@@ -145,19 +143,22 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 弹出日历 -->
</view> </view>
</template> </template>
<script> <script>
let timer let timer
import calendar from "./components/uni-calendar/uni-calendar.vue"
export default { export default {
components: { components: {
calendar
}, },
data() { data() {
return { return {
ID: 0, ID: 0,
Date: "", //日期
details: {}, details: {},
typeList: [{ typeList: [{
Id: 0, Id: 0,
...@@ -169,16 +170,21 @@ ...@@ -169,16 +170,21 @@
boxOption: 0, boxOption: 0,
navsOption: 0, navsOption: 0,
titleStyle: {}, titleStyle: {},
titleStyleFix:{}, titleStyleFix: {},
active: 0, active: 0,
mainColor: '', mainColor: '',
controls: false, //显示默认控件 controls: false, //显示默认控件
videoContext:'', videoContext: '',
checkTicketNavIndex:1, checkTicketNavIndex: 1,
imgBaseUrl:"" imgBaseUrl: "",
calendar: [{
date:"",
info: ''
}], //日历高亮
} }
}, },
onLoad(options) { onLoad(options) {
...@@ -187,7 +193,7 @@ ...@@ -187,7 +193,7 @@
this.ID = options.id this.ID = options.id
this.getDetail() this.getDetail()
} }
this.imgBaseUrl="http://192.168.20.214:8130" this.imgBaseUrl = "http://192.168.20.214:8130"
uni.getSystemInfo({ uni.getSystemInfo({
success(res) { success(res) {
that.titleStyle = { that.titleStyle = {
...@@ -195,23 +201,35 @@ ...@@ -195,23 +201,35 @@
paddingTop: `${res.statusBarHeight}px`, paddingTop: `${res.statusBarHeight}px`,
opacity: "0%" opacity: "0%"
}; };
that.titleStyleFix={ that.titleStyleFix = {
height: "45px", height: "45px",
position:'fixed', position: 'fixed',
top:'0', top: '0',
left:'0', left: '0',
paddingTop: `${res.statusBarHeight}px`, paddingTop: `${res.statusBarHeight}px`,
'background-color':'#f6f6f6', 'background-color': '#f6f6f6',
opacity: "0%" opacity: "0%"
} }
}, },
}); });
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
let d = new Date();
let today = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
this.Date = today
this.calendar.date=today
}, },
methods: { methods: {
goUrl(){ //选择其他日期门票
confirm(e){
this.Date=e.fulldate
this.calendar[0].date=e.fulldate
this.getDetail()
this.$forceUpdate()
},
goUrl(url) {
uni.navigateTo({ uni.navigateTo({
url: "/pages/ticketCoupons/imgList?id="+ this.ID, url: url + "?id=" + this.ID+"&Date="+this.Date,
}) })
}, },
//获取详情 //获取详情
...@@ -219,7 +237,8 @@ ...@@ -219,7 +237,8 @@
this.request2({ this.request2({
url: '/api/AppletDining/GetTicketCouponsDetails', url: '/api/AppletDining/GetTicketCouponsDetails',
data: { data: {
ID: this.ID ID: this.ID,
BuyDate: this.Date
} }
}, },
res => { res => {
...@@ -245,20 +264,20 @@ ...@@ -245,20 +264,20 @@
changeHandler(i) { changeHandler(i) {
this.active = i; this.active = i;
}, },
previewImage(i) { // previewImage(i) {
console.log(i) // console.log(i)
uni.previewImage({ // uni.previewImage({
urls: this.details.BannerList, // urls: this.details.BannerList,
current: i, // current: i,
longPressActions: { // longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"], // itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {}, // success: function(data) {},
fail: function(err) { // fail: function(err) {
console.log(err.errMsg); // console.log(err.errMsg);
}, // },
}, // },
}); // });
}, // },
scroll(e) { scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5); this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) +
...@@ -293,8 +312,8 @@ ...@@ -293,8 +312,8 @@
goMap(name, lon, lat) { goMap(name, lon, lat) {
console.log(name, lon, lat) console.log(name, lon, lat)
let newLat=parseFloat(lat) let newLat = parseFloat(lat)
let newLon=parseFloat(lon) let newLon = parseFloat(lon)
wx.openLocation({ wx.openLocation({
latitude: newLat, latitude: newLat,
longitude: newLon, longitude: newLon,
...@@ -309,20 +328,39 @@ ...@@ -309,20 +328,39 @@
} }
}) })
}, },
changeCheckTicketNavIndex(i){ // 选择门票日期
this.checkTicketNavIndex=i changeCheckTicketNavIndex(i) {
this.checkTicketNavIndex = i
if (i === 1) {
let d = new Date();
let today = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
this.Date = today
this.getDetail()
this.$forceUpdate()
} else if (i === 2) {
let d = new Date();
let tomorrow = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()+1}`
this.Date = tomorrow
this.getDetail()
this.$forceUpdate()
} else if (i === 3) {
this.$refs.calendar.open();
} }
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.banner-img{ .banner-img {
width: 750rpx; width: 750rpx;
height: 700rpx; height: 700rpx;
// background-color: #ff0; // background-color: #ff0;
} }
.ticket-title { .ticket-title {
line-height: 45px !important; line-height: 45px !important;
font-size: 16px; font-size: 16px;
...@@ -546,6 +584,7 @@ ...@@ -546,6 +584,7 @@
height: 20rpx; height: 20rpx;
background-color: #ECF1F4; background-color: #ECF1F4;
} }
.ticket-title { .ticket-title {
// width: 70rpx; // width: 70rpx;
height: 50rpx; height: 50rpx;
...@@ -557,6 +596,7 @@ ...@@ -557,6 +596,7 @@
// line-height: 44rpx; // line-height: 44rpx;
position: relative; position: relative;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.ticket-title-bg { .ticket-title-bg {
width: 70rpx; width: 70rpx;
height: 10rpx; height: 10rpx;
...@@ -569,16 +609,18 @@ ...@@ -569,16 +609,18 @@
opacity: 0.6; opacity: 0.6;
} }
} }
.ticket-info { .ticket-info {
padding: 50rpx 45rpx; padding: 50rpx 45rpx;
.ticket-navs{ .ticket-navs {
// height: 140rpx; // height: 140rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.ticket-nav{
.ticket-nav {
height: 60rpx; height: 60rpx;
background-color: #ECF1F4; background-color: #ECF1F4;
border-radius: 20rpx; border-radius: 20rpx;
...@@ -591,37 +633,43 @@ ...@@ -591,37 +633,43 @@
padding: 0 30rpx; padding: 0 30rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
.check-ticket-nav{
.check-ticket-nav {
background-color: #111111 !important; background-color: #111111 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
} }
.ticket-list-box{
.ticket-list-box {
margin-bottom: 50rpx; margin-bottom: 50rpx;
.ticket-key{
.ticket-key {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
color: #111111; color: #111111;
margin-bottom: 25rpx; margin-bottom: 25rpx;
} }
.ticket-list{
.ticket-list {
padding: 40rpx 40rpx 0rpx 40rpx; padding: 40rpx 40rpx 0rpx 40rpx;
background-color: #F4F4F4; background-color: #F4F4F4;
.ticket-list-item{
.ticket-list-item {
padding-bottom: 30rpx; padding-bottom: 30rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
border-bottom: 2rpx solid #E4E4E4; border-bottom: 2rpx solid #E4E4E4;
position: relative; position: relative;
.TicketName{ .TicketName {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #111111; color: #111111;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.price{
.price {
font-size: 40rpx; font-size: 40rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
...@@ -629,25 +677,30 @@ ...@@ -629,25 +677,30 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
.price-pre{
.price-pre {
font-size: 22rpx; font-size: 22rpx;
} }
.price-nex{
.price-nex {
font-size: 22rpx; font-size: 22rpx;
color: #919191; color: #919191;
} }
} }
.tag{
.tag {
display: flex; display: flex;
height: 32rpx; height: 32rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.tag-img{
.tag-img {
width: 105rpx; width: 105rpx;
height: 32rpx; height: 32rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 4rpx; border-radius: 4rpx;
} }
.tag-item{
.tag-item {
border: 2rpx solid #DFBE6E; border: 2rpx solid #DFBE6E;
border-radius: 0px 4rpx 4rpx 0px; border-radius: 0px 4rpx 4rpx 0px;
background-color: #F4F4F4; background-color: #F4F4F4;
...@@ -657,19 +710,22 @@ ...@@ -657,19 +710,22 @@
color: #111111; color: #111111;
padding: 0 14rpx; padding: 0 14rpx;
} }
.gap{
.gap {
margin-left: 15rpx; margin-left: 15rpx;
} }
} }
// <!-- 无忧退款 --> // <!-- 无忧退款 -->
.WorryFreeRefund{ .WorryFreeRefund {
font-size: 22rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #DFBE6E; color: #DFBE6E;
margin-bottom: 15rpx; margin-bottom: 15rpx;
} }
.pre-buy{
.pre-buy {
width: 114rpx; width: 114rpx;
height: 60rpx; height: 60rpx;
background: #111111; background: #111111;
...@@ -683,25 +739,29 @@ ...@@ -683,25 +739,29 @@
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 85rpx; top: 85rpx;
right:0rpx; right: 0rpx;
} }
.ticket-sell{
.ticket-sell {
display: flex; display: flex;
align-items: center; align-items: center;
.sell{
.sell {
font-size: 22rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #111111; color: #111111;
// letter-spacing:2rpx // letter-spacing:2rpx
} }
.vertical-line{
.vertical-line {
width: 1rpx; width: 1rpx;
height: 22rpx; height: 22rpx;
margin: 0 15rpx; margin: 0 15rpx;
background-color: #111111; background-color: #111111;
} }
.buy-know{
.buy-know {
font-size: 22rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
...@@ -712,30 +772,36 @@ ...@@ -712,30 +772,36 @@
} }
} }
.last-item{
border-bottom:none !important; .last-item {
border-bottom: none !important;
margin-bottom: 0rpx !important; margin-bottom: 0rpx !important;
} }
} }
.comment-box{
.comment-box {
padding: 50rpx 45rpx; padding: 50rpx 45rpx;
.score-box{
.score-box {
width: 235rpx; width: 235rpx;
display: flex; display: flex;
.score{
.score {
font-size: 60rpx; font-size: 60rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 700; font-weight: 700;
color: #F0C253; color: #F0C253;
line-height: 60rpx; line-height: 60rpx;
// background: linear-gradient(0deg, #F0C253 0%, #FDD679 100%); // background: linear-gradient(0deg, #F0C253 0%, #FDD679 100%);
.score-nex{ .score-nex {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
line-height: 24rpx; line-height: 24rpx;
} }
.gap{
.gap {
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
......
<template> <template>
<view class="img-list"> <view class="img-list">
<view class="img-navs"> <view class="img-navs">
<view v-for="(item,index) in navList" :key="index" class="nav-btn" :class="{'check-nav':index==curNavIndex}"> <view v-for="(item,index) in navList" :key="index" class="nav-btn" :class="{'check-nav':index===curNavIndex,'last-nav':index===navList.length-1}" @click="changeNav(index)">
{{item.key}} {{item.TagName}}
</view> </view>
</view> </view>
<view class="img-list"> <view class="img-list-box">
<view v-for="(item,index) in imgList" :key="item.ID" class="img-list-item" @click=""> <view v-for="(item,index) in dataList.TagPicList" :key="item.ID" class="img-list-item" @click="">
<view class=""> <view class="img-box" @click="previewImage(index,item.Path)" v-if="item.type==='image'">
<image src="" mode=""></image> <image :src="imgBaseUrl+item.Path" mode="aspectFit"></image>
</view>
<view class="img-box" style="position: relative" v-if="item.type==='video'">
<video id="myVideo" :src="imgBaseUrl+item.Path"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
object-fit ='fill'
></video>
<!-- 播放按钮 -->
<view @click="enlarge"
style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -23,12 +39,11 @@ ...@@ -23,12 +39,11 @@
ID:0, ID:0,
navList:[], navList:[],
curNavIndex:0, curNavIndex:0,
imgList:[] dataList:[],
imgBaseUrl:"",
controls:false,//显示默认控件
videoContext:""
} }
},
components: {
}, },
watch:{ watch:{
curNavIndex(val){ curNavIndex(val){
...@@ -41,15 +56,16 @@ ...@@ -41,15 +56,16 @@
}); });
}, },
onLoad(option) { onLoad(options) {
if (options && options.id) { if (options && options.id) {
this.ID = options.id this.ID = options.id
this.getDetail() this.getDetail()
} }
this.imgBaseUrl="http://192.168.20.214:8130"
}, },
methods: { methods: {
//获取详情 //获取详情
getDetail(index) { getDetail(index=0) {
this.request2({ this.request2({
url: '/api/AppletDining/GetTicketCouponsDetails', url: '/api/AppletDining/GetTicketCouponsDetails',
data: { data: {
...@@ -59,13 +75,58 @@ ...@@ -59,13 +75,58 @@
res => { res => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
this.navList = res.data.AllPicList; this.navList = res.data.AllPicList;
this.imgList=res.data.AllPicList[index].TagPicList this.dataList=res.data.AllPicList[index]
console.log(this.imgList) this.dataList.TagPicList.forEach(item=>{
if(item.Path.indexOf('jpg')!==-1||item.Path.indexOf('png')!==-1||item.Path.indexOf('JPEG')!==-1){
item.type='image'
}else if(item.Path.indexOf('mp4')!==-1){
item.type='video'
}
})
console.log(this.dataList)
} }
} }
); );
}, },
changeNav(index){
this.curNavIndex=index
this.getDetail(index)
},
//预览图片
previewImage(i,url) {
uni.previewImage({
urls: [this.imgBaseUrl+url],
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {
console.log(data.errMsg);
},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
})
},
videoControl(e){
if(e.detail.fullScreen===false){
this.videoContext.stop()
this.controls=false
}else{
this.videoContext.play()
this.controls=true
}
console.log(e.detail)
},
} }
} }
</script> </script>
...@@ -74,6 +135,9 @@ ...@@ -74,6 +135,9 @@
.img-list{ .img-list{
.img-navs{ .img-navs{
display: flex; display: flex;
padding: 20rpx 45rpx;
overflow-x: scroll;
overflow-y: hidden;
.nav-btn{ .nav-btn{
width: 230rpx; width: 230rpx;
height: 60rpx; height: 60rpx;
...@@ -83,12 +147,36 @@ ...@@ -83,12 +147,36 @@
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
vertical-align: middle; line-height: 60rpx;
margin-right: 30rpx;
} }
.check-nav{ .check-nav{
background-color: #111111; background-color: #111111;
color: #FFFFFF; color: #FFFFFF;
} }
.last-nav{
margin-right: 0 !important;
}
}
.img-list-box{
padding: 0 45rpx;
.img-list-item{
.img-box{
width: 315rpx;
height: 315rpx;
background-color: #E7E7E7;
border-radius: 20rpx;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
#myVideo{
width: 100%;
height: 100%;
}
}
}
} }
} }
</style> </style>
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
</template> </template>
<script> <script>
import rangeSlider from "./components/range-slider.vue" // import rangeSlider from "./components/range-slider.vue"
import canlendar from "./components/time/index.vue" // import canlendar from "./components/time/index.vue"
import Cascade from "./components/cascade.vue" // import Cascade from "./components/cascade.vue"
export default { export default {
data() { data() {
return { return {
...@@ -153,9 +153,9 @@ ...@@ -153,9 +153,9 @@
} }
}, },
components: { components: {
rangeSlider, // rangeSlider,
canlendar, // canlendar,
Cascade // Cascade
}, },
created() { created() {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
......
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