3 changed files with 477 additions and 34 deletions
Split View
Diff Options
-
+4 -1pages_order/components/product/submitUnitSelect.vue
-
+455 -0pages_order/order/createWash - 副本.vue
-
+18 -33pages_order/order/createWash.vue
+ 4
- 1
pages_order/components/product/submitUnitSelect.vue
View File
+ 455
- 0
pages_order/order/createWash - 副本.vue
View File
| @ -0,0 +1,455 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="我要水洗" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="tabs"> | |||
| <uv-tabs :list="tabs" :activeStyle="{color : '#FD5100', fontWeight : 600}" lineColor="#FD5100" lineHeight="8rpx" | |||
| lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs> | |||
| </view> | |||
| <!-- 选择租赁物品 --> | |||
| <view class="box d"> | |||
| <uv-checkbox-group shape="circle" v-model="checkboxValue" | |||
| > | |||
| <view v-for="(item, index) in list" :key="index" class="item"> | |||
| <view class="checkbox"> | |||
| <!-- <uv-checkbox | |||
| :name="item.id" | |||
| :disabled="item.status != 0 | |||
| || !item.startTime && item.leaseFlag | |||
| || item.isWash" | |||
| activeColor="#FA5A0A" | |||
| size="40rpx" | |||
| icon-size="35rpx"></uv-checkbox> --> | |||
| <uv-checkbox | |||
| :name="item.id" | |||
| :disabled="!!item.statusInfo" | |||
| activeColor="#FA5A0A" | |||
| size="40rpx" | |||
| icon-size="35rpx"></uv-checkbox> | |||
| </view> | |||
| <image class="image" :src="item.goodsPic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" | |||
| mode=""></image> | |||
| <view class="info"> | |||
| <view class="title"> | |||
| <view>{{ item.goodsName }}</view> | |||
| <view> | |||
| <!-- <uv-number-box v-model="item.num" @change="e => valChange(item, e)"></uv-number-box> --> | |||
| 数量：{{ item.num }} | |||
| </view> | |||
| </view> | |||
| <view class="unit"> | |||
| 规格：{{ item.sku }} | |||
| <!-- <uv-icon name="arrow-down"></uv-icon> --> | |||
| </view> | |||
| <!-- <view class="wan" | |||
| v-if="!item.startTime | |||
| && item.leaseFlag | |||
| && item.status == 0"> | |||
| 确认收货后，方可水洗 | |||
| </view> | |||
| <view class="wan" v-else-if="item.status != 0"> | |||
| {{ statusText[item.status] }} | |||
| </view> | |||
| <view class="wan" v-else-if="item.isWash"> | |||
| 水洗中 | |||
| </view> --> | |||
| <view class="wan" v-if="item.statusInfo"> | |||
| {{ item.statusInfo }} | |||
| </view> | |||
| <view class="price" v-else> | |||
| <view class="" v-if="item.zujin"> | |||
| 租金￥ | |||
| <text>{{ item.zujin }}</text> | |||
| 元 | |||
| </view> | |||
| <view class="" v-if="item.washPrice"> | |||
| 水洗费￥ | |||
| <text>{{ item.washPrice }}</text> | |||
| 元 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-checkbox-group> | |||
| </view> | |||
| <!-- <view class="btn" @click="submit"> | |||
| <button class="a">水洗下单<text v-if="price">（{{price}}￥）</text></button> | |||
| </view> --> | |||
| <view class="action"> | |||
| <view class="icon"> | |||
| <image src="/static/image/cart/1.png" mode=""></image> | |||
| <view class="num">{{ checkboxValue.length }}</view> | |||
| </view> | |||
| <view class="price"> | |||
| <view class="count"> | |||
| 合计 | |||
| <view> | |||
| ￥ | |||
| <text>{{ price }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="text"> | |||
| <!-- 共{{ checkboxValue.length }}件，已享受更低优惠 --> | |||
| 含租金{{zujin}}￥，水洗费{{washPrice}}￥ | |||
| </view> | |||
| </view> | |||
| <view class="btn2" @click="goCleaning">结算</view> | |||
| </view> | |||
| <cartSubmitSelect | |||
| @submit="ordersPay" | |||
| :price="price" | |||
| :washPrice="washPrice" | |||
| :rentPrice="zujin" | |||
| submiitTitle="立即水洗" | |||
| ref="cartSubmitSelect"/> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import cartSubmitSelect from '@/components/user/cartSubmitSelect.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| import mixinLease from '@/mixins/lease.js' | |||
| export default { | |||
| mixins : [mixinsList, mixinLease], | |||
| components: { | |||
| cartSubmitSelect, | |||
| }, | |||
| data() { | |||
| return { | |||
| checkboxValue : [], | |||
| statusText : ['正常', '换货中', '退货中'], | |||
| tabs: [{ | |||
| name: '选择租赁物品' | |||
| }, | |||
| { | |||
| name: '选择我的物品' | |||
| }, | |||
| ], | |||
| type: 1, | |||
| mixinsListApi : 'getLeasePage', | |||
| } | |||
| }, | |||
| computed : { | |||
| price(){ | |||
| return this.washPrice + this.zujin | |||
| }, | |||
| washPrice(){ | |||
| if(this.checkboxValue.length == 0){ | |||
| return 0 | |||
| } | |||
| let price = 0 | |||
| this.list.forEach(n => { | |||
| if(this.checkboxValue.includes(n.id)){ | |||
| price += n.washPrice || 0 | |||
| } | |||
| }) | |||
| return price | |||
| }, | |||
| zujin(){ | |||
| if(this.checkboxValue.length == 0){ | |||
| return 0 | |||
| } | |||
| let price = 0 | |||
| this.list.forEach(n => { | |||
| if(this.checkboxValue.includes(n.id)){ | |||
| price += n.zujin || 0 | |||
| } | |||
| }) | |||
| return price | |||
| }, | |||
| }, | |||
| onShow() { | |||
| this.getData() | |||
| }, | |||
| methods: { | |||
| //点击tab栏 | |||
| clickTabs({ | |||
| index, | |||
| name | |||
| }) { | |||
| this.type = index ? 0 : 1; | |||
| this.queryParams.pageSize = 10 | |||
| this.checkboxValue = [] | |||
| // this.mixinsListApi = ['orderPage', 'orderPage'][index] | |||
| this.getData() | |||
| }, | |||
| // 发请求之前处理参数 | |||
| beforeGetData(){ | |||
| let data = {} | |||
| data.leaseFlag = this.type | |||
| return data | |||
| }, | |||
| getDataThen(list){ | |||
| // list[0] && list[0].d = true | |||
| list.forEach(n => { | |||
| n.statusInfo = this.isLeaseStatus(n) | |||
| }) | |||
| }, | |||
| // 去结算按钮 | |||
| goCleaning() { | |||
| if (this.checkboxValue.length < 1) { | |||
| uni.showToast({ | |||
| title: "请勾选商品", | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| this.$refs.cartSubmitSelect.open('bottom') | |||
| }, | |||
| //商品下单 | |||
| ordersPay({ addressId, couponId }) { | |||
| var self = this | |||
| // var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id | |||
| let data = [] | |||
| let records = this.list | |||
| for (var i = 0; i < records.length; i++) { | |||
| if (this.checkboxValue.includes(records[i].id)) { | |||
| data.push({ | |||
| leaseId: records[i].id, //租赁id | |||
| addressId, //地址id | |||
| type : 1, | |||
| }) | |||
| } | |||
| } | |||
| this.$api('orderCreate', { | |||
| req: JSON.stringify(data) | |||
| }, res => { | |||
| if (res.code == 200) { | |||
| let form = { | |||
| id: res.result.id | |||
| } | |||
| if(couponId){ | |||
| form.couponId = couponId | |||
| } | |||
| // 不管有没有支付，都要清除购物车数据 | |||
| // self.$api('cartDel', { | |||
| // id: deleteCartIds | |||
| // }, res => { | |||
| // if (res.code == 200) { | |||
| // self.getData() | |||
| // } | |||
| // }) | |||
| this.$api('orderPay', form, res => { | |||
| if (res.code == 200) { | |||
| uni.requestPayment({ | |||
| provider: 'wxpay', // 服务提提供商 | |||
| timeStamp: res.result.timeStamp, // 时间戳 | |||
| nonceStr: res.result.nonceStr, // 随机字符串 | |||
| package: res.result.packageValue, | |||
| signType: res.result.signType, // 签名算法 | |||
| paySign: res.result.paySign, // 签名 | |||
| success: function(res) { | |||
| console.log('支付成功', res); | |||
| uni.redirectTo({ | |||
| url: '/pages/index/order' | |||
| }) | |||
| }, | |||
| fail: function(err) { | |||
| console.log('支付失败', err); | |||
| // self.$refs.confirmationPopup.close() | |||
| uni.redirectTo({ | |||
| url: '/pages/index/order' | |||
| }) | |||
| uni.showToast({ | |||
| icon: 'none', | |||
| title: "支付失败" | |||
| }) | |||
| } | |||
| }); | |||
| } | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| padding-bottom: 200rpx; | |||
| .tabs{ | |||
| position: sticky; | |||
| top: calc(var(--status-bar-height) + 120rpx); | |||
| background-color: #fff; | |||
| // padding-top: 20rpx; | |||
| } | |||
| .btn { | |||
| display: flex; | |||
| justify-content: center; | |||
| position: fixed; | |||
| bottom: 20rpx; | |||
| width: 100%; | |||
| .a { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 70%; | |||
| height: 100rpx; | |||
| color: #FFF; | |||
| background-color: $uni-color; | |||
| border: 1px solid red; | |||
| border-radius: 100rpx; | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| .d{ | |||
| .item { | |||
| background-color: #fff; | |||
| display: flex; | |||
| padding: 30rpx; | |||
| width: 690rpx; | |||
| .checkbox { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| .image { | |||
| width: 200rpx; | |||
| height: 200rpx; | |||
| border-radius: 20rpx; | |||
| } | |||
| .info { | |||
| flex: 1; | |||
| .title { | |||
| display: flex; | |||
| padding: 10rpx 20rpx; | |||
| justify-content: space-between; | |||
| } | |||
| .unit { | |||
| font-size: 24rpx; | |||
| padding: 10rpx 20rpx; | |||
| color: #717171; | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| .price { | |||
| color: $uni-color; | |||
| font-size: 24rpx; | |||
| padding: 10rpx 20rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| text { | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| .wan{ | |||
| color: $uni-color; | |||
| font-size: 26rpx; | |||
| padding: 10rpx 20rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .action { | |||
| width: 700rpx; | |||
| position: fixed; | |||
| bottom: 20rpx; | |||
| left: 25rpx; | |||
| background-color: #fff; | |||
| height: 130rpx; | |||
| border-radius: 65rpx; | |||
| box-shadow: 0 0 6rpx 6rpx #00000010; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| overflow: hidden; | |||
| .icon { | |||
| position: relative; | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| margin: 0 20rpx; | |||
| image { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| } | |||
| .num { | |||
| position: absolute; | |||
| right: 10rpx; | |||
| top: 0rpx; | |||
| background-color: $uni-color; | |||
| color: #fff; | |||
| font-size: 18rpx; | |||
| border-radius: 50%; | |||
| height: 30rpx; | |||
| width: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| .price { | |||
| .count { | |||
| display: flex; | |||
| font-size: 26rpx; | |||
| align-items: center; | |||
| view { | |||
| color: $uni-color; | |||
| margin-left: 10rpx; | |||
| text { | |||
| font-size: 32rpx; | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| } | |||
| .text { | |||
| font-size: 22rpx; | |||
| color: #717171; | |||
| } | |||
| } | |||
| .btn2 { | |||
| margin-left: auto; | |||
| background-color: $uni-color; | |||
| height: 100%; | |||
| padding: 0 50rpx; | |||
| color: #fff; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||