zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交批量购买样式

master
lemon橪 2022-05-27 10:32:08 +08:00
parent 68cdcd8587
commit 1dc42e1333
1 changed files with 464 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
components/m-buy/goods.vue
View File

@ -1,29 +1,18 @@
<template>
<div class="wrapper">
<u-popup
class="popup"
v-model="buyMask"
:height="setup.height"
closeable
:mode="setup.mode"
:border-radius="setup.radius"
@close="closeMask()"
>
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
:border-radius="setup.radius" @close="closeMask()">
<!-- 商品 -->
<view class="goods-box bottom">
<view class="goods-header">
<view class="goods-img">
<u-image
width="200rpx"
border-radius="20"
class="uimage"
height="200rpx"
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"
></u-image>
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
</view>
<view class="goods-skus">
<!-- 有活动商品价格 -->
<view class="goods-price" v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
<view class="goods-price"
v-if="goodsDetail.promotionPrice && ((isGroup && buyType === 'PINTUAN') || !isGroup)">
<span v-if="goodsDetail.promotionPrice && !pointDetail">
￥
<span class="goods-price-promotionShow goods-price-bigshow">{{
@ -46,7 +35,8 @@
</div>
</view>
<!-- 正常商品的价格 -->
<view class="goods-price" v-else>
<view v-else>
<div class="goods-price">
<span>
￥
<span class="goods-price-bigshow">{{
@ -54,6 +44,22 @@
}}</span>
.{{ formatPrice(goodsDetail.price)[1] }}
</span>
</div>
<!-- 批发价格 -->
<div class='price-row'>
<div class='goods-price'>
<span >
￥
<span class="goods-price-bigshow">{{
formatPrice(goodsDetail.price)[0]
}}</span>
.{{ formatPrice(goodsDetail.price)[1] }}
</span>
</div>
<div>
23-30
</div>
</div>
</view>
<view class="goods-check-skus">
已选
@ -62,66 +68,46 @@
<span>，{{ num }}个</span>
</span>
</view>
<view class="goods-check-skus">
库存
<span class="goods-check-skus-name">
<span>{{ goodsDetail.quantity }}</span>
</span>
</view>
</view>
</view>
<!-- 商品信息 -->
<scroll-view class="goods-skus-box" :scroll-y="true">
<!-- 规格 -->
<view
class="goods-skus-view"
:key="specIndex"
v-for="(spec, specIndex) in formatList"
>
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
<view class="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view>
<!-- 正常逻辑 循环出sku -->
<view
v-if="!parentOrder"
:class="{ active: spec_val.value == currentSelceted[specIndex] }"
class="skus-view-item"
v-for="(spec_val, spec_index) in spec.values"
:key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)"
>{{ spec_val.value }}
<view v-if="!parentOrder" :class="{ active: spec_val.value == currentSelceted[specIndex] }"
class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
</view>
<!-- 拼团购买，仅筛选出当前拼团类型商品 -->
<view
v-if="parentOrder && spec_val.skuId == goodsDetail.id"
:class="{ active: spec_val.value == currentSelceted[specIndex] }"
class="skus-view-item"
v-for="(spec_val, spec_index) in spec.values"
:key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)"
>{{ spec_val.value }}
<view v-if="parentOrder && spec_val.skuId == goodsDetail.id"
:class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
</view>
</view>
</view>
<!-- 数量 -->
<view class="goods-skus-number">
<view class="view-class-title">数量</view>
<u-number-box
:bg-color="numberBox.bgColor"
:max="200"
:color="numberBox.color"
:input-width="numberBox.width"
:input-height="numberBox.height"
:size="numberBox.size"
:min="1"
v-model="num"
>
</u-number-box>
<u-input style='text-align: right;' v-model="num" type="number" />
</view>
</scroll-view>
<!-- 按钮 -->
<view class="btns">
<view
class="box-btn card"
v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
@click="addToCartOrBuy('cart')"
>加入购物车</view
>
<view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
@click="addToCartOrBuy('cart')">加入购物车</view>
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
</view>
</view>
@ -137,14 +123,7 @@ export default {
return {
setup,
num: 1,
// 步进器的大小尺寸单位是 rpx
numberBox: {
width: "50",
height: "50",
size: "22",
color: "#333",
bgColor: "#fff",
},
selectName: "", //选中商品的昵称
selectSkuList: "", //选中商铺sku,
selectedSpecImg: "", //选中的图片路径
@ -187,6 +166,14 @@ export default {
},
},
watch: {
num(val){
if(val){
if(val > this.goodsDetail.quantity){
console.log(val)
this.val = this.goodsDetail.quantity
}
}
},
buyType: {
handler(val) {
if (val) {
@ -398,7 +385,10 @@ export default {
</script>
<style lang="scss" scoped>
@import "./popup.scss";
.price-row{
text-align: center;
}
.buy {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
@ -419,6 +409,7 @@ export default {
.goods-skus-number {
justify-content: space-between;
display: flex;
text-align: right
}
/deep/ .uni-scroll-view {
@ -483,8 +474,13 @@ export default {
.goods-price {
color: $price-color;
line-height: 80rpx;
display: flex;
>* {
color: $price-color;
line-height: 80rpx;
}
}
.promotion-box {
line-height: 1;
display: flex;
@ -492,22 +488,28 @@ export default {
text-decoration: line-through;
color: #999;
margin-left: 10rpx;
/deep/ span {
font-size: 30rpx;
}
}
.promotion {
font-size: 30rpx;
}
.goods-price-promotionShow {
font-size: 48rpx;
}
.goods-check-skus {
font-size: 24rpx;
color: #999;
>.goods-check-skus-name {
margin-left: 4rpx;
}
>span {
color: #333;
}