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

送货上门

Browse Source
dev
zhouzhenyuan 10 months ago
parent 99c3ce94df
commit ab6af3b0c6
12 changed files with 727 additions and 1 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. 7
      pages.json
  2. 9
      pages/goods/detail.vue
  3. 712
      pages/sureOrder/index.vue
  4. BIN
      static/order/address.png
  5. BIN
      static/order/bag.png
  6. BIN
      static/order/edit.png
  7. BIN
      static/order/friends.png
  8. BIN
      static/order/left.png
  9. BIN
      static/order/map.png
  10. BIN
      static/order/right.png
  11. BIN
      static/order/shop.png
  12. BIN
      static/order/wChat.png

7
pages.json
Unescape View File

@ -210,6 +210,13 @@
"navigationBarTitleText": "支付订单"
}
},
{
"path": "pages/sureOrder/index",
"style": {
"navigationBarTitleText": "确认订单",
"navigationStyle": "custom"
}
},
{
"path": "pages/order/center",
"style": {

9
pages/goods/detail.vue
Unescape View File

@ -4,7 +4,7 @@
<view class="search">
<image src="/static/tabbar/home.png" mode="" class="icon"></image>
<view class="searInput">
<image src="/static/home/search.png" mode="" class="seaIcon"></image>
<image src="/static/home/search.png" mode="" class="seaIcon" @click="goHome"></image>
<input v-model="searchValue" class="input" focus="true" placeholder="iPhone15" type="text" />
</view>
</view>
@ -187,6 +187,13 @@
return {
searchValue: '',
}
},
methods:{
goHome(){
uni.navigateTo({
url:'/pages/index/index'
})
},
}
}
</script>

712
pages/sureOrder/index.vue
Unescape View File

