chenkainan
1 year ago
16 changed files with 4330 additions and 4 deletions
@ -0,0 +1,383 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="list-forms"> |
||||
|
<view class="list-item"> |
||||
|
<view class="list-item-title">姓名</view> |
||||
|
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view> |
||||
|
</view> |
||||
|
<view class="list-item"> |
||||
|
<view class="list-item-title">手机号</view> |
||||
|
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" |
||||
|
/></view> |
||||
|
</view> |
||||
|
<view class="list-item" style="position: relative;"> |
||||
|
<view class="list-item-title">选择地区</view> |
||||
|
<view class="list-item-input3" style="flex: 1;"> |
||||
|
<picker mode="multiSelector" :range="newProvinceDataList" range-key="name" @change="changeArea" @columnchange="pickerColumnchange" |
||||
|
style="position: relative;z-index: 2;"> |
||||
|
<input type="text" readonly style="font-size: 35rpx;position: relative;z-index: -1;" |
||||
|
v-model="citySeld" disabled="true" placeholder="请选择地区"/> |
||||
|
</picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-item"> |
||||
|
<view class="list-item-title">详细地址</view> |
||||
|
<view class="list-item-input"><input type="text" v-model="detailAddr" placeholder="请输入详细地址" /></view> |
||||
|
</view> |
||||
|
<view class="list-item" style="border-bottom: 0;"> |
||||
|
<view class="list-item-title">设为默认</view> |
||||
|
<view class="list-item-switch"> |
||||
|
<switch :checked="idDefault" @change="switchChange" color="#FEB419"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view class="list-item-btn"> |
||||
|
<view class="list-item-post" @click="postSave()">保存</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import District from 'ydui-district/dist/jd_province_city_area_id'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
username: '', |
||||
|
mobile: '', |
||||
|
citySeld: '', |
||||
|
detailAddr: '', |
||||
|
idDefault: false, |
||||
|
title: '新增收货地址', |
||||
|
show: false, |
||||
|
district: District, //数据 |
||||
|
ready: false, |
||||
|
province: null, |
||||
|
city: null, |
||||
|
area: '', |
||||
|
provinceId: null, |
||||
|
cityId: null, |
||||
|
areaId: null, |
||||
|
columns: [], |
||||
|
id: '', |
||||
|
newProvinceDataList:[ |
||||
|
[],[],[] |
||||
|
], |
||||
|
multiIndex: [0, 0, 0], |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
init(option) { |
||||
|
this.id = option.id |
||||
|
if (option.id > 0) { |
||||
|
this.title = '编辑收货地址' |
||||
|
this.getDetail() |
||||
|
} |
||||
|
else { |
||||
|
this.getSeldCityList() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
switchChange(e){ |
||||
|
this.idDefault = e.detail.value |
||||
|
}, |
||||
|
changeArea(e){ |
||||
|
// 数组内的下标 |
||||
|
this.multiIndex = e.detail.value; |
||||
|
this.citySeld = this.newProvinceDataList[0][this.multiIndex[0]].name + this.newProvinceDataList[1][this.multiIndex[1]].name + this.newProvinceDataList[2][this.multiIndex[2]].name |
||||
|
this.provinceId = this.newProvinceDataList[0][this.multiIndex[0]].id |
||||
|
this.cityId = this.newProvinceDataList[1][this.multiIndex[1]].id |
||||
|
this.areaId = this.newProvinceDataList[2][this.multiIndex[2]].id |
||||
|
}, |
||||
|
getSeldCityList() { |
||||
|
if (this.columns.length>0) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let that = this |
||||
|
that.Post({}, '/api/areas/getAll').then(res => { |
||||
|
if (res.code === 1) { |
||||
|
var data = res.data; |
||||
|
var result = {}; |
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
var item = data[i]; |
||||
|
if (item.parent_id == 0) { |
||||
|
continue; |
||||
|
} |
||||
|
//获取省 |
||||
|
if (item.parent_id == "1") { |
||||
|
result[item.id.toString()] = {}; |
||||
|
result[item.id.toString()].children = [] |
||||
|
result[item.id.toString()].name = item.name; |
||||
|
result[item.id.toString()].id = item.id; |
||||
|
} else if (result[item.parent_id.toString()]) { |
||||
|
//填充市 |
||||
|
var t = { |
||||
|
id: item.id, |
||||
|
name: item.name, |
||||
|
children: [] |
||||
|
} |
||||
|
result[item.parent_id.toString()].children.push(t) |
||||
|
} else { |
||||
|
//填充区 |
||||
|
var k = { |
||||
|
id: item.id, |
||||
|
name: item.name |
||||
|
} |
||||
|
for (var j = 0; j < result[item.parent_id.toString().substr(0, 2) + "0000"].children |
||||
|
.length; j++) { |
||||
|
if (result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].id == item |
||||
|
.parent_id) { |
||||
|
result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].children.push(k) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
var r = []; |
||||
|
//将Object转为Array |
||||
|
for (var i in result) { |
||||
|
r.push(result[i]); |
||||
|
} |
||||
|
//将数据赋值给省市区联动选择器 |
||||
|
that.district = r; |
||||
|
let arr = [] |
||||
|
let arr1 = [] |
||||
|
let arr2 = [] |
||||
|
that.district.forEach(item => { |
||||
|
arr.push(item) |
||||
|
}) |
||||
|
that.district[0].children.forEach(item => { |
||||
|
arr1.push(item) |
||||
|
}) |
||||
|
that.district[0].children[0].children.forEach(item => { |
||||
|
arr2.push(item) |
||||
|
}) |
||||
|
that.columns = arr |
||||
|
//控制异步数据 |
||||
|
that.ready = true; |
||||
|
console.log(this.columns) |
||||
|
for(let i=0; i<this.columns.length; i++){ |
||||
|
this.newProvinceDataList[0].push({name:this.columns[i].name,id:this.columns[i].id}); |
||||
|
} |
||||
|
console.log(this.columns[0].children) |
||||
|
for(let i=0; i<this.columns[0].children.length; i++){ |
||||
|
this.newProvinceDataList[1].push({name:this.columns[0].children[i].name,id:this.columns[0].children[i].id}); |
||||
|
} |
||||
|
for(let i=0; i<this.columns[0].children[0].children.length; i++){ |
||||
|
this.newProvinceDataList[2].push({name:this.columns[0].children[0].children[i].name,id:this.columns[0].children[0].children[i].id}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 滑动 |
||||
|
pickerColumnchange(e){ |
||||
|
// 第几列滑动 |
||||
|
// console.log(e.detail.column); |
||||
|
// 第几列滑动的下标 |
||||
|
// console.log(e.detail.value) |
||||
|
// 第一列滑动 |
||||
|
if(e.detail.column === 0){ |
||||
|
this.multiIndex[0] = e.detail.value |
||||
|
// console.log('第一列滑动'); |
||||
|
// this.newProvinceDataList[1] = []; |
||||
|
this.newProvinceDataList[1] = this.columns[this.multiIndex[0]].children.map((item,index)=>{ |
||||
|
// console.log(item) |
||||
|
return item |
||||
|
}) |
||||
|
// console.log(this.multiIndex) |
||||
|
if(this.columns[this.multiIndex[0]].children.length === 1){ |
||||
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[0].children.map((item,index)=>{ |
||||
|
// console.log(item) |
||||
|
return item |
||||
|
}) |
||||
|
}else{ |
||||
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
||||
|
// console.log(item) |
||||
|
return item |
||||
|
}) |
||||
|
} |
||||
|
// 第一列滑动 第二列 和第三列 都变为第一个 |
||||
|
this.multiIndex.splice(1, 1, 0) |
||||
|
this.multiIndex.splice(2, 1, 0) |
||||
|
} |
||||
|
// 第二列滑动 |
||||
|
if(e.detail.column === 1){ |
||||
|
this.multiIndex[1] = e.detail.value |
||||
|
// console.log('第二列滑动'); |
||||
|
// console.log(this.multiIndex) |
||||
|
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
||||
|
// console.log(item) |
||||
|
return item |
||||
|
}) |
||||
|
// 第二列 滑动 第三列 变成第一个 |
||||
|
this.multiIndex.splice(2, 1, 0) |
||||
|
} |
||||
|
// 第三列滑动 |
||||
|
if(e.detail.column === 2){ |
||||
|
this.multiIndex[2] = e.detail.value |
||||
|
// console.log('第三列滑动') |
||||
|
// console.log(this.multiIndex) |
||||
|
} |
||||
|
}, |
||||
|
getDetail() { |
||||
|
this.Post({ |
||||
|
id: this.id |
||||
|
}, "/api/user/contactDetail").then(res => { |
||||
|
res = res.data; |
||||
|
if (res && res.id > 0) { |
||||
|
this.username = res.name |
||||
|
this.mobile = res.tel |
||||
|
this.idDefault = res.is_default == 1 ? true : false |
||||
|
this.provinceId = res.province_id |
||||
|
this.cityId = res.city_id |
||||
|
this.areaId = res.district_id |
||||
|
this.citySeld = res.province_text + '' + res.city_text + '' + res.district_text |
||||
|
this.detailAddr = res.detail_addr; |
||||
|
this.getSeldCityList(); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async postSave() { |
||||
|
this.username = this.username.trim() |
||||
|
this.mobile = this.mobile.trim() |
||||
|
this.detailAddr = this.detailAddr.trim() |
||||
|
if (this.username.length < 1) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入姓名', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (this.username.length > 6) { |
||||
|
uni.showToast({ |
||||
|
title: '姓名最多6个字', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (!this.IsTel(this.mobile)) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入正确的手机号', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (this.citySeld.length < 1) { |
||||
|
uni.showToast({ |
||||
|
title: '请选择地区', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (this.detailAddr.length < 2) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入具体地址', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
let res = await this.Post({ |
||||
|
name: this.username, |
||||
|
tel: this.mobile, |
||||
|
is_default: this.idDefault ? '1' : '0', |
||||
|
province_id: this.provinceId, |
||||
|
city_id: this.cityId, |
||||
|
district_id: this.areaId, |
||||
|
detail_addr: this.detailAddr, |
||||
|
id: this.id || null |
||||
|
},'/api/user/' + (this.id > 0 ? 'edit' : 'add') + 'Consignee') |
||||
|
|
||||
|
if(res.code == '1'){ |
||||
|
// uni.setStorageSync('addressNow',JSON.stringify(res.data)) |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: this.id>0?'编辑成功':'添加成功', |
||||
|
showCancel: false, |
||||
|
}) |
||||
|
}else{ |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: res.msg, |
||||
|
showCancel: false, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return res |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.bg { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.list-forms { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
box-sizing: content-box |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
border-bottom: 1rpx solid #D8D8D8; |
||||
|
padding: 30rpx 0; |
||||
|
height: 60rpx; |
||||
|
align-items: center; |
||||
|
box-sizing: content-box |
||||
|
} |
||||
|
|
||||
|
.list-item-title { |
||||
|
width: 150rpx; |
||||
|
font-size: 31rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.list-item-input { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.list-item-input input { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
border: 0; |
||||
|
background-color: transparent; |
||||
|
line-height: 31rpx; |
||||
|
font-size: 31rpx; |
||||
|
} |
||||
|
|
||||
|
.list-item-input input::placeholder { |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.list-item-switch { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.list-item-btn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.list-item-post { |
||||
|
display: flex; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 36rpx; |
||||
|
width: 697rpx; |
||||
|
height: 73rpx; |
||||
|
background: linear-gradient(90deg, #F84A56, #FF9834); |
||||
|
border-radius: 37rpx; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 725rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"requires": true, |
||||
|
"lockfileVersion": 1, |
||||
|
"dependencies": { |
||||
|
"ydui-district": { |
||||
|
"version": "1.1.0", |
||||
|
"resolved": "https://registry.npmmirror.com/ydui-district/-/ydui-district-1.1.0.tgz", |
||||
|
"integrity": "sha512-MBhvfaR5Gkn6MUmEnrH1A7IFB5igALuDgtIF+gz3dRwNwW9+KOmih7z+xZFfGluMsEbWaT7C3lWOckYsLZQnFg==" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"dependencies": { |
||||
|
"ydui-district": "^1.1.0" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,273 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topImg relative"> |
||||
|
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill"> |
||||
|
<view class="icon-back" :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" > |
||||
|
<uni-icons type="left" size="24" color="#242424"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="goodBox"> |
||||
|
<navigator :url="'/subPackages/ticketBooking/detail?id='+item.id" class="goodItem flex-column" v-for="(item,index) in list" :key="index"> |
||||
|
<view class="left-image flex-shrink-0 relative"> |
||||
|
<image class="left-image " :src="showImg(item.image)" mode="aspectFill"></image> |
||||
|
<view class="collect" @click="like(item)"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240826/81b1f86ff8534db09472853b4c0b6748.png" v-if="item.is_collect"></image> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="contentBox flex-column flex-1 h-1rpx"> |
||||
|
<view class="title text-overflow">{{item.title}}</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="tag-container"> |
||||
|
<view class="tag">盐都精选</view> |
||||
|
<view class="tag">盐都精选</view> |
||||
|
</view> |
||||
|
<view class="priceBox"> |
||||
|
<view class="price">{{showPrice(item.price)}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="distance">距您约602m</view> |
||||
|
<view class="order-btn">立即预定</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
<view class="finished-text" v-if="finished">没有更多数据了</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
systemInfo: { |
||||
|
height:"0px", |
||||
|
textHeight:"0px", |
||||
|
textTop:"0px", |
||||
|
contentTop: '0px', |
||||
|
}, |
||||
|
|
||||
|
list: [], |
||||
|
finished: false, |
||||
|
headImg:null, |
||||
|
navList: [], |
||||
|
actNavIndex: 0, |
||||
|
type_id: 9,//演出票务的景点分类id |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.headImg = 'https://tongli.sz-trip.com/uploads/20240826/8653c32761e01ee683505eddba1ae22b.png' |
||||
|
this.finished = false |
||||
|
this.list = [ |
||||
|
{id:1, title:'景点名称景点名称景点名称 景点名称', |
||||
|
address:'景点名称景点名称景点名称 景点名称景点名称景点名称景点名称 景点名称',price:10000, |
||||
|
image:'https://tongli.sz-trip.com/uploads/20240826/a87488f6225789aa19dbb437671d388d.png', |
||||
|
} |
||||
|
] |
||||
|
// this.getHeadImg('piaowu') |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
let that = this |
||||
|
uni.getSystemInfo({ |
||||
|
success(res) { |
||||
|
console.log(res) |
||||
|
that.systemInfo.height =res.windowHeight+'px' |
||||
|
const menu=uni.getMenuButtonBoundingClientRect() |
||||
|
that.systemInfo.textHeight=menu.height+"px" |
||||
|
that.systemInfo.textTop=menu.top+"px" |
||||
|
that.systemInfo.contentTop = (menu.height + menu.top)+"px" |
||||
|
console.log(that.systemInfo) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 价格显示 |
||||
|
showPrice(price) { |
||||
|
return (price && price != 0) ? (price / 100).toFixed(0) : '0' |
||||
|
}, |
||||
|
getHeadImg(type){ |
||||
|
this.headImg = null |
||||
|
this.Post( |
||||
|
{ |
||||
|
type, |
||||
|
}, |
||||
|
'https://yjdtadmin.sz-trip.com/api/public_service/getKumgangHeadImgList' |
||||
|
).then(res => { |
||||
|
this.headImg = res.data[0].image |
||||
|
}); |
||||
|
}, |
||||
|
// 根据景点标签获取景点列表 |
||||
|
getList(){ |
||||
|
this.Post({ |
||||
|
tag_id: this.navList[this.actNavIndex].id, |
||||
|
offset: this.list.length, |
||||
|
limit: 10 |
||||
|
},'https://yjdtadmin.sz-trip.com/api/scenic/getScenicByTagId').then(res => { |
||||
|
this.list = [...this.list, ...res.data]; |
||||
|
if (res.data.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 收藏按钮 |
||||
|
like(item){ |
||||
|
this.Post({ |
||||
|
type: 2, |
||||
|
id: item.id |
||||
|
}, 'https://yjdtadmin.sz-trip.com/api/scenic/collect').then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({title: res.msg}) |
||||
|
if (item.is_collect == 1) { |
||||
|
item.is_collect = 0 |
||||
|
} else { |
||||
|
item.is_collect = 1 |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.finished) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFangSC; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
} |
||||
|
.topImg{ |
||||
|
width: 100%; |
||||
|
height: 440rpx; |
||||
|
.icon-back{ |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
z-index: 50; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.goodBox{ |
||||
|
width: 100%; |
||||
|
z-index: 2; |
||||
|
padding: 26rpx; |
||||
|
|
||||
|
.goodItem{ |
||||
|
width: 100%; |
||||
|
height: 525rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.38); |
||||
|
margin-bottom: 26rpx; |
||||
|
border-radius: 13rpx; |
||||
|
.left-image{ |
||||
|
width: 100%; |
||||
|
height: 321rpx; |
||||
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
||||
|
|
||||
|
.collect{ |
||||
|
position: absolute; |
||||
|
top: 22rpx; |
||||
|
right: 22rpx; |
||||
|
width: 51rpx; |
||||
|
height: 51rpx; |
||||
|
background: rgba(0,0,0,0.5); |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
image{ |
||||
|
width: 35rpx; |
||||
|
height: 35rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contentBox{ |
||||
|
padding:19rpx 26rpx; |
||||
|
width: 100%; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title{ |
||||
|
width: 100%; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.tag-container{ |
||||
|
display: flex; |
||||
|
.tag{ |
||||
|
background: rgba(205,233,209,0.3); |
||||
|
border-radius: 7rpx 5rpx 5rpx 7rpx; |
||||
|
border: 1px solid rgba(135,205,147,0.3); |
||||
|
|
||||
|
padding: 4rpx 14rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #4E7956; |
||||
|
text-align: center; |
||||
|
margin-right: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.priceBox{ |
||||
|
.price{ |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 33rpx; |
||||
|
color: #F02A2A; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.price::before{ |
||||
|
content: '￥'; |
||||
|
color: #F02A2A; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.price::after{ |
||||
|
content: '起'; |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.distance{ |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.order-btn{ |
||||
|
width: 173rpx; |
||||
|
height: 55rpx; |
||||
|
background: #70B57F; |
||||
|
border-radius: 27rpx 27rpx 27rpx 27rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 29rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
line-height: 55rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,753 @@ |
|||||
|
<template> |
||||
|
<view class="bg" id="bg" v-if="info"> |
||||
|
<view class="swipe-box"> |
||||
|
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular> |
||||
|
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<!-- <view class="swiper-item-num">{{ info.list_images.split(',').length }}张</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<view class="w-full relative" style="padding: 26rpx;top: -52rpx;"> |
||||
|
<view class="price-box "> |
||||
|
<view class="price-zan"> |
||||
|
<view class="price"> |
||||
|
<view class="present-price">{{ info.money / 100 }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="title text-overflowRows">{{ info.title }}</view> |
||||
|
<view class="tag no-scrollbar" v-if="info.goods_new_tag"> |
||||
|
<view class="tag-item" v-for="(item, index) in info.goods_new_tag.split(',')" :key="index"> |
||||
|
{{ item }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="sp-box" @click="openPop"> |
||||
|
<view class="sp-box-left flex-1"> |
||||
|
<view class="flex-shrink-0"> |
||||
|
选择： |
||||
|
</view> |
||||
|
<view class="flex-1"> |
||||
|
{{sku[productIndex].title}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-icons class="flex-shrink-0" style="height: 36rpx;margin-right: 20rpx;" type="right" size="18"></uni-icons> |
||||
|
</view> |
||||
|
|
||||
|
<view class="pro-title">产品简介</view> |
||||
|
<view class="notice" > |
||||
|
<view class="rich-text" v-html="formateRichText(info.special_content)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn-list"> |
||||
|
<view class="left-box"> |
||||
|
<view class="img-box" @click="collect"> |
||||
|
<image |
||||
|
:src="(isCollect?'https://tongli.sz-trip.com/uploads/20240827/47e86bfd7dd5c1b73d58adaa2b35f55a.png': |
||||
|
`https://tongli.sz-trip.com/uploads/20240827/95359568a28b0cae7accc437070eded4.png`)" |
||||
|
mode="aspectFill"></image> |
||||
|
<view class="text"> |
||||
|
收藏 |
||||
|
</view> |
||||
|
</view> |
||||
|
<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
||||
|
<view class="img-box"> |
||||
|
<image src="https://tongli.sz-trip.com/uploads/20240827/ae5fd4482c56e2655ecae6059171aab0.png" |
||||
|
mode="aspectFill"></image> |
||||
|
<view class="text"> |
||||
|
客服 |
||||
|
</view> |
||||
|
</view> |
||||
|
</button> |
||||
|
|
||||
|
</view> |
||||
|
<view class="btn-buy" @click="openPop"> |
||||
|
立即购买 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<uni-popup ref="popup" type="bottom" @change="changPopShow"> |
||||
|
<view class="popup-content" v-if="sku.length>0"> |
||||
|
<view @click="closePopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;"> |
||||
|
<uni-icons type="closeempty" size="24"></uni-icons> |
||||
|
</view> |
||||
|
|
||||
|
<view class="bottom-productImg"> |
||||
|
<img :src="showImg(sku[productIndex].image)" alt=""> |
||||
|
<view class="right-content"> |
||||
|
<view class="bottom-productPrice com-price">{{showPrice(sku[productIndex].money)}}</view> |
||||
|
<view class="bottom-content text-overflow">已选择：{{sku[productIndex].title}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="sp"> |
||||
|
规格 |
||||
|
</view> |
||||
|
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
||||
|
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
||||
|
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
||||
|
@click="changeProduct(botItem,botIndex)"> |
||||
|
{{botItem.title}} |
||||
|
</view> |
||||
|
<view class="noStore-text" v-if="botItem.store==0"> |
||||
|
不可购买 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="buy-num com-flex-tao"> |
||||
|
数量 |
||||
|
<view class="number-btn"> |
||||
|
<view> |
||||
|
<text @click="delNumber">-</text> |
||||
|
</view> |
||||
|
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
||||
|
<view> |
||||
|
<text @click="addNumber">+</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 100rpx;"></view> |
||||
|
<!-- <view class="btn-box"> |
||||
|
<view class="buy-btn" @click="order"> |
||||
|
下一步 |
||||
|
</view> |
||||
|
</view> --> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
info: null, |
||||
|
sku: [], |
||||
|
productIndex: 0, |
||||
|
|
||||
|
isCollect: false, |
||||
|
showLength: 0, |
||||
|
buyNum: 1, |
||||
|
popShow: false |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id; |
||||
|
this.getInfo(); |
||||
|
this.getSpecificationsByGoodsId(); |
||||
|
}, |
||||
|
methods: { |
||||
|
changPopShow (e) { |
||||
|
this.popShow = e.show |
||||
|
}, |
||||
|
// 价格显示 |
||||
|
showPrice(price) { |
||||
|
return (price && price != 0) ? (price / 100).toFixed(2) : '0.00' |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getInfo() { |
||||
|
this.Post({ |
||||
|
goods_id: this.id |
||||
|
}, |
||||
|
'/api/goods/getGoodDetail' |
||||
|
).then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: '商品不存在或已下架', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}, 0) |
||||
|
setTimeout(() => { |
||||
|
this.goBack() |
||||
|
}, 2000) |
||||
|
} |
||||
|
this.info = res.data; |
||||
|
this.isCollect = this.info.is_collect; |
||||
|
}); |
||||
|
}, |
||||
|
getSpecificationsByGoodsId() { |
||||
|
this.Post({ |
||||
|
goods_id: this.id |
||||
|
}, |
||||
|
'/api/goods/getSpecificationsByGoodsId' |
||||
|
).then(res => { |
||||
|
if (res) { |
||||
|
this.sku = res.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({ |
||||
|
type: 3, |
||||
|
id: this.id |
||||
|
}, |
||||
|
'/api/scenic/collect' |
||||
|
).then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({ |
||||
|
title: res.msg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
this.isCollect = !this.isCollect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//数量加减 |
||||
|
addNumber() { |
||||
|
this.buyNum += 1; |
||||
|
}, |
||||
|
delNumber() { |
||||
|
if (this.buyNum <= 1) { |
||||
|
return; |
||||
|
} |
||||
|
this.buyNum -= 1; |
||||
|
}, |
||||
|
closePopup() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
openPop() { |
||||
|
if (!this.popShow) { |
||||
|
this.$refs.popup.open() |
||||
|
} else { |
||||
|
this.order() |
||||
|
} |
||||
|
}, |
||||
|
order(item) { |
||||
|
let goods = this.sku[this.productIndex] |
||||
|
goods.buyNum = this.buyNum |
||||
|
uni.setStorageSync('order', JSON.stringify(goods)); //规格 |
||||
|
uni.setStorageSync('info', JSON.stringify(this.info)); //商品 |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/techan/order' |
||||
|
}); |
||||
|
}, |
||||
|
goUser() { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/user' |
||||
|
}) |
||||
|
}, |
||||
|
changeProduct(item,index) { |
||||
|
if (item.store==0) { |
||||
|
uni.showToast({ |
||||
|
title:"库存不足！", |
||||
|
icon:'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
this.productIndex = index |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
overflow-x: hidden; |
||||
|
background: #f2f4f7; |
||||
|
padding-bottom: 210rpx; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
outline: none; |
||||
|
border-radius: 0; |
||||
|
background-color: transparent; |
||||
|
line-height: inherit; |
||||
|
} |
||||
|
|
||||
|
button::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.swipe-box { |
||||
|
height: 484rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 484rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 484rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 484rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.common-container{ |
||||
|
width: 100%; |
||||
|
padding: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.pro-title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 37rpx; |
||||
|
color: #000000; |
||||
|
margin: 66rpx 0 19rpx 0; |
||||
|
} |
||||
|
|
||||
|
.price-box { |
||||
|
width: 100%; |
||||
|
background: #ffffff; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
padding: 24rpx 30rpx; |
||||
|
|
||||
|
.price-zan { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.price { |
||||
|
display: flex; |
||||
|
|
||||
|
.present-price { |
||||
|
font-size: 42rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(248, 74, 86, 1); |
||||
|
|
||||
|
&:before { |
||||
|
content: '¥'; |
||||
|
display: inline-block; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
&:after { |
||||
|
content: '起'; |
||||
|
display: inline-block; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #8D8D8D; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
margin:24rpx 0 15rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: nowrap; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.tag-item { |
||||
|
border-radius: 7rpx; |
||||
|
border: 1px solid #71B580; |
||||
|
margin-right: 14rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #71B580; |
||||
|
padding: 8rpx 16rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
margin-top: 20rpx; |
||||
|
font-family: PingFang; |
||||
|
font-weight: 500; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.notice { |
||||
|
padding: 35rpx; |
||||
|
width: 100%; |
||||
|
background: #ffffff; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
width: 750rpx; |
||||
|
height: 88rpx; |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0px 1rpx 0px 0px rgba(227, 229, 232, 1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 32rpx; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
|
||||
|
.tab-item { |
||||
|
height: 88rpx; |
||||
|
position: relative; |
||||
|
line-height: 88rpx; |
||||
|
|
||||
|
.tab-text { |
||||
|
font-size: 30rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #393b3e; |
||||
|
} |
||||
|
|
||||
|
.act-text { |
||||
|
font-size: 30rpx; |
||||
|
font-family: PingFangSC-Medium, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.tab-line { |
||||
|
width: 60rpx; |
||||
|
height: 6rpx; |
||||
|
background: #08c59b; |
||||
|
border-radius: 3rpx; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translate(-30rpx, 0); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
width: 100%; |
||||
|
height: 93rpx; |
||||
|
line-height: 93rpx; |
||||
|
text-align: center; |
||||
|
border-top: solid 1rpx rgba(227, 229, 232, 1); |
||||
|
font-size: 26rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #4D526C; |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.xzPopup { |
||||
|
width: 750rpx; |
||||
|
padding: 33rpx 26rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #FFFFFF; |
||||
|
position: relative; |
||||
|
max-height: 70vh; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
view { |
||||
|
padding: 0 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 35rpx; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
position: absolute; |
||||
|
top: 33rpx; |
||||
|
right: 27rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
width: 710rpx; |
||||
|
height: 100rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 20rpx; |
||||
|
padding: 0 20rpx; |
||||
|
|
||||
|
.comment-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
font-size: 36rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-list { |
||||
|
position: fixed; |
||||
|
z-index: 9999; |
||||
|
bottom: 0; |
||||
|
width: 750rpx; |
||||
|
height: 180rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 30rpx 50rpx 0 50rpx; |
||||
|
|
||||
|
.left-box { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.img-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 64rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-buy { |
||||
|
width: 254rpx; |
||||
|
height: 78rpx; |
||||
|
background: #F84A56; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
background-color: white; |
||||
|
padding: 0rpx 39rpx 51rpx 39rpx; |
||||
|
height: auto; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
} |
||||
|
|
||||
|
.bottom-productImg { |
||||
|
display: flex; |
||||
|
margin-bottom: 23rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom-productImg img { |
||||
|
width: 218rpx; |
||||
|
height: 179rpx; |
||||
|
background: #666666; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
|
||||
|
.right-content { |
||||
|
margin: 10rpx 0 0 41rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom-productPrice { |
||||
|
font-size: 40rpx; |
||||
|
color: #FC524B; |
||||
|
|
||||
|
&:before { |
||||
|
content: "￥"; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-content { |
||||
|
width: 331rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.botProduct { |
||||
|
width: 320rpx; |
||||
|
// height: 78rpx; |
||||
|
border-radius: 13rpx; |
||||
|
background-color: #F5F5F5; |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
line-height: 78rpx; |
||||
|
text-align: center; |
||||
|
margin-bottom: 25rpx; |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
padding: 0 40rpx; |
||||
|
} |
||||
|
.noStore{ |
||||
|
background-color: rgba(239, 239, 239, 1); |
||||
|
color: rgba(153, 153, 153, 1); |
||||
|
} |
||||
|
.noStore-text{ |
||||
|
width: 113rpx; |
||||
|
height: 43rpx; |
||||
|
background: #C0C0C0; |
||||
|
border-radius: 7rpx 0rpx 7rpx 0rpx; |
||||
|
text-align: center; |
||||
|
line-height: 43rpx; |
||||
|
position: absolute; |
||||
|
right: -14rpx; |
||||
|
top: -20rpx; |
||||
|
font-size: 23rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.botProducts { |
||||
|
// border: 1rpx solid #00AAFF; |
||||
|
// background-color: rgba(254, 180, 25, 1); |
||||
|
background-image: linear-gradient(135deg, #9EE4FE, #7FD491); |
||||
|
color: rgba(0, 0, 0, 1); |
||||
|
} |
||||
|
|
||||
|
.buy-num { |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
// border-top: 1rpx solid #CCCCCC; |
||||
|
padding: 39rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.buy-num .number-btn { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.buy-num .number-btn view { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 69rpx; |
||||
|
height: 69rpx; |
||||
|
border: 1rpx solid #CCCCCC; |
||||
|
border-radius: 7rpx; |
||||
|
} |
||||
|
|
||||
|
.buy-num .number-btn>view text { |
||||
|
font-size: 46rpx; |
||||
|
} |
||||
|
|
||||
|
.buy-btn { |
||||
|
width: 670rpx; |
||||
|
height: 78rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
background: linear-gradient(90deg, #F84A56, #FF9834); |
||||
|
border-radius: 40rpx; |
||||
|
|
||||
|
font-size: 34rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
width: 750rpx; |
||||
|
height: 151rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sp { |
||||
|
width: 100%; |
||||
|
height: 30rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #060001; |
||||
|
line-height: 30rpx; |
||||
|
border-top: solid 2rpx #ccc; |
||||
|
margin: 60rpx 0; |
||||
|
padding-top: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.sp-box { |
||||
|
width: 100%; |
||||
|
height: 120rpx; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
border-radius: 0 0 12rpx 12rpx; |
||||
|
border-top: solid 2rpx rgba(216, 216, 216, 1); |
||||
|
|
||||
|
.sp-box-left { |
||||
|
display: flex; |
||||
|
margin-left: 38rpx; |
||||
|
align-items: center; |
||||
|
|
||||
|
:first-child { |
||||
|
font-family: PingFang; |
||||
|
font-weight: 500; |
||||
|
font-size: 31rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
:last-child { |
||||
|
width: 403rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
width: 16rpx; |
||||
|
height: 28rpx; |
||||
|
margin-right: 38rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,245 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view :class="['item',selectItem.id==item.id?'active':'']" v-for="(item,index) in list" :key="index" @click="selectPoint(item)"> |
||||
|
<view class="item-point-title"> |
||||
|
<view class="name">{{item.extract_name}}</view> |
||||
|
<view class="addressStr"> |
||||
|
<view class="flex-shrink-0">地址：</view> |
||||
|
<view class="text-overflow">{{item.detail_addr}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="item-point-guide" @click.stop="goMap(item)"> |
||||
|
<view> |
||||
|
<image :src="showImg('/uploads/20240712/aae304f56ee7fd00b71c4524f56c7033.png')" mode="aspectFill" class="mapPoint"></image> |
||||
|
</view> |
||||
|
<view>去这里</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="no-data" v-if="list.length==0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/dongtai/images/user/noAddress.png" mode="aspectFill" class="no-address"></image> |
||||
|
<view class=""> |
||||
|
暂无自提点地址 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn-bottom"> |
||||
|
<view class="addBox" @click.stop="confirmPoint"> |
||||
|
确定 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
load: false, |
||||
|
pending: false, |
||||
|
list: [], |
||||
|
pickupId: null, |
||||
|
goodsId: null, |
||||
|
selectItem: {}, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.pickupId = options.pickupId || null |
||||
|
this.goodsId = options.goodsId |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
this.getList() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
getList() { |
||||
|
if (this.pending) { |
||||
|
return |
||||
|
} |
||||
|
this.pending = true |
||||
|
// this.getLocation() |
||||
|
let param = { |
||||
|
goods_id: this.goodsId, |
||||
|
offset: this.list.length, |
||||
|
limit: 10, |
||||
|
// lon: this.$store.state.user.location.lon || '120.63132', |
||||
|
// lat: this.$store.state.user.location.lat || '31.30227', |
||||
|
} |
||||
|
this.Post(param, "/api/extract/getMerchantExtractListByGoodsIdNew").then(res => { |
||||
|
if (res) { |
||||
|
this.list = [...this.list, ...res.data]; |
||||
|
if (res.data.length < 10) { |
||||
|
this.load = true; |
||||
|
} |
||||
|
if (this.pickupId && Array.isArray(this.list)) { |
||||
|
let selectItem = this.list.find(v=>v.id==this.pickupId) |
||||
|
if (selectItem) { |
||||
|
this.selectItem = selectItem |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.pending = false |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
selectPoint (item) { |
||||
|
this.selectItem = item |
||||
|
}, |
||||
|
|
||||
|
goMap (item) { |
||||
|
uni.openLocation({ |
||||
|
latitude: Number(item.lat), |
||||
|
longitude: Number(item.lon), |
||||
|
name: item.extract_name, |
||||
|
address: item.detail_addr, |
||||
|
success: function () { |
||||
|
console.log('success'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
confirmPoint () { |
||||
|
if(!this.selectItem.id) { |
||||
|
uni.showToast({icon: "none",title: "请先选择自提点"}) |
||||
|
return; |
||||
|
} |
||||
|
// 返回上一个页面并带回selectItem |
||||
|
uni.$emit("updateDataByConnect", {msgType:'updatePickUpPoint',data:this.selectItem}) |
||||
|
uni.navigateBack() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.load) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, 1000); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFang SC; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
position: relative; |
||||
|
background: #F7F7F7; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 170rpx; |
||||
|
} |
||||
|
.flex-shrink-0{ |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
width: 697rpx; |
||||
|
height: 180rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 28rpx; |
||||
|
padding: 26rpx; |
||||
|
padding-right: 0; |
||||
|
display: flex; |
||||
|
|
||||
|
.item-point-title{ |
||||
|
flex: 1; |
||||
|
width: 10rpx; |
||||
|
} |
||||
|
.item-point-guide{ |
||||
|
width:140rpx; |
||||
|
flex-shrink: 0; |
||||
|
border-left: 1px solid #D8D8D8; |
||||
|
color: #FEB419; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.mapPoint{ |
||||
|
width: 45rpx; |
||||
|
height: 49rpx; |
||||
|
} |
||||
|
} |
||||
|
.item.active{ |
||||
|
border: 1px solid #FEB419; |
||||
|
} |
||||
|
.name { |
||||
|
display: flex; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
height: 85rpx; |
||||
|
|
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
.addressStr{ |
||||
|
display: flex; |
||||
|
font-size: 27rpx; |
||||
|
color: #999999; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.no-data { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
view:nth-child(2) { |
||||
|
font-size: 30rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
margin-top: 25rpx; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
} |
||||
|
|
||||
|
padding-bottom: 400rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-bottom{ |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 750rpx; |
||||
|
height: 150rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 30rpx 50rpx 30rpx 50rpx; |
||||
|
|
||||
|
.addBox{ |
||||
|
margin: 0 auto; |
||||
|
width: 697rpx; |
||||
|
height: 80rpx; |
||||
|
background: linear-gradient(90deg, #F84A56, #FF9834); |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 80rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,715 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="swipe-box"> |
||||
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff"> |
||||
|
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
|
||||
|
<view class="detail-container"> |
||||
|
<view class="common-container relative" style="top: -40rpx;"> |
||||
|
<view class="flex-between"> |
||||
|
<view class="title text-overflowRows">{{info.title}}</view> |
||||
|
<view>收藏</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
营业时间 {{info.times_list_info.start}}-{{info.times_list_info.end}} |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="flex flex-1 flex-shrink-0 flex-items-center"> |
||||
|
<img class="address-icon flex-shrink-0" src="https://tongli.sz-trip.com/uploads/20240826/c937c7f6509de9cc2961cb0984d3c526.png"> |
||||
|
<view class="title text-overflowRows"> |
||||
|
景区地址 {{info.address}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view> |
||||
|
<img class="address-icon" src="https://tongli.sz-trip.com/uploads/20240826/c937c7f6509de9cc2961cb0984d3c526.png"> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="common-container"> |
||||
|
<view>门票预定</view> |
||||
|
<view class="scenic-list" v-for="(item, index) in sku" :key="index"> |
||||
|
<view class="list-title text-overflow">{{ item.title }}</view> |
||||
|
<view class="scenic-item com-flex-tao" v-for="(itemSku, indexSku) in item.specifications" :key="indexSku"> |
||||
|
<view class="w-1rpx flex-1"> |
||||
|
<view class="title text-overflow">{{ itemSku.title }}</view> |
||||
|
<view class="tags-box"> |
||||
|
<view class="tags text-overflow" v-if="itemSku.specifications_new_tag"> |
||||
|
<view v-for="(tagSku,tagSkuIndex) in itemSku.specifications_new_tag.split(',').slice(0, 2)" |
||||
|
:key="tagSkuIndex">{{ tagSku }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bottom com-flex-tao "> |
||||
|
<view class="notice" @click="showSkuInfo(item, itemSku)"> |
||||
|
预订须知 > |
||||
|
</view> |
||||
|
<view></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="item-right com-flex-tao flex-shrink-0"> |
||||
|
<view class="price"> |
||||
|
<view>{{showNoPriceNew(itemSku.price)}}</view> |
||||
|
</view> |
||||
|
<view class="btn" @click="changeSku(itemSku, item)"> |
||||
|
预订 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="common-container"> |
||||
|
<view>景点简介</view> |
||||
|
<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 预订须知的弹窗 --> |
||||
|
<uni-popup ref="popupRule" type="bottom" :safe-area="false"> |
||||
|
<view class="popup-content-date" > |
||||
|
<view class="popup-content-title flex"> |
||||
|
<view class="flex-1 w-1rpx text-overflow"> |
||||
|
{{skuInfo.title}} |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule" |
||||
|
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0"> |
||||
|
</view> |
||||
|
<view class="content"> |
||||
|
<view class="detail-content" v-html="skuInfo.info"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 预定弹窗 --> |
||||
|
<uni-popup ref="popup" type="bottom" :safe-area="false"> |
||||
|
<view class="popup-content-date" > |
||||
|
<view class="popup-content-title flex"> |
||||
|
<view class="flex-1 w-1rpx text-overflow"> |
||||
|
{{skuInfo.title}} |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopup" |
||||
|
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0"> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="relative"> |
||||
|
<view class="sku-title">使用日期</view> |
||||
|
<view class="date-content"> |
||||
|
<view :class="['item', item.store>0?'':'disabled',seldDateIndex===index?'active':'']" |
||||
|
v-for="(item,index) in allSeldDate" :key="index" |
||||
|
@click="clickTab(item,index)"> |
||||
|
<view>{{ShowDateDay(new Date(item.date).getDay())}}</view> |
||||
|
<view>{{item.date.slice(-5)}}</view> |
||||
|
<view class="price" v-if="item.store > 0">￥{{showNoPriceNew(item.money)}}</view> |
||||
|
<view v-else>不可定</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dateMore" @click="openCalendar"> |
||||
|
<view>更多日期</view> |
||||
|
<view>></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="timesArr.length > 0 && skuInfo.is_time_stock"> |
||||
|
<view class="sku-title">选择时段</view> |
||||
|
<view class="time-box"> |
||||
|
<view v-for="(item,index) in timesArr" :key="index" |
||||
|
:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == seldTimeIndex}]" |
||||
|
@click="changeTime(item,index)"> |
||||
|
{{ item.start_time }}-{{ item.end_time }} |
||||
|
{{item.stock_number < 10 ? (item.stock_number === -1 ? '不可定' : item.stock_number === 0 ? '无票' : '(余票' + item.stock_number + ')') : '有票'}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="sku-bottom"> |
||||
|
<view class="flex" style="align-items: baseline;"> |
||||
|
合计：<view class="bottom-price">{{allSeldDate[seldDateIndex].money / 100 || 0}}</view> |
||||
|
</view> |
||||
|
<view class="bottom-btn" @click="addBuyCard"> |
||||
|
下一步 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</uni-popup> |
||||
|
|
||||
|
<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" |
||||
|
:date="allSeldDate[seldDateIndex].date" :insert="false" :startDate="calendarParam.startDate" |
||||
|
:endDate="calendarParam.endDate" @confirm="confirmCalendar" :selected="calendarParam.selected"/> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
headImg: null, |
||||
|
|
||||
|
id: null, |
||||
|
|
||||
|
info: {list_images:'', times_list_info: {start:'',end:''}}, |
||||
|
sku: [], |
||||
|
skuInfo: {}, // 预定门票 |
||||
|
selectGoods: {}, // 预定的商品 |
||||
|
minSeldDate: new Date().Format('yyyy-MM-dd'), |
||||
|
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'), |
||||
|
allSeldDate: [], |
||||
|
seldDateIndex: 0, |
||||
|
timesArr: [], |
||||
|
seldTimeIndex: -1, |
||||
|
calendarParam: { |
||||
|
stratDate:'',endDate: '', selected: [] |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
this.headImg = 'https://tongli.sz-trip.com/uploads/20240826/8653c32761e01ee683505eddba1ae22b.png' |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
this.getGoodsList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取景点信息 |
||||
|
getInfo() { |
||||
|
this.Post({id: this.id},'/api/scenic/getScenicById').then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
||||
|
setTimeout(() => {this.goBack()}, 2000) |
||||
|
} |
||||
|
let info = res.data; |
||||
|
try { |
||||
|
info.times_list_info = JSON.parse(info.times_list)[0] |
||||
|
} catch(e) { |
||||
|
console.log(e) |
||||
|
info.times_list_info = {start:'',end:''} |
||||
|
} |
||||
|
this.info = info |
||||
|
console.log(info) |
||||
|
// this.isCollect = this.info.is_collect; |
||||
|
// this.getComment() |
||||
|
}); |
||||
|
}, |
||||
|
// 根据景点id获取商品列表 |
||||
|
getGoodsList(){ |
||||
|
this.Post({ |
||||
|
scenic_id: this.id |
||||
|
},'/api/scenic/getGoodsByScenicId').then(res => { |
||||
|
this.sku = res.data || [] |
||||
|
// res.data.forEach(item => { |
||||
|
// if(item.specifications){ |
||||
|
// item.specifications.forEach(items => { |
||||
|
// this.sku.push(items) |
||||
|
// }) |
||||
|
// } |
||||
|
// }) |
||||
|
//所有规格按照权重降序 |
||||
|
// this.sku = this.maopao(this.sku,'sort'); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
showSkuInfo (itemSku,goods) { |
||||
|
this.skuInfo = itemSku |
||||
|
this.selectGoods = goods |
||||
|
this.openPopRule() |
||||
|
}, |
||||
|
|
||||
|
// 选择列表规格 |
||||
|
changeSku(itemSku,goods) { |
||||
|
this.skuInfo = itemSku |
||||
|
this.selectGoods = goods |
||||
|
// 期票类型 |
||||
|
// if(this.skuInfo.ticket_type == 2) { |
||||
|
// this.addBuyCard() |
||||
|
// }else { |
||||
|
// this.getDays(itemSku,goods) |
||||
|
// } |
||||
|
this.getPriceCal(itemSku,goods) |
||||
|
}, |
||||
|
openCalendar () { |
||||
|
this.calendarParam = { |
||||
|
startDate: (this.allSeldDate.find(v=>v.store>0) || {}).date, |
||||
|
endDate: (this.allSeldDate[this.allSeldDate.findLastIndex(v=>v.store>0)]||{}).date, |
||||
|
selected: this.allSeldDate.filter(v=>v.store>0).map(v=>{ |
||||
|
return { |
||||
|
date: v.date, |
||||
|
info: '￥'+this.showNoPriceNew(v.money), |
||||
|
notNeedDot:true, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
this.$refs.calendar.open(); |
||||
|
}, |
||||
|
|
||||
|
// 获取价格日历列表 |
||||
|
getPriceCal(itemSku,goods) { |
||||
|
this.Post({ |
||||
|
specifications_id: itemSku.id, |
||||
|
goods_id: goods.id, |
||||
|
limit: 60 |
||||
|
}, '/api/goods/getPriceCalendarListBySpecifications').then(res => { |
||||
|
this.allSeldDate = res.data || [] |
||||
|
this.seldDateIndex = this.allSeldDate.findIndex(item => item.store != 0) |
||||
|
this.getTimeStock(this.allSeldDate[this.seldDateIndex].date) |
||||
|
this.openPop() |
||||
|
}) |
||||
|
}, |
||||
|
// 获取规格分时库存 |
||||
|
getTimeStock(date) { |
||||
|
this.Post({ |
||||
|
specifications_id: this.skuInfo.id, |
||||
|
date: date, |
||||
|
token:'2dd9b712-f118-41f6-b3a8-602e4fbb0ce3', |
||||
|
}, '/api/goods/getTimeStock').then(res => { |
||||
|
if (res.data.length > 0) { |
||||
|
this.timesArr = res.data || [] |
||||
|
this.seldTimeIndex = this.timesArr.findIndex(item => item.stock_number > 0) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 选择日期 |
||||
|
clickTab(item, index) { |
||||
|
this.seldDateIndex = index |
||||
|
this.getTimeStock(item.date) |
||||
|
}, |
||||
|
// 选择时段 |
||||
|
changeTime(item, index) { |
||||
|
if(item.store > 0) { |
||||
|
this.seldTimeIndex = index |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
confirmCalendar (val) { |
||||
|
let index = this.allSeldDate.find(v=>v.date == val.fulldate) |
||||
|
if (index) { |
||||
|
this.clickTab({date:val.fulldate},index) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
addBuyCard() { |
||||
|
let that = this; |
||||
|
// 如果是分时，未选择分时 |
||||
|
// if(that.skuInfo.is_time_stock && that.seldTimeIndex < 0) { |
||||
|
// uni.showToast({title:'请选择分时'}) |
||||
|
// return; |
||||
|
// } |
||||
|
|
||||
|
|
||||
|
this.selectGoods.specifications.forEach(v=>{v.buyNum = 0;v.selPeople = []}) |
||||
|
|
||||
|
let orderSkuIndex = this.selectGoods.specifications.findIndex(v=>v.id == that.skuInfo.id) |
||||
|
let item = this.selectGoods.specifications.splice(orderSkuIndex, 1)[0]; // 将购买的数据放在第一位 |
||||
|
item.buyNum = 1 |
||||
|
item.selPeople = [{}] |
||||
|
this.selectGoods.specifications.unshift(item); |
||||
|
|
||||
|
let param = { |
||||
|
sInfo: this.skuInfo, |
||||
|
pInfo: this.selectGoods, |
||||
|
minSeldDate: this.minSeldDate, |
||||
|
maxSeldDate: this.maxSeldDate, |
||||
|
calendarParam: this.calendarParam, |
||||
|
allSeldDate: this.allSeldDate, |
||||
|
seldDateIndex: this.seldDateIndex, |
||||
|
timesArr: this.timesArr, |
||||
|
seldTimeIndex: this.seldTimeIndex, |
||||
|
} |
||||
|
|
||||
|
// that.gotoBuy(pInfo, sInfo); |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/ticketBooking/order', |
||||
|
success() { |
||||
|
uni.$emit("updateDataByConnect", {msgType:'updateTicketBookingOrder',data:param}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
gotoBuy(pInfo, sInfo) { |
||||
|
console.log(pInfo, sInfo); |
||||
|
let that = this; |
||||
|
if ( |
||||
|
(pInfo.flag != 1 || sInfo.flag !== "on" || sInfo.stock <= 0) && |
||||
|
sInfo.is_third_stock == 0 |
||||
|
) |
||||
|
return; |
||||
|
// that.buryPoint("scene_order"); |
||||
|
// that.checkIsCanBuy(that.detail.title, |
||||
|
// function() { |
||||
|
let params = { |
||||
|
pInfo: pInfo, |
||||
|
sInfo: sInfo, |
||||
|
minSeldDate: this.minSeldDate, |
||||
|
maxSeldDate: this.maxSeldDate, |
||||
|
calendarParam: this.calendarParam, |
||||
|
allSeldDate: this.allSeldDate, |
||||
|
seldDateIndex: this.seldDateIndex, |
||||
|
timesArr: this.timesArr, |
||||
|
seldTimeIndex: this.seldTimeIndex, |
||||
|
}; |
||||
|
if (that.detail.allowance) { |
||||
|
sInfo.allowance_data = that.detail.allowance; |
||||
|
let spread_price = Number( |
||||
|
sInfo.allowance_data.discount_limit_price - |
||||
|
sInfo.allowance_data.user_used_price |
||||
|
); |
||||
|
if (spread_price > 0) { |
||||
|
if ( |
||||
|
spread_price < |
||||
|
(sInfo.allowance_data.discount_rate / 100) * |
||||
|
sInfo.price |
||||
|
) |
||||
|
sInfo.allowance_price = spread_price; |
||||
|
else |
||||
|
sInfo.allowance_price = |
||||
|
(sInfo.allowance_data.discount_rate / 100) * |
||||
|
sInfo.price; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// }, |
||||
|
|
||||
|
// ); |
||||
|
}, |
||||
|
|
||||
|
closePopup() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
openPop(){ |
||||
|
this.$refs.popup.open() |
||||
|
}, |
||||
|
closePopupRule() { |
||||
|
this.$refs.popupRule.close() |
||||
|
}, |
||||
|
openPopRule(){ |
||||
|
this.$refs.popupRule.open() |
||||
|
}, |
||||
|
// 价格格式 |
||||
|
showNoPriceNew(price) { |
||||
|
if (price && price > 0) { |
||||
|
return (price / 100) |
||||
|
} else { |
||||
|
return '0' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8F8F8; |
||||
|
} |
||||
|
|
||||
|
.swipe-box { |
||||
|
height: 484rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 484rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 484rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 484rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.detail-container{ |
||||
|
width: 100%; |
||||
|
z-index: 2; |
||||
|
padding: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.common-container{ |
||||
|
background: white; |
||||
|
border-radius: 20rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.address-icon{ |
||||
|
width: 21rpx; |
||||
|
height: 25rpx; |
||||
|
margin-right: 9rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.scenic-list { |
||||
|
/* background: #ffffff; */ |
||||
|
margin-bottom: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .list-title { |
||||
|
font-size: 46rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
padding: 40rpx 28rpx; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item { |
||||
|
/* border-top: 1px solid #d9d9d9; */ |
||||
|
padding: 40rpx; |
||||
|
text-align: left; |
||||
|
background: rgba(11, 137, 142, .06); |
||||
|
border-radius: 20rpx; |
||||
|
margin-bottom: 27rpx; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .title { |
||||
|
font-size: 44rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .tags-box { |
||||
|
margin: 29rpx 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .tags-box .tags { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .tags-box .tags view { |
||||
|
/* padding: 0 0.2rem; */ |
||||
|
font-weight: 400; |
||||
|
font-size: 34rpx; |
||||
|
color: #666666; |
||||
|
line-height: 24rpx; |
||||
|
/* line-height: 0.57rem; */ |
||||
|
/* border: 1px solid #0b898e; |
||||
|
border-radius: 0.23rem; |
||||
|
margin-right: 0.1rem; */ |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .tags-box .tags view::after { |
||||
|
content: '丨' |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .tags-box .tags view:last-of-type:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .item-right { |
||||
|
width: 140rpx; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .item-right .price { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 400; |
||||
|
color: #8d8d8d; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .item-right .price view { |
||||
|
font-size: 50rpx; |
||||
|
font-weight: 500; |
||||
|
color: #d62828; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .item-right .price view:before { |
||||
|
display: inline-block; |
||||
|
content: "￥"; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 400; |
||||
|
color: #d62828; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .item-right .btn { |
||||
|
width: 140rpx; |
||||
|
height: 120rpx; |
||||
|
background: #0B898E; |
||||
|
border-radius: 20rpx; |
||||
|
text-align: center; |
||||
|
line-height: 120rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 46rpx; |
||||
|
color: #FFFFFF; |
||||
|
margin-left: 25rpx; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .bottom .notice { |
||||
|
font-weight: 400; |
||||
|
font-size: 34rpx; |
||||
|
color: #0B898E; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .bottom .buy { |
||||
|
font-size:44rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
color: #ffffff; |
||||
|
width: 264rpx; |
||||
|
height: 98rpx; |
||||
|
line-height: 98rpx; |
||||
|
background: #d62828; |
||||
|
border-radius: 44rpx; |
||||
|
} |
||||
|
|
||||
|
.scenic-list .scenic-item .bottom .buy.disabled { |
||||
|
background-color: #d7d7d7; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.popup-content-date { |
||||
|
background-color: white; |
||||
|
padding: 0rpx 39rpx 51rpx 39rpx; |
||||
|
height: auto; |
||||
|
border-radius: 20rpx 20rpx 0 0 ; |
||||
|
.popup-content-title{ |
||||
|
padding: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.dateMore{ |
||||
|
width: 120rpx; |
||||
|
height: 180rpx; |
||||
|
background: #fff; |
||||
|
font-weight: 400; |
||||
|
font-size: 32rpx; |
||||
|
padding-left: 15rpx; |
||||
|
color: #0b898e; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.date-content{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
padding-right: 140rpx; |
||||
|
|
||||
|
.item{ |
||||
|
min-width: 160rpx; |
||||
|
height: 180rpx; |
||||
|
background: #f5f5f5; |
||||
|
border-radius: 10rpx; |
||||
|
margin-right: 20rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 32rpx; |
||||
|
color: #000; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.item.active{ |
||||
|
background: #0b898e; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.item.disabled{ |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.date-content::-webkit-scrollbar{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.time-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.time-item { |
||||
|
width: 48%; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 10rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 34rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding: 5rpx; |
||||
|
} |
||||
|
.time-active { |
||||
|
background: #0B898E; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.time-disable { |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
.sku-bottom { |
||||
|
width: 100%; |
||||
|
height: 120rpx; |
||||
|
background: #FFFFFF; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
font-weight: 400; |
||||
|
font-size: 36rpx; |
||||
|
color: #393B3E; |
||||
|
line-height: 80rpx; |
||||
|
|
||||
|
.bottom-price { |
||||
|
font-weight: 500; |
||||
|
font-size: 50rpx; |
||||
|
color: #D62828; |
||||
|
} |
||||
|
.bottom-price::before { |
||||
|
font-size: 27rpx; |
||||
|
content: '￥'; |
||||
|
} |
||||
|
|
||||
|
.bottom-btn { |
||||
|
width: 360rpx; |
||||
|
background: #D62828; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
font-size: 42rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,349 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-box" > |
||||
|
<view class="top-left"> |
||||
|
<view class="text-overflow">{{ pInfo.title }}</view> |
||||
|
<view style="margin-top: 20rpx;"> |
||||
|
<view class="left-subtitle" v-if="allSeldDate.length > 0">{{allSeldDate[seldDateIndex].date}} {{ShowDateDay(new Date(allSeldDate[seldDateIndex].date).getDay())}}</view> |
||||
|
<view class="left-subtitle" v-if="timesArr.length > 0">{{ timesArr[seldTimeIndex].start_time }}-{{ timesArr[seldTimeIndex].end_time }} 入园</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view @click="showSkuPopup = true" v-if="this.sInfo.ticket_type != 2">修改 ></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="num-box" v-for="(skuItem,skuIndex) in pInfo.specifications" :key="skuIndex"> |
||||
|
<view style="display: flex;justify-content: space-between;align-items: center;"> |
||||
|
<view class="left-title text-overflow">{{skuItem.title}}</view> |
||||
|
<view class="left-price">{{skuItem.price / 100}}</view> |
||||
|
<view class="num-right"> |
||||
|
<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="delNumber(skuItem)" :style="{color: skuItem.buyNum > 1 ? '#fff': '', backgroundColor: skuItem.buyNum > 1 ? '#0B898E' : ''}">-</view> |
||||
|
<view class="num-span">{{ skuItem.buyNum }}</view> |
||||
|
<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="addNumber(skuItem)" style="color: #fff;background: #0B898E;">+</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="num-subtitle text-overflow" v-if="skuItem.display_tags" @click="showNoticePopup = true"> |
||||
|
<view class="num-span" v-for="(tagSku,tagSkuIndex) in skuItem.display_tags.split(',').slice(0, 2)" :key="tagSkuIndex">{{ tagSku }} |</view> |
||||
|
<view class="num-span">预订须知 ></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="people-box" > |
||||
|
<view class="people-box-sku" v-for="(skuItem,skuIndex) in pInfo.specifications.filter(v=>v.buyNum>=1)" :key="skuIndex"> |
||||
|
<view>{{skuItem.title}}</view> |
||||
|
<view v-for="(person,personIndex) in skuItem.selPeople" :key="personIndex"> |
||||
|
<view v-if="person.id">123</view> |
||||
|
|
||||
|
<view v-else>点击添加出行人信息</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
pInfo: {specifications: []}, // 当前商品 |
||||
|
sInfo: {sku_model: {}}, // 当前门票 |
||||
|
|
||||
|
minSeldDate: new Date().Format('yyyy-MM-dd'), |
||||
|
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'), |
||||
|
calendarParam: { |
||||
|
stratDate:'',endDate: '', selected: [] |
||||
|
}, |
||||
|
allSeldDate: [], |
||||
|
seldDateIndex: 0, |
||||
|
timesArr: [], |
||||
|
seldTimeIndex: 0, |
||||
|
|
||||
|
buyNum: 0 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
// this.getList(); |
||||
|
|
||||
|
uni.$on("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
this.handlePageData() |
||||
|
}, |
||||
|
|
||||
|
onUnload () { |
||||
|
uni.$off("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
methods: { |
||||
|
getDataByConnect(data) { |
||||
|
if (data.msgType == "updateTicketBookingOrder") { |
||||
|
uni.setStorageSync('tempData', JSON.stringify(data.data)); |
||||
|
|
||||
|
// this.pInfo = data.data.pInfo |
||||
|
// this.sInfo = data.data.sInfo |
||||
|
// this.minSeldDate=data.data.minSeldDate |
||||
|
// this.maxSeldDate = data.data.maxSeldDate |
||||
|
// this.calendarParam = data.data.calendarParam |
||||
|
// this.allSeldDate = data.data.allSeldDate |
||||
|
// this.seldDateIndex = data.data.seldDateIndex |
||||
|
// this.timesArr = data.data.timesArr |
||||
|
// this.seldTimeIndex = data.data.seldTimeIndex |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handlePageData () { |
||||
|
let data = uni.getStorageSync('tempData'); |
||||
|
try{ |
||||
|
data = JSON.parse(data) |
||||
|
this.pInfo = data.pInfo |
||||
|
this.sInfo = data.sInfo |
||||
|
this.minSeldDate=data.minSeldDate |
||||
|
this.maxSeldDate = data.maxSeldDate |
||||
|
this.calendarParam = data.calendarParam |
||||
|
this.allSeldDate = data.allSeldDate |
||||
|
this.seldDateIndex = data.seldDateIndex |
||||
|
this.timesArr = data.timesArr |
||||
|
this.seldTimeIndex = data.seldTimeIndex |
||||
|
|
||||
|
} catch(e){ |
||||
|
console.log(e) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 减少数量 |
||||
|
delNumber(skuItem) { |
||||
|
if (skuItem.buyNum <= 0) { |
||||
|
return |
||||
|
} |
||||
|
// if(this.buyNum == this.seldPeople.length) { |
||||
|
// this.allSeldPeople.forEach(item => { |
||||
|
// if(item.id == this.seldPeople[this.seldPeople.length -1].id) { |
||||
|
// item.is_seld = false |
||||
|
// item.selected = false |
||||
|
// } |
||||
|
// }) |
||||
|
// this.seldPeople.pop() |
||||
|
// } |
||||
|
skuItem.buyNum -= 1 |
||||
|
skuItem.selPeople.pop() |
||||
|
// this.removeSeldCoupon() |
||||
|
}, |
||||
|
// 增加数量 |
||||
|
addNumber(skuItem) { |
||||
|
skuItem.buyNum += 1 |
||||
|
// if(this.max_num && this.buyNum > this.max_num){ |
||||
|
// this.buyNum = this.max_num |
||||
|
// this.$toast("本产品单笔限购"+this.max_num+"份") |
||||
|
// } |
||||
|
if (Array.isArray(skuItem.selPeople)) { |
||||
|
skuItem.selPeople.push({}) |
||||
|
} else { |
||||
|
skuItem.selPeople = [{}] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 选择时段 |
||||
|
changeTime(item, index) { |
||||
|
if(item.stock_number > 0) { |
||||
|
this.seldTimeIndex = index |
||||
|
} |
||||
|
}, |
||||
|
// 选择日期 |
||||
|
clickTab(item, index) { |
||||
|
this.seldDateIndex = index |
||||
|
this.getTimes() |
||||
|
}, |
||||
|
confirmCalendar (val) { |
||||
|
let index = this.allSeldDate.find(v=>v.date == val.fulldate) |
||||
|
if (index) { |
||||
|
this.clickTab({},index) |
||||
|
} |
||||
|
}, |
||||
|
// 获取价格日历 |
||||
|
getDays() { |
||||
|
let that = this |
||||
|
that.Post({ |
||||
|
url: '', |
||||
|
start_date: that.minSeldDate, |
||||
|
end_date: that.maxSeldDate, |
||||
|
sku_id: that.skuInfo.id |
||||
|
},'https://api.cloud.sz-trip.com/api/product/product_date_price').then(function (result) { |
||||
|
let res = result.data |
||||
|
if (res) { |
||||
|
that.allSeldDate = res |
||||
|
// 初始化选择项目 |
||||
|
for (let i = 0; i < that.allSeldDate.length; i++) { |
||||
|
if (that.allSeldDate[i].stock > 0) { |
||||
|
that.seldDateIndex = i |
||||
|
break; |
||||
|
} |
||||
|
// that.allSeldDate[i].price = that.sInfo.price |
||||
|
} |
||||
|
that.openPop() |
||||
|
that.getTimes() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getTimes() { |
||||
|
let that = this |
||||
|
// 判断是否是分时的，不是就不需要去请求了的 |
||||
|
if (!that.skuInfo.sku_model.is_time_stock) { |
||||
|
return |
||||
|
} |
||||
|
if (that.seldDateIndex < 0) { |
||||
|
return; |
||||
|
} |
||||
|
that.seldTimeIndex = -1 |
||||
|
that.Post({ |
||||
|
url: '', |
||||
|
date: that.allSeldDate[that.seldDateIndex].date, |
||||
|
sku_id: that.allSeldDate[that.seldDateIndex].sku_id ? that.allSeldDate[that.seldDateIndex].sku_id : that.skuInfo.id |
||||
|
},'https://api.cloud.sz-trip.com/api/product/product_timestock_price').then(function (result) { |
||||
|
let res = result.data |
||||
|
if (res) { |
||||
|
that.timesArr = res |
||||
|
for (let i = 0; i < that.timesArr.length; i++) { |
||||
|
if (that.timesArr[i].stock_number > 0) { |
||||
|
that.seldTimeIndex = i |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
padding: 20rpx; |
||||
|
background-color: rgb(247, 247, 247); |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
width: 100%; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 18rpx; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 36rpx; |
||||
|
color: #0B898E; |
||||
|
|
||||
|
.top-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
font-weight: bold; |
||||
|
font-size: 45rpx; |
||||
|
color: #000000; |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
|
||||
|
.left-subtitle { |
||||
|
font-weight: 400; |
||||
|
font-size: 36rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.num-box { |
||||
|
width: 100%; |
||||
|
// height: 3.22rem; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 18rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-direction: column; |
||||
|
margin: 20rpx 0; |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.num-left { |
||||
|
width: 100%; |
||||
|
// padding: .5rem 0 .6rem .32rem; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
color: #666666; |
||||
|
|
||||
|
.left-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 45rpx; |
||||
|
color: #000000; |
||||
|
width: 450rpx; |
||||
|
} |
||||
|
|
||||
|
.left-price { |
||||
|
font-weight: 500; |
||||
|
font-size: 45rpx; |
||||
|
color: #D62828; |
||||
|
} |
||||
|
.left-price::before { |
||||
|
font-size: 27rpx; |
||||
|
content: '￥'; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.num-subtitle { |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
color: #0B898E; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
} |
||||
|
.num-right { |
||||
|
font-weight: 500; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
display: flex; |
||||
|
text-align: center; |
||||
|
|
||||
|
.num-span { |
||||
|
width: 90rpx; |
||||
|
line-height: 63rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-num { |
||||
|
width: 63rpx; |
||||
|
height: 63rpx; |
||||
|
line-height: 63rpx; |
||||
|
background: rgba(135,205,147,0); |
||||
|
border-radius: 50%; |
||||
|
border: 1px solid #999999; |
||||
|
font-weight: 500; |
||||
|
font-size: 45rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.people-box{ |
||||
|
width: 100%; |
||||
|
// height: 3.22rem; |
||||
|
|
||||
|
|
||||
|
.people-box-sku{ |
||||
|
width: 100%; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 18rpx; |
||||
|
// display: flex; |
||||
|
// justify-content: space-between; |
||||
|
margin: 20rpx 0; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topImg relative"> |
||||
|
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill"> |
||||
|
<view class="icon-back" :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" > |
||||
|
<uni-icons type="left" size="24" color="#242424"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="goodBox"> |
||||
|
<navigator :url="'/subPackages/ticketBooking/detail?id='+item.id" class="goodItem" v-for="(item,index) in list" :key="index"> |
||||
|
<image class="left-image" :src="showImg(item.image||'')" mode="aspectFill"></image> |
||||
|
<view class="contentBox flex-column flex-1 w-1rpx"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="subtitle flex"> |
||||
|
<img class="address-icon flex-shrink-0" src="https://tongli.sz-trip.com/uploads/20240826/c937c7f6509de9cc2961cb0984d3c526.png"> |
||||
|
<view class="text-overflow">{{item.address}}</view> |
||||
|
</view> |
||||
|
<view class="priceBox"> |
||||
|
<view class="price">{{showPrice(item.price)}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
<view class="finished-text" v-if="finished">没有更多数据了</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
systemInfo: { |
||||
|
height:"0px", |
||||
|
textHeight:"0px", |
||||
|
textTop:"0px", |
||||
|
contentTop: '0px', |
||||
|
}, |
||||
|
|
||||
|
list: [], |
||||
|
finished: false, |
||||
|
headImg:null, |
||||
|
|
||||
|
type_id: 10,//演出票务的景点分类id |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.headImg = 'https://tongli.sz-trip.com/uploads/20240826/a87488f6225789aa19dbb437671d388d.png' |
||||
|
this.finished = false |
||||
|
this.getList() |
||||
|
// this.getHeadImg('piaowu') |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
let that = this |
||||
|
uni.getSystemInfo({ |
||||
|
success(res) { |
||||
|
console.log(res) |
||||
|
that.systemInfo.height =res.windowHeight+'px' |
||||
|
const menu=uni.getMenuButtonBoundingClientRect() |
||||
|
that.systemInfo.textHeight=menu.height+"px" |
||||
|
that.systemInfo.textTop=menu.top+"px" |
||||
|
that.systemInfo.contentTop = (menu.height + menu.top)+"px" |
||||
|
console.log(that.systemInfo) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 价格显示 |
||||
|
showPrice(price) { |
||||
|
return (price && price != 0) ? (price / 100).toFixed(0) : '0' |
||||
|
}, |
||||
|
getHeadImg(type){ |
||||
|
this.headImg = null |
||||
|
this.Post( |
||||
|
{ |
||||
|
type, |
||||
|
}, |
||||
|
'https://yjdtadmin.sz-trip.com/api/public_service/getKumgangHeadImgList' |
||||
|
).then(res => { |
||||
|
this.headImg = res.data[0].image |
||||
|
}); |
||||
|
}, |
||||
|
// 根据景点标签获取景点列表 |
||||
|
getList(){ |
||||
|
this.Post({scenic_type_id: this.type_id,offset: this.list.length,limit: 10}, |
||||
|
'api/Scenic/getScenicByType').then(res => { |
||||
|
this.list = [...this.list, ...res.data]; |
||||
|
if (res.data.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.finished) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFangSC; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
} |
||||
|
.topImg{ |
||||
|
width: 100%; |
||||
|
height: 440rpx; |
||||
|
.icon-back{ |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
z-index: 50; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.goodBox{ |
||||
|
width: 100%; |
||||
|
z-index: 2; |
||||
|
padding: 26rpx; |
||||
|
|
||||
|
.goodItem{ |
||||
|
width: 100%; |
||||
|
height: 226rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.38); |
||||
|
margin-bottom: 26rpx; |
||||
|
display: flex; |
||||
|
border-radius: 13rpx; |
||||
|
.left-image{ |
||||
|
width: 280rpx; |
||||
|
height: 226rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
|
||||
|
.contentBox{ |
||||
|
padding: 20rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title{ |
||||
|
width: 100%; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.subtitle{ |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #666666; |
||||
|
align-items: center; |
||||
|
|
||||
|
.address-icon{ |
||||
|
width: 21rpx; |
||||
|
height: 25rpx; |
||||
|
margin-right: 9rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.priceBox{ |
||||
|
.price{ |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 33rpx; |
||||
|
color: #F02A2A; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.price::before{ |
||||
|
content: '￥'; |
||||
|
color: #F02A2A; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.price::after{ |
||||
|
content: '起'; |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue