| @ -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> | |||