| @ -0,0 +1,277 @@ | |||||
| <template> | |||||
| <uv-popup ref="popup" | |||||
| :round="30" | |||||
| @change="$refs.couponPopup.close()" | |||||
| bgColor="#f7f7f7"> | |||||
| <view class="content"> | |||||
| <!-- 地址 --> | |||||
| <view class="address" @click="openAddress"> | |||||
| <image src="/static/image/address/selectIcon.png" mode=""></image> | |||||
| <view class=""> | |||||
| {{ 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="expense-detail"> | |||||
| <view class="title"> | |||||
| 费用明细 | |||||
| </view> | |||||
| <view class="detail" v-if="price"> | |||||
| <view> | |||||
| 应付款:¥{{ price }} | |||||
| </view> | |||||
| <view v-if="depositPrice"> | |||||
| 押金:¥{{ depositPrice }} | |||||
| </view> | |||||
| <view v-if="washPrice"> | |||||
| 水洗费:¥{{ washPrice }} | |||||
| </view> | |||||
| <view v-if="rentPrice"> | |||||
| 租金:¥{{ rentPrice }} | |||||
| </view> | |||||
| <view v-if="coupon.price"> | |||||
| 优惠:-¥{{ coupon.price }} | |||||
| </view> | |||||
| <view v-if="coupon.price"> | |||||
| 实付款:¥{{ price - coupon.price }} | |||||
| </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 '@/components/address/addressList.vue' | |||||
| import couponList from './couponList.vue' | |||||
| export default { | |||||
| components: { | |||||
| addressList, | |||||
| couponList, | |||||
| }, | |||||
| props: { | |||||
| submiitTitle: { | |||||
| default: '立即租赁', | |||||
| type: String, | |||||
| }, | |||||
| price : {//总金额 | |||||
| default : 0 | |||||
| }, | |||||
| depositPrice: {//押金 | |||||
| default: 0 | |||||
| }, | |||||
| washPrice: {//水洗费 | |||||
| default: 0 | |||||
| }, | |||||
| rentPrice: {//租金 | |||||
| default: 0 | |||||
| }, | |||||
| }, | |||||
| 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] | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 选择优惠劵 | |||||
| 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() | |||||
| }, | |||||
| // 选择规格 | |||||
| selectUnit(item, index) { | |||||
| this.unit = item | |||||
| this.unitIndex = index | |||||
| }, | |||||
| addCart() { | |||||
| this.$api('cartAdd', { | |||||
| id: this.detail.id, | |||||
| skuId: this.unit.id, | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| uni.showToast({ | |||||
| title: '添加成功', | |||||
| }); | |||||
| this.$refs.popup.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; | |||||
| } | |||||
| } | |||||
| .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; | |||||
| } | |||||
| } | |||||
| .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> | |||||
| @ -0,0 +1,191 @@ | |||||
| <template> | |||||
| <scroll-view | |||||
| scroll-y="true" | |||||
| :style="{height: height}" | |||||
| @scrolltolower="loadMoreData"> | |||||
| <view class="list"> | |||||
| <view class="item" | |||||
| v-for="(item,index) in list" | |||||
| @click="select(item)" | |||||
| :key="index"> | |||||
| <view class="price"> | |||||
| <view class="num"> | |||||
| <view class="icon"> | |||||
| ¥ | |||||
| </view> | |||||
| {{ item.price }} | |||||
| </view> | |||||
| <view class="tiao"> | |||||
| {{ item.useType_dictText }}满{{ item.conditionPrice }}可用 | |||||
| </view> | |||||
| </view> | |||||
| <view class="date"> | |||||
| <view> | |||||
| 有效期{{ item.endTime || '不限' }} | |||||
| </view> | |||||
| <view> | |||||
| {{ item.type_dictText }}使用 | |||||
| </view> | |||||
| </view> | |||||
| <view class="status"> | |||||
| <!-- 已 使 用 --> | |||||
| <!-- 立 即 使 用 --> | |||||
| {{ item.status_dictText }} | |||||
| </view> | |||||
| <view class="del" | |||||
| v-if="isSelect(item)"> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <uv-empty | |||||
| v-if="list.length == 0" | |||||
| text="空空如也" | |||||
| textSize="30rpx" | |||||
| iconSize="200rpx" | |||||
| icon="list"></uv-empty> | |||||
| </scroll-view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinList from '@/mixins/list.js' | |||||
| export default { | |||||
| name:"couponList", | |||||
| mixins : [mixinList], | |||||
| props : { | |||||
| height : { | |||||
| default : 'calc(90vh - 180rpx)' | |||||
| }, | |||||
| // 押金 | |||||
| depositPrice : { | |||||
| }, | |||||
| washPrice: {//水洗费 | |||||
| }, | |||||
| rentPrice: {//租金 | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| mixinsListApi : 'couponPage' | |||||
| }; | |||||
| }, | |||||
| methods : { | |||||
| select(item){ | |||||
| if(this.isSelect(item)){ | |||||
| return | |||||
| } | |||||
| this.$emit('select', item) | |||||
| }, | |||||
| isSelect(item){ | |||||
| // 押金 | |||||
| if(this.depositPrice && | |||||
| item.useType == 0 && | |||||
| this.depositPrice >= item.conditionPrice){ | |||||
| return false | |||||
| } | |||||
| // 租金 | |||||
| if(this.rentPrice && | |||||
| item.useType == 1 && | |||||
| this.rentPrice >= item.conditionPrice){ | |||||
| return false | |||||
| } | |||||
| // 水洗 | |||||
| if(this.washPrice && | |||||
| item.useType == 2 && | |||||
| this.washPrice >= item.conditionPrice){ | |||||
| return false | |||||
| } | |||||
| return true | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .list{ | |||||
| .item{ | |||||
| color: #4FD3BC; | |||||
| position: relative; | |||||
| width: calc(100% - 40rpx); | |||||
| height: 220rpx; | |||||
| background: url(../../static/image/coupon/c.png); | |||||
| background-size: 100% 100%; | |||||
| margin: 20rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 30rpx; | |||||
| .status{ | |||||
| position: absolute; | |||||
| right: 20rpx; | |||||
| top: 20rpx; | |||||
| height: calc(100% - 40rpx); | |||||
| width: 60rpx; | |||||
| writing-mode:vertical-rl; | |||||
| box-sizing: border-box; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| border-radius: 60rpx; | |||||
| font-size: 26rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| .price{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .num{ | |||||
| color: #4FD3BC; | |||||
| font-weight: 900; | |||||
| font-size: 70rpx; | |||||
| display: flex; | |||||
| align-items: flex-end; | |||||
| .icon{ | |||||
| color: #fff; | |||||
| background-color: #4FD3BC; | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| font-size: 20rpx; | |||||
| border-radius: 14rpx; | |||||
| margin-bottom: 14rpx; | |||||
| margin-right: 10rpx; | |||||
| } | |||||
| } | |||||
| .tiao{ | |||||
| padding: 10rpx 20rpx; | |||||
| background-color: #9ee3d1; | |||||
| color: #25a28c; | |||||
| font-size: 22rpx; | |||||
| margin-left: 20rpx; | |||||
| border-radius: 10rpx; | |||||
| } | |||||
| } | |||||
| .date{ | |||||
| display: flex; | |||||
| font-size: 24rpx; | |||||
| view{ | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .del{ | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: #ffffff88; | |||||
| z-index: 99; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,122 +0,0 @@ | |||||
| <template> | |||||
| <!-- 水洗店的操作按钮 --> | |||||
| <view class="orderTypeBtn"> | |||||
| <!-- 租赁 --> | |||||
| <view class="btns" v-if="type == 0"> | |||||
| <view class="btn1" | |||||
| v-if="status == 2" | |||||
| @click="confirmReceiveGoods"> | |||||
| 确认收货 | |||||
| </view> | |||||
| <view class="btn2" | |||||
| v-if="status > 1"> | |||||
| 查看物流 | |||||
| </view> | |||||
| </view> | |||||
| <!-- 水洗 --> | |||||
| <view class="btns" v-if="type == 1"> | |||||
| <!-- | |||||
| 水洗订单:3待支付 4水洗店接单 5水洗店检查 6开始清洗 | |||||
| --> | |||||
| <view class="btn1"> | |||||
| 开始清洗 | |||||
| </view> | |||||
| <!-- <view class="btn2"> | |||||
| 线下配送 | |||||
| </view> --> | |||||
| </view> | |||||
| <!-- 破损(换货) --> | |||||
| <view class="btns" v-if="type==2"> | |||||
| <view class="btn1" @click="confirmReceiveGoods"> | |||||
| <!-- 快递寄回 --> | |||||
| 确认收货 | |||||
| </view> | |||||
| <view class="btn2"> | |||||
| 线下配送 | |||||
| </view> | |||||
| </view> | |||||
| <!-- 退货 --> | |||||
| <view class="btns" v-if="type==3"> | |||||
| <view class="btn1" @click="confirmReceiveGoods"> | |||||
| <!-- 快递寄回 --> | |||||
| 确认收货 | |||||
| </view> | |||||
| <view class="btn2"> | |||||
| 线下配送 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| props: { | |||||
| type: { | |||||
| default : 0, | |||||
| }, | |||||
| status: { | |||||
| default : 0, | |||||
| }, | |||||
| detail : { | |||||
| default : {} | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 确认收货 | |||||
| confirmReceiveGoods() { | |||||
| this.$api('orderConfirm', { | |||||
| id: this.detail.id | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| uni.navigateBack(-1) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .orderTypeBtn { | |||||
| .btns { | |||||
| margin-top: 50rpx; | |||||
| display: flex; | |||||
| view { | |||||
| margin: 0 20rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #fff; | |||||
| background-color: $uni-color; | |||||
| padding: 10rpx 30rpx; | |||||
| border-radius: 40rpx; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| .btn1 { | |||||
| // background-color: #FFFFFF; | |||||
| // border: 1px solid #A7A7A7; | |||||
| // color: #A7A7A7; | |||||
| } | |||||
| .btn2 { | |||||
| background-color: #FFFFFF; | |||||
| border: 1px solid #A7A7A7; | |||||
| color: #A7A7A7; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,30 @@ | |||||
| <template> | |||||
| <view> | |||||
| <navbar title="我的优惠劵" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <couponList ref="couponList"/> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import couponList from '@/components/user/couponList.vue' | |||||
| export default { | |||||
| components : { | |||||
| couponList, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| onShow() { | |||||
| this.$refs.couponList.getData() | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style> | |||||
| </style> | |||||