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商城", "name" : "lili商城",
"appid" : "__UNI__C100675", "appid" : "__UNI__C100675",
"description" : "", "description" : "",
"versionName" : "4.0.44", "versionName" : "4.0.45",
"versionCode" : 4000044, "versionCode" : 4000045,
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
"compatible" : { "compatible" : {

3
pages.json
View File

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

67
pages/product/goods.vue
View File

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

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

@ -1,5 +1,5 @@
<template> <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="header-title">选择地址</view>
<view class="view-box" v-if="addressDetail"> <view class="view-box" v-if="addressDetail">
<view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)"> <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> <template>
<div class="wrapper"> <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-box bottom">
<view class="goods-header"> <view class="goods-header">
<view class="goods-img"> <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>
<view class="goods-skus"> <view class="goods-skus">
@ -13,11 +15,11 @@
<view class="goods-price " v-if="goodsDetail.promotionPrice"> <view class="goods-price " v-if="goodsDetail.promotionPrice">
<span v-if="goodsDetail.promotionPrice && !pointDetail"> <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] }} .{{ formatPrice(goodsDetail.promotionPrice)[1] }}
</span> </span>
<span v-if="pointDetail.points"> <span v-if="pointDetail.points">
<span class="goods-price-promotionShow goods-price-bigshow">{{ pointDetail.points }}</span> <span class="goods-price-promotionShow goods-price-bigshow">{{ pointDetail.points }}</span>
积分 积分
</span> </span>
@ -56,21 +58,25 @@
<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="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view> <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> @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</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" :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> </u-number-box>
</view> </view>
</view> </view>
<!-- 按钮 --> <!-- 按钮 -->
<view class="btns"> <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 class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
</view> </view>
</view> </view>
@ -101,7 +107,6 @@ export default {
formatList: [], formatList: [],
currentSelceted: [], currentSelceted: [],
skuList: "", skuList: "",
isMask: false, //是否显示遮罩层
isClose: false, //是否可以点击遮罩关闭 isClose: false, //是否可以点击遮罩关闭
}; };
}, },
@ -129,8 +134,6 @@ export default {
}, },
methods: { methods: {
// 格式化金钱 1999 --> [1999,00] // 格式化金钱 1999 --> [1999,00]
formatPrice(val) { formatPrice(val) {
if (typeof val == "undefined") { if (typeof val == "undefined") {
@ -168,7 +171,10 @@ export default {
}; };
this.selectName = specValue.value; 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) { if (this.buyType) {
data.cartType = "PINTUAN"; data.cartType = "PINTUAN";
} } else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
else if(this.goodsDetail.goodsType == 'VIRTUAL_GOODS'){ data.cartType = "VIRTUAL";
data.cartType = "VIRTUAL"; } else {
}
else {
data.cartType = "BUY_NOW"; data.cartType = "BUY_NOW";
} }

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

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

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

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

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

@ -7,11 +7,19 @@
<view v-if="prom.split('-')[0] == 'FULL_DISCOUNT'"> <view v-if="prom.split('-')[0] == 'FULL_DISCOUNT'">
<div class="res_prom_item" v-if="res[prom].fullMinus"> <div class="res_prom_item" v-if="res[prom].fullMinus">
<u-tag text="满减" type="error"></u-tag> <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>
<div class="res_prom_item" v-if="res[prom].fullRate"> <div class="res_prom_item" v-if="res[prom].fullRate">
<u-tag text="打折" type="error"></u-tag> <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> </div>
</view> </view>
@ -19,14 +27,15 @@
<div class="res_prom_item" v-if="res[prom].requiredNum"> <div class="res_prom_item" v-if="res[prom].requiredNum">
<u-tag text="拼团" type="error"></u-tag> <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> </div>
</view> </view>
<view v-if="prom.split('-')[0] == 'SECKILL'"> <view v-if="prom.split('-')[0] == 'SECKILL'">
<div class="res_prom_item"> <div class="res_prom_item">
<u-tag text="限时抢购" type="error"></u-tag> <u-tag text="限时抢购" type="error"></u-tag>
<span class="proText">限时抢购</span> <span class="pro-text">限时抢购</span>
</div> </div>
</view> </view>
</view> </view>
@ -68,13 +77,16 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.proText { .pro-text {
font-size: 26rpx; font-size: 26rpx;
font-family: PingFang SC, PingFang SC-Regular; font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
color: #333333; color: #333333;
margin-left: 20rpx; margin-left: 20rpx;
> span {
margin-right: 15rpx;
}
} }
.wrapper { .wrapper {

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

@ -16,7 +16,22 @@ page {
border-radius: 200px; border-radius: 200px;
line-height: 18rpx; 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 { .detail-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@ -326,50 +341,6 @@ page {
width: 100%; width: 100%;
height: 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 { .u-mode-light-error {

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

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

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

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