Skip to content

严立 / mini-shimao

Go to a project
Commit a2b3f5c0 by 严立
Options

LL - 商品列表，购物车

parent d0ecb2cc
Inline Side-by-side
Showing with 542 additions and 264 deletions
app.json
{
"pages": [
"pages/commodity/shopping-cart/shopping-cart",
"pages/home/home/home",
"pages/home/service/service",
......@@ -23,7 +23,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",
......@@ -60,6 +60,8 @@
"l-avatar": "../miniprogram_npm/lin-ui/avatar/index",
"l-button": "../miniprogram_npm/lin-ui/button/index",
"l-card": "../miniprogram_npm/lin-ui/card/index",
"l-checkbox": "../miniprogram_npm/lin-ui/checkbox/index",
"l-checkbox-group": "../miniprogram_npm/lin-ui/checkbox-group/index",
"l-capsule-bar": "../miniprogram_npm/lin-ui/capsule-bar/index",
"l-dialog": "../miniprogram_npm/lin-ui/dialog/index",
"l-icon": "../miniprogram_npm/lin-ui/icon/index",
......@@ -96,20 +98,22 @@
"iconPath": "image/tabbar/home.png",
"selectedIconPath": "image/tabbar/home-s.png",
"text": "首页"
},
{
}, {
"pagePath": "pages/play/home/home",
"iconPath": "image/tabbar/play.png",
"selectedIconPath": "image/tabbar/play-s.png",
"text": "畅玩"
},
{
}, {
"pagePath": "pages/commodity/home/home",
"iconPath": "image/tabbar/play.png",
"selectedIconPath": "image/tabbar/play-s.png",
"text": "服务"
},{
"pagePath": "pages/campsite/home/home",
"iconPath": "image/tabbar/campsite.png",
"selectedIconPath": "image/tabbar/campsite-s.png",
"text": "营地"
},
{
}, {
"pagePath": "pages/mine/home/home",
"iconPath": "image/tabbar/mine.png",
"selectedIconPath": "image/tabbar/mine-s.png",
......
environmental.js
......@@ -6,30 +6,37 @@ let Development = {
miniAppId: 1,
databaseId: '581be62a80bb4f0485abd87abcf64dc0',
name: '海错图1号馆',
logo: 'shopping-cart-logo-4.png',
}, {
miniAppId: 2,
databaseId: '26c40446fc454a02abe61758176597f6',
name: '拾光花坊',
logo: 'shopping-cart-logo-7.png',
}, {
miniAppId: 3,
databaseId: '2614f117406548718bc091f24368c16e',
name: '元养水韵SPA',
logo: '',
}, {
miniAppId: 4,
databaseId: 'd9436d7018de43809824b6ec221ea01f',
name: '原味舒食',
logo: 'shopping-cart-logo-1.png',
}, {
miniAppId: 5,
databaseId: 'c63893bb472f43bca4ec72f890bcb4fd',
name: '原野MOJITO',
logo: '',
}, {
miniAppId: 6,
databaseId: '3cfe2e3b8b4342e8b62f8b45daf60d91',
name: '5D星空影院',
logo: '',
}, {
miniAppId: 7,
databaseId: '8a3e59c57f564c569b3d7bb278ea50b3',
name: '儿童营地',
logo: 'shopping-cart-logo-6.png',
}
]
}
......
package-lock.json
{
"name": "mini-shimao",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"lin-ui": {
"version": "0.8.6",
"resolved": "https://registry.npm.taobao.org/lin-ui/download/lin-ui-0.8.6.tgz",
"integrity": "sha1-mLXXHCzVzIAutYSCAJyRmlav1KY="
"name": "mini-shimao",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"lin-ui": {
"version": "0.8.6",
"resolved": "https://registry.npm.taobao.org/lin-ui/download/lin-ui-0.8.6.tgz",
"integrity": "sha1-mLXXHCzVzIAutYSCAJyRmlav1KY="
}
}
}
}
}
\ No newline at end of file
package.json
{
"name": "mini-shimao",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"lin-ui": "^0.8.6"
}
}
"name": "mini-shimao",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"lin-ui": "^0.8.6"
}
}
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.js
......@@ -2,8 +2,20 @@ let App = getApp()
Page({
data: {
shoppingCart: [], // 购物车列表
shoppingCartSelection: 0, // 购物车选择数量
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
shopId: '',
shopName: '',
shopLogo: '',
shoppingCart: [], // 购物车列表
shoppingCartSelection: 0, // 购物车选择数量
selectionTotal: 0, // 当前选择件数
allSelectionIsActive: false, // 全选按钮状态
amountPay: 0, // 支付金额
amountDiscount: 0, // 优惠金额
......@@ -11,9 +23,6 @@ Page({
totalNum: 3,
totalPrice: 840.00,
discount: 270.00,
allChecked: false,
isFoodCart: true,
isEnough: false,
......@@ -70,96 +79,204 @@ Page({
},
onLoad: function () {
this.setShopInfo()
// 读取上级页面的购物车数据，默认选中所有。
let funcShoppingCart = wx.getStorageSync('shoppingCartBuffer')
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
// 设置默认库存为 100 ，在提交订单时矫正为实际库存
funcShoppingCart[i].quantityMin = 1
funcShoppingCart[i].quantityMax = 100
funcShoppingCart[i].isActive = true
}
this.setData({
shoppingCart: funcShoppingCart
})
this.selectionTotal()
console.log(JSON.stringify(funcShoppingCart))
},
handleItemNumEdit(e) {
const operation = e.currentTarget.dataset.operation
const goods_id = e.currentTarget.dataset.id
let cart = this.data.cart
const index = cart.findIndex(v => v.goods_id === goods_id)
if ((cart[index].store_num === cart[index].goods_num) && operation === 1) {
console.log('没有库存')
} else if (cart[index].goods_num === 1 && operation === -1) {
wx.lin.showDialog({
type: "confirm",
title: "温馨提示",
content: "您是否要删除该商品？",
confirmColor: "#5DB5DD",
cancelColor: "#656E7B",
titleColor: "#15191F",
success: (res) => {
if (res.confirm) {
cart.splice(index, 1)
this.setCart(cart)
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
cart[index].goods_num += operation
this.setCart(cart)
}
setShopInfo: function () {
let funcShopInfo = wx.getStorageSync('shopInfoBuffer')
this.setData({
shopId: funcShopInfo.id,
shopName: funcShopInfo.name,
shopLogo: funcShopInfo.logo
})
console.log(this.data.shopLogo)
},
handleItemCheck(e) {
const goods_id = e.currentTarget.dataset.id
let cart = this.data.cart
const index = cart.findIndex(v => v.goods_id === goods_id)
cart[index].isActive = !cart[index].isActive
this.setCart(cart)
/**
* 勾选状态
* @function
* @param {object} - event
* @returns
*/
onChangeActive: function (event) {
let funcIndex = event.currentTarget.dataset.index
let funcActive = event.detail.checked
let funcShoppingCart = this.data.shoppingCart
funcShoppingCart[funcIndex].isActive = funcActive
this.setData({
shoppingCart: funcShoppingCart
})
this.selectionTotal()
},
handleItemAllCheck() {
let allChecked = !this.data.allChecked
let cart = this.data.cart
cart.forEach(v => v.checked = allChecked)
this.setCart(cart)
/**
* 减少商品数量
* @function
* @param {object} - event
* @returns
*/
onQuantityReduce: function (event) {
let funcIndex = event.currentTarget.dataset.index
let funcShoppingCart = this.data.shoppingCart
if (funcShoppingCart[funcIndex].quantity === 1) return
funcShoppingCart[funcIndex].quantity = funcShoppingCart[funcIndex].quantity - 1
this.setData({
shoppingCart: funcShoppingCart
})
this.selectionTotal()
},
setCart(cart) {
let totalPrice = 0
let totalNum = 0
let allChecked = true
cart.forEach(v => {
if (v.checked) {
totalPrice += v.goods_now_price * v.goods_num
totalNum += 1
} else {
allChecked = false
}
/**
* 增加商品数量
* @function
* @param {object} - event
* @returns
*/
onQuantityAdd: function (event) {
let funcIndex = event.currentTarget.dataset.index
let funcShoppingCart = this.data.shoppingCart
if (funcShoppingCart[funcIndex].quantityMax < funcShoppingCart[funcIndex].quantity) return
funcShoppingCart[funcIndex].quantity = funcShoppingCart[funcIndex].quantity + 1
this.setData({
shoppingCart: funcShoppingCart
})
allChecked = cart.length != 0 ? allChecked : false
this.selectionTotal()
},
/**
* 全选商品
* @function
* @param {object} - event
* @returns
*/
onSelectionAll: function (event) {
let funcActive = event.detail.checked
let funcShoppingCart = this.data.shoppingCart
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
funcShoppingCart[i].isActive = funcActive
}
this.setData({
cart,
allChecked,
totalPrice,
totalNum
shoppingCart: funcShoppingCart
})
this.selectionTotal()
},
handleClearCart() {
/**
* 清空购物车
* @function
* @param {object} - event
* @returns
*/
onClearn: function () {
wx.lin.showDialog({
type: "confirm",
title: "温馨提示",
content: "确定要清空购物车？",
confirmColor: "#5DB5DD",
cancelColor: "#656E7B",
titleColor: "#15191F",
success: (res) => {
if (res.confirm) {
let cart = []
this.setCart(cart)
} else if (res.cancel) {
type: 'confirm',
title: '温馨提示',
content: '确定要清空购物车？',
confirmColor: '#5DB5DD',
cancelColor: '#656E7B',
titleColor: '#15191F',
success: (response) => {
if (response.confirm) {
// wx.setStorageSync('shoppingCartBuffer', [])
this.setData({
shoppingCart: []
})
this.selectionTotal()
} else if (response.cancel) {
console.log('用户点击取消')
}
}
})
},
/**
* 计算当前需要结算的商品总数
* @function
* @param
* @returns
*/
selectionTotal: function () {
let funcCommodityTotal = 0 // 商品总数，包含选中与没有选中的
let funcSelectionTotal = 0 // 商品选择总数
let funcAmountPay = 0 // 支付金额
let funcAmountDiscount = 0 // 优惠金额
let funcShoppingCart = this.data.shoppingCart
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
funcCommodityTotal = funcCommodityTotal + funcShoppingCart[i].quantity
if (funcShoppingCart[i].isActive) {
funcSelectionTotal = funcSelectionTotal + funcShoppingCart[i].quantity
// 根据价格类型计算优惠金额
// funcAmountDiscount 是原价累计数值，最后减去特价即是优惠金额
// 金额 * 100 是为了将金额小数转化为整数计算，避免小数计算出错
switch (funcShoppingCart[i].priceType) {
case 1:
// 活动价
funcAmountPay = funcAmountPay + funcShoppingCart[i].priceDiscount * 100 * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * 100 * funcShoppingCart[i].quantity
break
case 2:
// 业主价
funcAmountPay = funcAmountPay + funcShoppingCart[i].priceSpecial * 100 * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * 100 * funcShoppingCart[i].quantity
break
case 3:
// 普通价
funcAmountPay = funcAmountPay + funcShoppingCart[i].price * 100 * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * 100 * funcShoppingCart[i].quantity
break
}
}
}
// 格式化金额
funcAmountDiscount = funcAmountDiscount - funcAmountPay
funcAmountPay = funcAmountPay.toString().replace(/([0-9]{2})$/, '.$1')
funcAmountDiscount = funcAmountDiscount.toString().replace(/([0-9]{2})$/, '.$1')
this.setData({
amountPay: funcAmountPay,
amountDiscount: funcAmountDiscount,
selectionTotal: funcSelectionTotal,
allSelectionIsActive: funcCommodityTotal === funcSelectionTotal ? true : false,
})
},
handleItemAllCheck() {
let allChecked = !this.data.allChecked
let cart = this.data.cart
cart.forEach(v => v.checked = allChecked)
},
handleOrderPay() {
let isEnough = true
this.setData({
......
pages/commodity/shopping-cart/shopping-cart.json
{
"usingComponents": {
"Tips": "../../../component/Tips/Tips",
"Blank": "../../../component/Blank/Blank"
},
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "购物车"
"Tips": "../../../component/Tips/Tips"
}
}
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.wxml
<view class="header row align-c">
<view class="header_img">
<image mode="aspectFill" src="./image/item01.png" />
<navigation class="navigation" titleText="购物车" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="shop-info row align-c">
<image mode="aspectFill" src="{{resourcesBase + 'commodity/' + shopLogo}}" />
<text bindtap="onClearn">清空</text>
</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>
<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 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-cover row align-c">
<l-checkbox-group l-class="list-item-selection" data-index="{{index}}" bind:linchange="onChangeActive">
<l-checkbox custom="{{true}}" checked="{{item.isActive}}" size="40rpx">
<image hidden="{{!item.isActive}}" class="list-item-selection-icon" src="/image/icon/selection-active.png" slot="icon"></image>
<image hidden="{{item.isActive}}" class="list-item-selection-icon" src="/image/icon/selection-inactive.png" slot="icon"></image>
</l-checkbox>
</l-checkbox-group>
<image src="{{item.cover}}" mode="widthFix"></image>
</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 class="list-item-info col">
<view class="list-item-name">
<text>{{item.name}}</text>
</view>
<view class="list-item-other row con-b">
<!-- 活动价样式 -->
<view class="list-item-price" wx:if="{{item.priceType === 1}}">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>{{item.priceDiscount}}</text>
<text class="price-discount">活动价</text>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>{{item.price}}</text>
</view>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>49.00</text>
<!-- 业主价样式 -->
<view class="list-item-price" wx:if="{{item.priceType === 2}}">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>{{item.priceSpecial}}</text>
<text class="price-special">业主价</text>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>{{item.price}}</text>
</view>
</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 class="list-item-price" wx:if="{{item.priceType === 3}}">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>{{item.price}}</text>
<text></text>
</view>
<view class="list-item-price-minor row">
<text></text>
<text></text>
</view>
</view>
<view class="list-item-quantity-warning" hidden="{{item.store_num < 5}}">
<text>{{'仅剩' + item.store_num + '件'}}</text>
<view class="list-item-quantity col con-e align-e">
<view class="list-item-quantity-operation row con-b align-c">
<text class="{{item.quantity === item.quantityMin ? 'list-item-quantity-disable' : ''}}" data-index="{{index}}" bindtap="onQuantityReduce">-</text>
<text>{{item.quantity}}</text>
<text class="{{item.quantityMax < item.quantity ? 'list-item-quantity-disable' : ''}}" data-index="{{index}}" bindtap="onQuantityAdd">+</text>
</view>
<view class="list-item-quantity-warning">
<text>{{item.quantityMax < 5 ? '仅剩' + item.quantityMax + '件' : ''}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 只有在食品购物车才出现 -->
<view class="tips-wrapper" wx:if="{{isFoodCart && cart.length > 0}}">
<Tips text="请在下单内3天内取餐，逾期无效"></Tips>
</view>
</view>
</block>
</view>
<view class="footer row con-c align-c">
<view class="all_chk_wrap row con-c align-c">
<radio-group>
<radio color="#86C5E1" checked="{{allChecked}}" bindtap="handleItemAllCheck">已选 ({{totalNum}})</radio>
</radio-group>
<!-- 只有在食品购物车才出现 -->
<view class="pay-tip" wx:if="{{isFoodCart && cart.length > 0}}">
<Tips text="请在下单内3天内取餐，逾期无效"></Tips>
</view>
<view class="total_price_wrap">
<view class="total_price">
￥
<text class="total_price_text">{{totalPrice}}</text>
<view class="pay row con-c align-c">
<!-- 选择计数 -->
<view class="pay-selection row con-c align-c">
<l-checkbox-group l-class="list-item-selection" bind:linchange="onSelectionAll">
<l-checkbox custom="{{true}}" checked="{{allSelectionIsActive}}" size="40rpx">
<image hidden="{{!allSelectionIsActive}}" class="list-item-selection-icon" src="/image/icon/selection-active.png" slot="icon"></image>
<image hidden="{{allSelectionIsActive}}" class="list-item-selection-icon" src="/image/icon/selection-inactive.png" slot="icon"></image>
</l-checkbox>
</l-checkbox-group>
<text>全选</text>
</view>
<view class="total_discount">共{{totalNum}}件，优惠 ￥{{discount}}</view>
</view>
<view class="order_pay_wrap row con-c align-c" bindtap="handleOrderPay">结算</view>
<!-- 库存提示弹窗 -->
<l-popup show="{{isEnough}}" content-align="center" locked="{{true}}">
<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 class="pay-amount">
<view class="pay-amount-total">
<text>￥</text>
<text>{{amountPay}}</text>
</view>
<view class="pay-amount-discount">
<text>{{'共' + selectionTotal + '件，优惠 ￥' + amountDiscount}}</text>
</view>
</view>
<view class="order_pay_wrap row con-c align-c" bindtap="handleOrderPay">结算</view>
<!-- 库存提示弹窗 -->
<l-popup show="{{isEnough}}" content-align="center" locked="{{true}}">
<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 class="popup_item_title">{{item.title}}</view>
</view>
<view class="popup_back_cart row con-c align-c" bindtap="handleBackCart">返回购物车</view>
</view>
<view class="popup_back_cart row con-c align-c" bindtap="handleBackCart">返回购物车</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 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>
</view>
</l-popup>
</l-popup>
</view>
</view>
<Blank></Blank>
\ No newline at end of file
<!-- 清空弹窗 -->
<l-dialog l-content-class="l-content" l-cancel-class="l-cancel" title-color="#15191F" cancel-color="#656E7B" confirm-color="#5DB5DD"></l-dialog>
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.wxss
......@@ -3,30 +3,35 @@ Page {
height: 100%;
}
.header {
width: 100%;
height: 116rpx;
padding: 16rpx 40rpx;
font-size: 30rpx;
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.header_img {
width: 112rpx;
height: 84rpx;
.container {
margin-top: 150rpx;
}
.header_img image {
width: 100%;
height: 100%;
.shop-info {
width: 750rpx;
height: 116rpx;
padding: 16rpx 40rpx;
font-size: 30rpx;
}
.header_title {
flex: 1;
color: #c36069;
.shop-info > image {
width: 400rpx;
height: 100rpx;
}
.header_clear {
height: 100%;
.shop-info > text {
flex-grow: 1;
height: 100rpx;
text-align: right;
line-height: 100rpx;
color: #656e7b;
}
......@@ -36,37 +41,36 @@ Page {
/* 购物车列表 */
.shopping-cart-list {
width: 100%;
height: calc(100vh - 390rpx);
margin-top: 10rpx;
width: 750rpx;
margin-top: 50rpx;
padding-bottom: 200rpx;
}
.list-item {
width: 100%;
height: 250rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
.list-item-radio {
.list-item-selection,
.list-item-selection-icon {
width: 40rpx;
height: 40rpx;
margin: 54rpx 24rpx 0 0;
}
.list-item-radio radio {
transform: scale(0.7);
.list-item-cover {
height: 148rpx;
}
.list-item-cover image {
.list-item-cover > image {
width: 148rpx;
height: 148rpx;
margin-right: 30rpx;
margin: 0 30rpx 0 24rpx;
}
.list-item-info {
width: 430rpx;
height: 168rpx;
min-height: 168rpx;
}
.list-item-name {
......@@ -107,6 +111,19 @@ Page {
color: #EF4E4E;
}
.list-item-price-main .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: 30rpx;
color: #E8D0AF;
}
.list-item-price-minor text {
height: 32rpx;
font-size: 22rpx;
......@@ -147,6 +164,10 @@ Page {
line-height: 24rpx;
}
.list-item-quantity-disable {
color: #CDD1D7;
}
.list-item-quantity-warning {
width: 168rpx;
height: 32rpx;
......@@ -164,48 +185,63 @@ Page {
.tips-wrapper {
position: absolute;
.pay-tip {
position: fixed;
left: 0;
bottom: 196rpx;
width: 100%;
bottom: 200rpx;
width: 750rpx;
height: 72rpx;
}
.footer {
/* 结算区域 */
.pay {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 196rpx;
background-color: #fff;
display: flex;
width: 750rpx;
height: 200rpx;
padding: 0 40rpx 36rpx 36rpx;
box-sizing: border-box;
border-top: 1px solid #e2e7ef;
border-top: 1px solid #E2E7EF;
background: #FFFFFF;
}
.all_chk_wrap {
flex: 3;
.pay-selection {
height: 36rpx;
font-size: 26rpx;
color: #15191f;
font-weight: 400;
line-height: 36rpx;
color: #15191F;
}
.pay-selection text {
margin-left: 8rpx;
}
.total_price_wrap {
.pay-amount {
flex: 5;
text-align: right;
padding-right: 32rpx;
}
.total_price {
color: #86c5e1;
.pay-amount-total {
height: 53rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 42rpx;
color: #5DB5DD;
}
.total_price_text {
font-size: 44rpx;
.pay-amount-total text:nth-child(2) {
font-size: 38rpx;
}
.total_discount {
.pay-amount-discount {
height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #15191F;
}
.order_pay_wrap {
......@@ -264,4 +300,4 @@ Page {
image {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
pages/commodity/snacks/snacks.js
......@@ -3,6 +3,8 @@ let App = getApp()
Page({
data: {
shopId: '',
shopName: '',
shopLogo: '',
sideBar: [], // 侧边菜单
menuTitle: '', // 商品列表标题
commodityList: [], // 商品列表
......@@ -26,7 +28,9 @@ Page({
for (let i = 0, l = funcShopId.length; i < l; i++) {
if (funcMiniAppId === funcShopId[i].miniAppId) {
this.setData({
shopId: funcShopId[i].databaseId
shopId: funcShopId[i].databaseId,
shopName: funcShopId[i].name,
shopLogo: funcShopId[i].logo,
})
break
}
......@@ -157,6 +161,8 @@ Page({
success: (response) => {
let funcResponse = response.data
funcItem.banner = funcResponse.imgs.split('|')
funcItem.banner.pop()
console.log(funcItem.banner)
this.setData({
commodityDetail: funcItem,
winCommodityDetail: true
......@@ -233,6 +239,7 @@ Page({
*/
onShoppingCart: function() {
console.log(this.data.shoppingCart)
wx.setStorageSync('shopInfoBuffer', { 'id': this.data.shopId, 'name': this.data.shopName, 'logo': this.data.shopLogo })
wx.setStorageSync('shoppingCartBuffer', this.data.shoppingCart)
wx.navigateTo({
url: '/pages/commodity/shopping-cart/shopping-cart',
......
pages/commodity/snacks/snacks.json
{
"usingComponents": {},
"navigationBarTitleText": "购物车",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff"
"usingComponents": {}
}
\ No newline at end of file
pages/commodity/snacks/snacks.wxml
<l-toast show="{{winToast}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
<navigation class="navigation" titleText="{{shopName}}" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<view class="cates">
<view class="cates-container">
<!-- 侧边菜单 -->
......@@ -84,9 +86,20 @@
<!-- 商品详情弹窗 -->
<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 id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" interval="5000" duration="500">
<block wx:for="{{commodityDetail.banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-wave">
<image src="/image/ornament-1.png" mode="widthFix"></image>
</view>
</view>
<view class="popup-info-wrapper">
<view class="popuo-info-title">{{commodityDetail.name}}</view>
<view class="popup-info-text">{{commodityDetail.describe}}</view>
......@@ -100,9 +113,12 @@
</view>
<view class="detail-price">
<text>￥</text>
<text>{{commodityDetail.priceDiscount}}</text>
</view>
<view class="popup-price-old">
<text>￥</text>
<text>{{commodityDetail.price}}</text>
</view>
<view class="popup-price-old">¥68.00</view>
</view>
<!-- 业主价样式 -->
......@@ -112,9 +128,12 @@
</view>
<view class="detail-price">
<text>￥</text>
<text>{{commodityDetail.priceSpecial}}</text>
</view>
<view class="popup-price-old">
<text>￥</text>
<text>{{commodityDetail.price}}</text>
</view>
<view class="popup-price-old">¥68.00</view>
</view>
<!-- 普通价样式 -->
......
pages/commodity/snacks/snacks.wxss
Page {
height: 100%;
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.cates {
height: 100%;
margin-top: 150rpx;
}
.cates-container {
......@@ -145,7 +150,7 @@ Page {
width: 78rpx;
height: 32rpx;
border-radius: 4px;
background: #D56B52;
background: #FAEDEA;
text-align: center;
font-size: 18rpx;
......@@ -262,7 +267,7 @@ Page {
height: 36rpx;
margin-right: 16rpx;
border-radius: 4px;
background: #D56B52;
background: #FAEDEA;
text-align: center;
font-size: 18rpx;
......@@ -321,9 +326,47 @@ Page {
}
.toast-image {
z-index: 1900;
}
image {
width: 100%;
height: 100%;
}
/* 商品详情样式 */
.banner {
position: relative;
width: 606rpx;
height: 382rpx;
border-radius: 4px;
background: #FFFFFF;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 606rpx;
height: 382rpx;
}
.banner-wave {
z-index: 1100;
position: absolute;
bottom: -2rpx;
left: 0;
width: 606rpx;
height: 50rpx;
}
.banner-wave image {
width: 606rpx;
height: 50rpx;
}
\ No newline at end of file
pages/home/home/home.js
......@@ -70,6 +70,17 @@ Page({
})
},
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/pages/home/home/home'
}
},
setNavigationLogo: function () {
this.setData({
navigationLogoTop: App.modular.utils.navigationElementCenterMarginTop(60)
......
pages/home/home/home.wxml
......@@ -94,6 +94,6 @@
<button class="test-button" data-index="{{5}}" bindtap="onTest3">订单 待付款</button>
<button class="test-button" data-shop="{{4}}" bindtap="onShop">餐品列表</button>
<button class="test-button" data-shop="{{4}}" bindtap="onShop">餐品列表1111</button>
</view>
</view>
\ No newline at end of file
project.config.json
......@@ -140,27 +140,15 @@
},
{
"id": -1,
<<<<<<< HEAD
"name": "pages/commodity/snacks/snacks",
"pathName": "pages/commodity/snacks/snacks",
=======
"name": "pages/pay/coupon-input/coupon-input",
"pathName": "pages/pay/coupon-input/coupon-input",
>>>>>>> 667f630dfecbd067586751628eb240b2f54db267
"query": "",
"scene": null
},
{
<<<<<<< HEAD
"id": 11,
"name": "pages/home/service/service",
"pathName": "pages/home/service/service",
"query": "",
=======
"id": -1,
"name": "pages/pay/coupon-detail/coupon-detail",
"pathName": "pages/pay/coupon-detail/coupon-detail",
>>>>>>> 667f630dfecbd067586751628eb240b2f54db267
"scene": null
}
]
......
sitemap.json
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [
{
"action": "allow",
"page": "*"
}
]
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment