418 lines
8.6 KiB
Vue
418 lines
8.6 KiB
Vue
<template>
|
||
<view class="uni-page">
|
||
<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="订单信息"></u-navbar>
|
||
<view class="content-main">
|
||
<view class="info-box">
|
||
<view class="info-title">
|
||
地址信息
|
||
</view>
|
||
<view class="info-content">
|
||
<view class="step-line">
|
||
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-icon">
|
||
寄
|
||
</view>
|
||
<view class="address-box">
|
||
<view class="address-info">
|
||
张大大 17638755181
|
||
</view>
|
||
<view class="address-detail">
|
||
西安市雁塔区中天国际公寓A座2605
|
||
</view>
|
||
</view>
|
||
<view class="addres-book-button">
|
||
地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx;height: 25rpx;">
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-icon step-icon-last">
|
||
收
|
||
</view>
|
||
|
||
<view class="address-box">
|
||
<view class="address-info">
|
||
王大大 17638755181
|
||
</view>
|
||
<view class="address-detail">
|
||
新疆乌鲁木齐大三巴公路铁硫唑1楼209
|
||
</view>
|
||
</view>
|
||
<view class="addres-book-button">
|
||
地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx;height: 25rpx;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-box">
|
||
<view class="info-title">
|
||
邮寄方式
|
||
</view>
|
||
<view class="info-content">
|
||
<view class=" info-content-flex">
|
||
<view :class="{'post-pattern-item':true,
|
||
'post-pattern-item-active':pattern.id === orderInfo.postPattern
|
||
}" v-for="pattern in postPattern" :key="pattern.id" @click="()=>{
|
||
orderInfo.postPattern = pattern.id
|
||
priceInfo.postage.value = pattern.price
|
||
}">
|
||
<view class="patter-price">
|
||
{{pattern.price}}<text style="font-size: 24rpx;">元</text>
|
||
</view>
|
||
<view class="patter-explain">
|
||
{{pattern.explain}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<EventNotice content="最新活动，开通会员0元寄信">
|
||
<template #leftIcon>
|
||
<image src="/static/12活动@2x.png" style="width: 100%;height: 100%" alt=""></image>
|
||
</template>
|
||
<template #rightIcon>
|
||
<u-icon name="arrow-right" color="#CE7A2C" size="16"></u-icon>
|
||
</template>
|
||
</EventNotice>
|
||
</view>
|
||
<view class="info-box">
|
||
<PayPattern v-model="orderInfo.payPattern" @change="test"></PayPattern>
|
||
</view>
|
||
<view class="info-box">
|
||
<u-cell-group :border="false">
|
||
<u-cell :border="false" title="我的会员" isLink>
|
||
<template #value>
|
||
<view class="">
|
||
暂无会员
|
||
</view>
|
||
</template>
|
||
</u-cell>
|
||
<u-cell :border="false" title="我的优惠券" isLink></u-cell>
|
||
<u-cell :border="false" title="我的备注" isLink>
|
||
<template #value>
|
||
<view style="width:300rpx;">
|
||
{{orderInfo.note}}
|
||
</view>
|
||
</template>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="floor-button">
|
||
<u-popup closeable :border="false" :show="showPrice" mode="bottom" :round="40" @close="closePricePanel">
|
||
<view class="price-panel-box">
|
||
<u-cell-group :border="false">
|
||
<u-cell :border="false" v-for="item in priceInfo" :key="item.id">
|
||
<template #title>
|
||
<view class="price-info-title">{{item.name}}</view>
|
||
</template>
|
||
<template #value>
|
||
<view :class="{
|
||
'price-info-value':true,
|
||
'price-info-value-black':item.value<=0,
|
||
}">¥ {{+item.value.toFixed(2)}}</view>
|
||
</template>
|
||
</u-cell>
|
||
<view class="" style="display: flex;margin-top: 50rpx;">
|
||
<view class="to-view-button" @click="toView">
|
||
费用合计 <text style="margin-left: 20rpx;color: #CE7A2C;">¥<text
|
||
style="font-size: 42rpx;margin-left: 10rpx;">{{totalPrice}}</text></text>
|
||
</view>
|
||
<view class="nextstep-button" @click="tpPay">
|
||
立即支付
|
||
</view>
|
||
</view>
|
||
</u-cell-group>
|
||
</view>
|
||
</u-popup>
|
||
<view class="nextstep-button" @click="confirm">
|
||
确认
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import EventNotice from '@/components/event-notice/event-notice.vue'
|
||
import PayPattern from '@/components/Pay-patter/Pay-patter.vue'
|
||
export default {
|
||
components: {
|
||
EventNotice,
|
||
PayPattern
|
||
},
|
||
data() {
|
||
return {
|
||
orderInfo: {
|
||
plan: '',
|
||
postPattern: 1,
|
||
payPattern: 1,
|
||
note: '奥克兰大理石是镂空雕刻,圾的卢卡斯离开的萨科拉上来,打死了 '
|
||
},
|
||
postPattern: [{
|
||
id: 1,
|
||
price: 5.2,
|
||
explain: '平信(无物流)'
|
||
},
|
||
{
|
||
id: 2,
|
||
price: 10.0,
|
||
explain: '挂号信'
|
||
},
|
||
{
|
||
id: 3,
|
||
price: 30.0,
|
||
explain: 'EMS'
|
||
},
|
||
{
|
||
id: 4,
|
||
price: 30.0,
|
||
explain: '顺丰'
|
||
}
|
||
],
|
||
priceInfo: {
|
||
print: {
|
||
id: 1,
|
||
name: '信件费用-普通打印',
|
||
key: 'print',
|
||
value: 1
|
||
},
|
||
picture: {
|
||
id: 2,
|
||
name: '照片费用2',
|
||
key: 'picture',
|
||
value: 100
|
||
},
|
||
postage: {
|
||
id: 3,
|
||
name: '邮寄费用',
|
||
key: 'postage',
|
||
value: 135
|
||
},
|
||
discounts: {
|
||
id: 4,
|
||
name: '我的优惠券',
|
||
key: 'discounts',
|
||
value: 22
|
||
}
|
||
},
|
||
showPrice: false,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.orderInfo.plan = option.plan
|
||
this.priceInfo.postage.value = this.postPattern[0].price
|
||
console.log(option);
|
||
},
|
||
methods: {
|
||
test(e) {
|
||
console.log(e, this.orderInfo);
|
||
},
|
||
confirm() {
|
||
this.showPrice = true
|
||
},
|
||
closePricePanel() {
|
||
this.showPrice = false
|
||
},
|
||
tpPay() {
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
totalPrice() {
|
||
return Object.values(this.priceInfo).reduce((total, next) => {
|
||
return total + next.value
|
||
}, 0)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.content-main {
|
||
flex: 1;
|
||
overflow: auto;
|
||
// height: 100%;
|
||
}
|
||
|
||
.info-box {
|
||
margin-top: 30rpx;
|
||
background-color: white;
|
||
min-height: 100rpx;
|
||
border-radius: 40rpx;
|
||
height: fit-content;
|
||
padding: 30rpx 30rpx;
|
||
|
||
.info-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.info-content {
|
||
position: relative;
|
||
padding: 30rpx 0;
|
||
|
||
.step-line {
|
||
position: absolute;
|
||
height: calc(60%);
|
||
width: 0;
|
||
// background-color: black;
|
||
border-left: 1rpx black dashed;
|
||
left: 28rpx;
|
||
top: 20%;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
margin-bottom: 50rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
|
||
.step-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.address-box {
|
||
flex: 1;
|
||
// padding-top: 20rpx;
|
||
}
|
||
|
||
.address-info,
|
||
.addres-book-button {
|
||
font-size: 32rpx;
|
||
color: black;
|
||
}
|
||
|
||
.step-icon-box {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.address-detail {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.step-icon {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-right: 10rpx;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background-color: #E39B46;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// font-family: OPPOSans-bold, OPPOSans;
|
||
color: white;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
// bottom: 0;
|
||
}
|
||
|
||
.addres-book-button {
|
||
width: fit-content;
|
||
margin-right: 10rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-content-flex {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: 150rpx;
|
||
gap: 30rpx;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
.post-pattern-item {
|
||
width: 196rpx;
|
||
height: 134rpx;
|
||
background: #FFF7F2;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.patter-price {
|
||
font-size: 42rpx;
|
||
font-weight: bold;
|
||
color: black;
|
||
}
|
||
|
||
.patter-explain {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
// opacity: 50%;
|
||
}
|
||
}
|
||
|
||
.post-pattern-item-active {
|
||
background: #E39B46;
|
||
|
||
.patter-price {
|
||
color: white;
|
||
|
||
}
|
||
|
||
.patter-explain {
|
||
color: white;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.to-view-button {
|
||
width: 459rpx;
|
||
min-height: 98rpx;
|
||
background-color: #ffe4d9;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.nextstep-button {
|
||
flex: 1;
|
||
background: linear-gradient(to bottom right, #e8b648, #e08745);
|
||
min-height: 98rpx;
|
||
border-radius: 20rpx;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.price-panel-box {
|
||
box-sizing: border-box;
|
||
height: 690rpx;
|
||
padding: 37rpx;
|
||
padding-top: 171rpx;
|
||
|
||
.price-info-title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.price-info-value {
|
||
color: #CE7A2C;
|
||
}
|
||
}
|
||
</style> |