用户端商品信息页

<template>
    <view class="info" >
        <!-- 图片跨度布局 -->
        <view class="head">
            <view class="goods_img"> <!-- 商品图片 -->
                <image :src="goods.goods_pic" mode="widthFix"></image>
            </view>
            
            <view class="goods_info_up">  <!-- 商品信息 -->
                <view>商品名称:{{goods.goods_name}}</view>
                
                <view>商品单价:{{goods.goods_price}}</view>
            
                <view>商品描述:{{goods.goods_description}}</view>
                
            </view>
            
            
        </view>
        <view class="box1">
            
        </view>
        <view class="number">
            
            <uni-number-box v-model = "value" :min="0" :max="99"/>
            <button class="bt" size="mini" @click="addcart()">添加购物车</button>
            
        </view>
        <view class="cart">
            
                  <uni-icons type="cart" size="50" @click="navitocart"></uni-icons>
              
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                value:0,
                goodsInfo: {
                    'goods_id': '0'
                },
                goods:[],
                data:{
                    'userId':'1',
                    'goods_id':'0',
                    'goods_number':0,
                    'goods_price':0
                }
            }
        },
        methods:{
            navitocart(){
                uni.navigateTo({
                    url:''//跳转购物车
                });
            },
            addcart(){
                this.data.goods_number=this.value;
                this.data.goods_price=this.goods.goods_price;
                uni.request({
                    url:'http://182.92.224.165:8081/supplier/querySupplierById',
                    method:'POST',
                    data: JSON.stringify(data),
                    success: res => {
                        console.log(res);
                    }
                    })
            },
            getOutInfo(){//这里和主页一样,从后台拿数据动态加载到界面上
                        return new Promise((resolve, reject) => {
                            uni.request({
                                url : 'http://182.92.224.165:8081/goods/getGoodsBySupplierId',
                                method : 'POST',
                                data :JSON.stringify(goodsInfo),
                                success: (res) => {
                                    console.log(res.data)
                                    
                                    this.goods=res.data.description
                                    
                                    
                                    
                                    resolve('suc');  // 千万别忘写!!!
                                },
                                fail:(err)=>{
                                    reject('err')
                                }
                            })
                        })
                    },
                async mountDealCount(){
                        await this.getOutInfo()
                        console.log('我在数据获取之后执行')
                    }
            },
        beforeMount(){
                    this.mountDealCount()
                },
        onLoad(options){
            this.goodsInfo.goods_id=options.goods_id;
            this.data.goods_id=options.goods_id;
            this.getOutInfo();
        }
    }
</script>

<style lang="scss">
    .info {
        .head {
            .goods_img {
                image {
                    width: 690rpx;
                    padding: 30rpx;
                }
            }
            
            .goods_info_up {
                padding: 0 30rpx;
                view {
                    font-size: 40rpx;
                    line-height: 70rpx;
                }
            }
        }
        .box1{
            height:100rpx;
        }
        .number{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        .bt{
            
        }
        }
        .cart{
            float: right;
        }
    }
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值