2***@qq.com
2***@qq.com
  • 发布:2019-04-16 10:14
  • 更新:2019-04-16 10:14
  • 阅读:9378

求助,uni-app按钮点击没反应

分类:uni-app

<template>
<!--orderinfo{{cartIds}}{{amount}}-->

<view class="parent">  
    <view class="view-address">  
        <view class="view-addressleft">  
            <image src="/images/white_loc.png"></image>  
            <view class="view-addressleft-info">  
                <text class="text-name">收货人:{{ address.consignee }}</text>  
                <text class="text-address">收货地址:{{ address.address }}</text>  
            </view>  
        </view>  

        <view class="view-addressright">  
            <text class="text-mobile">{{ address.mobile }}</text>  
            <image src="/images/white_hint.png"></image>  
        </view>  
    </view>  

    <view v-for="(item,index) in cartList" :key="index"  class="container carts-list">  
        <view v-if="item.show == 1" class="view-title">  
            <image src="/images/icon_order.png"></image>  
            <text>供应商:{{ item.store_name }}</text>  
        </view>  

        <view v-if="item.show == 1" class="class-line"></view>  
        <view class="carts-item">  
            <view>  
                <!-- 缩略图 -->  
                <image class="carts-image" src="{{item.image}}" mode="aspectFill" />  
            </view>  
            <view class="carts-text">  
                <!-- 商品标题 -->  
                <text class="carts-title">{{ item.goods_name }}</text>  
                <text class="carts-key-name">{{ item.spec_key_name }}</text>  
                <view class="carts-subtitle">  
                    <!-- 价格 -->  

                    <!--<text class="carts-price">{{item.goods_price}}</text>  

-->

                    <!-- 数量加减 -->  
                </view>  
            </view>  
            <view class="carts-right">  
                <text class="text-red">¥{{ item.member_goods_price }}</text>  
                <text class="text-price">x{{ item.goods_num }}</text>  
            </view>  
        </view>  
    </view>  

    <view class="class-line1"></view>  

    <view class="view-freemoney">  
        <!--  

<text class="text-hint">优 惠 劵:</text>

<input bindchange="bindChange" placeholder-style="color:#999999" class="input-money" placeholder="输入余额"/>
-->

        <radio color="red" class="radio-style" value="0" checked="{{check[0]}}" />  

        <picker  value="{{index}}" range="{{coupon}}">  
            <view class="view-picker">{{ cv }}</view>  
        </picker>  

        <text class="text-hint">或者</text>  

        <radio color="red" class="radio-style" value="1" checked="{{check[1]}}" />  
        <input placeholder-style="color:#999999"  class="input-money" placeholder="直接输入优惠劵" style="width:200rpx" />  
    </view>  

    <view class="view-freemoney">  
        <text class="text-hint">使用余额:</text>  

        <input placeholder-style="color:#999999"  class="input-money" placeholder="输入余额" />  
        <text class="btn-use" >使用</text>  
        <text class="text-hint1">您的可用余额{{ freemoney }}</text>  
    </view>  

    <view class="view-freemoney">  
        <text class="text-hint">使用积分:</text>  

        <input placeholder-style="color:#999999"  class="input-money" placeholder="输入积分" />  
        <text class="btn-use">使用</text>  
        <text class="text-hint1">您的可用积分{{ pay_points }}</text>  
    </view>  

    <view class="class-line1"></view>  

    <view class="view-price">  
        <view class="view-price1">  
            <text class="text-price1">商品总额:</text>  
            <text class="text-red">¥{{ totalPrice.total_fee }}元</text>  
        </view>  
        <view hidden class="view-price1">  
            <text class="text-price1">邮费:</text>  
            <text class="text-red">¥20元</text>  
        </view>  

        <view class="view-price1">  
            <text class="text-price1">应付总金额:</text>  
            <text class="text-red">¥{{ totalPrice.total_fee }}元</text>  
        </view>  
    </view>  

    <view class="text-save" @longtap="longtap">提交订单</view>  
</view>  

</template>
<script>
export default {
methods:{
clickTest: function(e){
console.log(e);
console.log('click');
},
longtap: function(e){
console.log(e);
console.log('longtap');
}
}
}
</script>
<style lang="scss">
/ pages/order/ordersubmit/index.wxss /

.view-address {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 150rpx;
background: #3aa0b7;
}
.view-addressleft {
display: flex;
flex-direction: row;
padding: 20rpx 0 0 3;
justify-content: flex-start;
align-items: center;
width: 450rpx;
}

.view-addressleft image {
width: 50rpx;
height: 50rpx;
}

.view-addressleft-info {
display: flex;
flex-direction: column;
margin-left: 10rpx;
justify-content: space-around;
align-items: flex-start;
height: 85rpx;
}
.text-name {
font-size: 29rpx;
color: #ffffff;
}
.text-address {
font-size: 29rpx;
color: #ffffff;
}
.view-addressright {
height: 50rpx;
margin-right: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
}

.text-mobile {
font-size: 29rpx;
color: #ffffff;
}

.view-addressright image {
width: 30rpx;
height: 30rpx;
margin-left: 15rpx;
}

.view-title {
display: flex;
flex-direction: row;
height: 75rpx;

align-items: center;  

}

.view-title image {
width: 50rpx;
height: 50rpx;
}

.view-title text {
font-size: 29rpx;
color: black;
}

.class-line {
width: 670rpx;
margin-left: 0rpx;
height: 2rpx;
background: #f4f4f4;
}

/外部容器/
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}

/整体列表/
.carts-list {
display: flex;
flex-direction: column;
padding: 0 40rpx;
}

/每行单元格/
.carts-item {
display: flex;
flex-direction: row;
height: 150rpx;
/width属性解决标题文字太短而缩略图偏移/
width: 100%;
border-bottom: 1px solid #eee;
padding: 30rpx 0;

justify-content: space-between;  

}

/左部图片/
.carts-image {
width: 130rpx;
height: 150rpx;
border-width: 3rpx;

border-style: solid;  
border-color: #ccc;  

}

/右部描述/
.carts-text {
margin-left: 10rpx;
width: 370rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.carts-right {
height: 100%;
width: 110rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/右上部分标题/
.carts-title {
font-size: 27rpx;
color: #444;
line-height: 38rpx;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.carts-key-name {
margin-top: 10rpx;
font-size: 27rpx;
color: #999999;
}
/右下部分价格与数量/
.carts-subtitle {
font-size: 25rpx;
color: darkgray;
padding: 0 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}

/价格/
.carts-price {
color: #f60;
font-size: 14px;
line-height: 22px;
margin-top: 12rpx;
}

/商品加减按钮/
/stepper容器/
.stepper {
border: 1px solid #ccc;
border-radius: 3px;
width: 80px;
height: 26px;
margin: 0 auto;
}

/加号与减号/
.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
}

/数值/
.stepper input {
color: black;
float: left;
margin: 0 auto;
width: 40px;
height: 26px;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

/普通样式/
.stepper .normal {
color: black;
}

/禁用样式/
.stepper .disabled {
color: #ccc;
}

/复选框样式/
.carts-list icon {
margin-top: 60rpx;
margin-right: 20rpx;
}

/底部按钮/
.carts-footer {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
border-top: 1px solid #eee;
background: white;
}

/复选框/
.carts-footer icon {
margin-left: 20rpx;
margin-top: 20rpx;
}

/全选字样/
.carts-footer text {
font-size: 30rpx;
margin-left: 8rpx;
line-height: 10rpx;
}

/立即结算按钮/
.carts-footer .button {
line-height: 80rpx;
text-align: center;
width: 220rpx;
height: 80rpx;
background-color: #f60;
color: white;
font-size: 36rpx;
border-radius: 0;
border: 0;
}
.carts-footer-left {
display: flex;
flex-direction: row;
align-items: center;
}

.carts-footer-left text {
margin-top: 20rpx;
}

.text-price {
font-size: 32rpx;
color: #999999;
}
.text-red {
font-size: 32rpx;
color: orangered;
}
.image-delete {
width: 50rpx;
height: 60rpx;
}

.class-line1 {
width: 750rpx;

height: 20rpx;  
background: #f4f4f4;  

}

.view-price {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}

.view-price1 {
margin-top: 30rpx;
margin-right: 20rpx;

display: flex;  
flex-direction: row;  
justify-content: flex-end;  
align-items: center;  

}

.text-price1 {
font-size: 29rpx;
color: grey;
}

.text-save {
width: 680rpx;
align-self: center;
font-size: 32rpx;
margin-top: 30rpx;
color: #ffffff;
text-align: center;
height: 70rpx;
border-radius: 9rpx;
background: orange;
line-height: 70rpx;
margin-bottom: 40rpx;
}

.parent {
display: flex;
flex-direction: column;
width: 100%;
}

.view-freemoney {
width: 100%;
height: 100rpx;
background: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #eee;
}

.text-hint {
font-size: 28rpx;
color: #000000;
margin-left: 40rpx;
}

.text-hint1 {
font-size: 28rpx;
color: #000000;
margin-left: 20rpx;
flex-shrink: 0;
flex-grow: 0;
}

.input-money {
font-size: 26rpx;
color: #999999;
margin-left: 6rpx;
border-style: solid;
border-width: 1rpx;
padding-left: 15rpx;
width: 140rpx;
}
.btn-use {
line-height: 55rpx;
background: red;
color: #ffffff;
text-align: center;
font-size: 28rpx;
padding-left: 10rpx;
margin-left: 5rpx;
padding-right: 10rpx;
}
.radio-style {
font-size: 28rpx;
color: red;
margin-left: 40rpx;
}
.text-redhint {
font-size: 28rpx;
color: red;
}
.text-select {
font-size: 28rpx;
color: #999999;
width: 200rpx;

height: 40rpx;  

line-height: 28rpx;  

}
.view-picker {
border-style: solid;
border-color: #999999;
padding-left: 20rpx;
display: flex;
flex: row;
height: 60rpx;
justify-content: flex-start;
align-items: center;
width: 200rpx;
border-width: 1rpx;
font-size: 28rpx;
color: #999999;
}
</style>

0 关注 分享

要回复文章请先登录注册