| @ -0,0 +1,334 @@ | |||||
| <template> | |||||
| <uv-popup ref="popup" | |||||
| :round="30" | |||||
| bgColor="#f7f7f7"> | |||||
| <view class="content"> | |||||
| <!-- 地址 --> | |||||
| <view class="address" @click="openAddress"> | |||||
| <image src="/static/image/address/selectIcon.png" mode=""></image> | |||||
| <view> | |||||
| {{ address.name }} | |||||
| </view> | |||||
| <view class=""> | |||||
| {{ address.addressDetail }} | |||||
| </view> | |||||
| <view class="icon"> | |||||
| <uv-icon size="30rpx" name="arrow-right"></uv-icon> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 优惠劵 --> | |||||
| <!-- <view style="padding: 0 20rpx; | |||||
| background-color: #fff;"> | |||||
| <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="payInfoMessage"> | |||||
| <view style="font-weight: 900;"> | |||||
| 下单说明: | |||||
| </view> | |||||
| <view class=""> | |||||
| 租金:从物品确认收货开始计算¥{{ configList.depositPrice }}元/天 | |||||
| </view> | |||||
| <view class=""> | |||||
| 押金:将按照面积计算每平方厘米¥1元 | |||||
| </view> | |||||
| </view> --> | |||||
| <!-- 费用明细 --> | |||||
| <view class="expense-detail"> | |||||
| <view class="title"> | |||||
| 费用明细 | |||||
| </view> | |||||
| <view class="detail" v-if="totalPrice"> | |||||
| <view> | |||||
| 应付款:¥{{ totalPrice }} | |||||
| </view> | |||||
| <view> | |||||
| <view class=""> | |||||
| 配送费 | |||||
| </view> | |||||
| <view class=""> | |||||
| </view> | |||||
| <view class=""> | |||||
| ¥{{ priceMap.pei_money }} | |||||
| </view> | |||||
| </view> | |||||
| <view | |||||
| :key="index" | |||||
| v-for="(item, index) in priceList"> | |||||
| <view class=""> | |||||
| {{ item.title }} | |||||
| </view> | |||||
| <view class=""> | |||||
| ¥{{ item.price }} | |||||
| </view> | |||||
| <view class=""> | |||||
| x{{ item.num }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 提交按钮 --> | |||||
| <view class="submit-btn"> | |||||
| <view class="r" @click="orderPay"> | |||||
| {{ submiitTitle }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- <uv-popup ref="couponPopup" | |||||
| :round="30"> | |||||
| <couponList | |||||
| ref="couponList" | |||||
| height="60vh" | |||||
| :depositPrice="depositPrice" | |||||
| :washPrice="washPrice" | |||||
| :rentPrice="rentPrice" | |||||
| :useType="0" | |||||
| @select="selectCoupon" /> | |||||
| </uv-popup> --> | |||||
| <uv-popup ref="addressPopup" :round="30"> | |||||
| <addressList ref="addressList" height="60vh" @select="selectAddress" /> | |||||
| </uv-popup> | |||||
| </uv-popup> | |||||
| </template> | |||||
| <script> | |||||
| import addressList from '../../address/addressList.vue' | |||||
| // import couponList from './couponList.vue' | |||||
| import { mapState } from 'vuex' | |||||
| export default { | |||||
| components: { | |||||
| addressList, | |||||
| // couponList, | |||||
| }, | |||||
| props: { | |||||
| submiitTitle: { | |||||
| default: '立即下单', | |||||
| type: String, | |||||
| }, | |||||
| totalPrice : {//总金额 | |||||
| default : 0 | |||||
| }, | |||||
| priceList : {//商品列表 | |||||
| default : [] | |||||
| }, | |||||
| }, | |||||
| computed : { | |||||
| ...mapState(['configList', 'priceMap']), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| address: { | |||||
| name: '请选择联系人', | |||||
| addressDetail: '', | |||||
| }, | |||||
| addressTotal: 0, | |||||
| coupon : { | |||||
| // price : 0, | |||||
| }, | |||||
| couponText : '请选择', | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 打开 | |||||
| open() { | |||||
| this.$refs.popup.open('bottom') | |||||
| // this.$refs.couponList.getData() | |||||
| // this.$refs.couponPopup.close() | |||||
| // 获取地址列表 | |||||
| this.$refs.addressList.getAddressList().then(res => { | |||||
| this.addressTotal = res.total | |||||
| if (this.addressTotal != 0) { | |||||
| this.address = res.records[0] | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 计算优惠金额 | |||||
| getPrice(){ | |||||
| // 减免押金 | |||||
| if(this.coupon.couponFlag && | |||||
| this.coupon.couponCondition <= this.depositPrice){ | |||||
| return { | |||||
| coupon : this.coupon.couponPrice, | |||||
| price : (this.price - this.coupon.couponPrice).toFixed(2), | |||||
| } | |||||
| } | |||||
| // 减免租金 | |||||
| if(this.coupon.leaseCouponFlag && | |||||
| this.coupon.leaseCouponCondition <= this.rentPrice){ | |||||
| return { | |||||
| coupon : this.coupon.leaseCouponPrice, | |||||
| price : (this.price - this.coupon.leaseCouponPrice).toFixed(2), | |||||
| } | |||||
| } | |||||
| return {} | |||||
| }, | |||||
| // 选择优惠劵 | |||||
| selectCoupon(e){ | |||||
| this.couponText = e.couponName | |||||
| this.coupon = e | |||||
| this.$refs.couponPopup.close() | |||||
| }, | |||||
| // 关闭 | |||||
| close() { | |||||
| this.$refs.popup.close() | |||||
| }, | |||||
| // 打开选择地址 | |||||
| openAddress() { | |||||
| if (this.addressTotal == 0) { | |||||
| this.$refs.popup.close() | |||||
| return uni.navigateTo({ | |||||
| url: '/pages_order/mine/address?type=back' | |||||
| }) | |||||
| } | |||||
| this.$refs.addressPopup.open('bottom') | |||||
| }, | |||||
| // 选择地址 | |||||
| selectAddress(e) { | |||||
| this.address = e | |||||
| this.$refs.addressPopup.close() | |||||
| }, | |||||
| orderPay() { | |||||
| this.$emit('submit', { | |||||
| addressId : this.address.id, | |||||
| couponId : this.coupon.id | |||||
| }) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .content { | |||||
| max-height: 80vh; | |||||
| overflow: hidden; | |||||
| overflow-y: auto; | |||||
| padding-top: 30rpx; | |||||
| .address { | |||||
| display: flex; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| margin-bottom: 20rpx; | |||||
| image { | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| margin: 20rpx; | |||||
| } | |||||
| view { | |||||
| margin: 20rpx; | |||||
| overflow: hidden; //超出的文本隐藏 | |||||
| text-overflow: ellipsis; //溢出用省略号显示 | |||||
| white-space: nowrap; //溢出不换行 | |||||
| } | |||||
| .icon { | |||||
| margin-left: auto; | |||||
| } | |||||
| } | |||||
| .payInfoMessage{ | |||||
| line-height: 50rpx; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| .expense-detail { | |||||
| padding: 30rpx; | |||||
| background-color: #fff; | |||||
| font-size: 28rpx; | |||||
| .title { | |||||
| font-weight: 600; | |||||
| } | |||||
| .detail { | |||||
| background-color: #F6F6F6; | |||||
| color: #717171; | |||||
| margin: 10rpx 0; | |||||
| padding: 10rpx 20rpx; | |||||
| line-height: 50rpx; | |||||
| &>view{ | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| &>view{ | |||||
| &:nth-child(1){ | |||||
| flex: 4; | |||||
| overflow:hidden; //超出的文本隐藏 | |||||
| text-overflow:ellipsis; //溢出用省略号显示 | |||||
| white-space:nowrap; //溢出不换行 | |||||
| } | |||||
| &:nth-child(2){ | |||||
| flex: 2; | |||||
| text-align: right; | |||||
| } | |||||
| &:nth-child(3){ | |||||
| text-align: right; | |||||
| flex: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .coupon{ | |||||
| text-align: center; | |||||
| 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%; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||