@@ -208,7 +208,7 @@ | |||||
this.globalData.userLocation.longitude = res.longitude; | this.globalData.userLocation.longitude = res.longitude; | ||||
resolve(true); | resolve(true); | ||||
}, | }, | ||||
fail: () => { | |||||
fail: (error) => { | |||||
this.globalData.userLocation.latitude = null; | this.globalData.userLocation.latitude = null; | ||||
this.globalData.userLocation.longitude = null; | this.globalData.userLocation.longitude = null; | ||||
resolve(false); | resolve(false); | ||||
@@ -261,13 +261,15 @@ | |||||
const deskCode = this.getDeskCode(url, 'number'); | const deskCode = this.getDeskCode(url, 'number'); | ||||
const activityId = this.getDeskCode(url, 'activityId'); | const activityId = this.getDeskCode(url, 'activityId'); | ||||
const storeId = this.getDeskCode(url, 'storeId'); | const storeId = this.getDeskCode(url, 'storeId'); | ||||
if (activityId != null) { | |||||
const reserve = this.getDeskCode(url, 'reserve'); | |||||
if (activityId) { | |||||
uni.redirectTo({ | uni.redirectTo({ | ||||
url: `/pages/specialOffer/specialOffer?storeId=${activityId}` | url: `/pages/specialOffer/specialOffer?storeId=${activityId}` | ||||
}); | }); | ||||
return; | return; | ||||
} | } | ||||
if (deskCode != null && storeId != null) { | |||||
if (deskCode && storeId) { | |||||
const codeScanInfo = { | const codeScanInfo = { | ||||
storeId, | storeId, | ||||
deskCode | deskCode | ||||
@@ -276,6 +278,18 @@ | |||||
uni.switchTab({ | uni.switchTab({ | ||||
url: '/pages/food/food' | url: '/pages/food/food' | ||||
}); | }); | ||||
return; | |||||
} | |||||
if (reserve && storeId) { | |||||
const codeScanInfo = { | |||||
storeId, | |||||
deskCode: 0 | |||||
} | |||||
store.commit('onInitScanInfo', codeScanInfo); | |||||
uni.redirectTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
}); | |||||
return; | |||||
} | } | ||||
}, | }, | ||||
//根据门店ID获取店铺素材 | //根据门店ID获取店铺素材 | ||||
@@ -9,6 +9,26 @@ export default { | |||||
interfaceType: 0 | interfaceType: 0 | ||||
}); | }); | ||||
}, | }, | ||||
//根据店铺ID获取预定菜品列表 | |||||
GetReservationGoodsList(storeId) { | |||||
return request({ | |||||
url: `/api/StoreHelper/GetReservationGoodsList?storeId=${storeId}`, | |||||
method: 'GET', | |||||
interfaceType: 0 | |||||
}); | |||||
}, | |||||
//添加预定商品 | |||||
AddReservationGoods(reservaList, memberInfoId) { | |||||
return request({ | |||||
url: `/api/StoreHelper/AddReservationGoods`, | |||||
method: 'POST', | |||||
data: reservaList, | |||||
header: { | |||||
memberInfoId | |||||
}, | |||||
interfaceType: 0 | |||||
}); | |||||
}, | |||||
//获取店铺列表 | //获取店铺列表 | ||||
getStoreList() { | getStoreList() { | ||||
return request({ | return request({ | ||||
@@ -130,6 +130,19 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="reserve-btn-list" v-if="isReserve"> | |||||
<checkbox-group @change="onThreeMealChange"> | |||||
<label class="reserve-btn-item"> | |||||
<checkbox value="1" :disabled="!currentGoods.mealType.includes(1)" /> 早餐 | |||||
</label> | |||||
<label class="reserve-btn-item"> | |||||
<checkbox value="2" :disabled="!currentGoods.mealType.includes(2)"/> 中餐 | |||||
</label> | |||||
<label class="reserve-btn-item"> | |||||
<checkbox value="3" :disabled="!currentGoods.mealType.includes(3)"/> 晚餐 | |||||
</label> | |||||
</checkbox-group> | |||||
</view> | |||||
<view class="choose-success-btn" @click="onSure"> | <view class="choose-success-btn" @click="onSure"> | ||||
加入购物车 | 加入购物车 | ||||
</view> | </view> | ||||
@@ -186,6 +199,12 @@ | |||||
type: Boolean, | type: Boolean, | ||||
default: false, | default: false, | ||||
required: false | required: false | ||||
}, | |||||
//是否预定 | |||||
isReserve: { | |||||
type: Boolean, | |||||
default: false, | |||||
required: false | |||||
} | } | ||||
}, | }, | ||||
data() { | data() { | ||||
@@ -202,7 +221,7 @@ | |||||
let price = 0; | let price = 0; | ||||
let food = this.currentGoods; | let food = this.currentGoods; | ||||
price += food.vipPrice; | price += food.vipPrice; | ||||
food.addtoFoodList.forEach(item => { | |||||
food.addtoFoodList?.forEach(item => { | |||||
item.foods.forEach(addFood => { | item.foods.forEach(addFood => { | ||||
if (addFood.count > 0) { | if (addFood.count > 0) { | ||||
price += (addFood.count * addFood.price); | price += (addFood.count * addFood.price); | ||||
@@ -216,7 +235,7 @@ | |||||
let price = 0; | let price = 0; | ||||
let food = this.currentGoods; | let food = this.currentGoods; | ||||
price += food.price; | price += food.price; | ||||
food.addtoFoodList.forEach(item => { | |||||
food.addtoFoodList?.forEach(item => { | |||||
item.foods.forEach(addFood => { | item.foods.forEach(addFood => { | ||||
if (addFood.count > 0) { | if (addFood.count > 0) { | ||||
price += (addFood.count * addFood.price); | price += (addFood.count * addFood.price); | ||||
@@ -229,6 +248,10 @@ | |||||
currentGoods() { | currentGoods() { | ||||
return store.state.currentGoods; | return store.state.currentGoods; | ||||
}, | }, | ||||
//购物车 | |||||
shoppingCart() { | |||||
return store.state.shoppingCart; | |||||
}, | |||||
specificationTotalPrice() { | specificationTotalPrice() { | ||||
let price = 0; | let price = 0; | ||||
if (this.currentChoose.specification) { | if (this.currentChoose.specification) { | ||||
@@ -244,6 +267,13 @@ | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
onThreeMealChange(value) { | |||||
let array = JSON.parse(JSON.stringify(value.target.value)); | |||||
array = array.sort((a,b) => (a - b)); | |||||
const tempGoods = JSON.parse(JSON.stringify(this.currentGoods)); | |||||
tempGoods.threeMeal = array.join(); | |||||
store.commit('initCurrentGoods', tempGoods); | |||||
}, | |||||
onFeedPopuoClose() { | onFeedPopuoClose() { | ||||
this.$emit('onFeedPopuoClose'); | this.$emit('onFeedPopuoClose'); | ||||
}, | }, | ||||
@@ -276,6 +306,70 @@ | |||||
}, | }, | ||||
//从配料列表添加主食 | //从配料列表添加主食 | ||||
onSure() { | onSure() { | ||||
if (this.isReserve) { | |||||
const result = this.currentGoods.threeMeal && '1,2,3,1,3'.includes(this.currentGoods.threeMeal); | |||||
if (!result) { | |||||
uni.showToast({ | |||||
title: "请选择用餐时间!", | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
return; | |||||
} else { | |||||
const tempGoods = JSON.parse(JSON.stringify(this.currentGoods)); | |||||
tempGoods.sencondId = tempGoods.sencondId.concat(tempGoods.threeMeal); | |||||
store.commit('initCurrentGoods', tempGoods); | |||||
//首先看自身有没有超过每餐可预订数量 | |||||
const mealList = Array.from(tempGoods.threeMeal); | |||||
for(let i = 1; i <= 3 ;i ++) { | |||||
const filterCount = mealList.filter(item => item === `${i}`); | |||||
if (filterCount > tempGoods.qyt) { | |||||
uni.showToast({ | |||||
title: `该商品每餐最多预定${tempGoods.qty}份`, | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
return; | |||||
} | |||||
} | |||||
//再看购物车有没有超过每餐可预订数量 | |||||
const jsonData = []; | |||||
this.shoppingCart.forEach(item => { | |||||
for(let i = 0; i < item.count; i++) { | |||||
Array.from(item.threeMeal).forEach(threeItem => { | |||||
if ('123'.includes(threeItem)) { | |||||
jsonData.push({ | |||||
"goodsId": item.id, | |||||
"qty": 1, | |||||
"mealType": threeItem | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
let isMore = false; | |||||
mealList.forEach(item => { | |||||
if ("123".includes(item)) { | |||||
const cardFoodCount = jsonData.filter(jsonItem => (jsonItem.goodsId === tempGoods.id && jsonItem.mealType === item)) || []; | |||||
if (cardFoodCount.length + 1 > tempGoods.qty) { | |||||
uni.showToast({ | |||||
title: `该商品每餐最多预定${tempGoods.qty}份`, | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
isMore = true; | |||||
return; | |||||
} | |||||
} | |||||
}); | |||||
if (isMore) { | |||||
return; | |||||
} | |||||
} | |||||
} | |||||
if (this.isSpecialOffer) { | if (this.isSpecialOffer) { | ||||
store.commit('onStapleFoodPlusFromList'); | store.commit('onStapleFoodPlusFromList'); | ||||
getApp().onCheckUserSession('specialOffer').then(() => { | getApp().onCheckUserSession('specialOffer').then(() => { | ||||
@@ -668,4 +762,15 @@ | |||||
.more-one-icon { | .more-one-icon { | ||||
color: #666; | color: #666; | ||||
} | } | ||||
.reserve-btn-list { | |||||
height: 100rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
.reserve-btn-item { | |||||
margin-right: 30rpx; | |||||
} | |||||
</style> | </style> |
@@ -29,9 +29,11 @@ | |||||
<view class="food-card-info"> | <view class="food-card-info"> | ||||
<view class="food-card-name"> | <view class="food-card-name"> | ||||
{{food.name}} | {{food.name}} | ||||
</view> | </view> | ||||
<view class="food-card-no-vip"> | <view class="food-card-no-vip"> | ||||
非会员{{food.price}}起 | 非会员{{food.price}}起 | ||||
<text class="food-card-reserve-count" v-if="isReserve">可预订({{food.qty}})份</text> | |||||
</view> | </view> | ||||
<view class="food-card-price"> | <view class="food-card-price"> | ||||
<view class="card-price-left"> | <view class="card-price-left"> | ||||
@@ -49,7 +51,7 @@ | |||||
</view> | </view> | ||||
<icon class="iconfont icon-zengjia" @click="onChooseFood(food)"></icon> | <icon class="iconfont icon-zengjia" @click="onChooseFood(food)"></icon> | ||||
</view> | </view> | ||||
<view class="card-price-right special-offer-btn" v-else @click="onChooseSpecial(food)"> | |||||
<view class="card-price-right special-offer-btn" v-if="isSpecialOffer" @click="onChooseSpecial(food)"> | |||||
<icon class="iconfont icon-wancheng"></icon> | <icon class="iconfont icon-wancheng"></icon> | ||||
选购 | 选购 | ||||
</view> | </view> | ||||
@@ -64,9 +66,10 @@ | |||||
@onFeedPopuoClose="onFeedPopuoClose" | @onFeedPopuoClose="onFeedPopuoClose" | ||||
class="feed-list-popup" | class="feed-list-popup" | ||||
:isSpecialOffer="isSpecialOffer" | :isSpecialOffer="isSpecialOffer" | ||||
:isReserve="isReserve" | |||||
> | > | ||||
</FeedListPopup> | </FeedListPopup> | ||||
<SettlementPopup ref="settlementRef" v-if="!isSpecialOffer"></SettlementPopup> | |||||
<SettlementPopup :isReserve="isReserve" ref="settlementRef" v-if="!isSpecialOffer"></SettlementPopup> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -96,6 +99,12 @@ | |||||
type: Array, | type: Array, | ||||
default: [], | default: [], | ||||
require: true | require: true | ||||
}, | |||||
//是否预定 | |||||
isReserve: { | |||||
type: Boolean, | |||||
default: false, | |||||
required: false | |||||
} | } | ||||
}, | }, | ||||
data() { | data() { | ||||
@@ -156,7 +165,7 @@ | |||||
this.foodRightIntoView = 'foodRightIntoView'.concat(index); | this.foodRightIntoView = 'foodRightIntoView'.concat(index); | ||||
}, | }, | ||||
// 点击加号选择商品 | // 点击加号选择商品 | ||||
onChooseFood(food) { | |||||
onChooseFood(food, type) { | |||||
food.count = 0; | food.count = 0; | ||||
food.sencondId = food.id; | food.sencondId = food.id; | ||||
if (food.addtoFoodList && food.addtoFoodList.length > 0) { | if (food.addtoFoodList && food.addtoFoodList.length > 0) { | ||||
@@ -218,7 +227,16 @@ | |||||
return name.includes(this.searchText); | return name.includes(this.searchText); | ||||
}, | }, | ||||
onReduceFood(food) { | onReduceFood(food) { | ||||
if (food.addtoFoodList.length > 0) { | |||||
if (this.isReserve) { | |||||
uni.showToast({ | |||||
title: `请在购物车中删除该商品!`, | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
return; | |||||
} | |||||
if (food.addtoFoodList && food.addtoFoodList.length > 0) { | |||||
this.$refs.settlementRef.isShowShopCart = true; | this.$refs.settlementRef.isShowShopCart = true; | ||||
} else { | } else { | ||||
store.commit('onStapleFoodReduce', food); | store.commit('onStapleFoodReduce', food); | ||||
@@ -460,4 +478,9 @@ | |||||
.advertisement-card image { | .advertisement-card image { | ||||
border-radius: 10rpx; | border-radius: 10rpx; | ||||
} | } | ||||
.food-card-reserve-count { | |||||
margin-left: 10rpx; | |||||
color: #F84352; | |||||
} | |||||
</style> | </style> |
@@ -20,7 +20,9 @@ | |||||
¥{{shopCartTotalPrice.toFixed(2)}} | ¥{{shopCartTotalPrice.toFixed(2)}} | ||||
</view> | </view> | ||||
<view class="settlement-btn" @click.stop="onJumpConfirm"> | <view class="settlement-btn" @click.stop="onJumpConfirm"> | ||||
去结算 | |||||
{{ | |||||
isReserve ? '去预定' : '去结算' | |||||
}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -46,7 +48,8 @@ | |||||
<view class="cart-goods-info"> | <view class="cart-goods-info"> | ||||
<view class="cart-goods-name text-overflow-one"> | <view class="cart-goods-name text-overflow-one"> | ||||
{{food.name}} | {{food.name}} | ||||
<text class="cart-goods-company">{{food.company ? food.company : '份'}}</text> | |||||
<text class="cart-goods-company">({{food.company ? food.company : '份'}})</text> | |||||
<text class="three-meal-text">{{onFormartThreeMeal(food.threeMeal)}}</text> | |||||
</view> | </view> | ||||
<view class="cart-goods-feed text-overflow-one"> | <view class="cart-goods-feed text-overflow-one"> | ||||
<view v-for="feed in food.addtoFoodList" :key="feed.id" class="cart-goods-feed-item"> | <view v-for="feed in food.addtoFoodList" :key="feed.id" class="cart-goods-feed-item"> | ||||
@@ -89,8 +92,17 @@ | |||||
import { debounce } from "@/utils/DebounceAndThrottle.js"; | import { debounce } from "@/utils/DebounceAndThrottle.js"; | ||||
import store from '@/store/index.js'; | import store from '@/store/index.js'; | ||||
import memberAPI from "@/api/member"; | import memberAPI from "@/api/member"; | ||||
import goodsAPI from "@/api/goods"; | |||||
export default { | export default { | ||||
name:"SettlementPopup", | name:"SettlementPopup", | ||||
props: { | |||||
//是否预定 | |||||
isReserve: { | |||||
type: Boolean, | |||||
default: false, | |||||
required: false | |||||
} | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
imageServer: getApp().globalData.imageServer, | imageServer: getApp().globalData.imageServer, | ||||
@@ -121,6 +133,21 @@ | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
//格式化早中晚餐 | |||||
onFormartThreeMeal(meals) { | |||||
if (!this.isReserve) return ''; | |||||
let result = ''; | |||||
if (meals.includes(1)) { | |||||
result = result.concat(',早餐'); | |||||
} | |||||
if (meals.includes(2)) { | |||||
result = result.concat(',中餐'); | |||||
} | |||||
if (meals.includes(3)) { | |||||
result = result.concat(',晚餐'); | |||||
} | |||||
return result; | |||||
}, | |||||
//关闭购物车弹窗 | //关闭购物车弹窗 | ||||
onCloseShopCart() { | onCloseShopCart() { | ||||
this.isShowShopCart = false; | this.isShowShopCart = false; | ||||
@@ -131,11 +158,15 @@ | |||||
}, | }, | ||||
//跳转确认订单页面 | //跳转确认订单页面 | ||||
onJumpConfirm: debounce(function() { | onJumpConfirm: debounce(function() { | ||||
getApp().onCheckUserSession('food').then(() => { | |||||
uni.navigateTo({ | |||||
url: '/pages/confirmOrder/confirmOrder' | |||||
if (this.isReserve) { | |||||
this.onReserveFood(); | |||||
} else { | |||||
getApp().onCheckUserSession('food').then(() => { | |||||
uni.navigateTo({ | |||||
url: '/pages/confirmOrder/confirmOrder' | |||||
}); | |||||
}); | }); | ||||
}); | |||||
} | |||||
}, 2000, true), | }, 2000, true), | ||||
//清空购物车 | //清空购物车 | ||||
onClearShopCart() { | onClearShopCart() { | ||||
@@ -155,6 +186,56 @@ | |||||
}, | }, | ||||
//主食数量加1 | //主食数量加1 | ||||
onStapleFoodPlusFromCart(food) { | onStapleFoodPlusFromCart(food) { | ||||
if (this.isReserve) { | |||||
//首先看自身有没有超过每餐可预订数量 | |||||
const mealList = Array.from(food.threeMeal); | |||||
for(let i = 1; i <= 3 ;i ++) { | |||||
const filterCount = mealList.filter(item => item === `${i}`); | |||||
if (filterCount > food.qyt) { | |||||
uni.showToast({ | |||||
title: `该商品每餐最多预定${food.qty}份`, | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
return; | |||||
} | |||||
} | |||||
//再看购物车有没有超过每餐可预订数量 | |||||
const jsonData = []; | |||||
this.shoppingCart.forEach(item => { | |||||
for(let i = 0; i < item.count; i++) { | |||||
Array.from(item.threeMeal).forEach(threeItem => { | |||||
if ('123'.includes(threeItem)) { | |||||
jsonData.push({ | |||||
"goodsId": item.id, | |||||
"qty": 1, | |||||
"mealType": threeItem | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
let isMore = false; | |||||
mealList.forEach(item => { | |||||
if ("123".includes(item)) { | |||||
const cardFoodCount = jsonData.filter(jsonItem => (jsonItem.goodsId === food.id && jsonItem.mealType === item)) || []; | |||||
if (cardFoodCount.length + 1 > food.qty) { | |||||
uni.showToast({ | |||||
title: `该商品每餐最多预定${food.qty}份`, | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
isMore = true; | |||||
return; | |||||
} | |||||
} | |||||
}); | |||||
if (isMore) { | |||||
return; | |||||
} | |||||
} | |||||
store.commit('onStapleFoodPlusFromCart', food); | store.commit('onStapleFoodPlusFromCart', food); | ||||
}, | }, | ||||
async onCheckUserInfo() { | async onCheckUserInfo() { | ||||
@@ -163,9 +244,23 @@ | |||||
this.isLogin = true; | this.isLogin = true; | ||||
} | } | ||||
const response = await memberAPI.selectMemberByOpenId(userStorage.openId); | const response = await memberAPI.selectMemberByOpenId(userStorage.openId); | ||||
if (response.isSuccess && response.data?.memberInfo_Id) { | |||||
if (response.isSuccess && response.data?.memberInfo_Id && response.data.phone) { | |||||
this.isMember = true; | this.isMember = true; | ||||
store.commit('onChangeUserIsVip', true); | store.commit('onChangeUserIsVip', true); | ||||
} else { | |||||
if (this.isReserve) { | |||||
uni.showToast({ | |||||
title: "请注册会员后再进行预约!", | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true, | |||||
complete: () => { | |||||
uni.redirectTo({ | |||||
url: '/pages/memberRegister/memberRegister' | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
} | } | ||||
}, | }, | ||||
onJumpRegister() { | onJumpRegister() { | ||||
@@ -180,13 +275,59 @@ | |||||
url: '/pages/login/login?fromUrl=food' | url: '/pages/login/login?fromUrl=food' | ||||
}); | }); | ||||
} | } | ||||
}, | |||||
/** | |||||
* 预定菜品 | |||||
*/ | |||||
async onReserveFood() { | |||||
const jsonData = []; | |||||
const result = []; | |||||
this.shoppingCart.forEach(item => { | |||||
for(let i = 0; i < item.count; i++) { | |||||
Array.from(item.threeMeal).forEach(threeItem => { | |||||
if ('123'.includes(threeItem)) { | |||||
jsonData.push({ | |||||
"goodsId": item.id, | |||||
"qty": 1, | |||||
"mealType": threeItem | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
jsonData.forEach(item => { | |||||
const find = result.find(resItem => (resItem.goodsId === item.goodsId && resItem.mealType === item.mealType)); | |||||
if (find) { | |||||
find.qty += 1; | |||||
} else { | |||||
result.push(item); | |||||
} | |||||
}); | |||||
const storage = getApp().onGetUserStorage(); | |||||
const response = await goodsAPI.AddReservationGoods(result, storage.memberInfo_Id || ''); | |||||
if (response.isSuccess) { | |||||
uni.showToast({ | |||||
title: "预定成功!", | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
store.commit('onClearShopCart'); | |||||
} else { | |||||
uni.showToast({ | |||||
title: response.msg || '预定失败!', | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
/* 结算 */ | |||||
/* 结算 */ | |||||
.settlement-box { | .settlement-box { | ||||
position: relative; | position: relative; | ||||
width: 700rpx; | width: 700rpx; | ||||
@@ -406,4 +547,8 @@ | |||||
.hidden-blank-data { | .hidden-blank-data { | ||||
visibility: hidden; | visibility: hidden; | ||||
} | } | ||||
.three-meal-text { | |||||
color: #F84352; | |||||
} | |||||
</style> | </style> |
@@ -86,7 +86,7 @@ | |||||
}, | }, | ||||
async onSearchUserLocation() { | async onSearchUserLocation() { | ||||
let response = await getApp().onGetUserLocation(); | let response = await getApp().onGetUserLocation(); | ||||
if (response) { | |||||
if (true) { | |||||
this.isShowLoactionAuth = false; | this.isShowLoactionAuth = false; | ||||
this.onFetchStoreList(); | this.onFetchStoreList(); | ||||
} else { | } else { | ||||
@@ -126,7 +126,7 @@ | |||||
}, | }, | ||||
//根据店铺ID获取商品列表 | //根据店铺ID获取商品列表 | ||||
async getGoodsList() { | async getGoodsList() { | ||||
if (this.currentStore.id == this.lastCurrentStore.id) return; | |||||
// if (this.currentStore.id == this.lastCurrentStore.id) return; | |||||
let response = await goodsApi.getStoreGoodsByStoreId(this.currentStore.id); | let response = await goodsApi.getStoreGoodsByStoreId(this.currentStore.id); | ||||
if (response.isSuccess == true) { | if (response.isSuccess == true) { | ||||
this.isSuccessGoodsList = true; | this.isSuccessGoodsList = true; | ||||
@@ -7,58 +7,16 @@ | |||||
</view> | </view> | ||||
<icon class="iconfont icon-you"></icon> | <icon class="iconfont icon-you"></icon> | ||||
</view> | </view> | ||||
<view class="food-list-box"> | |||||
<scroll-view class="food-left-scroll" scroll-y="true" :scroll-into-view="foodLeftIntoView" scroll-with-animation> | |||||
<view :class="{'food-left-item': true, 'food-left-active': index == foodLeftIndex}" v-for="(item, index) in foodArray" :key="index" :id="'foodLeftIntoView'.concat(index)" @click="setLeftView(index)"> | |||||
<view class="food-left-cover"> | |||||
<image @error="onImageErrorType(item)" :lazy-load="true" class="image-common-cover" :src="imageServer.concat('785ffa97-f2ee-4e08-ae39-86b90b45d33c.png')" ></image> | |||||
</view> | |||||
<view class="food-left-name"> | |||||
{{item.name}} | |||||
</view> | |||||
</view> | |||||
</scroll-view> | |||||
<scroll-view class="food-right-scroll" scroll-y="true" :scroll-into-view="foodRightIntoView" @scroll="onScroll" @scrolltoupper="onScrollTop" @scrolltolower="onScrollBottom" scroll-with-animation> | |||||
<view class="food-right-item" v-for="(item, index) in foodArray" :key="item.id" :id="'foodRightIntoView'.concat(index)"> | |||||
<view class="foodt-right-title"> | |||||
{{item.name}} | |||||
</view> | |||||
<view class="food-card" v-for="(food, fIndex) in item.foods" :key="food.id"> | |||||
<view class="food-card-cover" > | |||||
<image @error="onImageError(food)" @click="onPreviewImage(food.cover)" :lazy-load="true" :src="food.cover" class="image-common-cover"></image> | |||||
<view class="food-sell-out" v-show="food.state === 0"> | |||||
已售罄 | |||||
</view> | |||||
</view> | |||||
<view class="food-card-info"> | |||||
<view class="food-card-name"> | |||||
{{food.name}} | |||||
</view> | |||||
<view class="food-card-no-vip"> | |||||
非会员{{food.price}}起 | |||||
</view> | |||||
<view class="food-card-price"> | |||||
<view class="card-price-left"> | |||||
<view class="food-vip-icon"> | |||||
<image :lazy-load="true" class="image-common-cover" :src="imageServer.concat('ca8ae689-92cf-427a-b34f-b64b81368ae8.png')"></image> | |||||
</view> | |||||
<view class="minimum-price green-color"> | |||||
¥{{food.vipPrice}}起 | |||||
</view> | |||||
</view> | |||||
<view class="card-price-right" > | |||||
<icon @click="onReduceFood(food)" class="iconfont icon-jianshaojianqujianhao" :class="{'hidden-blank-data': food.shopCartNumber < 1}"></icon> | |||||
<view class="food-card-count" :class="{'hidden-blank-data': food.shopCartNumber < 1}"> | |||||
{{food.shopCartNumber}} | |||||
</view> | |||||
<icon class="iconfont icon-zengjia" @click="onChooseFood(food)"></icon> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</scroll-view> | |||||
<GoodsList :isReserve="true" ref="goodsListRef" class="goods-list-box" :adverList="adverList" v-if="foodArray.length > 0"></GoodsList> | |||||
<view class="food-list-box food-list-box-empty" v-else> | |||||
<view class="food-empty-image"> | |||||
<image :src="imageServer.concat('5d404162-0cae-41df-9a91-51eda578d60b.png')" class="image-common-cover"></image> | |||||
</view> | |||||
<view class="food-list-box-empty-btn" @click="onReacquireData" v-if="!isSuccessGoodsList"> | |||||
重新获取商品数据 | |||||
</view> | |||||
</view> | </view> | ||||
<LocationAuth v-if="isShowLoactionAuth" @onSuccessLocationAuth="onSuccessLocationAuth"></LocationAuth> | |||||
<uni-popup ref="popup" type="bottom"> | <uni-popup ref="popup" type="bottom"> | ||||
<view class="store-list"> | <view class="store-list"> | ||||
<view :class="{'store-list-item': true, 'selected-store': store.id === currentStore.id}" v-for="(store,index) in storeList" :key="index" @click="onChooseStore(store)"> | <view :class="{'store-list-item': true, 'selected-store': store.id === currentStore.id}" v-for="(store,index) in storeList" :key="index" @click="onChooseStore(store)"> | ||||
@@ -79,36 +37,59 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</uni-popup> | </uni-popup> | ||||
<button v-if="chooseGoodsCount > 0" class="reservation-btn" @click="onReservation">去预定</button> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { mapState } from 'vuex'; | |||||
import goodsApi from "@/api/goods.js"; | import goodsApi from "@/api/goods.js"; | ||||
import store from '@/store/index.js'; | import store from '@/store/index.js'; | ||||
import { debounce } from "@/utils/DebounceAndThrottle.js"; | import { debounce } from "@/utils/DebounceAndThrottle.js"; | ||||
export default { | export default { | ||||
onLoad(options) { | |||||
if (options.shareFoodId && options.shareStoreId) { | |||||
this.friendShare = options; | |||||
} | |||||
}, | |||||
onShow() { | onShow() { | ||||
this.onFetchStoreList(); | |||||
store.commit('onClearShopCart'); | |||||
if (store.state.isSpecialOffer) { | |||||
store.commit('onChangeIsSpecialOffer', false); | |||||
store.commit('onClearShopCart'); | |||||
} | |||||
if (!this.isScanShow) { | |||||
this.onGetUserLocation(); | |||||
} | |||||
}, | |||||
onHide() { | |||||
if(this.$refs.goodsListRef) { | |||||
this.$refs.goodsListRef.onHideShopCart(); | |||||
} | |||||
}, | |||||
onUnload() { | |||||
store.commit('onClearShopCart'); | |||||
}, | |||||
computed: { | |||||
...mapState([ | |||||
'foodArray', 'currentStore', 'lastCurrentStore', 'codeScanInfo', 'currentGoods', 'storeStyles' | |||||
]) | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
imageServer: getApp().globalData.imageServer, | imageServer: getApp().globalData.imageServer, | ||||
foodLeftIndex: 0, //左侧滚动面板当前下标 | |||||
foodRightNodeTop: [], //右侧节点距顶部高度 | |||||
foodLeftIntoView: '', //左侧滚动面板当前锚点 | |||||
foodRightIntoView: '', //右侧滚动面板当前锚点 | |||||
storeList: [], //店铺列表 | storeList: [], //店铺列表 | ||||
foodArray: [], //商品数据 | |||||
currentStore: {}, //当前门店 | |||||
chooseGoodsCount: 0 //已选商品数量 | |||||
userToStoreDistance: 0, | |||||
isSuccessGoodsList: true, | |||||
isScanShow: false, | |||||
isInnerDistance: false, | |||||
isShowLoactionAuth: false, | |||||
friendShare: {}, | |||||
adverList: [] | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
/** | |||||
* 获取门店列表 | |||||
*/ | |||||
async onFetchStoreList() { | async onFetchStoreList() { | ||||
let storeId = this.codeScanInfo.storeId; | |||||
let response = await goodsApi.getStoreList(); | let response = await goodsApi.getStoreList(); | ||||
this.storeList = []; | this.storeList = []; | ||||
if (response.isSuccess == true) { | if (response.isSuccess == true) { | ||||
@@ -122,11 +103,15 @@ | |||||
storeList.forEach(item => { | storeList.forEach(item => { | ||||
if (item.toUserDistance <= 9999) { | if (item.toUserDistance <= 9999) { | ||||
this.storeList.push(item); | this.storeList.push(item); | ||||
this.isInnerDistance = true; | |||||
} | } | ||||
}); | }); | ||||
this.currentStore = storeList[0]; | |||||
getApp().globalData.companyId = storeList[0].companyId; | |||||
this.getGoodsList(storeList[0].id); | |||||
if (storeId != '') { | |||||
store.commit('onInitChooseStore', this.storeList.find(x => x.id === storeId)); | |||||
} else { | |||||
store.commit('onInitChooseStore', this.storeList[0]); | |||||
} | |||||
getApp().globalData.companyId = this.currentStore.companyId; | |||||
} else { | } else { | ||||
uni.showToast({ | uni.showToast({ | ||||
title: response.msg, | title: response.msg, | ||||
@@ -137,8 +122,8 @@ | |||||
} | } | ||||
}, | }, | ||||
//根据店铺ID获取商品列表 | //根据店铺ID获取商品列表 | ||||
async getGoodsList(storeId) { | |||||
let response = await goodsApi.getStoreGoodsByStoreId(storeId); | |||||
async getGoodsList() { | |||||
let response = await goodsApi.GetReservationGoodsList(this.currentStore.id); | |||||
if (response.isSuccess == true) { | if (response.isSuccess == true) { | ||||
this.isSuccessGoodsList = true; | this.isSuccessGoodsList = true; | ||||
} else { | } else { | ||||
@@ -154,126 +139,104 @@ | |||||
food.shopCartNumber = 0; | food.shopCartNumber = 0; | ||||
}); | }); | ||||
}); | }); | ||||
this.foodArray = foodTypes; | |||||
store.commit('initFoodArray', foodTypes); | |||||
setTimeout(() => { | setTimeout(() => { | ||||
this.getNodeInfo(); | |||||
this.$refs.goodsListRef.getNodeInfo(); | |||||
}, 100); | }, 100); | ||||
} else { | |||||
store.commit('initFoodArray', []); | |||||
} | } | ||||
}, | }, | ||||
// 监听滚动到顶部 | |||||
onScrollTop() { | |||||
this.foodLeftIntoView = 'foodLeftIntoView'.concat(0); | |||||
this.foodLeftIndex = 0; | |||||
}, | |||||
onScrollBottom() { | |||||
this.foodLeftIntoView = 'foodLeftIntoView'.concat(this.foodRightNodeTop.length - 1); | |||||
this.foodLeftIndex = this.foodRightNodeTop.length - 1; | |||||
onStoreList() { | |||||
this.$refs.popup.open('right'); | |||||
}, | }, | ||||
// 监听滚动 | |||||
onScroll(e) { | |||||
let scrollTop = e.detail.scrollTop; | |||||
for(let i = 0; i < this.foodRightNodeTop.length; i++) { | |||||
let h1 = this.foodRightNodeTop[i]; | |||||
let h2 = this.foodRightNodeTop[i + 1]; | |||||
if (scrollTop > h1 && scrollTop < h2) { | |||||
this.foodLeftIndex = i + 1; | |||||
this.foodLeftIntoView = 'foodLeftIntoView'.concat(i + 1); | |||||
} | |||||
async onGetUserLocation() { | |||||
// this.isShowLoactionAuth = false; | |||||
// this.onQueryStoreAndGoods(); | |||||
const response = await getApp().onGetUserLocation(); | |||||
if (response) { | |||||
this.isShowLoactionAuth = false; | |||||
this.onQueryStoreAndGoods(); | |||||
} else { | |||||
this.isShowLoactionAuth = true; | |||||
} | } | ||||
this.foodRightIntoView = 'foodRightIntoView'; | |||||
}, | }, | ||||
//获取节点信息 | |||||
getNodeInfo() { | |||||
this.onResetFoodInfo(); | |||||
const query = uni.createSelectorQuery().in(this); | |||||
query.selectAll('.food-right-item').boundingClientRect(data => { | |||||
data.forEach(item => { | |||||
this.foodRightNodeTop.push(item.top); | |||||
}); | |||||
}).exec(); | |||||
}, | |||||
//点击左侧滚动面板 | |||||
setLeftView(index) { | |||||
this.foodLeftIndex = index; | |||||
this.foodRightIntoView = 'foodRightIntoView'.concat(index); | |||||
}, | |||||
// 点击加号选择商品 | |||||
onChooseFood(food) { | |||||
food.shopCartNumber += 1; | |||||
this.chooseGoodsCount += 1; | |||||
food.count = 0; | |||||
food.sencondId = food.id; | |||||
if (food.addtoFoodList && food.addtoFoodList.length > 0) { | |||||
food.addtoFoodList.forEach(item => { | |||||
item.foods.forEach(additional => { | |||||
additional.count = 0; | |||||
additional.sourceCount = 0; | |||||
}); | |||||
onQueryStoreAndGoods() { | |||||
if (this.storeList.length === 0) { | |||||
this.onFetchStoreList().then( () => { | |||||
if (this.isInnerDistance) { | |||||
this.getGoodsList().then(() => { | |||||
store.commit('onInitLastStore', store.state.currentStore); | |||||
if (this.$refs.goodsListRef) { | |||||
this.$refs.goodsListRef.onCheckUserInfo(); | |||||
this.onHandleFriendShare(); | |||||
} | |||||
}); | |||||
} | |||||
}); | }); | ||||
} | |||||
if (food.setMealList && food.setMealList.length > 0) { | |||||
food.setMealList.forEach(item => { | |||||
item.foods.forEach(additional => { | |||||
additional.count = 0; | |||||
additional.sourceCount = 0; | |||||
if (additional.specification && additional.specification.length > 0) { | |||||
additional.specification.forEach(specifiType => { | |||||
specifiType.foods.forEach((specifiItem, specifiIndex) =>{ | |||||
if (specifiIndex === 0) { | |||||
specifiItem.isSelect = true; | |||||
} else { | |||||
specifiItem.isSelect = false; | |||||
} | |||||
}); | |||||
}); | |||||
} else { | |||||
if (this.isInnerDistance) { | |||||
this.getGoodsList().then(() => { | |||||
store.commit('onInitLastStore', store.state.currentStore); | |||||
if (this.$refs.goodsListRef) { | |||||
this.$refs.goodsListRef.onCheckUserInfo(); | |||||
} | } | ||||
}); | }); | ||||
}); | |||||
} | |||||
} | |||||
}, | |||||
onShowDistance(location) { | |||||
let userToStoreDistance = 9999; | |||||
if (location != null) { | |||||
let locArray = location.split(','); | |||||
userToStoreDistance = getApp().distance(getApp().globalData.userLocation.latitude, getApp().globalData.userLocation.longitude , Number.parseFloat(locArray[1]) , Number.parseFloat(locArray[0])); | |||||
} | |||||
userToStoreDistance = Number.parseFloat(userToStoreDistance); | |||||
if (Number.isNaN(userToStoreDistance)) { | |||||
userToStoreDistance = 9999; | |||||
} | } | ||||
if (food.goodsMakes && food.goodsMakes.length > 0) { | |||||
food.goodsMakes.forEach((item, inedx) => { | |||||
if (inedx === 0) { | |||||
item.isSelect = true; | |||||
} else { | |||||
item.isSelect = false; | |||||
return userToStoreDistance; | |||||
}, | |||||
onReacquireData() { | |||||
store.commit('onInitLastStore', {}); | |||||
if (this.storeList.length === 0) { | |||||
this.onFetchStoreList().then( () => { | |||||
if (this.isInnerDistance) { | |||||
this.getGoodsList().then(() => { | |||||
store.commit('onInitLastStore', store.state.currentStore); | |||||
}); | |||||
} | } | ||||
}); | }); | ||||
} else { | |||||
if (this.isInnerDistance) { | |||||
this.getGoodsList().then(() => { | |||||
store.commit('onInitLastStore', store.state.currentStore); | |||||
}); | |||||
} | |||||
} | } | ||||
}, | }, | ||||
onResetFoodInfo() { | |||||
this.foodRightIntoView = 'foodRightIntoView-1'; | |||||
this.foodRightNodeTop = []; | |||||
}, | |||||
//预览图片 | |||||
onPreviewImage(url) { | |||||
uni.previewImage({ | |||||
urls: [url] | |||||
}); | |||||
}, | |||||
onReduceFood(food) { | |||||
if (food.shopCartNumber === 0) return; | |||||
this.chooseGoodsCount -= 1; | |||||
food.shopCartNumber -= 1; | |||||
onSuccessLocationAuth() { | |||||
this.isShowLoactionAuth = false; | |||||
}, | }, | ||||
onChooseSpecial: debounce(function(food) { | |||||
this.onChooseFood(food); | |||||
}, 2000, true), | |||||
onImageError(item) { | |||||
item.cover = this.imageServer.concat('empty-image.png'); | |||||
}, | |||||
onImageErrorType(item) { | |||||
item.coverUrl = this.imageServer.concat('empty-image.png'); | |||||
}, | |||||
onStoreList() { | |||||
this.$refs.popup.open('right') | |||||
}, | |||||
onChooseStore(store) { | |||||
this.chooseGoodsCount = 0; | |||||
this.currentStore = store; | |||||
this.getGoodsList(store.id); | |||||
//处理好友分享的商品 | |||||
onHandleFriendShare() { | |||||
if (this.currentStore.id === this.friendShare.shareStoreId) { | |||||
let shareFood = null; | |||||
this.foodArray.forEach(foodType => { | |||||
let findShare = foodType.foods.find(foodItem => this.friendShare.shareFoodId === foodItem.id); | |||||
if (findShare) { | |||||
shareFood = findShare; | |||||
} | |||||
}); | |||||
if (shareFood != null) { | |||||
this.$refs.goodsListRef.onChooseFood(shareFood); | |||||
} | |||||
} | |||||
}, | }, | ||||
onReservation() { | |||||
console.log('预定', this.foodArray) | |||||
onChooseStore(currentStore) { | |||||
store.commit('onClearShopCart'); | |||||
store.commit('onInitChooseStore', currentStore); | |||||
this.onGetUserLocation(); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -288,216 +251,6 @@ | |||||
overflow: hidden; | overflow: hidden; | ||||
} | } | ||||
.food-list-box { | |||||
flex-grow: 1; | |||||
display: flex; | |||||
border-top: 2rpx solid #f5f5f5; | |||||
overflow: hidden; | |||||
} | |||||
.food-empty-image { | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
margin-bottom: 200rpx; | |||||
animation-name: emptyImage; | |||||
animation-duration: 1s; | |||||
animation-timing-function: linear; | |||||
animation-iteration-count: infinite; | |||||
animation-direction: alternate; | |||||
animation-play-state: running; | |||||
} | |||||
@keyframes emptyImage { | |||||
from { | |||||
transform: translateY(25rpx); | |||||
} | |||||
to { | |||||
transform: translateY(0rpx); | |||||
} | |||||
} | |||||
.food-left-item { | |||||
position: relative; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-evenly; | |||||
align-items: center; | |||||
width: 130rpx; | |||||
height: 200rpx; | |||||
font-size: 24rpx; | |||||
color: #999; | |||||
box-sizing: border-box; | |||||
padding: 0 20rpx; | |||||
} | |||||
.food-left-cover { | |||||
width: 100rpx; | |||||
height: 100rpx; | |||||
} | |||||
.food-left-name { | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 3; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
} | |||||
.food-right-scroll { | |||||
margin-left: 20rpx; | |||||
} | |||||
.foodt-right-title { | |||||
font-size: 32rpx; | |||||
color: #222; | |||||
height: 60rpx; | |||||
line-height: 60rpx; | |||||
font-weight: 700; | |||||
font-family: '华文细黑'; | |||||
} | |||||
.food-card { | |||||
display: flex; | |||||
margin-bottom: 20rpx; | |||||
} | |||||
.food-card-cover { | |||||
position: relative; | |||||
flex-shrink: 0; | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
margin-right: 20rpx; | |||||
} | |||||
.food-sell-out { | |||||
position: absolute; | |||||
text-align: center; | |||||
bottom: 0; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
background-color: #CCCCCC; | |||||
color: #FFF; | |||||
width: 100%; | |||||
height: 50rpx; | |||||
line-height: 50rpx; | |||||
font-size: 28rpx; | |||||
} | |||||
.food-card-cover image { | |||||
border-radius: 20rpx; | |||||
} | |||||
.food-vip-icon { | |||||
width: 60rpx; | |||||
height: 34rpx; | |||||
} | |||||
.food-card-name { | |||||
font-size: 28rpx; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 2; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
} | |||||
.food-card-price { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 32rpx; | |||||
} | |||||
.card-price-left, .card-price-right { | |||||
display: flex; | |||||
align-items: center; | |||||
width: 55%; | |||||
} | |||||
.food-card-info { | |||||
flex-grow: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-around; | |||||
} | |||||
.food-card-no-vip { | |||||
color: #999; | |||||
font-size: 24rpx; | |||||
} | |||||
.card-price-right { | |||||
justify-content: space-around; | |||||
width: 45%; | |||||
} | |||||
.card-price-right .iconfont { | |||||
font-size: 50rpx; | |||||
} | |||||
.minimum-price { | |||||
font-family: fantasy; | |||||
} | |||||
.food-left-scroll { | |||||
width: 130rpx; | |||||
background-color: #F4F4F4; | |||||
} | |||||
.food-left-active { | |||||
position: relative; | |||||
background-color: #FFF; | |||||
} | |||||
.food-left-active::before { | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 50%; | |||||
transform: translateY(-50%); | |||||
content: ''; | |||||
width: 6rpx; | |||||
height: 200rpx; | |||||
background-color: $theme-color; | |||||
} | |||||
.icon-zengjia, .icon-jianshaojianqujianhao { | |||||
color: $theme-color; | |||||
} | |||||
.hidden-blank-data { | |||||
visibility: hidden; | |||||
} | |||||
.feed-list-popup { | |||||
z-index: 13; | |||||
} | |||||
.special-offer-btn { | |||||
justify-content: space-evenly; | |||||
background-color: $theme-color; | |||||
color: #FFF; | |||||
font-size: 28rpx; | |||||
border-radius: 10rpx; | |||||
margin-right: 10rpx; | |||||
padding: 5rpx 0; | |||||
} | |||||
.special-offer-btn .iconfont { | |||||
font-size: 35rpx; | |||||
} | |||||
/* 广告 */ | |||||
.advertisement-card { | |||||
width: 590rpx; | |||||
height: 200rpx; | |||||
margin: 10rpx 0; | |||||
} | |||||
.advertisement-card image { | |||||
border-radius: 10rpx; | |||||
} | |||||
.store-name { | .store-name { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -514,80 +267,101 @@ | |||||
font-weight: 700; | font-weight: 700; | ||||
} | } | ||||
.desk-code-test { | |||||
.goods-list-box { | |||||
display: flex; | display: flex; | ||||
margin-left: auto; | |||||
font-size: 24rpx; | |||||
} | |||||
.desk-code-test .iconfont { | |||||
margin-right: 15rpx; | |||||
} | |||||
.store-distance { | |||||
color: #999; | |||||
font-size: 24rpx; | |||||
flex-grow: 1; | |||||
overflow: hidden; | |||||
} | } | ||||
.store-list { | .store-list { | ||||
background-color: rgb(247, 248, 250); | |||||
width: 80vw; | |||||
height: 100vh; | |||||
padding: 30rpx; | |||||
box-sizing: border-box; | |||||
overflow-y: auto; | |||||
} | |||||
.store-list-item { | |||||
background: #FFF; | |||||
padding: 30rpx; | |||||
border-radius: 10rpx; | |||||
margin: 20rpx 0; | |||||
} | |||||
.store-list-name { | |||||
font-size: 34rpx; | |||||
font-weight: 700; | |||||
color: #222; | |||||
} | |||||
.store-status-box { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
} | |||||
.store-list-status { | |||||
font-size: 20rpx; | |||||
border: 1rpx solid #999; | |||||
color: #999; | |||||
width: 110rpx; | |||||
padding: 5rpx 20rpx; | |||||
border-radius: 10rpx; | |||||
text-align: center; | |||||
margin: 10rpx 0; | |||||
} | |||||
.store-list-time { | |||||
color: #999; | |||||
font-size: 24rpx; | |||||
margin: 10rpx 0; | |||||
} | |||||
.selected-store { | |||||
border: 4rpx solid $theme-color; | |||||
} | |||||
.reservation-btn { | |||||
position: fixed; | |||||
bottom: 60rpx; | |||||
right: 30rpx; | |||||
width: 300rpx; | |||||
height: 80rpx; | |||||
line-height: 80rpx; | |||||
background-color: #51A97D; | |||||
color: #FFF; | |||||
border-radius: 90rpx; | |||||
border: none; | |||||
} | |||||
background-color: rgb(247, 248, 250); | |||||
width: 80vw; | |||||
height: 100vh; | |||||
padding: 30rpx; | |||||
box-sizing: border-box; | |||||
overflow-y: auto; | |||||
} | |||||
.store-list-item { | |||||
background: #FFF; | |||||
padding: 30rpx; | |||||
border-radius: 10rpx; | |||||
margin: 20rpx 0; | |||||
} | |||||
.store-list-name { | |||||
font-size: 34rpx; | |||||
font-weight: 700; | |||||
color: #222; | |||||
} | |||||
.store-status-box { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
} | |||||
.store-list-status { | |||||
font-size: 20rpx; | |||||
border: 1rpx solid #999; | |||||
color: #999; | |||||
width: 110rpx; | |||||
padding: 5rpx 20rpx; | |||||
border-radius: 10rpx; | |||||
text-align: center; | |||||
margin: 10rpx 0; | |||||
} | |||||
.store-list-time { | |||||
color: #999; | |||||
font-size: 24rpx; | |||||
margin: 10rpx 0; | |||||
} | |||||
.selected-store { | |||||
border: 4rpx solid $theme-color; | |||||
} | |||||
.food-list-box { | |||||
flex-grow: 1; | |||||
display: flex; | |||||
border-top: 2rpx solid #f5f5f5; | |||||
overflow: hidden; | |||||
} | |||||
.food-list-box-empty { | |||||
flex-direction: column; | |||||
background-color: #FFF; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.food-list-box-empty-btn { | |||||
padding: 20rpx 150rpx; | |||||
font-size: 32rpx; | |||||
border-radius: 10rpx; | |||||
color: #FFF; | |||||
background-color: $theme-color; | |||||
} | |||||
.food-empty-image { | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
margin-bottom: 200rpx; | |||||
animation-name: emptyImage; | |||||
animation-duration: .8s; | |||||
animation-timing-function: linear; | |||||
animation-iteration-count: infinite; | |||||
animation-direction: alternate; | |||||
animation-play-state: running; | |||||
} | |||||
@keyframes emptyImage { | |||||
from { | |||||
transform: translateY(25rpx); | |||||
} | |||||
to { | |||||
transform: translateY(0rpx); | |||||
} | |||||
} | |||||
</style> | </style> |
@@ -17,7 +17,7 @@ | |||||
<view class="click-member" @click="onJumpRegisterMember"></view> | <view class="click-member" @click="onJumpRegisterMember"></view> | ||||
<!-- 签到 --> | <!-- 签到 --> | ||||
<view class="click-sign-in" @click="onFoodReservation"> | <view class="click-sign-in" @click="onFoodReservation"> | ||||
<view class="click-sign-in-text"> | |||||
<view class="click-sign-in-text" v-if="isHKApp"> | |||||
菜品预定 | 菜品预定 | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -81,6 +81,7 @@ | |||||
isShowActivity: false, //是否显示活动列表弹窗 | isShowActivity: false, //是否显示活动列表弹窗 | ||||
activityList: [], | activityList: [], | ||||
drinkInfo: {}, //积杯换饮 | drinkInfo: {}, //积杯换饮 | ||||
isHKApp: false, | |||||
carouselList: [ | carouselList: [ | ||||
'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/qw/goods/133058072111585205.jpg', | 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/qw/goods/133058072111585205.jpg', | ||||
'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/qw/goods/133058072178578510.jpg' | 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/qw/goods/133058072178578510.jpg' | ||||
@@ -96,6 +97,7 @@ | |||||
onShow() { | onShow() { | ||||
this.onFetchUserInfo(); | this.onFetchUserInfo(); | ||||
this.onFetchStoreStyles(); | this.onFetchStoreStyles(); | ||||
this.onHKApp(); | |||||
}, | }, | ||||
created() { | created() { | ||||
this.onFetchActivityData(); | this.onFetchActivityData(); | ||||
@@ -113,6 +115,15 @@ | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
/** | |||||
* 判断是否为海科微信小程序 | |||||
*/ | |||||
onHKApp() { | |||||
const appInfo = uni.getAccountInfoSync(); | |||||
if (appInfo.miniProgram.appId === 'wx67f7399628986bfb') { | |||||
this.isHKApp = true; | |||||
} | |||||
}, | |||||
onJumpOrder() { | onJumpOrder() { | ||||
uni.switchTab({ | uni.switchTab({ | ||||
url: '/pages/food/food' | url: '/pages/food/food' | ||||
@@ -299,11 +310,44 @@ | |||||
} | } | ||||
}, | }, | ||||
// 菜品预定 | // 菜品预定 | ||||
onFoodReservation() { | |||||
uni.navigateTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
onFoodReservation: debounce(function () { | |||||
if(!this.isHKApp) return; | |||||
getApp().onCheckUserSession().then( async (response) => { | |||||
const userStorage = getApp().onGetUserStorage(); | |||||
let memberRes = await memberAPI.selectMemberByOpenId(userStorage.openId); | |||||
if (memberRes.isSuccess) { | |||||
getApp().onSetUserStorage(memberRes.data); | |||||
if (memberRes.data.memberInfo_Id && memberRes.data.phone) { | |||||
this.memberInfo = memberRes.data; | |||||
uni.navigateTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
}); | |||||
} else { | |||||
uni.navigateTo({ | |||||
url: '/pages/memberRegister/memberRegister' | |||||
}); | |||||
uni.showToast({ | |||||
title: memberRes.msg || '请注册成为会员后进行预定!', | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
} | |||||
} else { | |||||
if (memberRes?.msg === '会员不存在') { | |||||
uni.navigateTo({ | |||||
url: '/pages/memberRegister/memberRegister' | |||||
}); | |||||
} | |||||
uni.showToast({ | |||||
title: '请注册成为会员后进行预定!', | |||||
duration: 2000, | |||||
icon: 'none', | |||||
mask: true | |||||
}); | |||||
} | |||||
}); | }); | ||||
} | |||||
}, 2000, true) | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
@@ -62,6 +62,22 @@ | |||||
</view> | </view> | ||||
<button class="member-regis-suffix member-register-btn" type="default" open-type="getPhoneNumber" @getphonenumber="onGetUserPhone">获取号码</button> | <button class="member-regis-suffix member-register-btn" type="default" open-type="getPhoneNumber" @getphonenumber="onGetUserPhone">获取号码</button> | ||||
</view> | </view> | ||||
<view class="member-regis-item" v-if="isHKApp"> | |||||
<view class="member-regis-prev"> | |||||
姓名 | |||||
</view> | |||||
<view class="member-regis-content member-regis-input"> | |||||
<input type="text" class="weui-input" placeholder="请输入真实姓名" v-model="userInfo.realName"/> | |||||
</view> | |||||
</view> | |||||
<view class="member-regis-item" v-if="isHKApp"> | |||||
<view class="member-regis-prev"> | |||||
工号 | |||||
</view> | |||||
<view class="member-regis-content member-regis-input"> | |||||
<input type="text" class="weui-input" placeholder="请输入员工卡号!" v-model="userInfo.staffNum"/> | |||||
</view> | |||||
</view> | |||||
</view> | </view> | ||||
<!-- 会员协议 --> | <!-- 会员协议 --> | ||||
<view class="membership-agreement"> | <view class="membership-agreement"> | ||||
@@ -92,13 +108,16 @@ | |||||
return { | return { | ||||
isAgree: false, | isAgree: false, | ||||
imageServer: getApp().globalData.imageServer, | imageServer: getApp().globalData.imageServer, | ||||
isHKApp: false, | |||||
userInfo: { | userInfo: { | ||||
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', | avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', | ||||
nickName: '', | nickName: '', | ||||
openId: '', | openId: '', | ||||
session_key: '', | session_key: '', | ||||
gender: '', | gender: '', | ||||
phone: '' | |||||
phone: '', | |||||
realName: '', | |||||
staffNum: '' | |||||
}, | }, | ||||
backgroundIMG: 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/gz/applet/133064030402220970.png' | backgroundIMG: 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/gz/applet/133064030402220970.png' | ||||
} | } | ||||
@@ -110,8 +129,18 @@ | |||||
}, | }, | ||||
onShow() { | onShow() { | ||||
this.onFetchStoreStyles(); | this.onFetchStoreStyles(); | ||||
this.onHKApp(); | |||||
}, | }, | ||||
methods: { | methods: { | ||||
/** | |||||
* 判断是否为海科微信小程序 | |||||
*/ | |||||
onHKApp() { | |||||
const appInfo = uni.getAccountInfoSync(); | |||||
if (appInfo.miniProgram.appId === 'wx67f7399628986bfb') { | |||||
this.isHKApp = true; | |||||
} | |||||
}, | |||||
onCheckboxChange() { | onCheckboxChange() { | ||||
this.isAgree = !this.isAgree; | this.isAgree = !this.isAgree; | ||||
}, | }, | ||||
@@ -140,12 +169,25 @@ | |||||
} else { | } else { | ||||
const user = getApp().onGetUserStorage(); | const user = getApp().onGetUserStorage(); | ||||
if (this.isAgree) { | if (this.isAgree) { | ||||
if (this.isHKApp) { | |||||
if (this.userInfo.realName.trim().length === 0 || this.userInfo.staffNum.trim().length === 0) { | |||||
uni.showToast({ | |||||
title: '姓名或卡号不能为空!', | |||||
icon: 'none', | |||||
duration: 2000, | |||||
mask: true | |||||
}); | |||||
return; | |||||
} | |||||
} | |||||
let registerJson = { | let registerJson = { | ||||
"nickName": getApp().encodeBPABase64(this.userInfo.nickName || '默认用户名'), | "nickName": getApp().encodeBPABase64(this.userInfo.nickName || '默认用户名'), | ||||
"sex": user.gender || 0, | "sex": user.gender || 0, | ||||
"headImgUrl": this.userInfo.avatarUrl || this.imageServer.concat('1160f23a-d924-4739-9806-156a26494674.png'), | "headImgUrl": this.userInfo.avatarUrl || this.imageServer.concat('1160f23a-d924-4739-9806-156a26494674.png'), | ||||
"platformMemberId": user.openId, | "platformMemberId": user.openId, | ||||
"phone": this.userInfo.phone | |||||
"phone": this.userInfo.phone, | |||||
"realName": this.userInfo.realName, | |||||
"staffNum": this.userInfo.staffNum | |||||
} | } | ||||
let registerRes = await memberAPI.insertOrUpdateMember(registerJson); | let registerRes = await memberAPI.insertOrUpdateMember(registerJson); | ||||
if (registerRes.isSuccess == true) { | if (registerRes.isSuccess == true) { | ||||
@@ -60,7 +60,7 @@ const store = new Vuex.Store({ | |||||
let price = 0; | let price = 0; | ||||
state.shoppingCart.forEach(food => { | state.shoppingCart.forEach(food => { | ||||
state.isVipMember ? price += (food.vipPrice * 100 * food.count) : price += (food.price * 100 * food.count); | state.isVipMember ? price += (food.vipPrice * 100 * food.count) : price += (food.price * 100 * food.count); | ||||
food.addtoFoodList.forEach(feed => { | |||||
food.addtoFoodList?.forEach(feed => { | |||||
feed.foods.forEach(addFood => { | feed.foods.forEach(addFood => { | ||||
if (addFood.count > 0) { | if (addFood.count > 0) { | ||||
price += (addFood.count * addFood.price * 100); | price += (addFood.count * addFood.price * 100); | ||||
@@ -86,7 +86,7 @@ const store = new Vuex.Store({ | |||||
//配料+1 | //配料+1 | ||||
onFeedCountPlus(state, payload) { | onFeedCountPlus(state, payload) { | ||||
let feed = payload; | let feed = payload; | ||||
state.currentGoods.addtoFoodList.forEach(item => { | |||||
state.currentGoods.addtoFoodList?.forEach(item => { | |||||
item.foods.forEach(addFood => { | item.foods.forEach(addFood => { | ||||
if (addFood.id === feed.id) { | if (addFood.id === feed.id) { | ||||
addFood.count += 1; | addFood.count += 1; | ||||
@@ -142,7 +142,7 @@ const store = new Vuex.Store({ | |||||
let stapleFood = payload; | let stapleFood = payload; | ||||
let index = state.shoppingCart.findIndex(item => item.sencondId === stapleFood.sencondId); | let index = state.shoppingCart.findIndex(item => item.sencondId === stapleFood.sencondId); | ||||
state.shoppingCart[index].count++; | state.shoppingCart[index].count++; | ||||
state.shoppingCart[index].addtoFoodList.forEach(item => { | |||||
state.shoppingCart[index].addtoFoodList?.forEach(item => { | |||||
item.foods[0].count += item.foods[0].sourceCount; | item.foods[0].count += item.foods[0].sourceCount; | ||||
}); | }); | ||||
this.commit('onOperatorFoodArray', { | this.commit('onOperatorFoodArray', { | ||||
@@ -178,7 +178,7 @@ const store = new Vuex.Store({ | |||||
}); | }); | ||||
if (state.shoppingCart[index].count > 1) { | if (state.shoppingCart[index].count > 1) { | ||||
state.shoppingCart[index].count--; | state.shoppingCart[index].count--; | ||||
state.shoppingCart[index].addtoFoodList.forEach(item => { | |||||
state.shoppingCart[index].addtoFoodList?.forEach(item => { | |||||
item.foods[0].count -= item.foods[0].sourceCount; | item.foods[0].count -= item.foods[0].sourceCount; | ||||
}); | }); | ||||
} else { | } else { | ||||
@@ -0,0 +1,21 @@ | |||||
## 1.2.4(2022-09-07) | |||||
小程序端由于 style 使用了对象导致报错,[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false) | |||||
## 1.2.3(2022-09-05) | |||||
- 修复 nvue 环境下,具有 tabBar 时,fab 组件下部位置无法正常获取 --window-bottom 的bug,详见:[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310) | |||||
## 1.2.2(2021-12-29) | |||||
- 更新 组件依赖 | |||||
## 1.2.1(2021-11-19) | |||||
- 修复 阴影颜色不正确的bug | |||||
## 1.2.0(2021-11-19) | |||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||||
## 1.1.1(2021-11-09) | |||||
- 新增 提供组件设计资源,组件样式调整 | |||||
## 1.1.0(2021-07-30) | |||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||||
## 1.0.7(2021-05-12) | |||||
- 新增 组件示例地址 | |||||
## 1.0.6(2021-02-05) | |||||
- 调整为uni_modules目录规范 | |||||
- 优化 按钮背景色调整 | |||||
- 优化 兼容pc端 |
@@ -0,0 +1,487 @@ | |||||
<template> | |||||
<view class="uni-cursor-point"> | |||||
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{ | |||||
'uni-fab--leftBottom': leftBottom, | |||||
'uni-fab--rightBottom': rightBottom, | |||||
'uni-fab--leftTop': leftTop, | |||||
'uni-fab--rightTop': rightTop | |||||
}" class="uni-fab" | |||||
:style="nvueBottom" | |||||
> | |||||
<view :class="{ | |||||
'uni-fab__content--left': horizontal === 'left', | |||||
'uni-fab__content--right': horizontal === 'right', | |||||
'uni-fab__content--flexDirection': direction === 'vertical', | |||||
'uni-fab__content--flexDirectionStart': flexDirectionStart, | |||||
'uni-fab__content--flexDirectionEnd': flexDirectionEnd, | |||||
'uni-fab__content--other-platform': !isAndroidNvue | |||||
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" | |||||
class="uni-fab__content" elevation="5"> | |||||
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> | |||||
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" | |||||
class="uni-fab__item" @click="_onItemClick(index, item)"> | |||||
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" | |||||
mode="aspectFit" /> | |||||
<text class="uni-fab__item-text" | |||||
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> | |||||
</view> | |||||
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> | |||||
</view> | |||||
</view> | |||||
<view :class="{ | |||||
'uni-fab__circle--leftBottom': leftBottom, | |||||
'uni-fab__circle--rightBottom': rightBottom, | |||||
'uni-fab__circle--leftTop': leftTop, | |||||
'uni-fab__circle--rightTop': rightTop, | |||||
'uni-fab__content--other-platform': !isAndroidNvue | |||||
}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick"> | |||||
<uni-icons class="fab-circle-icon" type="plusempty" :color="styles.iconColor" size="32" | |||||
:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons> | |||||
<!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> | |||||
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> --> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
let platform = 'other' | |||||
// #ifdef APP-NVUE | |||||
platform = uni.getSystemInfoSync().platform | |||||
// #endif | |||||
/** | |||||
* Fab 悬浮按钮 | |||||
* @description 点击可展开一个图形按钮菜单 | |||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=144 | |||||
* @property {Object} pattern 可选样式配置项 | |||||
* @property {Object} horizontal = [left | right] 水平对齐方式 | |||||
* @value left 左对齐 | |||||
* @value right 右对齐 | |||||
* @property {Object} vertical = [bottom | top] 垂直对齐方式 | |||||
* @value bottom 下对齐 | |||||
* @value top 上对齐 | |||||
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式 | |||||
* @value horizontal 水平显示 | |||||
* @value vertical 垂直显示 | |||||
* @property {Array} content 展开菜单内容配置项 | |||||
* @property {Boolean} popMenu 是否使用弹出菜单 | |||||
* @event {Function} trigger 展开菜单点击事件,返回点击信息 | |||||
* @event {Function} fabClick 悬浮按钮点击事件 | |||||
*/ | |||||
export default { | |||||
name: 'UniFab', | |||||
emits: ['fabClick', 'trigger'], | |||||
props: { | |||||
pattern: { | |||||
type: Object, | |||||
default () { | |||||
return {} | |||||
} | |||||
}, | |||||
horizontal: { | |||||
type: String, | |||||
default: 'left' | |||||
}, | |||||
vertical: { | |||||
type: String, | |||||
default: 'bottom' | |||||
}, | |||||
direction: { | |||||
type: String, | |||||
default: 'horizontal' | |||||
}, | |||||
content: { | |||||
type: Array, | |||||
default () { | |||||
return [] | |||||
} | |||||
}, | |||||
show: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
popMenu: { | |||||
type: Boolean, | |||||
default: true | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
fabShow: false, | |||||
isShow: false, | |||||
isAndroidNvue: platform === 'android', | |||||
styles: { | |||||
color: '#3c3e49', | |||||
selectedColor: '#007AFF', | |||||
backgroundColor: '#fff', | |||||
buttonColor: '#007AFF', | |||||
iconColor: '#fff' | |||||
} | |||||
} | |||||
}, | |||||
computed: { | |||||
contentWidth(e) { | |||||
return (this.content.length + 1) * 55 + 15 + 'px' | |||||
}, | |||||
contentWidthMin() { | |||||
return '55px' | |||||
}, | |||||
// 动态计算宽度 | |||||
boxWidth() { | |||||
return this.getPosition(3, 'horizontal') | |||||
}, | |||||
// 动态计算高度 | |||||
boxHeight() { | |||||
return this.getPosition(3, 'vertical') | |||||
}, | |||||
// 计算左下位置 | |||||
leftBottom() { | |||||
return this.getPosition(0, 'left', 'bottom') | |||||
}, | |||||
// 计算右下位置 | |||||
rightBottom() { | |||||
return this.getPosition(0, 'right', 'bottom') | |||||
}, | |||||
// 计算左上位置 | |||||
leftTop() { | |||||
return this.getPosition(0, 'left', 'top') | |||||
}, | |||||
rightTop() { | |||||
return this.getPosition(0, 'right', 'top') | |||||
}, | |||||
flexDirectionStart() { | |||||
return this.getPosition(1, 'vertical', 'top') | |||||
}, | |||||
flexDirectionEnd() { | |||||
return this.getPosition(1, 'vertical', 'bottom') | |||||
}, | |||||
horizontalLeft() { | |||||
return this.getPosition(2, 'horizontal', 'left') | |||||
}, | |||||
horizontalRight() { | |||||
return this.getPosition(2, 'horizontal', 'right') | |||||
}, | |||||
// 计算 nvue bottom | |||||
nvueBottom() { | |||||
const safeBottom = uni.getSystemInfoSync().windowBottom; | |||||
// #ifdef APP-NVUE | |||||
return 30 + safeBottom | |||||
// #endif | |||||
// #ifndef APP-NVUE | |||||
return 30 | |||||
// #endif | |||||
} | |||||
}, | |||||
watch: { | |||||
pattern: { | |||||
handler(val, oldVal) { | |||||
this.styles = Object.assign({}, this.styles, val) | |||||
}, | |||||
deep: true | |||||
} | |||||
}, | |||||
created() { | |||||
this.isShow = this.show | |||||
if (this.top === 0) { | |||||
this.fabShow = true | |||||
} | |||||
// 初始化样式 | |||||
this.styles = Object.assign({}, this.styles, this.pattern) | |||||
}, | |||||
methods: { | |||||
_onClick() { | |||||
this.$emit('fabClick') | |||||
if (!this.popMenu) { | |||||
return | |||||
} | |||||
this.isShow = !this.isShow | |||||
}, | |||||
open() { | |||||
this.isShow = true | |||||
}, | |||||
close() { | |||||
this.isShow = false | |||||
}, | |||||
/** | |||||
* 按钮点击事件 | |||||
*/ | |||||
_onItemClick(index, item) { | |||||
this.$emit('trigger', { | |||||
index, | |||||
item | |||||
}) | |||||
}, | |||||
/** | |||||
* 获取 位置信息 | |||||
*/ | |||||
getPosition(types, paramA, paramB) { | |||||
if (types === 0) { | |||||
return this.horizontal === paramA && this.vertical === paramB | |||||
} else if (types === 1) { | |||||
return this.direction === paramA && this.vertical === paramB | |||||
} else if (types === 2) { | |||||
return this.direction === paramA && this.horizontal === paramB | |||||
} else { | |||||
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" > | |||||
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default; | |||||
.uni-fab { | |||||
position: fixed; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
justify-content: center; | |||||
align-items: center; | |||||
z-index: 10; | |||||
border-radius: 45px; | |||||
box-shadow: $uni-shadow-base; | |||||
} | |||||
.uni-cursor-point { | |||||
/* #ifdef H5 */ | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
} | |||||
.uni-fab--active { | |||||
opacity: 1; | |||||
} | |||||
.uni-fab--leftBottom { | |||||
left: 15px; | |||||
bottom: 30px; | |||||
/* #ifdef H5 */ | |||||
left: calc(15px + var(--window-left)); | |||||
bottom: calc(30px + var(--window-bottom)); | |||||
/* #endif */ | |||||
// padding: 10px; | |||||
} | |||||
.uni-fab--leftTop { | |||||
left: 15px; | |||||
top: 30px; | |||||
/* #ifdef H5 */ | |||||
left: calc(15px + var(--window-left)); | |||||
top: calc(30px + var(--window-top)); | |||||
/* #endif */ | |||||
// padding: 10px; | |||||
} | |||||
.uni-fab--rightBottom { | |||||
right: 15px; | |||||
bottom: 30px; | |||||
/* #ifdef H5 */ | |||||
right: calc(15px + var(--window-right)); | |||||
bottom: calc(30px + var(--window-bottom)); | |||||
/* #endif */ | |||||
// padding: 10px; | |||||
} | |||||
.uni-fab--rightTop { | |||||
right: 15px; | |||||
top: 30px; | |||||
/* #ifdef H5 */ | |||||
right: calc(15px + var(--window-right)); | |||||
top: calc(30px + var(--window-top)); | |||||
/* #endif */ | |||||
// padding: 10px; | |||||
} | |||||
.uni-fab__circle { | |||||
position: fixed; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 55px; | |||||
height: 55px; | |||||
background-color: #3c3e49; | |||||
border-radius: 45px; | |||||
z-index: 11; | |||||
// box-shadow: $uni-shadow-base; | |||||
} | |||||
.uni-fab__circle--leftBottom { | |||||
left: 15px; | |||||
bottom: 30px; | |||||
/* #ifdef H5 */ | |||||
left: calc(15px + var(--window-left)); | |||||
bottom: calc(30px + var(--window-bottom)); | |||||
/* #endif */ | |||||
} | |||||
.uni-fab__circle--leftTop { | |||||
left: 15px; | |||||
top: 30px; | |||||
/* #ifdef H5 */ | |||||
left: calc(15px + var(--window-left)); | |||||
top: calc(30px + var(--window-top)); | |||||
/* #endif */ | |||||
} | |||||
.uni-fab__circle--rightBottom { | |||||
right: 15px; | |||||
bottom: 30px; | |||||
/* #ifdef H5 */ | |||||
right: calc(15px + var(--window-right)); | |||||
bottom: calc(30px + var(--window-bottom)); | |||||
/* #endif */ | |||||
} | |||||
.uni-fab__circle--rightTop { | |||||
right: 15px; | |||||
top: 30px; | |||||
/* #ifdef H5 */ | |||||
right: calc(15px + var(--window-right)); | |||||
top: calc(30px + var(--window-top)); | |||||
/* #endif */ | |||||
} | |||||
.uni-fab__circle--left { | |||||
left: 0; | |||||
} | |||||
.uni-fab__circle--right { | |||||
right: 0; | |||||
} | |||||
.uni-fab__circle--top { | |||||
top: 0; | |||||
} | |||||
.uni-fab__circle--bottom { | |||||
bottom: 0; | |||||
} | |||||
.uni-fab__plus { | |||||
font-weight: bold; | |||||
} | |||||
// .fab-circle-v { | |||||
// position: absolute; | |||||
// width: 2px; | |||||
// height: 24px; | |||||
// left: 0; | |||||
// top: 0; | |||||
// right: 0; | |||||
// bottom: 0; | |||||
// /* #ifndef APP-NVUE */ | |||||
// margin: auto; | |||||
// /* #endif */ | |||||
// background-color: white; | |||||
// transform: rotate(0deg); | |||||
// transition: transform 0.3s; | |||||
// } | |||||
// .fab-circle-h { | |||||
// position: absolute; | |||||
// width: 24px; | |||||
// height: 2px; | |||||
// left: 0; | |||||
// top: 0; | |||||
// right: 0; | |||||
// bottom: 0; | |||||
// /* #ifndef APP-NVUE */ | |||||
// margin: auto; | |||||
// /* #endif */ | |||||
// background-color: white; | |||||
// transform: rotate(0deg); | |||||
// transition: transform 0.3s; | |||||
// } | |||||
.fab-circle-icon { | |||||
transform: rotate(0deg); | |||||
transition: transform 0.3s; | |||||
font-weight: 200; | |||||
} | |||||
.uni-fab__plus--active { | |||||
transform: rotate(135deg); | |||||
} | |||||
.uni-fab__content { | |||||
/* #ifndef APP-NVUE */ | |||||
box-sizing: border-box; | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
border-radius: 55px; | |||||
overflow: hidden; | |||||
transition-property: width, height; | |||||
transition-duration: 0.2s; | |||||
width: 55px; | |||||
border-color: #DDDDDD; | |||||
border-width: 1rpx; | |||||
border-style: solid; | |||||
} | |||||
.uni-fab__content--other-platform { | |||||
border-width: 0px; | |||||
box-shadow: $uni-shadow-base; | |||||
} | |||||
.uni-fab__content--left { | |||||
justify-content: flex-start; | |||||
} | |||||
.uni-fab__content--right { | |||||
justify-content: flex-end; | |||||
} | |||||
.uni-fab__content--flexDirection { | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
} | |||||
.uni-fab__content--flexDirectionStart { | |||||
flex-direction: column; | |||||
justify-content: flex-start; | |||||
} | |||||
.uni-fab__content--flexDirectionEnd { | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
} | |||||
.uni-fab__item { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 55px; | |||||
height: 55px; | |||||
opacity: 0; | |||||
transition: opacity 0.2s; | |||||
} | |||||
.uni-fab__item--active { | |||||
opacity: 1; | |||||
} | |||||
.uni-fab__item-image { | |||||
width: 20px; | |||||
height: 20px; | |||||
margin-bottom: 4px; | |||||
} | |||||
.uni-fab__item-text { | |||||
color: #FFFFFF; | |||||
font-size: 12px; | |||||
line-height: 12px; | |||||
margin-top: 2px; | |||||
} | |||||
.uni-fab__item--first { | |||||
width: 55px; | |||||
} | |||||
</style> |
@@ -0,0 +1,84 @@ | |||||
{ | |||||
"id": "uni-fab", | |||||
"displayName": "uni-fab 悬浮按钮", | |||||
"version": "1.2.4", | |||||
"description": "悬浮按钮 fab button ,点击可展开一个图标按钮菜单。", | |||||
"keywords": [ | |||||
"uni-ui", | |||||
"uniui", | |||||
"按钮", | |||||
"悬浮按钮", | |||||
"fab" | |||||
], | |||||
"repository": "https://github.com/dcloudio/uni-ui", | |||||
"engines": { | |||||
"HBuilderX": "" | |||||
}, | |||||
"directories": { | |||||
"example": "../../temps/example_temps" | |||||
}, | |||||
"dcloudext": { | |||||
"sale": { | |||||
"regular": { | |||||
"price": "0.00" | |||||
}, | |||||
"sourcecode": { | |||||
"price": "0.00" | |||||
} | |||||
}, | |||||
"contact": { | |||||
"qq": "" | |||||
}, | |||||
"declaration": { | |||||
"ads": "无", | |||||
"data": "无", | |||||
"permissions": "无" | |||||
}, | |||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
"type": "component-vue" | |||||
}, | |||||
"uni_modules": { | |||||
"dependencies": ["uni-scss","uni-icons"], | |||||
"encrypt": [], | |||||
"platforms": { | |||||
"cloud": { | |||||
"tcb": "y", | |||||
"aliyun": "y" | |||||
}, | |||||
"client": { | |||||
"App": { | |||||
"app-vue": "y", | |||||
"app-nvue": "y" | |||||
}, | |||||
"H5-mobile": { | |||||
"Safari": "y", | |||||
"Android Browser": "y", | |||||
"微信浏览器(Android)": "y", | |||||
"QQ浏览器(Android)": "y" | |||||
}, | |||||
"H5-pc": { | |||||
"Chrome": "y", | |||||
"IE": "y", | |||||
"Edge": "y", | |||||
"Firefox": "y", | |||||
"Safari": "y" | |||||
}, | |||||
"小程序": { | |||||
"微信": "y", | |||||
"阿里": "y", | |||||
"百度": "y", | |||||
"字节跳动": "y", | |||||
"QQ": "y" | |||||
}, | |||||
"快应用": { | |||||
"华为": "u", | |||||
"联盟": "u" | |||||
}, | |||||
"Vue": { | |||||
"vue2": "y", | |||||
"vue3": "y" | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,9 @@ | |||||
## Fab 悬浮按钮 | |||||
> **组件名:uni-fab** | |||||
> 代码块: `uFab` | |||||
点击可展开一个图形按钮菜单 | |||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@@ -0,0 +1,22 @@ | |||||
## 1.3.5(2022-01-24) | |||||
- 优化 size 属性可以传入不带单位的字符串数值 | |||||
## 1.3.4(2022-01-24) | |||||
- 优化 size 支持其他单位 | |||||
## 1.3.3(2022-01-17) | |||||
- 修复 nvue 有些图标不显示的bug,兼容老版本图标 | |||||
## 1.3.2(2021-12-01) | |||||
- 优化 示例可复制图标名称 | |||||
## 1.3.1(2021-11-23) | |||||
- 优化 兼容旧组件 type 值 | |||||
## 1.3.0(2021-11-19) | |||||
- 新增 更多图标 | |||||
- 优化 自定义图标使用方式 | |||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) | |||||
## 1.1.7(2021-11-08) | |||||
## 1.2.0(2021-07-30) | |||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||||
## 1.1.5(2021-05-12) | |||||
- 新增 组件示例地址 | |||||
## 1.1.4(2021-02-05) | |||||
- 调整为uni_modules目录规范 |
@@ -0,0 +1,96 @@ | |||||
<template> | |||||
<!-- #ifdef APP-NVUE --> | |||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text> | |||||
<!-- #endif --> | |||||
<!-- #ifndef APP-NVUE --> | |||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> | |||||
<!-- #endif --> | |||||
</template> | |||||
<script> | |||||
import icons from './icons.js'; | |||||
const getVal = (val) => { | |||||
const reg = /^[0-9]*$/g | |||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val; | |||||
} | |||||
// #ifdef APP-NVUE | |||||
var domModule = weex.requireModule('dom'); | |||||
import iconUrl from './uniicons.ttf' | |||||
domModule.addRule('fontFace', { | |||||
'fontFamily': "uniicons", | |||||
'src': "url('"+iconUrl+"')" | |||||
}); | |||||
// #endif | |||||
/** | |||||
* Icons 图标 | |||||
* @description 用于展示 icons 图标 | |||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 | |||||
* @property {Number} size 图标大小 | |||||
* @property {String} type 图标图案,参考示例 | |||||
* @property {String} color 图标颜色 | |||||
* @property {String} customPrefix 自定义图标 | |||||
* @event {Function} click 点击 Icon 触发事件 | |||||
*/ | |||||
export default { | |||||
name: 'UniIcons', | |||||
emits:['click'], | |||||
props: { | |||||
type: { | |||||
type: String, | |||||
default: '' | |||||
}, | |||||
color: { | |||||
type: String, | |||||
default: '#333333' | |||||
}, | |||||
size: { | |||||
type: [Number, String], | |||||
default: 16 | |||||
}, | |||||
customPrefix:{ | |||||
type: String, | |||||
default: '' | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
icons: icons.glyphs | |||||
} | |||||
}, | |||||
computed:{ | |||||
unicode(){ | |||||
let code = this.icons.find(v=>v.font_class === this.type) | |||||
if(code){ | |||||
return unescape(`%u${code.unicode}`) | |||||
} | |||||
return '' | |||||
}, | |||||
iconSize(){ | |||||
return getVal(this.size) | |||||
} | |||||
}, | |||||
methods: { | |||||
_onClick() { | |||||
this.$emit('click') | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss"> | |||||
/* #ifndef APP-NVUE */ | |||||
@import './uniicons.css'; | |||||
@font-face { | |||||
font-family: uniicons; | |||||
src: url('./uniicons.ttf') format('truetype'); | |||||
} | |||||
/* #endif */ | |||||
.uni-icons { | |||||
font-family: uniicons; | |||||
text-decoration: none; | |||||
text-align: center; | |||||
} | |||||
</style> |
@@ -0,0 +1,663 @@ | |||||
.uniui-color:before { | |||||
content: "\e6cf"; | |||||
} | |||||
.uniui-wallet:before { | |||||
content: "\e6b1"; | |||||
} | |||||
.uniui-settings-filled:before { | |||||
content: "\e6ce"; | |||||
} | |||||
.uniui-auth-filled:before { | |||||
content: "\e6cc"; | |||||
} | |||||
.uniui-shop-filled:before { | |||||
content: "\e6cd"; | |||||
} | |||||
.uniui-staff-filled:before { | |||||
content: "\e6cb"; | |||||
} | |||||
.uniui-vip-filled:before { | |||||
content: "\e6c6"; | |||||
} | |||||
.uniui-plus-filled:before { | |||||
content: "\e6c7"; | |||||
} | |||||
.uniui-folder-add-filled:before { | |||||
content: "\e6c8"; | |||||
} | |||||
.uniui-color-filled:before { | |||||
content: "\e6c9"; | |||||
} | |||||
.uniui-tune-filled:before { | |||||
content: "\e6ca"; | |||||
} | |||||
.uniui-calendar-filled:before { | |||||
content: "\e6c0"; | |||||
} | |||||
.uniui-notification-filled:before { | |||||
content: "\e6c1"; | |||||
} | |||||
.uniui-wallet-filled:before { | |||||
content: "\e6c2"; | |||||
} | |||||
.uniui-medal-filled:before { | |||||
content: "\e6c3"; | |||||
} | |||||
.uniui-gift-filled:before { | |||||
content: "\e6c4"; | |||||
} | |||||
.uniui-fire-filled:before { | |||||
content: "\e6c5"; | |||||
} | |||||
.uniui-refreshempty:before { | |||||
content: "\e6bf"; | |||||
} | |||||
.uniui-location-filled:before { | |||||
content: "\e6af"; | |||||
} | |||||
.uniui-person-filled:before { | |||||
content: "\e69d"; | |||||
} | |||||
.uniui-personadd-filled:before { | |||||
content: "\e698"; | |||||
} | |||||
.uniui-back:before { | |||||
content: "\e6b9"; | |||||
} | |||||
.uniui-forward:before { | |||||
content: "\e6ba"; | |||||
} | |||||
.uniui-arrow-right:before { | |||||
content: "\e6bb"; | |||||
} | |||||
.uniui-arrowthinright:before { | |||||
content: "\e6bb"; | |||||
} | |||||
.uniui-arrow-left:before { | |||||
content: "\e6bc"; | |||||
} | |||||
.uniui-arrowthinleft:before { | |||||
content: "\e6bc"; | |||||
} | |||||
.uniui-arrow-up:before { | |||||
content: "\e6bd"; | |||||
} | |||||
.uniui-arrowthinup:before { | |||||
content: "\e6bd"; | |||||
} | |||||
.uniui-arrow-down:before { | |||||
content: "\e6be"; | |||||
} | |||||
.uniui-arrowthindown:before { | |||||
content: "\e6be"; | |||||
} | |||||
.uniui-bottom:before { | |||||
content: "\e6b8"; | |||||
} | |||||
.uniui-arrowdown:before { | |||||
content: "\e6b8"; | |||||
} | |||||
.uniui-right:before { | |||||
content: "\e6b5"; | |||||
} | |||||
.uniui-arrowright:before { | |||||
content: "\e6b5"; | |||||
} | |||||
.uniui-top:before { | |||||
content: "\e6b6"; | |||||
} | |||||
.uniui-arrowup:before { | |||||
content: "\e6b6"; | |||||
} | |||||
.uniui-left:before { | |||||
content: "\e6b7"; | |||||
} | |||||
.uniui-arrowleft:before { | |||||
content: "\e6b7"; | |||||
} | |||||
.uniui-eye:before { | |||||
content: "\e651"; | |||||
} | |||||
.uniui-eye-filled:before { | |||||
content: "\e66a"; | |||||
} | |||||
.uniui-eye-slash:before { | |||||
content: "\e6b3"; | |||||
} | |||||
.uniui-eye-slash-filled:before { | |||||
content: "\e6b4"; | |||||
} | |||||
.uniui-info-filled:before { | |||||
content: "\e649"; | |||||
} | |||||
.uniui-reload:before { | |||||
content: "\e6b2"; | |||||
} | |||||
.uniui-micoff-filled:before { | |||||
content: "\e6b0"; | |||||
} | |||||
.uniui-map-pin-ellipse:before { | |||||
content: "\e6ac"; | |||||
} | |||||
.uniui-map-pin:before { | |||||
content: "\e6ad"; | |||||
} | |||||
.uniui-location:before { | |||||
content: "\e6ae"; | |||||
} | |||||
.uniui-starhalf:before { | |||||
content: "\e683"; | |||||
} | |||||
.uniui-star:before { | |||||
content: "\e688"; | |||||
} | |||||
.uniui-star-filled:before { | |||||
content: "\e68f"; | |||||
} | |||||
.uniui-calendar:before { | |||||
content: "\e6a0"; | |||||
} | |||||
.uniui-fire:before { | |||||
content: "\e6a1"; | |||||
} | |||||
.uniui-medal:before { | |||||
content: "\e6a2"; | |||||
} | |||||
.uniui-font:before { | |||||
content: "\e6a3"; | |||||
} | |||||
.uniui-gift:before { | |||||
content: "\e6a4"; | |||||
} | |||||
.uniui-link:before { | |||||
content: "\e6a5"; | |||||
} | |||||
.uniui-notification:before { | |||||
content: "\e6a6"; | |||||
} | |||||
.uniui-staff:before { | |||||
content: "\e6a7"; | |||||
} | |||||
.uniui-vip:before { | |||||
content: "\e6a8"; | |||||
} | |||||
.uniui-folder-add:before { | |||||
content: "\e6a9"; | |||||
} | |||||
.uniui-tune:before { | |||||
content: "\e6aa"; | |||||
} | |||||
.uniui-auth:before { | |||||
content: "\e6ab"; | |||||
} | |||||
.uniui-person:before { | |||||
content: "\e699"; | |||||
} | |||||
.uniui-email-filled:before { | |||||
content: "\e69a"; | |||||
} | |||||
.uniui-phone-filled:before { | |||||
content: "\e69b"; | |||||
} | |||||
.uniui-phone:before { | |||||
content: "\e69c"; | |||||
} | |||||
.uniui-email:before { | |||||
content: "\e69e"; | |||||
} | |||||
.uniui-personadd:before { | |||||
content: "\e69f"; | |||||
} | |||||
.uniui-chatboxes-filled:before { | |||||
content: "\e692"; | |||||
} | |||||
.uniui-contact:before { | |||||
content: "\e693"; | |||||
} | |||||
.uniui-chatbubble-filled:before { | |||||
content: "\e694"; | |||||
} | |||||
.uniui-contact-filled:before { | |||||
content: "\e695"; | |||||
} | |||||
.uniui-chatboxes:before { | |||||
content: "\e696"; | |||||
} | |||||
.uniui-chatbubble:before { | |||||
content: "\e697"; | |||||
} | |||||
.uniui-upload-filled:before { | |||||
content: "\e68e"; | |||||
} | |||||
.uniui-upload:before { | |||||
content: "\e690"; | |||||
} | |||||
.uniui-weixin:before { | |||||
content: "\e691"; | |||||
} | |||||
.uniui-compose:before { | |||||
content: "\e67f"; | |||||
} | |||||
.uniui-qq:before { | |||||
content: "\e680"; | |||||
} | |||||
.uniui-download-filled:before { | |||||
content: "\e681"; | |||||
} | |||||
.uniui-pyq:before { | |||||
content: "\e682"; | |||||
} | |||||
.uniui-sound:before { | |||||
content: "\e684"; | |||||
} | |||||
.uniui-trash-filled:before { | |||||
content: "\e685"; | |||||
} | |||||
.uniui-sound-filled:before { | |||||
content: "\e686"; | |||||
} | |||||
.uniui-trash:before { | |||||
content: "\e687"; | |||||
} | |||||
.uniui-videocam-filled:before { | |||||
content: "\e689"; | |||||
} | |||||
.uniui-spinner-cycle:before { | |||||
content: "\e68a"; | |||||
} | |||||
.uniui-weibo:before { | |||||
content: "\e68b"; | |||||
} | |||||
.uniui-videocam:before { | |||||
content: "\e68c"; | |||||
} | |||||
.uniui-download:before { | |||||
content: "\e68d"; | |||||
} | |||||
.uniui-help:before { | |||||
content: "\e679"; | |||||
} | |||||
.uniui-navigate-filled:before { | |||||
content: "\e67a"; | |||||
} | |||||
.uniui-plusempty:before { | |||||
content: "\e67b"; | |||||
} | |||||
.uniui-smallcircle:before { | |||||
content: "\e67c"; | |||||
} | |||||
.uniui-minus-filled:before { | |||||
content: "\e67d"; | |||||
} | |||||
.uniui-micoff:before { | |||||
content: "\e67e"; | |||||
} | |||||
.uniui-closeempty:before { | |||||
content: "\e66c"; | |||||
} | |||||
.uniui-clear:before { | |||||
content: "\e66d"; | |||||
} | |||||
.uniui-navigate:before { | |||||
content: "\e66e"; | |||||
} | |||||
.uniui-minus:before { | |||||
content: "\e66f"; | |||||
} | |||||
.uniui-image:before { | |||||
content: "\e670"; | |||||
} | |||||
.uniui-mic:before { | |||||
content: "\e671"; | |||||
} | |||||
.uniui-paperplane:before { | |||||
content: "\e672"; | |||||
} | |||||
.uniui-close:before { | |||||
content: "\e673"; | |||||
} | |||||
.uniui-help-filled:before { | |||||
content: "\e674"; | |||||
} | |||||
.uniui-paperplane-filled:before { | |||||
content: "\e675"; | |||||
} | |||||
.uniui-plus:before { | |||||
content: "\e676"; | |||||
} | |||||
.uniui-mic-filled:before { | |||||
content: "\e677"; | |||||
} | |||||
.uniui-image-filled:before { | |||||
content: "\e678"; | |||||
} | |||||
.uniui-locked-filled:before { | |||||
content: "\e668"; | |||||
} | |||||
.uniui-info:before { | |||||
content: "\e669"; | |||||
} | |||||
.uniui-locked:before { | |||||
content: "\e66b"; | |||||
} | |||||
.uniui-camera-filled:before { | |||||
content: "\e658"; | |||||
} | |||||
.uniui-chat-filled:before { | |||||
content: "\e659"; | |||||
} | |||||
.uniui-camera:before { | |||||
content: "\e65a"; | |||||
} | |||||
.uniui-circle:before { | |||||
content: "\e65b"; | |||||
} | |||||
.uniui-checkmarkempty:before { | |||||
content: "\e65c"; | |||||
} | |||||
.uniui-chat:before { | |||||
content: "\e65d"; | |||||
} | |||||
.uniui-circle-filled:before { | |||||
content: "\e65e"; | |||||
} | |||||
.uniui-flag:before { | |||||
content: "\e65f"; | |||||
} | |||||
.uniui-flag-filled:before { | |||||
content: "\e660"; | |||||
} | |||||
.uniui-gear-filled:before { | |||||
content: "\e661"; | |||||
} | |||||
.uniui-home:before { | |||||
content: "\e662"; | |||||
} | |||||
.uniui-home-filled:before { | |||||
content: "\e663"; | |||||
} | |||||
.uniui-gear:before { | |||||
content: "\e664"; | |||||
} | |||||
.uniui-smallcircle-filled:before { | |||||
content: "\e665"; | |||||
} | |||||
.uniui-map-filled:before { | |||||
content: "\e666"; | |||||
} | |||||
.uniui-map:before { | |||||
content: "\e667"; | |||||
} | |||||
.uniui-refresh-filled:before { | |||||
content: "\e656"; | |||||
} | |||||
.uniui-refresh:before { | |||||
content: "\e657"; | |||||
} | |||||
.uniui-cloud-upload:before { | |||||
content: "\e645"; | |||||
} | |||||
.uniui-cloud-download-filled:before { | |||||
content: "\e646"; | |||||
} | |||||
.uniui-cloud-download:before { | |||||
content: "\e647"; | |||||
} | |||||
.uniui-cloud-upload-filled:before { | |||||
content: "\e648"; | |||||
} | |||||
.uniui-redo:before { | |||||
content: "\e64a"; | |||||
} | |||||
.uniui-images-filled:before { | |||||
content: "\e64b"; | |||||
} | |||||
.uniui-undo-filled:before { | |||||
content: "\e64c"; | |||||
} | |||||
.uniui-more:before { | |||||
content: "\e64d"; | |||||
} | |||||
.uniui-more-filled:before { | |||||
content: "\e64e"; | |||||
} | |||||
.uniui-undo:before { | |||||
content: "\e64f"; | |||||
} | |||||
.uniui-images:before { | |||||
content: "\e650"; | |||||
} | |||||
.uniui-paperclip:before { | |||||
content: "\e652"; | |||||
} | |||||
.uniui-settings:before { | |||||
content: "\e653"; | |||||
} | |||||
.uniui-search:before { | |||||
content: "\e654"; | |||||
} | |||||
.uniui-redo-filled:before { | |||||
content: "\e655"; | |||||
} | |||||
.uniui-list:before { | |||||
content: "\e644"; | |||||
} | |||||
.uniui-mail-open-filled:before { | |||||
content: "\e63a"; | |||||
} | |||||
.uniui-hand-down-filled:before { | |||||
content: "\e63c"; | |||||
} | |||||
.uniui-hand-down:before { | |||||
content: "\e63d"; | |||||
} | |||||
.uniui-hand-up-filled:before { | |||||
content: "\e63e"; | |||||
} | |||||
.uniui-hand-up:before { | |||||
content: "\e63f"; | |||||
} | |||||
.uniui-heart-filled:before { | |||||
content: "\e641"; | |||||
} | |||||
.uniui-mail-open:before { | |||||
content: "\e643"; | |||||
} | |||||
.uniui-heart:before { | |||||
content: "\e639"; | |||||
} | |||||
.uniui-loop:before { | |||||
content: "\e633"; | |||||
} | |||||
.uniui-pulldown:before { | |||||
content: "\e632"; | |||||
} | |||||
.uniui-scan:before { | |||||
content: "\e62a"; | |||||
} | |||||
.uniui-bars:before { | |||||
content: "\e627"; | |||||
} | |||||
.uniui-cart-filled:before { | |||||
content: "\e629"; | |||||
} | |||||
.uniui-checkbox:before { | |||||
content: "\e62b"; | |||||
} | |||||
.uniui-checkbox-filled:before { | |||||
content: "\e62c"; | |||||
} | |||||
.uniui-shop:before { | |||||
content: "\e62f"; | |||||
} | |||||
.uniui-headphones:before { | |||||
content: "\e630"; | |||||
} | |||||
.uniui-cart:before { | |||||
content: "\e631"; | |||||
} |
@@ -0,0 +1,86 @@ | |||||
{ | |||||
"id": "uni-icons", | |||||
"displayName": "uni-icons 图标", | |||||
"version": "1.3.5", | |||||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", | |||||
"keywords": [ | |||||
"uni-ui", | |||||
"uniui", | |||||
"icon", | |||||
"图标" | |||||
], | |||||
"repository": "https://github.com/dcloudio/uni-ui", | |||||
"engines": { | |||||
"HBuilderX": "^3.2.14" | |||||
}, | |||||
"directories": { | |||||
"example": "../../temps/example_temps" | |||||
}, | |||||
"dcloudext": { | |||||
"category": [ | |||||
"前端组件", | |||||
"通用组件" | |||||
], | |||||
"sale": { | |||||
"regular": { | |||||
"price": "0.00" | |||||
}, | |||||
"sourcecode": { | |||||
"price": "0.00" | |||||
} | |||||
}, | |||||
"contact": { | |||||
"qq": "" | |||||
}, | |||||
"declaration": { | |||||
"ads": "无", | |||||
"data": "无", | |||||
"permissions": "无" | |||||
}, | |||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||||
}, | |||||
"uni_modules": { | |||||
"dependencies": ["uni-scss"], | |||||
"encrypt": [], | |||||
"platforms": { | |||||
"cloud": { | |||||
"tcb": "y", | |||||
"aliyun": "y" | |||||
}, | |||||
"client": { | |||||
"App": { | |||||
"app-vue": "y", | |||||
"app-nvue": "y" | |||||
}, | |||||
"H5-mobile": { | |||||
"Safari": "y", | |||||
"Android Browser": "y", | |||||
"微信浏览器(Android)": "y", | |||||
"QQ浏览器(Android)": "y" | |||||
}, | |||||
"H5-pc": { | |||||
"Chrome": "y", | |||||
"IE": "y", | |||||
"Edge": "y", | |||||
"Firefox": "y", | |||||
"Safari": "y" | |||||
}, | |||||
"小程序": { | |||||
"微信": "y", | |||||
"阿里": "y", | |||||
"百度": "y", | |||||
"字节跳动": "y", | |||||
"QQ": "y" | |||||
}, | |||||
"快应用": { | |||||
"华为": "u", | |||||
"联盟": "u" | |||||
}, | |||||
"Vue": { | |||||
"vue2": "y", | |||||
"vue3": "y" | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,8 @@ | |||||
## Icons 图标 | |||||
> **组件名:uni-icons** | |||||
> 代码块: `uIcons` | |||||
用于展示 icons 图标 。 | |||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) | |||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@@ -50,11 +50,11 @@ const request = (options) => { | |||||
url: BASE_URL + interfaceType + options.url, | url: BASE_URL + interfaceType + options.url, | ||||
method: options.method || 'GET', | method: options.method || 'GET', | ||||
data: options.data || {}, | data: options.data || {}, | ||||
header: options.header || { | |||||
header: Object.assign({}, options.header, { | |||||
'BlackApp': BlackApp, | 'BlackApp': BlackApp, | ||||
'AppId': getApp().globalData.appId, | 'AppId': getApp().globalData.appId, | ||||
'TenantId': '01911b43-8844-4d93-b916-34208e31ba66' || getApp().globalData.companyId | |||||
}, | |||||
'TenantId': '01911b43-8844-4d93-b916-34208e31ba66' || TenantId // | |||||
}), | |||||
timeout: 20000, | timeout: 20000, | ||||
success: response => { | success: response => { | ||||
let jsonData = { | let jsonData = { | ||||