| @ -1,259 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar/> | |||
| <view class="user"> | |||
| <uv-checkbox-group | |||
| shape="circle" | |||
| v-model="checkboxValue"> | |||
| <uv-swipe-action> | |||
| <view | |||
| v-for="(item, index) in list" | |||
| :key="index"> | |||
| <view style="margin-top: 20rpx;"></view> | |||
| <uv-swipe-action-item | |||
| :options="options"> | |||
| <view class="item"> | |||
| <view class="checkbox"> | |||
| <uv-checkbox | |||
| :name="item.id" | |||
| activeColor="#FA5A0A" | |||
| size="40rpx" | |||
| icon-size="35rpx" | |||
| ></uv-checkbox> | |||
| </view> | |||
| <image | |||
| class="image" | |||
| src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" | |||
| mode=""></image> | |||
| <view class="info"> | |||
| <view class="title"> | |||
| <view class=""> | |||
| {{ item.title }} | |||
| </view> | |||
| <view class=""> | |||
| <uv-number-box v-model="item.num" | |||
| @change="valChange"></uv-number-box> | |||
| </view> | |||
| </view> | |||
| <view class="unit"> | |||
| 规格:{{ item.unit }} | |||
| <uv-icon name="arrow-down"></uv-icon> | |||
| </view> | |||
| <view class="price"> | |||
| ¥<text>{{ item.price }}</text>元 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-swipe-action-item> | |||
| </view> | |||
| </uv-swipe-action> | |||
| </uv-checkbox-group> | |||
| <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 class=""> | |||
| ¥<text>{{ totalPrice }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="text"> | |||
| 共{{ checkboxValue.length }}件,已享受更低优惠 | |||
| </view> | |||
| </view> | |||
| <view class="btn"> | |||
| 去结算 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <tabber select="3" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| }, | |||
| data() { | |||
| return { | |||
| value : 0, | |||
| checkboxValue : [], | |||
| options: [ | |||
| { | |||
| text: '删除', | |||
| style: { | |||
| backgroundColor: '#FA5A0A' | |||
| } | |||
| }, | |||
| ], | |||
| list : [ | |||
| { | |||
| id : 1, | |||
| title : '桌布租赁', | |||
| num : 1, | |||
| price : 299, | |||
| unit : '120*40*75【桌子尺寸】', | |||
| }, | |||
| { | |||
| id : 2, | |||
| title : '桌布租赁', | |||
| num : 1, | |||
| price : 299, | |||
| unit : '120*40*75【桌子尺寸】', | |||
| }, | |||
| ], | |||
| } | |||
| }, | |||
| computed: { | |||
| totalPrice(){ | |||
| if (!this.checkboxValue.length) { | |||
| return 0 | |||
| } | |||
| let price = 0 | |||
| this.list.forEach(n => { | |||
| if(this.checkboxValue.includes(n.id)){ | |||
| price += n.price * n.num | |||
| } | |||
| }) | |||
| return price | |||
| }, | |||
| }, | |||
| methods: { | |||
| valChange(){ | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| padding-bottom: 200rpx; | |||
| /deep/ .uv-swipe-action{ | |||
| width: 100%; | |||
| } | |||
| } | |||
| .user { | |||
| .item{ | |||
| background-color: #fff; | |||
| display: flex; | |||
| padding: 30rpx; | |||
| .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: 28rpx; | |||
| padding: 10rpx 20rpx; | |||
| text{ | |||
| font-size: 36rpx; | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .action{ | |||
| width: 700rpx; | |||
| position: fixed; | |||
| bottom: 220rpx; | |||
| left: 25rpx; | |||
| background-color: #fff; | |||
| height: 100rpx; | |||
| border-radius: 50rpx; | |||
| 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: 20rpx; | |||
| color: #717171; | |||
| } | |||
| } | |||
| .btn{ | |||
| margin-left: auto; | |||
| background-color: $uni-color; | |||
| height: 100%; | |||
| padding: 0 50rpx; | |||
| color: #fff; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,181 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar/> | |||
| <view class="category"> | |||
| <uv-vtabs | |||
| :chain="chain" | |||
| :list="category" | |||
| height="1000px" | |||
| :barItemBadgeStyle="{right:'20px',top:'12px'}" | |||
| @change="change"> | |||
| <uv-vtabs-item> | |||
| <view class="category-title"> | |||
| 租赁 | |||
| </view> | |||
| <view class="list"> | |||
| <view class="item" v-for="(item,index) in list" :key="index" | |||
| @click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"> | |||
| <view class="item-image"> | |||
| <image | |||
| :src="item.image" | |||
| mode="aspectFill"></image> | |||
| </view> | |||
| <view class="item-unit"> | |||
| <text class="text">{{item.unit}}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-vtabs-item> | |||
| </uv-vtabs> | |||
| </view> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| }, | |||
| data() { | |||
| return { | |||
| category: [ | |||
| { | |||
| name : '桌布' | |||
| }, | |||
| { | |||
| name : '桌布' | |||
| }, | |||
| { | |||
| name : '桌布' | |||
| }, | |||
| ], | |||
| list : [ | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| { | |||
| unit : '100*50*60', | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| }, | |||
| ], | |||
| chain: false, | |||
| value: 0 | |||
| } | |||
| }, | |||
| computed: { | |||
| list2() { | |||
| const _list = this.list[this.value]?.childrens; | |||
| return _list ? _list : []; | |||
| } | |||
| }, | |||
| onReady() { | |||
| }, | |||
| methods: { | |||
| change(index) { | |||
| console.log('选项改变:', index) | |||
| this.value = index; | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .category { | |||
| font-size: 30rpx; | |||
| color: #333; | |||
| min-height: 100vh; | |||
| .category-title{ | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 120rpx; | |||
| &::before, | |||
| &::after { | |||
| position: absolute; | |||
| top: 50%; | |||
| content: ''; | |||
| width: 10%; | |||
| border-top: 2rpx solid black; | |||
| } | |||
| &::before { | |||
| left: 25%; | |||
| } | |||
| &::after { | |||
| right: 25%; | |||
| } | |||
| } | |||
| .list{ | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| margin: 0 auto; | |||
| width: 490rpx; | |||
| .item { | |||
| padding: 10rpx 20rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| .item-image { | |||
| width: 120rpx; | |||
| height: 120rpx; | |||
| image{ | |||
| height: 100%; | |||
| width: 100%; | |||
| border-radius: 50%; | |||
| } | |||
| } | |||
| .item-unit { | |||
| font-size: 24rpx; | |||
| margin-top: 15rpx; | |||
| color: #555; | |||
| } | |||
| } | |||
| .gap { | |||
| padding: 0 30rpx; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -0,0 +1,44 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar | |||
| title="订单中心" | |||
| /> | |||
| <tabber select="2"/> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import { mapGetters } from 'vuex' | |||
| export default { | |||
| components : { | |||
| tabber, | |||
| }, | |||
| computed : { | |||
| ...mapGetters(['userShop']), | |||
| }, | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| onShow() { | |||
| }, | |||
| //滚动到屏幕底部 | |||
| onReachBottom() { | |||
| }, | |||
| methods: { | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| } | |||
| </style> | |||
| @ -0,0 +1,34 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar/> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| }, | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| computed: { | |||
| }, | |||
| onReady() { | |||
| }, | |||
| methods: { | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| </style> | |||
| @ -1,263 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar | |||
| title="订单中心" | |||
| /> | |||
| <uv-tabs :list="tabs" | |||
| :activeStyle="{color : '#FD5100', fontWeight : 600}" | |||
| lineColor="#FD5100" | |||
| lineHeight="8rpx" | |||
| lineWidth="50rpx" | |||
| @click="clickTabs"></uv-tabs> | |||
| <view v-if="orderList.length > 0" class="list"> | |||
| <view class="item" | |||
| v-for="(item, index) in orderList.records" | |||
| @click="toOrderDetail(item.id)" | |||
| :key="index"> | |||
| <view class="top"> | |||
| <view class="service"> | |||
| <text>{{item.projectId_dictText}}</text> | |||
| <text>{{item.type_dictText}}</text> | |||
| </view> | |||
| <view class="status"> | |||
| <text> {{item.state_dictText}}</text> | |||
| </view> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="left"> | |||
| <image mode="aspectFill" :src="item.image"></image> | |||
| </view> | |||
| <view class="right"> | |||
| <view class="text-hidden-1"> | |||
| 客户姓名:{{item.name}} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| 产品规格:{{item.unit}} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| 租赁地址:{{item.address}} | |||
| </view> | |||
| <!-- <view class="text-hidden-1"> | |||
| 总计时间:{{item.useTime}}分钟 | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="price"> | |||
| 总价格:<text class="num">{{item.money}}元</text> | |||
| </view> | |||
| <view class="b1"> | |||
| 查看物流 | |||
| </view> | |||
| <!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0"> | |||
| 立即付款 | |||
| </view> | |||
| <view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3"> | |||
| 再来一单 | |||
| </view> | |||
| <view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3"> | |||
| 立即评价 | |||
| </view> | |||
| <view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4"> | |||
| 再来一单 | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <tabber select="2"/> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import { mapGetters } from 'vuex' | |||
| export default { | |||
| components : { | |||
| tabber, | |||
| }, | |||
| computed : { | |||
| ...mapGetters(['userShop']), | |||
| }, | |||
| data() { | |||
| return { | |||
| tabs: [{ | |||
| name: '全部' | |||
| }, | |||
| { | |||
| name: '租赁押金' | |||
| }, | |||
| { | |||
| name: '水洗租赁' | |||
| }, | |||
| { | |||
| name: '破损换货' | |||
| }, | |||
| { | |||
| name: '退货退款' | |||
| } | |||
| ], | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10 | |||
| }, | |||
| // orderList: [ | |||
| // { | |||
| // money : 99.99, | |||
| // address : '广东省广州市越秀区城南故事C3栋2802', | |||
| // name : '李**', | |||
| // phone : '150*****091', | |||
| // unit : '120*40*75【桌子尺寸】', | |||
| // image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| // state_dictText : '已完成', | |||
| // } | |||
| // ], //订单列表数据 | |||
| orderList : { | |||
| records : [], | |||
| total : 0, | |||
| }, | |||
| state : -1, | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.orderPage() | |||
| }, | |||
| //滚动到屏幕底部 | |||
| onReachBottom() { | |||
| if(this.queryParams.pageSize < this.orderList.total){ | |||
| this.queryParams.pageSize += 10 | |||
| this.orderPage() | |||
| } | |||
| }, | |||
| methods: { | |||
| orderPage(){ | |||
| let queryParams = { | |||
| ...this.queryParams, | |||
| } | |||
| if(this.state != -1){ | |||
| queryParams.state = this.state | |||
| } | |||
| this.$api('orderPage', queryParams, res => { | |||
| if(res.code == 200){ | |||
| this.orderList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| //点击tab栏 | |||
| clickTabs(index) { | |||
| if (index == 0) { | |||
| this.state = -1; | |||
| } else { | |||
| this.state = index - 1; | |||
| } | |||
| this.queryParams.pageSize = 10 | |||
| this.orderPage() | |||
| }, | |||
| //跳转订单详情页面 | |||
| toOrderDetail(id) { | |||
| uni.navigateTo({ | |||
| url: '/pages_order/order/orderDetail?id=' + id | |||
| }) | |||
| }, | |||
| getOrderList(){ | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| } | |||
| .list { | |||
| .item { | |||
| width: calc(100% - 40rpx); | |||
| background-color: #fff; | |||
| margin: 20rpx; | |||
| box-sizing: border-box; | |||
| border-radius: 16rpx; | |||
| padding: 30rpx; | |||
| .top { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| font-size: 30rpx; | |||
| .service {} | |||
| .status { | |||
| font-size: 26rpx; | |||
| font-weight: 600; | |||
| } | |||
| } | |||
| .content { | |||
| display: flex; | |||
| margin: 10rpx 0; | |||
| .left { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| image { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| } | |||
| .right { | |||
| width: calc(100% - 160rpx); | |||
| color: #777; | |||
| font-size: 24rpx; | |||
| padding-left: 20rpx; | |||
| line-height: 40rpx; | |||
| background-color: #F8F8F8; | |||
| } | |||
| } | |||
| .bottom { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| font-size: 25rpx; | |||
| .price { | |||
| font-weight: 900; | |||
| text { | |||
| color: #ff780099; | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| .b1 { | |||
| border: 1px solid #777; | |||
| color: #777; | |||
| box-sizing: border-box; | |||
| } | |||
| .b2 { | |||
| background: linear-gradient(178deg, #4FD3BC, #60C285); | |||
| color: #fff; | |||
| } | |||
| view { | |||
| margin: 12rpx; | |||
| border-radius: 28rpx; | |||
| padding: 8rpx 28rpx; | |||
| margin-bottom: 0; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||