Commit e0af07f8 authored by 程新智's avatar 程新智 👽

shop

parent ef7a8005
......@@ -17,7 +17,9 @@
}
uni-page-body {
width: 100%;
height: 100%;
background: #f9f9f9;
}
uni-page-wrapper{
height: 100%;
}
</style>
......@@ -103,6 +103,12 @@
"navigationBarTitleText": "记录详情"
}
},
{
"path": "pages/move-car/scan",
"style": {
"navigationBarTitleText": "绑定挪车码"
}
},
{
"path": "pages/release/release",
"style": {
......
......@@ -39,7 +39,7 @@ export default {
return {
items: [{
icon: require("@/static/move-car/move-car6.png"),
url: "",
url: "/pages/move-car/scan",
title: "扫一扫联系车主"
},
{
......
<!--
* @Author: euzhi
* @Description: 扫码绑定
-->
<template>
<div class="scan">
<div class="contentMoveCar">
<div class="car_item__one">
<div class="item__content">
京A123G63
</div>
</div>
<div class="car_item__three">
我的车辆如果阻碍了您的爱车的通行,请点击下方按钮通知我,给您造成的不便敬请谅解!!!
</div>
</div>
<div class="moveCarMsg">
<div class="scan__tips">
<div>请填写以下信息</div>
<div>从爱车选择<span>
<image src="../../static/move-car/scan_right.png" /></span></div>
</div>
<active-form :formDate.sync="formData"></active-form>
</div>
<div class="view__btn view__no__bind">
确认绑定
</div>
<div class="use__text">使用说明</div>
</div>
</template>
<script>
export default {
data() {
return {
model1: {
userInfo: {
name: "",
sex: "",
},
},
formData: [{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "车牌号", // 提示输入名
type: "text", //类型
rules: {
name: "realName", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "品牌", // 提示输入名
type: "text", //类型
rules: {
name: "realName1", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "车型", // 提示输入名
type: "text", //类型
rules: {
name: "realName2", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "车牌号", // 提示输入名
type: "text", //类型
rules: {
name: "realName4", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "uisdfjks",
placeholder: "请输入验证码",
label: "验证码",
type: "text",
// oneKeyPhone:true,
rules: {
name: "yzm",
value: "", //字段值
verify: false,
errMess: "",
},
},
],
}
},
methods: {},
}
</script>
<style lang="scss" scoped>
.scan {
.use__text {
text-align: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
text-decoration: underline;
color: #3A86F7;
}
.view__btn {
width: 670rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
margin: 0 auto;
font-size: 32rpx;
}
.view__no__bind {
background: url('../../static/move-car/move-car-view2.png') no-repeat;
margin-bottom: 30rpx;
background-size: contain;
color: rgba(255, 255, 255, 1);
}
/deep/ .p-l14 {
padding-left: 0 !important;
}
.u-checkbox-group {
display: inline-block !important;
}
.contentMoveCar {
padding: 40rpx;
.item__label {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.item__label__one {
padding-right: 34rpx;
}
.item__content {
width: 500rpx;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F1251B;
line-height: 42rpx;
text-align: center;
line-height: 100rpx;
height: 100rpx;
background: url(@/static/move-car/move-car-code5.png) no-repeat;
background-size: contain;
}
.car_item__one {
display: flex;
align-items: center;
margin-bottom: 30rpx;
justify-content: center;
}
.car_item__three {
margin-top: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 36rpx;
text-indent: 2em;
padding: 30rpx;
box-sizing: border-box;
background: url(@/static/move-car/move-car-code6.png) no-repeat;
background-size: contain;
}
}
.moveCarMsg {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 32rpx 40rpx;
position: relative;
top: -56rpx;
.scan__tips {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
>div:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
>div:nth-of-type(2) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
span {
image {
width: 11rpx;
height: 18rpx;
}
margin-left: 10rpx;
}
}
}
}
}
</style>
<template>
<view class="content">
<view>
<custom-tarbar :selected="3"></custom-tarbar>
<view class="discover">
精选商城
<view class="shop">
<div class="my__search">
<u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search>
</div>
<div class="shop__swiper">
<view class="u-demo-block">
<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" height='150' radius="5" bgColor="#ffffff"></u-swiper>
</view>
</div>
<div class="view__content">
<div class="view__title">超低价养车好物</div>
<div class="shop__list2">
<div class="shop__item2" v-for="(vo,inx) in 4" :key="inx">
<div class="item2__img">
<image src='../../static/shop/qy.jpeg' />
</div>
<div class="item2__title">临时停车牌111</div>
<div class="item2__price">¥25.5</div>
</div>
</div>
</div>
<div class="shop__list__one">
<div class="view__title">车主精选 养车必备</div>
<div class="list__one__items">
<div class="one__item" v-for="(vo,inx) in 4" :key="inx">
<div class="one__item__img">
<image src="../../static/shop/item.png" />
</div>
<div class="one__item__title">
临时停车牌
</div>
<div class="one__item__price">
¥25.5<span>¥39.9</span>
</div>
</div>
</div>
</div>
</view>
<u-gap bgColor="transparent" height="70"></u-gap>
</view>
</template>
<script>
......@@ -12,8 +49,155 @@ import customTarbar from '@/common/wxcomponents/custom-tarbar/custom-tarbar.vue'
export default {
components: {
'custom-tarbar': customTarbar
},
data() {
return {
keyword: '',
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
}
},
};
</script>
<style></style>
<style lang="scss" scoped>
.shop {
height: 100%;
.shop__list__one {
padding: 0 30rpx;
.list__one__items {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.one__item {
width: 320rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
margin-bottom: 30rpx;
.one__item__img {
width: 320rpx;
height: 320rpx;
background: #FFD4D4;
border-radius: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.one__item__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin: 20rpx 0;
text-indent: 20rpx;
}
.one__item__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42rpx;
text-indent: 20rpx;
padding-bottom: 20rpx;
span {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
}
}
}
.my__search {
padding: 30rpx;
}
.view__title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
position: relative;
z-index: 999;
margin-bottom: 30rpx;
}
.view__title::before {
content: "";
width: 76rpx;
height: 14rpx;
display: inline-block;
background: url('@/static/move-car/love-car1.png') no-repeat;
background-size: contain;
position: absolute;
bottom: 7rpx;
z-index: -1;
}
.shop__swiper {
margin-bottom: 30rpx;
}
.view__content {
padding: 40rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
margin-bottom: 40rpx;
.shop__list2 {
display: flex;
align-items: center;
justify-content: space-between;
.shop__item2 {
width: 25%;
.item2__img {
margin-bottom: 20rpx;
text-align: center;
image {
width: 145rpx;
height: 145rpx;
}
}
.item2__title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item2__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42rpx;
}
}
}
}
}
</style>
<!--
* @Author: euzhi
* @Description: 描述
-->
<template>
<div>
<div class="view__title">超低价养车好物</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.view__title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
position: relative;
z-index: 999;
margin-bottom: 30rpx;
}
.view__title::before {
content: "";
width: 76rpx;
height: 14rpx;
display: inline-block;
background: url('@/static/move-car/love-car1.png') no-repeat;
background-size: contain;
position: absolute;
bottom: 7rpx;
z-index: -1;
}
</style>
<!--
* @Author: euzhi
* @Description: 扫码绑定
-->
<template>
<div class="scan">
<div class="contentMoveCar">
<div class="car_item__one">
<div class="item__content">
京A123G63
</div>
</div>
<div class="car_item__three">
我的车辆如果阻碍了您的爱车的通行,请点击下方按钮通知我,给您造成的不便敬请谅解!!!
</div>
</div>
<div class="moveCarMsg">
</div>
<u-action-sheet :actions="list" @close='close' closeOnClickOverlay round='6' :show="show"></u-action-sheet>
</div>
</template>
<script>
export default {
data() {
return {
show:false,
list: [
{
name:'2367虚拟号码345',
color:'#333333',
fontSize:'20',
},
{
name:'呼叫',
color:'#3A86F7',
fontSize:'18',
},
{
name:'取消',
color:'#E6271D',
fontSize:'18',
},
],
checked: [],
}
},
methods: {
call() {
this.show = true;
},
close() {
this.show = false;
},
selectClick(index){
console.log(index)
},
goMyCar() {
uni.navigateTo({
url: '/pages/move-car/myMoveCar'
})
},
},
}
</script>
<style lang="scss" scoped>
.scan {
.u-checkbox-group {
display: inline-block !important;
}
.contentMoveCar {
padding: 40rpx;
.item__label {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.item__label__one {
padding-right: 34rpx;
}
.item__content {
width: 500rpx;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F1251B;
line-height: 42rpx;
text-align: center;
line-height: 100rpx;
height: 100rpx;
background: url(@/static/move-car/move-car-code5.png) no-repeat;
background-size: contain;
}
.item__value {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 100rpx;
width: 500rpx;
height: 70rpx;
background: url(@/static/move-car/move-car-code4.png) no-repeat;
background-size: contain;
line-height: 70rpx;
text-indent: .5em;
display: flex;
align-items: center;
justify-content: space-between;
}
.car_item__one {
display: flex;
align-items: center;
margin-bottom: 30rpx;
justify-content: center;
}
.car_item__three {
margin-top: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 36rpx;
text-indent: 2em;
padding: 30rpx;
box-sizing: border-box;
background: url(@/static/move-car/move-car-code6.png) no-repeat;
background-size: contain;
}
}
.moveCarMsg {
height: 454rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 32rpx 40rpx;
position: relative;
top: -56rpx;
.move-car__tips {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 39rpx;
text-align: center;
}
.move-car__btn {
text-align: center;
width: 400rpx;
height: 76rpx;
border-radius: 8rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
background: url(@/static/move-car/move-car-code7.png) no-repeat;
background-size: contain;
margin: 100rpx auto 30rpx auto;
}
.move-car__wx {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
text-align: center;
margin-bottom: 100rpx;
}
.move-car__more {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 42rpx;
display: flex;
justify-content: space-between;
.center__shu {
image {
width: 3rpx;
height: 27rpx;
}
}
span {
padding-left: 20rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
}
}
</style>
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment