Skip to content

严立 / mini-shimao

Go to a project
Commit 1bf256b3 by 严立
Options

LL - 商品列表对接接口

parent 37af23b2
Inline Side-by-side
Showing with 1203 additions and 825 deletions
app.js
import iMiment from './npm/miment.js' import iMiment from './npm/miment.js'
import iUtils from './utils/utils.js' import iUtils from './utils/utils.js'
import iEnvironmental from './environmental.js'
App({ App({
modular: { modular: {
...@@ -10,10 +11,12 @@ App({ ...@@ -10,10 +11,12 @@ App({
globalData: { globalData: {
appImageBase: '../../../image/', appImageBase: '../../../image/',
appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResourcesS2/', appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResourcesS2/',
shopId: iEnvironmental.shopId,
token: '', token: '',
refreshToken: '', refreshToken: '',
userInfo: null, userInfo: null,
baseUrl: 'https://sm-web.meiqicloud.com',//测试 baseUrl: 'https://sm-web2.meiqicloud.com',//测试
// baseUrl: 'https://smbhyh-web.meiqicloud.com',//生产 // baseUrl: 'https://smbhyh-web.meiqicloud.com',//生产
debug: true, debug: true,
}, },
...@@ -22,18 +25,6 @@ App({ ...@@ -22,18 +25,6 @@ App({
this.setUnitProportion() this.setUnitProportion()
}, },
onShow: function (options) {
},
onHide: function () {
},
onError: function (msg) {
},
setUnitProportion: function () { setUnitProportion: function () {
let funcProportion = wx.getSystemInfoSync().windowWidth / 750 let funcProportion = wx.getSystemInfoSync().windowWidth / 750
wx.setStorageSync('unitProportion', funcProportion) wx.setStorageSync('unitProportion', funcProportion)
...@@ -72,11 +63,11 @@ App({ ...@@ -72,11 +63,11 @@ App({
obj.success(res.data) obj.success(res.data)
} }
} else if (402 == code) { // token失效 } else if (402 == code) { // token失效
that.refreshToken({ // that.refreshToken({
success: function () { // success: function () {
that.wxRequest(obj) // that.wxRequest(obj)
} // }
}) // })
} else { } else {
if (obj.fail) { if (obj.fail) {
let err = { let err = {
...@@ -120,11 +111,13 @@ App({ ...@@ -120,11 +111,13 @@ App({
wx.login({ wx.login({
success: res => { success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId // 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log('wx.login:', res);
this.wxRequest({ this.wxRequest({
url: '/api/v1/login/getSmallSession?code=' + res.code, url: '/api/v1/login/getSmallSession?code=' + res.code,
method: 'GET', method: 'GET',
success: function (res) { success: function (res) {
console.log(res)
that.globalData.token = res.data.token that.globalData.token = res.data.token
that.globalData.refreshToken = res.data.refreshToken that.globalData.refreshToken = res.data.refreshToken
wx.setStorageSync('expires_in', res.data.expires_in) wx.setStorageSync('expires_in', res.data.expires_in)
......
app.json
{ {
"pages": [ "pages": [
"pages/commodity/shopping-cart/shopping-cart",
"pages/home/home/home", "pages/home/home/home",
"pages/home/dynamic/dynamic", "pages/home/dynamic/dynamic",
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
"pages/play/strategy-detail/strategy-detail", "pages/play/strategy-detail/strategy-detail",
"pages/commodity/home/home", "pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/food/food", "pages/commodity/food/food",
"pages/commodity/project/project", "pages/commodity/project/project",
"pages/commodity/snacks/snacks", "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({ Page({
data: { data: {
totalNum: 3, shoppingCart: [], // 购物车列表
totalPrice: 840.00, shoppingCartSelection: 0, // 购物车选择数量
discount: 270.00,
allChecked: false,
isFoodCart: true,
isEnough: false,
cart: [
{
goods_id: 0,
goods_name: '雪碧迷你瓶装300ml', totalNum: 3,
goods_now_price: 49.00, totalPrice: 840.00,
goods_old_price: 42.00, discount: 270.00,
goods_now_text: '业主价', allChecked: false,
goods_num: 1, isFoodCart: true,
store_num: 1, isEnough: false,
checked: true, cart: [{
img: './image/item01.png' goods_id: 0,
}, goods_name: '雪碧迷你瓶装300ml',
{ goods_now_price: 49.00,
goods_id: 1, goods_old_price: 42.00,
goods_name: '可口可乐300ml', goods_now_text: '业主价',
goods_now_price: 52.00, goods_num: 1,
goods_old_price: 49.00, store_num: 1,
goods_now_text: '活动价', checked: true,
goods_num: 1, img: './image/item01.png'
store_num: 2, },
checked: true, {
img: './image/item01.png' goods_id: 1,
}, goods_name: '可口可乐300ml',
{ goods_now_price: 52.00,
goods_id: 2, goods_old_price: 49.00,
goods_name: '葡萄汁饮料238ml', goods_now_text: '活动价',
goods_now_price: 30.00, goods_num: 1,
goods_num: 2, store_num: 2,
checked: true, checked: true,
img: './image/item01.png' img: './image/item01.png'
}, },
{ {
goods_id: 3, goods_id: 2,
goods_name: '牛奶苏打碳酸250ml', goods_name: '葡萄汁饮料238ml',
goods_now_price: 78, goods_now_price: 30.00,
goods_num: 12, goods_num: 2,
checked: false, checked: true,
img: './image/item01.png' img: './image/item01.png'
} },
], {
notEnough: [ goods_id: 3,
{ goods_name: '牛奶苏打碳酸250ml',
id: 0, goods_now_price: 78,
img: './image/item01.png', goods_num: 12,
title: '葱爆牛肉佐秘制麻椒汁' checked: false,
}, img: './image/item01.png'
{ }
id: 1, ],
img: './image/item01.png', notEnough: [{
title: '抹茶酸奶芝士' id: 0,
img: './image/item01.png',
title: '葱爆牛肉佐秘制麻椒汁'
},
{
id: 1,
img: './image/item01.png',
title: '抹茶酸奶芝士'
}
]
},
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) { handleItemNumEdit(e) {
const operation = e.currentTarget.dataset.operation const operation = e.currentTarget.dataset.operation
const goods_id = e.currentTarget.dataset.id const goods_id = e.currentTarget.dataset.id
let cart = this.data.cart let cart = this.data.cart
const index = cart.findIndex(v => v.goods_id === goods_id) const index = cart.findIndex(v => v.goods_id === goods_id)
if ((cart[index].store_num === cart[index].goods_num) && operation === 1) { if ((cart[index].store_num === cart[index].goods_num) && operation === 1) {
console.log('没有库存') console.log('没有库存')
} else if (cart[index].goods_num === 1 && operation === -1) { } else if (cart[index].goods_num === 1 && operation === -1) {
wx.lin.showDialog({ wx.lin.showDialog({
type:"confirm", type: "confirm",
title:"温馨提示", title: "温馨提示",
content:"您是否要删除该商品？", content: "您是否要删除该商品？",
confirmColor: "#5DB5DD", confirmColor: "#5DB5DD",
cancelColor: "#656E7B", cancelColor: "#656E7B",
titleColor: "#15191F", titleColor: "#15191F",
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
cart.splice(index, 1) cart.splice(index, 1)
this.setCart(cart) this.setCart(cart)
} else if (res.cancel) { } else if (res.cancel) {
console.log('用户点击取消') console.log('用户点击取消')
} }
} }
}) })
} else { } else {
cart[index].goods_num += operation cart[index].goods_num += operation
this.setCart(cart) this.setCart(cart)
} }
}, },
handleItemCheck(e) { handleItemCheck(e) {
const goods_id = e.currentTarget.dataset.id const goods_id = e.currentTarget.dataset.id
let cart = this.data.cart let cart = this.data.cart
const index = cart.findIndex(v => v.goods_id === goods_id) 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) this.setCart(cart)
}, },
handleItemAllCheck() { handleItemAllCheck() {
let allChecked = !this.data.allChecked let allChecked = !this.data.allChecked
let cart = this.data.cart let cart = this.data.cart
cart.forEach(v => v.checked = allChecked) cart.forEach(v => v.checked = allChecked)
this.setCart(cart) this.setCart(cart)
}, },
setCart(cart) { setCart(cart) {
let totalPrice = 0 let totalPrice = 0
let totalNum = 0 let totalNum = 0
let allChecked = true let allChecked = true
cart.forEach(v => { cart.forEach(v => {
if (v.checked) { if (v.checked) {
totalPrice += v.goods_now_price * v.goods_num totalPrice += v.goods_now_price * v.goods_num
totalNum += 1 totalNum += 1
} else { } else {
allChecked = false allChecked = false
} }
}) })
allChecked = cart.length!=0 ? allChecked : false allChecked = cart.length != 0 ? allChecked : false
this.setData({ this.setData({
cart, cart,
allChecked, allChecked,
totalPrice, totalPrice,
totalNum totalNum
}) })
}, },
handleClearCart() { handleClearCart() {
wx.lin.showDialog({ wx.lin.showDialog({
type:"confirm", type: "confirm",
title:"温馨提示", title: "温馨提示",
content:"确定要清空购物车？", content: "确定要清空购物车？",
confirmColor: "#5DB5DD", confirmColor: "#5DB5DD",
cancelColor: "#656E7B", cancelColor: "#656E7B",
titleColor: "#15191F", titleColor: "#15191F",
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
let cart = [] let cart = []
this.setCart(cart) this.setCart(cart)
} else if (res.cancel) { } else if (res.cancel) {
console.log('用户点击取消') console.log('用户点击取消')
} }
} }
}) })
}, },
handleOrderPay() { handleOrderPay() {
let isEnough = true let isEnough = true
this.setData({ this.setData({
isEnough isEnough
}) })
}, },
handleBackCart() { handleBackCart() {
let isEnough = false let isEnough = false
this.setData({ this.setData({
isEnough isEnough
}) })
}, },
}) })
\ No newline at end of file \ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.json
{ {
"usingComponents": { "usingComponents": {
"Tips": "../../../component/Tips/Tips", "Tips": "../../../component/Tips/Tips",
"Blank": "../../../component/Blank/Blank" "Blank": "../../../component/Blank/Blank"
},
}, "navigationStyle": "default",
"navigationStyle": "default", "navigationBarBackgroundColor": "#fff",
"navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "购物车"
"navigationBarTitleText": "购物车"
} }
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.wxml
<view class="header row align-c"> <view class="header row align-c">
<view class="header_img"> <view class="header_img">
<image mode="aspectFill" src="./image/item01.png" /> <image mode="aspectFill" src="./image/item01.png" />
</view>
<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"/>
</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>
<view class="item_info"> <view class="header_title">儿童营地</view>
<view class="item_info_title">{{item.goods_name}}</view> <view class="header_clear row align-c" bindtap="handleClearCart">清空</view>
<view class="item_info_now_price row align-c"> <!-- 清空弹窗 -->
<view><text>￥</text>{{item.goods_now_price}}</view> <l-dialog l-content-class="l-content" l-cancel-class="l-cancel" title-color="#15191F" cancel-color="#656E7B" confirm-color="#5DB5DD" />
<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>
</view> <view class="shopping-cart-list">
<view class="item_info_old_price" wx:if="{{item.goods_old_price}}"> <block wx:for="{{shoppingCart}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text class="price_symbol">￥</text> <view class="list-item row">
<text>{{item.goods_old_price}}</text> <view class="list-item-radio row con-c align-c">
</view> <radio checked="{{item.isActive}}" color="#86C5E1"></radio>
</view> </view>
</view> <view class="list-item-cover">
</scroll-view> <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>
<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>
</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> <Tips text="请在下单内3天内取餐，逾期无效"></Tips>
</view> </view>
<view class="footer row con-c align-c"> <view class="footer row con-c align-c">
<view class="all_chk_wrap row con-c align-c"> <view class="all_chk_wrap row con-c align-c">
<radio-group> <radio-group>
<radio color="#86C5E1" checked="{{allChecked}}" bindtap="handleItemAllCheck">已选 ({{totalNum}})</radio> <radio color="#86C5E1" checked="{{allChecked}}" bindtap="handleItemAllCheck">已选 ({{totalNum}})</radio>
</radio-group> </radio-group>
</view>
<view class="total_price_wrap">
<view class="total_price">
￥<text class="total_price_text">{{totalPrice}}</text>
</view> </view>
<view class="total_discount">共{{totalNum}}件，优惠 ￥{{discount}}</view> <view class="total_price_wrap">
</view> <view class="total_price">
<view class="order_pay_wrap row con-c align-c" bindtap="handleOrderPay">结算</view> ￥
<!-- 库存提示弹窗 --> <text class="total_price_text">{{totalPrice}}</text>
<l-popup show="{{isEnough}}" content-align="center" locked="{{true}}"> </view>
<view class="popup_wrap"> <view class="total_discount">共{{totalNum}}件，优惠 ￥{{discount}}</view>
<view class="popup_title">抱歉，您本单商品有2件库存不足</view> </view>
<view class="popup_list"> <view class="order_pay_wrap row con-c align-c" bindtap="handleOrderPay">结算</view>
<view class="popup_item row align-c" wx:for="{{notEnough}}" wx:key="id"> <!-- 库存提示弹窗 -->
<view class="popup_item_img"> <l-popup show="{{isEnough}}" content-align="center" locked="{{true}}">
<image mode="widthFix" src="{{item.img}}"></image> <view class="popup_wrap">
<view class="popup_title">抱歉，您本单商品有2件库存不足</view>
<view class="popup_list">
<view class="popup_item row align-c" wx:for="{{notEnough}}" wx:key="id">
<view class="popup_item_img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
<view class="popup_item_title">{{item.title}}</view>
</view>
</view> </view>
<view class="popup_item_title">{{item.title}}</view> <view class="popup_back_cart row con-c align-c" bindtap="handleBackCart">返回购物车</view>
</view>
</view> </view>
<view class="popup_back_cart row con-c align-c" bindtap="handleBackCart">返回购物车</view> <view class="popup_close_btn row con-c align-c" bindtap="handleClosePopup">
</view> <view class="popup_close">
<view class="popup_close_btn row con-c align-c" bindtap="handleClosePopup"> <image mode="widthFix" src="../../../image/icon_close.png"></image>
<view class="popup_close"> </view>
<image mode="widthFix" src="../../../image/icon_close.png"></image>
</view> </view>
</view>
</l-popup> </l-popup>
</view> </view>
<Blank></Blank> <Blank></Blank>
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.wxss
Page { Page {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.header { .header {
width: 100%; width: 100%;
height: 116rpx; height: 116rpx;
padding: 16rpx 40rpx; padding: 16rpx 40rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.header_img { .header_img {
width: 112rpx; width: 112rpx;
height: 84rpx; height: 84rpx;
} }
.header_img image { .header_img image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.header_title { .header_title {
flex: 1; flex: 1;
color: #C36069; color: #c36069;
} }
.header_clear { .header_clear {
height: 100%; height: 100%;
color: #656E7B; color: #656e7b;
} }
.l-content { .l-content {
color: #959DA9 !important; color: #959da9 !important;
} }
.item_list { /* 购物车列表 */
width: 100%; .shopping-cart-list {
height: calc(100vh - 390rpx); width: 100%;
margin-top: 10rpx; height: calc(100vh - 390rpx);
margin-top: 10rpx;
} }
.item { .list-item {
width: 100%; width: 100%;
height: 250rpx; height: 250rpx;
padding: 0 40rpx; padding: 0 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.item_checked { .list-item-radio {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-top: 54rpx; margin: 54rpx 24rpx 0 0;
} }
.item_img { .list-item-radio radio {
width: 148rpx; transform: scale(0.7);
height: 148rpx;
margin-left: 24rpx;
} }
.item_info { .list-item-cover image {
flex: 1; width: 148rpx;
margin-left: 28rpx; height: 148rpx;
margin-right: 30rpx;
} }
.item_info_title { .list-item-info {
font-size: 30rpx; width: 430rpx;
color: #15191F; height: 168rpx;
} }
.list-item-name {
.item_info_now_price { min-height: 108rpx;
margin-top: 66rpx; font-size: 30rpx;
font-size: 30rpx; font-weight: 500;
color: #15191F; line-height: 42rpx;
color: #15191F;
} }
.item_now_price_text { .list-item-price-main text:nth-child(1) {
width: 78rpx; height: 42rpx;
height: 32rpx; font-size: 22rpx;
margin-left: 4px; font-weight: 500;
font-size: 18rpx; line-height: 42rpx;
color: #EF4E4E; color: #15191F;
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;
} }
.goods_num_tool_wrapper { .list-item-price-main text:nth-child(2) {
flex: 1; height: 42rpx;
position: relative; margin-right: 8rpx;
} font-size: 30rpx;
.goods_num_tool { font-weight: 500;
width: 168rpx; line-height: 42rpx;
height: 48rpx; color: #15191F;
padding: 12rpx 0;
box-sizing: border-box;
border: 1px solid #DBDFE5;
border-radius: 4rpx;
} }
.l-counter { .list-item-price-main .price-discount {
border: 1px solid #DBDFE5; width: 78rpx;
border-radius: 4rpx; height: 32rpx;
box-sizing: border-box; border-radius: 4px;
} background: #FAEDEA;
.l-symbol, .l-disabled, .l-count { text-align: center;
background-color: #fff !important; font-size: 18rpx;
font-weight: 500;
line-height: 30rpx;
color: #EF4E4E;
} }
.l-symbol, .l-count { .list-item-price-minor text {
color: #15191F !important; height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
} }
.l-count { .list-item-quantity {
border-left: 1px solid #DBDFE5; flex-grow: 1;
border-right: 1px solid #DBDFE5;
min-height: 0rpx !important;
} }
.num_edit { .list-item-quantity-operation {
flex: 1; width: 168rpx;
height: 48rpx;
padding: 0 16rpx;
border: 1px solid #DBDFE5;
border-radius: 4px;
} }
.goods_num { .list-item-quantity-operation text:nth-child(1) {
flex: 1; width: 24rpx;
border-left: 1px solid #DBDFE5; height: 24rpx;
border-right: 1px solid #DBDFE5; line-height: 24rpx;
} }
.disable { .list-item-quantity-operation text:nth-child(2) {
color: #DBDFE5; height: 36rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #15191F;
} }
.lack_wraning { .list-item-quantity-operation text:nth-child(3) {
position: absolute; width: 24rpx;
top: 56rpx; height: 24rpx;
right: 84rpx; line-height: 24rpx;
transform: translateX(50%);
color: #D92B3A;
font-size: 22rpx;
} }
.item_info_old_price { .list-item-quantity-warning {
margin-top: 4rpx; width: 168rpx;
font-size: 22rpx; height: 32rpx;
color: #959DA9; margin-top: 8rpx;
text-decoration:line-through
}
text { text-align: center;
font-size: 22rpx; font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #D92B3A;
} }
.tips-wrapper { .tips-wrapper {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 196rpx; bottom: 196rpx;
width: 100%; width: 100%;
} }
.footer { .footer {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 196rpx; height: 196rpx;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
padding: 0 40rpx 36rpx 36rpx; padding: 0 40rpx 36rpx 36rpx;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #E2E7EF; border-top: 1px solid #e2e7ef;
} }
.all_chk_wrap { .all_chk_wrap {
flex: 3; flex: 3;
font-size: 26rpx; font-size: 26rpx;
color: #15191F; color: #15191f;
} }
.total_price_wrap { .total_price_wrap {
flex: 5; flex: 5;
text-align: right; text-align: right;
padding-right: 32rpx; padding-right: 32rpx;
} }
.total_price { .total_price {
color: #86C5E1; color: #86c5e1;
} }
.total_price_text { .total_price_text {
font-size: 44rpx; font-size: 44rpx;
} }
.total_discount { .total_discount {
font-size: 22rpx; font-size: 22rpx;
} }
.order_pay_wrap { .order_pay_wrap {
width: 188rpx; width: 188rpx;
height: 96rpx; height: 96rpx;
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
background-color: #86C5E1; background-color: #86c5e1;
} }
.popup_wrap { .popup_wrap {
width: 606rpx; width: 606rpx;
height: 690rpx; height: 690rpx;
padding: 0 40rpx; padding: 0 40rpx;
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup_title { .popup_title {
padding: 56rpx 0; padding: 56rpx 0;
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
color: #15191F; color: #15191f;
text-align: center; text-align: center;
border-bottom: 1px solid #E2E7EF; border-bottom: 1px solid #e2e7ef;
} }
.popup_list { .popup_list {
padding: 26rpx 0; padding: 26rpx 0;
} }
.popup_item { .popup_item {
padding: 32rpx 0; padding: 32rpx 0;
} }
.popup_item_img { .popup_item_img {
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
} }
.popup_item_title { .popup_item_title {
margin-left: 32rpx; margin-left: 32rpx;
font-size: 30rpx; font-size: 30rpx;
color: #15191F; color: #15191f;
} }
.popup_back_cart { .popup_back_cart {
width: 526rpx; width: 526rpx;
height: 80rpx; height: 80rpx;
margin-top: 32rpx; margin-top: 32rpx;
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
background-color: #86C5E1; background-color: #86c5e1;
} }
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
\ No newline at end of file
pages/commodity/snacks/snacks.js
let App = getApp()
Page({ Page({
data: { data: {
currentIndex: 0, shopId: '',
scrollTop: 0, sideBar: [], // 侧边菜单
rightTitle: '优惠套餐', menuTitle: '', // 商品列表标题
showPopup: false, commodityList: [], // 商品列表
showAddSucc: false, commodityDetail: {}, // 商品详情
leftMenuList: [ shoppingCart: [], // 购物车列表
{ shoppingCartTotal: 0, // 购物车总数
id: 0,
tab: '优惠套餐'
},
{ currentIndex: 0,
id: 1, scrollTop: 0,
tab: '时令美食'
}, winToast: false,
{ winCommodityDetail: false,
id: 2, },
tab: '当地食材'
}, onLoad: function () {
{ // 儿童营地小程序内部 id
id: 3, let funcMiniAppId = 7
tab: '沙拉' let funcShopId = App.globalData.shopId
}, for (let i = 0, l = funcShopId.length; i < l; i++) {
{ if (funcMiniAppId === funcShopId[i].miniAppId) {
id: 4, this.setData({
tab: '小食' shopId: funcShopId[i].databaseId
}, })
{ break
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'
},
{
goods_id: 3,
goods_name: '牛奶苏打碳酸250ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 78,
goods_num: 12,
checked: false,
img: './image/cola.png'
} }
], this.querySideBar()
popupObj: { },
goods_now_text: '业主价'
} /**
* 查询分类
* @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()
}
})
},
/**
* 查询分类商品
* @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 * 侧边菜单选择事件
this.setData({ * @function
currentIndex: index, * @param {object} - event
rightTitle, * @returns
scrollTop: 0 */
}) onSelectionSideBar: function (event) {
let funcIndex = event.currentTarget.dataset.index
let funcMenuTitle = this.data.sideBar[funcIndex].tab
this.setData({
currentIndex: funcIndex,
menuTitle: funcMenuTitle,
scrollTop: 0
})
this.queryCommodity()
}, },
handleAddCartPopup() {
let showPopup = true /**
this.setData({ * 查询商品详情
showPopup * @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
},
success: (response) => {
let funcResponse = response.data
funcItem.banner = funcResponse.imgs.split('|')
this.setData({
commodityDetail: funcItem,
winCommodityDetail: true
})
}
})
}, },
handleClosePopup() {
let showPopup = false /**
this.setData({ * 关闭商品详情
showPopup, * @function
}) * @param
* @returns
*/
onCommodityClose: function () {
this.setData({
winCommodityDetail: false
})
},
/**
* 添加商品
* @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({
shoppingCart: funcShoppingCart,
shoppingCartTotal: funcShoppingCartTotal,
winToast: true,
winCommodityDetail: false,
})
}, },
handleAddCart() {
let showPopup = false /**
let showAddSucc = true * 跳转购物车页面
this.setData({ * @function
showPopup, * @param
showAddSucc * @returns
}) */
onShoppingCart: function() {
console.log(this.data.shoppingCart)
wx.setStorageSync('shoppingCartBuffer', this.data.shoppingCart)
wx.navigateTo({
url: '/pages/commodity/shopping-cart/shopping-cart',
})
}, },
goToCart() { })
wx.navigateTo({ \ No newline at end of file
url: '/pages/commodity/shopping-cart/shopping-cart',
})
}
})
\ No newline at end of file
pages/commodity/snacks/snacks.json
{ {
"usingComponents": { "usingComponents": {},
"Blank": "../../../component/Blank/Blank"
},
"navigationBarTitleText": "购物车", "navigationBarTitleText": "购物车",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#fff" "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">
<view class="cates-container"> <view class="cates-container">
<!-- 左边菜单 --> <!-- 侧边菜单 -->
<scroll-view scroll-y class="left-menu"> <view class="side-bar">
<view <block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index">
class="menu-item {{currentIndex === index ? 'active' : ''}}" <view class="menu-item {{currentIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
wx:for="{{leftMenuList}}" <text>{{item.tab}}</text>
wx:key="id" </view>
bindtap="handleItemTap" </block>
data-index="{{index}}"
>
{{item.tab}}
</view>
</scroll-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>
<view class="item-info">
<view class="item-info-title">{{item.goods_name}}</view>
<view class="item-info-text-wrap">
<view wx:if="{{item.goods_text}}">{{item.goods_text}}</view>
<view wx:else class="item-info-content"></view>
</view> </view>
<view class="item-info-now-price row align-c">
<view> <!-- 商品列表 -->
<text class="price-symbol">￥</text> <scroll-view scroll-top="{{scrollTop}}" scroll-y class="right-content">
<text class="price">{{item.goods_now_price}}</text> <view class="right-content-title">{{menuTitle}}</view>
</view> <block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view <view class="item row">
class="item-now-price-text {{item.goods_now_text === '业主价' ? 'vipPrice' : ''}}" <view class="item-img" data-item="{{item}}" bindtap="onCommodityDetail">
wx:if="{{item.goods_now_text}}" <image src="{{item.cover}}" mode="widthFix"></image>
> </view>
{{item.goods_now_text}} <view class="item-info">
</view> <view class="item-info-title">{{item.name}}</view>
<view class="goods-add-btn-wrap row con-e" bindtap="handleAddCartPopup"> <view class="item-info-text-wrap">
<l-button l-class="l-btn-circle" height="44" width="44" bg-color="#86C5E1" bind="handleAddCartPopup"> <view wx:if="{{item.describe}}">{{item.describe}}</view>
<image mode="widthFix" src="/image/add-w.png"></image> <view wx:else class="item-info-content"></view>
</l-button> </view>
</view>
</view> <view class="item-other row con-b">
<view class="item-info-old-price" wx:if="{{item.goods_old_price}}"><text>￥</text>{{item.goods_old_price}}</view> <!-- 活动价样式 -->
</view> <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>
</button>
</view>
</view>
</view>
</view>
</block>
<!-- 购物车按钮 -->
<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="{{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">{{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" 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-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="onCommodityClose">
<view class="popup-close">
<image mode="widthFix" src="../../../image/icon_close.png"></image>
</view>
</view>
</l-popup>
</view> </view>
<!-- 购物车按钮 --> </view>
<view class="cart-btn row con-c align-c" bindtap="goToCart"> \ No newline at end of file
<view class="cart-num row con-c align-c">{{cart.length}}</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}}">
<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>
<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-old">¥68.00</view>
</view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
</view>
</view>
<view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup">
<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>
<Blank></Blank>
pages/commodity/snacks/snacks.wxss
Page { Page {
height: 100%; height: 100%;
} }
.cates { .cates {
height: 100%; height: 100%;
} }
.cates-container { .cates-container {
height: 100vh; height: 100vh;
display: flex; display: flex;
} }
.left-menu {
width: 160rpx;
background: #F2F3F5;
.side-bar {
width: 160rpx;
overflow-y: scroll;
background: #f2f3f5;
} }
::-webkit-scrollbar {
width: 0; .side-bar::-webkit-scrollbar {
height: 0; width: 0;
color: transparent;
} }
.menu-item { .menu-item {
height: 136rpx; height: 136rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 26rpx;
color: #656E7B; color: #656e7b;
} }
.menu-item.active { .menu-item.active {
color: #5CB5DD; color: #5cb5dd;
font-weight: 600; font-weight: 600;
background: #fff; background: #fff;
border-left: 8rpx solid #86C5E1; border-left: 8rpx solid #86c5e1;
} }
.right-content { .right-content {
position: relative; position: relative;
flex: 1; flex: 1;
padding: 0 32rpx 0 28rpx; padding: 0 32rpx 0 28rpx;
} }
.right-content-title { .right-content-title {
height: 100rpx; height: 100rpx;
padding: 32rpx 0; padding: 32rpx 0;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959da9;
} }
.cart-btn { .cart-btn {
position: fixed; position: fixed;
right: 48rpx; right: 48rpx;
bottom: 160rpx; bottom: 160rpx;
width: 104rpx; width: 104rpx;
height: 104rpx; height: 104rpx;
border-radius: 50%; border-radius: 50%;
background-color: #86C5E1; background-color: #86c5e1;
} }
.cart-num { .cart-num {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
height: 32rpx; height: 32rpx;
padding: 0 12rpx; padding: 0 12rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
border: 1px solid #86C5E1; border: 1px solid #86c5e1;
border-radius: 17rpx; border-radius: 17rpx;
color: #86C5E1; color: #86c5e1;
background-color: #fff; background-color: #fff;
} }
.cart-img-wrap { .cart-img-wrap {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
.item { .item {
width: 100%; width: 100%;
height: 250rpx; height: 250rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.item-img { .item-img {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
} }
.item-info { .item-info {
flex: 1; flex: 1;
margin-left: 28rpx; margin-left: 28rpx;
} }
.item-info-title { .item-info-title {
font-size: 30rpx; font-size: 30rpx;
color: #15191F; font-weight: 500;
font-weight: 600; line-height: 42rpx;
color: #15191F;
} }
.item-info-text-wrap { .item-info-text-wrap {
width: 100%; display: -webkit-box;
padding: 16rpx 0 24rpx; width: 342rpx;
font-size: 22rpx; height: 64rpx;
line-height: 32rpx; margin-top: 16rpx;
color: #959DA9; -webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
} }
.item-info-content { .item-info-content {
height: 40rpx; height: 40rpx;
} }
.item-info-now-price { .item-other {
font-size: 30rpx; margin-top: 24rpx;
font-weight: 600;
color: #15191F;
} }
.price-symbol { .item-operation {
font-size: 22rpx; margin-top: 24rpx;
font-size: 30rpx;
font-weight: 600;
color: #15191f;
} }
.item-now-price-text { .item-price text:nth-child(1) {
width: 78rpx; font-size: 22rpx;
height: 32rpx;
margin-left: 4px;
font-size: 20rpx;
font-weight: 500;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
} }
.vipPrice {
color: #E8D0AF; .item-price text:nth-child(2) {
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); margin-right: 8rpx;
border-radius: 4rpx; font-size: 30rpx;
opacity: 1; }
.item-price-discount {
width: 78rpx;
height: 32rpx;
border-radius: 4px;
background: #D56B52;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #EF4E4E;
}
.item-price-special {
width: 78rpx;
height: 32rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
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 { .goods-add-btn-wrap {
flex: 1; flex: 1;
} }
.l-btn-circle { .l-btn-circle {
border-radius: 50% !important; border-radius: 50% !important;
font-size: 24rpx; font-size: 24rpx;
} }
.item-info-old-price { .item-info-old-price {
margin-top: 4rpx; margin-top: 4rpx;
font-size: 22rpx; font-size: 22rpx;
color: #959DA9; color: #959da9;
text-decoration:line-through text-decoration: line-through;
} }
.popup-wrap { .popup-wrap {
position: relative; position: relative;
width: 606rpx; width: 606rpx;
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-img-wrap { .popup-img-wrap {
width: 606rpx; width: 606rpx;
height: 382rpx; height: 382rpx;
} }
.popup-info-wrapper { .popup-info-wrapper {
padding: 48rpx 40rpx; padding: 48rpx 40rpx;
} }
.popuo-info-title { .popuo-info-title {
font-size: 34rpx; font-size: 34rpx;
color: #15191F; color: #15191f;
} }
.popup-info-text { .popup-info-text {
margin-top: 24rpx; margin-top: 24rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959da9;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
.popup-footer-wrapper { .popup-footer-wrapper {
margin: 0 40rpx; margin: 0 40rpx;
padding: 40rpx 0; padding: 40rpx 0;
border-top: 1px solid #E2E7EF; border-top: 1px solid #e2e7ef;
} }
.popup-price-row { .popup-price-row {
padding: 10rpx 0; padding: 10rpx 0;
} }
.popup-price-now { .popup-price-now {
color: #15191F; color: #15191f;
} }
.popup-price-discount { .detail-price text:nth-child(1) {
width: 90rpx; height: 52rpx;
height: 36rpx; font-size: 30rpx;
margin-left: 10px; font-weight: 500;
font-size: 22rpx; line-height: 52rpx;
color: #EF4E4E; color: #15191F;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
} }
.vipPrice { .detail-price text:nth-child(2) {
color: #E8D0AF; height: 52rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); font-size: 38rpx;
border-radius: 4rpx; font-weight: 500;
opacity: 1; line-height: 52rpx;
color: #15191F;
}
.detail-price-discount {
width: 90rpx;
height: 36rpx;
margin-right: 16rpx;
border-radius: 4px;
background: #D56B52;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #EF4E4E;
}
.detail-price-special {
width: 90rpx;
height: 36rpx;
margin-right: 16rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #E8D0AF;
} }
.popup-price-old { .popup-price-old {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959da9;
text-decoration:line-through text-decoration: line-through;
} }
.popup-footer-btn { .popup-footer-btn {
width: 526rpx; width: 526rpx;
height: 80rpx; height: 80rpx;
margin-top: 30rpx; margin-top: 30rpx;
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
background-color: #86C5E1; background-color: #86c5e1;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-close-btn { .popup-close-btn {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
margin: 48rpx auto 0; margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5); background: rgba(254, 252, 249, 0.5);
border-radius: 50%; border-radius: 50%;
} }
.popup-close { .popup-close {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.toast-bg { .toast-bg {
min-width: 262rpx !important; min-width: 262rpx !important;
min-height: 262prx !important; min-height: 262prx !important;
} }
.toast-image { .toast-image {
} }
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
\ No newline at end of file
pages/home/home/home.js
...@@ -62,7 +62,7 @@ Page({ ...@@ -62,7 +62,7 @@ Page({
}) })
var that = this var that = this
App.login({ App.login({
success: function(token) { success: function (token) {
that.getBanner() that.getBanner()
that.loadVisiterPlanList() that.loadVisiterPlanList()
that.getNoticeList() that.getNoticeList()
...@@ -324,14 +324,17 @@ Page({ ...@@ -324,14 +324,17 @@ Page({
}) })
}, },
onTest2: function (event) { onTest2: function (event) {
wx.navigateTo({
url: '/pages/commodity/snacks/snacks'
})
}, },
onTest3: function (event) { onTest3: function (event) {
console.log(event)
wx.navigateTo({ wx.navigateTo({
url: '/pages/pay/order-detail/order-detail?type=' + event.currentTarget.dataset.index 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 @@ ...@@ -86,7 +86,6 @@
<button class="test-button" data-index="{{5}}" bindtap="onTest">餐品</button> <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="{{6}}" bindtap="onTest">活动</button>
<button class="test-button" data-index="{{7}}" 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="{{0}}" bindtap="onTest3">订单 未使用</button>
<button class="test-button" data-index="{{1}}" bindtap="onTest3">订单 待评价</button> <button class="test-button" data-index="{{1}}" bindtap="onTest3">订单 待评价</button>
<button class="test-button" data-index="{{2}}" bindtap="onTest3">订单 已过期</button> <button class="test-button" data-index="{{2}}" bindtap="onTest3">订单 已过期</button>
...@@ -94,5 +93,7 @@ ...@@ -94,5 +93,7 @@
<button class="test-button" data-index="{{4}}" bindtap="onTest3">订单 已评价</button> <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-index="{{5}}" bindtap="onTest3">订单 待付款</button>
<button class="test-button" data-shop="{{4}}" bindtap="onShop">餐品列表</button>
</view> </view>
</view> </view>
\ No newline at end of file
pages/pay/order-input/order-input.js
...@@ -15,6 +15,7 @@ let logicData = { ...@@ -15,6 +15,7 @@ let logicData = {
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
animation: {},
orderType: 1, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影 orderType: 1, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
...@@ -105,6 +106,11 @@ Page({ ...@@ -105,6 +106,11 @@ Page({
// options.passType = 1 // options.passType = 1
logicData.option = options logicData.option = options
this.setView() this.setView()
this.animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease'
})
}, },
setView: function () { setView: function () {
...@@ -262,8 +268,8 @@ Page({ ...@@ -262,8 +268,8 @@ Page({
winQuantity: true, // 数量选择 winQuantity: true, // 数量选择
winContact: true, // 联系信息 winContact: true, // 联系信息
winRegister: false, // 注册信息 winRegister: false, // 注册信息
winButtonPay: true, // 立即支付 winButtonPay: false, // 立即支付
winButtonAppointment: false, // 确认预约 winButtonAppointment: true, // 确认预约
}) })
break break
} }
...@@ -352,9 +358,22 @@ Page({ ...@@ -352,9 +358,22 @@ Page({
* @returns * @returns
*/ */
onNotice: function () { onNotice: function () {
// 初始底部弹出动画
let funcUnitProportion = wx.getStorageSync('unitProportion')
let funcMoveHeight = funcUnitProportion * 950
this.animation.translate(0, 0)
this.setData({ this.setData({
winNoticeDetail: true, 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"> <view class="container">
<!-- winBuyContent --> <!-- winBuyContent -->
<view class="buy-content" wx:if="{{winBuyContent}}"> <view class="buy-content" wx:if="{{winBuyContent}}">
...@@ -229,22 +236,23 @@ ...@@ -229,22 +236,23 @@
</view> </view>
</block> </block>
</view> </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>
<view class="notice-detail" wx:if="{{winNoticeDetail}}" bindtap="onNoticeClose"> <!-- winButtonPay -->
<view class="notice-item"> <cover-view class="pay" wx:if="{{winButtonPay && !winNoticeDetail}}">
<image src="{{noticeDetail}}"></image> <cover-view class="pay-tip row align-c">
</view> <cover-image src="{{imageBase + 'fail-icon-4.png'}}"></cover-image>
</view> <cover-view class="pay-tip-text row con-c align-c">付款后一经确认不得退款</cover-view>
\ No newline at end of file </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 { .notice-detail {
z-index: 1700;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 750rpx; width: 750rpx;
height: 100%; height: 100%;
padding-bottom: 48rpx;
background: rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .6);
} }
.notice-item { .notice-item {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: -950rpx;
width: 750rpx; width: 750rpx;
padding: 28px 0 12px 0; padding: 28px 0 50rpx 0;
border-radius: 24px 24px 0px 0px; border-radius: 24px 24px 0px 0px;
background: #FFFFFF; background: #FFFFFF;
} }
...@@ -25,6 +27,7 @@ ...@@ -25,6 +27,7 @@
.container { .container {
margin-top: 60rpx; margin-top: 60rpx;
padding-bottom: 232rpx;
} }
.buy-content { .buy-content {
...@@ -526,7 +529,14 @@ ...@@ -526,7 +529,14 @@
/* 立即支付 */ /* 立即支付 */
.pay { .pay {
z-index: 9;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 40rpx; margin-top: 40rpx;
padding-bottom: 36rpx;
background: #FFFFFF;
} }
.pay-tip { .pay-tip {
...@@ -534,46 +544,78 @@ ...@@ -534,46 +544,78 @@
height: 72rpx; height: 72rpx;
padding: 0 40rpx; padding: 0 40rpx;
background: #F5EEDF; background: #F5EEDF;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #837048;
} }
.pay-tip image { .pay-tip cover-image {
display: block; display: block;
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
margin-right: 14rpx; 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 { .pay-operation {
padding: 32rpx 40rpx; padding: 32rpx 40rpx;
} }
.pay-operation text { .pay-operation-amount {
height: 58rpx; height: 58rpx;
background: rgba(0, 0, 0, 0);
font-size: 34rpx; font-size: 34rpx;
font-weight: 800; font-weight: 800;
line-height: 48rpx; line-height: 48rpx;
color: #5DB5DD; color: #5DB5DD;
} }
.pay-operation button { .pay-operation-confirm {
width: 248rpx; width: 248rpx;
height: 96rpx; height: 96rpx;
border-radius: 4px; border-radius: 4px;
background: #86C5E1; background: #86C5E1;
text-align: center;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
line-height: 42px; line-height: 96rpx;
color: #FFFFFF; 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;
}
...@@ -823,4 +865,15 @@ ...@@ -823,4 +865,15 @@
color: #959da9; color: #959da9;
font-size: 26rpx; font-size: 26rpx;
line-height: 44rpx; 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 @@ ...@@ -4,11 +4,10 @@
"ignore": [] "ignore": []
}, },
"setting": { "setting": {
"urlCheck": true, "urlCheck": false,
"es6": true, "es6": true,
"enhance": true, "enhance": true,
"postcss": true, "postcss": true,
"preloadBackgroundData": false,
"minified": true, "minified": true,
"newFeature": true, "newFeature": true,
"coverView": true, "coverView": true,
...@@ -18,14 +17,15 @@ ...@@ -18,14 +17,15 @@
"scopeDataCheck": false, "scopeDataCheck": false,
"uglifyFileName": false, "uglifyFileName": false,
"checkInvalidKey": true, "checkInvalidKey": true,
"checkSiteMap": true, "checkSiteMap": false,
"uploadWithSourceMap": true, "uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": { "babelSetting": {
"ignore": [], "ignore": [],
"disablePlugins": [], "disablePlugins": [],
"outputPath": "" "outputPath": ""
}, },
"preloadBackgroundData": false,
"compileHotReLoad": false,
"useIsolateContext": true, "useIsolateContext": true,
"useCompilerModule": false, "useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": 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