diff --git a/common/http.api.js b/common/http.api.js index 3c6dc2c..131b39b 100644 --- a/common/http.api.js +++ b/common/http.api.js @@ -42,8 +42,11 @@ let apiApp = { // 用户商城订单 userOrders: '/api/mobile/user/orders', userOrdersDetail: '/api/mobile/user/orders-detail', - - + // 购物车 + cartIndex: '/api/mobile/cart/index', + cartShow: '/api/mobile/cart/show', + cartSave: '/api/mobile/cart/save', + cartDestroy: '/api/mobile/cart/destroy', hospital: '/api/mobile/hospital/hospital', banner: '/api/mobile/other/banner', @@ -98,6 +101,13 @@ const install = (Vue, vm) => { const hospitalList = (params = {}) => vm.$u.get(apiApp.hospital, params) const banner = (params = {}) => vm.$u.get(apiApp.banner, params) + // end + // 购物车 + const cartList = (params = {}) => vm.$u.get(apiApp.cartIndex, params) + const cartShow = (params = {}) => vm.$u.get(apiApp.cartShow, params) + const cartSave = (params = {}) => vm.$u.post(apiApp.cartSave, params) + const cartDestroy = (params = {}) => vm.$u.get(apiApp.cartDestroy, params) + // end vm.$u.api = { @@ -122,7 +132,8 @@ const install = (Vue, vm) => { userAddress,userAddressShow,userAddressSave,userAddressDestroy, // 用户商城订单 userOrders,userOrdersDetail, - + // 购物车 + cartList, cartSave, cartShow, cartDestroy }; } diff --git a/package_sub/pages/Shop/Order.vue b/package_sub/pages/Shop/Order.vue index 0d799ea..054b954 100644 --- a/package_sub/pages/Shop/Order.vue +++ b/package_sub/pages/Shop/Order.vue @@ -1,23 +1,608 @@ diff --git a/package_sub/pages/Shop/ProductDetail.vue b/package_sub/pages/Shop/ProductDetail.vue index 1bb1130..8898b6a 100644 --- a/package_sub/pages/Shop/ProductDetail.vue +++ b/package_sub/pages/Shop/ProductDetail.vue @@ -1,12 +1,21 @@ @@ -65,106 +345,297 @@ export default { data() { return { + scrollTop: 0, + swiperIndex: 0, + showType: false, detail: {}, form: { - product_id: '', - product_sku_id: '' + num: 1, + product_id: "", + product_sku_id: "", }, tabs: [ { - text: '宝贝', - targetClass: 'price' + text: "宝贝", + targetClass: "content", }, { - text: '评价', - targetClass: 'comment' + text: "评价", + targetClass: "comment", }, { - text: '详情', - targetClass: 'detail' + text: "详情", + targetClass: "detail", }, { - text: '推荐', - targetClass: 'recommend' - } + text: "推荐", + targetClass: "recommend", + }, ], tabHeight: null, currentTab: 0, + + recommendPro: [], + timer: null, + cartNum: 0, + + commentList: [], + isSkuSubmit: false, + isImmediateBuy: false, }; }, computed: { - backTop() { - return (getApp().globalData.navbarHeight ?? 40) + 'px' + menuButtonLeft() { + return ( + uni.getSystemInfoSync().windowWidth - + uni.getMenuButtonBoundingClientRect().left + ); + }, + tabTop() { + return uni.getMenuButtonBoundingClientRect().bottom; }, swiper() { - return this.detail?.product_images?.map(i => i.image?.url) || [] + return this.detail?.product_images?.map((i) => i.image?.url) || []; }, productSku() { - return this.detail?.product_skus?.find(sku => sku.id === this.form.product_sku_id) - } + return this.detail?.product_skus?.find( + (sku) => sku.id === this.form.product_sku_id + ); + }, }, methods: { + toDetail(item) { + this.$u.route({ + url: '/package_sub/pages/Shop/ProductDetail', + params: { + id: item.id + } + }) + }, // 获取一个目标元素的高度 getElRect(elClass, dataVal) { return new Promise((resolve, reject) => { const query = uni.createSelectorQuery().in(this); - query.select('.' + elClass).fields({ - rect: true - }, res => { - // 如果节点尚未生成，res值为null，循环调用执行 - if (!res) { - setTimeout(() => { - this.getElRect(elClass); - }, 10); - return; - } - if(dataVal) { - this['dataVal'] = res.top; - } + query + .select("." + elClass) + .fields( + { + rect: true, + }, + (res) => { + // 如果节点尚未生成，res值为null，循环调用执行 + if (!res) { + setTimeout(() => { + this.getElRect(elClass); + }, 10); + return; + } + if (dataVal) { + this["dataVal"] = res.top; + } - resolve(res.top); - }).exec(); - }) + resolve(res.top); + } + ) + .exec(); + }); + }, + async getCartNum() { + try { + const res = await this.$u.api.cartList({ + page: 1, + page_size: 1, + }); + this.cartNum = res.total; + } catch (err) {} + }, + async getComment() { + this.commentList = [ + { + id: 1, + name: "叶轻眉", + date: "12-25 18:58", + contentText: + "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的", + url: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg", + allReply: 12, + likeNum: 33, + isLike: false, + replyList: [ + { + name: "uview", + contentStr: + "uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！", + }, + { + name: "粘粘", + contentStr: + "今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多", + }, + ], + }, + { + id: 2, + name: "叶轻眉1", + date: "01-25 13:58", + contentText: + "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的", + allReply: 0, + likeNum: 11, + isLike: false, + url: "https://cdn.uviewui.com/uview/template/niannian.jpg", + }, + { + id: 3, + name: "叶轻眉2", + date: "03-25 13:58", + contentText: + "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的", + allReply: 0, + likeNum: 21, + isLike: false, + url: "../../../static/logo.png", + replyList: [ + { + name: "uview", + contentStr: + "uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！", + }, + { + name: "豆包", + contentStr: "想吃冰糖葫芦粘豆包，但没钱5555.........", + }, + ], + }, + { + id: 4, + name: "叶轻眉3", + date: "06-20 13:58", + contentText: + "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的", + url: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg", + allReply: 0, + likeNum: 150, + isLike: false, + }, + ]; + }, + async getRecommendPro() { + try { + const res = await this.$u.api.productList({ + page: 1, + page_size: 6, + sort_name: "sort", + }); + this.recommendPro = res.list?.data; + } catch (err) {} }, async pageScrollHandle() { try { - if(true) { - const rect = await Promise.all(this.tabs.map((tab, index) => this.getElRect(tab.targetClass))) - console.log(345, rect) - this.tabHeight = rect + if (!this.tabHeight) { + const rect = await Promise.all( + this.tabs.map((tab, index) => this.getElRect(tab.targetClass)) + ); + this.tabHeight = rect; } } catch (err) { - console.error(err) + console.error(err); } }, + tabClick(index) { + this.currentTab = index; + uni.pageScrollTo({ + scrollTop: this.tabHeight[index] + 1, + }); + }, back() { this.$u.route({ - type: 'back' - }) + type: "back", + }); }, async getDetail(id) { try { const res = await this.$u.api.productDetail({ - id - }) - this.detail = res.detail - if (res.detail?.product_skus?.length > 0) { - this.form['product_sku_id'] = res.detail.product_skus[0].id - } + id, + }); + this.detail = res.detail; + // if (res.detail?.product_skus?.length > 0) { + // this.form["product_sku_id"] = res.detail.product_skus[0].id; + // } + this.$nextTick((_) => { + setTimeout((_) => { + this.pageScrollHandle(); + }, 500); + }); } catch (err) { - console.error(err) + console.error(err); } - } + }, + async confirm() { + try { + if (this.isSkuSubmit) { + if (!this.form.product_sku_id) { + this.$refs.uToast.show({ + title: "请选择产品规格", + type: "warning", + }); + return + } + if (!this.form.num) { + this.$refs.uToast.show({ + title: "请选择产品数量", + type: "warning", + }); + return + } + const res = await this.$u.api.cartSave(this.form); + this.$refs.uToast.show({ + title: "已加入购物车", + type: "success", + }); + this.getCartNum(); + } + if (this.isImmediateBuy) { + } + this.showType = false; + } catch (err) {} + }, + }, + created() { + this.getRecommendPro(); + this.getCartNum(); + this.getComment(); }, onLoad(option) { if (option.id) { - this.getDetail(option.id) + this.form.product_id = option.id; + this.getDetail(option.id); } }, - onPageScroll(e) { - this.pageScrollHandle() + onPageScroll({ scrollTop }) { + if (this.timer) return; + this.timer = setTimeout(() => { + // 节流 + this.timer = null; + this.scrollTop = scrollTop; + if (scrollTop < this.tabHeight[1]) { + this.currentTab = 0; + } else if ( + scrollTop >= this.tabHeight[1] && + scrollTop - this.tabTop - 86 < this.tabHeight[2] + ) { + this.currentTab = 1; + } else if ( + scrollTop - this.tabTop - 86 >= this.tabHeight[2] && + scrollTop - this.tabTop - 86 < this.tabHeight[3] + ) { + this.currentTab = 2; + } else { + this.currentTab = 3; + } + }, 100); }, -} +}; diff --git a/package_sub/pages/Shop/ProductList.vue b/package_sub/pages/Shop/ProductList.vue index 60c6097..59dd576 100644 --- a/package_sub/pages/Shop/ProductList.vue +++ b/package_sub/pages/Shop/ProductList.vue @@ -251,6 +251,10 @@ export default { font-weight: normal; font-size: 24rpx; color: $u-main-color; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 180rpx; } .item-container { diff --git a/package_sub/pages/Shop/Reply.vue b/package_sub/pages/Shop/Reply.vue new file mode 100644 index 0000000..b0211fd --- /dev/null +++ b/package_sub/pages/Shop/Reply.vue @@ -0,0 +1,224 @@ + + + + + diff --git a/package_sub/static/Shop/yishouxing.png b/package_sub/static/Shop/yishouxing.png new file mode 100644 index 0000000..b5f9d33 Binary files /dev/null and b/package_sub/static/Shop/yishouxing.png differ diff --git a/pages.json b/pages.json index b81790e..f306af5 100644 --- a/pages.json +++ b/pages.json @@ -119,6 +119,12 @@ "style": { "navigationStyle": "custom" } + }, + { + "path": "pages/Shop/Reply", + "style": { + "navigationStyle": "custom" + } } ] }