【类 型】：feat
【原 因】：补齐之前为写的 提交用户下单备注功能 【过 程】：从数据库拿 下单备注预设列表 + 自定义输入’其他‘的功能 自动检查字数 限制字数等 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
30094ef819
commit
8a27209c84
@ -49,7 +49,7 @@
|
||||
</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="fb fz36 m-b-24 l-h-18 borderBDas">价格明细</view>
|
||||
<view class="flex msb fb m-b-12">
|
||||
<view class="fz28">商品小计</view>
|
||||
<view class="fz36">¥{{total | formatPrice}}</view>
|
||||
@ -68,13 +68,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客户备注 -->
|
||||
<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>
|
||||
<cell cellTit="备注" :cellCon="remarkDescription | truncate(8)" @click="handledrRemarkShow"></cell>
|
||||
<!-- 底部空白占位 -->
|
||||
<view class="extra-space1"></view>
|
||||
<!-- 提交订单 -->
|
||||
<view class="subBox flex mr mu p-t-24 p-b-24">
|
||||
<view class="fz24 fcb m-r-12 l-h-18">
|
||||
@ -84,13 +80,50 @@
|
||||
<view class="fb fz36">¥{{fullPrice | 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 class="fz32 flex column mac mc fci rad8 m-r-24 checkBox" @click="handleCheckout"
|
||||
:class="isPressed?'bg-g':'bg-m'">
|
||||
<view>提交订单</view>
|
||||
<view>Checkout</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客户备注 折叠面板 -->
|
||||
<u-popup :show="remarkShow" round="10" mode="bottom" @close="closeRemark" zIndex="10080">
|
||||
<view class="p-24">
|
||||
<!-- title -->
|
||||
<view class="flex mc md">
|
||||
<view class="fz32">备注</view>
|
||||
</view>
|
||||
<!-- list -->
|
||||
<view class="ofa m-t-12 m-b-12 flex column" style="max-height: 60vh;">
|
||||
<view v-for="(item,index) in remark_presup" :key='index' @click="currentRemark=index"
|
||||
class="flex mac msb fz28 borderBDas m-t-12" style="height: 60rpx;">
|
||||
<view>{{item}}</view>
|
||||
<view class="border rad-c radioBox" :class="currentRemark===index?'border-m bg-m':''">
|
||||
<u-icon name="checkbox-mark" size="40rpx" color="#fff"
|
||||
v-if="currentRemark===index"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex mac msb fz28 m-t-12" style="height: 60rpx;"
|
||||
@click="currentRemark=remark_presup.length+1">
|
||||
<view class="flex mub">
|
||||
<view>其他</view>
|
||||
<view class="fz24 fcb m-l-12" v-if="currentRemark===remark_presup.length+1">{{ remarkValue.length }}/{{ txtmaxlength }}</view>
|
||||
</view>
|
||||
<view class="border rad-c radioBox"
|
||||
:class="currentRemark===remark_presup.length+1?'border-m bg-m':''">
|
||||
<u-icon name="checkbox-mark" size="40rpx" color="#fff"
|
||||
v-if="currentRemark===remark_presup.length+1"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="currentRemark=remark_presup.length+1">
|
||||
<u-input class="border" v-model="remarkValue" type="textarea" placeholder="请填写你的订单备注"
|
||||
:maxlength="txtmaxlength" :border="false" :auto-height="true" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view class="extra-space1"></view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -98,14 +131,19 @@
|
||||
import {
|
||||
calculateTotal,
|
||||
formatPrice,
|
||||
totalPrice
|
||||
totalPrice,
|
||||
truncate
|
||||
} from '@/utils/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isPressed: false, //提交按钮是否锁定
|
||||
remark: '' //用户备注
|
||||
remark: '', //用户备注 提交时候的值
|
||||
remarkShow: false, //用户备注弹出层
|
||||
currentRemark: -1, // 当前选中的备注索引
|
||||
remarkValue: '', // 备注输入的内容
|
||||
txtmaxlength: 30, //备注其他文本框最多字数限制
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -117,6 +155,27 @@
|
||||
shopCon() {
|
||||
return this.$store.state.shopCon
|
||||
},
|
||||
//备注预设列表
|
||||
remark_presup() {
|
||||
if (this.shopCon !== null && this.shopCon.remark_presup !== '[]') {
|
||||
return JSON.parse(this.shopCon.remark_presup)
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
//备注缩略显示
|
||||
remarkDescription() {
|
||||
if (this.currentRemark !== -1) {
|
||||
if (this.currentRemark === this.remark_presup.length + 1) {
|
||||
if (this.remarkValue) {
|
||||
return this.remarkValue
|
||||
}
|
||||
} else {
|
||||
return this.remark_presup[this.currentRemark]
|
||||
}
|
||||
}
|
||||
return '口味、偏好等要求'
|
||||
},
|
||||
//预估送达时间
|
||||
estimated() {
|
||||
return 30
|
||||
@ -157,6 +216,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handledrRemarkShow() {
|
||||
this.remarkShow = true
|
||||
},
|
||||
closeRemark() {
|
||||
this.remarkShow = false
|
||||
},
|
||||
//计算购物车总价
|
||||
totalPrice,
|
||||
//提交订单
|
||||
@ -166,6 +231,13 @@
|
||||
}
|
||||
this.isPressed = true
|
||||
//提交订单
|
||||
if(this.currentRemark!==-1){
|
||||
if(this.currentRemark===this.remark_presup.length+1){
|
||||
this.remark=this.remarkValue
|
||||
}else{
|
||||
this.remark=this.remark_presup[this.currentRemark]
|
||||
}
|
||||
}
|
||||
uni.$u.http.post('/Api/Check/checkout', {
|
||||
cartList: JSON.stringify(this.cartList), //购物车列表
|
||||
shop_id: this.$store.state.shop_id, //商铺id
|
||||
@ -212,6 +284,7 @@
|
||||
filters: {
|
||||
calculateTotal, //计算spu单价
|
||||
formatPrice, //格式化价格
|
||||
truncate //文本截取
|
||||
},
|
||||
onShow() {
|
||||
//购物车没有信息 跳转到订单查询页面
|
||||
@ -234,10 +307,6 @@
|
||||
bottom: 0rpx;
|
||||
}
|
||||
|
||||
.backBox {
|
||||
margin-bottom: 194rpx;
|
||||
}
|
||||
|
||||
.colorBar {
|
||||
height: 5rpx;
|
||||
background-image: url('/static/colorBar.png');
|
||||
@ -246,4 +315,14 @@
|
||||
background-position: center;
|
||||
/* 居中显示 */
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
width: 220rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.radioBox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user