Merge remote-tracking branch 'origin/master_dev' into master_dev
This commit is contained in:
Hong
42
pages.json
42
pages.json
@@ -51,7 +51,47 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统消息系统消息系统消息"
|
||||
}
|
||||
},
|
||||
}, {
|
||||
"path": "pages/serve/repair/repair",
|
||||
"style": {
|
||||
"navigationBarTitleText": "维修"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/serve/repair/realname",
|
||||
"style": {
|
||||
"navigationBarTitleText": "完善资料"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/serve/repair/real_result"
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "完善资料"
|
||||
// }
|
||||
},{
|
||||
"path": "pages/serve/repair/re_binding",
|
||||
"style": {
|
||||
"navigationBarTitleText": "绑定车辆"
|
||||
}
|
||||
},{
|
||||
"path": "pages/serve/repair/bind_result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "绑定结果"
|
||||
}
|
||||
},{
|
||||
"path": "pages/serve/coupons/coupons",
|
||||
"style": {
|
||||
"navigationBarTitleText": "卡券"
|
||||
}
|
||||
},{
|
||||
"path": "pages/serve/coupons/cou_detail"
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "卡券详情"
|
||||
// }
|
||||
},{
|
||||
"path": "pages/serve/coupons/cou_store",
|
||||
"style": {
|
||||
"navigationBarTitleText": "门店列表"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
514
pages/serve/coupons/cou_detail.vue
Normal file
514
pages/serve/coupons/cou_detail.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<view class="cou_detail">
|
||||
<!-- 主图 -->
|
||||
<view class="de_img">
|
||||
<image src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
</view>
|
||||
<!-- 秒杀 -->
|
||||
<!-- 选择性展示 -->
|
||||
<view class="de_countdown">
|
||||
<view class="count_l"> 限时秒杀·抢完为止 </view>
|
||||
<view class="count_r">
|
||||
<view class="r_r"> 距开始 </view>
|
||||
<u-count-down
|
||||
:time="30 * 60 * 60 * 1000"
|
||||
format="DD:HH:mm:ss"
|
||||
autoStart
|
||||
millisecond
|
||||
@change="onChange"
|
||||
>
|
||||
<view class="time">
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.days }}</text>
|
||||
</view>
|
||||
<text class="time__doc">天</text>
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 标题内容 -->
|
||||
<view class="title_con">
|
||||
<view class="tit_up">
|
||||
<!-- 选择性展示 -->
|
||||
<view class="up_l">
|
||||
<view class="l_l"> 秒杀价 </view>
|
||||
<view class="l_r">
|
||||
<view class="l_r_big"> ¥49 </view>
|
||||
<view class="l_r_small"> .99 </view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="up_price"> ¥9.9 </view> -->
|
||||
<view class="up_r"> 剩余 8 </view>
|
||||
</view>
|
||||
<view class="tit_down"> 福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送福利大礼包限时抢购8种券大放送 </view>
|
||||
</view>
|
||||
<!-- 规格 -->
|
||||
<view class="de_specs">
|
||||
<view class="specs_l"> 规格 </view>
|
||||
<view class="specs_r"> 请选择 <u-icon name="arrow-right" color="#999999" size="14"></u-icon> </view>
|
||||
</view>
|
||||
<!-- 更多门店 -->
|
||||
<view class="de_store" @click="toStorePages">
|
||||
<view class="store_up">
|
||||
<view class="up_l"> 选择门店 </view>
|
||||
<view class="up_r"> 更多门店 <u-icon name="arrow-right" color="#999999" size="14"></u-icon> </view>
|
||||
</view>
|
||||
<view class="store_down">
|
||||
<image class="down_l" src="@/static/images/app/serve/coupons_img.png" mode=""></image>
|
||||
<view class="down_r">
|
||||
<view class="r_up"> 星桔EV(祥园路店) </view>
|
||||
<view class="r_down"> 2.5km | 杭州市余杭区莫干山路1665号 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 用户评价 -->
|
||||
<view class="de_evaluate">
|
||||
<view class="eva_up">
|
||||
<view class="up_l"> 用户评价(213) </view>
|
||||
<view class="up_r"> 查看更多 <u-icon name="arrow-right" color="#999999" size="14"></u-icon> </view>
|
||||
</view>
|
||||
<view class="eva_xian"></view>
|
||||
<view class="eva_info">
|
||||
<view class="info_l">
|
||||
<image class="info_l_img" src="@/static/images/app/serve/coupons_name.png" mode=""></image>
|
||||
<view class="info_l_con">
|
||||
<view class="con_name"> 客户 </view>
|
||||
<view class="con_star">
|
||||
<u-rate count="5" v-model="value" active-color="#F68D1F" inactive-color="#D9D9D9 "></u-rate>
|
||||
<text class="con_txt"> {{value}}.0 </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_r"> 2023/02/08 </view>
|
||||
</view>
|
||||
<view class="eva_content">
|
||||
<view class="content_txt">
|
||||
工作人员服务态度很好，维修的很仔细，休息室很干净，维修的很仔细。
|
||||
</view>
|
||||
<view class="content_img">
|
||||
<image src="@/static/images/app/serve/coupons_img1.png" mode=""></image>
|
||||
<image src="@/static/images/app/serve/coupons_img1.png" mode=""></image>
|
||||
<image src="@/static/images/app/serve/coupons_img1.png" mode=""></image>
|
||||
<image src="@/static/images/app/serve/coupons_img1.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view class="eva_goods">
|
||||
<view class="goods_l"></view>
|
||||
<view class="goods_con"> 商品详情 </view>
|
||||
<view class="goods_l"></view>
|
||||
</view>
|
||||
<!-- 选择性展示 -->
|
||||
<view class="miaosha_btn">
|
||||
<view class="eva_miaosha_btn"> 未开始 </view>
|
||||
<!-- <view class="eva_miaosha_btn"> 已结束 </view> -->
|
||||
</view>
|
||||
<view class="eva_eva">
|
||||
<image src="@/static/images/app/serve/coupons_name.png" mode=""></image>
|
||||
</view>
|
||||
<!-- 选择行展示 -->
|
||||
<!-- <view class="eva_btn"> 立即购买 </view> -->
|
||||
<view class="eva_btn"> 立即抢购 </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
timeData: {},
|
||||
value: 4
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toStorePages(){
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/coupons/cou_store`
|
||||
})
|
||||
},
|
||||
// 秒杀时间
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.eva_btn {
|
||||
height: 80rpx;
|
||||
background: #333333;
|
||||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||||
opacity: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
margin: 18rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.miaosha_btn {
|
||||
padding: 18rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
.eva_miaosha_btn {
|
||||
height: 80rpx;
|
||||
background: #AAAAAA;
|
||||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||||
opacity: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.eva_eva {
|
||||
width: 100%;
|
||||
image {
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
.eva_goods {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.goods_con {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
.goods_l {
|
||||
width: 188rpx;
|
||||
height: 0rpx;
|
||||
opacity: 0.2;
|
||||
border: 1rpx solid #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.de_evaluate {
|
||||
padding: 32rpx 24rpx 8rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.eva_content {
|
||||
margin-top: 32rpx;
|
||||
.content_txt {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.content_img {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
image {
|
||||
width: 202rpx;
|
||||
height: 202rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
margin: 0 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.eva_info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.info_l {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.info_l_img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.info_l_con {
|
||||
.con_name {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.con_star {
|
||||
display: flex;
|
||||
.con_txt {
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #F68D1F;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_r {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.eva_xian {
|
||||
height: 0rpx;
|
||||
opacity: 0.2;
|
||||
border: 1rpx solid #999999;
|
||||
margin: 24rpx 0;
|
||||
}
|
||||
|
||||
.eva_up {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
.up_l {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
.up_r {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de_store {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.store_up {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
.up_l {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #444444;
|
||||
}
|
||||
.up_r {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.store_down {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
.down_l {
|
||||
width: 168rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
.down_r {
|
||||
margin-left: 16rpx;
|
||||
.r_up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
.r_down {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de_specs {
|
||||
margin: 24rpx 0;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
|
||||
.specs_l {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.specs_r {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title_con {
|
||||
padding: 32rpx 24rpx;
|
||||
background:#FFFFFF;
|
||||
|
||||
.tit_up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.up_l {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.l_l {
|
||||
padding: 3rpx 10rpx;
|
||||
background: #333333;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.l_r {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.l_r_big {
|
||||
font-size: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
.l_r_small {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
}
|
||||
.up_price {
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.up_r {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.tit_down {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-top: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
||||
&__custom {
|
||||
margin-top: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__item {
|
||||
color:#13AFA8;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__doc {
|
||||
color: #FFFFFF;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
color: #13AFA8;
|
||||
font-size: 15px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.de_countdown {
|
||||
background: #13AFA8;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
opacity: 1;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.count_l {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.count_r {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.r_r {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de_img {
|
||||
height: 560rpx;
|
||||
}
|
||||
|
||||
.cou_detail {
|
||||
border: 1rpx solid #F6F7FB;
|
||||
background: #F6F7FB;
|
||||
// height: 100vh;
|
||||
}
|
||||
</style>
|
||||
151
pages/serve/coupons/cou_store.vue
Normal file
151
pages/serve/coupons/cou_store.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="cou_store">
|
||||
<!-- <z-paging ref="paging" :fixed="false" use-page-scroll auto-full-height v-model="dataList"> -->
|
||||
<view class="posfoot">
|
||||
<view class="footview" hover-class="hover-footview" v-for="(item,index) in dataList" :key="item.id"
|
||||
@click="link(`/pages/repair/repairDetail?id=${item.id}`,`${item.id}`)">
|
||||
<view class="footleft">
|
||||
<image class="footleft_img" :src="item.backImage"></image>
|
||||
<!-- coverImage 封面图 backImage 背景图 avatar 头像 -->
|
||||
</view>
|
||||
<view class="footright">
|
||||
<view class="fr_up">{{item.name}}
|
||||
<!--<view :class="['fr_up', checkIds.indexOf(item.id) !== -1 && 'checked-imp']">{{item.name}} -->
|
||||
</view>
|
||||
<!-- <view :class="['fr_centre', 'line-one', checkIds.indexOf(item.id) !== -1 && 'checked-imp']"> -->
|
||||
<view class="fr_centre">
|
||||
<text>{{item.distance}} km </text> <text class="suxian">|</text> <text>
|
||||
{{item.province + item.city + item.addressDetail}} </text>
|
||||
</view>
|
||||
<view class="fr_down">
|
||||
<view class="down_l">
|
||||
<!-- <text :class="[ checkIds.indexOf(item.id) !== -1 && 'checked-imp']">评分：</text> <text class="redtxt"> -->
|
||||
<text class="">评分：</text> <text class="redtxt">
|
||||
{{item.starLevel}} </text>
|
||||
</view>
|
||||
<view class="down_r">
|
||||
<view class="down_r_icon" @click.stop="callPhone(JSON.stringify(item.phone))">
|
||||
<image src="@/static/images/app/serve/cou_store_phone.png" mode=""></image>
|
||||
</view>
|
||||
<view class="down_r_icon">
|
||||
<image src="@/static/images/app/serve/cou_store_up.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </z-paging> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
dataList:[
|
||||
{id:1,phone:18339106332,backImage:'https://cdn.uviewui.com/uview/album/1.jpg',name:'星桔EV(祥园路店)',distance:'2.5',addressDetail:'杭州市余杭区莫干山路1664号',starLevel:4.8},
|
||||
{id:2,phone:18339106332,backImage:'https://cdn.uviewui.com/uview/album/1.jpg',name:'星桔EV(5路店)',distance:'3.5',addressDetail:'杭州市余杭区莫干山路1665号',starLevel:4},
|
||||
{id:3,phone:18339106332,backImage:'https://cdn.uviewui.com/uview/album/1.jpg',name:'星桔EV(6路店)',distance:'4.5',addressDetail:'杭州市余杭区莫干山路1666号',starLevel:3},
|
||||
{id:4,phone:18339106332,backImage:'https://cdn.uviewui.com/uview/album/1.jpg',name:'星桔EV(7路店)',distance:'1.5',addressDetail:'杭州市余杭区莫干山路1667号',starLevel:5},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.posfoot {
|
||||
// border: 1px solid red;
|
||||
.footview {
|
||||
display: flex;
|
||||
padding: 32rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
width: 702rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.footleft {
|
||||
width: 168rpx;
|
||||
height: 140rpx;
|
||||
|
||||
.footleft_img {
|
||||
width: 168rpx;
|
||||
height: 140rpx;
|
||||
background-color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
|
||||
.footright {
|
||||
padding-left: 16rpx;
|
||||
width: 470rpx;
|
||||
|
||||
.fr_up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.fr_centre {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-bottom: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.suxian {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #AAAAAA;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fr_down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.down_l {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
line-height: 1;
|
||||
|
||||
.redtxt {
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #F20808;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.down_r {
|
||||
display: flex;
|
||||
|
||||
.down_r_icon {
|
||||
image {
|
||||
margin-left: 20rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-footview {
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
}
|
||||
|
||||
.cou_store {
|
||||
background: #F5F5F5 ;
|
||||
padding: 24rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
139
pages/serve/coupons/coupons.vue
Normal file
139
pages/serve/coupons/coupons.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view class="coupons">
|
||||
<!-- 城市 搜索 -->
|
||||
<view class="positioningcity">
|
||||
<view class="posi_l">
|
||||
<view class="l_txt">杭州</view>
|
||||
<u-icon name="arrow-down-fill" color="#444444 " size="12"></u-icon>
|
||||
</view>
|
||||
<u-search placeholder="搜索" v-model="keyword" height="32" searchIconSize='24' :showAction='false' placeholderColor='#AAAAAA' searchIconColor='#999999'></u-search>
|
||||
</view>
|
||||
<!-- Tabs 标签 -->
|
||||
<view class="tabs_view">
|
||||
<u-tabs :list="tabsList" @click="clickTabs" :scrollable='false' lineWidth="40" lineColor="#111111"
|
||||
:activeStyle="{color: '#111111',fontWeight: 'bold',transform: 'scale(1.05)'}"
|
||||
:inactiveStyle="{color: '#666666',transform: 'scale(1)'}"></u-tabs>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="coupons_con">
|
||||
<view class="con_view" @click="toDetailPages">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<view class="view_txt"> 卡券名称 2瓶*1L中负荷车辆齿轮油 </view>
|
||||
<view class="view_price">￥198.00</view>
|
||||
</view>
|
||||
<view class="con_view">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<view class="view_txt"> 商品名称最多两行 </view>
|
||||
<view class="view_price">￥298.00 </view>
|
||||
</view>
|
||||
<view class="con_view">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<view class="view_txt"> 商品标题最多显示两行商品标题最多显示两行最多显示两行 </view>
|
||||
<view class="view_price">￥298.00 </view>
|
||||
</view>
|
||||
<view class="con_view">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<view class="view_txt"> 商品名称最多两行 </view>
|
||||
<view class="view_price">￥298.00 </view>
|
||||
</view>
|
||||
<view class="con_view">
|
||||
<image class="view_img" src="@/static/images/app/serve/serve_kaquan.png" mode=""></image>
|
||||
<view class="view_txt"> 商品名称最多两行 </view>
|
||||
<view class="view_price">￥298.00 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
tabsList:[
|
||||
{ name: '全部卡券'},
|
||||
{ name: '限时优惠'},
|
||||
{ name: '助力抢券'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toDetailPages(){
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/coupons/cou_detail`
|
||||
})
|
||||
},
|
||||
// tabs 点击
|
||||
clickTabs(item){
|
||||
console.log(item,'tabs点击');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.coupons_con {
|
||||
// border: 1px solid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 40rpx;
|
||||
// align-items: center;
|
||||
// margin-top: 16rpx;
|
||||
.con_view {
|
||||
// border: 1px solid blue;
|
||||
margin-top: 32rpx;
|
||||
.view_img {
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
}
|
||||
.view_txt {
|
||||
// border: 1px solid red;
|
||||
width: 340rpx;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-top: 16rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.view_price {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positioningcity {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 24rpx;
|
||||
.posi_l {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.l_txt {
|
||||
margin-right: 12rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupons {
|
||||
// border: 1px solid red;
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -9,9 +9,7 @@
|
||||
</view>
|
||||
<view class="posi_r" @click="toDisplayPages">
|
||||
<image class="r_img" src="@/static/images/app/serve/serve_message.png" mode=""></image>
|
||||
<view class="r_num">
|
||||
3
|
||||
</view>
|
||||
<view class="r_num"> 3 </view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
@@ -127,7 +125,7 @@
|
||||
width: 144rpx;
|
||||
height: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 550;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -139,7 +137,7 @@
|
||||
width: 120rpx;
|
||||
height: 42rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-right: 16rpx;
|
||||
@@ -165,7 +163,7 @@
|
||||
width: 340rpx;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-top: 16rpx;
|
||||
@@ -207,7 +205,7 @@
|
||||
}
|
||||
.one_txt{
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
@@ -225,6 +223,7 @@
|
||||
.search{
|
||||
// border: 1px solid green;
|
||||
}
|
||||
|
||||
.positioningcity{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -240,7 +239,7 @@
|
||||
}
|
||||
.l_txt{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
margin: 0 10rpx;
|
||||
@@ -268,7 +267,7 @@
|
||||
text-align: center;
|
||||
line-height: 32rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
align-items: center;
|
||||
.big_txt {
|
||||
font-size: 34rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 64rpx;
|
||||
@@ -122,7 +122,7 @@
|
||||
|
||||
.small_txt {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
margin-top: 32rpx;
|
||||
@@ -193,14 +193,14 @@
|
||||
|
||||
.txt_up{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.txt_down{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
margin-top: 15rpx;
|
||||
@@ -217,7 +217,7 @@
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
background: #13AFA8;
|
||||
color: #FFFFFF;
|
||||
@@ -249,7 +249,7 @@
|
||||
|
||||
.box_l_txt {
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-left: 36rpx;
|
||||
@@ -267,7 +267,7 @@
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
background: #13AFA8;
|
||||
color: #FFFFFF;
|
||||
|
||||
@@ -1,21 +1,54 @@
|
||||
<template>
|
||||
<view class="m_system">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_img">
|
||||
<view class="m_sys_detail">
|
||||
<view class="m_sys_content">
|
||||
<view class="h1title"> 1.一级标题 </view>
|
||||
<view>
|
||||
<view class="h2title"> 1.1 二级标题内容 </view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
</view>
|
||||
<view class="m_sys_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.png" mode=""></image>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
<view class="con_down">
|
||||
<view class="down_l"> 点击查看全文 </view>
|
||||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||||
<view>
|
||||
<view class="h2title"> 1.2 二级标题内容 </view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="m_sys_content">
|
||||
<view class="h1title"> 2.一级标题 </view>
|
||||
<view>
|
||||
<view class="h2title"> 2.1 二级标题内容 </view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
</view>
|
||||
<view class="m_sys_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.png" mode=""></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="h2title"> 2.2 二级标题内容 </view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
<view class="contxt">
|
||||
正文内容，正文内容，正文内容正文内容，正文内容正文内容，正文内容正，文内容正，文内容正文内，容正文内容正文内容。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -33,80 +66,56 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.m_content {
|
||||
width: 702rpx;
|
||||
height: 670rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.con_up {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.con_img {
|
||||
margin-top: 16rpx;
|
||||
image {
|
||||
height: 334rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con_txt {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
overflow: hidden; // 超出的文本部分隐藏起来
|
||||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||||
display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||||
-webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||||
-webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||||
}
|
||||
|
||||
.con_xian {
|
||||
margin-top: 16rpx;
|
||||
height: 0rpx;
|
||||
opacity: 0.3;
|
||||
border: 1rpx solid #CED7E0;
|
||||
}
|
||||
|
||||
.con_down{
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.down_l {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.m_sys_content {
|
||||
margin-bottom: 40rpx;
|
||||
// border: 1px solid blue;
|
||||
|
||||
.m_sys_img {
|
||||
height: 340rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.h1title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
color: #222222;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.h2title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 550;
|
||||
color: #222222;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contxt {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
line-height: 40rpx;
|
||||
text-indent: 2em;
|
||||
margin-bottom: 20rpx;
|
||||
// border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.m_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.time_txt {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
.title {
|
||||
height: 56rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.m_system {
|
||||
background: #F5F5F5;
|
||||
.m_sys_detail {
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
padding: 16rpx 24rpx;
|
||||
padding: 48rpx 40rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,36 @@
|
||||
<template>
|
||||
<view class="m_system">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content" @click="toSysDetailPages">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.png" mode=""></image>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
<view class="con_down">
|
||||
<view class="down_l"> 点击查看全文 </view>
|
||||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||||
<view class="m_allview" hover-class="hover_allview">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content" hover-class="hover_content" @click="toSysDetailPages">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.png" mode=""></image>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
<view class="con_down">
|
||||
<view class="down_l"> 点击查看全文 </view>
|
||||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m_allview">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content" hover-class="hover_content" @click="toSysDetailPages">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_txt">
|
||||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
<view class="con_down">
|
||||
<view class="down_l"> 点击查看全文 </view>
|
||||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -28,7 +43,7 @@
|
||||
},
|
||||
methods:{
|
||||
toSysDetailPages(){
|
||||
uni.navigateBack({
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/message/m_sys_detail`
|
||||
})
|
||||
}
|
||||
@@ -39,8 +54,6 @@
|
||||
|
||||
<style lang="scss">
|
||||
.m_content {
|
||||
width: 702rpx;
|
||||
height: 670rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
@@ -49,7 +62,6 @@
|
||||
|
||||
.con_up {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
@@ -64,11 +76,11 @@
|
||||
.con_txt {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
overflow: hidden; // 超出的文本部分隐藏起来
|
||||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||||
// white-space: nowrap; // 不换行
|
||||
display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||||
-webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||||
-webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||||
@@ -88,13 +100,16 @@
|
||||
align-items: center;
|
||||
.down_l {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover_content {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.m_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -102,16 +117,23 @@
|
||||
|
||||
.time_txt {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.m_allview {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.hover_allview {
|
||||
background: #E9E9E9;
|
||||
}
|
||||
|
||||
.m_system {
|
||||
background: #F5F5F5;
|
||||
opacity: 1;
|
||||
padding: 16rpx 24rpx;
|
||||
padding: 24rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
137
pages/serve/repair/bind_result.vue
Normal file
137
pages/serve/repair/bind_result.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<view class="bindingresult">
|
||||
<!-- 绑定成功 -->
|
||||
<view class="allview">
|
||||
<view class="topview">
|
||||
<u-image :showLoading="true" src="@/static/images/app/serve/bind_result.png" width="148rpx" height="148rpx"></u-image>
|
||||
</view>
|
||||
<view class="contentview">
|
||||
<u-cell-group :border="false">
|
||||
<!-- <u-cell title="姓名" :value="userInfo.nickname?userInfo.nickname:'暂无'"></u-cell> -->
|
||||
<u-cell title="姓名" :value="userInfo.realName?userInfo.realName:'--'"></u-cell>
|
||||
<u-cell title="车型" :value="formObj.modelName?formObj.modelName:'--'"></u-cell>
|
||||
<u-cell title="行驶证">
|
||||
<!-- <u-icon slot="icon" size="26" name="file-text"></u-icon> -->
|
||||
<view slot="right-icon">
|
||||
<view class="conimg">
|
||||
<!-- <u-image :showLoading="true" :src="formObj.driveLicense" width="112rpx" height="112rpx"></u-image> -->
|
||||
<u-image src="@/static/images/app/serve/repair_swiper.png" width="112rpx" height="112rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell title="车牌号" :value="formObj.carNo?formObj.carNo:'--'"></u-cell>
|
||||
<u-cell title="解绑日期" :value="formObj.unbindTime?formObj.unbindTime:'--'"></u-cell>
|
||||
<u-cell title="车辆类型 " :value="formObj.category==1?'公户车':formObj.category==2?'私家车':'--'"></u-cell>
|
||||
<u-cell title="所属公司" v-if="formObj.category==1"
|
||||
:value="formObj.company?formObj.company:'--'"></u-cell>
|
||||
<u-cell title="车主姓名" v-if="formObj.category==2"
|
||||
:value="formObj.ownerName?formObj.ownerName:'--'"></u-cell>
|
||||
<u-cell title="使用性质"
|
||||
:value="formObj.type==1?'预约出租客运':formObj.type==2?'非营运':formObj.type==3?'租赁':'--'"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="con_btn">
|
||||
<u-button@click="toHomePage" color='#13AFA8' shape="circle">返回首页</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getMyCarAPI,getUserInfoAPI } from '@/api/car'
|
||||
// import { getCarInfoAPI } from '@/api/user'
|
||||
// import { realNameDetaiNowlAPI } from '@/api/mine'
|
||||
// import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formObj: {},
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// this.getMyCar()
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['carNo'])
|
||||
},
|
||||
methods: {
|
||||
async getMyCar() {
|
||||
const car = await getMyCarAPI() // 车辆信息
|
||||
console.log(car, 'carrrrr');
|
||||
this.formObj = car.data
|
||||
|
||||
// 提交绑定车辆信息后，跳转到绑定结果页面，
|
||||
// 但提交的信息需在平台端审核同意后，车辆信息才会更新
|
||||
// 在平台没有审核之前，绑定结果页面展示的还是旧的车辆信息
|
||||
// 同时，车辆信息 及 解绑车辆信息 都是旧的车辆信息
|
||||
// getMyCarAPI().then(async(res)=>{
|
||||
// if(res.data.carNo==this.carNo){
|
||||
// this.formObj=res.data
|
||||
// }else{
|
||||
// const carno=await getCarInfoAPI({carNo:this.carNo}) // 根据车牌号获取车辆信息
|
||||
// this.formObj=carno.data
|
||||
// }
|
||||
// }).catch(err=>{
|
||||
// console.log(err);
|
||||
// })
|
||||
|
||||
// const user= await getUserInfoAPI() // 用户完整信息
|
||||
// console.log(user,'user-info');
|
||||
const detail = await realNameDetaiNowlAPI() // 实名详情
|
||||
this.userInfo = detail.data
|
||||
},
|
||||
toHomePage() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bindingresult {
|
||||
background-color: #F5F5F5;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.allview {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.topview {
|
||||
// border: 1px solid red;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contentview {
|
||||
// border: 1px solid blue;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
// line-height: 38rpx;
|
||||
margin: 64rpx 30rpx 30rpx 30rpx;
|
||||
|
||||
.conimg {
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.con_btn {
|
||||
// margin: 0 30rpx;
|
||||
width:95%;
|
||||
margin: 0 24rpx;
|
||||
position: absolute;
|
||||
bottom: 80rpx;
|
||||
}
|
||||
</style>
|
||||
688
pages/serve/repair/re_binding.vue
Normal file
688
pages/serve/repair/re_binding.vue
Normal file
@@ -0,0 +1,688 @@
|
||||
<template>
|
||||
<view class="bindview">
|
||||
<!-- 绑定车辆 -->
|
||||
<view class="bgcview">
|
||||
<view class="top">
|
||||
<text class="top_txt">填写车辆信息</text>
|
||||
<!-- <view class="top_imgview" :style="{ backgroundImage: `url(${top_bgImg})`, backgroundSize: '100% 100%'}"></view> -->
|
||||
<image class="top_imgview" src="@/static/images/app/serve/re_bind_bgc.png" mode=""></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="form-box">
|
||||
<u-form labelPosition="left" :model="formData" ref="uForm" label-width='190rpx'>
|
||||
<u-form-item label="车牌号码" border-bottom='true' prop="carNo"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
||||
<view class="fcar_letter" @click="keyboardShow=true">
|
||||
<view class="f_car_num">
|
||||
<view class="fcn_l"> {{ formData.carNo.charAt(0) }} </view>
|
||||
<view class="fcn_r">
|
||||
<image class="fcn_r_img" src="@/static/images/app/serve/re_bind_down.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="letter_number">
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(1) }} </view>
|
||||
<view class="ln_point"> {{ formData.carNo.charAt(2) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(3) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(4) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(5) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(6) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(7) }} </view>
|
||||
<view class="ln_one"> {{ formData.carNo.charAt(8) }} </view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="车型" border-bottom='true'>
|
||||
<view class="lr" v-if="carInfo.modelName">
|
||||
{{carInfo.modelName?carInfo.modelName:'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else @click="showModelName=true">
|
||||
<u--input placeholder="请选择车型(非必选)" v-model="formData.modelName" :readonly='true'
|
||||
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="上传行驶证" border-bottom='true'>
|
||||
<view class="lr" v-if='carInfo.driveLicense'>
|
||||
<image v-if='carInfo.driveLicense' style="width: 112rpx; height: 112rpx;"
|
||||
:src="carInfo.driveLicense">
|
||||
</image>
|
||||
<image v-else style="width: 112rpx; height: 112rpx;"
|
||||
src="@/static/images/app/serve/re_bind_travel.png" mode=""></image>
|
||||
</view>
|
||||
<view v-else class="form-item">
|
||||
<text style="color:#999999" v-show="!formData.driveLicense">(必选)</text>
|
||||
<view class="image-box rel">
|
||||
<image class="upload-bg" v-show="formData.driveLicense" :src="formData.driveLicense"
|
||||
mode=""></image>
|
||||
<image v-show="!formData.driveLicense" class="upload-bg"
|
||||
src="@/static/images/app/serve/re_bind_travel.png" mode=""
|
||||
@click="upload('image', 'driveLicense')"></image>
|
||||
<image v-show="formData.driveLicense" class="reduce abs"
|
||||
src="@/static/images/app/serve/realname_clea.png" mode=""
|
||||
@click="DelPic('driveLicense')"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="解绑日期" prop="dataTime" @click="datetimeShow=true" border-bottom='true'>
|
||||
<view class="lr" v-if="carInfo.unbindTime">
|
||||
{{carInfo.unbindTime?carInfo.unbindTime:'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else>
|
||||
<u--input v-model="dataTime" placeholder="请选择(必选)" :readonly='true'
|
||||
suffixIcon="arrow-right" suffixIconStyle="color: #999999"
|
||||
placeholderStyle=" color: #999999 " border="none" inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="车辆类型" border-bottom='true'>
|
||||
<view class="lr" v-if="carInfo.category">
|
||||
{{carInfo.category==1?'公户':carInfo.category==2?'私户':'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else @click="showCategory=true">
|
||||
<u--input placeholder="请选择(非必选)" v-model="category" :readonly='true'
|
||||
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="所属公司" border-bottom='true' v-if="carInfo.category==1">
|
||||
<view class="lr" v-if="carInfo.category">
|
||||
{{carInfo.company?carInfo.company:'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else>
|
||||
<u--input placeholder="请选择公司(非必选)" :readonly='true' placeholderStyle=" color: #999999 "
|
||||
suffixIcon="arrow-right" suffixIconStyle="color: #999999" border='none'
|
||||
inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="车主姓名" border-bottom='true' v-if="carInfo.category==2">
|
||||
<view class="lr" v-if="carInfo.ownerName">
|
||||
{{carInfo.ownerName?carInfo.ownerName:'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else>
|
||||
<u--input placeholder="请输入(非必选)" v-model="formData.ownerName"
|
||||
placeholderStyle=" color: #999999 "
|
||||
:suffixIcon="formData.ownerName?'':'arrow-right'" suffixIconStyle="color: #999999"
|
||||
border='none' inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="使用性质" border-bottom='true'>
|
||||
<view class="lr" v-if="carInfo.type">
|
||||
{{carInfo.type==1?'预约出租客运':carInfo.type==2?'非营运租赁':carInfo.type==3?'租赁':'--'}}
|
||||
</view>
|
||||
<view class="lr" v-else @click="showType=true">
|
||||
<u--input placeholder="请选择(非必选)" v-model="type" :readonly='true'
|
||||
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</view>
|
||||
<u-button @click="submit" :color='isFormDataEmpty ?"#84D2CF":"#13AFA8"' shape="circle">提交</u-button>
|
||||
<!-- 车牌号 -->
|
||||
<u-keyboard mode="car" @change="keyboardChange" @confirm='keyboardConfirmBtn' :show="keyboardShow"
|
||||
@backspace="backspace" safeAreaInsetBottom autoChange @cancel="carCancel" @close="carClose">
|
||||
</u-keyboard>
|
||||
<!-- 日期 -->
|
||||
<u-datetime-picker ref="datetimePicker" :show="datetimeShow" v-model="datetimeValue" mode="date" title='请选择'
|
||||
:formatter="formatter" @change="datetimeChange" @confirm='datetimeConfirmBtn'
|
||||
@cancel="datetimeShow=false">
|
||||
</u-datetime-picker>
|
||||
<!-- 车型 -->
|
||||
<u-popup :show="showModelName" mode="right" @close="showModelName=false">
|
||||
<view class="model_view">
|
||||
<view class="view_txt"> 请选择车型 </view>
|
||||
<view class="list_view">
|
||||
<u-list @scrolltolower="scrolltolower" height="375">
|
||||
<u-list-item v-for="(item, index) in modelNameList" :key="index">
|
||||
<u-cell :title="`${ index+1 } 、${item.brandName} —— ${item.name}`"
|
||||
@click="clickCell(item)"></u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 车辆类型 -->
|
||||
<u-picker :show="showCategory" :columns="columnsCategory" keyName="category" @confirm='confirmCategoryBtn'
|
||||
@cancel='showCategory=false'></u-picker>
|
||||
<!-- 使用性质 -->
|
||||
<u-picker :show="showType" :columns="columnsType" keyName="type" @confirm='confirmTypeBtn'
|
||||
@cancel='showType=false'></u-picker>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { userBindAPI, getCarInfoAPI,modelListAPI } from '@/api/user'
|
||||
// import { getMineInfoAPI, realNameDetaiNowlAPI } from '@/api/mine'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datetimeShow: false,
|
||||
datetimeValue: Number(new Date()),
|
||||
top_bgImg: '@/static/images/app/serve/re_bind_bgc.png',
|
||||
keyboardShow: false,
|
||||
alltime: '',
|
||||
// 车型-车辆-性质
|
||||
formData: {
|
||||
carNo: "",
|
||||
category: null,
|
||||
company: "",
|
||||
driveLicense: "",
|
||||
ownerName: "",
|
||||
type: null,
|
||||
unbindTime: "",
|
||||
modelName: ''
|
||||
},
|
||||
carInfo: {},
|
||||
noneInfo: true,
|
||||
dataTime: '',
|
||||
// 车型
|
||||
modelData: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
modelTotal: 0,
|
||||
modelTotalPage: 0,
|
||||
showModelName: false,
|
||||
modelNameList: [],
|
||||
nameList: [],
|
||||
// 车辆类型
|
||||
category: '',
|
||||
showCategory: false,
|
||||
columnsCategory: [
|
||||
[{
|
||||
category: '公户',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
category: '私户',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
],
|
||||
// 使用性质
|
||||
type: '',
|
||||
showType: false,
|
||||
columnsType: [
|
||||
[{
|
||||
type: '预约出租客运',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
type: '非营运租赁',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
type: '租赁',
|
||||
id: 3
|
||||
}
|
||||
]
|
||||
],
|
||||
// 用户信息
|
||||
mineInfo: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFormDataEmpty() {
|
||||
const {
|
||||
ownerName,
|
||||
carNo,
|
||||
category,
|
||||
carType,
|
||||
company,
|
||||
driveLicense,
|
||||
type,
|
||||
unbindTime,
|
||||
} = this.formData;
|
||||
return !carNo && !driveLicense && !unbindTime;
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// this.modelList()
|
||||
},
|
||||
watch: {
|
||||
formData: {
|
||||
handler(val) {
|
||||
if (val.carNo.length > 9) {
|
||||
this.$toast('超出车牌长度')
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
nameList: {
|
||||
handler(nV, oV) {
|
||||
if (this.modelTotal > this.modelNameList.length) {
|
||||
this.modelNameList = Array.from(new Set(this.modelNameList.concat(nV)))
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
methods: {
|
||||
// 使用性质
|
||||
confirmTypeBtn(e) {
|
||||
this.formData.type = e.value[0].id
|
||||
this.type = e.value[0].type
|
||||
this.showType = false
|
||||
},
|
||||
// 车辆类型
|
||||
confirmCategoryBtn(e) {
|
||||
this.formData.category = e.value[0].id
|
||||
this.category = e.value[0].category
|
||||
this.showCategory = false
|
||||
},
|
||||
|
||||
// 车型
|
||||
scrolltolower() {
|
||||
if (this.modelData.page < this.modelTotalPage) {
|
||||
this.modelData.page += 1
|
||||
}
|
||||
// this.modelList()
|
||||
},
|
||||
clickCell(item) {
|
||||
this.formData.modelName = item.name
|
||||
this.showModelName = false
|
||||
},
|
||||
// 车辆型号 用户信息
|
||||
modelList() {
|
||||
// 车辆型号
|
||||
modelListAPI(this.modelData).then(res => {
|
||||
this.nameList = res.data.list
|
||||
this.modelTotal = res.data.total
|
||||
this.modelTotalPage = res.data.totalPage
|
||||
if (this.modelNameList.length == 0) {
|
||||
this.modelNameList = res.data.list
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$toast(err)
|
||||
})
|
||||
// 用户信息
|
||||
getMineInfoAPI().then(res => {
|
||||
this.mineInfo = res.data
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
async submit() {
|
||||
// 未实名 isCertification => true已实名
|
||||
if (this.mineInfo.isCertification) {
|
||||
if (this.noneInfo == true) {
|
||||
userBindAPI(this.carInfo).then(res => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/bindResult'
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$toast(err)
|
||||
})
|
||||
} else {
|
||||
userBindAPI(this.formData).then(res => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/bindResult'
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$toast(err)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// this.$toast('请先完善实名信息')
|
||||
uni.showModal({
|
||||
title: "您还没有完善信息，是否现在去完善信息！",
|
||||
cancelText: "稍后再去",
|
||||
confirmText: "现在就去",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url:'/pages/serve/repair/realname'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log("用户点击取消");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// 车牌--取消
|
||||
carCancel() {
|
||||
this.carClose()
|
||||
this.formData.carNo = ''
|
||||
},
|
||||
carClose() {
|
||||
this.keyboardShow = false
|
||||
},
|
||||
// 点击确认
|
||||
keyboardConfirmBtn() {
|
||||
// 车牌号查询车辆详情
|
||||
getCarInfoAPI({
|
||||
carNo: this.formData.carNo
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.carInfo = res.data
|
||||
this.$store.dispatch('CarNo', this.formData.carNo)
|
||||
} else {
|
||||
// this.$u.toast('车辆信息不存在')
|
||||
this.carInfo = {}
|
||||
this.noneInfo = false
|
||||
}
|
||||
}).finally(() => {
|
||||
this.keyboardShow = false
|
||||
// this.$store.dispatch('CarNo', this.formData.carNo)
|
||||
})
|
||||
},
|
||||
// 退格
|
||||
backspace() {
|
||||
if (this.formData.carNo) this.formData.carNo = this.formData.carNo.substring(0, this.formData.carNo
|
||||
.length - 1)
|
||||
},
|
||||
// 车牌格式 按键被点击
|
||||
keyboardChange(e) {
|
||||
let a = this.checkType(e);
|
||||
if (a == 1) {
|
||||
if (this.formData.carNo) {
|
||||
this.formData.carNo = this.replaceStr(this.formData.carNo, 0, e)
|
||||
} else {
|
||||
this.formData.carNo = e
|
||||
}
|
||||
} else {
|
||||
if (this.formData.carNo.length == 2) {
|
||||
this.formData.carNo += ('·' + e)
|
||||
} else {
|
||||
if (this.formData.carNo.length < 9) {
|
||||
this.formData.carNo += e
|
||||
} else {
|
||||
this.$toast('超出车牌长度')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 下标替换字符串
|
||||
replaceStr(str, index, char) {
|
||||
const strAry = str.split('');
|
||||
strAry[index] = char;
|
||||
return strAry.join('');
|
||||
},
|
||||
checkType(str) {
|
||||
if (/^[\u4e00-\u9fa5]+$/.test(str)) {
|
||||
// 中文
|
||||
return 1
|
||||
} else if (/^[0-9]+$/.test(str)) {
|
||||
// 数字
|
||||
return 2
|
||||
} else if (/^[a-zA-Z]+$/.test(str)) {
|
||||
// 字母
|
||||
return 3
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 日期
|
||||
formatter(type, datetimeValue) {
|
||||
if (type === 'year') {
|
||||
return `${datetimeValue}年`
|
||||
};
|
||||
if (type === 'month') {
|
||||
return `${datetimeValue}月`
|
||||
};
|
||||
if (type === 'day') {
|
||||
return `${datetimeValue}日`
|
||||
};
|
||||
return datetimeValue
|
||||
},
|
||||
datetimeChange(val) {
|
||||
this.datetimeValue = val.value
|
||||
},
|
||||
// 时间处理
|
||||
datetimeConfirmBtn() {
|
||||
this.datetimeShow = false
|
||||
const date = new Date(this.datetimeValue)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
this.alltime = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) +':' + this.addZero(minute) + ':' + this.addZero(second)
|
||||
// 接收格式 年月日 时分秒
|
||||
this.formData.unbindTime = this.alltime
|
||||
// 展示格式
|
||||
this.dataTime = `${year}年${month}月${day}日`
|
||||
},
|
||||
addZero(num) {
|
||||
if (parseInt(num) < 10) {
|
||||
num = '0' + num
|
||||
}
|
||||
return num
|
||||
},
|
||||
|
||||
// 上传
|
||||
upload(name, key, type) {
|
||||
if (name === 'image') {
|
||||
this.formData.type = 1
|
||||
this.getImage(key);
|
||||
} else if (name == 'all') {
|
||||
|
||||
} else {
|
||||
this.formData.type = 2
|
||||
}
|
||||
},
|
||||
//传图片
|
||||
getImage(key) {
|
||||
this.$util.uploadImageOne({
|
||||
count: 1,
|
||||
sizeType: ['original'],
|
||||
sourceType: ['album', 'camera'],
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, res => {
|
||||
this.formData[key] = res.data
|
||||
this.videoOrImage = false
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
/**删除图片*/
|
||||
DelPic(key) {
|
||||
this.formData[key] = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model_view {
|
||||
padding: 50rpx 25rpx;
|
||||
// border: 1px solid red;
|
||||
height: 100vh;
|
||||
|
||||
.view_txt {
|
||||
margin-bottom: 15rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.list_view {
|
||||
// border: 1px solid blue;
|
||||
// height: 730rpx;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
// width: 100%;
|
||||
// border:1px solid red;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
|
||||
.upload-bg {
|
||||
// border:1px solid blue;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.reduce {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lr {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fcar_letter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.letter_number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
// border: 1px solid red;
|
||||
.ln_one {
|
||||
width: 40rpx;
|
||||
height: 44rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4rpx;
|
||||
opacity: 1;
|
||||
font-size: 32rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
text-align: center;
|
||||
line-height: 43rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.ln_point {
|
||||
width: 16rpx;
|
||||
height: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.f_car_num {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 62rpx;
|
||||
height: 44rpx;
|
||||
background: #13AFA8;
|
||||
border-radius: 4rpx;
|
||||
opacity: 1;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
margin-right: 8rpx;
|
||||
|
||||
.fcn_r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4rpx;
|
||||
|
||||
.fcn_r_img {
|
||||
width: 10rpx;
|
||||
height: 6rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bindview {
|
||||
background: #F5F5F5;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bgcview {
|
||||
// border: 1rpx solid green;
|
||||
background: linear-gradient(180deg, #E9FFFE 0%, #D3EAE9 31%, #F5F5F5 100%);
|
||||
opacity: 1;
|
||||
padding: 24rpx;
|
||||
|
||||
.top {
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
// border: 1rpx solid red;
|
||||
|
||||
.top_txt {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.top_imgview {
|
||||
// border: 1px solid greenyellow;
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: -24rpx;
|
||||
width: 160rpx;
|
||||
height: 164rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
// border: 1rpx solid blue;
|
||||
// margin: 0 auto;
|
||||
margin-bottom: 50rpx;
|
||||
z-index: 1;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
|
||||
.form-box {
|
||||
padding: 25rpx;
|
||||
}
|
||||
|
||||
.content_foot {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 702rpx;
|
||||
height: 96rpx;
|
||||
color: #84D2CF;
|
||||
border-radius: 60rpx 60rpx 60rpx 60rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.downfill {
|
||||
width: 62rpx;
|
||||
height: 44rpx;
|
||||
background: #13AFA8;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
opacity: 1;
|
||||
border: 1rpx solid red;
|
||||
|
||||
.downtxt {
|
||||
color: #fff;
|
||||
iconStyle: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
pages/serve/repair/real_result.vue
Normal file
149
pages/serve/repair/real_result.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="unbindresult">
|
||||
<view class="re_up">
|
||||
<image class="re_img" src="@/static/images/app/serve/real_result_submit.png" mode=""></image>
|
||||
<view class="re_txt"> 您的资料已经提交成功 </view>
|
||||
</view>
|
||||
<view class="re_inspect" @click="toBindingPage"> 返回维修页面 </view>
|
||||
<u-popup :show="showBinding" mode="center" @close="showBinding=false" :safeAreaInsetBottom='false'>
|
||||
<view class="allView">
|
||||
<view class="show_img">
|
||||
<image src="@/static/images/app/serve/real_result_bgc.png" mode=""></image>
|
||||
</view>
|
||||
<view class="big_txt"> 绑定车辆 </view>
|
||||
<view class="small_txt"> 绑定后更有利于您的管理，请去绑定 </view>
|
||||
<view class="is_sure">
|
||||
<view class="quxiao" @click="showBinding=false"> 取消 </view>
|
||||
<view class="queren" @click="sureBinding"> 前往绑定 </view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
showBinding:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sureBinding(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/serve/repair/re_binding'
|
||||
})
|
||||
},
|
||||
toBindingPage(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/serve/repair/repair'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.allView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.show_img {
|
||||
width: 100%;
|
||||
image {
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.big_txt {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.small_txt {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.is_sure {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 64rpx;
|
||||
.quxiao {
|
||||
padding: 20rpx 96rpx;
|
||||
border: 2rpx solid #EDEDED;
|
||||
font-size: 34rpx;
|
||||
font-family: Noto Sans SC, Noto Sans SC;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.queren {
|
||||
padding: 20rpx 60rpx;
|
||||
border: 2rpx solid #EDEDED;
|
||||
font-size: 34rpx;
|
||||
font-family: Noto Sans SC, Noto Sans SC;
|
||||
font-weight: 400;
|
||||
color: #13AFA8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.re_up {
|
||||
// border: 1px solid red;
|
||||
margin-top: 136rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.re_img {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.re_txt {
|
||||
height: 36rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.re_inspect {
|
||||
width: 332rpx;
|
||||
height: 80rpx;
|
||||
background: #13AFA8;
|
||||
border-radius: 60rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 96rpx auto 0;
|
||||
}
|
||||
|
||||
.re_return {
|
||||
width: 136rpx;
|
||||
height: 48rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #13AFA8;
|
||||
margin: 32rpx auto;
|
||||
}
|
||||
|
||||
.unbindresult {
|
||||
background: #FFFFFF;
|
||||
height: 100vh;
|
||||
// border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
255
pages/serve/repair/realname.vue
Normal file
255
pages/serve/repair/realname.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="realname">
|
||||
<!-- 实名认证-完善资料 -->
|
||||
<view class="toptxt" v-if="isShow">
|
||||
如果你是网约车司机，请您完善资料!
|
||||
<u-icon name="close" size="32rpx" @click="iconClick"></u-icon>
|
||||
</view>
|
||||
<view class="bgcview">
|
||||
<view class="content">
|
||||
<view class="top">
|
||||
<view class="top_txt">填写个人信息</view>
|
||||
<view class="top_imgview">
|
||||
<image src="@/static/images/app/serve/realname_bgc.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="formview">
|
||||
<u-form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" label-width='190rpx'
|
||||
:label-style="{'font-size':'30rpx',color:'#444444'}">
|
||||
<u-form-item label="司机姓名" prop="realName" border-bottom='true'>
|
||||
<u-input v-model="userInfo.realName" border="none" inputAlign='right' placeholder="请输入您的姓名"
|
||||
placeholderStyle='font-size:30rpx;color:#999999'></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="手机号码" prop="phone" border-bottom=' true'>
|
||||
<u-input v-model="userInfo.phone" border="none" inputAlign='right' maxlength='11' placeholder="请输入您的手机号码"
|
||||
placeholderStyle='font-size:30rpx;color:#999999'></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="身份证号码" prop="idCard" border-bottom='true'>
|
||||
<u-input v-model="userInfo.idCard" border="none" inputAlign='right' maxlength='18'
|
||||
placeholder="请输入您的18位身份证号" placeholderStyle='font-size:30rpx;color:#999999'></u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_foot">
|
||||
<label>上传网约车资格证（选填）</label>
|
||||
<view class="upload-box">
|
||||
<view class="content flex-wrap align-center">
|
||||
<view class="image-box rel" v-for="(item,index) in imageList" :key="index">
|
||||
<image :src="item" mode=""></image>
|
||||
<image @click="DelPic(index)" class="reduce abs" src="@/static/images/app/serve/realname_clea.png" mode=""></image>
|
||||
</view>
|
||||
<image src="@/static/images/app/serve/realname_upload.png" mode="" @click="getImage"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="isFormDataEmpty?'submitbtn':'submitbtncolor'" @click="submit"> 提 交 </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: true,
|
||||
userInfo: {
|
||||
id: null,
|
||||
realName: '',
|
||||
phone: '',
|
||||
idCard: '',
|
||||
qualificationImage: '',
|
||||
},
|
||||
imageList: [],
|
||||
rules: {
|
||||
realName: [{ required: true, message: '请填写姓名', trigger: ['blur', 'change'] }],
|
||||
phone: [{ required: true, message: '请填写手机号', trigger: ['blur', 'change'] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号不正确', trigger: ['blur', 'change'] },
|
||||
],
|
||||
idCard: { required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFormDataEmpty() {
|
||||
const { realName, phone, idCard } = this.userInfo;
|
||||
return !realName && !phone && !idCard;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imageList: {
|
||||
handler(nV) {
|
||||
this.userInfo.qualificationImage = nV[0]
|
||||
},
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit(){
|
||||
this.$toast('已提交')
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/repair/real_result`
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
DelPic(index) {
|
||||
this.imageList.splice(index, 1)
|
||||
},
|
||||
//传图片
|
||||
getImage() {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
})
|
||||
this.$util.uploadImageOne({
|
||||
count: 9,
|
||||
sizeType: ['original'],
|
||||
sourceType:['album', 'camera'],
|
||||
dir:'crmebimage/public/product/'
|
||||
},null,res=>{
|
||||
this.imageList.push(res.data)
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
iconClick(){
|
||||
// console.log('123');
|
||||
this.isShow=false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.realname {
|
||||
// background: linear-gradient(180deg, #E9FFFE 0%, #D3EAE9 31%, #F5F5F5 100%);
|
||||
background: #f6f6f6;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
|
||||
.toptxt {
|
||||
width: 750rpx;
|
||||
height: 68rpx;
|
||||
background: linear-gradient(90deg, #FFFFFF 2%, #FFF7F7 100%) #FFFFFF;
|
||||
opacity: 1;
|
||||
padding: 16rpx 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.bgcview {
|
||||
.top {
|
||||
position: relative;
|
||||
|
||||
.top_txt {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.top_imgview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
image {
|
||||
width: 210rpx;
|
||||
height: 238rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(180deg, #E9FFFE 0%, #D3EAE9 31%, #F5F5F5 100%);
|
||||
}
|
||||
|
||||
.formview {
|
||||
background: #FFFFFF;
|
||||
padding: 25rpx;
|
||||
opacity: 1;
|
||||
border-radius: 8rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.content_foot {
|
||||
margin-top: 30rpx;
|
||||
font-size: 30rpx;
|
||||
padding: 0 24rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.upload-box {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #fff;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.submitbtn {
|
||||
background: #84D2CF;
|
||||
width:95%;
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
border-radius: 60rpx;
|
||||
opacity: 1;
|
||||
margin:24rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.submitbtncolor {
|
||||
background: #13AFA8;
|
||||
width:95%;
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
border-radius: 60rpx;
|
||||
opacity: 1;
|
||||
margin:24rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 0 64rpx 0;
|
||||
|
||||
.image-box {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
width: 202rpx;
|
||||
height: 202rpx;
|
||||
|
||||
.reduce {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -16rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 202rpx;
|
||||
height: 202rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
pages/serve/repair/repair.vue
Normal file
112
pages/serve/repair/repair.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="con_imgview">
|
||||
<u-swiper height="370rpx" :list="list" :circular="true" imgMode="widthFix" keyName="image"
|
||||
:imgMode="aspectFit"></u-swiper>
|
||||
</view>
|
||||
<view class="con_type">
|
||||
<view class="title">
|
||||
<text>选择维修类型</text>
|
||||
</view>
|
||||
<view class="typeview">
|
||||
<view class="typeview_one" @click="toRepair">
|
||||
<text class="typetxt">常规保养</text>
|
||||
<image class="type_img" src="@/static/images/app/serve/repair_conserve.png"></image>
|
||||
</view>
|
||||
<view class="typeview_one" @click="toRepair">
|
||||
<text class="typetxt">故障维修</text>
|
||||
<image class="type_img" src="@/static/images/app/serve/repair_fault.png"></image>
|
||||
</view>
|
||||
<view class="typeview_one" @click="toRepair">
|
||||
<text class="typetxt">事故维修</text>
|
||||
<image class="type_img" src="@/static/images/app/serve/repair_accident.png"></image>
|
||||
</view>
|
||||
<view class="typeview_one" @click="toRepair">
|
||||
<text class="typetxt">退车</text>
|
||||
<image class="type_img" src="@/static/images/app/serve/repair_refund.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foottxt">
|
||||
<text>服务专线：400-9966-409</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
require('@/static/images/app/serve/repair_swiper.png'),
|
||||
require('@/static/images/app/serve/repair_swiper.png'),
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toRepair() {},
|
||||
toFault() {},
|
||||
toAccident() {},
|
||||
toRefund() {},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 16rpx 32rpx 36rpx 32rpx;
|
||||
// border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.con_imgview {
|
||||
margin-bottom: 32rpx;
|
||||
width: 686rpx;
|
||||
height: 370rpx;
|
||||
}
|
||||
|
||||
.con_type {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #302E2B;
|
||||
text-align: center;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.typeview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 25rpx;
|
||||
|
||||
.typeview_one {
|
||||
position: relative;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
}
|
||||
|
||||
.typetxt {
|
||||
position: absolute;
|
||||
top: 38rpx;
|
||||
left: 26rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #302E2B;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.type_img {
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foottxt {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin: 32rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/app/serve/bind_result.png
Normal file
BIN
static/images/app/serve/bind_result.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
static/images/app/serve/cou_store_phone.png
Normal file
BIN
static/images/app/serve/cou_store_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/images/app/serve/cou_store_up.png
Normal file
BIN
static/images/app/serve/cou_store_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/images/app/serve/coupons_fenxiang.png
Normal file
BIN
static/images/app/serve/coupons_fenxiang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 822 B |
BIN
static/images/app/serve/coupons_img.png
Normal file
BIN
static/images/app/serve/coupons_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/images/app/serve/coupons_img1.png
Normal file
BIN
static/images/app/serve/coupons_img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
static/images/app/serve/coupons_name.png
Normal file
BIN
static/images/app/serve/coupons_name.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/images/app/serve/coupons_xingxing.png
Normal file
BIN
static/images/app/serve/coupons_xingxing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/images/app/serve/re_bind_bgc.png
Normal file
BIN
static/images/app/serve/re_bind_bgc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
static/images/app/serve/re_bind_down.png
Normal file
BIN
static/images/app/serve/re_bind_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 B |
BIN
static/images/app/serve/re_bind_travel.png
Normal file
BIN
static/images/app/serve/re_bind_travel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/images/app/serve/real_result_bgc.png
Normal file
BIN
static/images/app/serve/real_result_bgc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
static/images/app/serve/real_result_submit.png
Normal file
BIN
static/images/app/serve/real_result_submit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
static/images/app/serve/realname_bgc.png
Normal file
BIN
static/images/app/serve/realname_bgc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
static/images/app/serve/realname_clea.png
Normal file
BIN
static/images/app/serve/realname_clea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 B |
BIN
static/images/app/serve/realname_clear.png
Normal file
BIN
static/images/app/serve/realname_clear.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
BIN
static/images/app/serve/realname_upload.png
Normal file
BIN
static/images/app/serve/realname_upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
static/images/app/serve/repair_accident.png
Normal file
BIN
static/images/app/serve/repair_accident.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
static/images/app/serve/repair_conserve.png
Normal file
BIN
static/images/app/serve/repair_conserve.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
static/images/app/serve/repair_fault.png
Normal file
BIN
static/images/app/serve/repair_fault.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
static/images/app/serve/repair_refund.png
Normal file
BIN
static/images/app/serve/repair_refund.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
static/images/app/serve/repair_swiper.png
Normal file
BIN
static/images/app/serve/repair_swiper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Reference in New Issue
Block a user