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

批发商品展示

master
lemon橪 2022-05-27 18:18:02 +08:00
parent a3d8a8037f 6e04a5d3da
commit 0e8ace560b
4 changed files with 495 additions and 466 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,18 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<u-popup <u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
class="popup" :border-radius="setup.radius" @close="closeMask()">
v-model="buyMask"
:height="setup.height"
closeable
:mode="setup.mode"
:border-radius="setup.radius"
@close="closeMask()"
>
<!-- 商品 --> <!-- 商品 -->
<view class="goods-box bottom"> <view class="goods-box bottom">
<view class="goods-header"> <view class="goods-header">
<view class="goods-img"> <view class="goods-img">
<u-image <u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
width="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
border-radius="20"
class="uimage"
height="200rpx"
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"
></u-image>
</view> </view>
<view class="goods-skus"> <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 v-if="goodsDetail.promotionPrice && !pointDetail">
￥ ￥
<span class="goods-price-promotionShow goods-price-bigshow">{{ <span class="goods-price-promotionShow goods-price-bigshow">{{
@ -46,7 +35,24 @@
</div> </div>
</view> </view>
<!-- 正常商品的价格 --> <!-- 正常商品的价格 -->
<view class="goods-price" v-else> <view v-else>
<!-- 批发价格 -->
<div class='price-row flex' v-if="wholesaleList.length">
<div class='goods-price' v-for="(item,index) in wholesaleList" :key="index">
<span>
￥
<span class="goods-price-bigshow">{{
formatPrice(item.price)[0]
}}</span>
.{{ formatPrice(item.price)[1] }}
</span>
<span class='wholesale-item'>
{{item.num}}{{goodsDetail.goodsUnit}}
</span>
</div>
</div>
<div class="goods-price" v-else>
<span> <span>
￥ ￥
<span class="goods-price-bigshow">{{ <span class="goods-price-bigshow">{{
@ -54,6 +60,7 @@
}}</span> }}</span>
.{{ formatPrice(goodsDetail.price)[1] }} .{{ formatPrice(goodsDetail.price)[1] }}
</span> </span>
</div>
</view> </view>
<view class="goods-check-skus"> <view class="goods-check-skus">
已选 已选
@ -62,66 +69,46 @@
<span>，{{ num }}个</span> <span>，{{ num }}个</span>
</span> </span>
</view> </view>
<view class="goods-check-skus">
库存
<span class="goods-check-skus-name">
<span>{{ goodsDetail.quantity }}</span>
</span>
</view>
</view> </view>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<scroll-view class="goods-skus-box" :scroll-y="true"> <scroll-view class="goods-skus-box" :scroll-y="true">
<!-- 规格 --> <!-- 规格 -->
<view <view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
class="goods-skus-view"
:key="specIndex"
v-for="(spec, specIndex) in formatList"
>
<view class="skus-view-list"> <view class="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view> <view class="view-class-title">{{ spec.name }}</view>
<!-- 正常逻辑 循环出sku --> <!-- 正常逻辑 循环出sku -->
<view <view v-if="!parentOrder" :class="{ active: spec_val.value == currentSelceted[specIndex] }"
v-if="!parentOrder" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
:class="{ active: spec_val.value == currentSelceted[specIndex] }" @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
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 v-if="parentOrder && spec_val.skuId == goodsDetail.id"
v-if="parentOrder && spec_val.skuId == goodsDetail.id" :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
:class="{ active: spec_val.value == currentSelceted[specIndex] }" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
class="skus-view-item" @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}
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>
</view> </view>
<!-- 数量 --> <!-- 数量 -->
<view class="goods-skus-number"> <view class="goods-skus-number">
<view class="view-class-title">数量</view> <view class="view-class-title">数量</view>
<u-number-box
:bg-color="numberBox.bgColor" <u-input style='text-align: right;' v-model="num" type="number" />
:max="200"
:color="numberBox.color"
:input-width="numberBox.width"
:input-height="numberBox.height"
:size="numberBox.size"
:min="1"
v-model="num"
>
</u-number-box>
</view> </view>
</scroll-view> </scroll-view>
<!-- 按钮 --> <!-- 按钮 -->
<view class="btns"> <view class="btns">
<view <view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
class="box-btn card" @click="addToCartOrBuy('cart')">加入购物车</view>
v-if="buyType != 'PINTUAN' && goodsDetail.goodsType != 'VIRTUAL_GOODS'"
@click="addToCartOrBuy('cart')"
>加入购物车</view
>
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view> <view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
</view> </view>
</view> </view>
@ -129,22 +116,15 @@
</div> </div>
</template> </template>
<script> <script>
import * as API_trade from "@/api/trade.js"; import * as API_trade from "@/api/trade.js";
import setup from "./popup"; import setup from "./popup";
export default { export default {
data() { data() {
return { return {
setup, setup,
num: 1, num: 1,
// 步进器的大小尺寸单位是 rpx
numberBox: {
width: "50",
height: "50",
size: "22",
color: "#333",
bgColor: "#fff",
},
selectName: "", //选中商品的昵称 selectName: "", //选中商品的昵称
selectSkuList: "", //选中商铺sku, selectSkuList: "", //选中商铺sku,
selectedSpecImg: "", //选中的图片路径 selectedSpecImg: "", //选中的图片路径
@ -154,9 +134,14 @@ export default {
currentSelceted: [], currentSelceted: [],
skuList: "", skuList: "",
isClose: false, //是否可以点击遮罩关闭 isClose: false, //是否可以点击遮罩关闭
}; };
}, },
props: { props: {
wholesaleList:{
type: null,
default: false,
},
buyMask: { buyMask: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -186,7 +171,23 @@ export default {
type: null, type: null,
}, },
}, },
computed: {
wholesalePrice(key){
return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.price }) :[]
},
wholesaleNum(key){
return this.wholesaleList.length ? this.wholesaleList.map(item=>{ return item.num }) :[]
}
},
watch: { watch: {
num(val){
if(val){
if(val > this.goodsDetail.quantity){
console.log(val)
this.val = this.goodsDetail.quantity
}
}
},
buyType: { buyType: {
handler(val) { handler(val) {
if (val) { if (val) {
@ -326,7 +327,7 @@ export default {
// 格式化数据 // 格式化数据
let arr = [{}]; let arr = [{}];
if(!Array.isArray(list)){ if (!Array.isArray(list)) {
return false return false
} }
list.forEach((item, index) => { list.forEach((item, index) => {
@ -394,59 +395,63 @@ export default {
mounted() { mounted() {
this.formatSku(this.goodsSpec); this.formatSku(this.goodsSpec);
}, },
}; };
</script> </script>
<style lang="scss" scoped> <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); background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2); box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
} }
.card { .card {
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c); background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2); box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
} }
/deep/.u-icon-plus, /deep/.u-icon-plus,
.u-icon-minus, .u-icon-minus,
.u-icon-disabled { .u-icon-disabled {
height: 30rpx !important; height: 30rpx !important;
background: #fff !important; background: #fff !important;
} }
.goods-skus-number { .goods-skus-number {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
} text-align: right
}
/deep/ .uni-scroll-view { /deep/ .uni-scroll-view {
overflow: hidden !important; overflow: hidden !important;
} }
.active { .active {
background: $price-light-color !important; background: $price-light-color !important;
border: 2rpx solid $price-color; border: 2rpx solid $price-color;
font-weight: bold; font-weight: bold;
color: $price-color !important; color: $price-color !important;
box-sizing: border-box; box-sizing: border-box;
} }
.goods-skus-box { .goods-skus-box {
overflow-y: auto; overflow-y: auto;
height: 610rpx; height: 610rpx;
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
height: 570rpx; height: 570rpx;
// #endif // #endif
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.goods-skus-view { .goods-skus-view {
overflow: hidden; overflow: hidden;
.skus-view-list { .skus-view-list {
> .skus-view-item { >.skus-view-item {
flex: 1; flex: 1;
padding: 0 36rpx; padding: 0 36rpx;
@ -463,53 +468,69 @@ export default {
border-radius: 30rpx; border-radius: 30rpx;
} }
} }
} }
.wholesale-item{
color: #999 !important;
font-size: 24rpx;
margin:0 20rpx;
}
.goods-header { .goods-header {
height: 200rpx; height: 200rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 36rpx; margin-bottom: 36rpx;
} }
.goods-box { .goods-box {
padding: 50rpx 36rpx 0 36rpx; padding: 50rpx 36rpx 0 36rpx;
} }
.goods-skus { .goods-skus {
padding: 0 20rpx; padding: 0 20rpx;
} }
.goods-price { .goods-price {
color: $price-color; color: $price-color;
line-height: 80rpx; line-height: 80rpx;
display: flex; >* {
} color: $price-color;
.promotion-box { line-height: 80rpx;
}
}
.promotion-box {
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: line-through; text-decoration: line-through;
color: #999; color: #999;
margin-left: 10rpx; margin-left: 10rpx;
/deep/ span { /deep/ span {
font-size: 30rpx; font-size: 30rpx;
} }
} }
.promotion {
.promotion {
font-size: 30rpx; font-size: 30rpx;
} }
.goods-price-promotionShow {
.goods-price-promotionShow {
font-size: 48rpx; font-size: 48rpx;
} }
.goods-check-skus {
.goods-check-skus {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
> .goods-check-skus-name {
>.goods-check-skus-name {
margin-left: 4rpx; margin-left: 4rpx;
} }
> span {
>span {
color: #333; color: #333;
} }
} }
</style> </style>

4
pages/navigation/search/searchPage.vue
View File

@ -152,12 +152,16 @@
</view> </view>
<div class="promotion" @click="navigateToDetailPage(item)"> <div class="promotion" @click="navigateToDetailPage(item)">
<div v-if="item.content.salesModel == 'WHOLESALE'">
<span>批</span>
</div>
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex"> <div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span> <span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span> <span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span> <span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div> </div>
</div> </div>
<div class="count-config" @click="navigateToDetailPage(item)"> <div class="count-config" @click="navigateToDetailPage(item)">
<span>已售 {{ item.content.buyCount || "0" }}</span> <span>已售 {{ item.content.buyCount || "0" }}</span>
<span>{{ item.content.commentNum || "0" }}条评论</span> <span>{{ item.content.commentNum || "0" }}条评论</span>

3
pages/product/goods.vue
View File

@ -348,6 +348,7 @@
:id="productId" :id="productId"
v-if="goodsDetail.id" v-if="goodsDetail.id"
:pointDetail="pointDetail" :pointDetail="pointDetail"
:wholesaleList="wholesaleList"
@handleClickSku="selectSku" @handleClickSku="selectSku"
:buyMask="buyMask" :buyMask="buyMask"
/> />
@ -523,6 +524,7 @@ export default {
routerVal: "", routerVal: "",
IMLink: "", // IM地址 IMLink: "", // IM地址
wholesaleList:[]
}; };
}, },
@ -661,6 +663,7 @@ export default {
} }
/**商品信息以及规格信息存储 */ /**商品信息以及规格信息存储 */
this.goodsDetail = response.data.result.data; this.goodsDetail = response.data.result.data;
this.wholesaleList = response.data.result.wholesaleList;
this.goodsSpec = response.data.result.specs; this.goodsSpec = response.data.result.specs;
this.PromotionList = response.data.result.promotionMap; this.PromotionList = response.data.result.promotionMap;
this.goodsParams = response.data.result.goodsParamsDTOList || []; this.goodsParams = response.data.result.goodsParamsDTOList || [];

1
pages/tabbar/cart/cartList.vue
View File

@ -74,6 +74,7 @@
</p> </p>
<!-- 规格 --> <!-- 规格 -->
<p class="sp-type">{{skuItem.goodsSku.simpleSpecs}}</p> <p class="sp-type">{{skuItem.goodsSku.simpleSpecs}}</p>
<p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
<p class="sp-number"> <p class="sp-number">
<view class="sp-price"> <view class="sp-price">
<div class="default-color" :class="{'main-color':Object.keys(skuItem.promotionMap).length ==0 }"> <div class="default-color" :class="{'main-color':Object.keys(skuItem.promotionMap).length ==0 }">