|
@@ -1,154 +1,332 @@
|
|
|
<template>
|
|
|
<view class="w-full">
|
|
|
- <!-- <top-search :isSearch="false" @searchClick="searchClick"></top-search>
|
|
|
- <view class="w-full padding-lr-sm box-sizing-b dflex-b">
|
|
|
- <scroll-view class="goods-category" scroll-x>
|
|
|
- <view class="category-box">
|
|
|
- <view class="category-item padding-lr-lg" v-for="item in 8" :key="item" :class="{'on-category':onIndex === item}">分类{{item+1}}</view>
|
|
|
+ <view>
|
|
|
+ <u-row justify="space-between" customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="icon-container-l" @click="onOrder">
|
|
|
+ <uni-badge size="normal" :text="txts" absolute="rightTop">
|
|
|
+ <u-icon :name="iconCooking" label="自提" labelPos="bottom" size="32"></u-icon>
|
|
|
+ </uni-badge>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <view class="container">
|
|
|
+ <u-tag plain :text="cList.openState ? '营业中' : '离线'" :type="cList.openState ? 'success' : 'error'"
|
|
|
+ size="mini"></u-tag>
|
|
|
+ <view @click="btnIc">
|
|
|
+ <u-icon :label="cList.name" labelPos="left" size="16" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <view class="classify-icon">
|
|
|
- <u-icon name="grid-fill" size="30" @click="show = true" />
|
|
|
- </view>
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="icon-container-r" @click="onMyInfo">
|
|
|
+ <u-icon label="我的" labelPos="bottom" size="32" :name="iconPeople"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
</view>
|
|
|
- <u-popup :show="show" mode="left" @close="show = false">
|
|
|
- <view class="classify-popup padding-lr-lg padding-tb box-sizing-b">
|
|
|
- <view class="padding-tb-sm">全部</view>
|
|
|
- <view class="padding-tb-sm" v-for="index in 8">分类{{index+1}}</view>
|
|
|
- </view>
|
|
|
- </u-popup> -->
|
|
|
- <view class="w-full dflex-b padding-sm box-sizing-b dflex-wrap-w">
|
|
|
- <view class="goods-item margin-bottom-sm" v-for="index in 4" :key="index">
|
|
|
- <view class="img dflex-c">
|
|
|
- <image mode="aspectFit" :src="'../../static/x'+ index%2 +'.jpg'"></image>
|
|
|
+ <view class="w-full dflex-b padding-xs box-sizing-b dflex-wrap-w">
|
|
|
+ <view class="goods-item margin-bottom-sm" v-for="(item, gindex) in goods" :key="gindex">
|
|
|
+ <view class="img dflex-c" @click="toDetial(item)">
|
|
|
+ <image mode="aspectFit" :src="item.imgList[0].url"></image>
|
|
|
</view>
|
|
|
- <view class="title">我是标题我是标题我是标题我是标题</view>
|
|
|
+ <view class="title">{{item.spuName}}</view>
|
|
|
<view class="dflex padding-bottom-xs">
|
|
|
- <u-tag text="夏季校服" type="error" bgColor="#E8341F" size="mini"></u-tag>
|
|
|
+ <u-tag plain text="销量: 199" borderColor="#FF6D20" color="#FF6D20" size="mini"></u-tag>
|
|
|
</view>
|
|
|
<view class="w-full dflex-b">
|
|
|
- <view class="price">23.30</view>
|
|
|
- <u-tag text="加购" bgColor="#000" shape="circle" size="mini" @click="goCart"></u-tag>
|
|
|
+ <view class="price">{{item.minPrice ? item.minPrice : '无'}}</view>
|
|
|
+ <view>
|
|
|
+ <u-button type="primary" shape="circle" size="small"
|
|
|
+ color="linear-gradient(to right, #F54319, #FF6D20)" @click="goCart(item)">
|
|
|
+ <u-icon name="shopping-cart-fill" size="28" color="#fff"></u-icon>
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <my-gap :height="130" />
|
|
|
-
|
|
|
+ <my-gap :height="10" />
|
|
|
+ <specPopup class='spec-box' ref="specPopup" :cardMsg="cardMsg" @update-shopmsg="handleUpdateShopMsg"
|
|
|
+ @addShop="carListMeg">
|
|
|
+ </specPopup>
|
|
|
<view class="cart-bottom padding-sm dflex-b">
|
|
|
<view class="cart padding-lr">
|
|
|
- <uni-badge size="small" :text="100" absolute="rightTop">
|
|
|
+ <uni-badge size="small" :text="buyCount" absolute="rightTop">
|
|
|
<u-icon name="shopping-cart-fill" size="28" color="#FF873D" @click="showCart"></u-icon>
|
|
|
</uni-badge>
|
|
|
- <text class="cart-total">¥35.60</text>
|
|
|
+ <text class="cart-total">总计:¥{{total}}</text>
|
|
|
</view>
|
|
|
- <view class="balance dflex-c">去结算</view>
|
|
|
+ <view class="balance dflex-c background-gradient" @click="toBuy">去结算</view>
|
|
|
</view>
|
|
|
- <cartPopupVue ref="cartPopup" />
|
|
|
+ <cartPopupVue ref="cartPopup" @selected-changed="handleSelectedChanged" />
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import cartPopupVue from '../../components/cartPopup.vue'
|
|
|
+ import specPopup from '@/components/specPopup.vue'
|
|
|
+ import iconCooking from '../../static/cooking.png'
|
|
|
+ import iconPeople from '../../static/people.png'
|
|
|
+ import shoppingCart from '../../static/shoppingCart.png'
|
|
|
export default {
|
|
|
- components:{cartPopupVue},
|
|
|
+ components: {
|
|
|
+ cartPopupVue,
|
|
|
+ specPopup
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- onIndex:0,
|
|
|
- show:false
|
|
|
+ onIndex: 0,
|
|
|
+ show: false,
|
|
|
+ iconCooking: iconCooking,
|
|
|
+ iconPeople: iconPeople,
|
|
|
+ shoppingCart: shoppingCart,
|
|
|
+ tags: 1,
|
|
|
+ txts: 1,
|
|
|
+ carList: {},
|
|
|
+ goods: [],
|
|
|
+ total: 0,
|
|
|
+ cList: {},
|
|
|
+ cardMsg: {},
|
|
|
+ selectedList: [],
|
|
|
+ buyCount: 0
|
|
|
}
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ const e = uni.getStorageSync('carl')
|
|
|
+ this.cList = e
|
|
|
+ this.fatchDate()
|
|
|
+ this.carListMeg()
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 加购
|
|
|
- goCart(){},
|
|
|
- showCart(){
|
|
|
- this.$refs.cartPopup.setShow(true);
|
|
|
+ goCart(e) {
|
|
|
+ console.log('================', e)
|
|
|
+ this.cardMsg = e
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.specPopup.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSelectedChanged(selectedItems) {
|
|
|
+ console.log('选中的数据:', selectedItems)
|
|
|
+ this.carList = selectedItems
|
|
|
+ this.carListMeg()
|
|
|
+ this.totalPrice()
|
|
|
+ },
|
|
|
+
|
|
|
+ //计算selected为true的
|
|
|
+ totalPrice() {
|
|
|
+ let total = 0;
|
|
|
+ for (let i = 0; i < this.carList.length; i++) {
|
|
|
+ // 检查商品是否有 selected 属性
|
|
|
+ if (this.carList[i].hasOwnProperty('selected')) {
|
|
|
+ // 如果 selected 属性存在,只有当它为 true 时才计算
|
|
|
+ if (this.carList[i].selected) {
|
|
|
+ let priceInCents = Math.round(this.carList[i].price * 100);
|
|
|
+ let quant = this.carList[i].quantity;
|
|
|
+ total += priceInCents * quant;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果 selected 属性不存在,直接计算所有商品
|
|
|
+ let priceInCents = Math.round(this.carList[i].price * 100);
|
|
|
+ let quant = this.carList[i].quantity;
|
|
|
+ total += priceInCents * quant;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将总价格转换回浮点数(以元为单位)
|
|
|
+ this.total = (total / 100).toFixed(2);
|
|
|
+
|
|
|
+ console.log('total', this.total);
|
|
|
+ },
|
|
|
+ showCart() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.cartPopup.setShow(true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ btnIc() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/diningList/diningList`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toDetial(e) {
|
|
|
+ console.log('eeeeee====================', e)
|
|
|
+ const data = {
|
|
|
+ spuId: e.spuId,
|
|
|
+ tobyC: this.buyCount
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/goodDetail/goodDetail?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toBuy() {
|
|
|
+ console.log('e========carList', this.carList)
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: `/pages/order/submitOrder/submitOrder`
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ onOrder() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/order/myOrder/myOrder`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onMyInfo() {
|
|
|
+ const info = {
|
|
|
+ customerPhone: this.cList.customerPhone
|
|
|
+ }
|
|
|
+ console.log('======================', info)
|
|
|
+ uni.setStorageSync("info", info)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/user/user`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取餐车列表
|
|
|
+ async fatchDate() {
|
|
|
+ var queryParmas = {
|
|
|
+ id: this.cList.id
|
|
|
+ }
|
|
|
+ console.log('idididididid', queryParmas)
|
|
|
+ const result = await this.$request('post', '/sale/diningCarProduct/queryDiningCarProduct', queryParmas,
|
|
|
+ true)
|
|
|
+ if (result) {
|
|
|
+ const queIds = new Set(result.rows.map(item => item.spuId));
|
|
|
+ const spuIds = Array.from(queIds).join(',');
|
|
|
+ const res = await this.$request('get', `/item/spu/queryByIds?spuIds=${spuIds}`)
|
|
|
+ const data = res.data
|
|
|
+ this.goods = data.filter(item => item.status !== 1)
|
|
|
+ console.log('res', res.data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async carListMeg() {
|
|
|
+ const res = await this.$request('get', `/front/shoppingCart/list`, {
|
|
|
+ storeId: this.cList.id
|
|
|
+ })
|
|
|
+ console.log('res.data==============', res.data)
|
|
|
+ if (res) {
|
|
|
+ const carList = res.data
|
|
|
+ this.buyCount = carList.length
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.goods-category{
|
|
|
- width: calc(100% - 100rpx);
|
|
|
- border-radius: 14rpx;
|
|
|
- overflow: hidden;
|
|
|
- .category-box{
|
|
|
- height: 70rpx;
|
|
|
+ .goods-category {
|
|
|
+ width: calc(100% - 100rpx);
|
|
|
+ border-radius: 14rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .category-box {
|
|
|
+ height: 70rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .category-item {
|
|
|
+ font-size: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-category {
|
|
|
+ color: #FFF;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .classify-icon {
|
|
|
+ width: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-item {
|
|
|
+ width: 48%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 4px #FFF;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 180rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #EEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-bottom {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .category-item{
|
|
|
- font-size: 14px;
|
|
|
- flex-shrink: 0;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 130rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFF;
|
|
|
+ box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ z-index: 10800;
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ width: calc(100% - 220rpx);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #FEEEE4;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
height: 100%;
|
|
|
- line-height: 70rpx;
|
|
|
+
|
|
|
+ .cart-total {
|
|
|
+ padding-left: 40rpx;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
}
|
|
|
- .on-category{
|
|
|
+
|
|
|
+ .balance {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #FF0000;
|
|
|
+ font-size: $uni-font-size-lg;
|
|
|
+ border-radius: 5px;
|
|
|
color: #FFF;
|
|
|
- background-color: #000;
|
|
|
}
|
|
|
}
|
|
|
- .classify-icon{
|
|
|
- width: 100rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-}
|
|
|
-.goods-item{
|
|
|
- width: 48%;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- border:solid 4px #FFF;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0px 3px 10px 0px rgba(213,221,232,0.5);
|
|
|
- .img{
|
|
|
- width: 100%;
|
|
|
- height: 350rpx;
|
|
|
- overflow: hidden;
|
|
|
- background: #EEE;
|
|
|
+
|
|
|
+ .spec-box {
|
|
|
+ position: relative;
|
|
|
+ z-index: 99999;
|
|
|
}
|
|
|
- .title{
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- padding: 10rpx;
|
|
|
+
|
|
|
+ .classify-popup {
|
|
|
+ width: 400rpx;
|
|
|
}
|
|
|
-}
|
|
|
-.cart-bottom{
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- height: 130rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFF;
|
|
|
- box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.15);
|
|
|
- z-index: 10800;
|
|
|
- .cart{
|
|
|
- width: calc(100% - 220rpx);
|
|
|
- border-radius: 5px;
|
|
|
- background-color: #FEEEE4;
|
|
|
+
|
|
|
+ .container {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* 垂直排列子元素 */
|
|
|
align-items: center;
|
|
|
- height: 100%;
|
|
|
- .cart-total{
|
|
|
- padding-left: 40rpx;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
+ /* 垂直居中子元素 */
|
|
|
+ justify-content: center;
|
|
|
+ /* 水平居中子元素 */
|
|
|
}
|
|
|
- .balance{
|
|
|
- width: 200rpx;
|
|
|
- height: 100%;
|
|
|
- background-color: #FF0000;
|
|
|
- font-size: $uni-font-size-lg;
|
|
|
- border-radius: 5px;
|
|
|
- color: #FFF;
|
|
|
+
|
|
|
+ .icon-container-l {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-container-r {
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
-}
|
|
|
-.classify-popup{
|
|
|
- width: 400rpx;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|