You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
499 lines
10 KiB
499 lines
10 KiB
<template>
|
|
<view class="page">
|
|
|
|
<navbar/>
|
|
|
|
<view class="search" v-if="!userShop">
|
|
|
|
<!-- <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="桌布租赁" />
|
|
</view> -->
|
|
|
|
<!-- <view class="right-area">
|
|
<view @click="searchAddress" class="search-button">
|
|
搜索
|
|
</view>
|
|
</view> -->
|
|
|
|
<uv-search
|
|
bgColor="#fff"
|
|
@search="getGoodsPage"
|
|
@custom="getGoodsPage"
|
|
@change="searchChange"
|
|
placeholder="请输入搜索关键字..."
|
|
v-model="queryParams.name"></uv-search>
|
|
|
|
</view>
|
|
|
|
<view class="swipe">
|
|
<uv-swiper
|
|
:list="bannerList"
|
|
indicator
|
|
height="320rpx"
|
|
keyName="pic"></uv-swiper>
|
|
</view>
|
|
|
|
<!-- 水洗店 -->
|
|
<view class="userShop"
|
|
v-if="userShop">
|
|
<view class="list">
|
|
<view class="item"
|
|
v-for="(item, index) in statisticsKey"
|
|
@click="toUrl(index)"
|
|
:key="index">
|
|
<view class="">
|
|
<view class="">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="num">
|
|
{{ statistics[item.key] || 0 }}
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<image :src="`/static/image/home/${index}.png`" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 酒店 -->
|
|
<view class="user"
|
|
v-else>
|
|
<uv-notice-bar
|
|
fontSize="28rpx"
|
|
:text="notice"></uv-notice-bar>
|
|
|
|
<!-- <view class="shop" v-if="bindShop && bindShop.name">
|
|
<image
|
|
class="image"
|
|
:src="bindShop.pic"
|
|
mode="aspectFill"></image>
|
|
<view class="shopInfo">
|
|
<view class="title">
|
|
{{bindShop.name}}
|
|
</view>
|
|
<view class="tags">
|
|
<view class="tag">
|
|
桌布水洗
|
|
</view>
|
|
<view class="tag">
|
|
桌布租赁
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
9:00-18:00
|
|
</view>
|
|
<view class="address text-ellipsis-2">
|
|
长沙市天心区桂花坪街道231号
|
|
{{bindShop.address}}
|
|
</view>
|
|
</view>
|
|
<view class="btns">
|
|
<view class="btn"
|
|
@click="$utils.navigateTo('/pages_order/order/createWash')">
|
|
我要水洗
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tips">
|
|
关联门店：主信门店
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- <shopMain /> -->
|
|
|
|
<buyMenu />
|
|
|
|
<view class="productList">
|
|
<productList :productList="productList.records"/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
|
|
|
|
<PrivacyAgreementPoup/>
|
|
|
|
<tabber select="0"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
|
|
import Position from '@/utils/position.js'
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import productList from '@/components/user/productList.vue'
|
|
import { mapGetters, mapState } from 'vuex'
|
|
import buyMenu from '@/components/user/buyMenu.vue'
|
|
// import selectArea from '../../components/selectArea.vue';
|
|
export default {
|
|
components : {
|
|
tabber,
|
|
productList,
|
|
PrivacyAgreementPoup,
|
|
buyMenu,
|
|
},
|
|
data() {
|
|
return {
|
|
area: '长沙',
|
|
notice : '',
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
title: '',
|
|
},
|
|
bannerList: [],
|
|
productList: {
|
|
records : [],
|
|
total : 0,
|
|
},
|
|
statisticsKey : [
|
|
{
|
|
key : 'num',
|
|
title : '桌布库存',
|
|
},
|
|
{
|
|
key : 'wash',
|
|
title : '水洗订单',
|
|
},
|
|
{
|
|
key : 'refund',
|
|
title : '退货订单',
|
|
},
|
|
{
|
|
key : 'worn',
|
|
title : '破损换货',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onShow() {
|
|
this.noticeList()
|
|
this.banner()
|
|
this.getGoodsPage()
|
|
if(uni.getStorageSync('token')){
|
|
// this.$store.commit('getUserInfo')
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh(){
|
|
this.getGoodsPage()
|
|
this.noticeList()
|
|
this.banner()
|
|
if(uni.getStorageSync('token')){
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
},
|
|
//滚动到屏幕底部
|
|
onReachBottom() {
|
|
if(this.queryParams.pageSize < this.productList.total){
|
|
this.queryParams.pageSize += 10
|
|
this.getGoodsPage()
|
|
}
|
|
},
|
|
computed : {
|
|
...mapGetters(['userShop']),
|
|
...mapState(['bindShop', 'statistics']),
|
|
},
|
|
methods: {
|
|
toUrl(index){
|
|
uni.reLaunch({
|
|
url: '/pages/index/order?current' + index + 1
|
|
})
|
|
},
|
|
banner(){
|
|
this.$api('bannerList', res => {
|
|
if(res.code == 200){
|
|
this.bannerList = res.result
|
|
}
|
|
})
|
|
},
|
|
noticeList(){
|
|
this.$api('noticeList', res => {
|
|
if(res.code == 200){
|
|
this.notice = res.result && res.result.content
|
|
}
|
|
})
|
|
},
|
|
searchChange(value){
|
|
if(!value){
|
|
this.getGoodsPage()
|
|
}
|
|
},
|
|
// 获取商品数据
|
|
getGoodsPage(){
|
|
this.$api('goodsPage', this.queryParams, res => {
|
|
uni.stopPullDownRefresh()
|
|
if(res.code == 200){
|
|
this.productList = res.result
|
|
}
|
|
})
|
|
},
|
|
//显示选择地区
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.center-area {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
width: calc(100% - 290rpx);
|
|
margin-left: 30rpx;
|
|
image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 酒店
|
|
.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;
|
|
flex-shrink: 0;
|
|
}
|
|
.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;
|
|
flex-shrink: 0;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|