code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-22 02:15:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页下拉刷新，优化商品促销界面

Browse Source
This commit is contained in:
lemon橪
2021-10-15 18:01:54 +08:00
parent fd37087c43
commit 44648e9971
11 changed files with 102 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/product/product/popup/address.vue
View File

@@ -1,5 +1,5 @@
<template>
<u-popup class="popup" v-model="addressFlag" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius" @close="closeAddress()" :mask-close-able="setup.close" :mask="false" closeable>
<u-popup class="popup" v-model="addressFlag" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius" @close="closeAddress()" :mask-close-able="setup.close" closeable>
<view class="header-title">选择地址</view>
<view class="view-box" v-if="addressDetail">
<view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)">

36
pages/product/product/popup/goods.vue
View File

@@ -1,11 +1,13 @@
<template>
<div class="wrapper">
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
:mask-close-able="setup.close" :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">
@@ -13,11 +15,11 @@
<view class="goods-price " v-if="goodsDetail.promotionPrice">
<span v-if="goodsDetail.promotionPrice && !pointDetail">
￥
<span class="goods-price-promotionShow goods-price-bigshow">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
<span
class="goods-price-promotionShow goods-price-bigshow">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
.{{ formatPrice(goodsDetail.promotionPrice)[1] }}
</span>
<span v-if="pointDetail.points">
<span class="goods-price-promotionShow goods-price-bigshow">{{ pointDetail.points }}</span>
积分
</span>
@@ -56,21 +58,25 @@
<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>
<view :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
<view :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 :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>
</view>
</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>
@@ -101,7 +107,6 @@ export default {
formatList: [],
currentSelceted: [],
skuList: "",
isMask: false, //是否显示遮罩层
isClose: false, //是否可以点击遮罩关闭
};
},
@@ -129,8 +134,6 @@ export default {
},
methods: {
// 格式化金钱 1999 --> [1999,00]
formatPrice(val) {
if (typeof val == "undefined") {
@@ -168,7 +171,10 @@ export default {
};
this.selectName = specValue.value;
this.$emit("handleClickSku", {skuId: selectedSkuId.skuId, goodsId: this.goodsDetail.goodsId});
this.$emit("handleClickSku", {
skuId: selectedSkuId.skuId,
goodsId: this.goodsDetail.goodsId,
});
},
/**
@@ -203,11 +209,9 @@ export default {
// 判断是否拼团商品
if (this.buyType) {
data.cartType = "PINTUAN";
}
else if(this.goodsDetail.goodsType == 'VIRTUAL_GOODS'){
data.cartType = "VIRTUAL";
}
else {
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
data.cartType = "VIRTUAL";
} else {
data.cartType = "BUY_NOW";
}

2
pages/product/product/popup/popup.js
View File

@@ -4,5 +4,5 @@ export default {
height:"1000rpx", //弹出层高度
mode:"bottom", //弹出层位置
radius:"32", //圆角 rpx,
close:false //能否点击遮罩退出
close:true //能否点击遮罩退出
}

8
pages/product/product/product.scss
View File

@@ -34,14 +34,12 @@
height: 15px;
}
}
.scroll_mask{
height: 555px;
.scroll_mask {
height: 868rpx;
// padding-bottom: 100rpx;
overflow-y: auto;
}
.coupons {
padding-bottom: 200rpx !important;
}
.mask {
height: 600px;
}

22
pages/product/product/promotion/-promotion-details.vue
View File

@@ -7,11 +7,19 @@
<view v-if="prom.split('-')[0] == 'FULL_DISCOUNT'">
<div class="res_prom_item" v-if="res[prom].fullMinus">
<u-tag text="满减" type="error"></u-tag>
<span class="proText">满{{ res[prom].fullMoney }}元，立减现金 <span class="price">{{ res[prom].fullMinus}}元</span></span>
<!-- TODO 后续将优化为可点击的商品以及优惠券显示明细 -->
<span class="pro-text">满{{ res[prom].fullMoney }}元 立减现金 <span class="price">{{ res[prom].fullMinus}}元</span>
<span v-if="res[prom].isCoupon"> 赠送<span>优惠券</span></span>
<span v-if="res[prom].isPoint"> 赠送{{res[prom].point}}积分</span>
<span v-if="res[prom].isGift"> 赠送商品</span>
<span v-if="res[prom].isFreeFreight">赠送包邮服务</span>
</span>
</div>
<div class="res_prom_item" v-if="res[prom].fullRate">
<u-tag text="打折" type="error"></u-tag>
<span class="proText">满{{ res[prom].fullMoney }}元，立享<span class="price">{{ res[prom].fullRate }}折</span>优惠</span>
<span class="pro-text">满{{ res[prom].fullMoney }}元，立享<span
class="price">{{ res[prom].fullRate }}折</span>优惠</span>
</div>
</view>
@@ -19,14 +27,15 @@
<div class="res_prom_item" v-if="res[prom].requiredNum">
<u-tag text="拼团" type="error"></u-tag>
<span class="proText">{{ res[prom].requiredNum }}人拼团 限购<span class="price">{{ res[prom].limitNum}}件</span></span>
<span class="pro-text">{{ res[prom].requiredNum }}人拼团 限购<span
class="price">{{ res[prom].limitNum}}件</span></span>
</div>
</view>
<view v-if="prom.split('-')[0] == 'SECKILL'">
<div class="res_prom_item">
<u-tag text="限时抢购" type="error"></u-tag>
<span class="proText">限时抢购</span>
<span class="pro-text">限时抢购</span>
</div>
</view>
</view>
@@ -68,13 +77,16 @@ export default {
};
</script>
<style lang="scss" scoped>
.proText {
.pro-text {
font-size: 26rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #333333;
margin-left: 20rpx;
> span {
margin-right: 15rpx;
}
}
.wrapper {

59
pages/product/product/style.scss
View File

@@ -16,7 +16,22 @@ page {
border-radius: 200px;
line-height: 18rpx;
}
.header-title{
font-weight: bold;
color: #333;
text-align: center;
height: 90rpx;
line-height: 90rpx;
font-size: 34rpx;
}
.cuxiao-title{
color: #999;
font-size: 24rpx;
}
.cuxiao{
padding:16rpx 32rpx;
}
.detail-btn {
display: flex;
align-items: center;
@@ -326,50 +341,6 @@ page {
width: 100%;
height: 100%;
}
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: -1px;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
.mask {
position: absolute;
left: 0;
top: 30%;
right: 0;
bottom: 0;
background: #fff;
.title {
position: relative;
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
text-align: center;
border-bottom: 1px solid #f2f2f2;
span {
position: absolute;
right: 30rpx;
font-size: 40rpx;
}
}
.con-cuxiao {
padding: 30rpx 30rpx 0 30rpx;
> text {
font-size: 26rpx;
color: #999;
}
}
}
}
}
.u-mode-light-error {