Skip to content

7
7-Eleven
Commit 91b827c3 by 谢中龙
Options

商品详情优化

parent d41cede1
Showing with 377 additions and 46 deletions
src/app.json
......@@ -112,7 +112,8 @@
"pages/moneyBuyCouponInfo/moneyBuyCouponInfo",
"pages/moneyBuyCouponRecords/moneyBuyCouponRecords",
"pages/TimelimitedSales/TimelimitedSales",
"pages/belongWithGuide/belongWithGuide"
"pages/belongWithGuide/belongWithGuide",
"pages/promotionProducts/promotionProducts"
]
},
{
......
src/pages/productDetail/productDetail.js
......@@ -91,13 +91,55 @@ wxService.page({
});
},
//关闭果冻
//关闭促销模态框
onTapClosePromotion(){
this.setData({
promotionModal : false,
});
},
//获取商品参与的促销活动列表
getProductPromotions(){
wxService.post(`/marketing/couponActivitySet/findProductIdGetPromotionActivity?productId=${this.data.productId}`).then(res => {
if(res){
let list = res.data.data ? res.data.data : [];
let promotionTypeConst = {1:'满减满折',2:'一口价',3:'限时折扣',4:'限时调价',5:'限时抢购'};
//type 促销活动类型 1满减满折，2一口价 ,3限时折扣 ，4限时调价 ，5限时抢购
list.forEach(item => {
item.promotionType = promotionTypeConst[item.type];
});
this.data.promotionList = list;
this.setData({
promotionList : this.data.promotionList
});
}
});
},
//跳转到活动列表
onTapToActivityInfo(e){
console.log(e)
let item = e.currentTarget.dataset.item;
//限时抢购
if(item.type == 5){
wx.navigateTo({
url: '/subPackageA/page/pages/TimelimitedSales/TimelimitedSales',
});
return;
}
//一口价
if(item.type == 2){
wx.navigateTo({
url: `/subPackageA/page/pages/promotionProducts/promotionProducts?id=${item.activityId}&type=${item.type}`,
});
return ;
}
},
//领券弹出层
onTapToGetCoupon(){
this.setData({
......@@ -117,6 +159,8 @@ wxService.page({
if(res){
let list = res.data.data ? res.data.data : [];
list.forEach(item => {
item.userHasGot = this.todayHasGot(item.id);
//2 包邮券 1 普通券
if(item.couponType == 2){
item.couponTypeDesc = '包邮券';
item.moneyText = parseFloat(item.faceAmount/10/10).toFixed(1);
......@@ -129,6 +173,7 @@ wxService.page({
else if(item.type == 2){
item.couponTypeDesc = '折扣券';
item.moneyText = parseFloat(item.faceAmount/10).toFixed(1);
item.moneyText = item.moneyText.lastIndexOf('0') > -1 ? parseInt(item.moneyText) : item.moneyText;
}
else if(item.type == 3){
item.couponTypeDesc = '定额券';
......@@ -156,7 +201,6 @@ wxService.page({
this.setData({
goodsCouponList : this.data.goodsCouponList,
})
}
})
},
......@@ -173,12 +217,7 @@ wxService.page({
return ;
}
if(this.todayHasGot(item.id)){
wx.showToast({
title: '您今天已经领取过了，请明天再来领取吧',
icon : 'none'
});
if(item.userHasGot){
return ;
}
......@@ -342,6 +381,8 @@ wxService.page({
//获取优惠券领取活动列表
this.getGoodsCouponActivityList();
//获取商品参与的促销活动
this.getProductPromotions();
this.getProInfo()
this.getOpenStatus()
this.data.currentShareContent = null;
......
src/pages/productDetail/productDetail.wxml
......@@ -112,7 +112,12 @@
<label>促销</label>
<view class="right-ac-info clear-box">
<view class="coupon-flex">
<view class="ac-pro-item clear-box">满100减50元</view>
<view class="ac-pro-item clear-box"
wx:for="{{promotionList}}"
wx:for-item="item"
wx:for-index="idx"
wx:if="{{idx < 2}}"
wx:key="*this">{{item.activityName}}</view>
</view>
<image src="/assets/imgs/arrow-right.png"></image>
</view>
......@@ -226,7 +231,7 @@
<!--goHome-->
<!--<go-home/>-->
<!-- 领券 -->
<view class="coupon-activity-modal {{showCouponList ? 'active' : ''}}" bindtap="onTapCloseGetCoupon"></view>
<view class="coupon-activity-modal {{showCouponList ? 'active' : ''}}" bindtap="onTapCloseGetCoupon" catchtouchmove= 'return' catchtouchmove="return"></view>
<view class="coupon-activity-content {{showCouponList ? 'active' : ''}}">
<view class="coupon-header">领券</view>
<view class="content-body">
......@@ -256,8 +261,11 @@
<view class="right-btn">
<button wx:if="{{!currentHasUserInfo}}" bindgetuserinfo="_getUserInfo" data-jflag="false" open-type='getUserInfo' hover-class="btn-hover">
<view>立即领取</view>
<!-- <view wx:if="{{item.userHasGot}}">已领取</view> -->
</button>
<view wx:if="{{currentHasUserInfo}}" data-item="{{item}}" bindtap="onTapSureGetCoupon">立即领取</view>
<view wx:if="{{currentHasUserInfo}}" class="{{item.userHasGot ? 'user-has-got' : ''}}" data-item="{{item}}" bindtap="onTapSureGetCoupon">
{{item.userHasGot ? '已领取' : '立即领取'}}
</view>
</view>
</view>
</view>
......@@ -266,44 +274,22 @@
</view>
</view>
<!-- 促销活动 -->
<view class="coupon-activity-modal {{promotionModal ? 'active' : ''}}" bindtap="onTapClosePromotion"></view>
<view class="coupon-activity-modal {{promotionModal ? 'active' : ''}}" bindtap="onTapClosePromotion" catchtouchmove="return" catchtouchmove="return"></view>
<view class="coupon-activity-content {{promotionModal ? 'active' : ''}}">
<view class="coupon-header">商品参与促销活动</view>
<view class="content-body">
<view class="promition-item">
<view class="promotions-name">
<view class="promotion-type">满减满折</view>
<view class="pro-title">6.6～6.12每满200-15</view>
</view>
<!-- <image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image> -->
</view>
<view class="promition-item">
<view class="promotions-name">
<view class="promotion-type">一口价</view>
<view class="pro-title">6.6～6.12每满200-15</view>
</view>
<image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image>
</view>
<view class="promition-item">
<view class="promotions-name">
<view class="promotion-type">限时折扣</view>
<view class="pro-title">6.6～6.12每满200-15</view>
</view>
<!-- <image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image> -->
</view>
<view class="promition-item">
<view class="promotions-name">
<view class="promotion-type">限时调价</view>
<view class="pro-title">6.6～6.12每满200-15</view>
</view>
<!-- <image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image> -->
</view>
<view class="promition-item">
<view class="promition-item"
wx:for="{{promotionList}}"
wx:for-item="item"
wx:key="*this"
data-item="{{item}}"
bindtap="onTapToActivityInfo"
wx:for-index="idx" >
<view class="promotions-name">
<view class="promotion-type">限时抢购</view>
<view class="pro-title">6.6～6.12每满200-15</view>
<view class="promotion-type">{{item.promotionType}}</view>
<view class="pro-title">{{item.activityName}}</view>
</view>
<image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image>
<image src="/assets/imgs/arrow-right.png" mode="aspectFit" wx:if="{{item.type == 2 || item.type == 5}}"></image>
</view>
</view>
<view class="content-footer">
......
src/pages/productDetail/productDetail.wxss
......@@ -527,6 +527,18 @@ page{
justify-content: center;
}
.coupon-activity-content .content-body .content-body-item .right-btn view.user-has-got{
width: 110rpx;
height: 40rpx;
background: #cccccc;
color: #999999;
font-size: 22rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.coupon-activity-content .content-body .content-body-item .right-btn view:active{
opacity: 0.7;
}
......@@ -602,7 +614,7 @@ page{
.promition-item .promotions-name .pro-title{
font-size: 28rpx;
width: 400rpx;
width: 440rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
src/project.config.json
......@@ -694,6 +694,13 @@
"pathName": "subPackageA/page/pages/payCardInfo/payCardInfo",
"query": "id=710195552385654784",
"scene": null
},
{
"id": 96,
"name": "活动下商品列表",
"pathName": "subPackageA/page/pages/promotionProducts/promotionProducts",
"query": "id=711528674700169216&type=2",
"scene": null
}
]
}
......
src/subPackageA/page/pages/promotionProducts/promotionProducts.js 0 → 100644
const wxService = require('../../../../utils/wxService')
const utils = require('../../../../utils/util')
const envInfo = require('../../../../config/index').envInfo
const app = getApp();
const PTOMOTION_TYPE = {1:'满减满折',2:'一口价',3:'限时折扣',4:'限时调价',5:'限时抢购'}
wxService.page({
/**
* 页面的初始数据
*/
data: {
activityId : '',
type : '',
goodsList : [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.hideShareMenu();
this.data.activityId = options.id ;
this.data.type = options.type;
wx.setNavigationBarTitle({
title: PTOMOTION_TYPE[this.data.type],
});
if(this.data.type == 2){
this.getFixedActivityInfo();
}
},
//跳转到商品详情
onTapToGoodsDetail(e){
let item = e.currentTarget.dataset.item;
let productId = item.productId;
wx.navigateTo({
url: '/pages/productDetail/productDetail?id=' + productId,
});
},
//获取一口价详情
getFixedActivityInfo(){
wxService.post(`/marketing/itemPriceActivity/getDetail?id=${this.data.activityId}`).then(res => {
if(res){
let data = res.data.data ? res.data.data : null;
if(data){
let iteamPrice = data.iteamPrice;
let productInfos = data.productInfos;
let productIds = productInfos.map(item => {
return item.productId;
});
let proIds = new Set(productIds);
this.getProductsByIds([...proIds],productInfos,iteamPrice);
}
}
})
},
//根据商品Ids获取商品列表
getProductsByIds(ids,productInfos,iteamPrice){
wxService.post(`/sale/product/listPage?pageNo=1&pageSize=10000`,{
productIds : ids,
showListUrls : true,
}).then(res => {
if(res){
let list = res.data.data.content ? res.data.data.content : [];
this.data.goodsList = list;
list.forEach(item => {
item.indexUrl = utils.getFirstImgUrl(item.listUrls);
item.price = parseFloat(item.minSalePrice/10/10).toFixed(2);
});
this.setData({
goodsList : this.data.goodsList
});
}
});
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
})
\ No newline at end of file
src/subPackageA/page/pages/promotionProducts/promotionProducts.json 0 → 100644
{
"navigationBarTitleText": "",
"usingComponents": {}
}
\ No newline at end of file
src/subPackageA/page/pages/promotionProducts/promotionProducts.wxml 0 → 100644
<!--subPackageA/page/pages/promotionProducts/promotionProducts.wxml-->
<view class='main-container'>
<view>
<!-- list -->
<view class='goods-list' wx:if="{{goodsList.length > 0}}">
<view class='goods-item'
wx:for="{{goodsList}}"
wx:for-item="item"
wx:for-index="idx"
data-item="{{item}}"
bindtap='onTapToGoodsDetail'
wx:key="*this">
<image class='goods-lf-icon' src='{{item.indexUrl}}' mode='aspectFit'></image>
<view class='goods-rg-info'>
<view class='goods-title'>{{item.productName}}</view>
<view class='goods-second-title'>{{item.subtitle}}</view>
<view class='goods-price'>
<view class='price'>
<view class='plus'>
<!-- <image src='/assets/imgs/point.png' mode='aspectFit'></image> -->
￥<text class='original-price'>{{item.price}}</text>
</view>
<!-- <view class='original-price'>￥126.08</view> -->
</view>
</view>
</view>
</view>
</view>
</view>
<view class='empty' wx:if="{{goodsList.length == 0}}">活动中未配置商品或商品已下架~</view>
</view>
src/subPackageA/page/pages/promotionProducts/promotionProducts.wxss 0 → 100644
/* subPackageA/page/pages/promotionProducts/promotionProducts.wxss */
page{
background: #f2f2f2;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 28rpx;
color: #333333;
}
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* 商品信息布局 */
/* 主要布局 */
.main-container{
width: 100%;
height: auto;
padding: 0 30rpx;
background: #ffffff;
margin-top: 10rpx;
}
.mg-b-40{
margin-bottom: 40rpx;
}
/* 爆款 */
.goods-list{
width: 100%;
height: auto;
}
.goods-list .goods-item{
background: #ffffff;
display: flex;
padding: 20rpx 0;
border-bottom: solid 1rpx #dddddd;
}
.goods-list .goods-item:last-child{
border-bottom: none;
}
.goods-list .goods-item .goods-lf-icon{
flex: 0;
min-width: 180rpx;
max-width: 180rpx;
height: 180rpx;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
display: flex;
align-items: center;
}
.goods-list .goods-item .goods-rg-info{
flex: 1;
padding: 15rpx 20rpx;
font-size: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.goods-list .goods-item .goods-rg-info .goods-title{
color: #333333;
font-size: 28rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: bold;
margin-bottom: 8rpx;
}
.goods-list .goods-item .goods-rg-info .goods-second-title{
font-size: 22rpx;
color: #999999;
margin-bottom: 20rpx;
}
.goods-list .goods-item .goods-rg-info .goods-price{
display: flex;
align-items: flex-end;
}
.goods-list .goods-item .goods-rg-info .goods-price .price{
flex: 1;
}
.goods-list .goods-item .goods-rg-info .goods-price .price .original-price{
font-weight: bold;
font-size: 32rpx;
}
.goods-list .goods-item .goods-rg-info .goods-price .price .plus{
display: flex;
align-items: center;
color: #ff3333;
margin-bottom: 8rpx;
font-size: 22rpx;
}
.goods-list .goods-item .goods-rg-info .goods-price .price .plus image{
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
}
.goods-list .goods-item .goods-rg-info .goods-share{
flex: 0;
min-width: 220rpx;
max-width: 220rpx;
height: 52rpx;
border: solid 2rpx #ff3333;
border-radius: 26rpx;
display: flex;
font-size: 22rpx;
}
.goods-list .goods-item .goods-rg-info .goods-share .send-coupon{
flex: 0;
min-width: 50%;
max-width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.goods-list .goods-item .goods-rg-info .goods-share .send-coupon:first-child{
color: #FA6400;
}
.goods-list .goods-item .goods-rg-info .goods-share .send-coupon:first-child:active{
opacity: 0.7;
}
.goods-list .goods-item .goods-rg-info .goods-share .send-coupon:last-child:active{
opacity: 0.7;
}
.goods-list .goods-item .goods-rg-info .goods-share .send-coupon:last-child{
color: #ffffff;
background: #ff3333;
border-top-right-radius: 26rpx;
border-bottom-right-radius: 26rpx;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment