效果图，暂时只适应单规格，居中弹出和下方弹出，如需求不满足，请自行修改代码
（更新于24/11/15)
居中显示效果
下方弹出效果
html
<template><view class="" v-if="show":class="mode=='center'?(style_show?'specifications_show_center openAnimation':'specifications_show_center closeAnimation'):mode=='bottom'?(style_show?'specifications_show_bottom openAnimation':'specifications_show_bottom closeAnimation'):''"@tap.stop="()=>{}"><view class="specifications":class="mode=='bottom'?(style_show?'specifications_bottom_open ':'specifications_bottom_close '):''"@tap.stop="()=>{}"><view class="specification"><view class="specification_title">请选择规格</view><image class="colseIcon":src="$publicfun.locaAndHttp()?'../../static/all/del.png':$publicfun.httpUrlImg('colse.png')"mode="aspectFit" @tap.stop="colosePopue"></image><!-- 商品信息 --><view class="modal-header flex "><view class="header-left ss-m-r-30"><image class="sku-image" :src="component_goodsDetail.image" mode="aspectFill"@tap.stop="previewImages1(component_goodsDetail.image,1)"></image></view><view class="header-right "><view class="goods-title ss-line-2">{{component_goodsDetail.title||'商品名称' }}</view><view class="header-right-bottom ss-flex ss-col-center ss-row-between"><view class="price-text">{{is_kongobj=='{}'? Number(component_goodsDetail.price*1).toFixed(2) :Number(chooseSpecificationObject.price*1).toFixed(2)}}</view><view class="stock-text ss-m-l-20" v-if="is_kongobj!='{}'">库存{{ is_kongobj=='{}'?component_goodsDetail.goods_stock:chooseSpecificationObject.inventory}}件</view></view></view></view><view class="specification_title2">规格</view><view class="specification_title_1"><scroll-view scroll-y="true" style="height: 100%;"><view><height :hg='30'></height><view class="flex flexwrap"><view v-for="(itemall,indexall) in component_goodsDetail.multiplejson" :key="indexall"@click.stop="setguigeindex(indexall,itemall)"><view:class="guigeindex==indexall?'specification_title_1_title specification_title_1_titlec':'specification_title_1_title'"v-if='itemall.title'>{{itemall.title}}</view></view></view><!-- 单规格 --><view class="mt30" v-if="false"><view class="specification_title_1_content"><view class="specification_title_1_content_flex flex jc ac":class="guigeindex2==index?'specification_title_1_content_flex_activate':''"v-for="(item,index) in specification_list[guigeindex].item" :key="index"@tap.stop="selective_specification(item.guigechildren,item)"><!-- 可用于显示商品图片 --><!-- <image class="image" :src="sheep.$url.cdn(type_return_img(item.id).url)"mode="aspectFill" v-if="type_return_img(item.id).url!=''"></image> --><view>{{item.name}}</view></view><view class="nogoods" v-if="item.guigechildren.length==0" style="margin: auto;"><u-empty text='没有规格~' icon=""></u-empty></view></view></view></view></scroll-view></view><view class="" v-if="mode=='center'"><view class="selected"><text>已选规格:</text>{{is_kongobj=='{}'?'未选择':chooseSpecificationObject.title}}</view></view><view class="buy-num-box flex jsb ac"><view class="label-text">购买数量</view><view class="ShopCar flex jc ac"><image class="ShopCaricon":src="$publicfun.locaAndHttp()?'../../static/all/del.png':$publicfun.httpUrlImg('del.png')"mode="aspectFit" @tap.stop="delnum(item)"></image><input type="number" v-model="goodsNum" class="ShopCarInp" @blur="inpnum(item)" /><image class="ShopCaricon":src="$publicfun.locaAndHttp()?'../../static/all/add.png':$publicfun.httpUrlImg('add.png')"mode="aspectFit" @tap.stop="addnum(item)"></image></view></view><view class="sublist" v-if="mode=='center'"><view class="sublist_left"><view class=""><text>总计 </text><text class="TotalPrices"><text>¥</text>{{is_kongobj=='{}'?'0.00':Number(chooseSpecificationObject.price*goodsNum).toFixed(2) }}</text></view></view><view class="sublist_right" @tap.stop="goodsAddCar()"><text>+</text> <text>加入购物车</text></view></view><view class="specification_bottombuts" v-if="mode=='bottom'"><view class="specification_bottombuts_but specification_bottombuts_ShoppingCart"@tap.stop="goodsAddCar()">加入购物车</view><view class="specification_bottombuts_but specification_bottombuts_PayNow" @tap.stop="newPay()">立即购买</view></view><view class="" style="width: 100%;height: 30px;" v-if="mode=='bottom'"></view></view></view></view>
</template>js
export default {name: "specification",//style_show 主要控制动画效果//mode 设置方向弹出//show 控制显示不显示//goodsDetail 传入的商品信息props: ['show', 'style_show', 'goodsDetail', 'mode'],data() {return {orderprive: '',style: [], //规格动态样式// goodsDetail: { //模拟商品信息// goods_name: '番茄鸡蛋面',// goods_price: '9.90',// goods_stock: 999,// specification: [{// goods_name: '规格1',// goods_price: '9.90',// goods_stock: 999,// children: [{// goods_name: '11',// goods_price: '6.60',// goods_stock: 999,// }]// }]// },chooseSpecificationObject: {}, //选中的规格guigeindex: 0, //一级规格guigeindex2: 0, //二级规格component_goodsDetail: {}, //请求接口的商品数据goodsNum: 1,};},onLoad() {},watch: {
//监听是否有商品id传入进来goodsDetail: {handler(newName, oldName) {//获取商品信息的接口GoodsDetail({id: newName.id}).then(res => {this.component_goodsDetail = res.data;this.chooseSpecificationObject = res.data ? res.data.multiplejson[0] : {};this.guigeindex = 0;console.log(res, '商品详情');})this.goodsNum = 1;},immediate: true,deep: true}},onShow() {},computed: {//判断是否选中规格is_kongobj() {console.log(this.chooseSpecificationObject);return JSON.stringify(this.chooseSpecificationObject); }},methods: {newPay() {if (!this.style_show) {return}let that = this;//可用于显示弹窗不默认选中规格的判断// if (JSON.stringify(this.choose_specification) == '{}') {// uni.showToast({// title: "请选择规格",// icon: "none"// })// return// }// console.log(that.goodsNum);// return// 直接购买将需要的信息提交到vuex缓存中，用于渲染页面this.$store.commit('set_is_immediately', {type: 'goodsDetail',id: that.component_goodsDetail.id, //iditem: that.chooseSpecificationObject, //规格名称count: that.goodsNum,goodsDetail: [that.component_goodsDetail] //商品列表数组})//跳转到提交订单页面this.$publicfun.navigateTo('/pagesA/SubmitOrder/SubmitOrder')this.colosePopue()},//选中规格setguigeindex(index, item) {if (!this.style_show) {return}this.chooseSpecificationObject = item;this.guigeindex = index;if (this.goodsNum > this.chooseSpecificationObject.inventory) {this.goodsNum = this.chooseSpecificationObject.inventory;}},//删除购物车数量delnum() {if (!this.style_show) {return}if (this.goodsNum > 1) {this.goodsNum--;} else {//数量少于1 关闭弹窗this.colosePopue()}},//添加购物车数量addnum() {if (!this.style_show) {return}if (this.goodsNum < this.chooseSpecificationObject.inventory) {this.goodsNum++;} else {uni.showToast({title: '超出购买数量~',icon: "none"})}},//手动输入购买数量inpnum() {if (!this.style_show) {return}if (this.goodsNum > this.chooseSpecificationObject.inventory) {this.goodsNum = this.chooseSpecificationObject.inventory;}if (this.goodsNum == '') {// this.colosePopue()this.goodsNum = 1;this.$publicfun.showToast('购买数量不得少于1~')}if (this.goodsNum <= 0) {// this.colosePopue()this.goodsNum = 1;this.$publicfun.showToast('购买数量不得少于1~')}},//预览商品图片previewImages1(url, index) {
//因为动画效果是 用透明度为0，再消失，透明度改变的时候还可以点击，加这个判断是很必要的if (!this.style_show) {return}//预览图片this.$publicfun.previewImage({url: url,index: index})},//关闭弹窗colosePopue() {if (!this.style_show) {return}this.$emit('closeCar')// this.component_goodsDetail={};},//添加购物车goodsAddCar() {if (!this.style_show) {return}let that = this;//这是添加到购物车carAddAndDel({id: this.goodsDetail.id,count: this.goodsNum,item_name: this.chooseSpecificationObject.title,type: 'add'}).then(res => {if (res.code == 1) {//通过vuex更新数据this.$store.dispatch('fun_set_shopCar');// console.log(res);that.colosePopue();uni.showToast({title: '已添加到购物车~',icon: "none"})} else {uni.showToast({title: res.msg,icon: "none"})}})},}}css部分
//居中显示.specifications_show_center {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999999999;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: center;opacity: 1;border-radius: 18rpx;}.openAnimation {animation: slow_show 0.3s linear;}.closeAnimation {opacity: 0 !important;animation: close_slow_show 0.3s linear;}@keyframes slow_show {0% {opacity: 0;}100% {opacity: 1;}}@keyframes close_slow_show {0% {opacity: 1;}100% {opacity: 0;}}//从下方弹出显示.specifications_show_bottom {width: 100vw;height: 100vh;position: fixed;bottom: 0;left: 0;z-index: 999999999;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: flex-end;opacity: 1;border-radius: 18rpx;.specifications {width: 100% !important;position: absolute;bottom: 0;left: 0;padding: 30rpx 50rpx !important;}.specifications_bottom_open {animation: From_bottom_to_top 0.22s linear;}.specifications_bottom_close {animation: From_top_to_bottom 0.3s linear;}}@keyframes From_bottom_to_top {0% {bottom: -100%;}100% {bottom: 0;}}@keyframes From_top_to_bottom {0% {bottom: 0;}100% {bottom: -100%;}}//以上是动画效果.specifications {width: 690rpx;padding: 30rpx;box-sizing: border-box;background: #fff;border-radius: 18rpx;.buy-num-box {height: 100rpx;// padding-left: 20rpx;// box-sizing: border-box;.ShopCar {.ShopCaricon {width: 46rpx;height: 46rpx;}.ShopCarInp {width: 100rpx;height: 46rpx;text-align: center;}}}.modal-header {// position: relative;padding: 20rpx 0;margin-top: 20rpx;.sku-image {width: 160rpx;height: 160rpx;border-radius: 10rpx;background: darkslategray;}.header-right {width: calc(100% - 160rpx - 20rpx);height: 160rpx;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;}.close-icon {position: absolute;top: 10rpx;right: 20rpx;font-size: 46rpx;opacity: 0.2;}.goods-title {font-size: 28rpx;font-weight: bold;line-height: 42rpx;position: relative;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;.tig {border: 2rpx solid #ff6000;border-radius: 4rpx;width: 126rpx;height: 38rpx;position: absolute;left: 0;top: 0;.tig-icon {width: 40rpx;height: 40rpx;background: #ff6000;margin-left: -2rpx;border-radius: 4rpx 0 0 4rpx;.groupon-tag {width: 32rpx;height: 32rpx;}}.tig-title {font-size: 24rpx;font-weight: 500;line-height: normal;color: #ff6000;width: 86rpx;display: flex;justify-content: center;align-items: center;}}.info-title {text-indent: 132rpx;}}.header-right-bottom {display: flex;justify-content: space-between;align-items: center;}.price-text {font-size: 30rpx;font-weight: 500;color: red;font-family: OPPOSANS;&::before {content: '￥';font-size: 24rpx;}}.stock-text {font-size: 26rpx;color: #999999;}}.d_box {.d_box_item {font-size: 34rpx;color: #3d3d3d;width: 45%;margin-bottom: 20rpx;}}.specification {background: #FFFFFF;border-radius: 12rpx;position: relative;z-index: 10074;.specification_title {text-align: center;font-size: 38rpx;font-weight: 600;color: #353535;margin: 0 auto;}.colseIcon {width: 40rpx;height: 40rpx;position: absolute;right: 0rpx;top: 0rpx;}.specification_title2 {font-size: 38rpx;font-weight: 600;color: #353535;margin: 0 auto;margin-bottom: 30rpx;}.specification_goods_title {font-size: 38rpx;font-weight: 600;}.specification_title_1 {width: 100%;max-height: 400rpx !important;margin: 0 auto;.specification_title_1_title {font-size: 32rpx;font-weight: 600;color: #676767;// color: $AccentColor;display: inline-block;padding: 10rpx 20rpx;text-align: center;background: #fff;border-radius: 18rpx;white-space: nowrap;// border: 1rpx solid $AccentColor !important;border: 1rpx solid #676767 !important;margin-right: 10rpx;margin-bottom: 10rpx;}.specification_title_1_titlec {color: $AccentColor !important;// background: $AccentColor !important;border: 1rpx solid $AccentColor !important;}.specification_title_1_content {display: flex;flex-wrap: wrap;// overflow-x: auto;display: -webkit-box;-webkit-overflow-scrolling: touch;.specification_title_1_content_flex_activate {background: $AccentColor !important;border: 1rpx solid $AccentColor !important;color: #fff !important;}.font_sizi_1 {color: $AccentColor;}.font_sizi_2 {border-left: 1rpx solid $AccentColor;}.specification_title_1_content_flex {// height: 63rpx;background: #FFFFFF;border-radius: 14rpx;border: 1rpx solid #999;margin-right: 20rpx;text-align: center;// line-height: 63rpx;font-size: 28rpx;font-weight: 400;color: #343434;padding: 10rpx 20rpx;margin-bottom: 20rpx;.image {width: 60rpx;height: 60rpx;margin-right: 20rpx;border-radius: 12rpx;}}}}.close {position: absolute;bottom: -150rpx;left: 50%;transform: translateX(-50%);}}.selected {width: 100%;padding: 20rpx 0;background: #F5F5F5;margin-top: 60rpx;text {font-size: 24rpx;font-weight: 400;color: #363636;}text:nth-child(1) {font-size: 24rpx;font-weight: 400;color: #676767;padding: 0 20rpx;margin-left: 10rpx;}}.sublist {display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;// padding: 30rpx 40rpx;.sublist_left {.TotalPrices {margin-left: 10rpx;}text:nth-child(1) {font-size: 28rpx;font-weight: 600;color: #363636;}text:nth-child(2) {font-size: 28rpx;font-weight: 600;color: #FF0000;text:nth-child(1) {font-size: 28rpx;font-weight: 600;color: #FF0000;font-size: 24rpx;}}}.sublist_right {width: 234rpx;height: 62rpx;background: $AccentColor;border-radius: 12rpx;font-size: 32rpx;font-weight: 500;color: #F3FCFF;line-height: 62rpx;text-align: center;}}//从下方弹出的弹窗按钮.specification_bottombuts {width: 100%;margin: auto;display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;.specification_bottombuts_but {width: 50%;padding: 25rpx 20rpx;font-size: 28rpx;font-weight: bold;color: #fff;text-align: center;}.specification_bottombuts_ShoppingCart {background: #9dceff;border-radius: 99px 0 0 99px;}.specification_bottombuts_PayNow {background: #0a84ff;border-radius: 0px 99px 99px 0px;}}.minus {width: 25px;height: 25px;border-width: 1px;border-color: #E6E6E6;border-style: solid;border-top-left-radius: 100px;border-top-right-radius: 100px;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;@include flex;justify-content: center;align-items: center;}.input {padding: 0 10px;}.plus {width: 25px;height: 25px;border-width: 1px;background-color: #00B8FB;border-color: #00B8FB;border-style: solid;border-top-left-radius: 100px;border-top-right-radius: 100px;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;@include flex;justify-content: center;align-items: center;}}
