| @ -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> | <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> | ||||
| <!-- 水洗店 --> | |||||
| <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> | |||||
| <!-- 酒店 --> | |||||
| <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> | ||||
| <view class="tips"> | |||||
| 关联门店:主信门店 | |||||
| </view> | |||||
| </view> | |||||
| <view class="productList"> | |||||
| <productList/> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> --> | |||||
| <PrivacyAgreementPoup/> | |||||
| <tabber select="0"/> | |||||
| </view> | </view> | ||||
| </template> | </template> | ||||
| <script> | <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 { | export default { | ||||
| components : { | |||||
| tabber, | |||||
| productList, | |||||
| PrivacyAgreementPoup, | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | 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 : { | computed : { | ||||
| ...mapGetters(['userShop']), | |||||
| ...mapState(['bannerList']), | |||||
| }, | |||||
| onShow() { | |||||
| }, | }, | ||||
| methods: { | 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> | </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> | <template> | ||||
| <view class="home"> | <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> | </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"> | <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> | ||||
| <view class="date"> | <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> | ||||
| <view class="date"> | <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> | </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-center" style="align-items: flex-end;"> | ||||
| <view class="flex-start-col" style="gap: 10rpx;"> | <view class="flex-start-col" style="gap: 10rpx;"> | ||||
| <span>姓名:</span> | <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> | </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> | ||||
| <view class="flex-center" style="align-items: flex-end;"> | <view class="flex-center" style="align-items: flex-end;"> | ||||
| <view class="flex-start-col" style="gap: 10rpx;"> | <view class="flex-start-col" style="gap: 10rpx;"> | ||||
| <span>联系电话:</span> | <span>联系电话:</span> | ||||
| <input v-model="phone" type="tel" class="input"></input> | |||||
| <input v-model="form.phone" type="tel" class="input"></input> | |||||
| </view> | </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> | ||||
| <view class="flex-center"> | <view class="flex-center"> | ||||
| <view class="flex-start-col" style="gap: 10rpx; width: 80vw;"> | <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> | </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> | </view> | ||||
| <text class="second-color">欢快无限饮 饮酒有限度</text> | |||||
| </view> | </view> | ||||
| <text class="second-color">{{ configList.bg_title }}</text> | |||||
| </view> | </view> | ||||
| <uv-datetime-picker | |||||
| ref="datetimePicker" | |||||
| v-model="date" | |||||
| mode="datetime" | |||||
| :minDate="new Date().getTime()" | |||||
| @confirm="confirm"> | |||||
| </uv-datetime-picker> | |||||
| </view> | </view> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { mapState } from 'vuex' | |||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| return { | 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: { | methods: { | ||||
| next() { | next() { | ||||
| uni.navigateTo({ | |||||
| url: '/pages_order/info/start' | |||||
| }) | |||||
| // uni.navigate | |||||
| }, | }, | ||||
| pre(){ | 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> | </script> | ||||
| <style lang="scss" scoped> | <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 { | .date { | ||||
| border: 2rpx solid $uni-color; | border: 2rpx solid $uni-color; | ||||
| padding: 14rpx 30rpx; | |||||
| padding: 10rpx 30rpx; | |||||
| border-radius: 12rpx; | border-radius: 12rpx; | ||||
| } | } | ||||
| .main-color{ | .main-color{ | ||||
| flex-wrap: nowrap; | flex-wrap: nowrap; | ||||
| color: $uni-color; | |||||
| } | } | ||||
| .input{ | .input{ | ||||
| border: 2rpx solid #FD5100; | |||||
| border-radius: 10rpx; | |||||
| padding: 10rpx; | |||||
| } | |||||
| .area{ | |||||
| border: 2rpx solid #FD5100; | |||||
| border: 2rpx solid $uni-color; | |||||
| border-radius: 10rpx; | border-radius: 10rpx; | ||||
| padding: 10rpx; | |||||
| width: 100%; | |||||
| height: 120rpx; | |||||
| padding: 4rpx 10rpx; | |||||
| } | } | ||||
| </style> | </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> | |||||