deliveryman/dm-wechat-mini
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tab2,tab3.1

Browse Source
This commit is contained in:
潇 2025-01-13 04:17:43 +08:00
parent 2db8557407
commit d063a2af3b
28 changed files with 420 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -12,7 +12,8 @@
"pages/help/community/index",
"pages/help/address/index/index",
"pages/help/address/edit/index",
"pages/shop/detail/index"
"pages/shop/detail/index",
"pages/shop/success/index"
],
"window": {
"navigationBarTextStyle": "black",

50
app.wxss
View File

@ -4,6 +4,7 @@ page{
line-height: 1;
background-color:#F5F5F5;
color: #222222;
padding-bottom:80rpx;
}
button{
@ -105,6 +106,13 @@ checkbox .wx-checkbox-input{
border-radius: 50%;
}
page-container .content{
border-radius: 24rpx 24rpx 0 0;
background-color: #F5F5F5;
min-height: 200rpx;
/* padding:20rpx; */
}
.page-container{
background-color: #fff;
border-radius: 20rpx;
@ -113,4 +121,46 @@ checkbox .wx-checkbox-input{
}
.page-container.shadow{
box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
}
.tags{
display: flex;
gap: 10rpx;
}
.tags .tag{
font-size:20rpx;
padding:6rpx 10rpx;
color: #888888;
border: 0.5px solid rgba(153, 153, 153, 0.5);
border-radius: 6rpx;
}
.spliter{
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
}
.money,.money-promation,.money-normal,.money-disable{
font-size: 36rpx;
font-weight: 500;
}
.money::before,.money-promation::before,.money-normal::before,.money-disable::before{
content: "¥";
font-size: 80%;
}
.money{
color:#EB0000;
}
.money-promation{
color:#FF8400;
}
.money-promation::before{
content: "-¥";
}
.money-normal{
color:unset;
}
.money-disable{
color:#888888;
text-decoration: line-through;
font-size: 28rpx;
font-weight:normal;
}

BIN
assets/icon/order/empty@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
assets/imgs/for_test/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/imgs/for_test/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 472 KiB

BIN
assets/imgs/for_test/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
assets/imgs/for_test/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 597 KiB

BIN
assets/imgs/for_test/jd.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/imgs/for_test/woman.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

3
components/navbar/index.json
View File

@ -1,4 +1,5 @@
{
"component": true,
"usingComponents": {}
"usingComponents": {},
"styleIsolation": "shared"
}

24
components/shopItem/index.js Normal file
View File

@ -0,0 +1,24 @@
// components/shop/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})

5
components/shopItem/index.json Normal file
View File

@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {},
"styleIsolation": "shared"
}

18
components/shopItem/index.wxml Normal file
View File

@ -0,0 +1,18 @@
<view class="page-container shop-item">
<image class="logo" src="/assets/imgs/for_test/jd.png"/>
<view class="content">
<view class="line1">京东养车</view>
<view class="line2">
<view class="line2-1">燎原路228号御景湾</view>
<view class="line2-2">100m</view>
</view>
<view class="line-coupon">
<label class="money">22.9</label>
<label class="money-disable">22.9</label>【5座】标准洗车
</view>
<view class="line-coupon">
<label class="money">22.9</label>
<label class="money-disable">22.9</label>【5座】标准洗车
</view>
</view>
</view>

49
components/shopItem/index.wxss Normal file
View File

@ -0,0 +1,49 @@
.shop-item{
display: flex;
}
.shop-item .logo{
width:180rpx;height:180rpx;
}
.shop-item .content{
flex:1;
margin-left:18rpx;
}
.shop-item .line1{
font-size:34rpx;
font-weight: 600;
}
.shop-item .line2{
font-size: 26rpx;
display: flex;
color:#888888;
margin-top:26rpx;
padding-bottom:16rpx;
}
.shop-item .line2-1{
flex:1;
}
.shop-item .line-coupon{
font-size: 26rpx;
margin-top: 20rpx;
position: relative;
}
.shop-item .line-coupon::before{
content: '惠';
width:34rpx;height:34rpx;
font-size:22rpx;
border-radius: 8rpx;
background-color: #FF8400;
color: #fff;
display: inline-block;
text-align: center;
line-height: 34rpx;
vertical-align: top;
margin-right: 8rpx;
}
.shop-item .money{
font-size: 32rpx;
}
.shop-item .money-disable{
font-size: 28rpx;
margin-left:10rpx;
}

6
pages/order/index/index.js
View File

@ -5,7 +5,11 @@ Page({
* 页面的初始数据
*/
data: {
tabIndex:0
},
changeTab(event){
const tabIndex = event.currentTarget.dataset.index;
this.setData({tabIndex})
},
/**

5
pages/order/index/index.json
View File

@ -1,3 +1,6 @@
{
"usingComponents": {}
"usingComponents": {
"nav-bar":"/components/navbar"
},
"navigationStyle": "custom"
}

16
pages/order/index/index.wxml
View File

@ -1,2 +1,14 @@
<!--pages/order/index/index.wxml-->
<text>pages/order/index/index.wxml</text>
<nav-bar class="nav-bar"/>
<view class="tab-bar">
<view class="item-container {{tabIndex==0?'current':''}}" bind:tap="changeTab" data-index="0">
<view class="item">跑腿服务</view>
</view>
<view class="item-container {{tabIndex==1?'current':''}}" bind:tap="changeTab" data-index="1">
<view class="item">团购省钱</view>
</view>
</view>
<view class="list-empty">
<image class="icon" src="/assets/icon/order/empty@2x.png"/>
<view class="text">暂无相关订单</view>
</view>

48
pages/order/index/index.wxss
View File

@ -1 +1,47 @@
/* pages/order/index/index.wxss */
.nav-bar{
background-color: #fff;
}
.tab-bar{
display: flex;
justify-content: space-between;
background-color: #fff;
font-size: 34rpx;
font-weight: 600;
}
.tab-bar .item-container{
padding:0 110rpx;
}
.tab-bar .item{
position: relative;
padding:40rpx 0;
color: #7C8695;
transition-duration: .4s;
}
.tab-bar .item::before{
opacity: 0;
content: "";
height:8rpx;
width:100%;
position: absolute;
bottom:0;
background-color: #1A4DEB;
transition-duration: .4s;
}
.tab-bar .current .item{
color: #000;
}
.tab-bar .current .item::before{
opacity: 1;
}
.list-empty{
text-align: center;
margin-top:380rpx;
}
.list-empty .icon{
width:160rpx;height:160rpx;
}
.list-empty .text{
font-size:30rpx;
color:#7C8695
}

11
pages/shop/detail/index.js
View File

@ -5,7 +5,18 @@ Page({
* 页面的初始数据
*/
data: {
isShowConfirm:false
},
showConfirm(){
this.setData({
isShowConfirm:true
})
},
goToSuccess(){
wx.navigateTo({
url: '/pages/shop/success/index',
})
},
/**

44
pages/shop/detail/index.wxml
View File

@ -1,10 +1,10 @@
<view class="swiper-container">
<swiper class="swiper" >
<swiper-item class="item">
<image class="image" src="/assets/imgs/for_test/1.png" mode="aspectFit"/>
<image class="image" src="/assets/imgs/for_test/1.jpg" mode="aspectFit"/>
</swiper-item>
<swiper-item class="item">
<image class="image" src="/assets/imgs/for_test/2.png" mode="aspectFit"/>
<image class="image" src="/assets/imgs/for_test/2.jpg" mode="aspectFit"/>
</swiper-item>
</swiper>
<view class="nav">
@ -64,8 +64,44 @@
<label>消费金抵扣</label>
</view>
</view>
<button class="button" size="mini" type="primary">抢购</button>
<button class="button" size="mini" type="primary" bind:tap="showConfirm">抢购</button>
</view>
</view>
</view>
</view>
</view>
<page-container show="{{isShowConfirm}}" round close-on-slide-down>
<view class="content pc-content">
<view class="page-container">
<view class="info">
<image class="image" src="/assets/imgs/for_test/woman.png"/>
<view class="right">
<view class="title">【督导】洗剪吹+修眉</view>
<view class="tags">
<view class="tag">周一至周五可用</view>
<view class="tag">随时退</view>
</view>
</view>
</view>
<view class="kv">
<view class="key">团购价</view>
<view class="value">
<label class="money-normal">88.0</label>
</view>
</view>
<view class="spliter"></view>
<view class="kv">
<view class="key">消费金抵扣</view>
<view class="value">
<label class="money-promation">9.0</label>
</view>
</view>
<view class="kv">
<view class="key"></view>
<view class="value">合计：<label class="money">79.0</label></view>
</view>
</view>
<button class="button" type="primary" bind:tap="goToSuccess">立即购买</button>
</view>
</page-container>

57
pages/shop/detail/index.wxss
View File

@ -44,7 +44,6 @@
margin-top:20rpx;
}
.shop-info .spliter{
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
margin:16rpx 0 30rpx 0;
}
.shop-info .address .left{
@ -122,33 +121,19 @@
font-weight: 500;
}
.group-buy .item .right .tags{
display: flex;
gap: 10rpx;
margin-top:20rpx;
}
.group-buy .item .right .tag{
font-size:20rpx;
padding:6rpx 10rpx;
color: #888888;
border: 0.5px solid rgba(153, 153, 153, 0.5);
border-radius: 6rpx;
.group-buy .item .right .bl-money{
display: flex;
align-items: center;
}
.group-buy .item .right .money{
color:#EB0000;
font-size: 32rpx;
}
.group-buy .item .right .money::before{
content:"¥";
font-size: 24rpx;
}
.group-buy .item .right .money-disable{
color: #888888;
text-decoration: line-through;
margin-left: 10rpx;
}
.group-buy .item .right .money-disable::before{
content:"¥";
font-size: 24rpx;
}
.group-buy .item .promation{
border-radius: 6rpx;
@ -177,4 +162,36 @@
font-weight: normal;
line-height: 1;
padding:14rpx 36rpx;
}
}
.pc-content .info{
display: flex;
padding-bottom:10rpx
}
.pc-content .info .image{
width:160rpx;height:160rpx;
}
.pc-content .info .right{
flex:1;
margin-left:40rpx;
}
.pc-content .info .tags{
margin-top:20rpx;
}
.pc-content .info .title{
font-size: 36rpx;
}
.pc-content .kv{
display: flex;
margin:30rpx;
}
.pc-content .kv .key{
flex:1;
font-size:29rpx;
}
.pc-content .kv .value{
font-size: 26rpx;
}
.pc-content .button{
margin:20rpx 20rpx 50rpx;
}

3
pages/shop/index/index.json
View File

@ -1,6 +1,7 @@
{
"usingComponents": {
"nav-bar":"/components/navbar"
"nav-bar":"/components/navbar",
"shop-item":"/components/shopItem"
},
"navigationStyle": "custom"
}

12
pages/shop/index/index.wxml
View File

@ -12,7 +12,7 @@
</view>
<view class="shop-list">
<view class="page-container item" wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
<shop-item wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
<image class="logo" src="/assets/imgs/for_test/jd.png"/>
<view class="content">
<view class="line1">京东养车</view>
@ -21,13 +21,13 @@
<view class="line2-2">100m</view>
</view>
<view class="line-coupon">
<label class="money">¥22.9</label>
<label class="money-disable">¥22.9</label>【5座】标准洗车
<label class="money">22.9</label>
<label class="money-disable">22.9</label>【5座】标准洗车
</view>
<view class="line-coupon">
<label class="money">¥22.9</label>
<label class="money-disable">¥22.9</label>【5座】标准洗车
<label class="money">22.9</label>
<label class="money-disable">22.9</label>【5座】标准洗车
</view>
</view>
</view>
</shop-item>
</view>

55
pages/shop/index/index.wxss
View File

@ -13,8 +13,8 @@
}
.consume .money{
font-size: 70rpx;
font-weight: 600;
margin-top:40rpx;
color:#fff;
}
.consume .tips{
position:absolute;
@ -42,56 +42,3 @@
.btns .item:not([type=primary]){
background-color: #fff;
}
.shop-list .item{
display: flex;
}
.shop-list .item .logo{
width:180rpx;height:180rpx;
}
.shop-list .item .content{
flex:1;
margin-left:18rpx;
}
.shop-list .item .line1{
font-size:34rpx;
font-weight: 600;
}
.shop-list .item .line2{
font-size: 26rpx;
display: flex;
color:#888888;
margin-top:26rpx;
padding-bottom:16rpx;
}
.shop-list .item .line2-1{
flex:1;
}
.shop-list .item .line-coupon{
font-size: 26rpx;
margin-top: 20rpx;
position: relative;
}
.shop-list .item .line-coupon::before{
content: '惠';
width:34rpx;height:34rpx;
font-size:22rpx;
border-radius: 8rpx;
background-color: #FF8400;
color: #fff;
display: inline-block;
text-align: center;
line-height: 34rpx;
vertical-align: top;
margin-right: 8rpx;
}
.shop-list .item .money{
font-size: 32rpx;
color:#EB0000;
font-weight:500
}
.shop-list .item .money-disable{
font-size: 28rpx;
color: #888888;
text-decoration: line-through;
}

66
pages/shop/success/index.js Normal file
View File

@ -0,0 +1,66 @@
// pages/shop/success/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

5
pages/shop/success/index.json Normal file
View File

@ -0,0 +1,5 @@
{
"usingComponents": {
"shop-item":"/components/shopItem"
}
}

8
pages/shop/success/index.wxml Normal file
View File

@ -0,0 +1,8 @@
<view class="success">
<icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
<view class="text">支付成功</view>
<button class="button" plain>前往查看订单</button>
</view>
<view class="shop-list">
<shop-item wx:for="{{3}}" wx:key="index"/>
</view>

24
pages/shop/success/index.wxss Normal file
View File

@ -0,0 +1,24 @@
.success{
background-color: #fff;
text-align: center;
padding:100rpx 0;
}
.success .text{
font-size: 36rpx;
font-weight: 500;
margin-top:30rpx;
}
.success .button{
margin:100rpx 112rpx 0;
border: 1rpx solid rgba(124, 134, 149, 0.5);
border-radius: 60rpx;
}
.shop-list{
margin-top:-20rpx;
border-radius: 30rpx 30rpx 0 0;
position: relative;
z-index: 1;
background-color: #F5F5F5;
padding-top:20rpx;
}