day09-确认订单&订单列表&发布

确认订单

添加收货地址

利用 vant提供的 button组件来实现

页面布局

<view>
    <view class="chooseAddressBox">
        <van-button type="primary" size="small">+ 选择收货地址</van-button>
    </view>
    <!-- 分割线 -->
    <image src="/assets/order/cart_border@2x.png" class="split_line"/>
</view>

样式

.chooseAddressBox{
    text-align: center;
    padding: 60rpx 0;
}
.split_line{
    display: block;
    width: 100%;
    height: 7rpx;
}

点击收货地址按钮的时候应该跳转到收获地址接口

methods = {
   
    async chooseAddress() {
   
        // 调用api
        let res = await wepy.chooseAddress().catch(err => err)
        console.log(res);
        // 判断是否返回正确的地址
        if (res.errMsg != 'chooseAddress:ok') return;

        this.addressInfo = res;
        // 存储在缓存中
        wepy.setStorageSync('address', res);
        this.$apply()
    }
}

根据 data 里面的 addressInfo 数据来判断显示按钮还是收货人信息

<view>
    <view class="chooseAddressBox" wx:if="{
    {addressInfo === null || addressInfo == ''}}">
        <van-button type="primary" size="small" @tap="chooseAddress">+ 选择收货地址</van-button>
    </view>

    <view class="addressInfo" wx:else>收货人信息</view>
    <!-- 分割线 -->
    <image src="/assets/order/cart_border@2x.png" class="split_line"/>
</view>

收货人信息布局

<view class="addressInfo" wx:else>
    <!-- 收货人，联系电话 -->
    <view class="box1">
        <text>收货人：{
  {addressInfo.userName}}</text>
        <view @tap="chooseAddress">
            <text>联系电话：{
  {addressInfo.telNumber}}</text>
            <van-icon name="arrow" />
        </view>
    </view>
    <!-- 收货地址 -->
    <view class="box2">收货地址：{
  {addressStr}}</view>
</view>

样式属性

.addressInfo {
    font-size: 26rpx;
    padding: 0 10rpx;
    .box1 {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
    }
    .box2 {
        padding-bottom: 30rpx;
    }
}

需要得到收货地址的信息

methods = {
   
    async chooseAddress() {
   
        ...
        this.addressStr = this.addressInfo.provinceName