|
|
@ -17,98 +17,118 @@ |
|
|
|
<uv-icon size="30rpx" name="arrow-right"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 商品信息和数量 --> |
|
|
|
<view class="submit-info"> |
|
|
|
<view class="title"> |
|
|
|
桌布租赁 |
|
|
|
</view> |
|
|
|
<view class="box"> |
|
|
|
<image class="image" :src="unit.pic" mode=""></image> |
|
|
|
|
|
|
|
<view class="info"> |
|
|
|
<view class="price"> |
|
|
|
¥<text>{{ detail.depositPrice }}</text>元 |
|
|
|
</view> |
|
|
|
<view class="unit"> |
|
|
|
请选择规格 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<uv-number-box |
|
|
|
@change="valChange" |
|
|
|
v-model="num"></uv-number-box> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 规格 --> |
|
|
|
<view class="submit-unit"> |
|
|
|
|
|
|
|
<view class="submit-unit" |
|
|
|
style="margin-top: 20rpx;"> |
|
|
|
<view class="title"> |
|
|
|
规格选择 |
|
|
|
您有桌布吗? |
|
|
|
</view> |
|
|
|
<view class="list"> |
|
|
|
<view :class="{act : unitIndex == index}" v-for="(item, index) in detail.hotelGoodsSkuList" |
|
|
|
@click="selectUnit(item, index)" :key="index"> |
|
|
|
{{ item.title }} |
|
|
|
<view :class="{act : typeIndex == index}" v-for="(item, index) in type" |
|
|
|
@click="typeIndex = index" :key="index"> |
|
|
|
{{ item }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 优惠劵 --> |
|
|
|
<!-- <view style="padding: 0 20rpx;"> |
|
|
|
<uv-cell |
|
|
|
icon="coupon" |
|
|
|
title="优惠劵" |
|
|
|
iconStyle="font-size: 34rpx;" |
|
|
|
rightIconStyle="font-size: 34rpx;" |
|
|
|
:value="couponText" |
|
|
|
@click="$refs.couponPopup.open('bottom')" |
|
|
|
isLink> |
|
|
|
</uv-cell> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 费用明细 --> |
|
|
|
<view class="expense-detail"> |
|
|
|
<view class="title"> |
|
|
|
费用明细 |
|
|
|
</view> |
|
|
|
<view class="detail" v-if="detail.depositPrice"> |
|
|
|
<view> |
|
|
|
应付款:¥{{ price }} |
|
|
|
<!-- 商品信息和数量 --> |
|
|
|
<view v-if="typeIndex == 0"> |
|
|
|
<view class="submit-info"> |
|
|
|
<view class="title"> |
|
|
|
桌布租赁 |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
押金:¥{{ price }} |
|
|
|
<view class="box"> |
|
|
|
<image class="image" :src="unit.pic" mode=""></image> |
|
|
|
|
|
|
|
<view class="info"> |
|
|
|
<view class="price"> |
|
|
|
¥<text>{{ detail.depositPrice }}</text>元 |
|
|
|
</view> |
|
|
|
<view class="unit"> |
|
|
|
请选择规格 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<uv-number-box |
|
|
|
@change="valChange" |
|
|
|
v-model="num"></uv-number-box> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="coupon.couponCondition <= price"> |
|
|
|
优惠:-¥{{ coupon.couponPrice }} |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 规格 --> |
|
|
|
<view class="submit-unit"> |
|
|
|
<view class="title"> |
|
|
|
规格选择 |
|
|
|
</view> |
|
|
|
<view v-if="coupon.couponCondition <= price"> |
|
|
|
实付款:¥{{ (price - coupon.couponPrice).toFixed(2) }} |
|
|
|
<view class="list"> |
|
|
|
<view :class="{act : unitIndex == index}" v-for="(item, index) in detail.hotelGoodsSkuList" |
|
|
|
@click="selectUnit(item, index)" :key="index"> |
|
|
|
{{ item.title }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uv-cell |
|
|
|
icon="coupon" |
|
|
|
title="优惠" |
|
|
|
iconStyle="font-size: 34rpx;" |
|
|
|
rightIconStyle="font-size: 34rpx;"> |
|
|
|
<template #value> |
|
|
|
<view class="coupon"> |
|
|
|
满{{ coupon.couponCondition }}立减{{ coupon.couponPrice }} |
|
|
|
|
|
|
|
<!-- 优惠劵 --> |
|
|
|
<!-- <view style="padding: 0 20rpx;"> |
|
|
|
<uv-cell |
|
|
|
icon="coupon" |
|
|
|
title="优惠劵" |
|
|
|
iconStyle="font-size: 34rpx;" |
|
|
|
rightIconStyle="font-size: 34rpx;" |
|
|
|
:value="couponText" |
|
|
|
@click="$refs.couponPopup.open('bottom')" |
|
|
|
isLink> |
|
|
|
</uv-cell> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 费用明细 --> |
|
|
|
<view class="expense-detail"> |
|
|
|
<view class="title"> |
|
|
|
费用明细 |
|
|
|
</view> |
|
|
|
<view class="detail" v-if="detail.depositPrice"> |
|
|
|
<view> |
|
|
|
应付款:¥{{ price }} |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
押金:¥{{ price }} |
|
|
|
</view> |
|
|
|
<view v-if="coupon.couponCondition <= price"> |
|
|
|
优惠:-¥{{ coupon.couponPrice }} |
|
|
|
</view> |
|
|
|
<view v-if="coupon.couponCondition <= price"> |
|
|
|
实付款:¥{{ (price - coupon.couponPrice).toFixed(2) }} |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</uv-cell> |
|
|
|
</view> |
|
|
|
<uv-cell |
|
|
|
icon="coupon" |
|
|
|
title="优惠" |
|
|
|
iconStyle="font-size: 34rpx;" |
|
|
|
rightIconStyle="font-size: 34rpx;"> |
|
|
|
<template #value> |
|
|
|
<view class="coupon"> |
|
|
|
满{{ coupon.couponCondition }}立减{{ coupon.couponPrice }} |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</uv-cell> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<addLeaseForm ref="addLeaseForm" v-if="typeIndex == 1"/> |
|
|
|
|
|
|
|
<!-- 提交按钮 --> |
|
|
|
<view class="submit-btn"> |
|
|
|
<view class="l" @click="addCart"> |
|
|
|
加入租赁车 |
|
|
|
</view> |
|
|
|
<view class="r" @click="orderPay"> |
|
|
|
{{ submiitTitle }} |
|
|
|
<view class="submit"> |
|
|
|
<view class="submit-btn"> |
|
|
|
<view class="l" @click="addCart" v-if="typeIndex == 0"> |
|
|
|
加入租赁车 |
|
|
|
</view> |
|
|
|
<view class="r" @click="orderPay"> |
|
|
|
{{ submiitTitle }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
@ -131,14 +151,16 @@ |
|
|
|
<script> |
|
|
|
import addressList from '@/components/address/addressList.vue' |
|
|
|
import couponList from '@/components/user/couponList.vue' |
|
|
|
import addLeaseForm from './addLeaseForm.vue' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
addressList, |
|
|
|
couponList, |
|
|
|
addLeaseForm, |
|
|
|
}, |
|
|
|
props: { |
|
|
|
submiitTitle: { |
|
|
|
default: '立即租赁', |
|
|
|
default: '立即下单', |
|
|
|
type: String, |
|
|
|
}, |
|
|
|
detail: { |
|
|
@ -164,6 +186,8 @@ |
|
|
|
price : 0, |
|
|
|
}, |
|
|
|
couponText : '请选择', |
|
|
|
typeIndex : 0, |
|
|
|
type : ['没有桌布', '我有桌布'], |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
@ -241,7 +265,29 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 添加我的物品 |
|
|
|
submitAddLease() { |
|
|
|
this.$refs.addLeaseForm.submit(form => { |
|
|
|
form.addressId = this.address.id, //地址id |
|
|
|
this.$api('tablecloth', form, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.redirectTo({ |
|
|
|
url: '/pages/index/order' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
orderPay() { |
|
|
|
|
|
|
|
// 添加我的物品 |
|
|
|
if(this.typeIndex == 1){ |
|
|
|
return this.submitAddLease() |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 租赁物品 |
|
|
|
|
|
|
|
let data = [ |
|
|
|
{ |
|
|
@ -308,9 +354,10 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.content { |
|
|
|
max-height: 80vh; |
|
|
|
max-height: 70vh; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
padding-bottom: 120rpx; |
|
|
|
|
|
|
|
.address { |
|
|
|
display: flex; |
|
|
@ -436,35 +483,43 @@ |
|
|
|
color: #5c5; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.submit-btn { |
|
|
|
width: 600rpx; |
|
|
|
height: 80rpx; |
|
|
|
color: #fff; |
|
|
|
border-radius: 40rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
margin: 20rpx auto; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border: 1rpx solid $uni-color; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.l { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: $uni-color; |
|
|
|
} |
|
|
|
|
|
|
|
.r { |
|
|
|
background: $uni-color; |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.submit{ |
|
|
|
background-color: #fff; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
width: 100%; |
|
|
|
.submit-btn { |
|
|
|
width: 600rpx; |
|
|
|
height: 80rpx; |
|
|
|
color: #fff; |
|
|
|
border-radius: 40rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
margin: 20rpx auto; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border: 1rpx solid $uni-color; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.l { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: $uni-color; |
|
|
|
} |
|
|
|
|
|
|
|
.r { |
|
|
|
background: $uni-color; |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |