修改文件

This commit is contained in:
2025-09-04 17:04:21 +08:00
parent ff5e4af2d4
commit 55205f6e4d
11 changed files with 641 additions and 540 deletions

View File

@ -2,7 +2,7 @@
<view> <view>
<u-cell-group :border="false"> <u-cell-group :border="false">
<u-cell-item title="退出登录" @click="logout" hover-class="none"></u-cell-item> <u-cell-item title="退出登录" @click="logout" hover-class="none"></u-cell-item>
<u-cell-item title="收货地址" @click="toAddress" :border-bottom="false" hover-class="none"></u-cell-item> <!-- <u-cell-item title="收货地址" @click="toAddress" :border-bottom="false" hover-class="none"></u-cell-item> -->
</u-cell-group> </u-cell-group>
<u-modal v-model="showLogout" :content="content" :show-cancel-button="true" @confirm="confirmLogout"></u-modal> <u-modal v-model="showLogout" :content="content" :show-cancel-button="true" @confirm="confirmLogout"></u-modal>

View File

@ -1,9 +1,12 @@
<template> <template>
<view> <view>
<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" :closeable="true"> <u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" >
<view class="appointment-time"> <view class="appointment-time u-relative">
<view class="bold-700 lg u-p-t-24 u-p-b-24 u-text-center">选择预约时间</view> <view class="bold-700 lg u-p-t-30 u-p-b-30 u-text-center time-text">选择预约时间</view>
<view class="block row" style="height: 700rpx;"> <view class="u-absolute close" @click="onClose">
<u-icon size="40" name="close"></u-icon>
</view>
<view class="block row" style="height: 560rpx;">
<view class="aside"> <view class="aside">
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true"> <scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
<view style="padding-bottom: 200rpx;"> <view style="padding-bottom: 200rpx;">
@ -19,8 +22,8 @@
<view class="main"> <view class="main">
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true"> <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
<view class="main-wrap u-m-t-32"> <view class="main-wrap">
<view class="bg-white br16 row u-col-top u-m-b-24 nr" v-for="(item, index) in timeList" :key="index" @click="selectTime(index)"> <view class="bg-white br16 row u-col-top nr time-block" v-for="(item, index) in timeList" :key="index" @click="selectTime(index)">
<view>{{ item.start_time }}-{{ item.end_time }}</view> <view>{{ item.start_time }}-{{ item.end_time }}</view>
</view> </view>
</view> </view>
@ -123,8 +126,17 @@
<style lang="scss"> <style lang="scss">
.appointment-time { .appointment-time {
height: 800rpx; height: 560rpx;
max-height: 800rpx; max-height: 560rpx;
}
.time-text {
font-size: 40rpx;
}
.close {
right: 30rpx;
top: 40rpx;
} }
.block { .block {
@ -141,7 +153,8 @@
text-align: center; text-align: center;
height: 108rpx; height: 108rpx;
line-height: 108rpx; line-height: 108rpx;
width: 200rpx;
&.active { &.active {
color: $-color-theme; color: $-color-theme;
font-size: 26rpx; font-size: 26rpx;
@ -158,6 +171,12 @@
} }
} }
} }
.time-block {
height: 108rpx;
line-height: 108rpx;
border-bottom: 2rpx solid #F5F5F5;
}
.main { .main {
height: 100%; height: 100%;
@ -166,6 +185,7 @@
.main-wrap { .main-wrap {
position: relative; position: relative;
padding: 0 20rpx; padding: 0 20rpx;
padding-bottom: 108rpx;
.goods { .goods {
padding-bottom: 200rpx; padding-bottom: 200rpx;
.info { .info {

View File

@ -5,7 +5,8 @@
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true"> <scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
<view style="padding-bottom: 200rpx;"> <view style="padding-bottom: 200rpx;">
<block v-for="(item, index) in cateList" :key="index"> <block v-for="(item, index) in cateList" :key="index">
<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)"> <view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')"
@click="changeActive(index)">
<text class="name">{{ item.name }}</text> <text class="name">{{ item.name }}</text>
<view v-if="index == selectIndex" class="active-line bg-default"></view> <view v-if="index == selectIndex" class="active-line bg-default"></view>
</view> </view>
@ -15,33 +16,40 @@
</view> </view>
<view class="main"> <view class="main">
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun"> <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true"
@scrolltolower="getGoodsSearchFun">
<view class="main-wrap"> <view class="main-wrap">
<view class="goods"> <view class="goods">
<view class="u-p-t-32 bold-600">{{cateName}}</view> <view class="u-p-t-32 bold-600">{{ cateName }}</view>
<view class="u-p-t-32"> <view class="u-p-t-32">
<navigator :url="`/pages/shop/shop?id=${item.id}`" hover-class="none" class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in goodsList" :key="index" > <navigator :url="`/pages/shop/shop?id=${item.id}`" hover-class="none"
class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in goodsList"
:key="index">
<view> <view>
<u-image :src="item.image" width="136" height="136" border-radius="16"></u-image> <u-image :src="item.image" width="136" height="136"
border-radius="16"></u-image>
</view> </view>
<view class="info"> <view class="info">
<view> <view>
<view class="u-line-2 u-p-t-10">{{item.name}}</view> <view class="u-line-2 u-p-t-10">{{ item.name }}</view>
<view class="u-p-t-20 row-between"> <view class="u-p-t-20 row-between">
<view class="row"> <view class="row">
<view class="primary"> <view class="primary">
<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format> <price-format :price="item.price" :subscriptSize="22"
:firstSize="34" :secondSize="26"></price-format>
</view> </view>
<view class="u-m-l-8"> <view class="u-m-l-8">
<price-format :price="item.market_price" :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22"></price-format> <price-format :price="item.market_price" :lineThrough="true"
color="#C0C0C0" :subscriptSize="22" :firstSize="22"
:secondSize="22"></price-format>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="column-end"> <view class="column-end">
<view @click.stop="addCartFun(item)"> <view @click.stop="addCartFun(item)">
<u-icon name="plus-circle-fill" color="#254062" size="48" ></u-icon> <u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
</view> </view>
<!-- <u-button @click="openSpec(item.name)" hover-class="none" <!-- <u-button @click="openSpec(item.name)" hover-class="none"
:customStyle="{width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" :customStyle="{width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
@ -52,7 +60,7 @@
</view> </view>
</view> </view>
</navigator> </navigator>
<loading-footer :status="status" :slot-empty="true"> <loading-footer :status="status" :slot-empty="true">
<view slot="empty" class="column-center" style="padding: 200rpx 0 0"> <view slot="empty" class="column-center" style="padding: 200rpx 0 0">
<text class="lighter sm">暂无商品</text> <text class="lighter sm">暂无商品</text>
@ -75,10 +83,11 @@
<view class="u-m-l-32"> <view class="u-m-l-32">
<view class="row-center" v-if="totalPrice"> <view class="row-center" v-if="totalPrice">
<text class="text-fff"> <text class="text-fff">
共计 共计
</text> </text>
<view class="primary u-m-t-10 u-m-l-20"> <view class="primary u-m-t-10 u-m-l-20">
<price-format :price="totalPrice" :subscriptSize="26" :firstSize="34" :secondSize="26"></price-format> <price-format :price="totalPrice" :subscriptSize="26" :firstSize="34"
:secondSize="26"></price-format>
</view> </view>
</view> </view>
<view class="text-fff" v-else> <view class="text-fff" v-else>
@ -88,16 +97,17 @@
</view> </view>
<view class="text-999" @tap="goSettle">去结算</view> <view class="text-999" @tap="goSettle">去结算</view>
</view> </view>
<!-- 购物车 --> <!-- 购物车 -->
<u-popup v-model="showCart" mode="bottom" :border-radius="16"> <u-popup v-model="showCart" mode="bottom" :border-radius="16">
<view style="max-height: 800rpx;"> <view style="max-height: 800rpx;">
<view class="px20 text-999 mt20"> <view class="px20 text-999 mt20">
温馨提示:请适量点餐 温馨提示:请适量点餐,套餐与单品系列限购2套
</view> </view>
<view v-if="cartLists.length > 0"> <view v-if="cartLists.length > 0">
<scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true"> <scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true">
<view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20" v-for="(item, index) in cartLists" :key="index"> <view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20"
v-for="(item, index) in cartLists" :key="index">
<view class="row-start"> <view class="row-start">
<view> <view>
<u-image :src="item.img" width="136" height="136" border-radius="16"></u-image> <u-image :src="item.img" width="136" height="136" border-radius="16"></u-image>
@ -112,7 +122,8 @@
<text>味浓芳香</text> <text>味浓芳香</text>
</view> </view>
<view class="primary"> <view class="primary">
<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format> <price-format :price="item.price" :subscriptSize="22" :firstSize="34"
:secondSize="26"></price-format>
</view> </view>
</view> </view>
</view> </view>
@ -121,13 +132,17 @@
<u-icon class="u-p-t-10" name="trash" size="32"></u-icon> <u-icon class="u-p-t-10" name="trash" size="32"></u-icon>
</view> </view>
<view class="u-p-t-30"> <view class="u-p-t-30">
<u-number-box :disabled="item.cart_status != 0" :min="1" :max="item.item_stock" :value="item.goods_num" @blur="countChange($event, item.cart_id, item)" @minus="countChange($event, item.cart_id, item)" @plus="countChange($event, item.cart_id, item)"></u-number-box> <u-number-box :disabled="item.cart_status != 0" :min="1" :max="item.first_category_id == 1 || item.first_category_id == 2 ? 2 : item.stock"
:value="item.goods_num" @blur="countChange($event, item.cart_id, item)"
@minus="countChange($event, item.cart_id, item)"
@plus="countChange($event, item.cart_id, item)"></u-number-box>
</view> </view>
</view> </view>
</view> </view>
<view class="settle-btn"> <view class="settle-btn">
<u-button @tap="goSettle" shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}">去结算</u-button> <u-button @tap="goSettle" shape="circle" :hair-line="false" hover-class="none"
:customStyle="{ backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx' }">去结算</u-button>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -137,353 +152,360 @@
</view> </view>
</u-popup> </u-popup>
<shop-spec v-model="showSpec" :name="goodsName" :spec="goods_spec" @close="showSpec = false" @confirm="confirmSpec"></shop-spec> <shop-spec v-model="showSpec" :name="goodsName" :spec="goods_spec" @close="showSpec = false"
@confirm="confirmSpec"></shop-spec>
</view> </view>
</template> </template>
<script> <script>
import { import {
mapActions, mapActions,
mapGetters mapGetters
} from 'vuex'; } from 'vuex';
import { import {
loadingFun loadingFun
} from '@/utils/tools' } from '@/utils/tools'
import { import {
getGoodsSearch, getGoodsSearch,
addCart, addCart,
getPoster, getPoster,
getCartNum, getCartNum,
getCartList, getCartList,
changeGoodsCount, changeGoodsCount,
deleteGoods deleteGoods
} from '@/api/store'; } from '@/api/store';
import { import {
loadingType loadingType
} from '@/utils/type'; } from '@/utils/type';
export default { export default {
name: "cate-one", name: "cate-one",
props: { props: {
list: { list: {
type: Array, type: Array,
default: () => ([]) default: () => ([])
}
},
data() {
return {
page: 1,
status: loadingType.LOADING,
selectIndex: 0,
categoryId: 0,
cateList: [],
goodsList: [],
goods_spec: [],
cateName: '',
numberVal: 1,
showCart: false,
showSpec: false,
goods_num: 0,
cartLists: [],
totalPrice: 0,
goodsName: '',
}
},
created() {
this.getCartNum();
this.getCartListFun();
uni.$on('refreshCartList', this.getCartListFun);
},
beforeDestroy() {
uni.$off('refreshCartList', this.getCartListFun);
},
methods: {
...mapActions(['getCartNum']),
// 切换商品分类
changeActive(index) {
const {
cateList
} = this
this.cateName = cateList[index].name
this.selectIndex = index
this.onRefresh()
},
onRefresh() {
this.page = 1
this.goodsList = []
this.status = loadingType.LOADING
this.$nextTick(() => {
this.getGoodsSearchFun();
});
},
async getGoodsSearchFun() {
let {
page,
goodsList,
priceSort,
saleSort,
status,
cateList,
selectIndex
} = this;
const item = cateList[selectIndex]
if (item.type == 0) return
if (status == loadingType.FINISHED) return;
const params = {
category_id: item.id,
page_no: page,
price: priceSort,
sales_sum: saleSort
}
const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
console.log(data);
if (!data) return
this.page = data.page
this.goodsList = data.dataList
this.status = data.status
},
// 显示购物车弹出窗
showCartPopup() {
if (this.cartLists.length > 0) {
this.showCart = true
} else {
this.$toast({
title: '请先添加商品'
});
} }
}, },
data() {
return { // 添加到购物车(默认商品数量+1,可以让后端连表查询商品数量字段)
page:1, async addCartFun(item) {
status: loadingType.LOADING, uni.navigateTo({
selectIndex: 0, url: `/pages/shop/shop?id=${item.id}&showPopup=true`
categoryId: 0, })
cateList: [], return
goodsList: [],
goods_spec: [], // 限购逻辑
cateName: '', if (item.first_category_id === 1 || item.first_category_id === 2) {
numberVal: 1, // 统计购物车中同类商品的总数量
showCart: false, const totalNum = this.cartLists
showSpec: false, .filter(i => i.first_category_id === item.first_category_id)
goods_num: 0, .reduce((sum, i) => sum + (i.goods_num || 0), 0);
cartLists: [],
totalPrice: 0, if (totalNum >= 2) {
goodsName: '', this.$toast({ title: '该类商品每人限购2件' });
return;
}
}
const {
code,
data,
msg
} = await addCart({
item_id: item.id,
goods_num: 1
});
if (code == 1) {
this.getCartListFun()
} }
}, },
created() {
this.getCartNum() // 打开规格弹窗
this.getCartListFun() openSpec(name) {
this.showSpec = true
this.goodsName = name
}, },
methods: {
...mapActions(['getCartNum']),
// 切换商品分类 // 购物车商品里面的数量
changeActive(index) { countChange({ value }, cartId, item) {
const { console.log("countChange", value, cartId, item);
cateList changeGoodsCount({
} = this cart_id: cartId,
this.cateName = cateList[index].name goods_num: value,
this.selectIndex = index }).then((res) => {
this.onRefresh() if (res.code == 1) {
},
onRefresh() {
this.page = 1
this.goodsList = []
this.status = loadingType.LOADING
this.$nextTick(() => {
this.getGoodsSearchFun();
});
},
async getGoodsSearchFun() {
let {
page,
goodsList,
priceSort,
saleSort,
status,
cateList,
selectIndex
} = this;
const item = cateList[selectIndex]
if(item.type == 0) return
if (status == loadingType.FINISHED) return;
const params = {
category_id: item.id,
page_no: page,
price: priceSort,
sales_sum: saleSort
}
const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
console.log(data);
if (!data) return
this.page = data.page
this.goodsList = data.dataList
this.status = data.status
},
// 显示购物车弹出窗
showCartPopup() {
if (this.cartLists.length > 0) {
this.showCart = true
} else {
this.$toast({
title: '请先添加商品'
});
}
},
// 添加到购物车(默认商品数量+1,可以让后端连表查询商品数量字段)
async addCartFun(item) {
uni.navigateTo({
url: `/pages/shop/shop?id=${item.id}&showPopup=true`
})
return
// 限购逻辑
if (item.first_category_id === 1 || item.first_category_id === 2) {
// 统计购物车中同类商品的总数量
const totalNum = this.cartLists
.filter(i => i.first_category_id === item.first_category_id)
.reduce((sum, i) => sum + (i.goods_num || 0), 0);
if (totalNum >= 2) {
this.$toast({ title: '该类商品每人限购2件' });
return;
}
}
const {
code,
data,
msg
} = await addCart({
item_id: item.id,
goods_num: 1
});
if (code == 1) {
this.getCartListFun() this.getCartListFun()
} }
}, });
},
// 打开规格弹窗 // 获取购物车列表数据
openSpec(name) { getCartListFun() {
this.showSpec = true // 获取商品的分类ID
this.goodsName = name getCartList().then((res) => {
}, if (res.code == 1) {
// 购物车商品里面的数量 let {
countChange({value}, cartId, item) { lists,
console.log("countChange", value, cartId, item); total_amount
changeGoodsCount({ } = res.data;
cart_id: cartId, this.cartLists = lists;
goods_num: value, console.log("🚀 ~ getCartListFun ~ lists:", lists)
}).then((res) => { // // let cartType = 0;
if (res.code == 1) {
this.getCartListFun()
}
});
},
// 获取购物车列表数据 // // if (lists.length == 0) {
getCartListFun() { // // cartType = 2;
// 获取商品的分类ID // // } else {
getCartList().then((res) => { // // cartType = 1;
if (res.code == 1) { // // }
let {
lists,
total_amount
} = res.data;
this.cartLists = lists;
// // let cartType = 0;
// // if (lists.length == 0) { // this.cartLists = list;
// // cartType = 2; // console.log(">>>", this.cartLists);
// // } else {
// // cartType = 1;
// // }
// this.cartLists = list; // // this.cartType = cartType;
// console.log(">>>", this.cartLists); this.totalPrice = total_amount
// // this.isShow = true;
// // this.cartType = cartType; this.getCartNum();
this.totalPrice = total_amount }
// // this.isShow = true; });
this.getCartNum(); },
}
});
},
// 购物车删除商品 // 购物车删除商品
deleteGoods(cart_id) { deleteGoods(cart_id) {
deleteGoods({ deleteGoods({
cart_id cart_id
}).then((res) => { }).then((res) => {
if (res.code == 1) { if (res.code == 1) {
this.getCartListFun(); this.getCartListFun();
} }
}); });
}, },
// 去结算 // 去结算
goSettle() { goSettle() {
console.log(this.cartLists) console.log(this.cartLists)
this.showCart = false this.showCart = false
const goods = this.cartLists.map(item => { const goods = this.cartLists.map(item => {
return { return {
item_id: item.item_id, item_id: item.item_id,
num: item.goods_num num: item.goods_num
} }
}) })
uni.navigateTo({ uni.navigateTo({
url: "/pages/order_now/order_now?data=" + url: "/pages/order_now/order_now?data=" +
encodeURIComponent( encodeURIComponent(
JSON.stringify({ JSON.stringify({
goods, goods,
type: "cart", type: "cart",
}) })
), ),
}); });
},
// 跳转商品详情页
toShop(id) {
uni.navigateTo({
url: `/pages/shop/shop?id=${id}`
})
}
}, },
computed: {
...mapGetters(['cartNum']),
// 显示购物车数量
buyNumber() {
if (this.goods_num > 0) {
return this.goods_num > 99 ? '99+' : this.goods_num
}
return '' // 跳转商品详情页
toShop(id) {
uni.navigateTo({
url: `/pages/shop/shop?id=${id}`
})
}
},
computed: {
...mapGetters(['cartNum']),
// 显示购物车数量
buyNumber() {
if (this.goods_num > 0) {
return this.goods_num > 99 ? '99+' : this.goods_num
} }
},
watch: { return ''
list: { }
handler(val) { },
if(!val.length) return watch: {
let index = val.findIndex((item) => item.type == 1) list: {
handler(val) {
this.selectIndex = index == -1 ? 0 : index if (!val.length) return
this.cateName = val[this.selectIndex].name let index = val.findIndex((item) => item.type == 1)
this.cateList = val
this.getGoodsSearchFun() this.selectIndex = index == -1 ? 0 : index
} this.cateName = val[this.selectIndex].name
this.cateList = val
this.getGoodsSearchFun()
} }
}, }
} },
}
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
padding-bottom: 0; padding-bottom: 0;
} }
$header-height: 94rpx; $header-height: 94rpx;
.cate { .cate {
position: relative; position: relative;
} }
.cate-one { .cate-one {
height: 100vh; height: 100vh;
.aside { .aside {
width: 180rpx; width: 180rpx;
flex: none; flex: none;
height: 100%; height: 100%;
background-color: #F7F8FA; background-color: #F7F8FA;
.one-item { .one-item {
position: relative; position: relative;
text-align: center; text-align: center;
height: 108rpx; height: 108rpx;
line-height: 108rpx; line-height: 108rpx;
&.active { &.active {
color: $-color-theme; color: $-color-theme;
font-size: 26rpx; font-size: 26rpx;
font-weight: bold; font-weight: bold;
}
.active-line {
position: absolute;
width: 6rpx;
height: 30rpx;
left: 4rpx;
top: 50%;
transform: translateY(-50%);
}
} }
}
.active-line {
.main { position: absolute;
background-color: #FFFAFB; width: 6rpx;
height: 100%; height: 30rpx;
flex: 1; left: 4rpx;
top: 50%;
.main-wrap { transform: translateY(-50%);
position: relative;
padding: 0 20rpx 160rpx;
.goods {
.info {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 16rpx;
}
}
} }
} }
} }
.buy {
position: fixed;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 10rpx);
height: 100rpx;
background-color: #212526;
}
.number { .main {
background-color: #FF2C3C; background-color: #FFFAFB;
width: 40rpx; height: 100%;
height: 40rpx; flex: 1;
line-height: 40rpx;
border-radius: 100%;
}
.settle-btn { .main-wrap {
padding: 20rpx; position: relative;
padding: 0 20rpx 160rpx;
.goods {
.info {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 16rpx;
}
}
}
} }
}
.buy {
position: fixed;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 10rpx);
height: 100rpx;
background-color: #212526;
}
.number {
background-color: #FF2C3C;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 100%;
}
.settle-btn {
padding: 20rpx;
}
</style> </style>

View File

@ -47,7 +47,6 @@
}; };
}, },
props: { props: {
list: { list: {
type: Array, type: Array,
@ -58,6 +57,7 @@
}, },
couponId: [Number, String] couponId: [Number, String]
}, },
watch: { watch: {
list: { list: {
handler(val) { handler(val) {
@ -72,6 +72,7 @@
immediate: true, immediate: true,
} }
}, },
methods: { methods: {
onSelect(id) { onSelect(id) {
const { const {

View File

@ -59,9 +59,6 @@
</view> </view>
<template v-if="mode === 'confirm'"> <template v-if="mode === 'confirm'">
<view class="delivery" v-if="delivery === 1 && !item.is_express"
>该商品不支持快递配送</view
>
<view class="delivery" v-if="delivery === 2 && !item.is_selffetch" <view class="delivery" v-if="delivery === 2 && !item.is_selffetch"
>该商品不支持门店自提</view >该商品不支持门店自提</view
> >

View File

@ -29,7 +29,8 @@
</view> --> </view> -->
</view> </view>
<view class="flex1 u-text-right"> <view class="flex1 u-text-right">
<u-number-box v-model="goodsNum" :min="1" :max="checkedGoods.stock" <!-- 限购逻辑:套餐和单品内的商品列表,每个都是只能购买两个 -->
<u-number-box v-model="goodsNum" :min="1" :max="goods.first_category_id == 1 || goods.first_category_id == 2 ? 2 : checkedGoods.stock"
:disabled="disabledNumberBox"></u-number-box> :disabled="disabledNumberBox"></u-number-box>
</view> </view>
</view> </view>
@ -157,6 +158,23 @@
}, },
// 商品数量变化
handleCountChange({ value }) {
console.log("🚀 ~ countChange ~ value:", value)
console.log("🚀 ~ countChange ~ goods:", this.goods)
if (this.goods.first_category_id === 1 || this.goods.first_category_id === 2) {
// 套餐和单品系列限购2套
if (value > 2) {
this.disabledNumberBox = true
return this.$toast({
title: '套餐与单品系列限购2套',
})
} else {
this.goodsNum = value
}
}
},
// 选择规格 // 选择规格
// chooseSpec(item, index1, index2, attr) { // chooseSpec(item, index1, index2, attr) {
// if (item.name == '辣度') { // if (item.name == '辣度') {

View File

@ -8,14 +8,14 @@
<u-icon name="arrow-right" size="28" class="right-icon"></u-icon> <u-icon name="arrow-right" size="28" class="right-icon"></u-icon>
</navigator> </navigator>
</view> </view>
<view class="u-m-t-8 u-line-1"> <!-- <view class="u-m-t-8 u-line-1">
<navigator class="u-flex " url="/bundle/pages/address/address?type=1" hover-class="none"> <navigator class="u-flex " url="/bundle/pages/address/address?type=1" hover-class="none">
<u-icon name="map" size="32"></u-icon> <u-icon name="map" size="32"></u-icon>
<view class="u-line-1"> <view class="u-line-1">
{{userAddress || '请选择收货地址'}} {{userAddress || '请选择收货地址'}}
</view> </view>
</navigator> </navigator>
</view> </view> -->
</view> </view>
<view> <view>
<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">签到</u-button> <u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">签到</u-button>
@ -53,7 +53,14 @@
</view> </view>
<!-- 下单 --> <!-- 下单 -->
<view class="order u-flex u-row-center bg-white"> <view class="order u-flex u-row-center bg-white" @click="toStore">
<view>
<view class="reserve">预约下单</view>
<view class="desc">极速送达更便捷</view>
</view>
<view>
<u-image :src="cloudPath + 'img/home_image1.png'" width="204" height="204"></u-image>
</view>
<!-- <view class="bg-white u-text-center"> <!-- <view class="bg-white u-text-center">
<navigator url="/pages/store/store?type=1" hover-class="none"> <navigator url="/pages/store/store?type=1" hover-class="none">
<view class="text-default xxl">预约下单</view> <view class="text-default xxl">预约下单</view>
@ -63,7 +70,7 @@
</view> </view>
</navigator> </navigator>
</view> --> </view> -->
<view class="u-text-center"> <!-- <view class="u-text-center">
<navigator url="/pages/store/store?type=2" hover-class="none"> <navigator url="/pages/store/store?type=2" hover-class="none">
<view class="text-default xxl">现在点单</view> <view class="text-default xxl">现在点单</view>
<view class="xs text-999">预约下单更便捷</view> <view class="xs text-999">预约下单更便捷</view>
@ -71,7 +78,7 @@
<u-image :src="cloudPath + 'img/icon_order.png'" width="132" height="133" mode="aspectFit"></u-image> <u-image :src="cloudPath + 'img/icon_order.png'" width="132" height="133" mode="aspectFit"></u-image>
</view> </view>
</navigator> </navigator>
</view> </view> -->
</view> </view>
<!-- 活动图 --> <!-- 活动图 -->
@ -157,6 +164,12 @@
uni.navigateTo({ uni.navigateTo({
url: '/pages/signin/signin' url: '/pages/signin/signin'
}) })
},
toStore() {
uni.navigateTo({
url: '/pages/store/store'
})
} }
}, },
computed: { computed: {
@ -200,9 +213,31 @@
.order { .order {
margin: 30rpx 20rpx; margin: 30rpx 20rpx;
height: 300rpx;
justify-content: center;
align-items: center;
& > view { & > view {
border-radius: 16rpx; border-radius: 16rpx;
padding: 40rpx 86rpx; }
.reserve {
font-weight: 500;
font-size: 44rpx;
color: #254062;
line-height: 26rpx;
font-weight: 500;
margin-bottom: 34rpx;
}
.desc {
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 26rpx;
text-align: center;
font-style: normal;
text-transform: none;
} }
} }
} }

View File

@ -141,7 +141,10 @@
// 更新新注册的用户信息 // 更新新注册的用户信息
async handleSubmitMobile(e) { async handleSubmitMobile(e) {
console.log("🚀 ~ handleSubmitMobile ~ e:", e) console.log("🚀 ~ handleSubmitMobile ~ e:", e)
const wxCode = await getWxCode() const wxCode = await getWxCode()
console.log("🚀 ~ handleSubmitMobile ~ wxCode:", wxCode)
console.log("🚀 ~ handleSubmitMobile ~ client:", client)
const res = await accountLogin({ account: e.mobile, code: wxCode, client }) const res = await accountLogin({ account: e.mobile, code: wxCode, client })
if (res.code == 1) { if (res.code == 1) {
this.loginHandle(res.data) this.loginHandle(res.data)

View File

@ -181,8 +181,7 @@
<script> <script>
import { orderBuy, getOrderCoupon, getDelivery } from '@/api/order' import { orderBuy, getOrderCoupon, getDelivery } from '@/api/order'
import { prepay, getPayway } from '@/api/app'
import { wxpay, alipay } from '@/utils/pay'
export default { export default {
data() { data() {
return { return {

View File

@ -2,24 +2,27 @@
<view> <view>
<view class="shop"> <view class="shop">
<view> <view>
<u-swiper :list="goods.goods_image" name="uri" height="500" border-radius="0" mode="number" indicator-pos="bottomRight"></u-swiper> <u-swiper :list="goods.goods_image" name="uri" height="500" border-radius="0" mode="number"
indicator-pos="bottomRight"></u-swiper>
</view> </view>
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24"> <view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
<view class="nr">{{ goods.name }}</view> <view class="nr">{{ goods.name }}</view>
<view class="mt10 row u-row-between"> <view class="mt10 row u-row-between">
<view class="row"> <view class="row">
<view class="primary"> <view class="primary">
<price-format :price="goods.min_price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format> <price-format :price="goods.min_price" :subscriptSize="22" :firstSize="34"
:secondSize="26"></price-format>
</view> </view>
<view class="sale u-text-center primary u-m-l-12">0</view> <view class="sale u-text-center primary u-m-l-12">0</view>
<view class="primary u-m-l-12"> <view class="primary u-m-l-12">
<price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="goods.market_price"></price-format> <price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22"
:secondSize="22" :price="goods.market_price"></price-format>
</view> </view>
</view> </view>
<view class="text-999">已售66</view> <view class="text-999">已售66</view>
</view> </view>
<view class="u-m-t-20 u-m-b-20"> <view class="u-m-t-20 u-m-b-20">
<u-line color="#eee" /> <u-line color="#eee" />
</view> </view>
@ -28,31 +31,30 @@
<text>须知</text> <text>须知</text>
<text class="text-999 ml20">周一至周日可用</text> <text class="text-999 ml20">周一至周日可用</text>
</view> </view>
<view class="row-between mt20"> <view class="row-between mt20">
<view> <view>
<text>保障</text> <text>保障</text>
<text class="text-999 ml20">随时退 过期自动退</text> <text class="text-999 ml20">随时退 过期自动退</text>
</view> </view>
<view> <view>
<u-button @click="openSpec" hover-class="none" <u-button @click="openSpec" hover-class="none"
:customStyle="{width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" :customStyle="{ width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx' }"
:hair-line="false" :hair-line="false" shape="circle">
shape="circle"> 选规格
选规格
</u-button> </u-button>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="u-m-t-24"> <view class="u-m-t-24">
<view class="u-m-l-48 nr">详情</view> <view class="u-m-l-48 nr">详情</view>
<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24"> <view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
<u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image> <u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image>
</view> </view>
</view> </view>
<view class="u-m-t-24"> <view class="u-m-t-24">
<view class="u-m-l-48 nr">购买须知</view> <view class="u-m-l-48 nr">购买须知</view>
<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24"> <view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
@ -60,7 +62,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="fixed bg-white row-between px48 u-p-t-20 u-p-b-20"> <view class="fixed bg-white row-between px48 u-p-t-20 u-p-b-20">
<view class="column u-text-center u-relative" @click="addCartFun"> <view class="column u-text-center u-relative" @click="addCartFun">
<view class="row-center"> <view class="row-center">
@ -73,203 +75,208 @@
</view> </view>
</view> </view>
<view class="u-m-l-64 flex1"> <view class="u-m-l-64 flex1">
<u-button hover-class="none" @click="showSpecFun" <u-button hover-class="none" @click="showSpecFun"
:customStyle="{height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" :customStyle="{ height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx' }"
:hair-line="false" :hair-line="false" shape="circle">
shape="circle"> 立即购买
立即购买
</u-button> </u-button>
</view> </view>
</view> </view>
<shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @confirm="confirmSpec" @buynow="onBuy"></shop-spec> <shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @confirm="confirmSpec"
@buynow="onBuy"></shop-spec>
</view> </view>
</template> </template>
<script> <script>
import { import {
mapActions, mapActions,
mapGetters mapGetters
} from 'vuex'; } from 'vuex';
import { import {
getGoodsDetail, getGoodsDetail,
getCartList, getCartList,
addCart, addCart,
getPoster, getPoster,
getCartNum getCartNum
} from '@/api/store' } from '@/api/store'
import { import {
toLogin toLogin
} from '@/utils/login' } from '@/utils/login'
export default { export default {
data() { data() {
return { return {
id: 0, id: 0,
showSpec: false, showSpec: false,
goods: [], goods: [],
spec: [], spec: [],
checkedGoods: {}, checkedGoods: {},
source: '', source: '',
cartLists: [], cartLists: [],
totalPrice: 0, totalPrice: 0,
showPopup: false, showPopup: false,
}
},
onLoad(options) {
console.log("🚀 ~ onLoad ~ options:", options)
this.id = options.id
this.showPopup = options.showPopup === 'true' ? true : false
this.showSpec = this.showPopup
},
onUnload() {
uni.$emit('refreshCartList');
},
onShow() {
this.getGoodsDetailFun();
this.getCartNum()
this.getCartListFun()
},
methods: {
...mapActions(['getCartNum']),
// 获取商品详情
async getGoodsDetailFun() {
const {
data,
code
} = await getGoodsDetail({
id: this.id
});
if (code == 1) {
this.goods = data
console.log(this.goods.goods_image);
} }
}, },
onLoad(options) { // 获取购物车列表数据
console.log("🚀 ~ onLoad ~ options:", options) getCartListFun() {
this.id = options.id // 获取商品的分类ID
this.showPopup = options.showPopup === 'true' ? true : false getCartList().then((res) => {
this.showSpec = this.showPopup if (res.code == 1) {
}, let {
lists,
total_amount
} = res.data;
this.cartLists = lists;
// // let cartType = 0;
onShow() { // // if (lists.length == 0) {
this.getGoodsDetailFun(); // // cartType = 2;
this.getCartNum() // // } else {
this.getCartListFun() // // cartType = 1;
}, // // }
methods: { // this.cartLists = list;
...mapActions(['getCartNum']), // console.log(">>>", this.cartLists);
// 获取商品详情 // // this.cartType = cartType;
async getGoodsDetailFun() { this.totalPrice = total_amount
const { // // this.isShow = true;
data, this.getCartNum();
code
} = await getGoodsDetail({
id: this.id
});
if (code == 1) {
this.goods = data
console.log(this.goods.goods_image);
} }
}, });
},
// 获取购物车列表数据 // 将当前的商品添加到购物车里面
getCartListFun() { addCartFun() {
// 获取商品的分类ID this.showSpec = true
getCartList().then((res) => { },
if (res.code == 1) {
let {
lists,
total_amount
} = res.data;
this.cartLists = lists;
// // let cartType = 0;
// // if (lists.length == 0) { // 打开商品规格
// // cartType = 2; openSpec() {
// // } else { this.showSpec = true
// // cartType = 1; },
// // }
// this.cartLists = list; // 获取选择的商品规格
// console.log(">>>", this.cartLists); confirmSpec(data) {
console.log("data>>>", data.spec);
// // this.cartType = cartType; this.spec = data.spec
this.totalPrice = total_amount this.showSpec = false
// // this.isShow = true; },
this.getCartNum();
onChangeGoods(e) {
console.log(e);
this.checkedGoods = e.detail;
},
// 选择规格
showSpecFun() {
if (!this.isLogin) return toLogin();
this.showSpec = true;
},
// 购买商品
onBuy(e) {
if (e.type === 'cart') {
let { id, goodsNum } = e.detail
addCart({
item_id: id,
goods_num: goodsNum
}).then(res => {
if (res.code == 0) {
this.$toast({
title: res.msg
});
return;
} }
});
},
// 将当前的商品添加到购物车里面 this.getCartListFun()
addCartFun() { if (this.showPopup) {
this.showSpec = true setTimeout(() => {
}, uni.redirectTo({
url: '/pages/store/store'
// 打开商品规格
openSpec() {
this.showSpec = true
},
// 获取选择的商品规格
confirmSpec(data) {
console.log("data>>>", data.spec);
this.spec = data.spec
this.showSpec = false
},
onChangeGoods(e) {
console.log(e);
this.checkedGoods = e.detail;
},
// 选择规格
showSpecFun() {
if (!this.isLogin) return toLogin();
this.showSpec = true;
},
// 购买商品
onBuy(e) {
if (e.type === 'cart') {
// 限购逻辑:套餐和单品内的商品列表,每个都是只能购买两个
if (this.goods.first_category_id == 1 || this.goods.first_category_id == 2) {
console.log("🚀 ~ onBuy ~ this.cartLists:", this.cartLists)
const totalNum = this.cartLists
.filter(i => i.first_category_id === this.goods.first_category_id)
.reduce((sum, i) => sum + (i.goods_num || 0), 0);
if (totalNum >= 2) {
this.$toast({ title: '该类商品每人限购2件' });
return;
} else {
let {id} = e.detail
addCart({
item_id: id,
goods_num: 1
}).then(res => {
this.getCartListFun()
}); });
} }, 300);
} }
} else {
let {id, goodsNum} = e.detail
let goods = [{item_id: id, num: goodsNum}]
const params = {goods}
this.showSpec = false this.showSpec = false
uni.navigateTo({ });
url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params))) } else {
}) let { id, goodsNum } = e.detail
} let goods = [{ item_id: id, num: goodsNum }]
const params = { goods }
this.showSpec = false
uni.navigateTo({
url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params)))
})
} }
}, }
computed: { },
...mapGetters(['cartNum']), computed: {
}, ...mapGetters(['cartNum']),
} },
}
</script> </script>
<style lang="scss"> <style lang="scss">
.shop { .shop {
padding-bottom: 180rpx; padding-bottom: 180rpx;
.sale {
background-color: #FEFBEA;
width: 100rpx;
height: 30rpx;
line-height: 30rpx;
}
}
.fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.number { .sale {
background-color: #FF2C3C; background-color: #FEFBEA;
width: 40rpx; width: 100rpx;
height: 40rpx; height: 30rpx;
line-height: 40rpx; line-height: 30rpx;
border-radius: 100%;
} }
}
.fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.number {
background-color: #FF2C3C;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 100%;
}
</style> </style>

View File

@ -10,14 +10,14 @@
MEET轻食店 MEET轻食店
<u-icon name="arrow-right" size="28" class="right-icon u-m-l-4"></u-icon> <u-icon name="arrow-right" size="28" class="right-icon u-m-l-4"></u-icon>
</view> </view>
<view class="u-flex u-m-t-8" @click="chooseAddress"> <!-- <view class="u-flex u-m-t-8" @click="chooseAddress">
<u-icon name="map" size="32"></u-icon> <u-icon name="map" size="32"></u-icon>
门店地址 门店地址
</view> </view> -->
</view> </view>
<view> <!-- <view>
<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">自取</u-button> <u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">自取</u-button>
</view> </view> -->
</view> </view>
<view class=""> <view class="">
<u-alert-tips type="warning" title="当前门店已休息"></u-alert-tips> <u-alert-tips type="warning" title="当前门店已休息"></u-alert-tips>
@ -37,7 +37,6 @@
keyword: '' keyword: ''
} }
}, },
onLoad() { onLoad() {
this.getCatrgoryFun(); this.getCatrgoryFun();
}, },