YXGJ/store/orderForm/insert.vue

<template>
    <view>
        <navigator url="/store/deliveryAddress/index?title=选择地址" @click="toSelect" class="address-box"
            hover-class="navigator-hover">
            <view class="empty" v-if="address.contactsid == 0">
                请选择收货地址
            </view>
            <view class="contacts" v-else>
                <view class="label">
                    <text class="iconfont icon-dizhi-hui" />
                    <text style="margin-right: 10px;">
                        {{ address.name }}
                    </text>
                    <text>
                        {{ address.phonenumber }}
                    </text>
                </view>
                <view class="address">
                    {{ getCity(address) }}
                </view>
            </view>
            <view class="iconfont icon-a-wodetiaozhuan" />
        </navigator>

        <view class="product">
            <u--image :src="product.cover" width="86" height="80" radius="8">
                <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon>
                </template>
            </u--image>
            <view class="content">
                <view class="title u-line-1">{{ product.name }}</view>

                <view class="price-box">
                    {{ product.pricetype == '一口价' ? '价格' : '定金' }}
                    <text style="color: #E3041F;margin-left: 4px;">
                        ￥
                    </text>
                    <text class="price">
                        {{ CNY(product.pricetype == '一口价' ? product.price : product.price_deposit, '') }}
                    </text>
                    <text style="color: #E3041F;margin-left: 4px;">
                        元
                    </text>
                </view>
            </view>
        </view>
        <storeInfo ref="storeInfo" marTop="10" />
        <view class="address-box" hover-class="navigator-hover">
            <view class="empty">
                小计
            </view>
            <view class="price">
                {{ CNY(product.pricetype == '一口价' ? product.price : product.price_deposit) }}
            </view>
        </view>

        <view class="footer">
            <view class="content">
                <view class="price-box">
                    总计:
                    <view class="price">
                        {{ CNY(product.pricetype == '一口价' ? product.price : product.price_deposit) }}
                    </view>
                </view>
                <view class="submit" :class="address.contactsid == 0 || loading ? 'forbidden' : ''"
                    hover-class="navigator-hover" @click="address.contactsid == 0 || loading ? '' : submit()">
                    <u-loading-icon v-if="loading" />
                    <block v-else>
                        支付
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            address: {
                contactsid: 0
            },
            product: {},
            loading: false
        }
    },
    onLoad(options) {
        if (options.data) {
            let data = JSON.parse(options.data)
            console.log(data)
            this.product = data;
        }
        this.getDefault()
    },
    methods: {
        getDefault() {
            this.$Http.basic({
                "id": 20240506103702,
                "content": {
                    "where": {
                        isdefault: 1
                    }
                },
            }).then(res => {
                console.log("获取默认地址", res)
                if (this.cutoff(res.msg)) return;
                if (res.data.length) this.address = res.data[0];
            })
        },
        submit() {
            this.loading = true;
            let store = this.$refs.storeInfo.detail;
            console.log(this.address)
            this.$Http.basic({
                "id": 20240429152502,
                "content": {
                    "sa_custorderid": 0,
                    "items": [
                        {
                            "sa_fadid": this.product.sa_fadid,
                            "qty": 1
                        }
                    ],
                    "rec_contactsid": this.address.contactsid,
                    "sys_enterpriseid": store.sys_enterpriseid,
                    "sa_storeid": store.sa_storeid,
                    "remarks": ""
                },
            }).then(res => {
                this.loading = false;
                console.log("创建订单", res)
                if (this.cutoff(res.msg)) return;
            })
        },
        toSelect() {
            this.$Http.selectAddress = function (address) {
                this.address = address;
                uni.navigateBack();
                delete this.$Http.selectAddress
            }.bind(this)
        }
    },
}
</script>

<style lang="scss" scoped>
.address-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    width: 100vw;
    height: 64px;
    background: #FFFFFF;
    padding: 0 10px;
    box-sizing: border-box;

    .empty {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .price {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 16px;
        color: #E3041F;
    }

    .contacts {
        .label {

            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #000000;

            .iconfont {
                font-size: 12px;
                color: #333333;
                margin-right: 5px;
            }
        }

        .address {
            line-height: 17px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #666666;
            margin-top: 7px;
        }
    }

}

.product {
    display: flex;
    width: 100vw;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;

    .content {
        margin-left: 20px;
        flex: 1;
        height: 100%;

        .title {
            line-height: 24px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-top: 10px;
        }

        .price-box {
            margin-top: 10px;
            font-size: 12px;
            color: #333333;

            .price {
                color: #E3041F;
                font-size: 18px;
                font-weight: bold;
            }
        }


    }

}

.footer {
    position: fixed;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    bottom: 0;
    left: 0;
    padding: 10px;
    padding-top: 5px;
    box-sizing: border-box;

    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        width: 100%;

        .price-box {
            display: flex;
            font-size: 14px;
            color: #333333;

            .price {
                color: #E3041F;
                font-size: 16px;
                font-weight: bold;
            }
        }

        .submit {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 45px;
            background: #C30D23;
            border-radius: 5px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #FFFFFF;
        }
    }

}

.forbidden {
    opacity: .6;
}
</style>