@ -0,0 +1,78 @@ | |||
<template> | |||
<view class="home"> | |||
<image src="/static/image/bg/1.png" | |||
class="page-bg" | |||
mode="aspectFill"></image> | |||
<view class="content_now"> | |||
<view class="article"> | |||
<uv-parse :content="articleList[index].details"></uv-parse> | |||
</view> | |||
</view> | |||
<view class="an"> | |||
<view class="btn2" | |||
@click="next"> | |||
下一页 | |||
</view> | |||
<text class="second-color">{{ configList.bg_title }}</text> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
computed : { | |||
...mapState(['articleList', 'configList']), | |||
}, | |||
data() { | |||
return { | |||
index : 0, | |||
} | |||
}, | |||
methods: { | |||
next(){ | |||
if(this.index == this.articleList.length - 1){ | |||
this.$store.commit('getQueryMyLog') | |||
// uni.navigateTo({ | |||
// url: '/pages/index/home' | |||
// }) | |||
}else{ | |||
this.index++ | |||
} | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.article{ | |||
width: 600rpx; | |||
font-size: 28rpx; | |||
line-height: 50rpx; | |||
} | |||
.an{ | |||
position: fixed; | |||
bottom: 330rpx; | |||
text-align: center; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
width: 100%; | |||
} | |||
.second-color{ | |||
margin-top: 20rpx; | |||
} | |||
.btn2 { | |||
border: 4rpx solid $uni-color; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 16rpx 200rpx; | |||
color: $uni-color; | |||
border-radius: 10rpx; | |||
} | |||
</style> |
@ -1,420 +0,0 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="个人中心" /> | |||
<view class="head"> | |||
<view class="headImage"> | |||
<image src="" mode=""></image> | |||
</view> | |||
<view class="info"> | |||
<view class="name"> | |||
倾心. | |||
</view> | |||
<!-- <view class="vip"> | |||
VIP1 | |||
</view> --> | |||
<view class="tips"> | |||
今天是您来的的第32天 | |||
</view> | |||
</view> | |||
<view class="headBtn" @click="headBtn"> | |||
角色切换 | |||
</view> | |||
<view class="setting"> | |||
<uv-icon name="setting" size="40rpx"></uv-icon> | |||
</view> | |||
</view> | |||
<!-- 水洗店 --> | |||
<view class="userShop" v-if="userShop"> | |||
<userShopCommission /> | |||
<view class="userList"> | |||
<view class="title"> | |||
我的用户 | |||
</view> | |||
<view class="list"> | |||
<view class="item" v-for="(item, index) in 20" :key="index"> | |||
<view class="name"> | |||
客户:王生 | |||
</view> | |||
<view class="num"> | |||
剩余水洗布:198 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 酒店 --> | |||
<view class="user" v-else> | |||
<view class="line"> | |||
<view class="item"> | |||
<view class="image"> | |||
<image src="/static/image/center/1.png" mode=""></image> | |||
</view> | |||
<view class=""> | |||
余额¥3000 | |||
</view> | |||
</view> | |||
<view class="item"> | |||
<view class="image"> | |||
<image src="/static/image/center/4.png" mode=""></image> | |||
</view> | |||
<view class=""> | |||
押金¥30000 | |||
</view> | |||
</view> | |||
</view> | |||
<view class="line grid"> | |||
<view class="title"> | |||
常用功能 | |||
</view> | |||
<uv-grid :col="4" :border="false"> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">地址管理</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.redirectTo('/index/order')"> | |||
<image class="image" src="/static/image/center/8.png" mode=""></image> | |||
<text class="grid-text">订单管理</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)"> | |||
<image class="image" src="/static/image/center/5.png" mode=""></image> | |||
<text class="grid-text">换货</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">退货</text> | |||
</uv-grid-item> | |||
</uv-grid> | |||
</view> | |||
<view class="line grid"> | |||
<uv-grid :col="4" :border="false"> | |||
<uv-grid-item @click="contactUs"> | |||
<image class="image" src="/static/image/center/9.png" mode=""></image> | |||
<text class="grid-text">联系客服</text> | |||
</uv-grid-item> | |||
<uv-grid-item> | |||
<image class="image" src="/static/image/center/6.png" mode=""></image> | |||
<text class="grid-text">我的租赁</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.redirectTo('/index/cart')"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">租赁车</text> | |||
</uv-grid-item> | |||
<uv-grid-item | |||
@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">申请成为水洗店</text> | |||
</uv-grid-item> | |||
</uv-grid> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<uv-overlay :show="show" @click="show = false"> | |||
<view class="warp"> | |||
<view class="rect" @tap.stop> | |||
<view class="title">联系客服</view> | |||
<view class="center">确定拨打客服电话?</view> | |||
<view class="bottom"> | |||
<view> | |||
<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1" | |||
@click="cancle"></uv-button> | |||
</view> | |||
<view> | |||
<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2" | |||
@click="confirm"></uv-button> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</uv-overlay> | |||
<tabber select="4" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
import { | |||
mapGetters | |||
} from 'vuex' | |||
import userShopCommission from '@/components/userShop/userShopCommission.vue' | |||
export default { | |||
components: { | |||
tabber, | |||
userShopCommission, | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
customStyle1() { | |||
return { | |||
height: '60rpx', | |||
background: '#FFF', | |||
color: '#000000', | |||
fontSize: '36rpx', | |||
borderRadius: '40rpx', //圆角 | |||
// nvue中必须是下方的写法 | |||
'border-top-right-radius': '40rpx', | |||
'border-bottom-left-radius': '40rpx', | |||
'border-bottom-right-radius': '40rpx', | |||
'width': '150rpx', | |||
} | |||
}, | |||
customStyle2() { | |||
return { | |||
height: '60rpx', | |||
background: '#fd5100', | |||
color: '#FFF', | |||
fontSize: '34px', | |||
borderRadius: '40rpx', //圆角 | |||
// nvue中必须是下方的写法 | |||
'border-top-right-radius': '40rpx', | |||
'border-bottom-left-radius': '40rpx', | |||
'border-bottom-right-radius': '40rpx', | |||
'width': '150rpx', | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
} | |||
}, | |||
methods: { | |||
headBtn() { | |||
let self = this | |||
uni.showModal({ | |||
title: '演示切换角色之后的效果', | |||
success(res) { | |||
if (res.confirm) { | |||
self.$store.state.shop = !self.$store.state.shop | |||
} | |||
} | |||
}) | |||
}, | |||
// 联系客服按钮回调 | |||
contactUs() { | |||
this.show = true | |||
}, | |||
confirm() { | |||
this.show = false | |||
}, | |||
cancle() { | |||
this.show = false | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
.warp { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
} | |||
.rect { | |||
width: 600rpx; | |||
height: 300rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
.title { | |||
padding: 10rpx 0 0 15rpx; | |||
background-color: #fd5100; | |||
color: #FFF; | |||
text-align: left; | |||
width: 100%; | |||
height: 18%; | |||
font-size: 36rpx; | |||
} | |||
.center { | |||
height: 40%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 36rpx; | |||
} | |||
.bottom { | |||
display: flex; | |||
justify-content: center; | |||
gap: 50rpx; | |||
} | |||
} | |||
} | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.head { | |||
display: flex; | |||
background-color: #fff; | |||
padding: 40rpx 20rpx; | |||
align-items: center; | |||
position: relative; | |||
.headImage { | |||
width: 120rpx; | |||
height: 120rpx; | |||
background-image: url(/static/image/center/3.png); | |||
background-size: 100% 100%; | |||
overflow: hidden; | |||
border-radius: 50%; | |||
margin-right: 40rpx; | |||
} | |||
.info { | |||
font-size: 28rpx; | |||
.vip { | |||
background-color: #FCCC92; | |||
color: #FA6239; | |||
width: 100rpx; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 40rpx; | |||
border-radius: 20rpx; | |||
margin-top: 20rpx; | |||
} | |||
.name { | |||
font-size: 32rpx; | |||
} | |||
.tips { | |||
font-size: 26rpx; | |||
color: #ABABAB; | |||
} | |||
} | |||
.headBtn { | |||
margin-left: auto; | |||
padding: 15rpx 20rpx; | |||
background-color: $uni-color; | |||
color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 50rpx; | |||
} | |||
.setting { | |||
position: absolute; | |||
right: 50rpx; | |||
top: 50rpx; | |||
} | |||
} | |||
.userShop { | |||
.userList { | |||
.title { | |||
font-size: 32rpx; | |||
font-weight: 900; | |||
padding: 20rpx; | |||
} | |||
.list { | |||
display: flex; | |||
flex-wrap: wrap; | |||
.item { | |||
width: 270rpx; | |||
margin: 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
padding: 40rpx 30rpx; | |||
background-color: #fff; | |||
border-radius: 30rpx; | |||
line-height: 60rpx; | |||
.name {} | |||
.num { | |||
color: $uni-color; | |||
font-weight: 600; | |||
font-size: 28rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.user { | |||
.line { | |||
display: flex; | |||
background-color: #fff; | |||
margin-top: 20rpx; | |||
padding: 20rpx 0; | |||
.item { | |||
flex: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 20rpx 0; | |||
&:nth-child(1) { | |||
border-right: 1px solid #00000013; | |||
} | |||
.image { | |||
width: 100rpx; | |||
height: 70rpx; | |||
margin-right: 20rpx; | |||
} | |||
} | |||
} | |||
.grid { | |||
flex-direction: column; | |||
font-size: 26rpx; | |||
padding: 20rpx; | |||
.title { | |||
margin-bottom: 30rpx; | |||
font-size: 28rpx; | |||
font-weight: 600; | |||
} | |||
.image { | |||
width: 70rpx; | |||
height: 70rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
text { | |||
text-align: center; | |||
width: 120rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,40 +0,0 @@ | |||
<template> | |||
<view class="home"> | |||
<view class="content" style="padding-top: 35vh;"> | |||
<span>欢迎</span> | |||
<span style="font-size: 80rpx; margin: 20rpx 0;">Christine</span> | |||
<view class="flex-col" style="gap: 5rpx; margin-top: 40rpx;"> | |||
<span>来到百富门的世界</span> | |||
<span>品味传承与创新交织的威士忌艺术</span> | |||
<span>开启您的专属品鉴之旅</span> | |||
</view> | |||
<view style="margin-top: 6vh;" @click="query"> | |||
<view class="btn2"> | |||
点击进入 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
query(){ | |||
uni.navigateTo({ | |||
url:'/pages/index/greetP1' | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
</style> |
@ -1,412 +1,57 @@ | |||
<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="桌布租赁" /> | |||
</view> | |||
<!-- <view class="right-area"> | |||
<view @click="searchAddress" class="search-button"> | |||
搜索 | |||
</view> | |||
</view> --> | |||
<view class="home"> | |||
<image src="/static/image/bg/2.png" | |||
class="page-bg" | |||
mode="aspectFill"></image> | |||
</view> | |||
<view class="swipe"> | |||
<uv-swiper | |||
:list="bannerList" | |||
indicator | |||
height="320rpx" | |||
keyName="url"></uv-swiper> | |||
<view class="swipe" style="padding-top: 310rpx;"> | |||
<uv-swiper :list="bannerList" | |||
keyName="image" | |||
height="300rpx"></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> | |||
<view class="content" style="padding-top: 20rpx;"> | |||
<text>欢迎</text> | |||
<text style="font-size: 80rpx; margin: 10rpx 0;">Christine</text> | |||
<view class="flex-col" style="gap: 5rpx; margin-top: 20rpx;"> | |||
<text>来到百富门的世界</text> | |||
<text>品味传承与创新交织的威士忌艺术</text> | |||
<text>开启您的专属品鉴之旅</text> | |||
</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="btns"> | |||
<view class="btn" | |||
@click="$utils.navigateTo('/pages_order/auth/wxUserInfo')"> | |||
我要水洗 | |||
</view> | |||
<view style="margin-top: 40rpx;" @click="query"> | |||
<view class="btn2"> | |||
点击进入 | |||
</view> | |||
<view class="tips"> | |||
关联门店:主信门店 | |||
</view> | |||
</view> | |||
<view class="productList"> | |||
<productList/> | |||
</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 } from 'vuex' | |||
// import selectArea from '../../components/selectArea.vue'; | |||
import { mapState } from 'vuex' | |||
export default { | |||
components : { | |||
tabber, | |||
productList, | |||
PrivacyAgreementPoup, | |||
}, | |||
data() { | |||
return { | |||
area: '长沙', | |||
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....', | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
title: '' | |||
}, | |||
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']), | |||
...mapState(['bannerList']), | |||
}, | |||
onShow() { | |||
}, | |||
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 | |||
}) | |||
query(){ | |||
uni.navigateTo({ | |||
// url: '/pages_order/info/infoPages' | |||
url: '/pages/index/article' | |||
}) | |||
}, | |||
//提取用户选择的地址信息(省市县信息) | |||
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; | |||
} | |||
.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; | |||
} | |||
} | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
</style> |
@ -0,0 +1,74 @@ | |||
<template> | |||
<view class="home"> | |||
<image src="/static/image/bg/1.png" | |||
class="page-bg" | |||
mode="aspectFill"></image> | |||
<view class="content_now"> | |||
<view class="article"> | |||
<uv-parse :content="configList[key]"></uv-parse> | |||
</view> | |||
</view> | |||
<view class="an"> | |||
<view class="btn2" | |||
@click="next"> | |||
下一页 | |||
</view> | |||
<text class="second-color">{{ configList.bg_title }}</text> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
computed : { | |||
...mapState(['configList']), | |||
}, | |||
data() { | |||
return { | |||
index : 0, | |||
key : '', | |||
} | |||
}, | |||
onLoad(args) { | |||
this.key = args.key || 'cancel_value' | |||
}, | |||
methods: { | |||
next(){ | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.article{ | |||
width: 600rpx; | |||
font-size: 28rpx; | |||
} | |||
.an{ | |||
position: fixed; | |||
bottom: 330rpx; | |||
text-align: center; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
width: 100%; | |||
} | |||
.second-color{ | |||
margin-top: 20rpx; | |||
} | |||
.btn2 { | |||
border: 4rpx solid $uni-color; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 16rpx 200rpx; | |||
color: $uni-color; | |||
border-radius: 10rpx; | |||
} | |||
</style> |
@ -1,122 +1,219 @@ | |||
<template> | |||
<view class="home"> | |||
<view class="content" style="padding-top: 15vh;"> | |||
<view class="flex-col mt-40" style="width: 90vw; padding: 20rpx 0; gap: 10rpx; border-radius: 12rpx; border: 2rpx solid #07c060;"> | |||
<span style="font-size: 28rpx;">请选择您方便的时间,</span> | |||
<span style="font-size: 28rpx;">我们将根据您的日程为您安排上门威士忌品鉴服务,</span> | |||
<span style="font-size: 28rpx;">确保您能在舒适的环境中尽享专属体验</span> | |||
<image src="/static/image/bg/1.png" | |||
class="page-bg" | |||
mode="aspectFill"></image> | |||
<view class="content_now"> | |||
<view class="flex-col" style="width: 600rpx; padding: 20rpx 0; gap: 10rpx; border-radius: 12rpx; border: 2rpx solid #ecb864;"> | |||
<span style="font-size: 25rpx;">请选择您方便的时间,</span> | |||
<span style="font-size: 25rpx;">我们将根据您的日程为您安排上门威士忌品鉴服务,</span> | |||
<span style="font-size: 25rpx;">确保您能在舒适的环境中尽享专属体验</span> | |||
</view> | |||
<span class="font-bold" style="margin-top: 5vh;">预约信息</span> | |||
<view class="" style="width: 90vw;"> | |||
<view class="flex-sb mt-40"> | |||
<span class="font-bold" style="margin-top: 10rpx;">预约信息</span> | |||
<view class="" style="width: 600rpx;"> | |||
<view class="flex-sb" style="margin-top: 10rpx;" | |||
@click="$refs.datetimePicker.open()"> | |||
<view class="date"> | |||
{{year}} | |||
<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/> | |||
{{ $dayjs(date).format('YYYY') }}年 | |||
<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/> | |||
</view> | |||
<view class="date"> | |||
{{date}} | |||
<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/> | |||
{{ $dayjs(date).format('MM-DD') }} | |||
<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/> | |||
</view> | |||
<view class="date"> | |||
{{time}} | |||
<img src="../static/info/下拉.png" style="width: 25rpx; height: 25rpx;"/> | |||
{{ $dayjs(date).format('HH:mm') }} | |||
<img src="../static/info/a.png" style="width: 25rpx; height: 25rpx;"/> | |||
</view> | |||
</view> | |||
<view class="flex-start-col mt-40"> | |||
<view class="flex-start-col" style="margin-top: 10rpx;"> | |||
<view class="flex-center" style="align-items: flex-end;"> | |||
<view class="flex-start-col" style="gap: 10rpx;"> | |||
<span>姓名:</span> | |||
<input v-model="username" type="text" class="input" style="width: 20vw;"></input> | |||
<input v-model="form.username" type="text" class="input" style="width: 20vw;"></input> | |||
</view> | |||
<span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span> | |||
<!-- <span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span> --> | |||
</view> | |||
<view class="flex-center" style="align-items: flex-end;"> | |||
<view class="flex-start-col" style="gap: 10rpx;"> | |||
<span>联系电话:</span> | |||
<input v-model="phone" type="tel" class="input"></input> | |||
<input v-model="form.phone" type="tel" class="input"></input> | |||
</view> | |||
<span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span> | |||
<!-- <span style="margin-left: 20rpx; color: #dddddc; font-size: 26rpx;">(最开始填写的直接导入)</span> --> | |||
</view> | |||
<view class="flex-center"> | |||
<view class="flex-start-col" style="gap: 10rpx; width: 80vw;"> | |||
<span>详细地址:</span> | |||
<input v-model="address" type="text" class="input" style="width: 100%; height: 60rpx;"></input> | |||
<span>地址: {{ addressCity }}</span> | |||
<input v-model="address.address" placeholder="请输入详情地址" type="text" class="input" style="width: 100%; height: 60rpx;"></input> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="flex-col query" style="gap: 0rpx;"> | |||
<view class="flex-center" style="gap: 30rpx;"> | |||
<view class="btn2" style="padding: 16rpx 80rpx;" @click="pre"> | |||
返回 | |||
</view> | |||
<view class="btn2" style="padding: 16rpx 80rpx;" @click="next"> | |||
确定 / 提交 | |||
</view> | |||
</view> | |||
<view class="an"> | |||
<view class="flex-center" style="gap: 30rpx;"> | |||
<view class="btn2" style="padding: 16rpx 80rpx;" @click="pre"> | |||
返回 | |||
</view> | |||
<view class="btn2" style="padding: 16rpx 80rpx;" @click="submit"> | |||
<!-- 确定 / 提交 --> | |||
预约 | |||
</view> | |||
<text class="second-color">欢快无限饮 饮酒有限度</text> | |||
</view> | |||
<text class="second-color">{{ configList.bg_title }}</text> | |||
</view> | |||
<uv-datetime-picker | |||
ref="datetimePicker" | |||
v-model="date" | |||
mode="datetime" | |||
:minDate="new Date().getTime()" | |||
@confirm="confirm"> | |||
</uv-datetime-picker> | |||
</view> | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex' | |||
export default { | |||
data() { | |||
return { | |||
year: '2024年', | |||
date: '9月20日', | |||
time: '08:00', | |||
firstName: '张', | |||
lastName: '里于', | |||
gender: '', | |||
phone: '', | |||
message: '' | |||
// year: '2024年', | |||
// date: '9月20日', | |||
// time: '08:00', | |||
// firstName: '张', | |||
// lastName: '里于', | |||
// gender: '', | |||
// phone: '', | |||
// message: '', | |||
date : new Date().getTime(), | |||
address : { | |||
province : '', | |||
city : '', | |||
district : '', | |||
address : '', | |||
}, | |||
form : { | |||
username:'', | |||
phone:'', | |||
}, | |||
} | |||
}, | |||
computed : { | |||
addressCity(){ | |||
return this.address.province + | |||
this.address.city + | |||
this.address.district | |||
}, | |||
...mapState(['problemList', 'configList', 'queryMyLog']), | |||
}, | |||
onLoad() { | |||
if(uni.getStorageSync('user_address')){ | |||
this.address = JSON.parse(uni.getStorageSync('user_address')) | |||
} | |||
if(uni.getStorageSync('user_phone')){ | |||
this.form = JSON.parse(uni.getStorageSync('user_phone')) | |||
} | |||
}, | |||
methods: { | |||
next() { | |||
uni.navigateTo({ | |||
url: '/pages_order/info/start' | |||
}) | |||
// uni.navigate | |||
}, | |||
pre(){ | |||
uni.navigateBack({ | |||
delta:1 | |||
// uni.navigateBack({ | |||
// delta:1 | |||
// }) | |||
uni.reLaunch({ | |||
url: '/pages/index/index' | |||
}) | |||
} | |||
}, | |||
confirm(e){ | |||
this.date = e.value | |||
}, | |||
submit(){ | |||
if(this.$utils.verificationAll(this.form, { | |||
username : '请输入姓名', | |||
phone : '请输入电话号码', | |||
})){ | |||
return | |||
} | |||
if(this.$utils.verificationPhone(this.form.phone)){ | |||
uni.showToast({ | |||
title: '请输入正确的手机号', | |||
icon: 'none', | |||
}) | |||
return | |||
} | |||
if(this.$utils.verificationAll(this.address, { | |||
address : '请输入详情地址', | |||
})){ | |||
return | |||
} | |||
uni.setStorageSync('user_address', this.address) | |||
this.$api('submit', { | |||
...this.address, | |||
...this.form, | |||
name : this.form.username, | |||
area : this.address.district, | |||
yearValue : this.$dayjs(this.date).format('YYYY'), | |||
monthDay : this.$dayjs(this.date).format('MM-DD'), | |||
dayTime : this.$dayjs(this.date).format('HH:mm'), | |||
}, res => { | |||
if(res.code == 200){ | |||
uni.showToast({ | |||
title: '预约成功', | |||
icon: 'none' | |||
}) | |||
setTimeout(uni.reLaunch, 1000, { | |||
url : '/pages/index/index' | |||
}) | |||
} | |||
}) | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.query { | |||
position: relative; | |||
bottom: -5vh; | |||
.home{ | |||
font-size: 28rpx; | |||
} | |||
.an{ | |||
position: fixed; | |||
bottom: 300rpx; | |||
text-align: center; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
} | |||
.date { | |||
border: 2rpx solid $uni-color; | |||
padding: 14rpx 30rpx; | |||
padding: 10rpx 30rpx; | |||
border-radius: 12rpx; | |||
} | |||
.main-color{ | |||
flex-wrap: nowrap; | |||
color: $uni-color; | |||
} | |||
.input{ | |||
border: 2rpx solid #FD5100; | |||
border-radius: 10rpx; | |||
padding: 10rpx; | |||
} | |||
.area{ | |||
border: 2rpx solid #FD5100; | |||
border: 2rpx solid $uni-color; | |||
border-radius: 10rpx; | |||
padding: 10rpx; | |||
width: 100%; | |||
height: 120rpx; | |||
padding: 4rpx 10rpx; | |||
} | |||
</style> |
@ -1 +0,0 @@ | |||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726157567630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6220" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M513.536 628.6336c101.6832 0 280.8832 38.7072 310.8864 193.7408 77.5168-77.5168 124.928-185.9584 124.928-305.0496 0-241.152-194.6624-435.8144-435.8144-435.8144S77.7216 277.0944 77.7216 517.2224c0 119.0912 47.4112 227.6352 124.928 306.0736 30.0032-154.9312 209.2032-194.6624 310.8864-194.6624z m0-439.7056c112.3328 0 204.3904 91.0336 204.3904 204.3904 0 112.3328-91.0336 204.3904-204.3904 204.3904a203.776 203.776 0 0 1-204.3904-204.3904c0.1024-112.4352 92.0576-204.3904 204.3904-204.3904z m0 0" fill="#cdcdcd" p-id="6221"></path><path d="M515.4816 1006.8992c-65.8432 0-129.8432-12.9024-189.952-38.4-58.1632-24.576-110.2848-59.8016-155.136-104.5504A485.56032 485.56032 0 0 1 65.8432 708.8128c-25.6-60.2112-38.5024-124.1088-38.5024-189.952 0-65.8432 12.9024-129.8432 38.4-189.952 24.576-58.1632 59.8016-110.2848 104.5504-155.136 44.8512-44.8512 96.9728-79.9744 155.136-104.5504C385.6384 43.6224 449.536 30.72 515.4816 30.72c65.8432 0 129.8432 12.9024 189.952 38.4 58.1632 24.576 110.2848 59.8016 155.136 104.5504 44.8512 44.8512 79.9744 96.9728 104.5504 155.136C990.6176 389.0176 1003.52 452.9152 1003.52 518.8608c0 65.8432-12.9024 129.8432-38.4 189.952-24.576 58.1632-59.8016 110.2848-104.5504 155.136a485.56032 485.56032 0 0 1-155.136 104.5504 484.39296 484.39296 0 0 1-189.952 38.4z m0-936.8576c-60.6208 0-119.3984 11.8784-174.6944 35.2256a447.76448 447.76448 0 0 0-142.6432 96.1536A444.42624 444.42624 0 0 0 101.9904 344.064a446.70976 446.70976 0 0 0-35.2256 174.6944c0 60.6208 11.8784 119.3984 35.2256 174.6944 22.6304 53.4528 54.9888 101.4784 96.1536 142.6432 41.1648 41.2672 89.1904 73.6256 142.6432 96.1536 55.296 23.3472 114.0736 35.2256 174.6944 35.2256 60.6208 0 119.3984-11.8784 174.6944-35.2256 53.4528-22.6304 101.4784-54.9888 142.6432-96.1536 41.2672-41.1648 73.6256-89.1904 96.1536-142.6432 23.3472-55.296 35.2256-114.0736 35.2256-174.6944 0-60.6208-11.8784-119.3984-35.2256-174.6944a447.76448 447.76448 0 0 0-96.1536-142.6432 444.42624 444.42624 0 0 0-142.6432-96.1536 447.44704 447.44704 0 0 0-174.6944-35.2256z m0 0" fill="#cdcdcd" p-id="6222"></path></svg> |