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

领券中心与上门服务

Browse Source
dev
syt 1 year ago
parent 0ee482eaee
commit ec9f5fb2d3
16 changed files with 1044 additions and 18 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. 40
      pages.json
  2. 156
      pages/news/coupon/index.vue
  3. 181
      pages/news/coupon/list.vue
  4. 87
      pages/news/recycling/confirm.vue
  5. 442
      pages/news/recycling/order.vue
  6. 156
      pages/news/recycling/timer.vue
  7. BIN
      static/news/coupon-bg.jpg
  8. BIN
      static/news/icon-coupon-01.png
  9. BIN
      static/news/icon-coupon-02.png
  10. BIN
      static/news/icon-coupon-03.png
  11. BIN
      static/news/icon-coupon-use.png
  12. BIN
      static/news/icon-coupon-used.png
  13. BIN
      static/news/icon-recycling-order-01.png
  14. BIN
      static/news/icon-recycling-order-02.png
  15. BIN
      static/news/icon-recycling-order-03.png
  16. BIN
      static/news/icon-recycling-order-04.png

40
pages.json
Unescape View File

@ -534,6 +534,26 @@
{ {
"root": "pages/news/", "root": "pages/news/",
"pages": [ "pages": [
{
"path" : "coupon/index",
"style" :
{
"navigationBarTitleText": "领券中心",
"navigationBarBackgroundColor": "#FB3A22",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false
}
},
{
"path" : "coupon/list",
"style" :
{
"navigationBarTitleText": "领券中心",
"navigationBarBackgroundColor": "#FB3A22",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false
}
},
{ {
"path" : "recycling/index", "path" : "recycling/index",
"style" : "style" :
@ -556,7 +576,25 @@
"path" : "recycling/confirm", "path" : "recycling/confirm",
"style" : "style" :
{ {
"navigationBarTitleText": "上门回收", "navigationBarTitleText": "确认服务订单",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "recycling/timer",
"style" :
{
"navigationBarTitleText": "选择时间",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "recycling/order",
"style" :
{
"navigationBarTitleText": "订单详情",
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }

156
pages/news/coupon/index.vue
Unescape View File

@ -0,0 +1,156 @@
<template>
<view class="coupon">
<view class="coupon-hd">
<image src="@/static/news/coupon-bg.jpg"></image>
</view>
<view class="coupon-tab">
<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view>
<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">服务券</view>
</view>
<view class="coupon-bd">
<view class="item" v-for="i in 10" :key="i" @click="openPage()">
<view class="a">￥<text>890</text></view>
<view class="b">满999元使用</view>
<view class="c">适用于全场商品</view>
<view class="d">点击领取</view>
<image src="@/static/news/icon-coupon-01.png"></image>
</view>
</view>
<view class="nolist">
<image src="@/static/news/icon-coupon-03.png"></image>
<view class="txt">暂无已使用优惠券</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0
}
},
methods: {
openPage() {
uni.navigateTo({
url: "/pages/news/coupon/list"
})
},
tabItem(index){
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.coupon{
background-color: #FB3A22;
overflow: hidden;
.nolist{
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
padding: 150rpx 50rpx;
image{
width: 388rpx;
height: 378rpx;
}
.txt{
font-size: 32rpx;
margin-top: 20rpx;
font-weight: 500;
color: #fff;
}
}
&-hd{
width: 100%;
height: 445rpx;
image{
width: 100%;
height: 100%;
}
}
&-tab{
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.item{
width: 316rpx;
line-height: 80rpx;
border-radius: 10rpx;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
&-on{
color: #F34A40;
background: #FFFFFF;
}
}
}
&-bd{
padding: 0 40rpx 40rpx;
overflow: hidden;
.item{
width: 662rpx;
height: 366rpx;
position: relative;
margin-top: 20rpx;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
.a{
width: 100%;
position: absolute;
left: 60rpx;
top: 70rpx;
z-index: 2;
font-size: 36rpx;
font-weight: 500;
color: #FE6900;
text{
font-size: 68rpx;
}
}
.b{
width: 100%;
position: absolute;
left: 60rpx;
top: 160rpx;
z-index: 2;
font-size: 32rpx;
font-weight: 500;
color: #6B6B6B;
}
.c{
width: 100%;
position: absolute;
left: 60rpx;
bottom: 20rpx;
z-index: 2;
font-size: 28rpx;
font-weight: 500;
color: #A7572C;
}
.d{
width: 188rpx;
line-height: 68rpx;
background: linear-gradient(180deg, #FF7366 0%, #FF5242 100%);
border-radius: 68rpx;
position: absolute;
right: 28rpx;
top: 40rpx;
z-index: 2;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
}
}
}
</style>

181
pages/news/coupon/list.vue
Unescape View File

@ -0,0 +1,181 @@
<template>
<view class="coupon">
<view class="coupon-tab">
<u-tabs :list="list" height="106" font-size="32" active-color="#F34A40" inactive-color="#686868" :is-scroll="false" v-model="tabIndex" @change="change"></u-tabs>
</view>
<view class="coupon-bd">
<view class="item" :class="tabIndex == 2?'item-on':''" v-for="i in 10" :key="i">
<view class="a">￥<text>890</text></view>
<view class="b">有效期：2024.01-2024.01.19</view>
<view class="c">适用于全场商品</view>
<view class="d" v-if="tabIndex == 0">去使用</view>
<view class="e">满999元使用</view>
<view class="f">满999元减130元</view>
<image class="bg" v-if="tabIndex <= 1" src="@/static/news/icon-coupon-01.png"></image>
<image class="bg" v-else src="@/static/news/icon-coupon-02.png"></image>
<image class="icon" v-if="tabIndex == 1" src="@/static/news/icon-coupon-use.png"></image>
<image class="icon" v-if="tabIndex == 2" src="@/static/news/icon-coupon-used.png"></image>
<view class="line">
<u-line v-if="tabIndex <= 1" direction="col" border-style="dashed" color="#FFC7B9" />
<u-line v-if="tabIndex == 2" direction="col" border-style="dashed" color="#D9D9D9" />
</view>
</view>
</view>
<view class="nolist">
<image src="@/static/news/icon-coupon-03.png"></image>
<view class="txt">暂无已使用优惠券</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: '未使用'
}, {
name: '已使用'
}, {
name: '已过期'
}],
tabIndex: 0
}
},
methods: {
change() {
},
tabItem(index){
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.coupon{
overflow: hidden;
.nolist{
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
padding: 150rpx 50rpx;
image{
width: 388rpx;
height: 378rpx;
}
.txt{
font-size: 32rpx;
margin-top: 20rpx;
font-weight: 500;
color: #959595;
}
}
&-bd{
padding: 0 40rpx 40rpx;
overflow: hidden;
.item{
width: 662rpx;
height: 366rpx;
position: relative;
margin-top: 20rpx;
overflow: hidden;
.bg{
width: 100%;
height: 100%;
}
.icon{
width:220rpx;
height: 195rpx;
position: absolute;
right: 0;
bottom: 0;
z-index:1;
}
.a{
width: 235rpx;
position: absolute;
right: 0;
top: 40rpx;
z-index: 2;
font-size: 36rpx;
font-weight: 500;
text-align: center;
color: #FE6900;
text{
font-size: 68rpx;
}
}
.b{
position: absolute;
left: 40rpx;
top: 110rpx;
z-index: 2;
font-size: 28rpx;
font-weight: 500;
color: #AFAFAF;
}
.e{
position: absolute;
left: 40rpx;
top: 46rpx;
z-index: 2;
font-size: 36rpx;
font-weight: 500;
color: #454545;
}
.f{
position: absolute;
left: 40rpx;
top: 160rpx;
z-index: 2;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #6C6C6C;
}
.c{
position: absolute;
left: 40rpx;
bottom: 20rpx;
z-index: 2;
font-size: 28rpx;
font-weight: 500;
color: #A7572C;
}
.d{
width: 188rpx;
line-height: 68rpx;
background: linear-gradient(180deg, #FF7366 0%, #FF5242 100%);
border-radius: 68rpx;
position: absolute;
right: 28rpx;
top: 140rpx;
z-index: 2;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.line{
position: absolute;
right: 230rpx;
height: 200rpx;
width: 2px;
z-index: 3;
top: 36rpx;
}
&-on{
.a{
color: #BBBBBB;
}
.c{
color: #BBBBBB;
}
}
}
}
}
</style>

87
pages/news/recycling/confirm.vue
Unescape View File

@ -52,7 +52,7 @@
<view class="form"> <view class="form">
<view class="item"> <view class="item">
<view class="a">服务时间</view> <view class="a">服务时间</view>
<view class="b"> <view class="b" @click="openPage(1)">
<view class="select">请选择预约到店时间</view> <view class="select">请选择预约到店时间</view>
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon> <u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
</view> </view>
@ -60,7 +60,7 @@
<view class="item"> <view class="item">
<view class="a">联系人</view> <view class="a">联系人</view>
<view class="b"> <view class="b">
<input type="text" placeholder="联系人姓名" /> <input class="box1" type="text" placeholder="联系人姓名" />
<view class="radio"> <view class="radio">
<u-radio-group v-model="radioValue" active-color="red"> <u-radio-group v-model="radioValue" active-color="red">
<u-radio name="先生">先生</u-radio> <u-radio name="先生">先生</u-radio>
@ -72,34 +72,36 @@
<view class="item"> <view class="item">
<view class="a">联系电话</view> <view class="a">联系电话</view>
<view class="b"> <view class="b">
<input type="text" placeholder="联系人手机号码" /> <input class="box" type="text" placeholder="联系人手机号码" />
</view> </view>
</view> </view>
<view class="item"> <view class="item" v-if="tabIndex == 3">
<view class="a">联系人微信</view> <view class="a">联系人微信</view>
<view class="b"> <view class="b">
<input type="text" placeholder="联系人微信号码" /> <input class="box" type="text" placeholder="联系人微信号码" />
</view> </view>
</view> </view>
<view class="item"> <view class="item" v-if="tabIndex == 3">
<view class="a">发件地址</view> <view class="a">发件地址</view>
<view class="b"> <view class="b">
<picker mode="region"></picker> <picker mode="region">
<view class="select">请选择所在人城市</view>
</picker>
</view> </view>
</view> </view>
<view class="item"> <view class="item" v-if="tabIndex == 3">
<view class="a">门牌号</view> <view class="a">门牌号</view>
<view class="b"> <view class="b">
<input type="text" placeholder="详细地址 例：12幢1单元102室" /> <input class="box" type="text" placeholder="详细地址 例：12幢1单元102室" />
</view> </view>
</view> </view>
<view class="item"> <view class="item">
<view class="a">期待卖价</view> <view class="a">期待卖价</view>
<view class="b"> <view class="b">
<input type="text" placeholder="请输入您期待的售卖价格（元）" /> <input class="box" type="text" placeholder="请输入您期待的售卖价格（元）" />
</view> </view>
</view> </view>
<view class="phone"> <view class="photo">
<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5"> <u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5">
<template v-slot:addBtn> <template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
@ -125,7 +127,7 @@
</view> </view>
<view class="recycling-fd"> <view class="recycling-fd">
<view class="a">免支付预购</view> <view class="a">免支付预购</view>
<view class="b">提交订单</view> <view class="b" @click="openPage(2)">提交订单</view>
</view> </view>
</view> </view>
</template> </template>
@ -146,6 +148,17 @@
methods: { methods: {
tabItem(i) { tabItem(i) {
this.tabIndex = i this.tabIndex = i
},
openPage(i){
if(i == 1){
uni.navigateTo({
url: "/pages/news/recycling/timer"
})
}else {
uni.redirectTo({
url: "/pages/news/recycling/order"
})
}
}, },
} }
} }
@ -325,14 +338,48 @@
} }
.form { .form {
padding: 0 40rpx; padding: 0 40rpx;
overflow: hidden; overflow: hidden;
.remark{
.name{
font-size: 28rpx;
font-weight: 400;
color: #313131;
}
.xu{
display: flex;
flex-wrap: wrap;
overflow: hidden;
.li{
line-height: 52rpx;
background: #FFFFFF;
border-radius: 6rpx;
border: 1px solid #EDEDED;
padding: 0 20rpx;
margin-right: 20rpx;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #949494;
margin-top: 20rpx;
}
}
.content{
padding: 20rpx 0 50rpx;
font-size: 28rpx;
color: #212121;
}
}
.photo{
padding: 20rpx 0;
overflow: hidden;
}
.item{ .item{
padding: 20rpx 0; padding: 20rpx 0;
border-bottom: 1px solid #F4F4F4; border-bottom: 1px solid #F4F4F4;
display: flex; display: flex;
align-items: center; align-items: center;
.a{ .a{
width: 140rpx; width: 160rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 400; font-weight: 400;
color: #313131; color: #313131;
@ -353,20 +400,26 @@
color: #212121; color: #212121;
} }
} }
input{ .box{
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #212121; color: #212121;
line-height: 45rpx; line-height: 45rpx;
}
.box1{
width: 160rpx;
font-size: 28rpx;
color: #212121;
line-height: 45rpx;
} }
.radio{ .radio{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-end;
flex: 1; flex: 1;
border-left: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6;
} }
} }
} }
} }
} }

442
pages/news/recycling/order.vue
Unescape View File

@ -0,0 +1,442 @@
<template>
<view class="order">
<view class="order-navbar">
<u-navbar title="订单详情" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="order-hd">
<view class="l">
<view class="a">
<view class="name">
<image class="user" src="@/static/news/icon-recycling-order-01.png"></image>王小二
<text>19800998899</text>
</view>
<image class="copy" src="@/static/news/icon-recycling-order-02.png"></image>
</view>
<view class="b">
<image class="pic" src="@/static/home/phone.jpg"></image>
<view class="info">
<view class="name">手机回收</view>
<view class="price">￥<text>7599</text></view>
</view>
<view class="num">x1</view>
</view>
</view>
</view>
<view class="order-bd">
<view class="a">
<image src="@/static/news/icon-recycling-order-03.png"></image>
回收方式：<text>门店回收</text>
</view>
<view class="b">
<view class="item">
<view class="l">回收时间：</view>
<view class="r">2023-12-20 15:20:20</view>
</view>
<view class="item">
<view class="l">期待价格：</view>
<view class="r">¥2399</view>
</view>
<view class="items">
<view class="l">商品图片：</view>
<view class="r">
<view class="pic">
<image src="@/static/home/phone.jpg" v-for="i in 9" :key="i"></image>
</view>
</view>
</view>
</view>
</view>
<view class="order-bd">
<view class="b">
<view class="item">
<view class="l">店铺名称：</view>
<view class="r">京选家电武隆路店</view>
</view>
<view class="item">
<view class="l">店铺电话：</view>
<view class="r">17705773556</view>
</view>
<view class="item">
<view class="l">店铺地址：</view>
<view class="r">杭州市萧山区宏达路237号丽景国际中心1F-33</view>
<view class="m">
<view class="li">
<image src="@/static/news/tel.png"></image>电话
</view>
<view class="li">
<image src="@/static/news/address.png"></image>导航
</view>
</view>
</view>
<view class="item">
<view class="l">营业时间：</view>
<view class="r">10:00-18:00</view>
</view>
</view>
</view>
<view class="order-bd">
<view class="b">
<view class="item">
<view class="l">订单编号：</view>
<view class="r">2393990490490</view>
<view class="m red">复制</view>
</view>
<view class="item">
<view class="l">下单时间：</view>
<view class="r">2023-12-20 15:20:20</view>
</view>
<view class="item">
<view class="l">商品快照：</view>
<view class="r">核对交易细节时，可作为判断依据</view>
<view class="m red">查看</view>
</view>
<view class="item">
<view class="l">营业时间：</view>
<view class="r">10:00-18:00</view>
</view>
</view>
</view>
<!-- 邮寄展示 -->
<view class="order-bd" hidden>
<view class="b">
<view class="item">
<view class="l">物流公司：</view>
<view class="r">
<input type="text" placeholder="请输入或选择物流公司" />
</view>
<view class="m red">
<u-icon style="color:#999" name="arrow-right"></u-icon>
</view>
</view>
<view class="item">
<view class="l">快递单号：</view>
<view class="r">
<input type="text" placeholder="请输入物流单号" />
</view>
<view class="m red">
<view class="btn">确认发货</view>
</view>
</view>
</view>
</view>
<view class="order-bd">
<view class="b" style="margin-top: 0;">
<view class="item">
<view class="l">留言：</view>
<view class="r">可提前来</view>
</view>
</view>
</view>
<view class="order-fd">
<view class="a">
联系商家
</view>
<view class="b">
确认收款
</view>
</view>
<u-mask :show="isShow" @click="show = false">
<view class="order-dialog">
<image class="pic" src="@/static/news/icon-recycling-order-04.png"></image>
<view class="a">回收订单提交成功</view>
<view class="b">感谢您对低碳环保做出的努力！</view>
<view class="c">查看订单</view>
</view>
</u-mask>
</view>
</template>
<script>
import img from "@/static/news/refund-bg.png"
export default {
data() {
return {
isShow: false,
currentIndex: 0,
background: {
background: 'url('+ img+') center -44px no-repeat',
backgroundSize: '100%',
},
background1: {
background: '#ff0000',
}
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.order{
width: 100%;
padding: 0 0 150rpx;
box-sizing: border-box;
overflow: hidden;
&-hd{
background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%);
overflow: hidden;
.l{
width: 694rpx;
height: 276rpx;
background: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 30rpx;
.a{
display: flex;
align-items: center;
justify-content: space-between;
.name{
display: flex;
align-items: center;
image{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
text{
margin-left: 10rpx;
font-size: 28rpx;
font-weight: 400;
color: #838383;
}
font-size: 32rpx;
font-weight: 500;
color: #333333;
}
.copy{
width: 40rpx;
height: 40rpx;
}
}
.b{
display: flex;
align-items: center;
margin-top: 20rpx;
.pic{
width: 182rpx;
height: 146rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.info{
overflow: hidden;
.name{
width: 360rpx;
font-size: 28rpx;
font-weight: 400;
white-space: nowrap;
}
.price{
font-size: 24rpx;
font-weight: 600;
color: #F21A1C;
text{
font-size: 36rpx;
}
margin-top: 20rpx;
}
}
.num{
flex: 1;
font-size: 28rpx;
font-weight: 500;
color: #1E1E1E;
text-align: right;
}
}
}
}
&-bd{
width: 694rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
.a{
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #7E7E7E;
text{
color: #1E1E1E;
margin-left: 10rpx;
}
image{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.b{
margin-top: 20rpx;
.item{
display: flex;
align-items: flex-start;
padding: 10rpx 0;
.l{
width: 140rpx;
font-size: 24rpx;
font-weight: 400;
color: #7E7E7E;
}
.r{
flex: 1;
font-size: 24rpx;
font-weight: 400;
color: #1E1E1E;
max-width: 380rpx;
input{
font-size: 24rpx;
color: #1E1E1E;
}
}
.m{
width: 120rpx;
display: flex;
align-items: center;
justify-content: flex-end;
color: #F63016;
font-size: 24rpx;
.btn{
width: 118rpx;
height: 48rpx;
border-radius: 8rpx;
border: 1px solid #F83A13;
text-align: center;
line-height: 48rpx;
}
.li{
flex: 1;
font-size: 20rpx;
font-weight: 400;
color: #989898;
text-align: center;
image{
width: 30rpx;
height: 30rpx;
display: block;
margin: 0 auto;
margin-bottom: 20rpx;
}
}
}
}
.items{
padding: 10rpx 0;
.l{
width: 140rpx;
font-size: 24rpx;
font-weight: 400;
color: #7E7E7E;
}
.r{
width: 100%;
overflow: hidden;
margin-top: 20rpx;
.pic{
width: 110%;
image{
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
margin-right: 10rpx;
margin-top: 20rpx;
float: left;
}
}
}
}
}
}
&-fd{
width: 100%;
background: #FFFFFF;
box-shadow: 18rpx -4rpx 23rpx 0px rgba(0,0,0,0.03);
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
z-index: 200;
padding: 20rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.a{
text-align: center;
width: 146rpx;
line-height: 68rpx;
background: #FFFFFF;
border-radius: 76rpx;
opacity: 1;
border: 1px solid #D9D9D9;
font-size: 24rpx;
font-weight: 500;
color: #828282;
margin-right: 24rpx;
}
.b{
width: 528rpx;
line-height: 78rpx;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 78px;
text-align: center;
font-size: 24rpx;
font-weight: 500;
color: #FFFFFF;
}
}
&-dialog{
width: 537rpx;
height: 414rpx;
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
border-radius: 12rpx;
position: absolute;
left: 50%;
top: 50%;
margin-left: -268rpx;
margin-top: -207rpx;
z-index: 2;
text-align: center;
padding-top: 100rpx;
box-sizing: border-box;
.pic{
width: 112rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -56rpx;
top: -60rpx;
z-index: 2;
}
.a{
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.b{
font-size: 28rpx;
font-weight: 400;
color: #727272;
margin-top: 30rpx;
}
.c{
width: 412rpx;
line-height: 72rpx;
background: #F55349;
border-radius: 8rpx;
font-size: 28rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 60rpx;
}
}
}
</style>

156
pages/news/recycling/timer.vue
Unescape View File

@ -0,0 +1,156 @@
<template>
<view class="recycling">
<scroll-view scroll-x class="recycling-hd">
<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">
<text>今天</text>01-10
</view>
<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">
<text>明天</text>01-11
</view>
<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">
<text>周五</text>01-11
</view>
<view class="item" :class="tabIndex == 3?'item-on':''" @click="tabItem(3)">
<text>周六</text>01-11
</view>
</scroll-view>
<view class="recycling-bd">
<view class="item" v-for="i in 10" :key="i" :class="tabIndex1 == i?'item-on':''" @click="tabItem1(i)">
19:30<text>夜间</text>
</view>
</view>
<view class="recycling-fd">
<view class="a"><u-divider>实际到达时间可能会有30分钟浮动</u-divider></view>
<view class="b" @click="openPage()">确定选择</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
tabIndex1: 1,
tabIndex: 0
}
},
methods: {
tabItem1(i) {
this.tabIndex1 = i
},
tabItem(i) {
this.tabIndex = i
},
openPage(){
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style lang="scss" scoped>
.recycling{
min-height: 100vh;
padding-bottom: 210rpx;
overflow: hidden;
&-hd{
padding: 30rpx;
background-color: #FFFFFF;
white-space: nowrap;
box-sizing: border-box;
.item{
width: 220rpx;
height: 130rpx;
text-align: center;
font-size: 26rpx;
border-radius: 12rpx;
display: inline-block;
margin-left: 20rpx;
color: #5c5c5c;
border: 1px solid #f5f5f5;
background-color: #f5f5f5;
text{
display: block;
font-size: 30rpx;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
&:first-child{
margin-left: 0;
}
&-on{
border-color: #fdeded;
color: #D22C24;
background-color: #fdeded;
}
}
}
&-bd{
overflow: hidden;
.item{
width: 160rpx;
height: 90rpx;
text-align: center;
font-size: 28rpx;
color: #212121;
border-radius: 10rpx;
float: left;
margin-left: 20rpx;
margin-top: 30rpx;
background-color: #FFFFFF;
line-height: 90rpx;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid #FFFFFF;
text{
position: absolute;
right: 0;
top: 0;
display: block;
width: 52rpx;
line-height: 30rpx;
background: #F3E7D7;
font-size: 20rpx;
font-weight: 500;
color: #B18A55;
border-radius: 0 5rpx 0 5rpx;
}
&-on{
border-color: #D22C24;
background-color: #FDEDED;
color: #D22C24;
}
}
}
&-fd{
width: 100%;
height: 200rpx;
background-color: #FFFFFF;
padding: 15rpx 25rpx;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
.a{
font-size: 28rpx;
font-weight: 400;
color: #727272;
}
.b{
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: #D22C24;
border-radius: 90rpx;
text-align: center;
font-size: 28rpx;
font-weight: 600;
color: #FFFFFF;
margin: 0 auto;
margin-top: 20rpx;
}
}
}
</style>

BIN
static/news/coupon-bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
static/news/icon-coupon-01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/news/icon-coupon-02.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/news/icon-coupon-03.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/news/icon-coupon-use.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
static/news/icon-coupon-used.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
static/news/icon-recycling-order-01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 B

BIN
static/news/icon-recycling-order-02.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 B

BIN
static/news/icon-recycling-order-03.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 624 B

BIN
static/news/icon-recycling-order-04.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

Write Preview
Loading…
Cancel
Save