提交批量购买样式
lemon橪
parent
68cdcd8587
commit
1dc42e1333
|
|
@ -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>
|
||||
|
|
@ -129,22 +115,15 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_trade from "@/api/trade.js";
|
||||
import setup from "./popup";
|
||||
import * as API_trade from "@/api/trade.js";
|
||||
import setup from "./popup";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
data() {
|
||||
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) {
|
||||
|
|
@ -326,7 +313,7 @@ export default {
|
|||
// 格式化数据
|
||||
let arr = [{}];
|
||||
|
||||
if(!Array.isArray(list)){
|
||||
if (!Array.isArray(list)) {
|
||||
return false
|
||||
}
|
||||
list.forEach((item, index) => {
|
||||
|
|
@ -394,59 +381,63 @@ export default {
|
|||
mounted() {
|
||||
this.formatSku(this.goodsSpec);
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./popup.scss";
|
||||
@import "./popup.scss";
|
||||
.price-row{
|
||||
text-align: center;
|
||||
|
||||
.buy {
|
||||
}
|
||||
.buy {
|
||||
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card {
|
||||
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.u-icon-plus,
|
||||
.u-icon-minus,
|
||||
.u-icon-disabled {
|
||||
/deep/.u-icon-plus,
|
||||
.u-icon-minus,
|
||||
.u-icon-disabled {
|
||||
height: 30rpx !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-skus-number {
|
||||
.goods-skus-number {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
text-align: right
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view {
|
||||
/deep/ .uni-scroll-view {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
.active {
|
||||
background: $price-light-color !important;
|
||||
border: 2rpx solid $price-color;
|
||||
font-weight: bold;
|
||||
color: $price-color !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-skus-box {
|
||||
.goods-skus-box {
|
||||
overflow-y: auto;
|
||||
height: 610rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
height: 570rpx;
|
||||
// #endif
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-skus-view {
|
||||
.goods-skus-view {
|
||||
overflow: hidden;
|
||||
|
||||
.skus-view-list {
|
||||
> .skus-view-item {
|
||||
>.skus-view-item {
|
||||
flex: 1;
|
||||
padding: 0 36rpx;
|
||||
|
||||
|
|
@ -463,53 +454,64 @@ export default {
|
|||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-header {
|
||||
.goods-header {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-box {
|
||||
padding: 50rpx 36rpx 0 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-skus {
|
||||
.goods-skus {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
.goods-price {
|
||||
color: $price-color;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
}
|
||||
.promotion-box {
|
||||
>* {
|
||||
color: $price-color;
|
||||
line-height: 80rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-box {
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
margin-left: 10rpx;
|
||||
|
||||
/deep/ span {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.promotion {
|
||||
}
|
||||
|
||||
.promotion {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.goods-price-promotionShow {
|
||||
}
|
||||
|
||||
.goods-price-promotionShow {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
.goods-check-skus {
|
||||
}
|
||||
|
||||
.goods-check-skus {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
> .goods-check-skus-name {
|
||||
|
||||
>.goods-check-skus-name {
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
> span {
|
||||
|
||||
>span {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue