You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
quzhou/components/GoodsAttr/GoodsAttr.vue

129 lines
2.6 KiB

<template>
<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
<view class="cu-dialog">
<view class="goods-data">
<view class="thumb">
<image src="/static/image/x.png" mode="aspectFill"></image>
</view>
<view class="item">
<view class="title">
<text></text>
</view>
<view class="price">
<text class="min"></text>
<text class="max">99</text>
<text class="min">.00</text>
</view>
<view class="inventory">
<text>库存1</text>
</view>
</view>
</view>
<view class="attr-size">
<view class="attr-number" @click.stop="onStop">
<view class="tit">数量</view>
<view class="number">
<text class="iconfont icon-jian"></text>
<input type="tel" value="1" maxlength="8">
<text class="iconfont icon-jia"></text>
</view>
</view>
</view>
<view class="attr-btn">
<view class="add-cart" v-if="BuyType === 1" @click="onConfirm(BuyType)">加入购物车</view>
<view class="add-buy" v-if="BuyType === 1" @click="onConfirm(BuyType)">立即购买</view>
<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false,
AttrIndex: 0,
SizeIndex: 0,
AttrSizeList:[
{
index: 0,
attr: '颜色',
SizeList: [
{
index: 0,
size: '白色'
},{
index: 1,
size: '黑色'
},{
index: 2,
size: '粉丝'
},{
index: 3,
size: '灰色'
},
],
},{
index: 0,
attr: '尺码',
SizeList: [
{
index: 0,
size: 'M尺码'
},{
index: 1,
size: 'L尺码'
},{
index: 2,
size: 'XL尺码'
},{
index: 3,
size: 'XXL尺码'
},
],
}
],
// 购买类型
BuyType: 0,
};
},
methods:{
/**
* 显示
* @param {Number} type 1 点击选择 2 加入购物 3 立即购买
*/
show(type){
this.BuyType = type;
this.isShow = true;
},
hide(){
this.isShow = false;
},
onStop(){
},
/**
* 属性选择点击
*/
onAttrSize(item,value,index,idx){
this.AttrSizeList[index].index = idx;
this.AttrIndex = item.index;
this.SizeIndex = value.index;
},
/**
* 确认点击
*/
onConfirm(type){
// uni.navigateTo({
// url: '/pages/ConfirmOrder/ConfirmOrder'
// })
}
}
}
</script>
<style scoped lang="scss">
@import 'GoodsAttr.scss';
</style>