| @ -1,146 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar | |||
| title="收藏列表" | |||
| leftClick | |||
| @leftClick="$utils.navigateBack"/> | |||
| <uv-search placeholder="请输入搜索内容" v-model="keyword" height="80"></uv-search> | |||
| <!-- 标签选项 --> | |||
| <view class="Tabs"> | |||
| <uv-tabs :list="listt" @click="click" ></uv-tabs> | |||
| </view> | |||
| <view class="Urgent-Work-Order"> | |||
| <view class="Urgent-Work-List" v-for="(item,index) in 2 " > | |||
| <view class="Work-List"> | |||
| 任务号:GY1269103AC0 | |||
| </view> | |||
| <view class="Work-List"> | |||
| 担当信息:李林珠-15177689988 | |||
| </view> | |||
| <view class="Work-List"> | |||
| 机型信息:BSZ24861768 | |||
| </view> | |||
| <view class="Work-List"> | |||
| 数量:88 | |||
| </view> | |||
| <view class="Work-List"> | |||
| 工单状态:本体加工 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <tabber select="3" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| }, | |||
| data() { | |||
| return { | |||
| keyword: '水调歌头', | |||
| listt: [{ | |||
| name: '所有', | |||
| }, { | |||
| name: '备料中', | |||
| }, { | |||
| name: '本体加工' | |||
| }, { | |||
| name: '气密检测' | |||
| }, { | |||
| name: '挂机中' | |||
| }], | |||
| 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(){ | |||
| }, | |||
| click(item) { | |||
| console.log('item', item); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| padding-bottom: 200rpx; | |||
| /deep/ .uv-swipe-action{ | |||
| width: 100%; | |||
| } | |||
| .Tabs{ | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .Urgent-Work-Order{ | |||
| padding: 20rpx; | |||
| .Urgent-Work-List{ | |||
| margin-top: 20rpx; | |||
| border: 6rpx solid rgb(99 ,187 ,211); | |||
| border-radius: 25rpx; | |||
| padding: 15rpx; | |||
| .Work-List{ | |||
| margin: 15rpx 0rpx; | |||
| letter-spacing: 2px | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,159 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar | |||
| title="列表" | |||
| leftClick | |||
| @leftClick="$utils.navigateBack" | |||
| /> | |||
| <uv-search placeholder="请输入搜索内容" v-model="keyword" height="80"></uv-search> | |||
| <!-- 标签选项 --> | |||
| <view class="Tabs"> | |||
| <uv-tabs :list="listt" @click="click" ></uv-tabs> | |||
| </view> | |||
| <view class="Urgent-Work-Order"> | |||
| <WorkOrderitem | |||
| v-for="(item,index) in 2" | |||
| @click="$utils.navigateTo('/pages_order/order/WorkOrders')"/> | |||
| </view> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import WorkOrderitem from '@/components/work/WorkOrderitem.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| WorkOrderitem, | |||
| }, | |||
| data() { | |||
| return { | |||
| keyword: '水调歌头', | |||
| listt: [{ | |||
| name: '所有', | |||
| }, { | |||
| name: '备料中', | |||
| }, { | |||
| name: '本体加工' | |||
| }, { | |||
| name: '气密检测' | |||
| }, { | |||
| name: '挂机中' | |||
| }], | |||
| 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; | |||
| }, | |||
| click(item) { | |||
| console.log('item', item); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| background-color: #fff; | |||
| /deep/ .uv-vtabs { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| /deep/ .uv-vtabs__bar { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| /deep/ .uv-vtabs__content { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| .Tabs{ | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .Urgent-Work-Order{ | |||
| padding: 20rpx; | |||
| .Urgent-Work-List{ | |||
| margin-top: 20rpx; | |||
| border: 6rpx solid rgb(99 ,187 ,211); | |||
| border-radius: 25rpx; | |||
| padding: 15rpx; | |||
| .Work-List{ | |||
| margin: 15rpx 0rpx; | |||
| letter-spacing: 2px | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </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> | |||
| @ -1,93 +0,0 @@ | |||
| <template> | |||
| <view style=""> | |||
| <view v-for="item in commodityList" :key="item.title" class="address-item"> | |||
| <view class="itme1" @click="selectSp(item)"> | |||
| <view class="left"> | |||
| <img src="../../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||
| </view> | |||
| <view class="center"> | |||
| <view>{{ item.title }}</view> | |||
| <view>{{ item.smallTitle }}</view> | |||
| </view> | |||
| <view class="right">×{{item.total}}</view> | |||
| </view> | |||
| <uv-line></uv-line> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props: { | |||
| commodityList: { | |||
| default: [], | |||
| type: Array, | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| selectAddress: 0, | |||
| } | |||
| }, | |||
| methods: { | |||
| // 打开商品选择 | |||
| openCommodity() { | |||
| this.$emit('openSpPopup') | |||
| }, | |||
| // 选择了商品 | |||
| selectSp(e) { | |||
| console.log(this.commodityList,"this.csss") | |||
| console.log(e, '选择了商品') | |||
| this.$emit('selectSp', e) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .itme1 { | |||
| display: flex; | |||
| height: 150rpx; | |||
| width: 100vw; | |||
| background-color: #ffffff; | |||
| .left { | |||
| padding: 40rpx; | |||
| width: 20%; | |||
| border-radius: 10rpx; | |||
| background-color: #ffffff; | |||
| } | |||
| .center { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| gap: 20rpx; | |||
| width: 70%; | |||
| padding: 0rpx 0 0 20rpx; | |||
| background-color: #ffffff; | |||
| // 给第一个 view 设置样式 | |||
| > view:first-of-type { | |||
| font-size: 36rpx; | |||
| color: #333; | |||
| } | |||
| // 给第二个 view 设置样式 | |||
| > view:nth-of-type(2) { | |||
| font-size: 28rpx; | |||
| color: #666666; | |||
| } | |||
| } | |||
| .right { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 10%; | |||
| color: #666666; | |||
| background-color: #ffffff; | |||
| } | |||
| } | |||
| </style> | |||
| @ -0,0 +1,79 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="列表" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="search"> | |||
| <uv-search | |||
| placeholder="请输入搜索内容" | |||
| v-model="queryParams.title" | |||
| bgColor="#fff" | |||
| height="80"></uv-search> | |||
| </view> | |||
| <!-- 标签选项 --> | |||
| <view class="Tabs"> | |||
| <uv-tabs :list="tabs" | |||
| @click="clickTab"></uv-tabs> | |||
| </view> | |||
| <view class="Urgent-Work-Order"> | |||
| <WorkOrderitem | |||
| :key="index" | |||
| v-for="(item,index) in list" :obj="item" | |||
| @click="$utils.navigateTo('/pages_order/order/WorkOrders')" /> | |||
| </view> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import WorkOrderitem from '@/components/work/WorkOrderitem.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components: { | |||
| WorkOrderitem, | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi: 'queryTemplateList', | |||
| tabs: [{ | |||
| name: '所有', | |||
| }, { | |||
| name: '备料中', | |||
| }, { | |||
| name: '本体加工' | |||
| }, { | |||
| name: '气密检测' | |||
| }, { | |||
| name: '挂机中' | |||
| }], | |||
| } | |||
| }, | |||
| computed: { | |||
| }, | |||
| methods: { | |||
| clickTab(){}, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| .search{ | |||
| margin: 20rpx; | |||
| } | |||
| .Tabs { | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .Urgent-Work-Order { | |||
| padding: 20rpx; | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,112 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="列表" leftClick @leftClick="$utils.navigateBack" /> | |||
| <uv-search placeholder="请输入搜索内容" v-model="keyword" height="80"></uv-search> | |||
| <!-- 标签选项 --> | |||
| <view class="Tabs"> | |||
| <uv-tabs :list="listt" @click="click"></uv-tabs> | |||
| </view> | |||
| <view class="Urgent-Work-Order"> | |||
| <WorkOrderitem v-for="(item,index) in list" :obj="item" | |||
| @click="$utils.navigateTo('/pages_order/order/WorkOrders')" /> | |||
| </view> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import WorkOrderitem from '@/components/work/WorkOrderitem.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components: { | |||
| tabber, | |||
| WorkOrderitem, | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi : 'queryTemplateList', | |||
| keyword: '水调歌头', | |||
| listt: [{ | |||
| name: '所有', | |||
| }, { | |||
| name: '备料中', | |||
| }, { | |||
| name: '本体加工' | |||
| }, { | |||
| name: '气密检测' | |||
| }, { | |||
| name: '挂机中' | |||
| }], | |||
| 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; | |||
| }, | |||
| click(item) { | |||
| console.log('item', item); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| background-color: #fff; | |||
| /deep/ .uv-vtabs { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| /deep/ .uv-vtabs__bar { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| /deep/ .uv-vtabs__content { | |||
| height: calc(100vh - 360rpx) !important; | |||
| } | |||
| .Tabs { | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .Urgent-Work-Order { | |||
| padding: 20rpx; | |||
| .Urgent-Work-List { | |||
| margin-top: 20rpx; | |||
| border: 6rpx solid rgb(99, 187, 211); | |||
| border-radius: 25rpx; | |||
| padding: 15rpx; | |||
| .Work-List { | |||
| margin: 15rpx 0rpx; | |||
| letter-spacing: 2px | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,567 +0,0 @@ | |||
| <template> | |||
| <view> | |||
| <navbar | |||
| title="订单详情" | |||
| leftClick | |||
| @leftClick="$utils.navigateBack" | |||
| /> | |||
| <!-- 水洗店 --> | |||
| <view class="" | |||
| v-if="userShop"> | |||
| <view class="controls"> | |||
| <view class="title"> | |||
| <image src="../static/order/icon.png" mode=""></image> | |||
| 服务完成 | |||
| </view> | |||
| <view class="tips"> | |||
| 待送回 | |||
| </view> | |||
| <view class="btns"> | |||
| <view class="btn1"> | |||
| 快递寄回 | |||
| </view> | |||
| <view class="btn2"> | |||
| 线下配送 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="steps"> | |||
| <uv-steps | |||
| activeColor="#FD5100" | |||
| :current="stepsCurrent" dot> | |||
| <uv-steps-item :title="item" | |||
| :key="index" | |||
| v-for="(item, index) in steps"></uv-steps-item> | |||
| </uv-steps> | |||
| </view> | |||
| </view> | |||
| <!-- 酒店和水洗店 --> | |||
| <view class="info"> | |||
| <view class="flex" | |||
| style="display: flex;"> | |||
| <view style="width: 8rpx;height: 30rpx; | |||
| background: #FD5100;border-radius: 6rpx;" /> | |||
| <view class="head-title">服务项目</view> | |||
| </view> | |||
| <view class="flex"> | |||
| <view class="server-item"> | |||
| <view class="img-box"> | |||
| <image :src="msgShop.image" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="server-info"> | |||
| <view class="server-title"> | |||
| {{msgOrder.projectName}} | |||
| <!-- <view class="coupon">领券立减</view> --> | |||
| </view> | |||
| <view class="current-price"> | |||
| <text class="unit">¥</text>{{msgOrder.money}} | |||
| </view> | |||
| <view class="sales-volume" style="margin-top: 5px;"> | |||
| <view class="desc">规格:{{msgOrder.unit}}</view> | |||
| </view> | |||
| <view class="time-coupon"> | |||
| <!-- <view class="flex"> | |||
| <image src="@/static/home/time-icon.png"></image> | |||
| <view class="time">{{msgOrder.useTime}}分钟</view> | |||
| </view> --> | |||
| <!-- <view class="sales-volume"> | |||
| <image src="@/static/icons/icon1.png"></image> | |||
| <view class="desc">已售出{{msgShop.payNum}}+单</view> | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- <view class="line min_tips"> | |||
| <view class="head-div flex"> | |||
| <view style="width: 118rpx;height: 118rpx;border-radius: 50%;overflow: hidden;"> | |||
| <image style="width: 118rpx;" :src="msgTechnician.image" mode="widthFix"></image> | |||
| </view> | |||
| <view style="padding: 10rpx 34rpx;display: flex;flex-direction: column;justify-content: space-around;"> | |||
| <view class="nickname"> | |||
| {{msgTechnician.title}} | |||
| <view v-if="msgTechnician.isVip" class="tag"> | |||
| <image src="@/static/order/s.png" mode="aspectFit"></image> | |||
| <view class="auth">官方认证</view> | |||
| </view> | |||
| </view> | |||
| <view class="days"> | |||
| <van-rate v-model="msgTechnician.score" :size="10" readonly color="#ffb54c" void-icon="star" | |||
| void-color="#eee" /> | |||
| <view class=""> | |||
| 好评{{msgTechnician.pinNum}} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view @click="gototechnicianDetail(msgTechnician)" class="btn-x"> | |||
| 服务技师 | |||
| </view> | |||
| </view> --> | |||
| <view class="line address"> | |||
| <view class="address-top"> | |||
| <!-- <view class=""> | |||
| 服务地址 | |||
| </view> --> | |||
| <view class="copy"> | |||
| <image @click="copy(msgOrder.name + ' ' + msgOrder.phone + ' ' + msgOrder.address)" src="/static/order/copy.png"></image> | |||
| </view> | |||
| </view> | |||
| <view class="addressDetail"> | |||
| <view class="">{{msgOrder.name}} {{msgOrder.phone}}</view> | |||
| <view class="">{{msgOrder.address}}</view> | |||
| </view> | |||
| </view> | |||
| <view class="line"> | |||
| <view class="t min_tips"> | |||
| <view class=""> | |||
| 实付款 | |||
| </view> | |||
| <view class="current-price"> | |||
| ¥{{ msgOrder.money }} | |||
| </view> | |||
| </view> | |||
| <view class="min_tips"> | |||
| <view class=""> | |||
| 租赁费用 | |||
| </view> | |||
| <view class=""> | |||
| ¥{{ msgOrder.price }} | |||
| </view> | |||
| </view> | |||
| <view class="min_tips"> | |||
| <view class=""> | |||
| 水洗费用 | |||
| </view> | |||
| <view class=""> | |||
| ¥{{ msgOrder.price}} | |||
| </view> | |||
| </view> | |||
| <view class="min_tips"> | |||
| <view class=""> | |||
| 押金 | |||
| </view> | |||
| <view class=""> | |||
| ¥{{ msgOrder.price }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 订单信息 --> | |||
| <view class="line"> | |||
| <view class="t min_tips"> | |||
| <view class=""> | |||
| 订单信息 | |||
| </view> | |||
| </view> | |||
| <view class="min_tips"> | |||
| <view class=""> | |||
| 订单编号 | |||
| </view> | |||
| <view class=""> | |||
| {{msgOrder.id}} | |||
| </view> | |||
| </view> | |||
| <view class="min_tips"> | |||
| <view class=""> | |||
| 下单时间 | |||
| </view> | |||
| <view class=""> | |||
| {{msgOrder.createTime}} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 下单须知 --> | |||
| <view class="line"> | |||
| <view class="t min_tips"> | |||
| <view class=""> | |||
| 下单须知 | |||
| </view> | |||
| </view> | |||
| <view class="min_tips" style="line-height: 40rpx;"> | |||
| {{msgShop.projectExplain}} | |||
| </view> | |||
| <view class="btns"> | |||
| <view @click="clickService" class="btn"> | |||
| 联系客服 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapGetters } from 'vuex' | |||
| export default { | |||
| computed : { | |||
| ...mapGetters(['userShop']), | |||
| }, | |||
| data() { | |||
| return { | |||
| stepsCurrent : 0, | |||
| steps : [ | |||
| '接单', | |||
| '检查', | |||
| '开始清洗', | |||
| '服务完成', | |||
| ], | |||
| msgShop : { | |||
| money : 99.99, | |||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
| projectExplain : '1.xxxxxxxxxx xxxxxxxxxx。2.xxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxx。3.。', | |||
| }, | |||
| msgOrder : { | |||
| money : 99.99, | |||
| address : '广东省广州市越秀区城南故事C3栋2802', | |||
| name : '李**', | |||
| phone : '150*****091', | |||
| unit : '120*40*75【桌子尺寸】', | |||
| state_dictText : '已完成', | |||
| price : 199.99, | |||
| id : '020644568964457', | |||
| createTime : '2024-01-18 15:39', | |||
| projectName : '桌布租赁' | |||
| }, | |||
| } | |||
| }, | |||
| methods: { | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .order { | |||
| background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad); | |||
| padding-bottom: 10px; | |||
| } | |||
| .controls{ | |||
| margin: 20rpx; | |||
| background-color: #fff; | |||
| height: 400rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| width: 710rpx; | |||
| border-radius: 20rpx; | |||
| justify-content: center; | |||
| align-items: center; | |||
| .title{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| font-size: 40rpx; | |||
| image{ | |||
| width: 100rpx; | |||
| height: 100rpx; | |||
| margin-right: 20rpx; | |||
| } | |||
| } | |||
| .tips{ | |||
| font-size: 26rpx; | |||
| color: #FD5100; | |||
| margin-top: 10rpx; | |||
| } | |||
| .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: 15rpx 40rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| .btn2{ | |||
| background-color: #FFFFFF; | |||
| border: 1px solid #A7A7A7; | |||
| color: #A7A7A7; | |||
| } | |||
| } | |||
| } | |||
| .steps{ | |||
| margin: 20rpx; | |||
| background-color: #fff; | |||
| display: flex; | |||
| flex-direction: column; | |||
| width: 710rpx; | |||
| border-radius: 20rpx; | |||
| padding: 70rpx 0; | |||
| /deep/ .uv-text__value{ | |||
| font-size: 22rpx !important; | |||
| } | |||
| } | |||
| .box { | |||
| padding: 20px; | |||
| .btns { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin-top: 10px; | |||
| .btn { | |||
| color: #fff; | |||
| padding: 10rpx 50rpx; | |||
| background-color: #ffb300; | |||
| border-radius: 30rpx; | |||
| font-size: 25rpx; | |||
| margin-right: 10rpx; | |||
| } | |||
| .btc{ | |||
| background: #ccc; | |||
| } | |||
| } | |||
| } | |||
| .info { | |||
| margin: 10px; | |||
| padding: 20rpx; | |||
| background-color: #fff; | |||
| width: calc(100% - 40px); | |||
| border-radius: 10px; | |||
| .head-title { | |||
| font-family: PingFang SC, PingFang SC-Bold; | |||
| color: #2f2e2e; | |||
| line-height: 30rpx; | |||
| margin-left: 10rpx; | |||
| } | |||
| .server-item { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| background: white; | |||
| border-radius: 15rpx; | |||
| box-sizing: border-box; | |||
| margin: 20rpx 0rpx; | |||
| width: 100%; | |||
| .img-box { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .server-info { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-around; | |||
| width: calc(100% - 180rpx); | |||
| box-sizing: border-box; | |||
| padding: 10rpx 15rpx; | |||
| .server-title { | |||
| display: flex; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .coupon { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| background: #F29E45; | |||
| color: white; | |||
| width: 120rpx; | |||
| height: 40rpx; | |||
| border-radius: 10rpx; | |||
| margin-left: 10rpx; | |||
| font-size: 22rpx; | |||
| } | |||
| .time-coupon, | |||
| .price { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| } | |||
| .time-coupon { | |||
| margin: 10rpx 0rpx; | |||
| font-size: 26rpx; | |||
| justify-content: space-between; | |||
| width: 100%; | |||
| .flex { | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| image { | |||
| width: 25rpx; | |||
| height: 25rpx; | |||
| } | |||
| .time { | |||
| color: #B8B8B8; | |||
| margin-left: 6rpx; | |||
| } | |||
| } | |||
| .sales-volume { | |||
| display: flex; | |||
| align-items: center; | |||
| color: #B8B8B8; | |||
| font-size: 24rpx; | |||
| image { | |||
| width: 25rpx; | |||
| height: 25rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .address { | |||
| .address-top{ | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| image{ | |||
| width: 30rpx; | |||
| height: 30rpx; | |||
| } | |||
| } | |||
| .addressDetail { | |||
| color: #777; | |||
| font-size: 22rpx; | |||
| padding: 5px 0; | |||
| } | |||
| text { | |||
| background-color: #F29E45; | |||
| padding: 8rpx 10rpx; | |||
| color: #fff; | |||
| font-size: 20rpx; | |||
| margin-left: 10px; | |||
| border-radius: 5px; | |||
| } | |||
| } | |||
| .min_tips { | |||
| font-size: 22rpx; | |||
| color: #777; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 5px 0; | |||
| align-items: center; | |||
| } | |||
| .current-price { | |||
| font-size: 30rpx; | |||
| color: #FD5100; | |||
| } | |||
| .line { | |||
| border-top: 2px dotted #00000011; | |||
| padding: 20rpx 0; | |||
| .t { | |||
| padding: 5px 0; | |||
| color: #000; | |||
| font-size: 26rpx; | |||
| } | |||
| } | |||
| .head-div { | |||
| .nickname { | |||
| font-size: 30rpx; | |||
| font-weight: 600; | |||
| text-align: left; | |||
| line-height: 42rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| .tag { | |||
| position: relative; | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| height: 45rpx; | |||
| width: 90rpx; | |||
| vertical-align: middle; | |||
| } | |||
| .auth { | |||
| position: absolute; | |||
| white-space: nowrap; | |||
| color: #FF6200; | |||
| left: 23rpx; | |||
| font-size: 17rpx; | |||
| } | |||
| } | |||
| } | |||
| .days { | |||
| font-size: 20rpx; | |||
| font-weight: 400; | |||
| text-align: left; | |||
| line-height: 56rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| view { | |||
| padding-left: 5px; | |||
| } | |||
| } | |||
| } | |||
| .btn-x { | |||
| color: #6fc6ad; | |||
| border: 1px solid #6fc6ad; | |||
| padding: 10rpx 20rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| .btns { | |||
| display: flex; | |||
| justify-content: center; | |||
| .btn { | |||
| color: #6fc6ad; | |||
| border: 1px solid #6fc6ad; | |||
| padding: 10rpx 20rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,360 +0,0 @@ | |||
| <template> | |||
| <view class="refundsOrExchange"> | |||
| <navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/> | |||
| <view class="frame"> | |||
| <!-- 商品简介 --> | |||
| <view class="itme1" @click="openSpPopup"> | |||
| <view class="left"> | |||
| <img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||
| </view> | |||
| <view class="center"> | |||
| <view>{{ commodity.title }}</view> | |||
| <view>{{ commodity.smallTitle }}</view> | |||
| </view> | |||
| <view class="right">×{{ commodity.total }}</view> | |||
| </view> | |||
| <!--<commoditySelect ></commoditySelect>--> | |||
| <!-- 申请类型&申请原因 --> | |||
| <view class="item2"> | |||
| <view class="type"> | |||
| <span>申请类型</span> | |||
| <span>退货退款</span> | |||
| </view> | |||
| <uv-line></uv-line> | |||
| <view class="reason"> | |||
| <view>申请原因</view> | |||
| <view> | |||
| <uv-input placeholder="请输入申请原因" border="none" clearable></uv-input> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 退货数量&申请金额--> | |||
| <view class="item3"> | |||
| <view class="type"> | |||
| <span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span> | |||
| <span> | |||
| <uv-number-box :min="1" :max="100"></uv-number-box> | |||
| </span> | |||
| </view> | |||
| <uv-line v-if='titleIndex == 0 ? true :false'></uv-line> | |||
| <view class="reason" v-if='titleIndex == 0 ? true :false'> | |||
| <view>申请原因</view> | |||
| <view> | |||
| <uv-input disabled placeholder="$" border="none" clearable></uv-input> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 申请说明 --> | |||
| <view class="item4"> | |||
| <view>申请说明(选填)</view> | |||
| <view> | |||
| <uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input> | |||
| </view> | |||
| <view> | |||
| <uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx" | |||
| @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload> | |||
| </view> | |||
| </view> | |||
| <!-- 联系电话 --> | |||
| <view class="item5"> | |||
| <view class="phone"> | |||
| <view>联系电话</view> | |||
| <view> | |||
| <uv-input placeholder="请输入联系电话" border="none" clearable></uv-input> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 底部按钮 --> | |||
| <!--商品选择--> | |||
| <uv-popup ref="spPopup" :round="30"> | |||
| <commoditySelect | |||
| :commodityList="commodityList" | |||
| @selectSp="selectCommodity" | |||
| /> | |||
| </uv-popup> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import commoditySelect from "../components/commodity/commoditySelect.vue" | |||
| export default { | |||
| onLoad(option) { | |||
| this.titleIndex = option.index | |||
| }, | |||
| components: { | |||
| commoditySelect | |||
| }, | |||
| data() { | |||
| return { | |||
| titleIndex: 0, | |||
| title: ['申请换货', '申请退货'], | |||
| fileList: [], | |||
| bottomBtnStyle: { | |||
| color: '#FFF', | |||
| backgroundColor: '#fd5100', | |||
| fontSize: '34rpx', | |||
| text: '提交申请', | |||
| width: '400rpx', | |||
| height: '80rpx', | |||
| borderRadius: '100rpx', | |||
| bottom: '40rpx' | |||
| }, | |||
| commodityList: [ | |||
| { | |||
| title: '商品名称', | |||
| smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| { | |||
| title: '商品名称1', | |||
| smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| { | |||
| title: '商品名称2', | |||
| smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||
| total:1, | |||
| } | |||
| ], | |||
| commodity: { | |||
| title: '商品名称', | |||
| smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| } | |||
| }, | |||
| mounted() { | |||
| }, | |||
| methods: { | |||
| openSpPopup() { | |||
| this.$refs.spPopup.open('bottom'); | |||
| }, | |||
| // 选择退换货商品回调 | |||
| selectCommodity(e) { | |||
| console.log(e, "selectCommodity--e") | |||
| this.commodity = e | |||
| this.$refs.spPopup.close() | |||
| }, | |||
| confirm() { | |||
| console.log("==="); | |||
| }, | |||
| deleteImage(e) { | |||
| this.fileList.splice(e.index, 1) | |||
| }, | |||
| afterRead(e) { | |||
| let self = this | |||
| e.file.forEach(file => { | |||
| self.$Oss.ossUpload(file.url).then(url => { | |||
| self.fileList.push({ | |||
| url | |||
| }) | |||
| }) | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| * { | |||
| box-sizing: border-box; | |||
| } | |||
| .refundsOrExchange { | |||
| .frame { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 30rpx; | |||
| width: 100%; | |||
| padding-top: 40rpx; | |||
| background-color: #f5f5f5; | |||
| .itme1 { | |||
| display: flex; | |||
| height: 200rpx; | |||
| background-color: #ffffff; | |||
| .left { | |||
| padding: 40rpx; | |||
| width: 20%; | |||
| border-radius: 10rpx; | |||
| background-color: #ffffff; | |||
| } | |||
| .center { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| gap: 20rpx; | |||
| width: 60%; | |||
| padding: 0rpx 0 0 20rpx; | |||
| background-color: #ffffff; | |||
| // 给第一个 view 设置样式 | |||
| > view:first-of-type { | |||
| font-size: 36rpx; | |||
| color: #333; | |||
| } | |||
| // 给第二个 view 设置样式 | |||
| > view:nth-of-type(2) { | |||
| font-size: 28rpx; | |||
| color: #666666; | |||
| } | |||
| } | |||
| .right { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 10%; | |||
| color: #666666; | |||
| background-color: #ffffff; | |||
| } | |||
| } | |||
| .item2 { | |||
| width: 100vw; | |||
| .type { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| padding: 0 0 0 20rpx; | |||
| > span:nth-of-type(1) { | |||
| width: 30%; | |||
| } | |||
| > span:nth-of-type(2) { | |||
| width: 70%; | |||
| } | |||
| } | |||
| .reason { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| // margin: 10rpx 0 0 0; | |||
| padding: 10rpx 0 0 20rpx; | |||
| > view:nth-of-type(1) { | |||
| width: 30%; | |||
| } | |||
| > view:nth-of-type(2) { | |||
| width: 70%; | |||
| padding: 0 20rpx 0 0; | |||
| } | |||
| } | |||
| } | |||
| .item3 { | |||
| width: 100vw; | |||
| .type { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| padding: 0 0 0 20rpx; | |||
| > span:nth-of-type(1) { | |||
| width: 70%; | |||
| } | |||
| > span:nth-of-type(2) { | |||
| width: 30%; | |||
| } | |||
| } | |||
| .reason { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| // margin: 10rpx 0 0 0; | |||
| padding: 10rpx 0 0 20rpx; | |||
| > view:nth-of-type(1) { | |||
| width: 30%; | |||
| } | |||
| > view:nth-of-type(2) { | |||
| width: 70%; | |||
| padding: 0 20rpx 0 0; | |||
| } | |||
| } | |||
| } | |||
| .item4 { | |||
| display: flex; | |||
| flex-direction: column; | |||
| padding: 10rpx 0 0 20rpx; | |||
| background-color: #FFF; | |||
| > view:nth-of-type(1) { | |||
| background-color: #FFF; | |||
| } | |||
| > view:nth-of-type(2) { | |||
| margin: 10rpx 0 10rpx 0; | |||
| background-color: #FFF; | |||
| } | |||
| } | |||
| .item5 { | |||
| display: flex; | |||
| flex-direction: column; | |||
| padding: 0 0 0 20rpx; | |||
| background-color: #FFF; | |||
| .phone { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| // margin: 10rpx 0 0 0; | |||
| padding: 10rpx 0 0 20rpx; | |||
| > view:nth-of-type(1) { | |||
| width: 30%; | |||
| } | |||
| > view:nth-of-type(2) { | |||
| width: 70%; | |||
| padding: 0 20rpx 0 0; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||