为什么我这个result 获取不出来?

为什么我这个result 获取不出来?

https://img1.sycdn.imooc.com//climg/63a52585090617ea09360817.jpg

<template>
     <div class="order">
            <div class="order_price">实付金额 ¥{{ calculations.price }}</div>
            <div class="order_btn">提交订单</div>
        </div>
         <div class="mask">
            <div class="mask_content">
                <h3>确认要离开收银台?</h3>
                <p>请尽快完成支付,否则将被取消</p>
                <div class="mask_content_btns">
                    <span @click="handleCancelOrder">取消订单</span>
                    <span @click="handleConfirmOrder">确认支付</span>
                </div>
            </div>
         </div>
    </template>
<script>
import { useRoute,useRouter } from 'vue-router';
import { post } from '../../utils/request';
import { commonCartEffect } from '../../effects/catEffects'
export default {
name: 'Order',
 
setup() {
    const route = useRoute()
    const shopId = route.params.id
    const {  calculations,shopName,productList } = commonCartEffect(shopId)
    const handleCancelOrder = () =>{
        alert('100')
    }
    const handleConfirmOrder =  async () => {
       
        // const products = []
        // for(let i in productList.value){
        //     const product = productList.value[i]
        //     products.push({id:product._id,num:product.count})
        // }
        //  console.log(products);
        //  console.log(productList);
         try {
                const result = await post('/api/order', {
                    addressId:1,
                    shopId,
                    shopName,
                    isCanceled:false,
                    products:{
                       
                    }
                })
                console.log(result);
             
                // if (result?.errno === 0) {
                //     localStorage.isLogin = true;
                //     router.push({ name: 'home' })

                // } else {
                //     changeToast('登陆失败')
                //     console.log('00');
                //     // data.showToast = true;
                //     // data.ToastMessage = '登陆失败'
                // }

            } catch (e) {
                // changeToast('请求失败')
            }

       

    }
   
    return {  calculations,handleCancelOrder,handleConfirmOrder }
}
}

</script>
<style lang="scss" scoped>
    @import '../../style/mixins.scss';
   
    .order {
    display: flex;
    height: 4.9rem;
    line-height: 4.9rem;
    // position: fixed;
    // bottom: 0;
    // left: 0;

    &_price {
        width: 27.7rem
            /* 277/10 */
        ;
        background-color: #FFFFFF;
        padding: 1.4rem 0 1.4rem 2.4rem;
        box-sizing: border-box;
        line-height: 1.8rem
            /* 14/10 */
        ;
        font-size: 1.4rem
            /* 14/10 */
        ;
    }

    &_btn {
        width: 9.8rem;
        background-color: #4FB0F9;
        text-align: center;
        color: #FAFAFA;
        font-size: 1.4rem
            /* 14/10 */
        ;
    }
}
.mask{
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: rgba(0,0,0,0.50);
    display: flex;
    flex-direction: column;
 
    text-align: center;
 
    &_content{
        position: absolute;
        border-radius: 4px;
        width: 30.1rem /* 301/10 */;
        height: 15.7rem /* 157/10 */;
        background-color: #FFFFFF;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 2.4rem /* 24/10 */ 5.2rem /* 90/10 */;
        font-size: 1.4rem;
        h3{
            font-size: 1.8rem /* 18/10 */;
            margin-bottom: .8rem /* 8/10 */;

        }
        p{
            margin-bottom: 2.4rem /* 8/10 */;
            color: #666666;
        }
        &_btns{
            span{
            border: 1px solid #4FB0F9;
            border-radius: 16px;
            display: inline-block;
            padding: .6rem /* 6/10 */ 1.2rem /* 12/10 */;
            }
            span:first-child{
                margin-right: 2.4rem /* 24/10 */;
                color: #0091FF;
            }
           
            span:last-child{
               background-color: #4FB0F9;
               color: #FFFFFF;
            }
           
        }
       
    }
}
   
   
    </style>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小李 2022-12-23 12:08:53

同学你好,代码调整一下如下:

https://img1.sycdn.imooc.com//climg/63a5296c0976e18c07290286.jpg

shopName需要通过打点访问value才能获取到其中的值。如下:

https://img1.sycdn.imooc.com//climg/63a529ce0919934e05260108.jpg

https://img1.sycdn.imooc.com//climg/63a529c009b51e2211060111.jpg

祝学习愉快!

  • 提问者 慕田峪1427181 #1

    为什么需要shopName需要通过打点访问value才能获取到其中的值。我看视频里边就没有,就可以获取到呢

    2022-12-24 10:56:51
  • 好帮手慕星星 回复 提问者 慕田峪1427181 #2

    同学你好,因为shopName是计算属性(ref类型数据),需要通过value来获取值,视频中也加了(9:17秒左右有解释)

    https://img1.sycdn.imooc.com//climg/63a66ffe09783f8d09570302.jpg

    可以再看看视频。

    2022-12-24 11:21:28
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师