|
|
|
@ -1,116 +1,63 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar/> |
|
|
|
|
|
|
|
<view class="search"> |
|
|
|
|
|
|
|
<view @click="showSelectArea" class="left-area"> |
|
|
|
<image src="@/static/image/home/address-icon.png"></image> |
|
|
|
<view class="area">{{ area }}</view> |
|
|
|
<image src="@/static/image/home/arrow-icon.png" mode="aspectFit"></image> |
|
|
|
<view class="parting-line">|</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="center-area"> |
|
|
|
<image |
|
|
|
style="margin-right: 20rpx;" |
|
|
|
src="@/static/image/home/search-icon.png"></image> |
|
|
|
<input v-model="queryParams.title" |
|
|
|
placeholder="桌布租赁" /> |
|
|
|
|
|
|
|
<navbar /> |
|
|
|
<view class="Carousel-image"> |
|
|
|
<view class="imgs"> |
|
|
|
<uv-swiper :list="list" indicator indicatorMode="dot" circular height="420"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="right-area"> |
|
|
|
<view @click="searchAddress" class="search-button"> |
|
|
|
搜索 |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="swipe"> |
|
|
|
<uv-swiper |
|
|
|
:list="bannerList" |
|
|
|
indicator |
|
|
|
height="320rpx" |
|
|
|
keyName="url"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 水洗店 --> |
|
|
|
<view class="userShop" |
|
|
|
v-if="userShop"> |
|
|
|
<view class="list"> |
|
|
|
<view class="item" |
|
|
|
v-for="(item, index) in 4" |
|
|
|
:key="index"> |
|
|
|
<view class=""> |
|
|
|
<view class=""> |
|
|
|
我的客户 |
|
|
|
</view> |
|
|
|
<view class="num"> |
|
|
|
{{ 30 }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<image :src="`/static/image/home/${index}.png`" mode=""></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="search"> |
|
|
|
<view class="center-area"> |
|
|
|
<image style="margin-right: 20rpx;" src="@/static/image/home/search-icon.png"></image> |
|
|
|
<input v-model="queryParams.title" placeholder="输入单号进行搜索" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 酒店 --> |
|
|
|
<view class="user" |
|
|
|
v-else> |
|
|
|
<uv-notice-bar |
|
|
|
fontSize="28rpx" |
|
|
|
:text="text"></uv-notice-bar> |
|
|
|
|
|
|
|
<view class="shop"> |
|
|
|
<image |
|
|
|
class="image" |
|
|
|
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" |
|
|
|
mode=""></image> |
|
|
|
<view class="shopInfo"> |
|
|
|
<view class="title"> |
|
|
|
HOUS水洗店 |
|
|
|
</view> |
|
|
|
<view class="tags"> |
|
|
|
<view class="tag"> |
|
|
|
桌布水洗 |
|
|
|
</view> |
|
|
|
<view class="tag"> |
|
|
|
桌布租赁 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="time"> |
|
|
|
9:00-18:00 |
|
|
|
</view> |
|
|
|
<view class="address"> |
|
|
|
长沙市天心区桂花坪街道231号 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="festival"> |
|
|
|
<view class="indus"> |
|
|
|
<view class="horn"> |
|
|
|
<uv-icon name="volume" size=""></uv-icon> |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
|
|
<view class="btn" |
|
|
|
@click="$utils.navigateTo('/pages_order/auth/wxUserInfo')"> |
|
|
|
我要水洗 |
|
|
|
</view> |
|
|
|
<view class="words"> |
|
|
|
中秋节放假及工作安排通知 |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tips"> |
|
|
|
关联门店：主信门店 |
|
|
|
</view> |
|
|
|
<view class="arrow"> |
|
|
|
<uv-icon name="arrow-right"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<uv-divider text="" textColor="#2979ff" lineColor="grey" textSize="1"></uv-divider> |
|
|
|
|
|
|
|
<view class="task"> |
|
|
|
<view class="backimg" @click="$utils.navigateTo('/pages_order/order/WorkOrderListitem')" > |
|
|
|
<view class="Work-Order"> |
|
|
|
所有工单 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="productList"> |
|
|
|
<productList/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-divider text="" textColor="#2979ff" lineColor="grey" textSize="1"></uv-divider> |
|
|
|
|
|
|
|
<view class="Urgent-Work-Order"> |
|
|
|
<view class="Urgent-Work"> |
|
|
|
紧急工单 |
|
|
|
</view> |
|
|
|
|
|
|
|
<WorkOrderitem |
|
|
|
v-for="(item,index) in 2 " |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> --> |
|
|
|
|
|
|
|
<PrivacyAgreementPoup/> |
|
|
|
|
|
|
|
<tabber select="0"/> |
|
|
|
<PrivacyAgreementPoup/> |
|
|
|
|
|
|
|
<tabber select="0"/> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -119,294 +66,130 @@ |
|
|
|
import Position from '@/utils/position.js' |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import productList from '@/components/user/productList.vue' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import WorkOrderitem from '@/components/work/WorkOrderitem.vue' |
|
|
|
|
|
|
|
import { |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
// import selectArea from '../../components/selectArea.vue'; |
|
|
|
export default { |
|
|
|
components : { |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
productList, |
|
|
|
PrivacyAgreementPoup, |
|
|
|
WorkOrderitem, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
list: [ |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
|
|
], |
|
|
|
area: '长沙', |
|
|
|
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....', |
|
|
|
text: '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....', |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
title: '' |
|
|
|
}, |
|
|
|
bannerList: [ |
|
|
|
{ |
|
|
|
bannerList: [{ |
|
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
|
|
}, |
|
|
|
], |
|
|
|
productList: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed : { |
|
|
|
...mapGetters(['userShop']), |
|
|
|
computed: { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//显示选择地区 |
|
|
|
showSelectArea() { |
|
|
|
// this.$refs.selectArea.open() |
|
|
|
}, |
|
|
|
//搜索地址 |
|
|
|
searchAddress() { |
|
|
|
Position.getLocation(res => { |
|
|
|
Position.selectAddress(res.longitude, res.latitude, success => { |
|
|
|
let address = this.extractProvinceAndCity(success) |
|
|
|
this.queryParams.title = address.city |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
//提取用户选择的地址信息(省市县信息) |
|
|
|
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市) |
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑 |
|
|
|
return { |
|
|
|
province: '', |
|
|
|
city: res.name |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
if (res.address) { //用户选择了详细地址，要从详细地址中提取出省市县信息 |
|
|
|
// 使用正则表达式匹配省市县 |
|
|
|
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/; |
|
|
|
const match = res.address.match(regex); |
|
|
|
if (match) { // 如果匹配成功，则返回省和市的信息 |
|
|
|
return { |
|
|
|
province: match.groups.province, |
|
|
|
city: match.groups.city |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return { //用户没选择地址就点了确定按钮 |
|
|
|
province: '', |
|
|
|
city: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.search { |
|
|
|
height: 82rpx; |
|
|
|
width: 710rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
margin: 20rpx auto; |
|
|
|
border-radius: 41rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 15rpx; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
|
|
|
|
.left-area, |
|
|
|
.center-area { |
|
|
|
.Carousel-image { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.search { |
|
|
|
height: 82rpx; |
|
|
|
width: 710rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
margin: 20rpx auto; |
|
|
|
border-radius: 41rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 15rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.left-area { |
|
|
|
max-width: 160rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.area { |
|
|
|
font-size: 24rpx; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
/* 限制显示两行 */ |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
color: #292929; |
|
|
|
} |
|
|
|
|
|
|
|
.parting-line { |
|
|
|
flex-shrink: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ccc; |
|
|
|
margin: 0rpx 5rpx; |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
left: 10px; |
|
|
|
|
|
|
|
//搜素框 |
|
|
|
.center-area { |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-items: center; |
|
|
|
width: calc(100% - 290rpx); |
|
|
|
margin-left: 30rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.center-area { |
|
|
|
} |
|
|
|
|
|
|
|
.festival { |
|
|
|
margin-top: 20rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.indus { |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-items: center; |
|
|
|
width: calc(100% - 290rpx); |
|
|
|
margin-left: 30rpx; |
|
|
|
image { |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
|
|
|
|
.words { |
|
|
|
margin: 0rpx 5rpx; |
|
|
|
font-size: 27rpx; |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
|
|
|
|
.van-field { |
|
|
|
background-color: transparent; |
|
|
|
box-sizing: border-box; |
|
|
|
height: 82rpx; |
|
|
|
line-height: 82rpx; |
|
|
|
width: calc(100% - 30rpx); |
|
|
|
padding: 0rpx 10rpx 0rpx 0rpx; |
|
|
|
|
|
|
|
input { |
|
|
|
height: 82rpx; |
|
|
|
font-size: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.horn { |
|
|
|
margin: 5rpx 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right-area { |
|
|
|
.search-button { |
|
|
|
background: #60BDA2; |
|
|
|
height: 60rpx; |
|
|
|
width: 130rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
border-radius: 35rpx; |
|
|
|
color: white; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow { |
|
|
|
padding: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.swipe{ |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin: 20rpx; |
|
|
|
} |
|
|
|
.page{ |
|
|
|
& /deep/ .uv-icon__icon{ |
|
|
|
font-size: 30rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 水洗店 |
|
|
|
.userShop{ |
|
|
|
.list{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
.item{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 330rpx; |
|
|
|
margin: 20rpx; |
|
|
|
padding: 30rpx 0; |
|
|
|
color: #FFFFFF; |
|
|
|
line-height: 50rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
.num{ |
|
|
|
font-size: 38rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
image{ |
|
|
|
width: 110rpx; |
|
|
|
height: 110rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
&:nth-child(1){ |
|
|
|
background: #F07A77; |
|
|
|
} |
|
|
|
&:nth-child(2){ |
|
|
|
background: #F48B4E; |
|
|
|
} |
|
|
|
&:nth-child(3){ |
|
|
|
background: #6487E1; |
|
|
|
} |
|
|
|
&:nth-child(4){ |
|
|
|
background: #61B7E6; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.task { |
|
|
|
|
|
|
|
.backimg { |
|
|
|
width: 100%; |
|
|
|
height: 320rpx; |
|
|
|
background-color: greenyellow; |
|
|
|
|
|
|
|
.Work-Order { |
|
|
|
margin: 20rpx; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 酒店 |
|
|
|
.user{ |
|
|
|
padding: 20rpx; |
|
|
|
.shop{ |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: #fff; |
|
|
|
margin-top: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
.image{ |
|
|
|
width: 180rpx; |
|
|
|
height: 180rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
.shopInfo{ |
|
|
|
font-size: 22rpx; |
|
|
|
.title{ |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
.tags{ |
|
|
|
display: flex; |
|
|
|
.tag{ |
|
|
|
padding: 4rpx 6rpx; |
|
|
|
border: 1rpx solid #FFAC6E; |
|
|
|
color: #FFAC6E; |
|
|
|
margin-right: 10rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
font-size: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.time{ |
|
|
|
margin-top: 10rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.address{ |
|
|
|
margin-top: 10rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
} |
|
|
|
.btns{ |
|
|
|
margin-left: auto; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.btn{ |
|
|
|
background-color: $uni-color; |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 0 5rpx 5rpx #FFAC6E; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.tips{ |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #FFAC6E; |
|
|
|
background-color: #FEF5EE; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.page { |
|
|
|
& /deep/ .uv-icon__icon { |
|
|
|
font-size: 30rpx !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
