解决黑马苍穹外卖订单详情页面缺少配送地址(address)、订单备注(remark)的问题,以及如何隐藏顾客名字和电话号码

测试订单详情时发现页面缺失了配送地址和订单备注,顾客名字和电话号码也没有隐藏,我们依次来解决他们

添加配送地址

首先没有显示配送地址的原因是用户下单功能没有将配送地址添加到数据库中,而查看订单详情却要求显示配送地址,导致小程序获取到的数据为null,添加如下代码解决:

首先在OrderServiceImpl中定义私有方法获取订单配送地址

//获取订单配送地址
private String getAddrass(Long addressBookId){
    AddressBook addressBook = addressBookMapper.getById(addressBookId);
    String address = addressBook.getProvinceName() + addressBook.getCityName() +         
                     addressBook.getDistrictName() + addressBook.getDetail();
    return address;
}

然后在查询订单详情方法(即details方法)中调用该方法并给订单对象的配送地址属性赋值

//设置配送地址
Long addressBookId = orders.getAddressBookId();
String addrass = getAddrass(addressBookId);
orders.setAddress(addrass);

成功解决

添加订单备注

首先这个问题是因为小程序代码缺失造成的,打开小程序源码以下文件

ctrl+f搜索餐具,在支付方式和餐具数量中间添加如下代码

<view class="data-v-54d3589c"><view class="data-v-54d3589c">订单备注</view>
<view class="data-v-54d3589c">{{orderDetailsData.remark}}</view></view>

再次运行程序成功解决

隐藏顾客名字和电话号码中间四位

这个我用了最笨的方法:用substring方法截取字符串

在OrderServiceImpl中定义两个私有方法

//隐藏顾客名字
private String toHiddenConsignee(String consignee){
    String name = consignee.substring(0,1) + "**";
    return name;
}

//隐藏电话号码中间四位
private String toHiddenPhone(String phone){
    String p = phone.substring(0, 3) + "****" + phone.substring(7);
    return p;
}

details方法中调用

//隐藏用户隐私
orders.setConsignee(toHiddenConsignee(orders.getConsignee()));
orders.setPhone(toHiddenPhone(orders.getPhone()));

成功解决

  • 8
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在UniApp中,你可以通过编写一个表单页面来实现输入收货人、收货电话、收货地址、型号和备注的功能。以下是一个简单的示例: 1. 在pages目录下创建一个新的页面,例如OrderForm.vue。 2. 在OrderForm.vue中,编写如下代码: ```html <template> <view class="container"> <view class="form-item"> <text>收货人:</text> <input v-model="receiver" placeholder="请输入收货人姓名"></input> </view> <view class="form-item"> <text>收货电话:</text> <input v-model="phone" placeholder="请输入收货人电话"></input> </view> <view class="form-item"> <text>收货地址:</text> <input v-model="address" placeholder="请输入收货地址"></input> </view> <view class="form-item"> <text>型号:</text> <input v-model="model" placeholder="请输入产品型号"></input> </view> <view class="form-item"> <text>备注:</text> <textarea v-model="remark" placeholder="请输入备注信息"></textarea> </view> <button @click="submitForm">提交</button> </view> </template> <script> export default { data() { return { receiver: '', phone: '', address: '', model: '', remark: '' }; }, methods: { submitForm() { // 在这里可以将表单数据提交到后端或进行其他操作 console.log('提交表单'); } } }; </script> <style> .container { padding: 20px; } .form-item { margin-bottom: 10px; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; } </style> ``` 3. 在需要使用该表单的页面中,使用uni-app提供的导航组件跳转到OrderForm页面。 以上代码实现了一个简单的表单页面,用户可以在页面中输入收货人、收货电话、收货地址、型号和备注信息,并点击提交按钮进行表单提交。你可以根据自己的需求进行样式和功能的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值