商品规格选择js
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><title>规格</title><link rel="stylesheet" href="../../css/aui.css" /><link rel="stylesheet" href="../../css/common.css" /><link rel="stylesheet" href="../../css/global.css" /><link rel="stylesheet" type="text/css" href="../../css/animate.css" />
</head>
<style>.aui-content {position: fixed;bottom: 0;left: 0;width: 100%;overflow: hidden;border-radius: 0.5rem 0.5rem 0 0;}.close {position: absolute;top: 0.75rem;right: 0.75rem;z-index: 99;}.close img {width: 0.8rem;}.shop-pic {width: 4rem;height: 4rem;border-radius: 0.15rem;overflow: hidden;}.shop-pic img {width: 100%;height: 100%;object-fit: cover;}input::-webkit-input-placeholder {color: #666;font-size: 0.7rem;}input:-moz-placeholder {color: #666;font-size: 0.7rem;}input::-moz-placeholder {color: #666;font-size: 0.7rem;}input:-ms-input-placeholder {color: #666;font-size: 0.7rem;}.aui-list-item-text {justify-content: flex-start !important;flex-wrap: wrap;}.spec {display: inline-block;background-color: #f3f5f8;color: #666;padding: 0 0.25rem;min-width: 3rem;height: 1.5rem;line-height: 1.5rem;text-align: center;margin-right: 0.5rem;margin-bottom: 0.5rem;border-radius: 0.75rem}.aui-active {background-color: #E5332C !important;color: #fff !important;}.num {width: 1rem !important;height: 1.2rem !important;}.dialog {position: fixed;bottom: 0;width: 100%;}.hide {width: 100%;height: 15rem;}.add {background-color: #666 !important;color: #fff;}.sel {min-height: 10rem;max-height: 15rem;overflow-y: scroll;}.payment {background-color: #34d594 !important;color: #fff;}.aui-bar .aui-btn {border-radius: 1.125rem;}
</style><body style="background: rgba0,0,0,0.5);"><div class="hide" onclick="hide)"></div><div class='aui-content aui-bg-white animated slideInUp' style="min-height: 15rem;" id="app" v-cloak><div class="close" onclick="hide)"><img class="icon" src="../../image/close.png"></div><div class="aui-list aui-media-list"><div class="aui-padded-l-15" style="padding-bottom:4rem;"><div class=""><div class="aui-media-list-item-inner" v-if="allList.length!=0"><div class="aui-list-item-media" style='width:4.75rem !important;'><div class="shop-pic"><img :src="allList[allIndex].thumb" /></div></div><div class="aui-list-item-inner aui-font-size-15"><div class="aui-list-item-text aui-text-theme">￥ <span class="aui-font-weight aui-font-size-16">{{allList[allIndex].price*message}}</span></div><div class="aui-list-item-text aui-text-grayer aui-margin-t-10">已选择：<span class="aui-text-black">{{allList[allIndex].name}}</span></div><div class="aui-list-item-text aui-text-grayer aui-margin-t-10">库存：<span class="aui-text-black">{{allList[allIndex].stocknum-message}}</span></div></div></div></div><div class="sel"><div class='aui-list-item aui-padded-l-0' v-if="oneList.length!=0"><div class='aui-list-item-inner aui-padded-r-0'><div class='aui-list-item-text aui-text-black aui-padded-b-5 fweight-5 aui-font-size-15'>{{oneSpecName}}</div><div class='aui-list-item-text aui-margin-t-10'><span class="aui-font-size-15 spec " :class="{'aui-active':oneIndex==index}" v-for="o,index) in oneList" @click="changeColorOneindex)">{{o.item_name}}</span></div></div></div><div class='aui-list-item aui-padded-l-0' v-if="twoList.length!=0"><div class='aui-list-item-inner aui-padded-r-0'><div class='aui-list-item-text aui-text-black aui-padded-b-5 fweight-5 aui-font-size-15'>{{twoSpecName}}</div><div class='aui-list-item-text aui-margin-t-10 '><span class="aui-font-size-12 spec " :class="{'aui-active':twoIndex==index}" v-for="t,index) in twoList" @click="changeColorTwoindex)">{{t.item_name}}</span></div></div></div><div class='aui-list-item aui-padded-l-0' v-if="threeList.length!=0"><div class='aui-list-item-inner aui-padded-r-0'><div class='aui-list-item-text aui-text-black aui-padded-b-5 fweight-5 aui-font-size-15'>{{threeSpecName}}</div><div class='aui-list-item-text aui-margin-t-10 '><span class="aui-font-size-12 spec " :class="{'aui-active':threeIndex==index}" v-for="t,index) in threeList" @click="changeColorThreeindex)">{{t.item_name}}</span></div></div></div></div><div class='aui-padded-l-0'><div class='' style="display: flex;justify-content: space-between;align-items: center;"><div class='aui-list-item-text aui-text-black aui-padded-b-5 fweight-5 aui-font-size-15'>数量</div><div class='aui-list-item-text aui-margin-l-10 aui-padded-r-15' style="border-radius: 1rem;"><div @click="miusNum)"><image src='../../image/mius.png' style='width:1.2rem;height:1.2rem;vertical-align:middle;'></image></div><div class='aui-margin-r-5 aui-margin-l-5'><input v-model="message" class='aui-text-center num' placeholder="0" type='text' readonly=""></input></div><div @click="addNum)"><image src='../../image/add.png' style='width:1.2rem;height:1.2rem;vertical-align:middle;'></image></div></div></div></div></div></div><footer class="aui-bar aui-bar-tab aui-padded-15" id="footer"><div class="aui-row"><!--<div class="aui-col-xs-6 aui-padded-r-5"><div class="aui-btn-block aui-btn aui-btn-theme aui-font-size-14" style="background-color: #FE7648 !important;">加入购物车</div></div>--><div class=" aui-padded-l-5" onclick="hide)"><div class="aui-btn-block aui-btn aui-btn-theme aui-font-size-14">立即购买</div></div></div></footer></div>
</body></html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">var vm = new Vue{el: '#app',data: {message:1,//第一级的数据oneSpecName: '', //第一级的总名称oneIndex: 0, //第一级的indexoneList: [], //第一级的数据//第二级的数据twoSpecName: '', //第二级的总名称twoIndex: 0, //第二级的indextwoList: [], //第二级的数据//第三级的数据threeSpecName: '', //第三级的总名称threeIndex: 0, //第三级的indexthreeList: [], //第三级的数据//头部的数据显示allIndex: 0, //头部的indexallList: [], //头部的数据},methods: {getGoodsSpec: function) {Ajax{method: 'POST',url: 'goods/goodsSpec',data: {token: api.getPrefs{sync: true,key: 'token'}),id: api.pageParam.id,},success: functionret) {vm.oneSpecName = ret.spec_name;if ret.one) {if ret.one.length != 0) {vm.oneList = ret.one;vm.changeColorOne0);} else {mineAlert}}}});},//点击第一级的item改变其颜色并且改变了第二三级的数据及头部显示的数据changeColorOne: functiononeIndex) {if vm.oneList[oneIndex].two.list != 0) {//一级下面有二级数据vm.oneIndex = oneIndex;vm.twoSpecName = vm.oneList[oneIndex].two.spec_name;vm.twoList = vm.oneList[oneIndex].two.list;vm.allList = vm.twoList;vm.changeColorTwo0)} else {//一级下面没有二级数据vm.allIndex = oneIndex;vm.allList = vm.oneList;}},//点击第二级的item改变其颜色并且改变了第三级的数据及头部显示的数据changeColorTwo: functiontwoIndex) {if vm.oneList[vm.oneIndex].two.list[twoIndex].three.list != 0) {//二级下面有三级数据vm.twoIndex = twoIndex;vm.threeSpecName = vm.oneList[vm.oneIndex].two.list[twoIndex].three.spec_name;vm.threeList = vm.oneList[vm.oneIndex].two.list[twoIndex].three.list;vm.changeColorThree0)} else {//二级下面没有三级数据vm.allIndex = twoIndex;vm.allList = vm.twoList;}},//点击第三级的item改变其颜色并且改变了头部的数据changeColorThree: functionthreeIndex) {//三级和头部显示的数据vm.threeIndex = threeIndex;vm.allList = vm.oneList[vm.oneIndex].two.list[vm.twoIndex].three.list;vm.allIndex = threeIndex;},miusNum: function) {if this.message>0) {this.message--}},addNum: function) {if vm.allList[vm.allIndex].stocknum-vm.message == 0) {mineAlert"库存最多有"+vm.allList[vm.allIndex].stocknum+",请重选")this.message=0}else {this.message++}return},openPage: functionurl, name) {var pageobj = {url: url,name: name,}open_windowurl, name, pageobj)},}})apiready = function) {vm.getGoodsSpec);}
</script>