Skip to content

严立 / mini-shimao

Go to a project
Commit 1bf256b3 by 严立
Options

LL - 商品列表对接接口

parent 37af23b2
Inline Side-by-side
Showing with 797 additions and 421 deletions
app.js
import iMiment from './npm/miment.js'
import iUtils from './utils/utils.js'
import iEnvironmental from './environmental.js'
App({
modular: {
......@@ -10,10 +11,12 @@ App({
globalData: {
appImageBase: '../../../image/',
appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResourcesS2/',
shopId: iEnvironmental.shopId,
token: '',
refreshToken: '',
userInfo: null,
baseUrl: 'https://sm-web.meiqicloud.com',//测试
baseUrl: 'https://sm-web2.meiqicloud.com',//测试
// baseUrl: 'https://smbhyh-web.meiqicloud.com',//生产
debug: true,
},
......@@ -22,18 +25,6 @@ App({
this.setUnitProportion()
},
onShow: function (options) {
},
onHide: function () {
},
onError: function (msg) {
},
setUnitProportion: function () {
let funcProportion = wx.getSystemInfoSync().windowWidth / 750
wx.setStorageSync('unitProportion', funcProportion)
......@@ -72,11 +63,11 @@ App({
obj.success(res.data)
}
} else if (402 == code) { // token失效
that.refreshToken({
success: function () {
that.wxRequest(obj)
}
})
// that.refreshToken({
// success: function () {
// that.wxRequest(obj)
// }
// })
} else {
if (obj.fail) {
let err = {
......@@ -120,11 +111,13 @@ App({
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log('wx.login:', res);
this.wxRequest({
url: '/api/v1/login/getSmallSession?code=' + res.code,
method: 'GET',
success: function (res) {
console.log(res)
that.globalData.token = res.data.token
that.globalData.refreshToken = res.data.refreshToken
wx.setStorageSync('expires_in', res.data.expires_in)
......
app.json
{
"pages": [
"pages/commodity/shopping-cart/shopping-cart",
"pages/home/home/home",
"pages/home/dynamic/dynamic",
......@@ -22,7 +22,7 @@
"pages/play/strategy-detail/strategy-detail",
"pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/food/food",
"pages/commodity/project/project",
"pages/commodity/snacks/snacks",
......
environmental.js 0 → 100644
let Environmental = 'dev'
let Development = {
host: 'https://sm-web.meiqicloud.com',
shopId: [
{
miniAppId: 1,
databaseId: '581be62a80bb4f0485abd87abcf64dc0',
name: '海错图1号馆',
}, {
miniAppId: 2,
databaseId: '26c40446fc454a02abe61758176597f6',
name: '拾光花坊',
}, {
miniAppId: 3,
databaseId: '2614f117406548718bc091f24368c16e',
name: '元养水韵SPA',
}, {
miniAppId: 4,
databaseId: 'd9436d7018de43809824b6ec221ea01f',
name: '原味舒食',
}, {
miniAppId: 5,
databaseId: 'c63893bb472f43bca4ec72f890bcb4fd',
name: '原野MOJITO',
}, {
miniAppId: 6,
databaseId: '3cfe2e3b8b4342e8b62f8b45daf60d91',
name: '5D星空影院',
}, {
miniAppId: 7,
databaseId: '8a3e59c57f564c569b3d7bb278ea50b3',
name: '儿童营地',
}
]
}
let Production = {
host: 'https://smbhyh-web.meiqicloud.com',
}
export default Environmental === 'dev' ? Development : Production
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.js
// pages/shimao/index.js
let App = getApp()
Page({
data: {
shoppingCart: [], // 购物车列表
shoppingCartSelection: 0, // 购物车选择数量
totalNum: 3,
totalPrice: 840.00,
discount: 270.00,
allChecked: false,
isFoodCart: true,
isEnough: false,
cart: [
{
cart: [{
goods_id: 0,
goods_name: '雪碧迷你瓶装300ml',
goods_now_price: 49.00,
......@@ -47,8 +56,7 @@ Page({
img: './image/item01.png'
}
],
notEnough: [
{
notEnough: [{
id: 0,
img: './image/item01.png',
title: '葱爆牛肉佐秘制麻椒汁'
......@@ -60,6 +68,18 @@ Page({
}
]
},
onLoad: function () {
// 读取上级页面的购物车数据，默认选中所有。
let funcShoppingCart = wx.getStorageSync('shoppingCartBuffer')
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
funcShoppingCart[i].isActive = true
}
this.setData({
shoppingCart: funcShoppingCart
})
},
handleItemNumEdit(e) {
const operation = e.currentTarget.dataset.operation
const goods_id = e.currentTarget.dataset.id
......@@ -69,9 +89,9 @@ Page({
console.log('没有库存')
} else if (cart[index].goods_num === 1 && operation === -1) {
wx.lin.showDialog({
type:"confirm",
title:"温馨提示",
content:"您是否要删除该商品？",
type: "confirm",
title: "温馨提示",
content: "您是否要删除该商品？",
confirmColor: "#5DB5DD",
cancelColor: "#656E7B",
titleColor: "#15191F",
......@@ -93,7 +113,7 @@ Page({
const goods_id = e.currentTarget.dataset.id
let cart = this.data.cart
const index = cart.findIndex(v => v.goods_id === goods_id)
cart[index].checked = !cart[index].checked
cart[index].isActive = !cart[index].isActive
this.setCart(cart)
},
handleItemAllCheck() {
......@@ -114,7 +134,7 @@ Page({
allChecked = false
}
})
allChecked = cart.length!=0 ? allChecked : false
allChecked = cart.length != 0 ? allChecked : false
this.setData({
cart,
allChecked,
......@@ -124,9 +144,9 @@ Page({
},
handleClearCart() {
wx.lin.showDialog({
type:"confirm",
title:"温馨提示",
content:"确定要清空购物车？",
type: "confirm",
title: "温馨提示",
content: "确定要清空购物车？",
confirmColor: "#5DB5DD",
cancelColor: "#656E7B",
titleColor: "#15191F",
......@@ -152,4 +172,4 @@ Page({
isEnough
})
},
})
\ No newline at end of file
})
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.json
......@@ -2,7 +2,6 @@
"usingComponents": {
"Tips": "../../../component/Tips/Tips",
"Blank": "../../../component/Blank/Blank"
},
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff",
......
pages/commodity/shopping-cart/shopping-cart.wxml
......@@ -5,57 +5,51 @@
<view class="header_title">儿童营地</view>
<view class="header_clear row align-c" bindtap="handleClearCart">清空</view>
<!-- 清空弹窗 -->
<l-dialog l-content-class="l-content" l-cancel-class="l-cancel" title-color="#15191F" cancel-color="#656E7B" confirm-color="#5DB5DD"/>
<l-dialog l-content-class="l-content" l-cancel-class="l-cancel" title-color="#15191F" cancel-color="#656E7B" confirm-color="#5DB5DD" />
</view>
<scroll-view scroll-y class="item_list">
<view class="item row" wx:for="{{cart}}" wx:key="id">
<radio-group class="item_checked" bindtap="handleItemCheck" data-id="{{item.goods_id}}">
<radio checked="{{item.checked}}" color="#86C5E1"></radio>
</radio-group>
<view class="item_img">
<image src="{{item.img}}" mode="widthFix"/>
</view>
<view class="item_info">
<view class="item_info_title">{{item.goods_name}}</view>
<view class="item_info_now_price row align-c">
<view><text>￥</text>{{item.goods_now_price}}</view>
<view
class="item_now_price_text {{item.goods_now_text === '业主价' ? 'vipPrice' : ''}}"
wx:if="{{item.goods_now_text}}"
>
{{item.goods_now_text}}
</view>
<view class="goods_num_tool_wrapper col align-e">
<view class="goods_num_tool row con-c align-c">
<!-- <l-counter l-class="l-counter" l-symbol-class="l-symbol" l-disabled-class="l-disabled" l-count-class="l-count" count="{{item.goods_num}}" min="0" max="{{item.store_num}}"></l-counter> -->
<view
class="num_edit row con-c align-c"
bindtap="handleItemNumEdit"
data-id="{{item.goods_id}}"
data-operation="{{-1}}"
>-</view>
<view class="goods_num row con-c align-c">{{item.goods_num}}</view>
<view
class="num_edit row con-c align-c {{item.store_num === item.goods_num ? 'disable' : ''}}"
bindtap="handleItemNumEdit"
data-id="{{item.goods_id}}"
data-operation="{{1}}"
>+</view>
</view>
<view wx:if="{{item.store_num < 5}}" class="lack_wraning">仅剩{{item.store_num}}件</view>
<view class="shopping-cart-list">
<block wx:for="{{shoppingCart}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="list-item row">
<view class="list-item-radio row con-c align-c">
<radio checked="{{item.isActive}}" color="#86C5E1"></radio>
</view>
<view class="list-item-cover">
<image src="{{item.cover}}" mode="widthFix" />
</view>
<view class="list-item-info col con-b">
<view class="list-item-name">
<text>{{item.name}}</text>
</view>
<view class="list-item-other row con-b">
<view class="list-item-price">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>520.00</text>
<text class="price-discount">活动价</text>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>49.00</text>
</view>
<view class="item_info_old_price" wx:if="{{item.goods_old_price}}">
<text class="price_symbol">￥</text>
<text>{{item.goods_old_price}}</text>
</view>
<view class="list-item-quantity col con-e align-e">
<view class="list-item-quantity-operation row con-b align-c">
<text bindtap="handleItemNumEdit">-</text>
<text>{{item.quantity}}</text>
<text bindtap="handleItemNumEdit">+</text>
</view>
<view class="list-item-quantity-warning" hidden="{{item.store_num < 5}}">
<text>{{'仅剩' + item.store_num + '件'}}</text>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 只有在食品购物车才出现 -->
<view class="tips-wrapper" wx:if="{{isFoodCart && cart.length > 0}}" >
<view class="tips-wrapper" wx:if="{{isFoodCart && cart.length > 0}}">
<Tips text="请在下单内3天内取餐，逾期无效"></Tips>
</view>
......@@ -67,7 +61,8 @@
</view>
<view class="total_price_wrap">
<view class="total_price">
￥<text class="total_price_text">{{totalPrice}}</text>
￥
<text class="total_price_text">{{totalPrice}}</text>
</view>
<view class="total_discount">共{{totalNum}}件，优惠 ￥{{discount}}</view>
</view>
......
pages/commodity/shopping-cart/shopping-cart.wxss
......@@ -22,144 +22,147 @@ Page {
.header_title {
flex: 1;
color: #C36069;
color: #c36069;
}
.header_clear {
height: 100%;
color: #656E7B;
color: #656e7b;
}
.l-content {
color: #959DA9 !important;
color: #959da9 !important;
}
.item_list {
/* 购物车列表 */
.shopping-cart-list {
width: 100%;
height: calc(100vh - 390rpx);
margin-top: 10rpx;
}
.item {
.list-item {
width: 100%;
height: 250rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
.item_checked {
.list-item-radio {
width: 40rpx;
height: 40rpx;
margin-top: 54rpx;
margin: 54rpx 24rpx 0 0;
}
.item_img {
.list-item-radio radio {
transform: scale(0.7);
}
.list-item-cover image {
width: 148rpx;
height: 148rpx;
margin-left: 24rpx;
margin-right: 30rpx;
}
.item_info {
flex: 1;
margin-left: 28rpx;
.list-item-info {
width: 430rpx;
height: 168rpx;
}
.item_info_title {
.list-item-name {
min-height: 108rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
}
.list-item-price-main text:nth-child(1) {
height: 42rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
}
.item_info_now_price {
margin-top: 66rpx;
.list-item-price-main text:nth-child(2) {
height: 42rpx;
margin-right: 8rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
}
.item_now_price_text {
.list-item-price-main .price-discount {
width: 78rpx;
height: 32rpx;
margin-left: 4px;
border-radius: 4px;
background: #FAEDEA;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 30rpx;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
.list-item-price-minor text {
height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.goods_num_tool_wrapper {
flex: 1;
position: relative;
.list-item-quantity {
flex-grow: 1;
}
.goods_num_tool {
.list-item-quantity-operation {
width: 168rpx;
height: 48rpx;
padding: 12rpx 0;
box-sizing: border-box;
padding: 0 16rpx;
border: 1px solid #DBDFE5;
border-radius: 4rpx;
border-radius: 4px;
}
.l-counter {
border: 1px solid #DBDFE5;
border-radius: 4rpx;
box-sizing: border-box;
.list-item-quantity-operation text:nth-child(1) {
width: 24rpx;
height: 24rpx;
line-height: 24rpx;
}
.l-symbol, .l-disabled, .l-count {
background-color: #fff !important;
.list-item-quantity-operation text:nth-child(2) {
height: 36rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #15191F;
}
.l-symbol, .l-count {
color: #15191F !important;
.list-item-quantity-operation text:nth-child(3) {
width: 24rpx;
height: 24rpx;
line-height: 24rpx;
}
.l-count {
border-left: 1px solid #DBDFE5;
border-right: 1px solid #DBDFE5;
min-height: 0rpx !important;
}
.list-item-quantity-warning {
width: 168rpx;
height: 32rpx;
margin-top: 8rpx;
.num_edit {
flex: 1;
text-align: center;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #D92B3A;
}
.goods_num {
flex: 1;
border-left: 1px solid #DBDFE5;
border-right: 1px solid #DBDFE5;
}
.disable {
color: #DBDFE5;
}
.lack_wraning {
position: absolute;
top: 56rpx;
right: 84rpx;
transform: translateX(50%);
color: #D92B3A;
font-size: 22rpx;
}
.item_info_old_price {
margin-top: 4rpx;
font-size: 22rpx;
color: #959DA9;
text-decoration:line-through
}
text {
font-size: 22rpx;
}
.tips-wrapper {
position: absolute;
......@@ -178,13 +181,13 @@ text {
display: flex;
padding: 0 40rpx 36rpx 36rpx;
box-sizing: border-box;
border-top: 1px solid #E2E7EF;
border-top: 1px solid #e2e7ef;
}
.all_chk_wrap {
flex: 3;
font-size: 26rpx;
color: #15191F;
color: #15191f;
}
.total_price_wrap {
......@@ -194,7 +197,7 @@ text {
}
.total_price {
color: #86C5E1;
color: #86c5e1;
}
.total_price_text {
......@@ -210,8 +213,9 @@ text {
height: 96rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
background-color: #86c5e1;
}
.popup_wrap {
width: 606rpx;
height: 690rpx;
......@@ -219,38 +223,44 @@ text {
background-color: #fff;
border-radius: 4rpx;
}
.popup_title {
padding: 56rpx 0;
font-size: 34rpx;
font-weight: 600;
color: #15191F;
color: #15191f;
text-align: center;
border-bottom: 1px solid #E2E7EF;
border-bottom: 1px solid #e2e7ef;
}
.popup_list {
padding: 26rpx 0;
}
.popup_item {
padding: 32rpx 0;
}
.popup_item_img {
width: 96rpx;
height: 96rpx;
}
.popup_item_title {
margin-left: 32rpx;
font-size: 30rpx;
color: #15191F;
color: #15191f;
}
.popup_back_cart {
width: 526rpx;
height: 80rpx;
margin-top: 32rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
background-color: #86c5e1;
}
image {
width: 100%;
height: 100%;
......
pages/commodity/snacks/snacks.js
let App = getApp()
Page({
data: {
shopId: '',
sideBar: [], // 侧边菜单
menuTitle: '', // 商品列表标题
commodityList: [], // 商品列表
commodityDetail: {}, // 商品详情
shoppingCart: [], // 购物车列表
shoppingCartTotal: 0, // 购物车总数
currentIndex: 0,
scrollTop: 0,
rightTitle: '优惠套餐',
showPopup: false,
showAddSucc: false,
leftMenuList: [
{
id: 0,
tab: '优惠套餐'
},
{
id: 1,
tab: '时令美食'
},
{
id: 2,
tab: '当地食材'
},
{
id: 3,
tab: '沙拉'
},
{
id: 4,
tab: '小食'
},
{
id: 5,
tab: '汤品'
},
{
id: 6,
tab: '主菜'
},
{
id: 7,
tab: '主食'
},
{
id: 8,
tab: '甜品'
},
{
id: 9,
tab: '饮品'
}
],
goodsItem: {
goods_id: 0,
goods_name: '雪碧迷你瓶装300ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 49.00,
goods_old_price: 42.00,
goods_now_text: '业主价',
goods_num: 1,
checked: true,
img: './image/cola.png'
},
cart: [
{
goods_id: 0,
goods_name: '雪碧迷你瓶装300ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 49.00,
goods_old_price: 42.00,
goods_now_text: '业主价',
goods_num: 1,
checked: true,
img: './image/cola.png'
},
{
goods_id: 1,
goods_name: '可口可乐300ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 52.00,
goods_old_price: 49.00,
goods_now_text: '活动价',
goods_num: 1,
checked: true,
img: './image/cola.png'
},
{
goods_id: 2,
goods_name: '葡萄汁饮料238ml',
goods_now_price: 30.00,
goods_num: 2,
checked: true,
img: './image/cola.png'
winToast: false,
winCommodityDetail: false,
},
onLoad: function () {
// 儿童营地小程序内部 id
let funcMiniAppId = 7
let funcShopId = App.globalData.shopId
for (let i = 0, l = funcShopId.length; i < l; i++) {
if (funcMiniAppId === funcShopId[i].miniAppId) {
this.setData({
shopId: funcShopId[i].databaseId
})
break
}
}
this.querySideBar()
},
/**
* 查询分类
* @function
* @param
* @returns
*/
querySideBar: function () {
App.wxRequest({
url: '/api/v1/commodity/getClassifys',
data: {
'officeId': this.data.shopId,
'genre': 5
},
success: (response) => {
let funcSideBar = []
let funcResponse = response.data
for (let i = 0, l = funcResponse.length; i < l; i++) {
let funcItem = {
'id': funcResponse[i].id,
'tab': funcResponse[i].name,
}
funcSideBar.push(funcItem)
}
this.setData({
sideBar: funcSideBar,
menuTitle: funcSideBar[0].tab
})
this.queryCommodity()
}
})
},
{
goods_id: 3,
goods_name: '牛奶苏打碳酸250ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 78,
goods_num: 12,
checked: false,
img: './image/cola.png'
}
],
popupObj: {
goods_now_text: '业主价'
/**
* 查询分类商品
* @function
* @param
* @returns
*/
queryCommodity: function () {
App.wxRequest({
url: '/api/v1/commodity/getCommoditys',
data: {
'officeId': this.data.shopId,
'classifyId': this.data.sideBar[this.data.currentIndex].id,
'genre': 5,
},
success: (response) => {
let funcCommodityList = []
let funcResponse = response.data
for (let i = 0, l = funcResponse.length; i < l; i++) {
let funcItem = {
'id': funcResponse[i].id,
'name': funcResponse[i].name,
'cover': funcResponse[i].coverImg, // 商品封面
'price': funcResponse[i].sightseerPrice, // 普通价
'priceSpecial': funcResponse[i].ownerPrice, // 业主价
'priceDiscount': funcResponse[i].price, // 活动价
'priceType': 1,
'describe': funcResponse[i].synopsis,
'tags': funcResponse[i].tags,
}
// 根据后台判断价格显示类型
// 活动价优先级最高，如果存在活动价，则只显示活动价和普通价
if (funcItem.priceDiscount) {
funcItem.priceType = 1
} else {
// 活动价不存在，进一步判断普通价与业主价是否一致，如果不一致，则显示两者
if (funcItem.price !== funcItem.priceSpecial) {
funcItem.priceType = 2
} else {
funcItem.priceType = 3
}
}
funcCommodityList.push(funcItem)
}
this.setData({
commodityList: funcCommodityList
})
}
})
},
handleItemTap(e) {
let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab
/**
* 侧边菜单选择事件
* @function
* @param {object} - event
* @returns
*/
onSelectionSideBar: function (event) {
let funcIndex = event.currentTarget.dataset.index
let funcMenuTitle = this.data.sideBar[funcIndex].tab
this.setData({
currentIndex: index,
rightTitle,
currentIndex: funcIndex,
menuTitle: funcMenuTitle,
scrollTop: 0
})
this.queryCommodity()
},
/**
* 查询商品详情
* @function
* @param {object} - event
* @returns
*/
onCommodityDetail: function (event) {
let funcItem = event.currentTarget.dataset.item
let funcCommodityId = funcItem.id
App.wxRequest({
url: '/api/v1/commodity/getCommodityParticulars',
data: {
'commodityId': funcCommodityId,
'genre': 5
},
handleAddCartPopup() {
let showPopup = true
success: (response) => {
let funcResponse = response.data
funcItem.banner = funcResponse.imgs.split('|')
this.setData({
showPopup
commodityDetail: funcItem,
winCommodityDetail: true
})
}
})
},
handleClosePopup() {
let showPopup = false
/**
* 关闭商品详情
* @function
* @param
* @returns
*/
onCommodityClose: function () {
this.setData({
showPopup,
winCommodityDetail: false
})
},
handleAddCart() {
let showPopup = false
let showAddSucc = true
/**
* 添加商品
* @function
* @param {object} - event
* @returns
*/
onCommodityAdd: function (event) {
let funcShoppingCart = this.data.shoppingCart
// 详情加入购物车按钮商品数据不会存在于 event 对象中，所以要区分
let funcItem = event.currentTarget.dataset.item
if (!funcItem) {
funcItem = this.data.commodityDetail
}
// 判断购物车中是否存在同类商品
// 修改相应的商品数量
if (funcShoppingCart.length !== 0) {
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
if (funcItem.id === funcShoppingCart[i].id) {
funcShoppingCart[i].quantity = funcShoppingCart[i].quantity + 1
break
}
if (i === funcShoppingCart.length - 1) {
funcItem.quantity = 1
funcShoppingCart.push(funcItem)
}
}
} else {
funcItem.quantity = 1
funcShoppingCart.push(funcItem)
}
// 重新计算购物车总数
let funcShoppingCartTotal = 0
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
funcShoppingCartTotal = funcShoppingCartTotal + funcShoppingCart[i].quantity
}
this.setData({
showPopup,
showAddSucc
shoppingCart: funcShoppingCart,
shoppingCartTotal: funcShoppingCartTotal,
winToast: true,
winCommodityDetail: false,
})
},
goToCart() {
/**
* 跳转购物车页面
* @function
* @param
* @returns
*/
onShoppingCart: function() {
console.log(this.data.shoppingCart)
wx.setStorageSync('shoppingCartBuffer', this.data.shoppingCart)
wx.navigateTo({
url: '/pages/commodity/shopping-cart/shopping-cart',
})
}
})
\ No newline at end of file
},
})
\ No newline at end of file
pages/commodity/snacks/snacks.json
{
"usingComponents": {
"Blank": "../../../component/Blank/Blank"
},
"usingComponents": {},
"navigationBarTitleText": "购物车",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff"
......
pages/commodity/snacks/snacks.wxml
<l-toast show="{{winToast}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
<view class="cates">
<view class="cates-container">
<!-- 左边菜单 -->
<scroll-view scroll-y class="left-menu">
<view
class="menu-item {{currentIndex === index ? 'active' : ''}}"
wx:for="{{leftMenuList}}"
wx:key="id"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.tab}}
<!-- 侧边菜单 -->
<view class="side-bar">
<block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="menu-item {{currentIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
<text>{{item.tab}}</text>
</view>
</scroll-view>
<!-- 右边内容 -->
</block>
</view>
<!-- 商品列表 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y class="right-content">
<view class="right-content-title">{{rightTitle}}</view>
<view class="item row" wx:for="{{cart}}" wx:key="id" bindtap="handleAddCartPopup">
<view class="item-img">
<image src="{{item.img}}" mode="widthFix"/>
<view class="right-content-title">{{menuTitle}}</view>
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="item row">
<view class="item-img" data-item="{{item}}" bindtap="onCommodityDetail">
<image src="{{item.cover}}" mode="widthFix"></image>
</view>
<view class="item-info">
<view class="item-info-title">{{item.goods_name}}</view>
<view class="item-info-title">{{item.name}}</view>
<view class="item-info-text-wrap">
<view wx:if="{{item.goods_text}}">{{item.goods_text}}</view>
<view wx:if="{{item.describe}}">{{item.describe}}</view>
<view wx:else class="item-info-content"></view>
</view>
<view class="item-info-now-price row align-c">
<view>
<text class="price-symbol">￥</text>
<text class="price">{{item.goods_now_price}}</text>
</view>
<view
class="item-now-price-text {{item.goods_now_text === '业主价' ? 'vipPrice' : ''}}"
wx:if="{{item.goods_now_text}}"
>
{{item.goods_now_text}}
</view>
<view class="goods-add-btn-wrap row con-e" bindtap="handleAddCartPopup">
<l-button l-class="l-btn-circle" height="44" width="44" bg-color="#86C5E1" bind="handleAddCartPopup">
<view class="item-other row con-b">
<!-- 活动价样式 -->
<view wx:if="{{item.priceType === 1}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.priceDiscount}}</text>
<text class="item-price-discount">活动价</text>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{item.price}}</text>
</view>
</view>
<!-- 业主价样式 -->
<view wx:if="{{item.priceType === 2}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.priceSpecial}}</text>
<text class="item-price-special">业主价</text>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{item.price}}</text>
</view>
</view>
<!-- 普通价样式 -->
<view wx:if="{{item.priceType === 3}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.price}}</text>
<text></text>
</view>
</view>
<view class="item-operation-add">
<button class="row con-c align-c" data-item="{{item}}" bindtap="onCommodityAdd">
<image mode="widthFix" src="/image/add-w.png"></image>
</l-button>
</button>
</view>
</view>
<view class="item-info-old-price" wx:if="{{item.goods_old_price}}"><text>￥</text>{{item.goods_old_price}}</view>
</view>
</view>
</block>
<!-- 购物车按钮 -->
<view class="cart-btn row con-c align-c" bindtap="goToCart">
<view class="cart-num row con-c align-c">{{cart.length}}</view>
<view class="cart-btn row con-c align-c" bindtap="onShoppingCart">
<view class="cart-num row con-c align-c">{{shoppingCartTotal}}</view>
<view class="cart-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</view>
</scroll-view>
<!-- 购物车弹窗 -->
<l-popup show="{{showPopup}}" content-align="center" locked="{{true}}">
<!-- 商品详情弹窗 -->
<l-popup show="{{winCommodityDetail}}" content-align="center" locked="{{true}}">
<view class="popup-wrap">
<view class="popup-img-wrapper">
<image mode="widthFix" src="./image/popup.png"></image>
</view>
<view class="popup-info-wrapper">
<view class="popuo-info-title">咖喱蔬菜大虾</view>
<view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
<view class="popuo-info-title">{{commodityDetail.name}}</view>
<view class="popup-info-text">{{commodityDetail.describe}}</view>
</view>
<view class="popup-footer-wrapper">
<view class="popup-price-row row align-c">
<view class="popup-price-now">￥<text style="font-size: 38rpx">78.00</text></view>
<view class="popup-price-discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods-now-text}}</view>
<!-- 活动价样式 -->
<view class="popup-price-row row align-c" wx:if="{{commodityDetail.priceType === 1}}">
<view class="detail-price-discount row con-c align-c">
<text>活动价</text>
</view>
<view class="detail-price">
<text>￥</text>
<text>{{commodityDetail.price}}</text>
</view>
<view class="popup-price-old">¥68.00</view>
</view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
<!-- 业主价样式 -->
<view class="popup-price-row row align-c" wx:if="{{commodityDetail.priceType === 2}}">
<view class="detail-price-special row con-c align-c">
<text>业主价</text>
</view>
<view class="detail-price">
<text>￥</text>
<text>{{commodityDetail.price}}</text>
</view>
<view class="popup-price-old">¥68.00</view>
</view>
<!-- 普通价样式 -->
<view class="popup-price-row row align-c" wx:if="{{commodityDetail.priceType === 3}}">
<view class="popup-price-special row con-c align-c">
<text></text>
</view>
<view class="detail-price">
<text>￥</text>
<text>{{commodityDetail.price}}</text>
</view>
</view>
<view class="popup-footer-btn row con-c align-c" bindtap="onCommodityAdd">加入购物车</view>
</view>
</view>
<view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup">
<view class="popup-close-btn row con-c align-c" bindtap="onCommodityClose">
<view class="popup-close">
<image mode="widthFix" src="../../../image/icon_close.png"></image>
</view>
</view>
</l-popup>
<!-- 添加成功 -->
<l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
</view>
</view>
\ No newline at end of file
<Blank></Blank>
pages/commodity/snacks/snacks.wxss
Page {
height: 100%;
}
.cates {
height: 100%;
}
.cates-container {
height: 100vh;
display: flex;
}
.left-menu {
width: 160rpx;
background: #F2F3F5;
.side-bar {
width: 160rpx;
overflow-y: scroll;
background: #f2f3f5;
}
::-webkit-scrollbar {
.side-bar::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.menu-item {
height: 136rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #656E7B;
color: #656e7b;
}
.menu-item.active {
color: #5CB5DD;
color: #5cb5dd;
font-weight: 600;
background: #fff;
border-left: 8rpx solid #86C5E1;
border-left: 8rpx solid #86c5e1;
}
.right-content {
position: relative;
flex: 1;
padding: 0 32rpx 0 28rpx;
}
.right-content-title {
height: 100rpx;
padding: 32rpx 0;
font-size: 26rpx;
color: #959DA9;
color: #959da9;
}
.cart-btn {
......@@ -51,7 +57,7 @@ Page {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
background-color: #86C5E1;
background-color: #86c5e1;
}
.cart-num {
......@@ -62,9 +68,9 @@ Page {
padding: 0 12rpx;
font-size: 22rpx;
line-height: 32rpx;
border: 1px solid #86C5E1;
border: 1px solid #86c5e1;
border-radius: 17rpx;
color: #86C5E1;
color: #86c5e1;
background-color: #fff;
}
......@@ -91,48 +97,86 @@ Page {
.item-info-title {
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
font-weight: 600;
}
.item-info-text-wrap {
width: 100%;
padding: 16rpx 0 24rpx;
display: -webkit-box;
width: 342rpx;
height: 64rpx;
margin-top: 16rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.item-info-content {
height: 40rpx;
}
.item-info-now-price {
.item-other {
margin-top: 24rpx;
}
.item-operation {
margin-top: 24rpx;
font-size: 30rpx;
font-weight: 600;
color: #15191F;
color: #15191f;
}
.price-symbol {
.item-price text:nth-child(1) {
font-size: 22rpx;
}
.item-now-price-text {
.item-price text:nth-child(2) {
margin-right: 8rpx;
font-size: 30rpx;
}
.item-price-discount {
width: 78rpx;
height: 32rpx;
margin-left: 4px;
font-size: 20rpx;
border-radius: 4px;
background: #D56B52;
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
color: #EF4E4E;
}
.vipPrice {
color: #E8D0AF;
.item-price-special {
width: 78rpx;
height: 32rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #E8D0AF;
}
.item-operation-add button {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: #86C5E1;
}
.item-operation-add image {
width: 24rpx;
height: 24rpx;
}
.goods-add-btn-wrap {
......@@ -144,12 +188,11 @@ Page {
font-size: 24rpx;
}
.item-info-old-price {
margin-top: 4rpx;
font-size: 22rpx;
color: #959DA9;
text-decoration:line-through
color: #959da9;
text-decoration: line-through;
}
.popup-wrap {
......@@ -167,62 +210,95 @@ Page {
.popup-info-wrapper {
padding: 48rpx 40rpx;
}
.popuo-info-title {
font-size: 34rpx;
color: #15191F;
color: #15191f;
}
.popup-info-text {
margin-top: 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
color: #959da9;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.popup-footer-wrapper {
margin: 0 40rpx;
padding: 40rpx 0;
border-top: 1px solid #E2E7EF;
border-top: 1px solid #e2e7ef;
}
.popup-price-row {
padding: 10rpx 0;
}
.popup-price-now {
color: #15191f;
}
.detail-price text:nth-child(1) {
height: 52rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 52rpx;
color: #15191F;
}
.popup-price-discount {
.detail-price text:nth-child(2) {
height: 52rpx;
font-size: 38rpx;
font-weight: 500;
line-height: 52rpx;
color: #15191F;
}
.detail-price-discount {
width: 90rpx;
height: 36rpx;
margin-left: 10px;
font-size: 22rpx;
margin-right: 16rpx;
border-radius: 4px;
background: #D56B52;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
.detail-price-special {
width: 90rpx;
height: 36rpx;
margin-right: 16rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #E8D0AF;
}
.popup-price-old {
margin-left: 20rpx;
font-size: 26rpx;
color: #959DA9;
text-decoration:line-through
color: #959da9;
text-decoration: line-through;
}
.popup-footer-btn {
width: 526rpx;
height: 80rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
background-color: #86c5e1;
border-radius: 4rpx;
}
......@@ -243,8 +319,8 @@ Page {
min-width: 262rpx !important;
min-height: 262prx !important;
}
.toast-image {
.toast-image {
}
image {
......
pages/home/home/home.js
......@@ -62,7 +62,7 @@ Page({
})
var that = this
App.login({
success: function(token) {
success: function (token) {
that.getBanner()
that.loadVisiterPlanList()
that.getNoticeList()
......@@ -324,14 +324,17 @@ Page({
})
},
onTest2: function (event) {
wx.navigateTo({
url: '/pages/commodity/snacks/snacks'
})
},
onTest3: function (event) {
console.log(event)
wx.navigateTo({
url: '/pages/pay/order-detail/order-detail?type=' + event.currentTarget.dataset.index
})
},
onShop: function (event) {
wx.navigateTo({
url: '/pages/commodity/snacks/snacks'
})
},
})
\ No newline at end of file
pages/home/home/home.wxml
......@@ -86,7 +86,6 @@
<button class="test-button" data-index="{{5}}" bindtap="onTest">餐品</button>
<button class="test-button" data-index="{{6}}" bindtap="onTest">活动</button>
<button class="test-button" data-index="{{7}}" bindtap="onTest">观影</button>
<button class="test-button" bindtap="onTest2">餐品列表</button>
<button class="test-button" data-index="{{0}}" bindtap="onTest3">订单 未使用</button>
<button class="test-button" data-index="{{1}}" bindtap="onTest3">订单 待评价</button>
<button class="test-button" data-index="{{2}}" bindtap="onTest3">订单 已过期</button>
......@@ -94,5 +93,7 @@
<button class="test-button" data-index="{{4}}" bindtap="onTest3">订单 已评价</button>
<button class="test-button" data-index="{{5}}" bindtap="onTest3">订单 待付款</button>
<button class="test-button" data-shop="{{4}}" bindtap="onShop">餐品列表</button>
</view>
</view>
\ No newline at end of file
pages/pay/order-input/order-input.js
......@@ -15,6 +15,7 @@ let logicData = {
Page({
data: {
imageBase: App.globalData.appImageBase,
animation: {},
orderType: 1, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
......@@ -105,6 +106,11 @@ Page({
// options.passType = 1
logicData.option = options
this.setView()
this.animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease'
})
},
setView: function () {
......@@ -262,8 +268,8 @@ Page({
winQuantity: true, // 数量选择
winContact: true, // 联系信息
winRegister: false, // 注册信息
winButtonPay: true, // 立即支付
winButtonAppointment: false, // 确认预约
winButtonPay: false, // 立即支付
winButtonAppointment: true, // 确认预约
})
break
}
......@@ -352,9 +358,22 @@ Page({
* @returns
*/
onNotice: function () {
// 初始底部弹出动画
let funcUnitProportion = wx.getStorageSync('unitProportion')
let funcMoveHeight = funcUnitProportion * 950
this.animation.translate(0, 0)
this.setData({
winNoticeDetail: true,
animation: this.animation.export()
})
let funcTimer = setTimeout(() => {
this.animation.translate(0, -funcMoveHeight).step()
this.setData({
animation: this.animation.export()
})
clearTimeout(funcTimer)
}, 100)
},
/**
......
pages/pay/order-input/order-input.wxml
<!-- 购买须知详情 -->
<view class="notice-detail" wx:if="{{winNoticeDetail}}" bindtap="onNoticeClose">
<view class="notice-item" animation="{{animation}}">
<image src="{{noticeDetail}}"></image>
</view>
</view>
<view class="container">
<!-- winBuyContent -->
<view class="buy-content" wx:if="{{winBuyContent}}">
......@@ -229,22 +236,23 @@
</view>
</block>
</view>
<!-- winButtonPay -->
<view class="pay" wx:if="{{winButtonPay}}">
<view class="pay-tip row align-c">
<image src="{{imageBase + 'fail-icon-4.png'}}"></image>
<text>付款后一经确认不得退款</text>
</view>
<view class="pay-operation row con-b align-c">
<text>{{'¥' + payAmount}}</text>
<button class="row con-c align-c">立即支付</button>
</view>
</view>
</view>
<view class="notice-detail" wx:if="{{winNoticeDetail}}" bindtap="onNoticeClose">
<view class="notice-item">
<image src="{{noticeDetail}}"></image>
</view>
</view>
\ No newline at end of file
<!-- winButtonPay -->
<cover-view class="pay" wx:if="{{winButtonPay && !winNoticeDetail}}">
<cover-view class="pay-tip row align-c">
<cover-image src="{{imageBase + 'fail-icon-4.png'}}"></cover-image>
<cover-view class="pay-tip-text row con-c align-c">付款后一经确认不得退款</cover-view>
</cover-view>
<cover-view class="pay-operation row con-b align-c">
<cover-view class="pay-operation-amount row con-c align-c">{{'¥' + payAmount}}</cover-view>
<cover-view class="pay-operation-confirm row con-c align-c">立即支付</cover-view>
</cover-view>
</cover-view>
<!-- winButtonAppointment -->
<cover-view class="appointment row con-c align-c" wx:if="{{winButtonAppointment && !winNoticeDetail}}">
<cover-view class="appointment-confirm row con-c align-c">确认预约</cover-view>
</cover-view>
<!-- <cover-view class="iphonexr-fill"></cover-view> -->
\ No newline at end of file
pages/pay/order-input/order-input.wxss
.notice-detail {
z-index: 1700;
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 100%;
padding-bottom: 48rpx;
background: rgba(0, 0, 0, .6);
}
.notice-item {
position: absolute;
left: 0;
bottom: 0;
bottom: -950rpx;
width: 750rpx;
padding: 28px 0 12px 0;
padding: 28px 0 50rpx 0;
border-radius: 24px 24px 0px 0px;
background: #FFFFFF;
}
......@@ -25,6 +27,7 @@
.container {
margin-top: 60rpx;
padding-bottom: 232rpx;
}
.buy-content {
......@@ -526,7 +529,14 @@
/* 立即支付 */
.pay {
z-index: 9;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 40rpx;
padding-bottom: 36rpx;
background: #FFFFFF;
}
.pay-tip {
......@@ -534,46 +544,78 @@
height: 72rpx;
padding: 0 40rpx;
background: #F5EEDF;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
}
.pay-tip image {
.pay-tip cover-image {
display: block;
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
.pay-tip-text {
margin-bottom: 2rpx;
background: rgba(0, 0, 0, 0);
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
}
.pay-operation {
padding: 32rpx 40rpx;
}
.pay-operation text {
.pay-operation-amount {
height: 58rpx;
background: rgba(0, 0, 0, 0);
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
color: #5DB5DD;
}
.pay-operation button {
.pay-operation-confirm {
width: 248rpx;
height: 96rpx;
border-radius: 4px;
background: #86C5E1;
text-align: center;
font-size: 30rpx;
font-weight: 500;
line-height: 42px;
line-height: 96rpx;
color: #FFFFFF;
}
/* 确认预约 */
.appointment {
z-index: 9;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 40rpx;
padding: 30rpx 0 68rpx 0;
border: 1px #E2E7EF solid;
background: #FFFFFF;
}
.appointment-confirm {
width: 670rpx;
height: 96rpx;
background: #86C5E1;
border-radius: 4px;
text-align: center;
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 96rpx;
}
......@@ -824,3 +866,14 @@
font-size: 26rpx;
line-height: 44rpx;
}
/* iphone x 底部颜色填充 */
.iphonexr-fill {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
height: 68rpx;
background: #FFFFFF;
}
\ No newline at end of file
project.config.json
......@@ -4,11 +4,10 @@
"ignore": []
},
"setting": {
"urlCheck": true,
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true,
"coverView": true,
......@@ -18,14 +17,15 @@
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"checkSiteMap": false,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"preloadBackgroundData": false,
"compileHotReLoad": false,
"useIsolateContext": true,
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false,
......
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 sign in to comment