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

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

master
lemon橪 2021-10-15 18:01:54 +08:00
parent fd37087c43
commit 44648e9971
11 changed files with 102 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
manifest.json
View File

@ -2,8 +2,8 @@
"name" : "lili商城",
"appid" : "__UNI__C100675",
"description" : "",
"versionName" : "4.0.44",
"versionCode" : 4000044,
"versionName" : "4.0.45",
"versionCode" : 4000045,
"transformPx" : false,
"app-plus" : {
"compatible" : {

3
pages.json
View File

@ -10,7 +10,8 @@
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom", // 隐藏系统导航栏
"navigationBarTextStyle": "black"
"navigationBarTextStyle": "black",
"enablePullDownRefresh":true
}
},

67
pages/product/goods.vue
View File

@ -204,24 +204,25 @@
</view>
</view>
<!-- 规格-模态层弹窗 -->
<view class="popup spec" @click="shutMask(false)" v-show="maskFlag">
<view class="spec">
<!-- 促销弹窗 -->
<view class="cuxiao mask" v-show="cuxiao">
<view ref="mask_title" class="title mask_title">
优惠
<span @click="shutMask(false)">×</span>
<u-popup v-model="promotionFlag" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius"
@close="promotionFlag=false" :mask-close-able="setup.close" closeable>
<view class="header-title">优惠</view>
<view class="cuxiao">
<scroll-view class="scroll_mask" :scroll-y="true">
<view class="con-cuxiao">
<view class="cuxiao-title">促销活动</view>
<PromotionDetailsLayout :res="PromotionList" />
</view>
<view class="con-cuxiao coupons">
<view class="cuxiao-title">可领优惠券</view>
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
</view>
</scroll-view>
</view>
<scroll-view class="scroll_mask" :scroll-y="true">
<view class="con-cuxiao">
<text>促销活动</text>
<PromotionDetailsLayout :res="PromotionList" />
</view>
<view class="con-cuxiao coupons">
<text>可领优惠券</text>
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
</view>
</scroll-view>
</view>
</u-popup>
<!-- 配送地址弹窗 -->
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
@ -266,6 +267,8 @@ import popupGoods from "./product/popup/goods"; //购物车商品的模块
import popupAddress from "./product/popup/address"; //地址选择模块
import shares from "@/components/m-share/index"; //分享
import popups from "@/components/popups/popups"; //气泡框
import setup from "./product/popup/popup";
export default {
components: {
popups,
@ -285,6 +288,8 @@ export default {
},
data() {
return {
setup,
promotionFlag: false,
// #ifdef H5
navbarListX: 110, //导航栏列表栏x轴
navbarListY: 80, //导航栏列表栏y轴
@ -373,8 +378,7 @@ export default {
imgList: [], //轮播图数据
favorite: false, //收藏与否flag
recommendList: [], //推荐列表
maskFlag: false, //模态显示与否
cuxiao: false, //促销弹窗
// maskFlag: false, //模态显示与否
goodsInfo: false, //商品介绍弹窗
addressFlag: false, //配送地址弹窗
buyMask: false, //添加购物车直接购买，查看已选 弹窗
@ -523,9 +527,9 @@ export default {
let response = await getGoods(id, goodsId);
if (!response.data.success) {
setTimeout(()=>{
setTimeout(() => {
uni.navigateBack();
},500)
}, 500);
}
// 这里是绑定分销员
if (distributionId || this.$store.state.distributionId) {
@ -625,14 +629,14 @@ export default {
*/
closePopupAddress(val) {
this.addressFlag = val;
this.maskFlag = false;
// this.maskFlag = false;
},
/**
* 商品规格子级关闭回调
*/
closePopupBuy(val) {
this.buyMask = val;
this.maskFlag = false;
// this.maskFlag = false;
},
/** 参与拼团 创建拼团 */
@ -708,7 +712,7 @@ export default {
*/
getGoodsCollectionFun(goodsId) {
if (storage.getHasLogin()) {
API_Members.getGoodsIsCollect("GOODS",goodsId ).then((res) => {
API_Members.getGoodsIsCollect("GOODS", goodsId).then((res) => {
this.favorite = res.data.result;
});
}
@ -775,22 +779,21 @@ export default {
* 规格弹窗开关
*/
shutMask(flag, buyFlag, type) {
// type是指是否点击底部按钮
this.promotionFlag = false;
this.buyMask = false;
this.addressFlag = false;
if (flag) {
switch (flag) {
case 1: //优惠券弹窗
this.maskFlag = true;
this.cuxiao = true;
this.promotionFlag = true;
break;
case 3:
this.maskFlag = true;
this.addressFlag = true;
break;
case 4: //添加购物车直接购买，查看已选 弹窗
// 判断是否是一个规格
this.maskFlag = true;
this.buyMask = true;
if (buyFlag == "PINTUAN") {
if (type.orderSn) {
@ -804,10 +807,6 @@ export default {
break;
}
} else {
this.maskFlag = false;
this.cuxiao = false;
this.buyMask = false;
}
},
@ -820,7 +819,7 @@ export default {
this.deleteGoodsCollectionFun(id);
return false;
}
API_Members.collectionGoods("GOODS",id ).then((res) => {
API_Members.collectionGoods("GOODS", id).then((res) => {
if (res.data.success) {
uni.showToast({
title: "收藏成功!",

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 {

10
pages/tabbar/home/index.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="wrapper">
<!-- 楼层装修组件 -->
<tpl />
<tpl ref="tpl" />
</div>
</template>
<script>
import tpl from "@/pages/tabbar/home/views.vue";
export default {
data() {
return {
background: {
@ -16,13 +15,16 @@ export default {
},
};
},
onPullDownRefresh() {
this.$refs.tpl.init();
uni.stopPullDownRefresh();
},
components: {
tpl,
},
};
</script>
<style lang="scss" scoped>
</style>

1
pages/tabbar/home/views.vue
View File

@ -108,6 +108,7 @@ export default {
* 实例化首页数据楼层
*/
init() {
this.pageData = ""
getFloorData().then((res) => {
if (res.data.success) {
this.pageData = JSON.parse(res.data.result.pageData);