chenkainan
11 months ago
13 changed files with 4411 additions and 32 deletions
@ -0,0 +1,270 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<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"> |
|||
<picker mode="selector" :range="idcardTypeList" range-key="title" @change="changeIdType"> |
|||
<input type="text" readonly style="font-size: 35rpx;position: relative;" |
|||
v-model="idcardTypeValue" 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="idNumber" 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"> |
|||
<view class="list-item-title">设为默认</view> |
|||
<view class="list-item-switch" style="margin-left: auto;"> |
|||
<switch :checked="idDefault" @change="switchChange" color="#96684F"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="btn" @click="submit">保存</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
username: '', |
|||
mobile: '', |
|||
idNumber: '', |
|||
idcardTypeValue: '身份证', |
|||
show: false, |
|||
idcardTypeList: [], |
|||
document_type: 'DAM01001', |
|||
id: '', |
|||
type: '', |
|||
idDefault: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
init (data) { |
|||
|
|||
this.username = '' |
|||
this.mobile= '' |
|||
this.idNumber= '' |
|||
this.idcardTypeValue= '身份证' |
|||
this.show= false |
|||
this.idcardTypeList= [] |
|||
this.document_type= 'DAM01001' |
|||
this.id= '' |
|||
this.type='' |
|||
this.idDefault= false |
|||
|
|||
this.type = 'add' |
|||
// this.getIdcardTypeList() |
|||
if (data && data.id) { |
|||
this.id = data.id |
|||
this.type = 'edit' |
|||
this.getDetail() |
|||
} |
|||
}, |
|||
switchChange(e){ |
|||
this.idDefault = e.detail.value |
|||
}, |
|||
|
|||
getDetail() { |
|||
this.Post({ |
|||
id: this.id |
|||
}, '/api/user/contactDetail').then(res => { |
|||
if (res.code === 1) { |
|||
res = res.data |
|||
if (res && res.id > 0) { |
|||
this.username = res.name |
|||
this.mobile = res.tel |
|||
this.idNumber = res.id_number |
|||
this.idDefault = res.is_default == 1 ? true : false |
|||
this.document_type = res.document_type |
|||
this.idcardTypeValue = res.document_type_text |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
//获取证件类型 |
|||
getIdcardTypeList() { |
|||
this.Post({}, '/api/user/getIdcardTypeList').then(res => { |
|||
this.idcardTypeList = res.data |
|||
}) |
|||
}, |
|||
// 选择证件类型 |
|||
changeIdType(e) { |
|||
this.idcardTypeValue = this.idcardTypeList[e.detail.value].title |
|||
this.document_type = this.idcardTypeList[e.detail.value].document_type |
|||
}, |
|||
// 提交 |
|||
async submit() { |
|||
this.username = this.username.trim() |
|||
this.mobile = this.mobile.trim() |
|||
this.idNumber = this.idNumber.trim() |
|||
if (this.username.length < 1) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.idcardTypeValue == '身份证') { |
|||
if (!this.idCardNumber(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的身份证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '护照') { |
|||
if (!this.passportValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的护照', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '台胞证') { |
|||
if (!this.taiwanValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的台胞证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '港澳通行证') { |
|||
if (!this.gangaoValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的港澳通行证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '外国人永久居留证') { |
|||
if (!this.foreignerValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的外国人永久居留证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '军官证') { |
|||
if (!this.officerValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的军官证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
let res = await this.Post({ |
|||
id: this.type == 'edit'?this.id:'', |
|||
id_number: this.idNumber, |
|||
name: this.username, |
|||
tel: this.mobile, |
|||
document_type: this.document_type, |
|||
is_default: this.idDefault ? '1' : '0', |
|||
}, this.type=='edit'?'/api/user/editContact':'/api/user/addContact') |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '操作成功', |
|||
showCancel: false, |
|||
}) |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
}) |
|||
} |
|||
return {...res,data: {id: this.id}} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.content { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.list-forms { |
|||
padding: 0 24rpx; |
|||
background: #fff; |
|||
border-radius: 13rpx; |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 30rpx 0; |
|||
height: 60rpx; |
|||
box-sizing: content-box; |
|||
align-items: center; |
|||
|
|||
.list-item-title { |
|||
font-size: 34rpx; |
|||
margin-right: 20rpx; |
|||
width: 200rpx; |
|||
} |
|||
|
|||
.list-item-input { |
|||
flex: 1; |
|||
|
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
background-color: transparent; |
|||
line-height: 34rpx; |
|||
font-size: 34rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
input::placeholder { |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
.list-item:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #515150; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
bottom: 53rpx; |
|||
left: 27rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,299 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots="true" indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="swiperChange"> |
|||
<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="top-box"> |
|||
<view class="top-price"> |
|||
<span>{{info.low_money / 100}}</span> |
|||
参团价 |
|||
</view> |
|||
<view class="top-title">{{info.title}}</view> |
|||
<view class="top-subtitle">{{info.subtitle}}</view> |
|||
<view class="top-tags"> |
|||
<view class="top-tag" v-for="(item,index) in info.goods_new_tag" :key="index"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="scroll-all-box" id="menus" v-if="info"> |
|||
<view :class="'scroll-menus' + (fixed ? ' fixed-menus' : '')"> |
|||
<view :class="'scroll-menu-item' + (type == 1 ? ' active' : '')" @click="changeMenu(1)">产品详情</view> |
|||
<view :class="'scroll-menu-item' + (type == 2 ? ' active' : '')" @click="changeMenu(2)">预定须知</view> |
|||
</view> |
|||
<view style="height: 85rpx" v-if="fixed"></view> |
|||
<view class="info-box" id="box1"> |
|||
<view class="info-title">产品详情</view> |
|||
<view class="info-content" v-html="formateRichText(info.special_content)"></view> |
|||
</view> |
|||
<view class="info-box" id="box2"> |
|||
<view class="info-title">预定须知</view> |
|||
<view class="info-content" v-html="formateRichText(info.price_content)"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<footer class="flex-center"> |
|||
<view @click="order">立即购买</view> |
|||
</footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const device = uni.getSystemInfoSync(); |
|||
const ratio = device.windowWidth / 750; |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
swiperCurrent: 1, |
|||
info: {list_images:''}, |
|||
top: 0, |
|||
fixed: false, |
|||
type: 0, |
|||
down: false, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
let rect = uni.getMenuButtonBoundingClientRect(); |
|||
this.top = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; |
|||
}, |
|||
onPageScroll(e){ |
|||
let query = uni.createSelectorQuery() |
|||
query.select("#menus").boundingClientRect(res => { |
|||
if(res.top < 0){ |
|||
this.fixed = true |
|||
}else{ |
|||
this.fixed = false |
|||
} |
|||
}).exec() |
|||
|
|||
if (this.down) { |
|||
return |
|||
}else{ |
|||
this.down = true |
|||
for(let i = 1; i < 3; i++) { |
|||
query.select("#box" + i).boundingClientRect(res => { |
|||
if(res.top < 0) { |
|||
this.type = i |
|||
} |
|||
}).exec() |
|||
} |
|||
this.down = false |
|||
} |
|||
}, |
|||
methods: { |
|||
// 去下单 |
|||
order() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/line/order?id=" + this.info.id |
|||
}) |
|||
}, |
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current+1 |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 3); |
|||
this.info = res.data; |
|||
}); |
|||
}, |
|||
changeMenu(e) { |
|||
this.down = true |
|||
let index = e; |
|||
let that = this |
|||
const query = uni.createSelectorQuery(); //创建节点查询器 |
|||
query.select('#box' + index).boundingClientRect(); //选择toViewid获取位置信息 |
|||
query.selectViewport().scrollOffset(); //获取页面查询位置的 |
|||
query.exec(function (res) { |
|||
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.top; |
|||
uni.pageScrollTo({ |
|||
scrollTop: scrollTop + 4, |
|||
duration: 0 |
|||
}); |
|||
that.type = index |
|||
setTimeout(()=>{ |
|||
that.down = false |
|||
},1000) |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.swiper { |
|||
height: 413rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 413rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 413rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.top-box { |
|||
padding: 26rpx; |
|||
border-bottom: 20rpx solid #F9F5F0; |
|||
|
|||
.top-price { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #919191; |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #DC2525; |
|||
margin-right: 12rpx; |
|||
} |
|||
span::before { |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
content: '￥'; |
|||
} |
|||
span::after { |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
content: '/人'; |
|||
} |
|||
} |
|||
|
|||
.top-title { |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #333333; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.top-subtitle { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.top-tags { |
|||
display: flex; |
|||
margin-top: 20rpx; |
|||
|
|||
.top-tag { |
|||
padding: 0 10rpx; |
|||
line-height: 35rpx; |
|||
border-radius: 7rpx; |
|||
border: 1rpx solid #96684F; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #96684F; |
|||
margin-right: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.scroll-all-box { |
|||
margin: 24rpx 0; |
|||
|
|||
.scroll-menus { |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
height: 84rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
|
|||
.scroll-menu-item { |
|||
position: relative; |
|||
line-height: 84rpx; |
|||
} |
|||
|
|||
.scroll-menu-item.active::after { |
|||
content: '1'; |
|||
font-size: 0; |
|||
display: block; |
|||
position: absolute; |
|||
width: 53rpx; |
|||
height: 5rpx; |
|||
background: #96684F; |
|||
left: 50%; |
|||
margin-left: -26.5rpx; |
|||
bottom: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.fixed-menus { |
|||
position: fixed; |
|||
top: 80rpx; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.info-box { |
|||
padding: 42rpx 26rpx 0; |
|||
|
|||
.info-title { |
|||
font-size: 33rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
|
|||
.info-content { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 22rpx 14rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
footer { |
|||
position: fixed; |
|||
width: 750rpx; |
|||
height: 153rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25); |
|||
left: 0; |
|||
bottom: 0; |
|||
|
|||
view { |
|||
width: 697rpx; |
|||
line-height: 73rpx; |
|||
text-align: center; |
|||
background: #DC2525; |
|||
border-radius: 11rpx; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<navigator :url="'/subPackages/line/detail?id=' + item.id" v-for="(item,index) in list" :key="index" class="item"> |
|||
<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image> |
|||
<view class="item-content flex-column"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="tags"> |
|||
<view v-for="(tagItem,tagIndex) in item.goods_new_tag.split(',').slice(0,3)" :key="tagIndex" class="tag"> |
|||
{{tagItem}} |
|||
</view> |
|||
</view> |
|||
<view class="flex-between"> |
|||
<view class="price">{{item.money / 100}}</view> |
|||
<view class="btn">预订</view> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [] |
|||
} |
|||
}, |
|||
onReady() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.Post({ |
|||
type_id: 1, |
|||
offset: 0, |
|||
limit: 100 |
|||
},'/api/goods/getGoodsByType').then(res => { |
|||
this.list = res.data |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #F9F5F0; |
|||
padding: 27rpx 26rpx 100rpx; |
|||
} |
|||
|
|||
.item { |
|||
margin-bottom: 26rpx; |
|||
height: 547rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
border: 1rpx solid #96684F; |
|||
padding: 21rpx; |
|||
|
|||
.item-img { |
|||
width: 653rpx; |
|||
height: 319rpx; |
|||
} |
|||
|
|||
.item-content { |
|||
height: 178rpx; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #333333; |
|||
} |
|||
.tags { |
|||
display: flex; |
|||
|
|||
.tag { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #96684F; |
|||
} |
|||
.tag:not(:first-child)::before { |
|||
content: '丨'; |
|||
} |
|||
} |
|||
|
|||
.price { |
|||
font-weight: bold; |
|||
font-size: 34rpx; |
|||
color: #DC2525; |
|||
} |
|||
.price::before { |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
content: '￥'; |
|||
} |
|||
.price::after { |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
content: '起'; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.btn { |
|||
width: 133.33rpx; |
|||
line-height: 53.33rpx; |
|||
text-align: center; |
|||
background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/btnBg.png'); |
|||
background-size: 100% 100%; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,583 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="date-all-box"> |
|||
<view class="month-box"> |
|||
<view @click="changeMonth(index)" :class="'month-item' + (monthIndex == index ? ' active' : '')" |
|||
v-for="(item, index) in months" :key="index" v-if="emptyList[index].isShow"> |
|||
{{ item }}月 |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="day-header"> |
|||
<view class="day-header-item">日</view> |
|||
<view class="day-header-item">一</view> |
|||
<view class="day-header-item">二</view> |
|||
<view class="day-header-item">三</view> |
|||
<view class="day-header-item">四</view> |
|||
<view class="day-header-item">五</view> |
|||
<view class="day-header-item">六</view> |
|||
</view> |
|||
|
|||
<view class="day-box" v-if="selectDate"> |
|||
<view class="day-item" v-for="(item, index) in emptyList[monthIndex].empty" :key="index"> |
|||
<view class="date-item-in"> |
|||
<view class="date-num"></view> |
|||
<view class="date-price-place"></view> |
|||
</view> |
|||
</view> |
|||
<view |
|||
:class="'day-item' + (selectDate['selectMonth'] == months[monthIndex] && selectDate['selectDate'] == index + 1 ? ' active' : '')" |
|||
v-for="(item, index) in emptyList[monthIndex].days" :key="index" |
|||
> |
|||
<view class="date-item-in" @click="selectDateFun(index + 1)"> |
|||
<view |
|||
:class=" |
|||
'date-num' + (prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].product_price != null ? ' active' : '') |
|||
" |
|||
> |
|||
{{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }} |
|||
</view> |
|||
<view |
|||
class="price" |
|||
v-if=" |
|||
prices[months[monthIndex] + '-' + (index + 1)] && |
|||
prices[months[monthIndex] + '-' + (index + 1)].product_price != null && |
|||
prices[months[monthIndex] + '-' + (index + 1)].store != null |
|||
" |
|||
> |
|||
￥{{ prices[months[monthIndex] + '-' + (index + 1)].m_price / 100 }} |
|||
</view> |
|||
<view class="date-price-place" v-else-if="prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].store == 0"> |
|||
售罄 |
|||
</view> |
|||
<view class="date-price-place" v-else></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="box" v-for="(item, index) in sku" :key="index"> |
|||
<view class="box-top"> |
|||
<view class="box-title">{{ item.title }}</view> |
|||
<view class="box-tip text-overflow">{{ item.sku_type_info }}</view> |
|||
<view :class="'iconfont' + (nums[index] == 0 ? ' disable' : '')" @click="minus(index)">-</view> |
|||
<view class="number">{{ nums[index] }}</view> |
|||
<view :class="'iconfont' + (nums[index] == selectDate['info'][index].store ? ' disable' : '')" @click="add(index)">+</view> |
|||
</view> |
|||
|
|||
<view class="single-price" v-if="selectDate">{{ selectDate['info'][index].money / 100 }}</view> |
|||
</view> |
|||
|
|||
<view class="fixed-bottom"> |
|||
<text class="fixed-text">合计：</text> |
|||
<view class="price">{{ totalPrice() / 100 }}</view> |
|||
<view class="btn" @tap="order">下一步</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: '', |
|||
months: [], |
|||
monthIndex: 0, |
|||
productInfo: null, |
|||
sku: [], |
|||
nums: [], |
|||
selectDate: null, |
|||
price: 0, |
|||
prices: {}, |
|||
emptyList: [ |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
}, |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
}, |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
}, |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
}, |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
}, |
|||
{ |
|||
empty: 0, |
|||
days: 0, |
|||
isShow: false |
|||
} |
|||
], |
|||
years: [] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.id = option.id |
|||
this.getSku() |
|||
this.initDate() |
|||
}, |
|||
methods: { |
|||
// 下一步 |
|||
order() { |
|||
let selectDate = this.selectDate; |
|||
let sku = this.sku; |
|||
let nums = this.nums; |
|||
let allNum = 0; |
|||
if (!selectDate) { |
|||
uni.showToast({ |
|||
title: '请先选择日期', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
sku.map((item, index) => { |
|||
item.num = nums[index]; |
|||
allNum = allNum + nums[index]; |
|||
item.price = selectDate.info[index].money; |
|||
}); |
|||
if (allNum == 0) { |
|||
uni.showToast({ |
|||
title: '至少选择一个规格', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
let data = { |
|||
sku: sku, |
|||
selectDate: selectDate, |
|||
price: this.totalPrice() |
|||
} |
|||
this.$store.commit('changeLineInfo',data) |
|||
|
|||
uni.navigateTo({ |
|||
url: '/subPackages/line/orders' |
|||
}) |
|||
}, |
|||
// 减少数量 |
|||
minus(index) { |
|||
if (!this.selectDate) { |
|||
uni.showToast({ |
|||
title: '请先选择出行日期', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let nums = this.nums; |
|||
if (nums[index] == 0) { |
|||
return; |
|||
} |
|||
nums[index] = nums[index] - 1; |
|||
this.nums = nums |
|||
this.$forceUpdate() |
|||
}, |
|||
// 添加数量 |
|||
add(index) { |
|||
if (!this.selectDate) { |
|||
uni.showToast({ |
|||
title: '请先选择出行日期', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let nums = this.nums; |
|||
let sku = this.sku; |
|||
|
|||
if (this.selectDate.info[index].store == nums[index]) { |
|||
uni.showToast({ |
|||
title: '无库存', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
nums[index] = nums[index] + 1; |
|||
this.nums = nums |
|||
this.$forceUpdate() |
|||
}, |
|||
// 切换月份 |
|||
changeMonth(index) { |
|||
this.monthIndex = index |
|||
}, |
|||
// 选择日期 |
|||
selectDateFun(item) { |
|||
// 选择日期 |
|||
let selectMonth = this.months[this.monthIndex]; |
|||
if (!selectMonth) { |
|||
return; |
|||
} |
|||
let info = this.prices[selectMonth + '-' + item]; |
|||
if (info && info.product_price && info.product_price !== null && info.store != 0) { |
|||
info.selectMonth = selectMonth; |
|||
info.selectDate = item; |
|||
|
|||
this.selectDate = info; |
|||
} |
|||
}, |
|||
// 获取产品下的规格 |
|||
getSku() { |
|||
this.Post({ |
|||
goods_id: this.id |
|||
},'/api/goods/getSpecificationsByGoodsId').then(res => { |
|||
let nums = []; |
|||
res.data.map((item) => { |
|||
nums.push(0); |
|||
}); |
|||
this.sku = res.data, |
|||
this.nums = nums |
|||
}) |
|||
}, |
|||
// 总价 |
|||
totalPrice() { |
|||
let selectDate = this.selectDate; |
|||
let nums = this.nums; |
|||
let price = 0; |
|||
nums.map((num, index) => { |
|||
price = price + num * selectDate.info[index].money; |
|||
}); |
|||
return price |
|||
}, |
|||
initDate() { |
|||
let today = new Date(); |
|||
let month = today.getMonth() + 1; |
|||
this.months[0] = today.getMonth() + 1 |
|||
for (let i = 1; i < 6; i++) { |
|||
this.months[i] = (month + i) % 12 == 0 ? 12 : (month + i) % 12 |
|||
} |
|||
|
|||
let year1 = today.getFullYear(); |
|||
let year2 = this.months[0] < this.months[1] ? year1 : year1 + 1 |
|||
let year3 = this.months[1] < this.months[2] ? year2 : year2 + 1 |
|||
let year4 = this.months[2] < this.months[3] ? year3 : year3 + 1 |
|||
let year5 = this.months[3] < this.months[4] ? year4 : year4 + 1 |
|||
let year6 = this.months[4] < this.months[5] ? year5 : year5 + 1 |
|||
|
|||
this.years = [year1,year2,year3,year4,year5,year6] |
|||
|
|||
for (let i = 0; i < 6; i++) { |
|||
this.emptyList[i].empty = this.getMonthDays(this.months[i], this.years[i])[1] |
|||
this.emptyList[i].days = this.getMonthDays(this.months[i], this.years[i])[0] |
|||
} |
|||
|
|||
// 是否展示日历 |
|||
this.Post({ |
|||
goods_id: this.id, |
|||
start_date: this.formatDate(today), |
|||
end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days |
|||
},'/api/goods/getStoreByMonth').then(res => { |
|||
let data = res.data |
|||
for (let i = 0; i < 6; i++) { |
|||
this.emptyList[i].isShow = data[i].store > 0 ? true : false |
|||
} |
|||
}) |
|||
|
|||
let selectDate; |
|||
let selectMonth; |
|||
this.Post({ |
|||
goods_id: this.id, |
|||
start_date: this.formatDate(today), |
|||
end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days |
|||
},'/api/goods/get_product_sku_price_by_date').then(res => { |
|||
let prices = {}; |
|||
res.data.map((item) => { |
|||
// 给规格排序 |
|||
for (let i = 0; i < item.info.length; i++) { |
|||
for (let j = i + 1; j < item.info.length; j++) { |
|||
if (item.info[i].sku_info.id > item.info[j].sku_info.id) { |
|||
[item.info[i], item.info[j]] = [item.info[j], item.info[i]]; |
|||
} |
|||
} |
|||
} |
|||
let store = 0; |
|||
item.info.map((i) => { |
|||
store = store + i.store; |
|||
}); |
|||
item.store = store; |
|||
if (item.store != 0) { |
|||
let date = item.date.split('-').splice(1, 2); |
|||
let newDate = []; |
|||
date.map((d) => { |
|||
d = parseInt(d); |
|||
newDate.push(d); |
|||
}); |
|||
if (!selectDate) { |
|||
selectDate = newDate[1]; |
|||
selectMonth = newDate[0]; |
|||
} |
|||
prices[newDate.join('-')] = item; |
|||
} |
|||
}); |
|||
this.prices = prices |
|||
if (!selectDate) { |
|||
return; |
|||
} |
|||
let info = prices[selectMonth + '-' + selectDate]; |
|||
info.selectMonth = selectMonth; |
|||
info.selectDate = selectDate; |
|||
this.selectDate = info; |
|||
this.monthIndex = this.emptyList.findIndex(i => i.isShow == true) |
|||
}) |
|||
}, |
|||
// 获取这个月有几天 |
|||
getMonthDays(month, year) { |
|||
let date = new Date(year + '/' + month + '/01').getDay(); |
|||
if (month == 2) { |
|||
if ((year % 100 !== 0 && year % 4 == 0) || year % 400 == 0) { |
|||
return [29, date]; |
|||
} else { |
|||
return [28, date]; |
|||
} |
|||
} else if ((month < 8 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) { |
|||
return [31, date]; |
|||
} else { |
|||
return [30, date]; |
|||
} |
|||
}, |
|||
formatDate(date){ |
|||
const year = date.getFullYear(); |
|||
const month = date.getMonth() + 1; |
|||
const day = date.getDate(); |
|||
return [year, month, day].join('-'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
background: #f6f6f6; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.date-all-box { |
|||
margin: 0 25rpx; |
|||
|
|||
.month-box { |
|||
padding: 0 20rpx; |
|||
height: 116rpx; |
|||
display: flex; |
|||
border-bottom: 1rpx solid #ccc; |
|||
align-items: center; |
|||
|
|||
.month-item { |
|||
margin-right: 70rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
font-weight: 500; |
|||
line-height: 116rpx; |
|||
position: relative; |
|||
white-space: nowrap; |
|||
} |
|||
.month-item.active::after { |
|||
content: '1'; |
|||
display: block; |
|||
font-size: 0; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
height: 8rpx; |
|||
background: #96684F; |
|||
border-radius: 4rpx; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.day-header { |
|||
padding-top: 40rpx; |
|||
line-height: 45rpx; |
|||
font-size: 29rpx; |
|||
color: #000; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 50rpx; |
|||
|
|||
.day-header-item { |
|||
width: calc(690rpx / 7); |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
|
|||
.day-box { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 35rpx; |
|||
flex-wrap: wrap; |
|||
color: #999; |
|||
|
|||
.day-item { |
|||
width: calc(690rpx / 7); |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.date-item-in { |
|||
width: 98rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
flex-direction: column; |
|||
height: 98rpx; |
|||
|
|||
.date-num { |
|||
line-height: 40rpx; |
|||
} |
|||
.date-num.active { |
|||
color: #000; |
|||
} |
|||
|
|||
.price { |
|||
font-size: 23rpx; |
|||
color: #D62828; |
|||
line-height: 20rpx; |
|||
} |
|||
.price::after { |
|||
content: '起'; |
|||
font-size: 17rpx; |
|||
} |
|||
|
|||
.date-price-place { |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.day-item.active { |
|||
.date-item-in { |
|||
background: #96684F; |
|||
color: #fff; |
|||
border-radius: 7rpx; |
|||
|
|||
.price { |
|||
color: #fff; |
|||
} |
|||
|
|||
.date-num { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
background: white; |
|||
margin: 25rpx; |
|||
background: #ffffff; |
|||
border-radius: 9rpx; |
|||
padding: 29rpx 20rpx; |
|||
|
|||
.box-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
line-height: 50rpx; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: #666; |
|||
|
|||
.box-title { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
|
|||
.box-tip { |
|||
flex: 1; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.iconfont { |
|||
color: #000; |
|||
font-size: 34rpx; |
|||
width: 50rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.iconfont.disable { |
|||
color: #666; |
|||
} |
|||
|
|||
.number { |
|||
width: 67rpx; |
|||
height: 50rpx; |
|||
background: #f0f0f0; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
margin: 0 10rpx; |
|||
} |
|||
} |
|||
|
|||
.single-price { |
|||
font-size: 33rpx; |
|||
color: #d62828; |
|||
text-align: right; |
|||
margin-top: 20rpx; |
|||
font-weight: bold; |
|||
} |
|||
.single-price::before { |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
margin-right: 4rpx; |
|||
} |
|||
} |
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 148rpx; |
|||
background: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 26rpx; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
z-index: 999; |
|||
|
|||
.fixed-text { |
|||
flex-shrink: 0; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.price { |
|||
flex: 1; |
|||
font-size: 40rpx; |
|||
color: #D62828; |
|||
font-weight: bold; |
|||
} |
|||
.price::before { |
|||
font-weight: bold; |
|||
font-size: 24rpx; |
|||
content: '￥'; |
|||
} |
|||
|
|||
.btn { |
|||
width: 233rpx; |
|||
text-align: center; |
|||
line-height: 73rpx; |
|||
background: #DC2525; |
|||
border-radius: 11rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,823 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-box" v-if="product"> |
|||
<view class="product-title">{{ product.title }}</view> |
|||
<view class="product-subtitle">出行日期：{{ selectDate.date }}</view> |
|||
<view class="product-subtitle"> |
|||
已选：<text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.title }}x{{ item.num }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="user-box"> |
|||
<view class="user-box-title">出行人信息</view> |
|||
|
|||
<view v-for="(skuItem, skuIndex) in sku" :key="skuIndex"> |
|||
<view class="user-item" v-for="(item, index) in skuItem.num" :key="index"> |
|||
<text class="user-item-text">{{ skuItem.title }}</text> |
|||
|
|||
<view v-if="linkmans[skuIndex][index]" class="user-info"> |
|||
<text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text> |
|||
<text>{{ linkmans[skuIndex][index].tel }}</text> |
|||
</view> |
|||
|
|||
<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" /> |
|||
|
|||
<view @tap="showLinkman(skuIndex)" v-else class="add-btn"> |
|||
+ 添加 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="user-item"> |
|||
<text class="user-item-text">姓名</text> |
|||
<input v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/> |
|||
</view> --> |
|||
<view class="user-item"> |
|||
<text class="user-item-text">联系电话：</text> |
|||
<input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/> |
|||
<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="user-item" style="border-bottom: none"> |
|||
<text class="user-item-text">订单备注：</text> |
|||
<input type="text" v-model="remark" placeholder="选填" class="user-input"/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between"> |
|||
<text>优惠券</text> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view class="add-btn" v-if="!coupon">选择优惠券</view> |
|||
<view style="display: flex;align-items: center;color: #C3282E;font-weight: bold;" v-if="coupon && coupon.CouponActivity"> |
|||
<view>-￥{{coupon.CouponActivity.discounts/100}}</view> |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon"> |
|||
</view> |
|||
</navigator> --> |
|||
|
|||
<!-- <view class="xy-box"> |
|||
<view class="quan flex-center" @click="clickXy"> |
|||
<view class="quan-seld" v-if="xySeld"></view> |
|||
</view> |
|||
<view style="margin-left: 20rpx;"> |
|||
请您仔细阅读<span @click="openXz">线路标准退预定须知</span>，点击去支付即代表您已阅读条款内容 |
|||
</view> |
|||
</view> --> |
|||
|
|||
<view class="fixed-bottom"> |
|||
<view class="order-all-price"> |
|||
合计： |
|||
<text class="order-all-text"> |
|||
¥{{ priceTotal() / 100 }} |
|||
</text> |
|||
</view> |
|||
<view class="order-btn" @tap="order">去支付</view> |
|||
</view> |
|||
|
|||
<!-- 协议弹框 --> |
|||
<!-- <uni-popup ref="popup" type="bottom" :safe-area="false"> |
|||
<view class="xzPopup"> |
|||
<view v-html="formateRichText(product.reserve_content)"></view> |
|||
<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup"> |
|||
</view> |
|||
</uni-popup> --> |
|||
|
|||
<!-- 选择出行人 --> |
|||
<uni-popup ref="contactPopup" type="bottom" backgroundColor="#F4F4F4" > |
|||
<view class="people-popup"> |
|||
<view class="ptop-box"> |
|||
<view class="top flex-between" style="padding-bottom: 14rpx;"> |
|||
<text class="text-overflow" @click="$refs.contactPopup.close()">取消</text> |
|||
<text style="color: #96684F;" class="confirm" @click="$refs.contactPopup.close()">确定</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="button" @click="$refs.contactAddPopup.open()">添加出行人</view> |
|||
<view class="popup-list" v-if="peopleList.length > 0"> |
|||
<view :class="['popup-item', item.is_seld ? 'active': '']" |
|||
v-for="(item, index) in peopleList" :key="index" @click="seldThisPeople(item,index)"> |
|||
<view class="item-top flex flex-items-center"> |
|||
<image src="https://static.ticket.sz-trip.com/tourist/daoyou/edit.png" class="edit-img" @click.stop="changeContactAddPopup('open',item)"></image> |
|||
<view class="name flex-shrink-0" style="padding-left: 32rpx;width: 180rpx;">{{item.name}}</view> |
|||
<view class="flex-1 w-1rpx" style="padding-left: 20rpx;"> |
|||
<view class="name"> |
|||
<text>手机号 {{ item.tel }}</text> |
|||
<text class="tag" v-if="item.is_default == 1">默认</text> |
|||
</view> |
|||
<view class="subtitle text-overflowRows">身份证 {{ item.id_number}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<!-- 新增编辑出行人弹窗 --> |
|||
<uni-popup ref="contactAddPopup" type="bottom" backgroundColor="#F4F4F4" style="border-radius: 13rpx 13rpx 0 0;"> |
|||
<view class="people-popup" style="padding: 0;"> |
|||
<view class="ptop-box"> |
|||
<view class="top flex-between" style="height: fit-content;"> |
|||
<text class="text-overflow" @click="changeContactAddPopup('close')">取消</text> |
|||
<text style="color: #96684F;" class="confirm" @click="saveContact">保存</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="add-edit-content"> |
|||
<contactAddVue ref="contactAddVueRef"></contactAddVue> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import contactAddVue from '@/components/contactAdd.vue'; |
|||
export default { |
|||
components: {contactAddVue}, |
|||
data() { |
|||
return { |
|||
product: this.$store.state.user.lineInfo.product, |
|||
sku: this.$store.state.user.lineInfo.sku, |
|||
selectDate: this.$store.state.user.lineInfo.selectDate, |
|||
linkmans: [], |
|||
sku_ids: '', |
|||
price: this.$store.state.user.lineInfo.price, |
|||
skuIndex: null, |
|||
coupon: '', |
|||
reserve_name: '', |
|||
reserve_phone: '', |
|||
reserve_mobile: '', |
|||
remark: '', |
|||
peopleList: [], |
|||
linkmanList: [], |
|||
xySeld: false |
|||
} |
|||
}, |
|||
onReady() { |
|||
// 清除优惠券 |
|||
this.$store.commit("choseCoupon", ""); |
|||
// 自动获取手机号 |
|||
this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile |
|||
this.Post({ |
|||
goods_id: this.sku[0].goods_id |
|||
},'/api/goods/getGoodDetail').then(res => { |
|||
this.product = res.data |
|||
}) |
|||
|
|||
let linkmans = []; |
|||
let sku_ids = []; |
|||
this.sku.map((item) => { |
|||
let num = Number(item.num); |
|||
linkmans.push(new Array(num)); |
|||
sku_ids.push(item.id); |
|||
}); |
|||
this.linkmans = linkmans |
|||
this.sku_ids = sku_ids |
|||
|
|||
this.getPeople() |
|||
}, |
|||
onShow() { |
|||
this.coupon = this.$store.state.user.coupon |
|||
console.log('传过来的优惠券',this.coupon); |
|||
}, |
|||
methods: { |
|||
// 协议 |
|||
clickXy() { |
|||
this.xySeld = !this.xySeld |
|||
}, |
|||
openXz() { |
|||
this.$refs.popup.open('bottom') |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
// 去支付 |
|||
order() { |
|||
let flag = true |
|||
let product_list = []; |
|||
this.sku.map((item, index) => { |
|||
if(item.num > 0) { |
|||
let linkman = this.linkmans[index].filter(i => i); |
|||
if(linkman.length < item.num) { |
|||
flag = false |
|||
uni.showToast({ |
|||
title: '请选择对应的出行人', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let pId = [] |
|||
linkman.map(lItem => { |
|||
pId.push(lItem.id) |
|||
}) |
|||
product_list.push({ |
|||
product_id: this.product.id, |
|||
specifications_id: item.id, |
|||
num: item.num, |
|||
contact_id: pId, |
|||
date: this.selectDate.date |
|||
}); |
|||
} |
|||
}) |
|||
|
|||
// if(!this.idChinaName(this.reserve_name)) { |
|||
// flag = false |
|||
// uni.showToast({ |
|||
// title: '请输入联系人', |
|||
// icon: 'none' |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
if(!this.IsTel(this.reserve_phone)) { |
|||
flag = false |
|||
uni.showToast({ |
|||
title: '请输入联系方式', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// if(!this.xySeld) { |
|||
// flag = false |
|||
// uni.showToast({ |
|||
// title: '请先同意预订须知内容', |
|||
// icon: 'none' |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
if(flag){ |
|||
let data = { |
|||
goods: product_list, |
|||
coupon: this.coupon ? this.coupon.id : null, |
|||
remark: this.remark, |
|||
reserve_phone: this.reserve_phone |
|||
}; |
|||
|
|||
this.Post({ |
|||
data: JSON.stringify(data), |
|||
method: 'POST', |
|||
},'/api/order/place').then(res => { |
|||
console.log(res) |
|||
if(res.code == 1) { |
|||
let order_id = res.data.order_id |
|||
this.$store.commit("changeLineInfo", null); |
|||
this.$store.commit("choseCoupon", ""); |
|||
|
|||
this.Post({ |
|||
order_id: order_id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
}, '/api/pay/unify').then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp, |
|||
success: () => { |
|||
this.getSubscribeMessage() |
|||
}, |
|||
fail() { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
// 总价 |
|||
priceTotal() { |
|||
let price = 0 |
|||
if(this.coupon) { |
|||
if (this.coupon.percent == 0) { |
|||
price = this.price - this.coupon.CouponActivity.discounts |
|||
} else{ |
|||
price = this.price - (this.price * this.coupon.CouponActivity.percent/100) |
|||
} |
|||
}else { |
|||
price = this.price |
|||
} |
|||
return price < 0 ? 0 : price |
|||
}, |
|||
// 获取出行人列表 |
|||
getPeople() { |
|||
this.Post({ |
|||
offset: 0, |
|||
limit: 100 |
|||
},'/api/user/contactList').then(res => { |
|||
this.peopleList = res.data |
|||
this.reserve_mobile = this.peopleList[0].tel |
|||
// 如果是添加或者修改完出行人后需要默认选中已选择的出行人 |
|||
if(this.linkmanList.length > 0){ |
|||
for (let i = 0; i < this.linkmanList.length; i++) { |
|||
for (let j = 0; j < this.peopleList.length; j++) { |
|||
if(this.peopleList[j].id == this.linkmanList[i].id){ |
|||
this.linkmanList[i] = this.peopleList[j] |
|||
this.peopleList[j].is_seld = true |
|||
this.linkmanList[i].is_seld = true |
|||
} |
|||
} |
|||
} |
|||
this.$forceUpdate() |
|||
} |
|||
}) |
|||
}, |
|||
// 保存出行人 |
|||
async saveContact () { |
|||
let res = await this.$refs.contactAddVueRef.submit() |
|||
if (res && res.code == 1) { |
|||
this.getPeople(); |
|||
this.changeContactAddPopup('close') |
|||
console.log('this.linkmanList3',this.linkmanList) |
|||
} |
|||
}, |
|||
// 选择出行人弹框 |
|||
showLinkman(skuIndex) { |
|||
if(this.peopleList.length == 0) { |
|||
this.$refs.contactAddPopup.open() |
|||
return; |
|||
} |
|||
|
|||
this.skuIndex = skuIndex |
|||
|
|||
this.peopleList.map(item => { |
|||
if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) { |
|||
item.is_disable = true |
|||
}else { |
|||
item.is_disable = false |
|||
} |
|||
}) |
|||
|
|||
this.$refs.contactPopup.open('bottom') |
|||
this.$forceUpdate() |
|||
}, |
|||
// 出行人弹框 |
|||
changeContactAddPopup(type, item) { |
|||
if(type == 'open') { |
|||
// 如果没有出行人或编辑 打开新增编辑弹窗 |
|||
if (this.peopleList.length<=0 || item.id) { |
|||
|
|||
this.$refs.contactAddPopup.open() |
|||
|
|||
if(item.id) { |
|||
this.$nextTick(()=>{ |
|||
this.$refs.contactAddVueRef.init(item) |
|||
}) |
|||
} |
|||
return; |
|||
} |
|||
this.$refs.contactPopup.open() |
|||
}else { |
|||
this.$refs.contactAddPopup.close() |
|||
} |
|||
}, |
|||
// 选择出行人 |
|||
seldThisPeople(item,index) { |
|||
let num = 0 |
|||
let list = [] |
|||
|
|||
if(item.is_seld && item.is_disable) { |
|||
uni.showToast({ |
|||
title: '该联系人已选择为其他规格', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
this.linkmans[this.skuIndex] = [] |
|||
this.peopleList.map(items => { |
|||
if(items.id == item.id) { |
|||
items.is_seld = !items.is_seld |
|||
} |
|||
if(items.is_seld && !items.is_disable) { |
|||
num++; |
|||
items.is_sku = this.sku[this.skuIndex].id |
|||
this.linkmans[this.skuIndex].push(items) |
|||
} |
|||
if(items.is_seld) { |
|||
this.linkmanList.push(item) |
|||
} |
|||
}) |
|||
if(num > this.sku[this.skuIndex].num) { |
|||
item.is_seld = false |
|||
this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1) |
|||
uni.showToast({ |
|||
title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
this.$forceUpdate() |
|||
}, |
|||
// 确定取消 |
|||
changePeoplePopup(type,confirm) { |
|||
this.$refs.peoplePopup.close() |
|||
this.$forceUpdate() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
background: #f6f6f6; |
|||
min-height: 100vh; |
|||
padding: 26.67rpx 26.67rpx 200rpx; |
|||
} |
|||
|
|||
.top-box { |
|||
padding: 30rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
|
|||
.product-title { |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.product-subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.user-box { |
|||
margin-top: 25rpx; |
|||
background: #ffffff; |
|||
border-radius: 13rpx; |
|||
|
|||
.user-box-title { |
|||
// border-bottom: 1rpx solid #ccc; |
|||
line-height: 113rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.user-item { |
|||
margin: 0 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 126rpx; |
|||
border-top: 1rpx solid rgba(184, 184, 184, .5); |
|||
|
|||
.user-item-text{ |
|||
flex-shrink: 0; |
|||
font-size: 31rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.user-info { |
|||
font-size: 27rpx; |
|||
margin-right: 20rpx; |
|||
flex: 1; |
|||
text-align: left; |
|||
} |
|||
|
|||
.icon-bianji1 { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.add-btn { |
|||
display: flex; |
|||
width: 153rpx; |
|||
height: 57rpx; |
|||
border: 1rpx solid #333333; |
|||
border-radius: 29rpx; |
|||
box-sizing: border-box; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.user-input { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
display: block; |
|||
text-align: right; |
|||
} |
|||
|
|||
.icon-coupon{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 148rpx; |
|||
background: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 26rpx; |
|||
box-sizing: border-box; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
z-index: 1; |
|||
|
|||
.order-all-price { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
|
|||
.order-all-text { |
|||
flex: 1; |
|||
font-size: 36rpx; |
|||
color: #C3282E; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.order-btn { |
|||
width: 233rpx; |
|||
text-align: center; |
|||
line-height: 73rpx; |
|||
background: #DC2525; |
|||
border-radius: 11rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.xy-box { |
|||
width: 658rpx; |
|||
margin: 36rpx auto 0; |
|||
font-size: 27rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #999999; |
|||
display: flex; |
|||
|
|||
span { |
|||
color: #FEB419; |
|||
} |
|||
|
|||
.quan { |
|||
min-width: 23rpx; |
|||
min-height: 23rpx; |
|||
max-width: 23rpx; |
|||
max-height: 23rpx; |
|||
border: 1px solid #999999; |
|||
border-radius: 50%; |
|||
|
|||
.quan-seld { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #FEB419; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.xzPopup { |
|||
width: 750rpx; |
|||
padding: 33rpx 26rpx 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
height: 1200rpx; |
|||
overflow-y: scroll; |
|||
|
|||
view { |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 35rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
position: absolute; |
|||
top: 33rpx; |
|||
right: 27rpx; |
|||
} |
|||
} |
|||
|
|||
.coupon-box { |
|||
height: 113rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
padding: 0 20rpx; |
|||
margin: 0 20rpx; |
|||
|
|||
.add-btn { |
|||
width: 153rpx; |
|||
line-height: 40rpx; |
|||
background: #C3282E; |
|||
border-radius: 9rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.icon-coupon{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.people-popup { |
|||
padding: 26rpx; |
|||
height: 800rpx; |
|||
background: #F7F7F7; |
|||
|
|||
.ptop-box { |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.top { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
color: #000; |
|||
height: 80rpx; |
|||
font-size: 0; |
|||
overflow: hidden; |
|||
padding: 0 26rpx; |
|||
|
|||
text { |
|||
text-align: left; |
|||
font-size: 35rpx; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
|
|||
.confirm { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-list { |
|||
height: 666rpx; |
|||
overflow: scroll; |
|||
|
|||
.popup-item { |
|||
border-radius: 12rpx; |
|||
padding: 2rpx; |
|||
margin-top: 24rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: 400; |
|||
background-color: #ffffff; |
|||
|
|||
.item-top { |
|||
border-radius: 12rpx; |
|||
padding: 30rpx 40rpx; |
|||
background-color: #ffffff; |
|||
|
|||
image { |
|||
color: #666666; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.name { |
|||
overflow: hidden; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 32rpx; |
|||
|
|||
text { |
|||
color: #666; |
|||
font-size: 25rpx; |
|||
} |
|||
|
|||
.tag { |
|||
padding: 0 8rpx; |
|||
height: 32rpx; |
|||
border-radius: 7rpx; |
|||
line-height: 30rpx; |
|||
text-align: center; |
|||
font-size: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
background: #96684F; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.com-flex-start { |
|||
margin: 0 0 30rpx; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-weight: 400; |
|||
flex: 1; |
|||
text-align: left; |
|||
margin-top: 33rpx; |
|||
color: #666666; |
|||
font-size: 25rpx; |
|||
|
|||
.mobile { |
|||
margin-bottom: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.status { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 27rpx; |
|||
height: 21rpx; |
|||
} |
|||
} |
|||
.statuss { |
|||
background: linear-gradient(90deg, #fa2b66, #ff9834); |
|||
border: none; |
|||
} |
|||
.noSelect { |
|||
border: 1rpx solid #999999; |
|||
} |
|||
} |
|||
|
|||
.item-site { |
|||
color: #666666; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 36rpx 0; |
|||
|
|||
view { |
|||
width: 23rpx; |
|||
height: 23rpx; |
|||
margin-right: 10rpx; |
|||
border: 1rpx solid #999999; |
|||
border-radius: 50%; |
|||
|
|||
view { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
background: #000000; |
|||
border-radius: 50%; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-item.active{ |
|||
border: 2rpx solid #96684F; |
|||
} |
|||
.popup-item.disabled{ |
|||
.item-top { |
|||
background-color: #CCC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background-color: #ffffff; |
|||
border-radius: 40rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 33rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.add-edit-content{ |
|||
border-radius: 13rpx; |
|||
min-height: 800rpx; |
|||
margin: 0 22rpx; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,378 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-box"> |
|||
<view class="search-box flex-between"> |
|||
<view class="left"> |
|||
<image src="https://static.ticket.sz-trip.com/tourist/index/search.png"></image> |
|||
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" /> |
|||
</view> |
|||
|
|||
<view class="search-btn flex-center" @click="search()">搜索</view> |
|||
</view> |
|||
<view class="common-box"> |
|||
<view @click="setType(index)" v-for="(item, index) in typeList" :key="index" :class="['common-type', typeIndex == index ? 'active' : '']"> |
|||
{{ item.name }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="list.length > 0"> |
|||
<navigator :url="'/subPackages/order/orderDetail?id=' + item.order_id" class="item" v-for="(item, key) in list" :key="item.id"> |
|||
<view class="item-top flex-between"> |
|||
<view> |
|||
<view>{{item.order_child[0].type_id == 1 ? '线路产品' : '导游服务'}}</view> |
|||
<view>订单号：{{ item.order_id }}</view> |
|||
</view> |
|||
<view class="item-state">{{item.status_text}}</view> |
|||
</view> |
|||
|
|||
<view class="item-center"> |
|||
<image :src="showImg(item.order_child[0].specifications_image)" class="item-img"></image> |
|||
<view class="item-content flex-column"> |
|||
<view class="title text-overflow">{{item.order_name}}</view> |
|||
<view style="margin-bottom: 10rpx;"> |
|||
<view class="subtitle flex-between" v-for="(sItem,sIndex) in item.order_child" :key="sItem.id"> |
|||
<view>{{sItem.specifications_name}}</view> |
|||
<view> |
|||
￥{{sItem.pay_money}} |
|||
<span style="margin-left: 30rpx;">x{{sItem.num}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="subtitle" style="text-align: right;color: #333333;">共{{item.order_child.length}}件商品</view> |
|||
<view class="price"> |
|||
<view class="subtitle" style="margin-right: 15rpx;">总价￥{{item.money / 100}}</view> |
|||
实付款<span>{{item.pay_money / 100}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item-btns"> |
|||
<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'">申请退款</view> |
|||
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单</view> |
|||
<view @click.stop="gotoDetailByTypeId(item.order_id[0].goods_id, item.order_id[0].type_id)" v-if="item.status == 'COMPLETED'">再次购买</view> |
|||
<view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'">立即支付</view> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
|
|||
<view v-if="list.length === 0" class="noDate"> |
|||
<view>暂无订单</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
finished: false, |
|||
list: [], |
|||
typeList: [ |
|||
{ |
|||
id: 'ALL', |
|||
name: '全部' |
|||
}, |
|||
{ |
|||
id: 'WAIT_PAYMENT', |
|||
name: '待支付' |
|||
}, |
|||
{ |
|||
id: 'PAYMENT_SUCCESSFULLY', |
|||
name: '已取消' |
|||
}, |
|||
{ |
|||
id: 'PAYMENT_SUCCESSFULLY', |
|||
name: '待出行' |
|||
}, |
|||
{ |
|||
id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART', |
|||
name: '退款/售后' |
|||
} |
|||
], |
|||
typeIndex: 0, |
|||
ajaxFlag: true, |
|||
keywords: '', |
|||
orderId: null, |
|||
dateRange: [], |
|||
type: '' |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type); |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
// 申请退款 |
|||
refund(id, index) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否申请退款？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/applyRefund' |
|||
).then(res => { |
|||
if (res.code == 1) { |
|||
uni.showToast({ |
|||
title: '申请成功', |
|||
icon: 'success' |
|||
}); |
|||
that.onReload(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭订单 |
|||
closeOrder(id, index) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否关闭订单？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/closeOrder' |
|||
).then(res => { |
|||
if (res.code == 1) { |
|||
uni.showToast({ |
|||
title: '关闭成功', |
|||
icon: 'success' |
|||
}); |
|||
that.onReload() |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 立即支付 |
|||
setOrderId(id) { |
|||
|
|||
}, |
|||
onReload() { |
|||
this.list = []; |
|||
this.finished = false; |
|||
this.getList(); |
|||
}, |
|||
// 获取订单列表 |
|||
getList() { |
|||
let data = { |
|||
status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].id, |
|||
offset: this.list.length, |
|||
limit: 5, |
|||
name: this.keywords |
|||
}; |
|||
this.Post(data, '/api/order/orderList').then(res => { |
|||
this.list = [...this.list, ...res.data] |
|||
if (res.data.length < 5) { |
|||
this.finished = true; |
|||
} |
|||
}); |
|||
}, |
|||
setType(index) { |
|||
this.typeIndex = index; |
|||
this.onReload(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #F7F7F7; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.top-box { |
|||
background: #FFFFFF; |
|||
|
|||
.search-box { |
|||
height: 84rpx; |
|||
padding: 0 26.67rpx; |
|||
|
|||
.left { |
|||
width: 563rpx; |
|||
height: 60rpx; |
|||
background: #FFFFFF; |
|||
border: 1rpx solid #96684F; |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 21rpx; |
|||
} |
|||
|
|||
input { |
|||
flex: 1; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
width: 120rpx; |
|||
height: 60rpx; |
|||
background: #96684F; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.common-box { |
|||
height: 93rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.common-type { |
|||
width: 20%; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.common-type.active { |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #96684F; |
|||
position: relative; |
|||
} |
|||
.common-type.active::after { |
|||
width: 20%; |
|||
height: 4rpx; |
|||
content: '1'; |
|||
font-size: 0; |
|||
display: block; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: -10rpx; |
|||
margin: auto; |
|||
background: #96684F; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.noDate { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 200rpx; |
|||
font-size: 24rpx; |
|||
color: #777777; |
|||
} |
|||
|
|||
.item { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 27rpx auto 0; |
|||
|
|||
.item-top { |
|||
height: 100rpx; |
|||
background: linear-gradient(90deg, #F4E8DD, #F9F2EC); |
|||
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|||
padding: 0 20rpx; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #96684F; |
|||
|
|||
.item-state { |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #DC2525; |
|||
} |
|||
} |
|||
|
|||
.item-center { |
|||
height: 270rpx; |
|||
padding: 20rpx; |
|||
display: flex; |
|||
|
|||
.item-img { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
border-radius: 7rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.item-content { |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.price { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
display: flex; |
|||
align-items: baseline; |
|||
justify-content: flex-end; |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #DC2525; |
|||
} |
|||
span::before { |
|||
font-size: 24rpx; |
|||
content: '￥'; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-btns { |
|||
height: 102rpx; |
|||
border-top: 1rpx solid rgba(216, 216, 216, .5); |
|||
padding-right: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
|
|||
view { |
|||
width: 160rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
background: rgba(237,237,237,0); |
|||
border-radius: 7rpx; |
|||
border: 1rpx solid #D8D8D8; |
|||
margin-left: 13rpx; |
|||
} |
|||
|
|||
.pay-btn { |
|||
background: #DC2525; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue