diancan_uni/pages/create-order/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="wrap_nr">
                <!-- 自提订单 展示门店信息 -->
                <view class="address_wrap" v-if="fare_type == 1 && store">
                    <view class="address_l">
                        <view class="address">
                            <view class="address_name">{{ store.title }}</view>
                            <view class="address_text">{{ store.address }}</view>
                        </view>
                        <view class="phone_wrap" v-if="userInfo.phone">
                            <text class="label">预留电话</text>
                            <text>{{ userInfo.phone }}</text>
                        </view>
                    </view>
                    <view class="address_r">
                        <view class="juli">距您{{ store.distance }}km</view>
                        <image class="store_logo" :src="imgUrl + store.thumb"></image>
                    </view>
                </view>
                <!-- 外卖订单 展示收货地址 -->
                <view class="address_wrap takeout" v-if="fare_type == 0 && checkedAddress" @tap="goSelectAddress">
                    <view class="address_l">
                        <view class="address">{{ checkedAddress.area_address + checkedAddress.address }}</view>
                        <view class="phone_wrap">
                            <text class="label">{{ checkedAddress.name }}</text>
                            <text>{{ checkedAddress.phone }}</text>
                        </view>
                    </view>
                    <van-icon name="arrow" />
                </view>
                <!-- 订单信息 -->
                <view class="order_wrap">
                    <view class="order_t">
                        <view class="order_shop">商品详情</view>
                        <view class="order_way">{{ fare_type == 1 ? '自提订单' : '外卖' }}</view>
                    </view>
                    <image class="border_line" src="/static/statics/img/line_tu.png"></image>
                    <view class="border_out">
                        <view class="order_goods">
                            <view class="goods_item" v-for="(item, index) in cartGoods" :key="index">
                                <view class="goods_item_l">
                                    <image class="goods_tu" :src="imgUrl + item.good_thumb"></image>
                                    <view class="goods_info">
                                        <view class="goods_title">
                                            <text class="add_tag">加购商品</text>
                                            {{ item.good_title }}
                                        </view>
                                        <view class="goods_labels" v-if="item.good_specs_title">
                                            <view class="label">{{ item.good_specs_title }}</view>
                                            <!-- <view class="label">甜辣</view>
									<view class="label">鸭翅</view> -->
                                        </view>
                                    </view>
                                </view>

                                <view class="goods_item_r">
                                    <view class="goods_price" v-if="!item.add_good_rule_id">
                                        <text class="unit">¥</text>
                                        {{ is_member ? item.member_price : item.price }}
                                    </view>
                                    <view class="goods_price" v-if="item.add_good_rule_id">
                                        <text class="unit">¥</text>
                                        {{ item.add_price }}
                                    </view>
                                    <view class="goods_num">x{{ item.nums }}</view>
                                </view>
                            </view>
                        </view>
                        <!-- 外卖单才有配送费 -->
                        <view class="delivery" v-if="fare_type == 0">
                            <view class="delivery_l">配送费</view>
                            <view class="delivery_r">
                                <text class="unit">¥</text>
                                {{ transprotFare }}
                            </view>
                        </view>
                        <view class="heji_price">
                            <!-- <text class="heji_item">已优惠<text class="price"><text class="unit">¥</text>10</text></text> -->
                            <!-- {{ is_member ? totalMemberPrice : totalPrice }} -->
                            <text class="heji_item total">
                                小计
                                <text class="price">
                                    <text class="unit">¥</text>
                                    {{ totalPrice }}
                                </text>
                            </text>
                        </view>
                    </view>
                </view>
                <view class="remark">
                    <view class="remark_t">备注</view>
                    <view class="remark_nr">
                        <van-field :value="user_mark" placeholder="口味、偏好等要求" :border="false" type="textarea" :maxlength="50" show-word-limit @input="getUserMark" />
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="total_price">
                <text class="price">
                    <text class="unit">¥</text>
                    {{ totalPrice }}
                </text>
            </view>
            <view class="btn_tijiao" @tap="goCreateOrder">提交订单</view>
        </view>
    </view>
</template>

<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            fare_type: 1,

            // 0外卖 1自提   默认自提
            transprotFare: 0,

            // 配送费
            userInfo: null,

            forbidden: null,

            // 1不允许下单
            store: null,

            // 是否为会员
            is_member: 0,

            checkedAddress: {
                area_address: '',
                address: '',
                name: '',
                phone: ''
            },

            cartGoods: '',
            totalPrice: '',
            totalNums: '',
            user_mark: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            userInfo: getApp().globalData.userInfo
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.setData({
            is_member: getApp().globalData.is_member
        }); // 清掉备注

        uni.removeStorageSync('user_mark'); // 店铺

        if (uni.getStorageSync('store')) {
            that.setData({
                store: JSON.parse(uni.getStorageSync('store'))
            });
        }

        that.getCreatelist();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取购物车商品及配送费
        getCreatelist() {
            let that = this;
            let params = {}; // 获取配送方式

            if (uni.getStorageSync('fare_type')) {
                let fare_type = uni.getStorageSync('fare_type');
                params.fare_type = fare_type;
                that.setData({
                    fare_type: fare_type
                });
            } // 获取收货地址

            if (that.fare_type != 1) {
                if (uni.getStorageSync('checkedAddress')) {
                    let checkedAddress = JSON.parse(uni.getStorageSync('checkedAddress'));
                    that.setData({
                        checkedAddress: checkedAddress
                    });
                    params.address_id = checkedAddress.id;
                }
            } // console.log('params',params);

            myPro
                .wxRequest('user/v3/order/createlist', 'GET', params)
                .then((res) => {
                    that.setData({
                        cartGoods: res.result.cartsList,
                        transprotFare: res.result.orderInfo.delivery_fee,
                        totalPrice: res.result.orderInfo.pay_price
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 获取购物车商品
        getCartsList() {
            let that = this;
            let params = {};
            myPro
                .wxRequest('user/v3/carts/list', 'GET', params)
                .then((res) => {
                    // 已加购商品
                    let list = res.result.list;
                    that.setData({
                        cartGoods: list,
                        totalPrice: res.result.money,
                        totalNums: res.result.total_num
                    }); // 计算价格和数量

                    that.computedGoods();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 计算运费(店铺与收获地址的距离)
        getTransportFare() {
            let that = this;
            let params = {
                lat: that.checkedAddress.lat,
                lng: that.checkedAddress.lnt,
                // lnt没写错
                store_id: that.store.id
            };
            uni.request({
                method: 'GET',
                url: getApp().globalData.api + 'api/common/store/distance',
                data: params,
                success: function (res) {
                    let data = res.data;

                    if (data.code == 200) {
                        that.setData({
                            forbidden: null,
                            transprotFare: data.result.delivery_fee
                        }); // 计算总费用

                        that.computedGoods();
                    } else if (data.code == 400) {
                        // 约定400 为超出配送范围
                        uni.showToast({
                            title: data.msg,
                            icon: 'none'
                        });
                        that.setData({
                            transprotFare: data.result.delivery_fee
                        }); // 计算总费用 但不允许下单

                        that.computedGoods();
                        that.setData({
                            forbidden: 1
                        });
                    } else {
                        uni.showToast({
                            title: data.msg,
                            icon: 'none'
                        });
                    }
                },
                fail: function (res) {
                    console.log('报错', res);
                }
            });
        },

        // 计算费用
        computedGoods() {
            let that = this; // 商品的总计数量和总价后台直接返回,但配送费得算上

            let totalPrice = that.totalPrice; // 加上配送费

            if (that.transprotFare) {
                // console.log('配送费',that.data.transprotFare)
                totalPrice += parseFloat(that.transprotFare); // 返回的可能是字符串
            }

            that.setData({
                totalPrice: totalPrice
            });
        },

        // 输入的备注信息
        getUserMark(event) {
            // console.log(event.detail);
            let that = this;
            uni.setStorage({
                key: 'user_mark',
                data: event.detail
            });
        },

        // 进创建订单页
        goCreateOrder(event) {
            let that = this;

            if (that.forbidden) {
                uni.showToast({
                    title: '超出配送范围,请更换地址',
                    icon: 'none'
                });
            } else {
                let url = '';

                if (that.fare_type == 0) {
                    url = '/pages/pay-order/index?fare_type=' + that.fare_type + '&address_id=' + that.checkedAddress.id;
                } else {
                    url = '/pages/pay-order/index?fare_type=' + that.fare_type;
                }

                uni.redirectTo({
                    url: url
                });
            }
        },

        // 更改配送地址
        goSelectAddress() {
            let that = this;
            uni.navigateTo({
                url: '/pages/user/address/list/index?is_back=1'
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
    padding-bottom: 100rpx;
}
.wrap_nr {
    padding: 20rpx 30rpx 100rpx;
}
.address_wrap {
    width: 690rpx;
    padding: 30rpx 30rpx 50rpx;
    background: #ffffff;
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #0c0c0c;
    position: relative;
}
.address_wrap .address_l {
    /* width: 476rpx; */
    flex: 1;
}
.address_l .address_text {
    font-size: 26rpx;
    color: #666666;
    padding-top: 10rpx;
}
.phone_wrap {
    display: flex;
    align-items: center;
    padding-top: 24rpx;
}
.takeout .phone_wrap {
    color: #666666;
}
.phone_wrap .label {
    padding-right: 10rpx;
}
.phone_wrap .icon_edit {
    /* width: 23rpx;
	height: 23rpx; */
    margin-left: 15rpx;
}
.address_wrap .address_r {
    /* flex: 1; */
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.address_r .juli {
    font-size: 24rpx;
    color: #666666;
    padding: 4rpx 10rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 14rpx;
    position: relative;
}
.address_r .juli::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -22rpx;
    left: 50%;
    width: 0rpx;
    height: 0rpx;
    border: 12rpx solid transparent;
    border-top: 12rpx solid #ffffff;
}
.address_r .store_logo {
    width: 60rpx;
    height: 60rpx;
    margin-top: 20rpx;
}
.address_wrap .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 690rpx;
    height: 20rpx;
    border-radius: 0 0 5rpx 5rpx;
    background-repeat: repeat-x;
    background-size: 18rpx 30rpx;
}
/* 订单商品 */
.order_wrap {
    width: 690rpx;
    /* padding: 0 30rpx; */
    margin: 20rpx auto 0;
    /* background: #FFFFFF; */
    border-radius: 5rpx;
}
.order_wrap .order_t {
    padding: 30rpx;
    font-size: 30rpx;
    color: #080808;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.order_wrap .border_line {
    width: 690rpx;
    height: 30rpx;
    display: block;
}
.order_wrap .order_t .order_shop {
    width: 500rpx;
}
.order_wrap .order_t .order_way {
    padding: 5rpx 10rpx;
    background: #295c56;
    border-radius: 5rpx;
    font-size: 22rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.order_wrap .border_out {
    padding: 0 30rpx;
    background: #ffffff;
}
.order_wrap .delivery {
    padding: 0 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx dashed rgba(0, 0, 0, 0.12);
    font-size: 30rpx;
    color: #000000;
}
.order_wrap .delivery .delivery_r {
    font-size: 34rpx;
    color: #080808;
}
.order_wrap .delivery .delivery_r .unit {
    font-size: 22rpx;
}
.order_wrap .heji_price {
    padding: 40rpx 0 30rpx;
    text-align: right;
    font-size: 26rpx;
    color: #000000;
}
.order_wrap .heji_price .price {
    font-size: 28rpx;
    color: #333333;
    padding-left: 16rpx;
    font-weight: bold;
}
.order_wrap .heji_price .price .unit {
    font-size: 22rpx;
}
.order_wrap .heji_item.total {
    padding-left: 28rpx;
}
.order_wrap .heji_item.total .price {
    font-size: 40rpx;
}
/* 备注 */
.remark {
    margin: 20rpx auto;
    width: 690rpx;
    padding-bottom: 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.remark .remark_t {
    font-size: 28rpx;
    color: #000000;
    padding: 20rpx 30rpx;
}
.remark .remark_nr {
    width: 634rpx;
    margin: 20rpx auto 0;
    /* background: #FAFAFA;
	border-radius: 10rpx; */
}
.remark .remark_nr .van-cell {
    width: 634rpx;
    /* height: 198rpx; */
    background: #fafafa;
    border-radius: 10rpx;
}
/* .remark .remark_nr .van-field__control{
	height: 110rpx !important;
} */
/* 创建订单 */
.bottom {
    width: 690rpx;
    height: 98rpx;
    padding: 0 30rpx;
    border-radius: 49rpx;
    background: #295c56;
    position: fixed;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    color: #ffffff;
}
.bottom .total_price {
    font-size: 26rpx;
    /* color: #FFFFFF; */
}
.bottom .total_price .price {
    padding-left: 14rpx;
    /* color: #333333; */
    font-size: 40rpx;
    font-weight: bold;
}
.bottom .total_price .price .unit {
    font-size: 22rpx;
}
.bottom .btn_tijiao {
    width: 197rpx;
    height: 100rpx;
    /* background: #D54C43; */
    font-size: 32rpx;
    font-weight: bold;
    /* color: #333333; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: 30rpx; */
}
/* 加购标志 */
.add_tag {
    font-size: 24rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #ff6637, #ff954e);
    border-radius: 5rpx;
    padding: 6rpx 8rpx;
    margin-right: 12rpx;
}
</style>