| @ -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> | |||