wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

咨询我们地址页面绘制

Browse Source
dev
syt 10 months ago
parent ec9f5fb2d3
commit 4872a7bd02
13 changed files with 1334 additions and 110 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 73
      pages.json
  2. 115
      pages/login/index-2024-1-25.vue
  3. 201
      pages/login/index.vue
  4. 154
      pages/news/consult/about.vue
  5. 87
      pages/news/consult/comment.vue
  6. 130
      pages/news/consult/index.vue
  7. 38
      pages/news/consult/store.vue
  8. 139
      pages/news/park/addressEdit.vue
  9. 73
      pages/news/park/addressList.vue
  10. 138
      pages/news/park/index.vue
  11. 143
      pages/news/park/personal.vue
  12. 123
      pages/news/park/recordHistory.vue
  13. BIN
      static/news/login-bg.png

73
pages.json
Unescape View File

@ -122,6 +122,7 @@
{
"path": "pages/login/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "会员登录"
}
},
@ -534,6 +535,78 @@
{
"root": "pages/news/",
"pages": [
{
"path" : "consult/store",
"style" :
{
"navigationBarTitleText": "门店相册",
"enablePullDownRefresh": false
}
},
{
"path" : "consult/comment",
"style" :
{
"navigationBarTitleText": "评论",
"enablePullDownRefresh": false
}
},
{
"path" : "consult/about",
"style" :
{
"navigationBarTitleText": "联系我们",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "consult/index",
"style" :
{
"navigationBarTitleText": "咨询",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "park/index",
"style" :
{
"navigationBarTitleText": "停车指引",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "park/recordHistory",
"style" :
{
"navigationBarTitleText": "预约记录",
"enablePullDownRefresh": false
}
},{
"path" : "park/addressList",
"style" :
{
"navigationBarTitleText": "地址",
"enablePullDownRefresh": false
}
},{
"path" : "park/addressEdit",
"style" :
{
"navigationBarTitleText": "地址",
"enablePullDownRefresh": false
}
},{
"path" : "park/personal",
"style" :
{
"navigationBarTitleText": "编辑信息",
"enablePullDownRefresh": false
}
},
{
"path" : "coupon/index",
"style" :

115
pages/login/index-2024-1-25.vue
Unescape View File

@ -0,0 +1,115 @@
<template>
<view v-if="isLoad" class="login" :style="appThemeStyle">
<MpWeixin v-if="isMpWeixinAuth" @success="onGetUserInfoSuccess" />
<WxOfficial v-else-if="isWxOfficialAuth" @success="onGetUserInfoSuccess" />
<MpAlipay v-else-if="isMpAlipayAuth" @success="onGetUserInfoSuccess" />
<Main v-else :isParty="isParty" :partyData="partyData" :isMpWeixinMobile="isMpWeixinMobile" />
</view>
</template>
<script>
import Main from './components/main'
import MpWeixin from './components/mp-weixin'
import MpAlipay from './components/mp-alipay'
import WxOfficial from './components/wx-official'
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
export default {
components: {
Main,
MpWeixin,
MpAlipay,
WxOfficial
},
data() {
return {
// 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
isLoad: false,
// 注册设置 (后台设置)
setting: {},
// 是否显示微信小程序授权登录
isMpWeixinAuth: false,
// 是否显示微信小程序端 一键授权手机号
isMpWeixinMobile: false,
// 是否显示微信公众号授权登录
isWxOfficialAuth: false,
// 是否显示支付宝小程序授权登录
isMpAlipayAuth: false,
// 是否存在第三方用户信息
isParty: false,
// 第三方用户信息数据
partyData: {}
}
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
// 获取注册设置
await this.getRegisterSetting()
// 设置当前是否显示第三方授权登录
await this.setShowUserInfo()
// 数据加载完成
this.isLoad = true
},
methods: {
// 获取注册设置 [后台-客户端-注册设置]
async getRegisterSetting() {
this.setting = await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
},
/**
* 设置当前是否显示第三方授权登录
* - 条件1: 只有对应的客户端显示获取用户信息按钮, 例如微信小程序、微信公众号
* - 条件2: 注册设置是否已开启该选项
*/
async setShowUserInfo() {
const app = this
// 判断当前客户端是微信小程序
const isMpWeixin = app.platform === 'MP-WEIXIN'
const isWxOfficial = app.platform === 'WXOFFICIAL'
const isMpAlipay = app.platform === 'MP-ALIPAY' && my.canIUse('getAuthCode')
// 判断是否显示第三方授权登录
app.isMpWeixinAuth = isMpWeixin && Boolean(app.setting.isOauthMpweixin)
app.isMpWeixinMobile = isMpWeixin && Boolean(app.setting.isOauthMobileMpweixin)
app.isWxOfficialAuth = isWxOfficial && Boolean(app.setting.isOauthWxofficial)
app.isMpAlipayAuth = isMpAlipay && Boolean(app.setting.isOauthMpAlipay)
},
// 获取到用户信息的回调函数
onGetUserInfoSuccess(result) {
// 记录第三方用户信息数据
this.partyData = result
// 显示注册页面
this.onShowRegister()
},
// 显示注册页面
onShowRegister() {
// 是否显示微信小程序授权登录
if (this.partyData.oauth === 'MP-WEIXIN') {
this.isMpWeixinAuth = false
}
// 是否显示微信公众号授权登录
if (this.partyData.oauth === 'WXOFFICIAL') {
this.isWxOfficialAuth = false
}
// 是否显示支付宝小程序授权登录
if (this.partyData.oauth === 'MP-ALIPAY') {
this.isMpAlipayAuth = false
}
// 已获取到了第三方用户信息
this.isParty = true
}
}
}
</script>
<style lang="scss" scoped>
</style>

201
pages/login/index.vue
Unescape View File

@ -1,115 +1,126 @@
<template>
<view v-if="isLoad" class="login" :style="appThemeStyle">
<MpWeixin v-if="isMpWeixinAuth" @success="onGetUserInfoSuccess" />
<WxOfficial v-else-if="isWxOfficialAuth" @success="onGetUserInfoSuccess" />
<MpAlipay v-else-if="isMpAlipayAuth" @success="onGetUserInfoSuccess" />
<Main v-else :isParty="isParty" :partyData="partyData" :isMpWeixinMobile="isMpWeixinMobile" />
<view class="login">
<view class="refund-navbar">
<u-navbar title="" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="login-hd">
<view class="a">验证码登录</view>
<view class="b">若该手机号未注册，我们将自动为您注册</view>
</view>
<view class="login-bd">
<view class="a">+86<input type="tel" placeholder="请输入手机号" /></view>
<view class="b">
<input type="number" placeholder="请输入验证码" />获取验证码
</view>
<view class="c">
查看并同意<text>《用户服务协议》</text>和<text>《隐私政策》</text>
</view>
</view>
<view class="login-fd login-fd-on">登录</view>
</view>
</template>
<script>
import Main from './components/main'
import MpWeixin from './components/mp-weixin'
import MpAlipay from './components/mp-alipay'
import WxOfficial from './components/wx-official'
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
import img from "@/static/news/login-bg.png"
export default {
components: {
Main,
MpWeixin,
MpAlipay,
WxOfficial
},
data() {
return {
// 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
isLoad: false,
// 注册设置 (后台设置)
setting: {},
// 是否显示微信小程序授权登录
isMpWeixinAuth: false,
// 是否显示微信小程序端 一键授权手机号
isMpWeixinMobile: false,
// 是否显示微信公众号授权登录
isWxOfficialAuth: false,
// 是否显示支付宝小程序授权登录
isMpAlipayAuth: false,
// 是否存在第三方用户信息
isParty: false,
// 第三方用户信息数据
partyData: {}
}
currentIndex: 0,
background: {
background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%',
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
// 获取注册设置
await this.getRegisterSetting()
// 设置当前是否显示第三方授权登录
await this.setShowUserInfo()
// 数据加载完成
this.isLoad = true
}
},
methods: {
// 获取注册设置 [后台-客户端-注册设置]
async getRegisterSetting() {
this.setting = await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
},
/**
* 设置当前是否显示第三方授权登录
* - 条件1: 只有对应的客户端显示获取用户信息按钮, 例如微信小程序、微信公众号
* - 条件2: 注册设置是否已开启该选项
*/
async setShowUserInfo() {
const app = this
// 判断当前客户端是微信小程序
const isMpWeixin = app.platform === 'MP-WEIXIN'
const isWxOfficial = app.platform === 'WXOFFICIAL'
const isMpAlipay = app.platform === 'MP-ALIPAY' && my.canIUse('getAuthCode')
// 判断是否显示第三方授权登录
app.isMpWeixinAuth = isMpWeixin && Boolean(app.setting.isOauthMpweixin)
app.isMpWeixinMobile = isMpWeixin && Boolean(app.setting.isOauthMobileMpweixin)
app.isWxOfficialAuth = isWxOfficial && Boolean(app.setting.isOauthWxofficial)
app.isMpAlipayAuth = isMpAlipay && Boolean(app.setting.isOauthMpAlipay)
},
// 获取到用户信息的回调函数
onGetUserInfoSuccess(result) {
// 记录第三方用户信息数据
this.partyData = result
// 显示注册页面
this.onShowRegister()
},
}
}
</script>
// 显示注册页面
onShowRegister() {
// 是否显示微信小程序授权登录
if (this.partyData.oauth === 'MP-WEIXIN') {
this.isMpWeixinAuth = false
<style lang="scss" scoped>
.login{
width: 100%;
background: #fffafb url(@/static/news/login-bg.png) center top no-repeat;
background-size: 100% auto;
min-height: 100vh;
&-hd{
padding: 90rpx 75rpx 75rpx;
overflow: hidden;
.a{
line-height: 80rpx;
font-size: 40rpx;
font-weight: 500;
color: #000000;
}
// 是否显示微信公众号授权登录
if (this.partyData.oauth === 'WXOFFICIAL') {
this.isWxOfficialAuth = false
.b{
font-size: 28rpx;
font-weight: 400;
color: #5A5A5A;
line-height: 50rpx;
}
// 是否显示支付宝小程序授权登录
if (this.partyData.oauth === 'MP-ALIPAY') {
this.isMpAlipayAuth = false
}
// 已获取到了第三方用户信息
this.isParty = true
&-bd{
padding: 0 75rpx;
overflow: hidden;
.a{
padding: 20rpx 0;
border-bottom: 1px solid #F2F2F2;
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 400;
color: #212121;
input{
flex: 1;
margin-left: 30rpx;
line-height: 50rpx;
border-left: 1px solid #C4C4C4;
padding-left: 30rpx;
font-size: 28rpx;
color: #212121;
}
}
.b{
padding: 30rpx 0;
border-bottom: 1px solid #F2F2F2;
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #F3202A;
input{
flex: 1;
margin-right: 30rpx;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
}
</script>
<style lang="scss" scoped>
}
.c{
padding: 28rpx 0;
font-size: 28rpx;
font-weight: 400;
color: #A0A0A0;
text{
color: #FF343C;
}
}
}
&-fd{
width: 680rpx;
line-height: 88rpx;
background: #FFBDBA;
border-radius: 88rpx;
text-align: center;
margin: 0 auto;
margin-top: 120rpx;
font-size: 28rpx;
font-weight: 600;
color: #FFFFFF;
&-on{
background-color: #FF343C;
}
}
}
</style>

154
pages/news/consult/about.vue
Unescape View File

@ -0,0 +1,154 @@
<template>
<view class="park">
<view class="park-navbar">
<u-navbar title="联系我们" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="park-hd">
<image src="@/static/home/phone.jpg"></image>
<view class="a">昆明湖店·YN_k121</view>
<view class="b"><u-icon name="map" style="margin-right: 10rpx; margin-top: 10rpx;"></u-icon>距地铁2号线大道站2号口600m</view>
</view>
<view class="park-bd">
<view class="a">联系电话</view>
<view class="b">18020890980<image src="@/static/news/tel.png"></image></view>
</view>
<view class="park-fd">
<image src="@/static/home/phone.jpg"></image>
<view class="txt">长按识别二维码</view>
<view class="txt">添加我的微信</view>
</view>
<view class="park-btn">
<view class="btn">编辑信息</view>
</view>
</view>
</template>
<script>
import img from "@/static/news/login-bg.png"
export default {
data() {
return {
currentIndex: 0,
background: {
background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%',
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.park{
width: 100%;
background: url(@/static/news/login-bg.png) center 0 no-repeat;
background-size: 100% auto;
min-height: 100vh;
&-hd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 60rpx;
padding: 30rpx 35rpx;
box-sizing: border-box;
overflow: hidden;
image{
width: 221rpx;
height: 157rpx;
margin-right: 20rpx;
float: left;
}
.a{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: flex-start;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
}
}
&-bd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 30rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
display: flex;
justify-content: space-between;
image{
width: 40rpx;
height: 40rpx;
}
.a{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.b{
padding: 0 30rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
font-weight: 400;
color: #7B7B7B;
}
}
&-fd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 60rpx 40rpx;
box-sizing: border-box;
overflow: hidden;
text-align: center;
image{
width: 300rpx;
height: 300rpx;
display: block;
margin: 0 auto;
}
.txt{
font-size: 32rpx;
font-weight: 400;
color: #686868;
margin-top: 20rpx;
}
}
&-btn{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
padding: 30rpx;
background-color: #fafafa;
box-sizing: border-box;
.btn{
width: 100%;
line-height: 96rpx;
background: #FF564A;
border-radius: 96rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
}
}
}
</style>

87
pages/news/consult/comment.vue
Unescape View File

@ -0,0 +1,87 @@
<template>
<view class="comment">
<view class="item" v-for="i in 10" :key="i">
<view class="avater">
<image src="@/static/news/avater.png"></image>
</view>
<view class="info">
<view class="a">Shark特<text>10分钟前</text></view>
<view class="b">非常棒，讲解细致，下次还来！</view>
<view class="c">
<image v-for="o in 3" :key="o" src="@/static/home/phone.jpg"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.comment{
padding: 20rpx 0;
overflow: hidden;
.item{
padding: 45rpx 40rpx;
overflow: hidden;
background-color: #fff;
display: flex;
align-items: flex-start;
.avater{
width: 80rpx;
height: 80rpx;
margin-right: 30rpx;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.info{
flex: 1;
max-width: 600rpx;
text-align: left;
overflow: hidden;
.a{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 32rpx;
font-weight: 400;
color: #232323;
text{
font-size: 28rpx;
font-weight: 400;
color: #B4B4B4;
}
}
.b{
font-size: 28rpx;
font-weight: 400;
color: #515151;
}
.c{
width: 110%;
overflow: hidden;
image{
width: 150rpx;
height: 150rpx;
float: left;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
}
}
</style>

130
pages/news/consult/index.vue
Unescape View File

@ -0,0 +1,130 @@
<template>
<view class="park">
<view class="park-navbar">
<u-navbar title="咨询" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="park-hd">
<image src="@/static/home/phone.jpg"></image>
<view class="a">昆明湖店·YN_k121</view>
<view class="b"><u-icon name="map" style="margin-right: 10rpx; margin-top: 10rpx;"></u-icon>距地铁2号线大道站2号口600m</view>
</view>
<view class="park-bd">
<view class="item"><text>1406天</text>服务总时长</view>
<view class="item"><text>7606天</text>服务总数</view>
<view class="item"><text>0次</text>为我服务次数</view>
</view>
<view class="park-fd">
<image src="@/static/home/phone.jpg"></image>
<view class="txt">长按识别二维码</view>
<view class="txt">添加我的微信</view>
</view>
</view>
</template>
<script>
import img from "@/static/news/login-bg.png"
export default {
data() {
return {
currentIndex: 0,
background: {
background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%',
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.park{
width: 100%;
background: url(@/static/news/login-bg.png) center 0 no-repeat;
background-size: 100% auto;
min-height: 100vh;
&-hd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 60rpx;
padding: 30rpx 35rpx;
box-sizing: border-box;
overflow: hidden;
image{
width: 221rpx;
height: 157rpx;
margin-right: 20rpx;
float: left;
}
.a{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: flex-start;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
}
}
&-bd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 30rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
display: flex;
justify-content: center;
.item{
flex: 1;
font-size: 28rpx;
font-weight: 400;
color: #7B7B7B;
text-align: center;
text{
font-size: 32rpx;
font-weight: 500;
color: #000000;
margin-top: 30rpx;
display: block;
}
}
}
&-fd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 60rpx 40rpx;
box-sizing: border-box;
overflow: hidden;
text-align: center;
image{
width: 300rpx;
height: 300rpx;
display: block;
margin: 0 auto;
}
.txt{
font-size: 32rpx;
font-weight: 400;
color: #686868;
margin-top: 20rpx;
}
}
}
</style>

38
pages/news/consult/store.vue
Unescape View File

@ -0,0 +1,38 @@
<template>
<view class="comment">
<view class="item" v-for="i in 20" :key="i">
<image src="@/static/home/ranking.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.comment{
padding: 10rpx 0 30rpx;
overflow: hidden;
.item{
width: 340rpx;
height: 256rpx;
overflow: hidden;
margin-left: 25rpx;
margin-top: 20rpx;
float: left;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
</style>

139
pages/news/park/addressEdit.vue
Unescape View File

@ -0,0 +1,139 @@
<template>
<view class="addressList">
<view class="addressList-hd">
<view class="item">
<view class="a">收货人</view>
<view class="b">
<input type="text" placeholder="请输入收货人姓名" />
</view>
</view>
<view class="item">
<view class="a">手机号</view>
<view class="b">
<input type="number" placeholder="请输入收货人手机号" />
</view>
</view>
<view class="item">
<view class="a">所属城市</view>
<view class="b">
<picker mode="region">
<view class="select">请选择省市区<u-icon name="arrow-right"></u-icon></view>
</picker>
</view>
</view>
<view class="items">
<view class="a">详细地址</view>
<view class="b">
<input type="text" placeholder="请输入详细地址" />
</view>
</view>
</view>
<view class="addressList-bd">
<view class="a">设为默认收货地址</view>
<view class="b">
<u-switch v-model="checked" active-color="#55BD6A" inactive-color="#eee"></u-switch>
</view>
</view>
<view class="addressList-fd">
<view class="btn">保存收货地址</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checked: false,
value: ""
};
}
}
</script>
<style lang="scss" scoped>
.addressList{
padding: 0 0 20rpx;
overflow: hidden;
&-hd{
background-color: #fff;
padding: 0 25rpx 25rpx;
overflow: hidden;
.item{
padding: 20rpx 0;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F7F7F7;
.b{
font-size: 28rpx;
color: #9D9D9D;
flex: 1;
text-align: right;
input{
width: 100%;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
}
.select{
color: #C7C7C7;
&-on{
color: #212121;
}
}
}
}
.items{
padding: 20rpx 0;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
.b{
font-size: 28rpx;
flex: 1;
text-align: left;
input{
width: 100%;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
margin-top: 20rpx;
}
}
}
}
&-bd{
background-color: #fff;
padding: 25rpx;
overflow: hidden;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
&-fd{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
padding: 30rpx;
background-color: #fafafa;
box-sizing: border-box;
.btn{
width: 100%;
line-height: 96rpx;
background: #F34A40;
border-radius: 8rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
}
}
}
</style>

73
pages/news/park/addressList.vue
Unescape View File

@ -0,0 +1,73 @@
<template>
<view class="addressList">
<view class="item" v-for="i in 9" :key="i">
<view class="a">张小艾 188****9890<text>默认</text></view>
<view class="b">
<view class="d">
广州市越秀区东风中路269号1109-1110
</view>
<image src="/static/order/edit.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.addressList{
padding: 0 0 0 50rpx;
background-color: #FFFFFF;
overflow: hidden;
.item{
padding: 35rpx 0;
overflow: hidden;
border-bottom: 1px solid #EEEEEE;
.a{
font-size: 32rpx;
font-weight: 500;
color: #1E1E1E;
padding-bottom: 20rpx;
display: flex;
align-items: center;
text{
width: 66rpx;
line-height: 34rpx;
background: #F32020;
border-radius: 4rpx;
text-align: center;
display: block;
margin-left: 10rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
border-radius: 5rpx;
}
}
.b{
display: flex;
align-items: flex-start;
justify-content: space-between;
.d{
font-size: 32rpx;
font-weight: 400;
color: #979797;
max-width: 600rpx;
}
image{
width: 36rpx;
height: 36rpx;
margin-right: 50rpx;
}
}
}
}
</style>

138
pages/news/park/index.vue
Unescape View File

@ -0,0 +1,138 @@
<template>
<view class="park">
<view class="park-navbar">
<u-navbar title="停车指引" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="park-hd">
<view class="a">昆明湖店·YN_k121</view>
<view class="b"><u-icon name="map" style="margin-right: 10rpx;"></u-icon>距地铁2号线大道站2号口600m</view>
</view>
<view class="park-bd">
<view class="a">停车攻略</view>
<view class="b">
<view class="store">昆明湖店广场地下停车场<text>推荐</text></view>
<view class="btn">导航</view>
</view>
<view class="c">
<view class="p"><text>价格:</text>购物免费停车2小时，超出部份收取3元/小时</view>
<view class="p"><text>特点:</text>长时间停留推荐，相对安全，可享免费停车两小时。</view>
<view class="p"><text>详细:</text>佰腾数码广场楼下有地下停车场，停车场车位不少，且出门即可乘坐电梯至门店。但节假日等高峰期车位较为紧张。</view>
</view>
</view>
</view>
</template>
<script>
import img from "@/static/news/login-bg.png"
export default {
data() {
return {
currentIndex: 0,
background: {
background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%',
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.park{
width: 100%;
background: url(@/static/news/login-bg.png) center 0 no-repeat;
background-size: 100% auto;
min-height: 100vh;
&-hd{
width: 698rpx;
height: 184rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 60rpx;
padding: 40rpx 50rpx;
box-sizing: border-box;
.a{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
}
}
&-bd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 30rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
.a{
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
.store{
display: flex;
align-items: center;
text{
width: 96rpx;
height: 40rpx;
background: #FF5F5F;
border-radius: 10rpx;
text-align: center;
line-height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
display: block;
margin-left: 5rpx;
}
}
.btn{
width: 138rpx;
text-align: center;
line-height: 53rpx;
background: #FFFFFF;
border-radius: 53rpx;
opacity: 1;
border: 1px solid #E9E9E9;
font-size: 28rpx;
font-weight: 400;
color: #535353;
}
}
.c{
padding: 30rpx 0;
.p{
line-height: 50rpx;
font-size: 28rpx;
color: #666;
text{
color: #999;
margin-right: 20rpx;
}
}
}
}
}
</style>

143
pages/news/park/personal.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<view class="addressList">
<view class="addressList-hd">
<view class="item">
<view class="a">店铺名称</view>
<view class="b">
<input type="text" placeholder="请输入店铺名称" />
</view>
</view>
<view class="item">
<view class="a">店铺地址</view>
<view class="b">
<input type="text" placeholder="请输入店铺地址" />
</view>
</view>
<view class="item">
<view class="a">联系方式</view>
<view class="b">
<input type="number" placeholder="请输入手机号" />
</view>
</view>
<view class="items">
<view class="a">微信二维码</view>
<view class="c">
<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5">
<template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="/static/news/icon-upload.png"></image>
<view class="1">上传图片</view>
</view>
</template>
</u-upload>
</view>
</view>
</view>
<view class="addressList-fd">
<view class="btn">保存</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checked: false,
value: "",
fileList: [
{
url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
}
],
};
}
}
</script>
<style lang="scss" scoped>
.addressList{
padding: 0 0 20rpx;
overflow: hidden;
&-hd{
background-color: #fff;
padding: 0 25rpx 25rpx;
overflow: hidden;
.item{
padding: 20rpx 0;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F7F7F7;
.b{
font-size: 28rpx;
color: #9D9D9D;
flex: 1;
text-align: right;
input{
width: 100%;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
}
.select{
color: #C7C7C7;
&-on{
color: #212121;
}
}
}
}
.items{
padding: 20rpx 0;
line-height: 50rpx;
font-size: 28rpx;
color: #212121;
.c{
padding-top: 20rpx;
overflow: hidden;
.slot-btn{
width: 80px;
height: 80px;
background: #FFFFFF;
border-radius: 10rpx;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 24rpx;
font-weight: 500;
color: #D1D1D1;
image{
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
}
}
}
}
}
&-fd{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
padding: 30rpx;
background-color: #fafafa;
box-sizing: border-box;
.btn{
width: 100%;
line-height: 96rpx;
background: #F34A40;
border-radius: 8rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
}
}
}
</style>

123
pages/news/park/recordHistory.vue
Unescape View File

@ -0,0 +1,123 @@
<template>
<view class="record">
<view class="item" v-for="o in 10" :key="o">
<view class="hd">
<image src="@/static/home/phone.jpg"></image>
<view class="info">
<view class="a">iphone13 绿色 128GBiphone13 绿色 128GBiphone13 绿色 128GBiphone13 绿色 128GB</view>
<view class="b"><text>倒计时</text><u-count-down :timestamp="timestamp" format="HH:mm:ss"></u-count-down></view>
<view class="c">预约价:￥<text>3599</text></view>
</view>
<view class="status">已预约</view>
</view>
<view class="bd">
<view class="btn">取消</view>
<view class="btn btn-01">详情</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timestamp: 24*3600*1000,
};
}
}
</script>
<style lang="scss" scoped>
.record{
padding: 0 16rpx 20rpx;
overflow: hidden;
.item{
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
margin-top: 20rpx;
.hd{
display: flex;
align-items: flex-start;
overflow: hidden;
padding: 15rpx 0;
overflow: hidden;
border-bottom: 1px solid #F2F2F2;
image{
width: 190rpx;
height: 190rpx;
margin-right: 20rpx;
}
.info{
flex: 1;
max-width: 320rpx;
.a{
white-space: nowrap;
font-size: 32rpx;
font-weight: 400;
color: #1E1E1E;
text-overflow: ellipsis;
overflow: hidden;
margin-top: 30rpx;
}
.b{
display: flex;
align-items: center;
margin-top: 10rpx;
text{
color: #949494;
margin-right: 20rpx;
}
font-size: 28rpx;
font-weight: 400;
color: #FF0E0E;
}
.c{
margin-top: 10rpx;
text{
font-size: 36rpx;
font-weight: 600;
color: #F21A1C;
}
font-size: 28rpx;
font-weight: 400;
color: #FF0E0E;
}
}
.status{
flex: 1;
text-align: right;
font-size: 32rpx;
font-weight: 400;
color: #529C30;
}
}
.bd{
padding: 30rpx 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-end;
.btn{
width: 158rpx;
line-height: 62rpx;
background: #FFFFFF;
border-radius: 62rpx;
text-align: center;
border: 1px solid #C6C6C6;
font-size: 28rpx;
font-weight: 400;
color: #3D3D3D;
margin-left: 20rpx;
&-01{
background: #F19592;
border-color: #F19592;
color: #fff;
}
}
}
}
}
</style>

BIN
static/news/login-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

Write Preview
Loading…
Cancel
Save