@ -0,0 +1,712 @@
<template>
<view class="sureOrder">
<view class="header">
确认订单
</view>
<view class="buyType">
<view class="toDoor">
送货上门
</view>
<view class="bySelf">
到店自取
</view>
</view>
<view class="address" v-if="buyType">
<view class="addAddress">
请点击添加收货地址
</view>
<view class="leftImg">
<image src="/static/order/left.png" mode="" ></image>
</view>
</view>
<view class="getSelf">
<view class="shopAddress">
<view class="youTime">
花梨服务站
</view>
<view class="leftImg">
切换
<image src="/static/order/left.png" mode="" ></image>
</view>
</view>
<view class="addressDetail">
浙江省金华市金东区人民西路31号新苑小区25幢
</view>
<view class="lookMap">
<image src="/static/user/address.png" mode="" class="addressIcon"></image>
<view class="range">
距您16.39km
</view>
<view class="checkMap">
查看地图
</view>
<image src="/static/order/left.png" mode="" class="rightIcon"></image>
</view>
<view class="pickUp">
<view class="pickPeople">
<view class="title">
取件人
</view>
<view class="name">
张三
</view>
</view>
<view class="pickPeople">
<view class="title">
</view>
<view class="name">
<image src="/static/order/edit.png" mode="" class="edit"></image>
</view>
</view>
<view class="pickPeople">
<view class="title">
预留电话
</view>
<view class="name">
18888888888
</view>
</view>
<view class="pickPeople">
<view class="title">
</view>
<view class="name">
<image src="/static/order/edit.png" mode="" class="edit"></image>
</view>
</view>
</view>
</view>
<view class="preTime">
<view class="left">
<view class="bagImg">
<image src="/static/order/bag.png" mode="" class="bag"></image>
街边取
</view>
<view class="preText">
如果您不方便，只需要在街边稍候，送到您的手上
</view>
</view>
<view class="switch">
<switch />
</view>
</view>
<view class="time">
<view class="youTime">
预计到货时间
</view>
<view class="leftImg">
<text class="leftText">2024-12-20 09：30</text>
<image src="/static/order/left.png" mode="" ></image>
</view>
</view>
<view class="time">
<view class="youTime">
您期待的收货时间
</view>
<view class="leftImg">
请选择
<image src="/static/order/left.png" mode="" ></image>
</view>
</view>
<view class="goodsDetail">
<view class="goodsType">
<image src="/static/order/bag.png" mode="" class="bag"></image>
<text>大白兔家电</text>
<image src="/static/order/left.png" mode="" class="leftIcon"></image>
</view>
<view class="goods">
<view class="goodsImg">
<image src="/static/home/goodsDemo.png" mode=""></image>
</view>
<view class="goodsInfo">
<view class="goodsName">
iphone13 绿色 128GB
</view>
<view class="goodsPrice">
￥ <text>7599</text>
</view>
</view>
<view class="goodsNum">
x1
</view>
</view>
</view>
<view class="time">
<view class="youTime">
留言
</view>
<view class="leftImg">
建议留言前与客服沟通确认
<image src="/static/order/left.png" mode="" ></image>
</view>
</view>
<view class="orderTips">
<view class="orderTitle">
<view class="total">
商品总额
</view>
<view class="price">
￥7599
</view>
</view>
<view class="orderTitle">
<view class="total">
运费
</view>
<view class="price">
￥7599
</view>
</view>
<view class="orderTitle">
<view class="total">
商品数量
</view>
<view class="price">
<text class="couponNum">1件</text>
</view>
</view>
<view class="orderTitle">
<view class="total">
优惠券
</view>
<view class="price">
<text class="couponNum">0张可用</text>
<image src="/static/order/left.png" mode=""></image>
</view>
</view>
<view class="line">
</view>
<view class="amount">
<view class="left">
</view>
<view class="right">
<text class="totalNum">共1件，合计：</text>
<text class="allPrice">￥7664</text>
</view>
</view>
</view>
<view class="payType">
<view class="itemType">
<view class="payName">
<image src="/static/order/wChat.png" mode="" class="payIcon"></image>
微信支付
</view>
<image src="/static/order/right.png" mode="" class="chose"></image>
</view>
<view class="line">
</view>
<view class="itemType">
<view class="payName">
<image src="/static/order/friends.png" mode="" class="payIcon"></image>
找微信好友代付
</view>
<!-- <image src="/static/order/right.png" mode="" class="chose"></image> -->
</view>
<view class="line">
</view>
<view class="itemType">
<view class="payName">
<image src="/static/order/shop.png" mode="" class="payIcon"></image>
到店支付
</view>
<!-- <image src="/static/order/right.png" mode="" class="chose"></image> -->
</view>
</view>
<view class="footer">
<view class="meetPrice">
应付款
<text class="type">￥</text>
<text class="price">7640</text>
</view>
<view class="btn">
提交订单
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
buyType:false,
}
}
}
</script>
<style lang="scss" scoped>
.sureOrder{
width: 750rpx;
padding-bottom: 120rpx;
background-image: url('../../static/home/homeback.png');
background-size: 100% 100%;
padding-top: 128rpx;
.header{
left: 0;
right: 0;
margin: auto;
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 40rpx;
}
}
.buyType{
display: flex;
margin:70rpx 0 0 26rpx;
.toDoor{
width: 348rpx;
height: 88rpx;
background-color: #fff;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 88rpx;
text-align: center;
}
.bySelf{
width:350rpx;
height: 74rpx;
background-color: rgba(255,255,255,0.570000);
line-height: 74rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #606060;
line-height: 74rpx;
position: relative;
top: 14rpx;
}
}
.getSelf{
.shopAddress{
display: flex;
align-items: center;
justify-content: space-between;
.youTime{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
}
.leftImg{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #9E9E9E;
image{
width: 18rpx;
height: 18rpx;
margin-left: 16rpx;
}
}
}
margin-left: 26rpx;
background-image: url('../../static/order/map.png');
background-size: 100% 100%;
width: 694rpx;
height: 246rpx;
padding:14rpx 46rpx 0 32rpx;
.addressDetail{
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
line-height: 34rpx;
margin-top: 6rpx;
}
.lookMap{
display: flex;
align-items: center;
margin-top: 8rpx;
.addressIcon{
width:23rpx;
height: 26rpx;
margin-right: 14rpx;
}
.range{
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F42B17;
line-height: 26rpx;
padding-right: 10rpx;
border-right:2rpx solid #D9D9D9;
margin-right: 10rpx;
}
.checkMap{
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2B2B2B;
line-height: 26rpx;
margin-right: 24rpx;
}
.rightIcon{
width: 18rpx;
height: 18rpx;
}
}
.pickUp{
display: flex;
justify-content: space-around;
margin-top: 26rpx;
.pickPeople{
.title{
height: 28rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
line-height: 28rpx;
}
.name{
height: 28rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #2C2C2C;
line-height: 28rpx;
margin-top: 10rpx;
.edit{
width: 20rpx;
height: 20rpx;
}
}
}
}
}
.leftText{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F21A1C;
line-height: 28rpx;
}
.address{
margin-left: 26rpx;
background-image: url('../../static/order/map.png');
width: 694rpx;
height: 154rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 52rpx 0 32rpx;
.addAddress{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F32E2E;
}
.leftImg{
width: 18rpx;
height: 18rpx;
image{
width: 100%;
height: 100%;
}
}
}
.preTime{
width: 694rpx;
height: 140rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin:12rpx 0 0 26rpx;
display: flex;
justify-content: space-between;
padding: 34rpx 0 0 30rpx;
.left{
.bagImg{
height: 30rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 30rpx;
margin-bottom: 10rpx;
.bag{
width: 30rpx;
height: 30rpx;
}
}
}
.preText{
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #959595;
line-height: 34rpx;
}
}
.time{
display: flex;
width: 694rpx;
height: 90rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin:12rpx 0 0 26rpx;
align-items: center;
justify-content: space-between;
padding: 0 32rpx 0 28rpx;
.youTime{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
}
.leftImg{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #9E9E9E;
image{
width: 18rpx;
height: 18rpx;
margin-left: 16rpx;
}
}
}
.goodsDetail{
width: 694rpx;
height: 266rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0 26rpx;
padding: 32rpx 24rpx 24rpx 12rpx;
.goodsType{
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
.bag{
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
.leftIcon{
width: 18rpx;
height: 18rpx;
margin-left: 20rpx;
}
}
.goods{
display: flex;
align-items: center;
margin-top: 28rpx;
.goodsImg{
width: 162rpx;
height: 148rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image{
width: 100%;
height: 100%;
}
}
.goodsInfo{
margin-left: 20rpx;
.goodsName{
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 40rpx;
margin-bottom: 4rpx;
}
.goodsPrice{
height: 50rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
line-height: 50rpx;
text{
font-size: 36rpx;
}
}
}
.goodsNum{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
margin-left: 150rpx;
}
}
}
.orderTips{
width: 694rpx;
height: 342rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin:12rpx 0 0 26rpx;
padding: 22rpx 36rpx 24rpx 24rpx;
.orderTitle{
margin-bottom: 24rpx;
display: flex;
justify-content: space-between;
height: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2D2D2D;
line-height: 34rpx;
.total{
font-size: 24rpx;
}
.price{
.couponNum{
font-size: 28rpx;
color: #F42B17;
}
font-size: 28rpx;
image{
width: 18rpx;
height: 18rpx;
margin-left: 18rpx;
}
}
}
.amount{
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.left{
width: 20rpx;
height: 34rpx;
}
.right{
display: flex;
align-items: center;
.totalNum{
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 34rpx;
}
.allPrice{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F42B17;
line-height: 34rpx;
}
}
}
}
.line{
width: 100%;
height: 0rpx;
opacity: 1;
border: 2rpx solid #F1F1F1;
}
.payType{
width: 694rpx;
height: 270rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0rpx 26rpx;
padding: 24rpx 26rpx 0;
.line{
margin-bottom: 24rpx;
}
.itemType{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28rpx;
.payName{
display: flex;
align-items: center;
height: 42rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 42rpx;
.payIcon{
width: 42rpx;
height: 42rpx;
margin-right: 16rpx;
}
}
.chose{
width: 34rpx;
height: 24rpx;
margin-right: 26rpx;
}
}
}
.footer{
width: 100%;
height: 120rpx;
position: fixed;
background-color: #FFF;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
.meetPrice{
margin-left:26rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
.type{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F42B17;
margin-left: 12rpx;
}
.price{
font-size: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F42B17;
}
}
.btn{
width: 214rpx;
height: 74rpx;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
opacity: 1;
text-align: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 74rpx;
margin-right: 20rpx;
}
}
</style>

BIN
static/order/address.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 978 B

BIN
static/order/bag.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/order/edit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 B

BIN
static/order/friends.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 713 B

BIN
static/order/left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 B

BIN
static/order/map.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
static/order/right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 B

BIN
static/order/shop.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 584 B

BIN
static/order/wChat.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 672 B

Write Preview
Loading…
Cancel
Save