Commit 3e7bef2e by wjw

ww--项目服务修改

parents 0863868f b92a75d6
Showing with 2520 additions and 1011 deletions
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 iRule from './utils/rule/rule.js'
import iEnvironmental from './environmental.js'
App({ App({
modular: { modular: {
'rule': iRule,
'utils': iUtils, 'utils': iUtils,
'miment': iMiment, 'miment': iMiment,
}, },
...@@ -10,10 +13,12 @@ App({ ...@@ -10,10 +13,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 +27,6 @@ App({ ...@@ -22,18 +27,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 +65,11 @@ App({ ...@@ -72,11 +65,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 +113,13 @@ App({ ...@@ -120,11 +113,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)
......
...@@ -23,12 +23,14 @@ ...@@ -23,12 +23,14 @@
"pages/commodity/home/home", "pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart", "pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/food/food",
"pages/commodity/project/project", "pages/commodity/project/project",
"pages/commodity/snacks/snacks", "pages/commodity/project-detail/project-detail",
"pages/commodity/art/art", "pages/commodity/menu-art/menu-art",
"pages/commodity/menu-food/menu-food",
"pages/commodity/menu-snacks/menu-snacks",
"pages/commodity/room/room", "pages/commodity/room/room",
"pages/commodity/room-appointment/room-appointment", "pages/commodity/room-appointment/room-appointment",
"pages/campsite/home/home", "pages/campsite/home/home",
"pages/campsite/home-mirror/home-mirror", "pages/campsite/home-mirror/home-mirror",
...@@ -52,6 +54,7 @@ ...@@ -52,6 +54,7 @@
"pages/pay/coupon/coupon", "pages/pay/coupon/coupon",
"pages/pay/coupon-input/coupon-input", "pages/pay/coupon-input/coupon-input",
"pages/pay/coupon-detail/coupon-detail", "pages/pay/coupon-detail/coupon-detail",
"pages/login/login" "pages/login/login"
], ],
"usingComponents": { "usingComponents": {
...@@ -59,8 +62,10 @@ ...@@ -59,8 +62,10 @@
"swiper-point": "../component/swiper-point/swiper-point", "swiper-point": "../component/swiper-point/swiper-point",
"l-avatar": "../miniprogram_npm/lin-ui/avatar/index", "l-avatar": "../miniprogram_npm/lin-ui/avatar/index",
"l-button": "../miniprogram_npm/lin-ui/button/index", "l-button": "../miniprogram_npm/lin-ui/button/index",
"l-card": "../miniprogram_npm/lin-ui/card/index",
"l-capsule-bar": "../miniprogram_npm/lin-ui/capsule-bar/index", "l-capsule-bar": "../miniprogram_npm/lin-ui/capsule-bar/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-dialog": "../miniprogram_npm/lin-ui/dialog/index", "l-dialog": "../miniprogram_npm/lin-ui/dialog/index",
"l-icon": "../miniprogram_npm/lin-ui/icon/index", "l-icon": "../miniprogram_npm/lin-ui/icon/index",
"l-list": "../miniprogram_npm/lin-ui/list/index", "l-list": "../miniprogram_npm/lin-ui/list/index",
...@@ -98,20 +103,22 @@ ...@@ -98,20 +103,22 @@
"iconPath": "image/tabbar/home.png", "iconPath": "image/tabbar/home.png",
"selectedIconPath": "image/tabbar/home-s.png", "selectedIconPath": "image/tabbar/home-s.png",
"text": "首页" "text": "首页"
}, }, {
{
"pagePath": "pages/play/home/home", "pagePath": "pages/play/home/home",
"iconPath": "image/tabbar/play.png", "iconPath": "image/tabbar/play.png",
"selectedIconPath": "image/tabbar/play-s.png", "selectedIconPath": "image/tabbar/play-s.png",
"text": "畅玩" "text": "畅玩"
}, }, {
{ "pagePath": "pages/commodity/home/home",
"iconPath": "image/tabbar/play.png",
"selectedIconPath": "image/tabbar/play-s.png",
"text": "服务"
},{
"pagePath": "pages/campsite/home/home", "pagePath": "pages/campsite/home/home",
"iconPath": "image/tabbar/campsite.png", "iconPath": "image/tabbar/campsite.png",
"selectedIconPath": "image/tabbar/campsite-s.png", "selectedIconPath": "image/tabbar/campsite-s.png",
"text": "营地" "text": "营地"
}, }, {
{
"pagePath": "pages/mine/home/home", "pagePath": "pages/mine/home/home",
"iconPath": "image/tabbar/mine.png", "iconPath": "image/tabbar/mine.png",
"selectedIconPath": "image/tabbar/mine-s.png", "selectedIconPath": "image/tabbar/mine-s.png",
......
let Environmental = 'dev'
let Development = {
host: 'https://sm-web.meiqicloud.com',
shopId: [
{
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',
}
]
}
let Production = {
host: 'https://smbhyh-web.meiqicloud.com',
}
export default Environmental === 'dev' ? Development : Production
\ No newline at end of file
{ {
"name": "mini-shimao", "name": "mini-shimao",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
"lin-ui": { "lin-ui": {
"version": "0.8.6", "version": "0.8.6",
"resolved": "https://registry.npm.taobao.org/lin-ui/download/lin-ui-0.8.6.tgz", "resolved": "https://registry.npm.taobao.org/lin-ui/download/lin-ui-0.8.6.tgz",
"integrity": "sha1-mLXXHCzVzIAutYSCAJyRmlav1KY=" "integrity": "sha1-mLXXHCzVzIAutYSCAJyRmlav1KY="
}
} }
} }
} \ No newline at end of file
{ {
"name": "mini-shimao", "name": "mini-shimao",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",
"main": "app.js", "main": "app.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"lin-ui": "^0.8.6" "lin-ui": "^0.8.6"
} }
} }
\ No newline at end of file
// pages/home/service/service.js
const App = getApp()
Page({ Page({
data: {
/**
* 页面的初始数据
*/
data: {
imageBase: App.globalData.appResourcesBase,
data: [ //畅想美食
{ url: '/image/ywssLogo@2x.png', bgc: '#586A46', },
{ url: '/image/Logo@2x (3).png', bgc: '#13625F' },
],
data1: [
{ url: App.globalData.appResourcesBase + 'commodity/home-shop-3.png' },
{ url: App.globalData.appResourcesBase + 'commodity/home-shop-4.png' },
],
phone: '13316748039',
hotline: false, //客服热线
},
//客服热线拨打
call() {
wx.makePhoneCall({
phoneNumber: this.data.phone,
})
}, },
onLoad: function (options) {
//取消拨打
cancel() {
this.setData({
hotline: false,
})
}, },
}) })
\ No newline at end of file
{ {
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
<!--pages/home/home/home.wxml--> <!--pages/home/service/service.wxml-->
<text>pages/home/home/home.wxml</text> <navigation class="navigation"></navigation>
<view class="container">
<view class="greetings_header">
<view class="greetings_title">Monica , 早上好!</view>
<image src="/image/cxms@2x.png" class="title_img"></image>
<view class="greetings_header_describe">这里有来自大自然的馈赠用心烹饪的美食</view>
</view>
<view class="greetings_body">
<swiper indicator-dots="true" style="height:1469rpx;">
<block wx:for="{{data}}">
<swiper-item>
<view class="service_store" style="background:{{item.bgc}}">
<image src="{{item.url}}" class="{{index == 0? 'store_img' : 'store_img1'}} "></image>
<view class="order_button">立即点餐</view>
</view>
<view class="service_store_shop">
<view class="service_store_shop_item" wx:for="{{4}}">
<image class="shop_img"></image>
<text class="shop_goods">炭烤猪肋排拼盘</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="service_item" style="margin-bottom:136rpx;">
<view style="padding-left:40rpx;" class="greetings_header_describe">您可以用最优惠的价格享受超级服务</view>
<view class="item_banner">
<image style="z-index:-1;" class="item_banner_img" src="{{imageBase + 'commodity/home-head.png'}}"></image>
<view class="goods_buy">立即选购</view>
</view>
<view class="item_container">
<image wx:for="{{3}}" class="items_img"></image>
</view>
</view>
<view class="service_item">
<view style="padding-left:40rpx;white-space:pre-wrap" class="greetings_header_describe">尽情玩耍 随时为你补充能量
</view>
<view class="item_banner" style="background: #E8F1F6;text-align:center;z-index:-1;height:512rpx;">
<image style="width:312rpx;height:56rpx;margin-top:152rpx;" src="{{imageBase + 'commodity/home-title-1.png'}}"></image>
<view>
<image style="width:148rpx;height:16rpx;margin-top:8rpx;" src="{{imageBase + 'commodity/home-tip-1.png'}}"></image>
</view>
</view>
<view class="item_container">
<view style="margin-bottom:64rpx;" wx:for="{{2}}">
<image class="items_img" style="margin-bottom:0;"></image>
<view class="items_text">儿童营地接待区</view>
</view>
</view>
</view>
<view class="service_item">
<image style="margin-left:40rpx;" src="/image/wcsc@2x.png" class="title_img"></image>
<view style="padding-left:40rpx;white-space:pre-wrap" class="greetings_header_describe">可以为家人、朋友 准备一份精心的礼物
</view>
<view class="greetings_body">
<swiper indicator-dots="true" style="height:1469rpx;">
<block wx:for="{{data1}}">
<swiper-item>
<view class="service_store">
<image src="{{item.url}}" class="item_banner_img"></image>
<view style="width:750rpx;height:382rpx;"></view>
<view style="background:{{index== 0 ?'#C93120' : '#BD5B66' }} ;color: #FAF0DF;" class="order_button">立即选购</view>
</view>
<view class="service_store_shop">
<view class="service_store_shop_item" wx:for="{{4}}">
<image class="shop_img"></image>
<text class="shop_goods">炭烤猪肋排拼盘</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="service_item">
<view style="padding-left:40rpx;white-space:pre-wrap;width:472rpx;" class="greetings_header_describe">滨海温泉院墅 足不出户即可享受滨海温泉
</view>
<view style="position: relative;">
<image class="home_footer" src="{{imageBase + 'commodity/home-footer.png'}}"></image>
<view class="seeHouse">预约看房</view>
<view class="call" bindtap="call">拨打客服</view>
</view>
</view>
</view>
<!-- 客服热线 -->
<l-arc-popup show="{{hotline}}" arc-radius="30">
<view class="phone">{{phone}}</view>
<view class="call" bindtap="call">呼叫</view>
<view style="height:10rpx;background-color:rgb(246,247,249);"></view>
<view class="call" bindtap="cancel">取消</view>
</l-arc-popup>
\ No newline at end of file
/* pages/home/home/home.wxss */ .greetings_header {
\ No newline at end of file padding-top: 196rpx;
padding-left: 46rpx;
width: 750rpx;
}
.greetings_title {
font-size: 58rpx;
font-weight: 500;
color: #15191f;
text-align: left;
}
.title_img {
width: 214rpx;
height: 50rpx;
margin-top: 128rpx;
}
.greetings_header_describe {
font-weight: 300;
color: #15191f;
margin-top: 12rpx;
width: 414rpx;
font-size: 34rpx;
line-height: 58rpx;
letter-spacing: 1px;
}
.greetings_body {
width: 750rpx;
height: height;
margin-top: 64rpx;
margin-bottom: 200rpx;
}
.service_store {
width: 750rpx;
height: 600rpx;
/* background: #586A46; */
text-align: center;
}
.store_img {
width: 178rpx;
height: 186rpx;
margin-top: 92rpx;
margin-bottom: 48rpx;
}
.store_img1 {
width: 320rpx;
height: 120rpx;
margin-top: 134rpx;
margin-bottom: 72rpx;
}
.order_button {
background: #ebe2ce;
width: 200rpx;
height: 64rpx;
border-radius: 4rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 64rpx;
color: #586a46;
margin: auto;
}
.service_store_shop {
width: 670rpx;
/* height: 932rpx; */
margin: auto;
margin-top: -100rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.service_store_shop_item {
width: 328rpx;
height: 410rpx;
text-align: center;
margin-bottom: 48rpx;
}
.shop_img {
width: 328rpx;
height: 328rpx;
background-color: blue;
}
.shop_goods {
font-weight: 300;
color: #15191f;
line-height: 42px;
}
.service_item {
width: 750rpx;
height: auto;
/* margin-bottom: 136rpx; */
}
.item_banner {
width: 750rpx;
height: 600rpx;
margin-top: 64rpx;
position: relative;
/* background-color: red; */
}
.item_banner_img {
width: 750rpx;
height: 600rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.item_container {
width: 670rpx;
height: auto;
margin: auto;
margin-top: -100rpx;
}
.items_img {
width: 670rpx;
height: 328rpx;
background-color: blue;
margin-bottom: 64rpx;
}
.goods_buy {
position: absolute;
width: 200rpx;
height: 64rpx;
top: 308rpx;
left: 276rpx;
border-radius: 4px;
background: #86c5e1;
font-weight: 500;
color: #fff;
font-size: 26rpx;
line-height: 64rpx;
text-align: center;
}
.items_text {
text-align: center;
margin-top: 45rpx;
font-weight: 300;
color: #000;
letter-spacing: 3px;
line-height: 42rpx;
}
.home_footer {
width: 750rpx;
height: 1640rpx;
margin-top: 64rpx;
}
.seeHouse {
position: absolute;
background: #86c5e1;
border-radius: 4px;
top: 294rpx;
width: 200rpx;
height: 64rpx;
left: 276rpx;
line-height: 64rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
font-weight: 500;
}
.call {
position: absolute;
top: 1310rpx;
width: 200rpx;
height: 64rpx;
background: #d0b08f;
left: 276rpx;
line-height: 64rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
font-weight: 500;
}
let App = getApp()
Page({
data: {
shopId: '',
shopName: '',
shopLogo: '',
sideBar: [], // 侧边菜单
menuTitle: '', // 商品列表标题
commodityList: [], // 商品列表
commodityDetail: {}, // 商品详情
shoppingCart: [], // 购物车列表
shoppingCartTotal: 0, // 购物车总数
currentIndex: 0,
scrollTop: 0,
winToast: false,
winLoading: 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,
shopName: funcShopId[i].name,
shopLogo: funcShopId[i].logo,
})
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()
}
})
},
/**
* 查询分类商品
* @function
* @param
* @returns
*/
queryCommodity: function () {
this.setData({
winLoading: true
})
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, // 普通价
'priceText': App.modular.utils.formatAmount(funcResponse[i].sightseerPrice), // 普通价文本格式
'priceSpecial': funcResponse[i].ownerPrice, // 业主价
'priceSpecialText': App.modular.utils.formatAmount(funcResponse[i].ownerPrice), // 业主价文本格式
'priceDiscount': funcResponse[i].price, // 活动价
'priceDiscountText': App.modular.utils.formatAmount(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({
winLoading: false,
commodityList: funcCommodityList,
})
},
})
},
/**
* 侧边菜单选择事件
* @function
* @param {object} - event
* @returns
*/
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()
},
/**
* 查询商品详情
* @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('|')
funcItem.banner.pop()
this.setData({
commodityDetail: funcItem,
winCommodityDetail: true
})
}
})
},
/**
* 关闭商品详情
* @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,
})
},
/**
* 跳转购物车页面
* @function
* @param
* @returns
*/
onShoppingCart: function() {
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',
})
},
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<l-toast
l-image-class="toast-image"
l-class="toast-bg"
show="{{winToast}}"
mask="{{true}}"
image="/image/success.png"
title="添加购物车成功"
></l-toast>
<l-toast
show="{{winLoading}}"
icon="loading"
title="加载中"
duration="20000"
mask="{{true}}"
></l-toast>
<navigation class="navigation" titleText="{{shopName}}" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<view class="cates">
<view class="cates-container">
<!-- 侧边菜单 -->
<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>
</block>
</view>
<!-- 商品列表 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y class="right-content">
<view class="right-content-title">{{menuTitle}}</view>
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-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.name}}</view>
<view class="item-info-text-wrap">
<view wx:if="{{item.describe}}">{{item.describe}}</view>
<view wx:else class="item-info-content"></view>
</view>
<view class="item-other row con-b">
<!-- 活动价样式 -->
<view wx:if="{{item.priceType === 1}}">
<view class="item-price row align-c">
<text>¥</text>
<text>{{item.priceDiscountText}}</text>
<text class="item-price-discount">活动价</text>
</view>
<view class="item-info-old-price row align-c">
<text>¥</text>
<text>{{item.priceText}}</text>
</view>
</view>
<!-- 业主价样式 -->
<view wx:if="{{item.priceType === 2}}">
<view class="item-price row align-c">
<text>¥</text>
<text>{{item.priceSpecialText}}</text>
<text class="item-price-special">业主价</text>
</view>
<view class="item-info-old-price row align-c">
<text>¥</text>
<text>{{item.priceText}}</text>
</view>
</view>
<!-- 普通价样式 -->
<view wx:if="{{item.priceType === 3}}">
<view class="item-price row align-c">
<text>¥</text>
<text>{{item.priceText}}</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 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>
</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.priceDiscountText}}</text>
</view>
<view class="popup-price-old">
<text>¥</text>
<text>{{commodityDetail.priceText}}</text>
</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.priceSpecialText}}</text>
</view>
<view class="popup-price-old">
<text>¥</text>
<text>{{commodityDetail.priceText}}</text>
</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.priceText}}</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>
\ No newline at end of file
Page { .navigation {
height: 100%; z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
} }
.cates { .cates {
height: 100%; height: 100%;
margin-top: 150rpx;
} }
.cates-container { .cates-container {
height: 100vh; height: 100vh;
display: flex; display: flex;
} }
.left-menu {
.side-bar {
width: 160rpx; width: 160rpx;
background: #F2F3F5; overflow-y: scroll;
background: #f2f3f5;
} }
::-webkit-scrollbar {
.side-bar::-webkit-scrollbar {
width: 0; width: 0;
height: 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::-webkit-scrollbar {
width: 0;
}
.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 {
...@@ -50,7 +66,7 @@ Page { ...@@ -50,7 +66,7 @@ Page {
width: 104rpx; width: 104rpx;
height: 104rpx; height: 104rpx;
border-radius: 50%; border-radius: 50%;
background-color: #86C5E1; background-color: #86c5e1;
} }
.cart-num { .cart-num {
...@@ -61,9 +77,9 @@ Page { ...@@ -61,9 +77,9 @@ Page {
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;
} }
...@@ -72,22 +88,10 @@ Page { ...@@ -72,22 +88,10 @@ Page {
height: 48rpx; height: 48rpx;
} }
.redPoint { .commodity-item {
position: fixed;
right: 80rpx;
bottom: 560rpx;
width: 15px;
height: 15px;
background-color: #E66060;
border-radius: 50%;
}
.animation-hide {
display: none;
}
.item {
width: 100%; width: 100%;
height: 250rpx; min-height: 250rpx;
padding-bottom: 56rpx;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -103,48 +107,86 @@ Page { ...@@ -103,48 +107,86 @@ Page {
.item-info-title { .item-info-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #15191F; color: #15191F;
font-weight: 600;
} }
.item-info-text-wrap { .item-info-text-wrap {
width: 100%; display: -webkit-box;
padding: 16rpx 0 24rpx; width: 342rpx;
height: 64rpx;
margin-top: 16rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 22rpx; font-size: 22rpx;
font-weight: 400;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959DA9;
} }
.item-info-content { .item-info-content {
height: 40rpx; height: 40rpx;
} }
.item-info-now-price { .item-other {
margin-top: 24rpx;
}
.item-operation {
margin-top: 24rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #15191F; color: #15191f;
} }
.price-symbol { .item-price text:nth-child(1) {
font-size: 22rpx; font-size: 22rpx;
}
.item-price text:nth-child(2) {
margin-right: 8rpx;
font-size: 30rpx;
} }
.item-now-price-text { .item-price-discount {
width: 78rpx; width: 78rpx;
height: 32rpx; height: 32rpx;
margin-left: 4px; border-radius: 4px;
font-size: 20rpx; background: #FAEDEA;
text-align: center;
font-size: 18rpx;
font-weight: 500; font-weight: 500;
color: #EF4E4E;
line-height: 32rpx; line-height: 32rpx;
text-align: center; color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
} }
.vipPrice {
color: #E8D0AF; .item-price-special {
width: 78rpx;
height: 32rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); 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 { .goods-add-btn-wrap {
...@@ -156,12 +198,11 @@ Page { ...@@ -156,12 +198,11 @@ Page {
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: #C2C7CF; color: #959da9;
text-decoration:line-through text-decoration: line-through;
} }
.popup-wrap { .popup-wrap {
...@@ -179,63 +220,96 @@ Page { ...@@ -179,63 +220,96 @@ Page {
.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;
}
.detail-price text:nth-child(1) {
height: 52rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 52rpx;
color: #15191F;
}
.detail-price text:nth-child(2) {
height: 52rpx;
font-size: 38rpx;
font-weight: 500;
line-height: 52rpx;
color: #15191F; color: #15191F;
} }
.popup-price-discount { .detail-price-discount {
width: 90rpx; width: 90rpx;
height: 36rpx; height: 36rpx;
margin-left: 10px; margin-right: 16rpx;
font-size: 22rpx; border-radius: 4px;
background: #FAEDEA;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 32rpx;
color: #EF4E4E; color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
} }
.vipPrice { .detail-price-special {
color: #E8D0AF; width: 90rpx;
height: 36rpx;
margin-right: 16rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); 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 { .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 {
...@@ -255,11 +329,49 @@ Page { ...@@ -255,11 +329,49 @@ Page {
min-width: 262rpx !important; min-width: 262rpx !important;
min-height: 262prx !important; min-height: 262prx !important;
} }
.toast-image { .toast-image {
z-index: 1900;
} }
image { image {
width: 100%; width: 100%;
height: 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/commodity/project-detail/project-detail.js
Page({
data: {
projectType: 3, // 1 儿童营地,2 - SPA,3 - 文创
titleText: '',
bgColor: '',
backgroundImg: '',
projectList: []
},
onLoad: function (options) {
let { projectType } = this.data
switch (projectType) {
case 1:
this.setData({
titleText: '儿童营地',
backgroundImg: '',
bgColor: 'linear-gradient(180deg, rgba(246, 218, 218, 0) 0%, #F6DADA 100%)',
projectList: [
{
id: 0,
cover: '',
name: '儿童营地日票(次票)',
priceSpecial: '10',
price: '49',
unit: '次',
btn: '购买门票',
isSpecial: true
},
{
id: 1,
cover: '',
name: '儿童营地日票(套票)',
priceSpecial: '80',
price: '100',
unit: '次',
btn: '购买门票',
isSpecial: true
},
{
id: 2,
cover: '',
name: '儿童营地月卡',
priceSpecial: '300',
price: '500',
unit: '人',
btn: '购买门票',
isSpecial: true
},
{
id: 3,
cover: '',
name: '儿童营地年卡',
priceSpecial: '1680',
price: '2680',
unit: '人',
btn: '购买门票',
isSpecial: true
}
]
})
break
case 2:
this.setData({
titleText: '元养水韵SPA服务',
backgroundImg: '',
bgColor: '#8FC3CB',
projectList: [
{
id: 0,
cover: '',
name: '泰国皇室经典SPA芳香精油理疗套餐',
msg: '保湿补水,深层清洁,提亮肤色',
priceSpecial: '120',
price: '180',
btn: '购买',
isSpecial: true
},
{
id: 1,
cover: '',
name: '全身舒缓释压芳香SPA护理',
msg: '保湿补水,深层清洁,提亮肤色',
priceSpecial: '120',
price: '180',
btn: '购买',
isSpecial: false
},
]
})
break
case 3:
this.setData({
titleText: '海错图购票',
backgroundImg: '',
bgColor: '#F5ECD8',
projectList: [
{
id: 0,
cover: '',
name: '海错图平日票',
priceSpecial: '42',
price: '49',
unit: '人',
btn: '购买门票',
isSpecial: true
},
{
id: 1,
cover: '',
name: '海错图周末票',
priceSpecial: '60',
price: '80',
unit: '人',
btn: '购买门票',
isSpecial: true
}
]
})
break
}
},
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<navigation class="navigation" titleText="{{titleText}}" backIcon="/image/back.png"></navigation>
<view class="container con-s" style="background: {{bgColor}}">
<view class="background-img">
<image src="{{backgroundImg}}"></image>
</view>
<block wx:for="{{projectList}}" wx:key="id">
<view class="project-wrapper col">
<view class="project-cover">
<image src=""></image>
</view>
<view class="project-info">
<view class="project-name">
<text>{{item.name}}</text>
</view>
<view class="project-msg" wx:if="{{item.msg}}">
<text>{{item.msg}}</text>
</view>
<view class="project-price-wrapper row align-c">
<view class="price-special-msg" wx:if="{{item.isSpecial}}">
<text>业主价</text>
</view>
<view class="price-special">
<text class="price-symbol">¥</text>
<text>{{item.priceSpecial}}</text>
<text class="price-unit" wx:if="{{item.unit}}">{{'/' + item.unit}}</text>
</view>
<view class="price-old">
<text>{{'¥' + item.price}}</text>
<text class="price-old-unit" wx:if="{{item.unit}}">{{'/' + item.unit}}</text>
</view>
</view>
<view class="project-btn">
<text>{{item.btn}}</text>
</view>
</view>
</view>
</block>
</view>
\ No newline at end of file
.container {
height: 100%;
padding-bottom: 96rpx;
}
.background-img {
width: 750rpx;
height: 700rpx;
background-color: pink;
}
.project-wrapper {
margin-bottom: 48rpx;
border-radius: 4rpx;
}
.project-cover {
width: 670rpx;
height: 376rpx;
background-color: lightpink;
}
.project-info {
position: relative;
padding: 32rpx;
background-color: #fff;
}
.project-name {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
}
.project-msg {
margin-top: 16rpx;
color: #959DA9;
font-size: 26rpx;
line-height: 36rpx;
}
.project-price-wrapper {
height: 64rpx;
margin-top: 40rpx;
line-height: 64rpx;
}
.price-special-msg {
width: 78rpx;
height: 32rpx;
margin-right: 12rpx;
color: #E8D0AF;
font-size: 18rpx;
text-align: center;
line-height: 32rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
}
.price-special {
margin-right: 12rpx;
color: #EF4E4E;
font-size: 34rpx;
line-height: 34rpx;
font-weight: 600;
}
.price-symbol {
font-size: 24rpx;
}
.price-unit {
font-size: 20rpx;
}
.price-old {
margin-top: 10rpx;
color: #959DA9;
font-size: 22rpx;
line-height: 32rpx;
letter-spacing: 1rpx;
text-decoration: line-through;
}
.price-old-unit {
font-size: 18rpx;
}
.project-btn {
position: absolute;
right: 32rpx;
bottom: 32rpx;
width: 152rpx;
height: 64rpx;
color: #fff;
font-size: 26rpx;
line-height: 64rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
Page({ Page({
data: { data: {
projectType: 1, // 1 儿童营地,2 - SPA,3 - 文创, 5 - 餐品, 6 - 活动, 7 - 观影
bannerIndex: 0, bannerIndex: 0,
banner: [ banner: [
{ {
...@@ -14,7 +15,106 @@ Page({ ...@@ -14,7 +15,106 @@ Page({
id: 2, id: 2,
img: '' img: ''
} }
] ],
projectAll: {
projectArt: {
projectType: 3,
btn: '购买门票',
titleImg: '',
list: [
{
id: 0,
cover: '',
name: '海错图平日票',
msg: {
0: '周一至周五'
},
priceSpecial: '42',
price: '49',
unit: '人'
},
{
id: 1,
cover: '',
name: '海错图平日票',
msg: {
0: '周六至周日'
},
priceSpecial: '42',
price: '49',
unit: '人'
}
]
},
projectSpa: {
projectType: 2,
btn: '查看服务',
list: [
{
id: '0',
name: 'SPA套餐',
cover: '',
priceSpecial: '298 - 698',
price: '300 - 900',
unit: '人'
}
]
},
projectChild: {
projectType: 1,
btn: '购买门票',
list: [
{
id: 0,
name: '日票(次票)',
priceSpecial: '10',
price: '49',
unit: '次',
msg: {
0: '单次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场需单独收费'
}
},
{
id: 1,
name: '日票(套票)',
priceSpecial: '80',
price: '100',
unit: '次',
msg: {
0: '单次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
},
{
id: 2,
name: '儿童营地月卡',
priceSpecial: '300',
price: '500',
unit: '人',
msg: {
0: '一个月内无限次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
},
{
id: 3,
name: '儿童营地年卡',
priceSpecial: '1680',
price: '2680',
unit: '人',
msg: {
0: '一年内无限次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
}
]
}
}
}, },
onLoad: function (options) { onLoad: function (options) {
......
...@@ -16,37 +16,47 @@ ...@@ -16,37 +16,47 @@
</view> </view>
</view> </view>
<block> <block wx:for="{{projectAll}}" wx:for-index="key" wx:for-item="value">
<view class="project-wrapper"> <view class="project-wrapper">
<view class="project-title"></view> <view class="project-title">
<block> <image src="{{value.titleImg}}"></image>
</view>
<block wx:for="{{value.list}}">
<view class="project-item row"> <view class="project-item row">
<view class="project-cover"> <view class="project-cover">
<!-- <image></image> --> <image src="{{item.cover}}"></image>
</view> </view>
<view class="project-content row"> <view class="project-content row">
<view class="project-info"> <view class="project-info">
<view class="project-name"> <view class="project-name">
<text>海错图平日票</text> <text>{{item.name}}</text>
<text></text>
</view> </view>
<view class="project-msg col"> <view class="project-msg col">
<text>周一至周五</text> <block wx:for="{{item.msg}}" wx:for-index="k" wx:for-item="msg">
<text>周一至周五</text> <text>{{msg}}</text>
<text>周一至周五</text> </block>
</view> </view>
</view> </view>
<view class="project-price-wrapper col align-e"> <view class="project-price-wrapper col align-e">
<view class="project-price-special row align-c"> <view class="project-price-special row align-c">
<view class="price-wrap"> <view class="price-wrap">
<text class="price-symbol">¥</text> <text class="price-symbol">¥</text>
<text class="price-special">42</text> <text class="price-special">{{item.priceSpecial}}</text>
<text class="price-symbol">/人</text> <text class="price-symbol">{{'/' + item.unit}}</text>
</view> </view>
<view class="price-special-msg"> <view class="price-special-msg">
<text>业主价</text> <text>业主价</text>
</view> </view>
</view> </view>
<view class="project-price-old">
<text class="price-old">{{'¥' + item.price}}</text>
<text class="price-symbol-old">/人</text>
</view>
<view class="project-buy-wrapper col align-e">
<view class="project-buy-btn">
<text>{{value.btn}}</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
......
.container { .container {
height: 100%; padding-bottom: 160rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%, #F3F4F6 100%, #F3F4F6 100%); background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%, #F3F4F6 100%, #F3F4F6 100%);
} }
...@@ -41,6 +41,9 @@ ...@@ -41,6 +41,9 @@
padding-bottom: 50rpx; padding-bottom: 50rpx;
border-bottom: 1px solid #E2E7EF; border-bottom: 1px solid #E2E7EF;
} }
.project-item:last-child {
border-bottom: none;
}
.project-cover { .project-cover {
width: 128rpx; width: 128rpx;
...@@ -50,7 +53,7 @@ ...@@ -50,7 +53,7 @@
.project-content { .project-content {
margin-left: 24rpx; margin-left: 24rpx;
width: 100%; flex: 1;
} }
.project-info { .project-info {
...@@ -69,6 +72,8 @@ ...@@ -69,6 +72,8 @@
} }
.project-price-wrapper { .project-price-wrapper {
flex: 1; flex: 1;
height: 100%;
width: 100%;
} }
.project-price-special { .project-price-special {
} }
...@@ -96,6 +101,33 @@ ...@@ -96,6 +101,33 @@
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx; border-radius: 4rpx;
} }
.project-price-old {
height: 32rpx;
color: #959DA9;
line-height: 32rpx;
text-decoration: line-through;
}
.price-old {
font-size: 22rpx;
}
.price-symbol-old {
font-size: 20rpx;
}
.project-buy-wrapper {
flex: 1;
}
.project-buy-btn {
width: 120rpx;
height: 56rpx;
margin-top: 24rpx;
color: #fff;
font-size: 22rpx;
line-height: 56rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image { image {
width: 100%; width: 100%;
......
// pages/shimao/index.js let App = getApp()
Page({ Page({
data: { data: {
totalNum: 3, imageBase: App.globalData.appImageBase,
totalPrice: 840.00, resourcesBase: App.globalData.appResourcesBase,
discount: 270.00,
allChecked: false,
isFoodCart: true, shopId: '',
isEnough: false, shopName: '',
cart: [ shopLogo: '',
{ shoppingCart: [], // 购物车列表
goods_id: 0, shoppingCartSelection: 0, // 购物车选择数量
goods_name: '雪碧迷你瓶装300ml',
goods_now_price: 49.00, selectionTotal: 0, // 当前选择件数
goods_old_price: 42.00, allSelectionIsActive: false, // 全选按钮状态
goods_now_text: '业主价', amountPay: 0, // 支付金额
goods_num: 1, amountDiscount: 0, // 优惠金额
store_num: 1,
checked: true,
img: './image/item01.png'
},
{
goods_id: 1,
goods_name: '可口可乐300ml',
goods_now_price: 52.00, allChecked: false,
goods_old_price: 49.00, isFoodCart: true,
goods_now_text: '活动价', isEnough: false,
goods_num: 1, cart: [{
store_num: 2, goods_id: 0,
checked: true, goods_name: '雪碧迷你瓶装300ml',
img: './image/item01.png' goods_now_price: 49.00,
}, goods_old_price: 42.00,
{ goods_now_text: '业主价',
goods_id: 2, goods_num: 1,
goods_name: '葡萄汁饮料238ml', store_num: 1,
goods_now_price: 30.00, checked: true,
goods_num: 2, img: './image/item01.png'
checked: true, },
img: './image/item01.png' {
}, goods_id: 1,
{ goods_name: '可口可乐300ml',
goods_id: 3, goods_now_price: 52.00,
goods_name: '牛奶苏打碳酸250ml', goods_old_price: 49.00,
goods_now_price: 78, goods_now_text: '活动价',
goods_num: 12, goods_num: 1,
checked: false, store_num: 2,
img: './image/item01.png' checked: true,
} img: './image/item01.png'
], },
notEnough: [ {
{ goods_id: 2,
id: 0, goods_name: '葡萄汁饮料238ml',
img: './image/item01.png', goods_now_price: 30.00,
title: '葱爆牛肉佐秘制麻椒汁' goods_num: 2,
}, checked: true,
{ img: './image/item01.png'
id: 1, },
img: './image/item01.png', {
title: '抹茶酸奶芝士' goods_id: 3,
goods_name: '牛奶苏打碳酸250ml',
goods_now_price: 78,
goods_num: 12,
checked: false,
img: './image/item01.png'
}
],
notEnough: [{
id: 0,
img: './image/item01.png',
title: '葱爆牛肉佐秘制麻椒汁'
},
{
id: 1,
img: './image/item01.png',
title: '抹茶酸奶芝士'
}
]
},
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 * @function
const index = cart.findIndex(v => v.goods_id === goods_id) * @param
if ((cart[index].store_num === cart[index].goods_num) && operation === 1) { * @returns
console.log('没有库存') */
} else if (cart[index].goods_num === 1 && operation === -1) { setShopInfo: function () {
wx.lin.showDialog({ let funcShopInfo = wx.getStorageSync('shopInfoBuffer')
type:"confirm", this.setData({
title:"温馨提示", shopId: funcShopInfo.id,
content:"您是否要删除该商品?", shopName: funcShopInfo.name,
confirmColor: "#5DB5DD", shopLogo: funcShopInfo.logo
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 console.log(this.data.shopLogo)
this.setCart(cart)
}
}, },
handleItemCheck(e) {
const goods_id = e.currentTarget.dataset.id /**
let cart = this.data.cart * 勾选状态
const index = cart.findIndex(v => v.goods_id === goods_id) * @function
cart[index].checked = !cart[index].checked * @param {object} - event
this.setCart(cart) * @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) * @function
this.setCart(cart) * @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()
},
/**
* 增加商品数量
* @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
})
this.selectionTotal()
}, },
setCart(cart) {
let totalPrice = 0 /**
let totalNum = 0 * 全选商品
let allChecked = true * @function
cart.forEach(v => { * @param {object} - event
if (v.checked) { * @returns
totalPrice += v.goods_now_price * v.goods_num */
totalNum += 1 onSelectionAll: function (event) {
} else { let funcActive = event.detail.checked
allChecked = false let funcShoppingCart = this.data.shoppingCart
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
funcShoppingCart[i].isActive = funcActive
} }
})
allChecked = cart.length!=0 ? allChecked : false this.setData({
this.setData({ shoppingCart: funcShoppingCart
cart, })
allChecked,
totalPrice, this.selectionTotal()
totalNum },
})
/**
* 清空购物车
* @function
* @param {object} - event
* @returns
*/
onClearn: function () {
wx.lin.showDialog({
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('用户点击取消')
}
}
})
}, },
handleClearCart() {
wx.lin.showDialog({ /**
type:"confirm", * 计算当前需要结算的商品总数
title:"温馨提示", * @function
content:"确定要清空购物车?", * @param
confirmColor: "#5DB5DD", * @returns
cancelColor: "#656E7B", */
titleColor: "#15191F", selectionTotal: function () {
success: (res) => { let funcCommodityTotal = 0 // 商品总数,包含选中与没有选中的
if (res.confirm) { let funcSelectionTotal = 0 // 商品选择总数
let cart = []
this.setCart(cart) let funcAmountPay = 0 // 支付金额
} else if (res.cancel) { let funcAmountDiscount = 0 // 优惠金额
console.log('用户点击取消')
} 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 是原价累计数值,最后减去特价即是优惠金额
switch (funcShoppingCart[i].priceType) {
case 1:
// 活动价
funcAmountPay = funcAmountPay + funcShoppingCart[i].priceDiscount * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * funcShoppingCart[i].quantity
break
case 2:
// 业主价
funcAmountPay = funcAmountPay + funcShoppingCart[i].priceSpecial * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * funcShoppingCart[i].quantity
break
case 3:
// 普通价
funcAmountPay = funcAmountPay + funcShoppingCart[i].price * funcShoppingCart[i].quantity
funcAmountDiscount = funcAmountDiscount + funcShoppingCart[i].price * funcShoppingCart[i].quantity
break
}
}
} }
})
// 格式化金额
funcAmountDiscount = funcAmountDiscount - funcAmountPay
funcAmountPay = App.modular.utils.formatAmount(funcAmountPay)
funcAmountDiscount = App.modular.utils.formatAmount(funcAmountDiscount)
this.setData({
amountPay: funcAmountPay,
amountDiscount: funcAmountDiscount,
selectionTotal: funcSelectionTotal,
allSelectionIsActive: funcCommodityTotal === funcSelectionTotal ? true : false,
})
// 只要改变购物车数据就缓存
wx.setStorageSync('shoppingCartBuffer', this.data.shoppingCart)
}, },
handleOrderPay() {
let isEnough = true onPaySubmit: function () {
this.setData({ // let isEnough = true
isEnough // this.setData({
}) // isEnough
// })
// 在此之前需要校验用户是否登录,以及商品库存是否充足
wx.navigateTo({
url: '/pages/pay/order-input/order-input?type=5' + '&amount=' + this.data.amountPay
})
},
handleItemAllCheck() {
let allChecked = !this.data.allChecked
let cart = this.data.cart
cart.forEach(v => v.checked = allChecked)
}, },
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
{ {
"usingComponents": { "usingComponents": {
"Tips": "../../../component/Tips/Tips", "Tips": "../../../component/Tips/Tips"
"Blank": "../../../component/Blank/Blank" }
},
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "购物车"
} }
\ No newline at end of file
<view class="header row align-c"> <navigation class="navigation" titleText="购物车" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<view class="header_img">
<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="container">
<view class="item row" wx:for="{{cart}}" wx:key="id"> <view class="shop-info row align-c">
<radio-group class="item_checked" bindtap="handleItemCheck" data-id="{{item.goods_id}}"> <image wx:if="{{shopLogo}}" mode="aspectFill" src="{{resourcesBase + 'commodity/' + shopLogo}}" />
<radio checked="{{item.checked}}" color="#86C5E1"></radio> <text bindtap="onClearn">清空</text>
</radio-group>
<view class="item_img">
<image src="{{item.img}}" mode="widthFix"/>
</view> </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>
</view> <!-- 商品数量列表 -->
<view class="item_info_old_price" wx:if="{{item.goods_old_price}}"> <view class="shopping-cart-list">
<text class="price_symbol">¥</text> <block wx:for="{{shoppingCart}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text>{{item.goods_old_price}}</text> <view class="list-item row">
</view> <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-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.priceDiscountText}}</text>
<text class="price-discount">活动价</text>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>{{item.priceText}}</text>
</view>
</view>
<!-- 业主价样式 -->
<view class="list-item-price" wx:if="{{item.priceType === 2}}">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>{{item.priceSpecialText}}</text>
<text class="price-special">业主价</text>
</view>
<view class="list-item-price-minor row">
<text>¥</text>
<text>{{item.priceText}}</text>
</view>
</view>
<!-- 普通价样式 -->
<view class="list-item-price" wx:if="{{item.priceType === 3}}">
<view class="list-item-price-main row align-c">
<text>¥</text>
<text>{{item.priceText}}</text>
<text></text>
</view>
<view class="list-item-price-minor row">
<text></text>
<text></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 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>
</block>
</view> </view>
</view>
</scroll-view>
<!-- 只有在食品购物车才出现 -->
<view class="tips-wrapper" wx:if="{{isFoodCart && cart.length > 0}}" >
<Tips text="请在下单内3天内取餐,逾期无效"></Tips>
</view>
<view class="footer row con-c align-c"> <!-- 只有在食品购物车才出现 -->
<view class="all_chk_wrap row con-c align-c"> <view class="pay-tip" wx:if="{{isFoodCart && cart.length > 0}}">
<radio-group> <Tips text="请在下单内3天内取餐,逾期无效"></Tips>
<radio color="#86C5E1" checked="{{allChecked}}" bindtap="handleItemAllCheck">已选 ({{totalNum}})</radio>
</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> <view class="pay row con-c align-c">
<view class="order_pay_wrap row con-c align-c" bindtap="handleOrderPay">结算</view> <!-- 选择计数 -->
<!-- 库存提示弹窗 --> <view class="pay-selection row con-c align-c">
<l-popup show="{{isEnough}}" content-align="center" locked="{{true}}"> <l-checkbox-group l-class="list-item-selection" bind:linchange="onSelectionAll">
<view class="popup_wrap"> <l-checkbox custom="{{true}}" checked="{{allSelectionIsActive}}" size="40rpx">
<view class="popup_title">抱歉,您本单商品有2件库存不足</view> <image hidden="{{!allSelectionIsActive}}" class="list-item-selection-icon" src="/image/icon/selection-active.png" slot="icon"></image>
<view class="popup_list"> <image hidden="{{allSelectionIsActive}}" class="list-item-selection-icon" src="/image/icon/selection-inactive.png" slot="icon"></image>
<view class="popup_item row align-c" wx:for="{{notEnough}}" wx:key="id"> </l-checkbox>
<view class="popup_item_img"> </l-checkbox-group>
<image mode="widthFix" src="{{item.img}}"></image> <text>全选</text>
</view>
<view class="popup_item_title">{{item.title}}</view>
</view>
</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="pay-amount">
<view class="popup_close"> <view class="pay-amount-total">
<image mode="widthFix" src="../../../image/icon_close.png"></image> <text>¥</text>
<text>{{amountPay}}</text>
</view>
<view class="pay-amount-discount">
<text>{{'共' + selectionTotal + '件,优惠 ¥' + amountDiscount}}</text>
</view>
</view> </view>
</view> <view class="order_pay_wrap row con-c align-c" bindtap="onPaySubmit">结算</view>
</l-popup> <!-- 库存提示弹窗 -->
<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>
<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>
</view>
</l-popup>
</view>
</view> </view>
<Blank></Blank>
<!-- 清空弹窗 -->
<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
Page { Page {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.header { .navigation {
width: 100%; z-index: 1100;
height: 116rpx; position: fixed;
padding: 16rpx 40rpx; top: 0;
font-size: 30rpx; left: 0;
width: 750rpx;
} }
.header_img { .container {
width: 112rpx; margin-top: 150rpx;
height: 84rpx;
} }
.header_img image { .shop-info {
width: 100%; width: 750rpx;
height: 100%; height: 116rpx;
padding: 16rpx 40rpx;
font-size: 30rpx;
} }
.header_title { .shop-info > image {
flex: 1; width: 400rpx;
color: #C36069; height: 100rpx;
} }
.header_clear { .shop-info > text {
height: 100%; flex-grow: 1;
color: #656E7B; height: 100rpx;
text-align: right;
line-height: 100rpx;
color: #656e7b;
} }
.l-content { .l-content {
color: #959DA9 !important; color: #959da9 !important;
} }
.item_list { /* 购物车列表 */
width: 100%; .shopping-cart-list {
height: calc(100vh - 390rpx); width: 750rpx;
margin-top: 10rpx; margin-top: 50rpx;
padding-bottom: 200rpx;
} }
.item { .list-item {
width: 100%; width: 100%;
height: 250rpx; height: 250rpx;
padding: 0 40rpx; padding: 0 40rpx;
box-sizing: border-box;
} }
.item_checked { .list-item-selection,
width: 40rpx; .list-item-selection-icon {
height: 40rpx; width: 40rpx;
margin-top: 54rpx; height: 40rpx;
} }
.item_img { .list-item-cover {
width: 148rpx; height: 148rpx;
height: 148rpx;
margin-left: 24rpx;
} }
.item_info { .list-item-cover > image {
flex: 1; width: 148rpx;
margin-left: 28rpx; height: 148rpx;
margin: 0 30rpx 0 24rpx;
} }
.item_info_title { .list-item-info {
font-size: 30rpx; width: 430rpx;
color: #15191F; min-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;
font-weight: 500;
line-height: 42rpx;
color: #15191F;
} }
.goods_num_tool {
width: 168rpx; .list-item-price-main .price-discount {
height: 48rpx; width: 78rpx;
padding: 12rpx 0; height: 32rpx;
box-sizing: border-box; border-radius: 4px;
border: 1px solid #DBDFE5; background: #FAEDEA;
border-radius: 4rpx;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 30rpx;
color: #EF4E4E;
} }
.l-counter { .list-item-price-main .price-special {
border: 1px solid #DBDFE5; width: 78rpx;
border-radius: 4rpx; height: 32rpx;
box-sizing: border-box; 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;
} }
.l-symbol, .l-disabled, .l-count { .list-item-price-minor text {
background-color: #fff !important; height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
} }
.l-symbol, .l-count { .list-item-quantity {
color: #15191F !important; flex-grow: 1;
} }
.l-count { .list-item-quantity-operation {
border-left: 1px solid #DBDFE5; width: 168rpx;
border-right: 1px solid #DBDFE5; height: 48rpx;
min-height: 0rpx !important; padding: 0 16rpx;
border: 1px solid #DBDFE5;
border-radius: 4px;
} }
.num_edit { .list-item-quantity-operation text:nth-child(1) {
flex: 1; width: 24rpx;
height: 24rpx;
line-height: 24rpx;
} }
.goods_num { .list-item-quantity-operation text:nth-child(2) {
flex: 1; height: 36rpx;
border-left: 1px solid #DBDFE5; font-size: 26rpx;
border-right: 1px solid #DBDFE5; font-weight: 500;
line-height: 36rpx;
color: #15191F;
} }
.disable { .list-item-quantity-operation text:nth-child(3) {
color: #DBDFE5; width: 24rpx;
height: 24rpx;
line-height: 24rpx;
} }
.lack_wraning { .list-item-quantity-disable {
position: absolute; color: #CDD1D7;
top: 56rpx;
right: 84rpx;
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-align: center;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #D92B3A;
} }
text {
font-size: 22rpx;
.pay-tip {
position: fixed;
left: 0;
bottom: 200rpx;
width: 750rpx;
height: 72rpx;
} }
.tips-wrapper { /* 结算区域 */
position: absolute; .pay {
left: 0; position: fixed;
bottom: 196rpx; left: 0;
width: 100%; bottom: 0;
width: 750rpx;
height: 200rpx;
padding: 0 40rpx 36rpx 36rpx;
border-top: 1px solid #E2E7EF;
background: #FFFFFF;
} }
.footer { .pay-selection {
position: fixed; height: 36rpx;
left: 0; font-size: 26rpx;
bottom: 0; font-weight: 400;
width: 100%; line-height: 36rpx;
height: 196rpx; color: #15191F;
background-color: #fff;
display: flex;
padding: 0 40rpx 36rpx 36rpx;
box-sizing: border-box;
border-top: 1px solid #E2E7EF;
} }
.all_chk_wrap { .pay-selection text {
flex: 3; margin-left: 8rpx;
font-size: 26rpx;
color: #15191F;
} }
.total_price_wrap { .pay-amount {
flex: 5; flex: 5;
text-align: right; text-align: right;
padding-right: 32rpx; padding-right: 32rpx;
} }
.total_price { .pay-amount-total {
color: #86C5E1; height: 53rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 42rpx;
color: #5DB5DD;
} }
.total_price_text { .pay-amount-total text:nth-child(2) {
font-size: 44rpx; font-size: 38rpx;
} }
.total_discount { .pay-amount-discount {
font-size: 22rpx; height: 32rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #15191F;
} }
.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
Page({
data: {
currentIndex: 0,
scrollTop: 0,
rightTitle: '优惠套餐',
showPopup: false,
showAddSucc: false,
hideAnimation: true,
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'
},
{
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: '业主价'
}
},
onLoad() {
this.animationDown = wx.createAnimation({
duration: 400,
timingFunction: 'ease'
})
},
handleItemTap(e) {
let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab
this.setData({
currentIndex: index,
rightTitle,
scrollTop: 0
})
},
handleAddCartPopup() {
let showPopup = true
this.setData({
showPopup
})
},
handleClosePopup() {
let showPopup = false
this.setData({
showPopup,
})
},
handleAddCart() {
let showPopup = false
let showAddSucc = true
let hideAnimation = false
this.animationDown.translateY(180).step()
this.setData({
showPopup,
showAddSucc,
hideAnimation,
})
setTimeout(() => {
this.setData({
animationDown: this.animationDown.export()
})
})
setTimeout(() => {
this.animationDown.translateY(0).step()
let hideAnimation = true
this.setData({
hideAnimation,
animationDown: this.animationDown.export()
})
}, 400)
},
goToCart() {
wx.navigateTo({
url: '/pages/commodity/shopping-cart/shopping-cart',
})
}
})
\ No newline at end of file
{
"usingComponents": {
"Blank": "../../../component/Blank/Blank"
},
"navigationBarTitleText": "购物车",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff"
}
\ No newline at end of file
<view class="cates">
<view class="cates-container">
<!-- 左边菜单 -->
<scroll-view scroll-y enhanced="true" show-scrollbar="false" class="left-menu">
<view
class="menu-item {{currentIndex === index ? 'active' : ''}}"
wx:for="{{leftMenuList}}"
wx:key="id"
bindtap="handleItemTap"
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 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">
<image mode="widthFix" src="/image/add-w.png"></image>
</l-button>
</view>
</view>
<view class="item-info-old-price" wx:if="{{item.goods_old_price}}"><text>¥</text>{{item.goods_old_price}}</view>
</view>
</view>
<!-- 购物车按钮 -->
<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-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</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 class="redPoint {{hideAnimation ? 'animation-hide' : ''}}" animation="{{animationDown}}"></view>
</scroll-view>
</view>
</view>
\ No newline at end of file
...@@ -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()
...@@ -70,6 +70,17 @@ Page({ ...@@ -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 () { setNavigationLogo: function () {
this.setData({ this.setData({
navigationLogoTop: App.modular.utils.navigationElementCenterMarginTop(60) navigationLogoTop: App.modular.utils.navigationElementCenterMarginTop(60)
...@@ -324,24 +335,17 @@ Page({ ...@@ -324,24 +335,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
}) })
}, },
onTest4: function (event) {
wx.navigateTo({ onShop: function (event) {
url: '/pages/pay/coupon-input/coupon-input'
})
},
onTest5: function (event) {
wx.navigateTo({ wx.navigateTo({
url: '/pages/pay/coupon-detail/coupon-detail?type=' + event.currentTarget.dataset.index url: '/pages/commodity/menu-snacks/menu-snacks'
}) })
}, },
onTest6: function (event) { onTest6: function (event) {
......
...@@ -151,4 +151,10 @@ Page({ ...@@ -151,4 +151,10 @@ Page({
statusActive: Number(event.currentTarget.dataset.type) statusActive: Number(event.currentTarget.dataset.type)
}) })
}, },
onNavigationBack: function () {
wx.navigateBack({
delta: 1
})
},
}) })
\ No newline at end of file
<view class="navigation-order row con-b align-c"> <view class="navigation-order row con-b align-c">
<image src="{{imageBase + 'icon/arrow-l-1.png'}}"></image> <image src="{{imageBase + 'icon/arrow-l-1.png'}}" bindtap="onNavigationBack"></image>
<view class="order-type row con-c align-c" bindtap="onOrderType"> <view class="order-type row con-c align-c" bindtap="onOrderType">
<text>{{orderTypeTitle}}</text> <text>{{orderTypeTitle}}</text>
<image src="{{imageBase + 'icon/arrow-b-2.png'}}"></image> <image src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
......
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
} }
.navigation-order image { .navigation-order image {
width: 32rpx; width: 64rpx;
height: 32rpx; height: 64rpx;
} }
.order-type { .order-type {
......
...@@ -3,11 +3,12 @@ let App = getApp() ...@@ -3,11 +3,12 @@ let App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
cur: -1,
scoreServe: 0, // 服务分数 scoreServe: 0, // 服务分数
scoreServeText: '0.0',
scoreProduct: 0, // 产品分数 scoreProduct: 0, // 产品分数
scoreProductGray: 5, scoreProductText: '0.0',
scoreEnvironment: 0, // 环境分数 scoreEnvironment: 0, // 环境分数
scoreEnvironmentText: '0.0',
orderInfo: { orderInfo: {
name: '精灵鸟理想国年卡', name: '精灵鸟理想国年卡',
price: '1680.00', price: '1680.00',
...@@ -36,25 +37,36 @@ Page({ ...@@ -36,25 +37,36 @@ Page({
* @returns * @returns
*/ */
onChangeScore: function (event) { onChangeScore: function (event) {
console.log(event) const { index, type } = event.currentTarget.dataset
const { index } = event.currentTarget.dataset console.log(index, type)
let { cur } = this.data let { scoreServe, scoreProduct, scoreEnvironment } = this.data
this.setData({ switch (type) {
cur: index - 1 case 1:
}) scoreServe = index + 1
}, break
onChangeScoreProduct: function (event) { case 2:
const { type, index } = event.currentTarget.dataset scoreProduct = index + 1
let { scoreProduct, scoreProductGray } = this.data break
if (type === '1') { case 3:
scoreProduct = index + 1 scoreEnvironment = index + 1
} else { break
scoreProduct += index + 1
} }
scoreProductGray = 5 - scoreProduct
this.setData({ this.setData({
scoreServe,
scoreServeText: scoreServe.toFixed(1),
scoreProduct, scoreProduct,
scoreProductGray scoreProductText: scoreProduct.toFixed(1),
scoreEnvironment,
scoreEnvironmentText: scoreEnvironment.toFixed(1),
}) })
},
/**
* 输入框完成
* @function
* @param
* @returns
*/
eventInputDone: function (event) {
// console.log(event.detail.value)
} }
}) })
\ No newline at end of file
...@@ -35,11 +35,16 @@ ...@@ -35,11 +35,16 @@
<view class="score-left"> <view class="score-left">
<text>服务评价</text> <text>服务评价</text>
</view> </view>
<view class="score-star"> <view class="score-star row">
<l-rate size="40" score="{{scoreServe}}" active-color="#F7BE6E" inActive-color="#F3F4F6" bind:linChange="onChangeScoreServe" /> <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{1}}">
<image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view>
</block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreServe + '星'}}</text> <text>{{scoreServeText + '星'}}</text>
</view> </view>
</view> </view>
<view class="score-wrapper row align-c"> <view class="score-wrapper row align-c">
...@@ -47,37 +52,36 @@ ...@@ -47,37 +52,36 @@
<text>产品评价</text> <text>产品评价</text>
</view> </view>
<view class="score-star row"> <view class="score-star row">
<block wx:for="{{scoreProduct}}" wx:key="index"> <block wx:for="{{5}}" wx:key="index">
<image class="star" src="{{imageBase + 'star-yellow.png'}}" bindtap="onChangeScoreProduct" data-index="{{index}}" data-type="1"></image> <view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{2}}">
</block> <image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<block wx:for="{{scoreProductGray}}" wx:key="index"> <image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
<image class="star" src="{{imageBase + 'star-gray.png'}}" bindtap="onChangeScoreProduct" data-index="{{index}}" data-type="2"></image>
</block>
<!-- <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}">
<image wx:if="{{cur >= n}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:if="{{cur < n}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view> </view>
</block> --> </block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreProduct + '星'}}</text> <text>{{scoreProductText + '星'}}</text>
</view> </view>
</view> </view>
<view class="score-wrapper row align-c"> <view class="score-wrapper row align-c">
<view class="score-left"> <view class="score-left">
<text>环境评价</text> <text>环境评价</text>
</view> </view>
<view class="score-star"> <view class="score-star row">
<l-rate size="40" score="{{scoreEnvironment}}" active-color="#F7BE6E" inActive-color="#F3F4F6" bind:linChange="onChangeScore" /> <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{3}}">
<image wx:if="{{scoreEnvironment >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreEnvironment < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view>
</block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreEnvironment + '星'}}</text> <text>{{scoreEnvironmentText + '星'}}</text>
</view> </view>
</view> </view>
<view class="order-comment"> <view class="order-comment">
<l-textarea placeholder="您的评价与建议,会让园区做的更好" placeholder-style="color: #C2C7CF" maxlength="200" l-class="l-textarea" /> <l-textarea placeholder="您的评价与建议,会让园区做的更好" placeholder-style="color: #C2C7CF" maxlength="200" l-class="l-textarea" border="{{false}}" bind:linblur="eventInputDone" />
<view class="order-picker"> <view class="order-picker">
<l-image-picker l-item-class="l-image-item" l-class="l-picker" count="9" size="3" size-type="compressed" custom="{{true}}"> <l-image-picker l-item-class="l-image-item" l-class="l-picker" count="9" size="3" size-type="compressed" custom="{{true}}">
<view class="col con-c align-c"> <view class="col con-c align-c">
......
...@@ -99,7 +99,6 @@ ...@@ -99,7 +99,6 @@
} }
.l-textarea { .l-textarea {
height: 320rpx; height: 320rpx;
border: none !important;
} }
.l-textarea > view { .l-textarea > view {
color: #C2C7CF !important; color: #C2C7CF !important;
......
...@@ -15,6 +15,11 @@ let logicData = { ...@@ -15,6 +15,11 @@ let logicData = {
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
animation: {},
shopId: '',
shopName: '',
shopLogo: '',
orderType: 1, // 1 - 年卡/月卡,2 - 次票, 3 - SPA, 4 - 文创, 5 - 餐品, 6 - 活动, 7 - 观影 orderType: 1, // 1 - 年卡/月卡,2 - 次票, 3 - SPA, 4 - 文创, 5 - 餐品, 6 - 活动, 7 - 观影
...@@ -40,17 +45,7 @@ Page({ ...@@ -40,17 +45,7 @@ Page({
buyContentAmount: '36.00', buyContentAmount: '36.00',
// 购买清单 // 购买清单
shoppingCartList: [{ shoppingCartList: [],
cover: '',
name: '《海错图》超级豪华精致古风限量版折扇',
quantity: 12,
price: '60.50',
}, {
cover: '',
name: '《海错图》主题画册',
quantity: 12,
price: '60.50',
}],
noticeText: '购买须知', noticeText: '购买须知',
...@@ -70,16 +65,12 @@ Page({ ...@@ -70,16 +65,12 @@ Page({
// 购买人员信息 // 购买人员信息
contactTitle: '填写购票人信息', contactTitle: '填写购票人信息',
contactName: '',
contactPhone: '',
contactErrorName: '',
contactErrorPhone: '',
// 注册信息 // 用户信息
registerInfo: [], registerInfo: [],
// 立即支付 // 立即支付
payAmount: '59.00', payAmount: '',
// 购买须知详情 // 购买须知详情
noticeDetail: App.globalData.appResourcesBase + 'pay/notice-detail.png', noticeDetail: App.globalData.appResourcesBase + 'pay/notice-detail.png',
...@@ -100,22 +91,36 @@ Page({ ...@@ -100,22 +91,36 @@ Page({
onLoad: function (options) { onLoad: function (options) {
if (options.type) options.type = Number(options.type) if (options.type) options.type = Number(options.type)
if (options.passType) options.passType = Number(options.passType) if (options.passType) options.passType = Number(options.passType)
if (options.amount) {
this.setData({
payAmount: options.amount
})
}
// options.type = 7 // options.type = 7
// options.passType = 1 // options.passType = 1
logicData.option = options logicData.option = options
this.setView() this.setView()
this.animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease'
})
this.setShopInfo()
this.setShoppingCartData()
}, },
setView: function () { setView: function () {
this.setData({
registerInfo: [JSON.parse(JSON.stringify(logicData.registerInfoItem))]
})
switch (logicData.option.type) { switch (logicData.option.type) {
case 1: case 1:
let funcList = []
funcList.push(JSON.parse(JSON.stringify(logicData.registerInfoItem)))
this.setData({ this.setData({
orderType: logicData.option.type, orderType: logicData.option.type,
buyContent: this.data.buyPass[logicData.option.passType], buyContent: this.data.buyPass[logicData.option.passType],
registerInfo: funcList,
winBuyContent: true, // 购买内容 winBuyContent: true, // 购买内容
winShoppingCart: false, // 购买清单 winShoppingCart: false, // 购买清单
...@@ -262,8 +267,8 @@ Page({ ...@@ -262,8 +267,8 @@ Page({
winQuantity: true, // 数量选择 winQuantity: true, // 数量选择
winContact: true, // 联系信息 winContact: true, // 联系信息
winRegister: false, // 注册信息 winRegister: false, // 注册信息
winButtonPay: true, // 立即支付 winButtonPay: false, // 立即支付
winButtonAppointment: false, // 确认预约 winButtonAppointment: true, // 确认预约
}) })
break break
} }
...@@ -274,75 +279,100 @@ Page({ ...@@ -274,75 +279,100 @@ Page({
}) })
}, },
/**
* 设置本店信息
* @function
* @param
* @returns
*/
setShopInfo: function () {
let funcShopInfo = wx.getStorageSync('shopInfoBuffer')
this.setData({
shopId: funcShopInfo.id,
shopName: funcShopInfo.name,
shopLogo: funcShopInfo.logo
})
console.log(this.data.shopLogo)
},
setShoppingCartData: function () {
// 读取上级页面的购物车数据,默认选中所有。
let funcShoppingCart = wx.getStorageSync('shoppingCartBuffer')
console.log('funcShoppingCart', JSON.stringify(funcShoppingCart))
// 设置商品的最终提交价格,仅用于展示
for (let i = 0, l = funcShoppingCart.length; i < l; i++) {
switch (funcShoppingCart[i].priceType) {
case 1:
// 活动价
funcShoppingCart[i].priceConfirm = funcShoppingCart[i].priceDiscountText
break
case 2:
// 业主价
funcShoppingCart[i].priceConfirm = funcShoppingCart[i].priceSpecialText
break
case 3:
// 普通价
funcShoppingCart[i].priceConfirm = funcShoppingCart[i].priceText
break
}
}
onInputBlur: function(event) { this.setData({
let funcType = event.target.dataset.type shoppingCartList: funcShoppingCart
let funcValue = event.detail.value })
},
/**
* 设置对应的用户数据
* @function
* @param
* @returns
*/
setUserInfo: function (funcType, funcValue, funcIndex, funcMessage) {
let funcRegisterInfo = this.data.registerInfo
switch (funcType) { switch (funcType) {
case 'name': case 'name':
this.setData({ funcRegisterInfo[funcIndex].name = funcValue
formName: funcValue funcRegisterInfo[funcIndex].errorName = funcMessage
})
break break
case 'phone': case 'phone':
this.setData({ funcRegisterInfo[funcIndex].phone = funcValue
formPhone: funcValue funcRegisterInfo[funcIndex].errorPhone = funcMessage
})
break break
case 'idNum':
this.setData({ case 'identity':
formPhone: funcValue funcRegisterInfo[funcIndex].identity = funcValue
}) funcRegisterInfo[funcIndex].errorIdentity = funcMessage
break break
} }
this.inspectForm()
this.setData({
registerInfo: funcRegisterInfo
})
}, },
inspectForm: function() {
if (this.data.formName === '') {
this.setData({
isSubmit: false,
errorName: '请填写姓名'
})
} else {
this.setData({
errorName: ''
})
}
if (this.data.formPhone === '') { onInputBlur: function(event) {
this.setData({ console.log(event)
isSubmit: false, let funcType = event.target.dataset.type
errorPhone: '请输入正确的手机号码' let funcIndex = event.target.dataset.index
}) let funcValue = event.detail.value
} else if (this.data.formPhone.length != 11) {
this.setData({
isSubmit: false,
errorPhone: '请输入正确的手机号码'
})
} else {
this.setData({
errorPhone: ''
})
}
if (this.data.formIdNum === '') { switch (funcType) {
this.setData({ case 'name':
isSubmit: false, this.setUserInfo(funcType, funcValue, funcIndex, App.modular.rule.item('name', funcValue))
errorIdNum: '请输入正确的身份证号' break
}) case 'phone':
} else if (this.data.formIdNum.length != 16) { this.setUserInfo(funcType, funcValue, funcIndex, App.modular.rule.item('phone', funcValue))
this.setData({ break
isSubmit: false, case 'identity':
errorIdNum: '请输入正确的身份证号' this.setUserInfo(funcType, funcValue, funcIndex, App.modular.rule.item('identity', funcValue))
}) break
} else {
this.setData({
errorIdNum: ''
})
} }
this.setData({
isSubmit: true
})
}, },
/** /**
...@@ -352,9 +382,22 @@ Page({ ...@@ -352,9 +382,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)
}, },
/** /**
...@@ -409,17 +452,103 @@ Page({ ...@@ -409,17 +452,103 @@ Page({
return return
} }
let funcRegisterInfo = this.data.registerInfo
funcRegisterInfo.push(JSON.parse(JSON.stringify(logicData.registerInfoItem)))
this.setData({ this.setData({
quantity: this.data.quantity + 1 quantity: this.data.quantity + 1,
registerInfo: funcRegisterInfo
}) })
},
if (this.data.orderType === 1) { /**
let funcRegisterInfo = this.data.registerInfo * 检验数据是否都通过
funcRegisterInfo.push(JSON.parse(JSON.stringify(logicData.registerInfoItem))) * @function
* @param
* @returns
*/
inspectData: function () {
let funcPass = true
// 校验数组用户信息
let funcRegisterInfo = this.data.registerInfo
for (let i = 0, l = funcRegisterInfo.length; i < l; i++) {
if (funcRegisterInfo[i].name === '' || funcRegisterInfo[i].errorName !== '') {
funcPass = false
break
}
this.setData({ if (funcRegisterInfo[i].phone === '' || funcRegisterInfo[i].errorPhone !== '') {
registerInfo: funcRegisterInfo funcPass = false
}) break
}
// 仅在需要的订单场景下校验
if ([1].indexOf(this.data.orderType) >= 0) {
if (funcRegisterInfo[i].identity === '' || funcRegisterInfo[i].errorIdentity !== '') {
funcPass = false
break
}
}
}
return funcPass
},
/**
* 提交订单
* @function
* @param
* @returns
*/
onPaySubmit: function () {
// 数据校验不通过
if (!this.inspectData()) return
// 整合商品数据
let funcCommodity = []
let funcShoppingCartList = this.data.shoppingCartList
for (let i = 0, l = funcShoppingCartList.length; i < l; i++) {
let funcItem = {
'smCommodity': {
'id': funcShoppingCartList[i].id,
},
'smInventory': {
'id': '',
},
'goodType': '',
'name': funcShoppingCartList[i].name,
'number': funcShoppingCartList[i].quantity,
'unitPrice': Number(funcShoppingCartList[i].priceConfirm),
'totalPrices': funcShoppingCartList[i].quantity * Number(funcShoppingCartList[i].priceConfirm)
}
funcCommodity.push(funcItem)
} }
// 整合用户数据
let funcUserInfo = []
let funcRegisterInfo = this.data.registerInfo
for (let i = 0, l = funcRegisterInfo.length; i < l; i++) {
let funcItem = {
'name': funcRegisterInfo[i].name,
'cellphone': funcRegisterInfo[i].phone,
'identityCard': funcRegisterInfo[i].identity,
}
funcUserInfo.push(funcItem)
}
return
// 发送下单请求
App.wxRequest({
url: '/api/v1/order/doOrder',
data: {
'isPayment': 2,
'totalMoney': Number(this.data.payAmount),
'office': { 'id': this.data.shopId },
'smOrderDetails': funcCommodity,
'smPersonalDetails': funcUserInfo
},
success: (response) => {
let funcResponse = response.data
}
})
}, },
}) })
\ No newline at end of file
<!-- 购买须知详情 -->
<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}}">
...@@ -99,14 +106,14 @@ ...@@ -99,14 +106,14 @@
<text>{{item.name}}</text> <text>{{item.name}}</text>
</view> </view>
<view class="shopping-cart-item-info col"> <view class="shopping-cart-item-info col">
<text>¥123</text> <text>{{'¥' + item.priceConfirm}}</text>
<text>x3</text> <text>{{'x' + item.quantity}}</text>
</view> </view>
</view> </view>
</block> </block>
<view class="shopping-cart-total row con-b align-c"> <view class="shopping-cart-total row con-b align-c">
<text>总计</text> <text>总计</text>
<text>¥181.80</text> <text>{{'¥' + payAmount}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -188,13 +195,13 @@ ...@@ -188,13 +195,13 @@
</view> </view>
<view class="contact-input col"> <view class="contact-input col">
<text>姓名</text> <text>姓名</text>
<input placeholder="请输入姓名"></input> <input placeholder="请输入姓名" data-type="name" data-index="{{0}}" bindblur="onInputBlur"></input>
<text>{{contactErrorName}}</text> <text>{{registerInfo[0].errorName}}</text>
</view> </view>
<view class="contact-input col"> <view class="contact-input col">
<text>手机号</text> <text>手机号</text>
<input placeholder="请输入手机号"></input> <input placeholder="请输入手机号" maxlength="11" data-type="phone" data-index="{{0}}" bindblur="onInputBlur"></input>
<text>{{contactErrorPhone}}</text> <text>{{registerInfo[0].errorPhone}}</text>
</view> </view>
</view> </view>
...@@ -214,37 +221,36 @@ ...@@ -214,37 +221,36 @@
</view> </view>
<view class="contact-input col"> <view class="contact-input col">
<text>姓名</text> <text>姓名</text>
<input placeholder="请输入姓名"></input> <input placeholder="请输入姓名" data-type="name" data-index="{{index}}" bindblur="onInputBlur"></input>
<text>{{item.errorName}}</text> <text>{{item.errorName}}</text>
</view> </view>
<view class="contact-input col"> <view class="contact-input col">
<text>手机号</text> <text>手机号</text>
<input placeholder="请输入手机号"></input> <input placeholder="请输入手机号" maxlength="11" data-type="phone" data-index="{{index}}" bindblur="onInputBlur"></input>
<text>{{item.errorPhone}}</text> <text>{{item.errorPhone}}</text>
</view> </view>
<view class="contact-input col"> <view class="contact-input col">
<text>身份证号</text> <text>身份证号</text>
<input placeholder="请输入身份证号"></input> <input placeholder="请输入身份证号" data-type="identity" data-index="{{index}}" bindblur="onInputBlur"></input>
<text>{{item.errorIdentity}}</text> <text>{{item.errorIdentity}}</text>
</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" bindtap="onPaySubmit">立即支付</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>
\ No newline at end of file
.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;
}
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"ignore": [] "ignore": []
}, },
"setting": { "setting": {
"urlCheck": true, "urlCheck": false,
"es6": true, "es6": true,
"enhance": true, "enhance": true,
"postcss": true, "postcss": true,
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
"scopeDataCheck": false, "scopeDataCheck": false,
"uglifyFileName": false, "uglifyFileName": false,
"checkInvalidKey": true, "checkInvalidKey": true,
"checkSiteMap": true, "checkSiteMap": false,
"uploadWithSourceMap": true, "uploadWithSourceMap": true,
"compileHotReLoad": false, "compileHotReLoad": false,
"babelSetting": { "babelSetting": {
...@@ -139,9 +139,10 @@ ...@@ -139,9 +139,10 @@
"scene": null "scene": null
}, },
{ {
"id": -1, "id": 10,
"name": "pages/commodity/project/project", "name": "pages/commodity/project-detail/project-detail",
"pathName": "pages/commodity/project/project", "pathName": "pages/commodity/project-detail/project-detail",
"query": "",
"scene": null "scene": null
} }
] ]
......
{ {
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{ "rules": [
"action": "allow", {
"page": "*" "action": "allow",
}] "page": "*"
}
]
} }
\ No newline at end of file
...@@ -104,21 +104,6 @@ let Output = { ...@@ -104,21 +104,6 @@ let Output = {
} }
return funMessage return funMessage
}, },
/**
* 顾问
* @function
* @param {string} value
* @returns {string}
*/
'adviser': function (value) {
let funMessage = ''
// let funcScene = wx.getStorageSync('scene')
// if (funcScene.type !== 2 && value.name === '未知') {
// funMessage = '请选择顾问'
// }
return funMessage
},
} }
export default Output export default Output
\ No newline at end of file
...@@ -16,7 +16,20 @@ let output = { ...@@ -16,7 +16,20 @@ let output = {
if (funcElementHeightPx < funcCapsuleHeight) { if (funcElementHeightPx < funcCapsuleHeight) {
return (funcCapsuleHeight - funcElementHeightPx) / 2 + funcStatusHeight - 4 * funcUnitProportion return (funcCapsuleHeight - funcElementHeightPx) / 2 + funcStatusHeight - 4 * funcUnitProportion
} }
} },
/**
* 金额格式化函数
* @function
* @param {number} - funcAmountValue 金额,单位分
* @returns
*/
formatAmount: function (funcAmountValue) {
if (funcAmountValue === 0) funcAmountValue = '000'
if (!funcAmountValue) return
return funcAmountValue.toString().replace(/([0-9]{2})$/, '.$1')
},
} }
export default output export default output
\ 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