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