【类 型】：feat
【原 因】： 【过 程】：新的地址图片 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
5bd21898fb
commit
847a4f3a29
6
App.vue
6
App.vue
@ -257,15 +257,15 @@
|
||||
}
|
||||
|
||||
.fz24 {
|
||||
font-size: $uni-font-size-sm;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.fz28 {
|
||||
font-size: $uni-font-size-base;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.fz32 {
|
||||
font-size: $uni-font-size-lg;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.fz36 {
|
||||
|
||||
@ -7,56 +7,84 @@
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- 地址框 -->
|
||||
<view class="m-24 p-24 bg-w siteBox rad8 boxshadow">
|
||||
<view class="flex md msb borderBDas p-b-24">
|
||||
<view class="m-l-24 m-r-24 m-t-24 p-t-24 p-b-24 bg-w rad8 boxshadow">
|
||||
<view class="flex md msb p-b-24 p-l-24 p-r-24">
|
||||
<view class="flex md">
|
||||
<u--image src="/static/icons/site-48.svg" width="75rpx" height="75rpx" />
|
||||
<view class="m-l-24 fz36 fcm fb">{{siteCon.sitename}}</view>
|
||||
<view class="m-l-24 fz36 fb">收货站点：<font class="fcm">{{siteCon.sitename}}</font>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u--image src="/static/icons/pulldown-40.svg" width="40rpx" height="40rpx" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex m-t-24 fz28 msb">
|
||||
<view class="colorBar"></view>
|
||||
<view class="flex m-t-24 p-l-24 p-r-24 fz28 msb">
|
||||
<view>配置物流</view>
|
||||
<view>{{shopCon.name}}</view>
|
||||
</view>
|
||||
<view class="flex m-t-12 fz28 msb">
|
||||
<view class="flex m-t-12 p-l-24 p-r-24 fz28 msb">
|
||||
<view>送达时间</view>
|
||||
<view>预估30分钟之后送达</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单详情 -->
|
||||
<view class="fb fz36 m-24">商品详情</view>
|
||||
<view class="m-24 m-t-12 flex column">
|
||||
<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
|
||||
<view class="fb fz36 m-b-24">餐品详情</view>
|
||||
<!-- cart -->
|
||||
<view class="flex" v-for="(item,index) in cartList" :key="index">
|
||||
<view class="rad8" style="width:192rpx;height: 144rpx;">
|
||||
<u--image :src="item.photo" width="192rpx" height="144rpx"></u--image>
|
||||
</view>
|
||||
<view class="flex1 flex column p-24">
|
||||
<view class="fz28 m-b-24">{{item.spu_name}}</view>
|
||||
<view v-for="(i,index) in item.sku_nameG" :key="index" v-if="item.sku_nameG.length>1"
|
||||
class="fz24 fcb l-h-12">1 X {{i}}</view>
|
||||
<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{item | calculateTotal}}</view>
|
||||
<view class="flex m-t-24 msb" v-for="(item,index) in cartList" :key="index">
|
||||
<view class="flex">
|
||||
<u--image :src="item.photo" width="192rpx" height="144rpx" />
|
||||
<view class="m-l-24 flex column">
|
||||
<view class="fz32 m-b-12">{{item.spu_name}}</view>
|
||||
<view class="fz24 fcb" v-for="(i,index) in item.sku_nameG" :key="index"
|
||||
v-if="item.sku_nameG.length>1">
|
||||
X1 {{i}}
|
||||
</view>
|
||||
<view class="fz24 m-t-12">X{{item.countG[0]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fz36 fb m-l-12">¥{{item | calculateTotal}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 价格明细 -->
|
||||
<view class="fb fz36 m-24">价格明细</view>
|
||||
<view class="flex msb m-l-24 m-r-24 fz32">
|
||||
<view>商品小计</view>
|
||||
<view>¥{{total | formatPrice}}</view>
|
||||
<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
|
||||
<view class="fb fz36 m-b-24 borderBDas p-b-12">价格明细</view>
|
||||
<view class="flex msb fb m-b-12">
|
||||
<view class="fz28">商品小计</view>
|
||||
<view class="fz36">¥{{total | formatPrice}}</view>
|
||||
</view>
|
||||
<view class="flex msb fz28 m-b-12">
|
||||
<view>外送费</view>
|
||||
<view>¥5.00</view>
|
||||
</view>
|
||||
<view class="flex msb fz28 m-b-24 p-b-24 borderBDas">
|
||||
<view>打包服务费</view>
|
||||
<view>¥2.00</view>
|
||||
</view>
|
||||
<view class="flex mr mac">
|
||||
<view class="fcb fz24">合计</view>
|
||||
<view class="m-l-12 fz36 fb">¥{{total | formatPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客户备注 -->
|
||||
<textarea class="border" v-model="remark"></textarea>
|
||||
<!-- 提交订单 -->
|
||||
<view class="subBox flex mr mac">
|
||||
<view class="m-r-24 fb">
|
||||
<text class="fz24">合计：</text>
|
||||
<text class="fz44">¥{{total | formatPrice}}</text>
|
||||
<view class="flex msb m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow backBox">
|
||||
<view class="fz28">备注</view>
|
||||
<view class="fcb fz28 flex mac">
|
||||
<view class="fz24">口味、偏好等要求</view>
|
||||
<u-icon name="arrow-right" size="28rpx"></u-icon>
|
||||
</view>
|
||||
<view class="fz32 flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
|
||||
</view>
|
||||
<!-- 提交订单 -->
|
||||
<view class="subBox flex mr mu p-t-24 p-b-24">
|
||||
<view class="fz24 fcb m-r-12 l-h-18">
|
||||
合计
|
||||
</view>
|
||||
<view class="flex column m-r-12">
|
||||
<view class="fb fz36">¥{{total | formatPrice}}</view>
|
||||
<view class="fz24">共{{totalCount}}件</view>
|
||||
</view>
|
||||
<view class="fz32 flex column mac mc fci rad8 m-r-24" style="width:220rpx;height:100rpx;"
|
||||
@click="handleCheckout" :class="isPressed?'bg-g':'bg-m'">
|
||||
<view>提交订单</view>
|
||||
<view>Checkout</view>
|
||||
@ -86,7 +114,7 @@
|
||||
return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
|
||||
},
|
||||
//商铺信息
|
||||
shopCon(){
|
||||
shopCon() {
|
||||
return this.$store.state.shopCon
|
||||
},
|
||||
//购物车列表
|
||||
@ -97,6 +125,16 @@
|
||||
total() {
|
||||
return this.totalPrice(this.$store.state.cartList)
|
||||
},
|
||||
//购物车货品总数 ps:sku的总数
|
||||
totalCount() {
|
||||
let total = 0
|
||||
for (let i = 0; i < this.cartList.length; i++) {
|
||||
for (let j = 0; j < this.cartList[i].countG.length; j++) {
|
||||
total += this.cartList[i].countG[j]
|
||||
}
|
||||
}
|
||||
return total
|
||||
},
|
||||
//用户信息
|
||||
userInfo() {
|
||||
return this.$store.state.userInfo
|
||||
@ -107,7 +145,7 @@
|
||||
totalPrice,
|
||||
//提交订单
|
||||
handleCheckout() {
|
||||
if (this.isPressed) {//防止提交订单按钮重复点击
|
||||
if (this.isPressed) { //防止提交订单按钮重复点击
|
||||
return
|
||||
}
|
||||
this.isPressed = true
|
||||
@ -169,13 +207,24 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.subBox {
|
||||
height: 150rpx;
|
||||
height: 122rpx;
|
||||
background-color: $uni-bg-color;
|
||||
z-index: 10076;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
}
|
||||
.siteBox{
|
||||
|
||||
.backBox {
|
||||
margin-bottom: 194rpx;
|
||||
}
|
||||
|
||||
.colorBar {
|
||||
height: 5rpx;
|
||||
background-image: url('/static/colorBar.png');
|
||||
background-size: contain;
|
||||
/* 防止图像重复 */
|
||||
background-position: center;
|
||||
/* 居中显示 */
|
||||
}
|
||||
</style>
|
||||
BIN
static/colorBar.png
Normal file
BIN
static/colorBar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
Loading…
Reference in New Issue
Block a user