From 1277f51bf9df8464ff8800a1d7e8a71b70ce9323 Mon Sep 17 00:00:00 2001 From: wyy <3234929097@qq.com> Date: Wed, 22 Nov 2023 16:51:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=94=AF=E4=BB=98=E7=BB=93?= =?UTF-8?q?=E6=9E=9C=E9=A1=B5=EF=BC=8C=E6=90=9C=E7=B4=A2=E9=A1=B5=EF=BC=8C?= =?UTF-8?q?=E5=9C=B0=E5=9D=80=E7=BC=96=E8=BE=91=E9=A1=B5=EF=BC=8C=E6=94=B6?= =?UTF-8?q?=E8=B4=A7=E5=9C=B0=E5=9D=80=E9=A1=B5=EF=BC=8C=E6=B4=BB=E5=8A=A8?= =?UTF-8?q?=E5=95=86=E5=93=81=E9=A1=B5=E7=AD=89=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/production/production.scss | 67 +++ src/components/production/production.vue | 73 +++ src/pages.json | 87 ++- src/pages/basket/basket.scss | 13 +- src/pages/basket/basket.vue | 15 +- src/pages/category/category.scss | 3 +- src/pages/category/category.vue | 2 +- .../delivery-address/delivery-address.scss | 93 ++++ .../delivery-address/delivery-address.vue | 160 ++++++ src/pages/editAddress/editAddress.scss | 158 ++++++ src/pages/editAddress/editAddress.vue | 435 +++++++++++++++ .../express-delivery/express-delivery.scss | 175 ++++++ .../express-delivery/express-delivery.vue | 93 ++++ src/pages/news-detail/news-detail.scss | 27 + src/pages/news-detail/news-detail.vue | 41 ++ src/pages/prod-classify/prod-classify.scss | 30 + src/pages/prod-classify/prod-classify.vue | 232 ++++++++ src/pages/recent-news/recent-news.scss | 34 ++ src/pages/recent-news/recent-news.vue | 60 ++ src/pages/search-page/search-page.scss | 119 ++++ src/pages/search-page/search-page.vue | 183 ++++++ .../search-prod-show/search-prod-show.scss | 186 +++++++ .../search-prod-show/search-prod-show.vue | 223 ++++++++ src/pages/sub-category/sub-category.scss | 4 +- src/pages/sub-category/sub-category.vue | 83 ++- src/pages/submit-order/submit-order.scss | 433 ++++++++++++++ src/pages/submit-order/submit-order.vue | 527 ++++++++++++++++++ src/utils/http.js | 6 + 28 files changed, 3495 insertions(+), 67 deletions(-) create mode 100644 src/components/production/production.scss create mode 100644 src/components/production/production.vue create mode 100644 src/pages/delivery-address/delivery-address.scss create mode 100644 src/pages/delivery-address/delivery-address.vue create mode 100644 src/pages/editAddress/editAddress.scss create mode 100644 src/pages/editAddress/editAddress.vue create mode 100644 src/pages/express-delivery/express-delivery.scss create mode 100644 src/pages/express-delivery/express-delivery.vue create mode 100644 src/pages/news-detail/news-detail.scss create mode 100644 src/pages/news-detail/news-detail.vue create mode 100644 src/pages/prod-classify/prod-classify.scss create mode 100644 src/pages/prod-classify/prod-classify.vue create mode 100644 src/pages/recent-news/recent-news.scss create mode 100644 src/pages/recent-news/recent-news.vue create mode 100644 src/pages/search-page/search-page.scss create mode 100644 src/pages/search-page/search-page.vue create mode 100644 src/pages/search-prod-show/search-prod-show.scss create mode 100644 src/pages/search-prod-show/search-prod-show.vue create mode 100644 src/pages/submit-order/submit-order.scss create mode 100644 src/pages/submit-order/submit-order.vue diff --git a/src/components/production/production.scss b/src/components/production/production.scss new file mode 100644 index 0000000..b7105a2 --- /dev/null +++ b/src/components/production/production.scss @@ -0,0 +1,67 @@ +.prod-items { + width: 43%; + background: #fff; + margin-bottom: 40rpx; + box-sizing: border-box; + .hot-imagecont { + border-radius: 8rpx; + text-align: center; + font-size: 0; + } + .hot-text { + margin-top: 20rpx; + .prod-info { + font-size: 20rpx; + color: #777; + padding: 0 20rpx; + margin-top: 8rpx; + } + .prod-text-info { + position: relative; + height: 50rpx; + line-height: 70rpx; + font-family: Arial; + .price { + color: #eb2444; + padding-left: 20rpx; + } + } + } +} +prod { + &:nth-child(2n-1) { + .prod-items { + padding: 20rpx 10rpx 10rpx 20rpx; + } + } + &:nth-child(2n) { + .prod-items { + padding: 20rpx 20rpx 10rpx 10rpx; + } + } +} +.hot-imagecont { + .hotsaleimg { + width: 100%; + height: 345rpx; + } +} +.hot-text { + .hotprod-text { + height: 76rpx; + font-size: 28rpx; + display: -webkit-box; + word-break: break-all; + padding: 0 20rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + color: #000; + } +} +.deadline-price { + font-size: 22rpx; + margin-right: 5rpx; +} diff --git a/src/components/production/production.vue b/src/components/production/production.vue new file mode 100644 index 0000000..849c8be --- /dev/null +++ b/src/components/production/production.vue @@ -0,0 +1,73 @@ + + + + diff --git a/src/pages.json b/src/pages.json index 22cfe26..e0115c2 100644 --- a/src/pages.json +++ b/src/pages.json @@ -38,15 +38,31 @@ "path": "pages/sub-category/sub-category" }, { - "path": "pages/accountLogin/accountLogin" + "path": "pages/search-page/search-page", + "style": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "搜索", + "navigationBarTextStyle": "black", + "navigationStyle": "custom" + } }, { - "path": "pages/register/register" + "path": "pages/delivery-address/delivery-address", + "style": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "收货地址", + "navigationBarTextStyle": "black" + } }, { - "path": "pages/prod/prod", + "path": "pages/editAddress/editAddress", "style": { - "navigationBarTitleText": "商品详情" + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "编辑收货地址", + "navigationBarTextStyle": "black" } }, { @@ -67,6 +83,24 @@ "navigationBarTextStyle": "black" } }, + { + "path": "pages/submit-order/submit-order", + "style": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "提交订单", + "navigationBarTextStyle": "black" + } + }, + { + "path": "pages/express-delivery/express-delivery", + "style": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "物流查询", + "navigationBarTextStyle": "black" + } + }, { "path": "pages/pay-result/pay-result", "style": { @@ -75,6 +109,51 @@ "navigationBarTitleText": "支付结果", "navigationBarTextStyle": "black" } + }, + { + "path": "pages/search-prod-show/search-prod-show", + "style": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "搜索结果", + "navigationBarTextStyle": "black" + } + }, + { + "path": "pages/prod/prod", + "style": { + "navigationBarTitleText": "商品详情" + } + }, + { + "path": "pages/prod-classify/prod-classify", + "style": { + "onReachBottomDistance": 0 + } + }, + { + "path": "pages/recent-news/recent-news", + "style": { + "backgroundTextStyle": "light", + "navigationBarTitleText": "最新公告", + "navigationBarTextStyle": "black", + "navigationBarBackgroundColor": "#fafafa" + } + }, + { + "path": "pages/news-detail/news-detail", + "style": { + "backgroundTextStyle": "light", + "navigationBarTitleText": "最新公告", + "navigationBarTextStyle": "black", + "navigationBarBackgroundColor": "#fafafa" + } + }, + { + "path": "pages/accountLogin/accountLogin" + }, + { + "path": "pages/register/register" } ], "tabBar": { diff --git a/src/pages/basket/basket.scss b/src/pages/basket/basket.scss index af6b160..ff73ece 100644 --- a/src/pages/basket/basket.scss +++ b/src/pages/basket/basket.scss @@ -1,15 +1,11 @@ .container { width: 100%; background: #f4f4f4; - padding-bottom: 118rpx; -} -container { - .prod-list { - width: 100%; - background: #f8f8f8; - } + min-height: calc(100vh - 118rpx); } .prod-list { + padding-bottom: 118rpx; + width: 100%; .prod-block { background: #fff; margin-top: 15rpx; @@ -267,7 +263,8 @@ container { } } } -checkbox { +:deep(checkbox) { + .uni-checkbox-input, .wx-checkbox-input { border-radius: 50%; width: 35rpx; diff --git a/src/pages/basket/basket.vue b/src/pages/basket/basket.vue index 06af999..b8e810a 100644 --- a/src/pages/basket/basket.vue +++ b/src/pages/basket/basket.vue @@ -105,12 +105,12 @@ class="cart-footer" > - + + 全选 { * 全选 */ const onSelAll = () => { - let allCheckedParam = allChecked.value - allCheckedParam = !allCheckedParam // 改变状态 + const allCheckedParam = !allChecked.value // 改变状态 const shopCartItemDiscountsParam = shopCartItemDiscounts.value for (let i = 0; i < shopCartItemDiscountsParam.length; i++) { const cItems = shopCartItemDiscountsParam[i].shopCartItems diff --git a/src/pages/category/category.scss b/src/pages/category/category.scss index 80c5d93..47b86c2 100644 --- a/src/pages/category/category.scss +++ b/src/pages/category/category.scss @@ -7,8 +7,7 @@ position: fixed; display: flex; overflow: hidden; - margin-top: 100rpx; - height: calc(100% - 100rpx); + height: 100%; } .search-bar { width: 100%; diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue index 21ce88a..3e2971c 100644 --- a/src/pages/category/category.vue +++ b/src/pages/category/category.vue @@ -7,7 +7,7 @@ @tap="toSearchPage" > diff --git a/src/pages/delivery-address/delivery-address.scss b/src/pages/delivery-address/delivery-address.scss new file mode 100644 index 0000000..a6e8325 --- /dev/null +++ b/src/pages/delivery-address/delivery-address.scss @@ -0,0 +1,93 @@ +.container { + background-color: #f4f4f4; + border-top: 2rpx solid #e9eaec; + min-height: 100vh; +} +.main { + margin-top: 20rpx; + padding-bottom: 150rpx; +} +.address { + margin-bottom: 15rpx; + width: 100%; + background-color: #fff; + border-bottom: 2rpx solid #e9eaec; + .personal { + position: relative; + padding: 20rpx 30rpx; + border-bottom: 3rpx dashed #e9eaec; + .info-tit { + .name { + margin-right: 30rpx; + font-size: 32rpx; + display: inline-block; + } + .tel { + font-size: 30rpx; + } + image { + position: absolute; + right: 30rpx; + top: 46rpx; + width: 40rpx; + height: 40rpx; + margin-left: 50rpx; + vertical-align: middle; + } + } + } + .select-btn { + padding: 15rpx 30rpx; + display: flex; + align-items: center; + justify-content: space-between; + .box { + font-size: 26rpx; + } + } +} +.personal { + .addr { + font-size: 26rpx; + margin: 10rpx 0; + margin-top: 20rpx; + .addr-get { + display: inline-block; + color: #999; + width: 100%; + word-break: break-word; + } + } +} +.footer { + position: fixed; + bottom: 0; + width: 100%; + height: 100rpx; + line-height: 100rpx; + text-align: center; + background-color: #fff; + box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05); + text { + font-size: 32rpx; + color: #eb2444; + } +} +.empty { + .img { + text-align: center; + margin-top: 130rpx; + image { + width: 100rpx; + height: 100rpx; + display: block; + margin: auto; + } + } + .txt { + margin-top: 30rpx; + font-size: 24rpx; + text-align: center; + color: #999; + } +} diff --git a/src/pages/delivery-address/delivery-address.vue b/src/pages/delivery-address/delivery-address.vue new file mode 100644 index 0000000..c32b68b --- /dev/null +++ b/src/pages/delivery-address/delivery-address.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/src/pages/editAddress/editAddress.scss b/src/pages/editAddress/editAddress.scss new file mode 100644 index 0000000..b8e9ee5 --- /dev/null +++ b/src/pages/editAddress/editAddress.scss @@ -0,0 +1,158 @@ +.container { + background: #fff; +} +.input-box { + margin-bottom: 50rpx; + background: #fff; + padding: 0 20rpx; + .section { + display: flex; + align-items: center; + width: 100%; + font-size: 28rpx; + padding: 30rpx 0; + line-height: 48rpx; + height: 100%; + box-sizing: border-box; + border-bottom: 2rpx solid #e5e5e5; + text { + width: 20%; + color: #333; + } + input { + width: 70%; + padding: 0 20rpx; + color: #333; + } + picker { + width: 70%; + padding: 0 30rpx; + } + .pca { + width: 70%; + padding: 0 20rpx; + } + .arrow { + width: 28rpx; + height: 28rpx; + image { + width: 100%; + height: 100%; + vertical-align: top; + } + } + } +} +.btn-box { + padding: 5px 10px; + width: 100%; + text-align: center; + margin: auto; + text { + font-size: 30rpx; + } + .clear.btn { + width: 60%; + height: 80rpx; + line-height: 80rpx; + margin: auto; + text-align: center; + border: 1rpx solid #eb2444; + border-radius: 50rpx; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3); + margin-top: 40rpx; + color: #eb2444; + background-color: #f8f0f1b6; + } + .keep { + color: #fff; + background-color: #eb2444; + } +} +.keep.btn { + width: 60%; + height: 80rpx; + line-height: 80rpx; + margin: auto; + text-align: center; + border: 1rpx solid #eb2444; + border-radius: 50rpx; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3); +} +.infoText { + margin-top: 20rpx; + text-align: center; + width: 100%; + justify-content: center; +} +picker-view { + background-color: white; + padding: 0; + width: 100%; + height: 380rpx; + bottom: 0; + position: fixed; + text { + color: #999; + display: inline-flex; + position: fixed; + margin-top: 20rpx; + height: 50rpx; + text-align: center; + line-height: 50rpx; + font-size: 34rpx; + font-family: Arial, Helvetica, sans-serif; + } +} +picker-view-column { + view { + vertical-align: middle; + font-size: 28rpx; + line-height: 28rpx; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } +} +.animation-element-wrapper { + display: flex; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 999; +} +.animation-element { + display: flex; + position: fixed; + width: 100%; + height: 470rpx; + bottom: 0; + background-color: rgba(255, 255, 255, 1); +} +.animation-button { + top: 20rpx; + width: 290rpx; + height: 100rpx; + align-items: center; +} +.left-bt { + left: 30rpx; +} +.right-bt { + right: 20rpx; + top: 20rpx; + position: absolute; + width: 80rpx !important; +} +.line { + display: block; + position: fixed; + height: 2rpx; + width: 100%; + margin-top: 89rpx; + background-color: #eee; +} diff --git a/src/pages/editAddress/editAddress.vue b/src/pages/editAddress/editAddress.vue new file mode 100644 index 0000000..8875137 --- /dev/null +++ b/src/pages/editAddress/editAddress.vue @@ -0,0 +1,435 @@ + + + + + diff --git a/src/pages/express-delivery/express-delivery.scss b/src/pages/express-delivery/express-delivery.scss new file mode 100644 index 0000000..8ca1613 --- /dev/null +++ b/src/pages/express-delivery/express-delivery.scss @@ -0,0 +1,175 @@ +page { + background: #f7f8fa; +} +.container { + height: 100%; +} +.padding20 { + padding-top: 88rpx; +} +.f-fl { + float: left; +} +.f-fr { + float: right; +} +.navWrap { + position: fixed; + top: 0; + left: 0; + z-index: 1; + overflow: hidden; + background-color: #fafafa; + border-bottom: 2rpx solid #f4f4f4; + height: 92rpx; +} +.nav { + display: flex; + flex-flow: row nowrap; +} +.nav-slider { + left: 0; + bottom: 0; + height: 4rpx; + background-color: #b4282d; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + box-sizing: border-box; +} +.nav-item { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + float: left; + height: 88rpx; + padding: 0 16rpx; + font-size: 28rpx; + text { + box-sizing: border-box; + color: #333; + padding: 27rpx 16rpx 23rpx; + line-height: 34rpx; + } +} +.nav-item.active { + text { + color: #b4282d; + } +} +.u-icon { + vertical-align: middle; +} +.deliveryInfo { + height: 198rpx; + width: 100%; + vertical-align: middle; + padding-left: 30rpx; + background-size: cover; + display: table; + position: relative; + box-sizing: border-box; + .companyname { + line-height: 1; + margin-left: 136rpx; + font-size: 28rpx; + .key { + color: #666; + } + } + .expno { + line-height: 1; + margin-left: 136rpx; + font-size: 28rpx; + margin-top: 16rpx; + .key { + color: #666; + } + } +} +.icon-express { + width: 104rpx; + height: 104rpx; + background-size: 100% 100%; + position: absolute; + top: 48rpx; + left: 30rpx; +} +.infoWarp { + display: table-cell; + vertical-align: middle; +} +.deliveryDetail { + margin-top: 20rpx; + padding-top: 40rpx; + background-color: #fff; + min-height: 670rpx; +} +.detailItem { + border-left: 1px dashed #f4f4f4; + margin-left: 42rpx; + position: relative; + margin-bottom: 2rpx; +} +.dot { + image { + width: 35rpx; + height: 35rpx; + background-size: 100%; + position: absolute; + top: 40rpx; + left: -18rpx; + } +} +.lastest { + .dot { + image { + top: -2rpx; + } + } + .detail { + .desc { + color: #105c3e; + margin-top: 0; + } + .time { + color: #105c3e; + } + border-top: 0; + } +} +.detail { + .desc { + font-size: 24rpx; + line-height: 30rpx; + margin-top: 40rpx; + } + .time { + font-size: 24rpx; + line-height: 30rpx; + color: #999; + margin-top: 15rpx; + margin-bottom: 39rpx; + } + border-top: 1px solid #f4f4f4; + margin-left: 28rpx; + overflow: hidden; + padding-right: 30rpx; +} +.deliveryTip { + height: 80rpx; + background-color: #fff8d8; + padding-left: 30rpx; + color: #f48f18; + font-size: 28rpx; + line-height: 80rpx; + margin-bottom: 20rpx; +} +.empty-space { + margin-top: 20rpx; + background: #fff; + font-size: 28rpx; + color: #333; + padding: 20rpx 0; + text-align: center; +} diff --git a/src/pages/express-delivery/express-delivery.vue b/src/pages/express-delivery/express-delivery.vue new file mode 100644 index 0000000..cb9d340 --- /dev/null +++ b/src/pages/express-delivery/express-delivery.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/pages/news-detail/news-detail.scss b/src/pages/news-detail/news-detail.scss new file mode 100644 index 0000000..b3afc38 --- /dev/null +++ b/src/pages/news-detail/news-detail.scss @@ -0,0 +1,27 @@ +.news-detail { + padding: 20rpx; + .news-detail-title { + font-size: 32rpx; + font-weight: bold; + line-height: 50rpx; + padding: 20rpx; + } + .news-detail-text { + font-size: 28rpx; + line-height: 46rpx; + text-align: justify; + text-justify: inter-ideograph; + margin-top: 20rpx; + } +} +.content { + > { + > { + >img { + display: block; + width: 100%; + height: auto; + } + } + } +} diff --git a/src/pages/news-detail/news-detail.vue b/src/pages/news-detail/news-detail.vue new file mode 100644 index 0000000..e21ce59 --- /dev/null +++ b/src/pages/news-detail/news-detail.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/pages/prod-classify/prod-classify.scss b/src/pages/prod-classify/prod-classify.scss new file mode 100644 index 0000000..861c212 --- /dev/null +++ b/src/pages/prod-classify/prod-classify.scss @@ -0,0 +1,30 @@ +.container { + background: #fff; + margin: 7px; +} +.line-fix { + width: 100%; + height: 2rpx; + background: #e1e1e1; + position: fixed; + top: 0; +} +.tit-background { + width: 100%; + height: 20rpx; + background: #f4f4f4; +} +.prod-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +/* 空 */ +.empty { + display: block; + width: 100%; + font-size: 26rpx; + color: #999; + margin-top: 20vh; + text-align: center; +} diff --git a/src/pages/prod-classify/prod-classify.vue b/src/pages/prod-classify/prod-classify.vue new file mode 100644 index 0000000..c43ae5a --- /dev/null +++ b/src/pages/prod-classify/prod-classify.vue @@ -0,0 +1,232 @@ + + + + + diff --git a/src/pages/recent-news/recent-news.scss b/src/pages/recent-news/recent-news.scss new file mode 100644 index 0000000..f6dbc96 --- /dev/null +++ b/src/pages/recent-news/recent-news.scss @@ -0,0 +1,34 @@ +.recent-news { + background: #fff; + .news-item { + padding: 20rpx 20rpx 0 20rpx; + position: relative; + &::after { + content: " "; + width: 100%; + height: 2rpx; + background-color: #e1e1e1; + left: 20rpx; + display: block; + position: absolute; + } + .news-item-title { + font-size: 28rpx; + text-align: left; + } + .news-item-date { + font-size: 24rpx; + color: #999; + text-align: right; + margin-top: 10rpx; + margin-bottom: 20rpx; + } + } + .empty { + display: block; + padding-top: 200rpx; + color: #999; + font-size: 26rpx; + text-align: center; + } +} diff --git a/src/pages/recent-news/recent-news.vue b/src/pages/recent-news/recent-news.vue new file mode 100644 index 0000000..779d20a --- /dev/null +++ b/src/pages/recent-news/recent-news.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/pages/search-page/search-page.scss b/src/pages/search-page/search-page.scss new file mode 100644 index 0000000..51687fd --- /dev/null +++ b/src/pages/search-page/search-page.scss @@ -0,0 +1,119 @@ +.search-bar { + width: 100%; + position: fixed; + top: 0; + left: 0; + color: #777; + background: #fff; + box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07); + z-index: 3; + .search-box { + position: relative; + height: 60rpx; + background: #f7f7f7; + z-index: 999; + width: 80%; + margin-left: 70rpx; + border-radius: 50rpx; + margin: 20rpx 0 20rpx 20rpx; + .search-img { + width: 32rpx; + height: 32rpx; + position: absolute; + left: 20rpx; + top: 14rpx; + display: block; + } + } + .search-hint { + font-size: 28rpx; + position: absolute; + right: 30rpx; + top: 31rpx; + color: #eb2444; + } +} +.sear-input { + height: 60rpx; + border-radius: 50rpx; + border: 0; + margin: 0 30rpx 0 64rpx; + line-height: 48rpx; + vertical-align: top; + background: #f7f7f7; + font-size: 28rpx; +} +.search-display { + background: #fff; + padding: 20rpx; + margin-top: 100rpx; + .title-text { + padding: 30rpx 0; + font-size: 30rpx; + color: #666; + } +} +.hot-search { + .hot-search-tags { + overflow: hidden; + font-size: 26rpx; + text-align: center; + padding-bottom: 30rpx; + .tags { + display: block; + max-width: 100%; + overflow: hidden; + float: left; + border-radius: 50rpx; + white-space: nowrap; + text-overflow: ellipsis; + background-color: #f2f2f2; + box-sizing: border-box; + margin-right: 20rpx; + margin-bottom: 20rpx; + padding: 10rpx 30rpx; + } + } +} +.history-search { + .title-text.history-line { + position: relative; + border-top: 2rpx solid #e1e1e1; + } + .his-search-tags { + overflow: hidden; + font-size: 26rpx; + text-align: center; + display: inline-block; + .tags { + max-width: 300rpx; + overflow: hidden; + float: left; + border-radius: 50rpx; + white-space: nowrap; + text-overflow: ellipsis; + background-color: #f2f2f2; + box-sizing: border-box; + margin-right: 20rpx; + margin-bottom: 20rpx; + padding: 10rpx 30rpx; + } + } +} +.clear-history { + image { + width: 32rpx; + height: 32rpx; + position: absolute; + right: 10rpx; + top: 30rpx; + } +} +.search-tit-empty { + display: block; + margin: 0 auto; + text-align: center; + width: 100%; + font-size: 24rpx; + color: #aaa; +} diff --git a/src/pages/search-page/search-page.vue b/src/pages/search-page/search-page.vue new file mode 100644 index 0000000..bacaa84 --- /dev/null +++ b/src/pages/search-page/search-page.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/src/pages/search-prod-show/search-prod-show.scss b/src/pages/search-prod-show/search-prod-show.scss new file mode 100644 index 0000000..bb83305 --- /dev/null +++ b/src/pages/search-prod-show/search-prod-show.scss @@ -0,0 +1,186 @@ +.container { + background: #f4f4f4; + .empty { + text-align: center; + color: #999; + font-size: 26rpx; + } + .empty.empty-top { + margin-top: 300rpx; + } +} +.fixed-box { + position: fixed; + width: 100%; + top: 0; + z-index: 999; + background: #fff; + .tabs { + width: 100%; + height: 80rpx; + line-height: 80rpx; + padding: 10rpx 0; + z-index: 999; + background: #fff; + &::after { + content: ''; + background-color: #e1e1e1; + left: 0; + height: 1px; + transform-origin: 50% 100% 0; + bottom: 0; + position: absolute; + display: block; + width: 100%; + } + .tab-item { + display: inline-block; + width: 33.33%; + text-align: center; + font-size: 28rpx; + } + .tab-item.on { + color: #eb2444; + } + } +} +.search-bar { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + color: #777; + background: #fff; + z-index: 3; + padding: 0 30rpx; + box-sizing: border-box; + margin: 30rpx 0; + .search-box { + position: relative; + height: 60rpx; + background: #f7f7f7; + z-index: 999; + width: 80%; + border-radius: 50rpx; + margin-right: 30rpx; + flex: 1; + .search-img { + width: 32rpx; + height: 32rpx; + position: absolute; + left: 20rpx; + top: 14rpx; + display: block; + } + } + .search-hint { + font-size: 28rpx; + position: absolute; + right: 30rpx; + top: 31rpx; + color: #eb2444; + } + .search-list-img { + width: 40rpx; + height: 40rpx; + font-size: 0; + image { + width: 100%; + height: 100%; + } + } +} +.sear-input { + height: 60rpx; + border-radius: 50rpx; + border: 0; + margin: 0 30rpx 0 64rpx; + line-height: 48rpx; + vertical-align: top; + background: #f7f7f7; + font-size: 28rpx; +} +.prod-show { + background: #fff; + .prod-items { + float: left; + background: #fff; + padding-bottom: 20rpx; + box-sizing: border-box; + } +} +.prod-items { + margin: 0 20rpx; +} +.hotsale-item-cont { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.prod-list { + padding-top: 150rpx; + min-height: calc(100vh - 150rpx); + .cont-item { + padding: 0 20rpx 20rpx 20rpx; + .show-item { + .more-prod-pic { + text-align: center; + width: 170rpx; + height: 170rpx; + font-size: 0; + .more-pic { + width: 100%; + height: 100%; + vertical-align: middle; + } + } + position: relative; + display: flex; + justify-content: start; + padding: 20rpx; + border-radius: 20rpx; + background: #fff; + margin-bottom: 20rpx; + box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); + .prod-text-right { + margin-left: 20rpx; + width: 75%; + .cate-prod-info { + font-size: 22rpx; + color: #999; + margin: 10rpx 0 20rpx 0; + } + .go-to-buy { + font-size: 26rpx; + background: #eb2444; + color: #fff; + border-radius: 50rpx; + width: 150rpx; + text-align: center; + padding: 8rpx 3rpx; + position: absolute; + right: 20rpx; + bottom: 20rpx; + } + .prod-text.more { + margin: 0; + height: 78rpx; + font-size: 28rpx; + display: -webkit-box; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + color: #000; + } + .prod-price.more { + font-size: 28rpx; + color: #eb2444; + font-family: arial; + } + } + } + } +} diff --git a/src/pages/search-prod-show/search-prod-show.vue b/src/pages/search-prod-show/search-prod-show.vue new file mode 100644 index 0000000..c41c936 --- /dev/null +++ b/src/pages/search-prod-show/search-prod-show.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/src/pages/sub-category/sub-category.scss b/src/pages/sub-category/sub-category.scss index 0fcaced..93a6335 100644 --- a/src/pages/sub-category/sub-category.scss +++ b/src/pages/sub-category/sub-category.scss @@ -19,7 +19,7 @@ } } .prod-item { - margin-top: 100rpx; + height: calc(100vh - 100rpx); } .on { border-bottom: 4rpx solid #e43130; @@ -105,5 +105,5 @@ .empty-wrap { color: #aaa; text-align: center; - margin-top: 400rpx; + padding-top: 400rpx; } diff --git a/src/pages/sub-category/sub-category.vue b/src/pages/sub-category/sub-category.vue index 1ee1618..fa8ab78 100644 --- a/src/pages/sub-category/sub-category.vue +++ b/src/pages/sub-category/sub-category.vue @@ -22,54 +22,53 @@ - - - + + - - - - - - {{ prod.prodName }} - - - {{ prod.brief }} + + + - - - - ¥ - - - {{ wxs.parsePrice(prod.price)[0] }} - - - .{{ wxs.parsePrice(prod.price)[1] }} - + + + {{ prod.prodName }} + + + {{ prod.brief }} + + + + + ¥ + + + {{ wxs.parsePrice(prod.price)[0] }} + + + .{{ wxs.parsePrice(prod.price)[1] }} + + - + - - - 暂无商品数据~ + + 暂无商品数据~ + diff --git a/src/pages/submit-order/submit-order.scss b/src/pages/submit-order/submit-order.scss new file mode 100644 index 0000000..1c22415 --- /dev/null +++ b/src/pages/submit-order/submit-order.scss @@ -0,0 +1,433 @@ +.container { + background: #f4f4f4; +} +.submit-order { + margin-bottom: 100rpx; + padding-bottom: 160rpx; + .delivery-addr { + position: relative; + background: #fff; + .addr-icon { + width: 32rpx; + height: 32rpx; + display: block; + position: absolute; + left: 30rpx; + top: 24rpx; + image { + width: 100%; + height: 100%; + } + } + .user-info { + padding-top: 20rpx; + line-height: 48rpx; + word-wrap: break-word; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + .item { + font-size: 30rpx; + margin-right: 30rpx; + vertical-align: top; + display: inline-block; + } + } + .addr { + font-size: 26rpx; + line-height: 36rpx; + color: #999; + width: 90%; + padding-bottom: 20rpx; + margin-top: 15rpx; + word-wrap: break-word; + } + .arrow { + width: 15rpx; + height: 15rpx; + border-top: 2rpx solid #777; + border-right: 2rpx solid #777; + transform: rotate(45deg); + position: absolute; + right: 30rpx; + top: 60rpx; + } + .arrow.empty { + top: 39rpx; + } + } +} +.delivery-addr { + .addr-bg { + .add-addr { + .plus-sign { + color: #eb2444; + border: 2rpx solid #eb2444; + padding: 0rpx 6rpx; + margin-right: 10rpx; + } + font-size: 28rpx; + color: #666; + display: flex; + align-items: center; + padding: 30rpx 0; + } + padding: 0 30rpx; + } + .addr-bg.whole { + padding: 0 39rpx 0 77rpx; + } +} +.addr-bg { + .add-addr { + .plus-sign-img { + width: 32rpx; + height: 32rpx; + font-size: 0; + margin-right: 10rpx; + image { + width: 100%; + height: 100%; + } + } + } +} +.prod-item { + background-color: #fff; + margin-top: 15rpx; + font-size: 28rpx; + .item-cont { + .prod-pic { + image { + width: 180rpx; + height: 180rpx; + width: 100%; + height: 100%; + } + font-size: 0; + display: block; + width: 160rpx; + height: 160rpx; + overflow: hidden; + background: #fff; + margin-right: 16rpx; + } + display: flex; + align-items: center; + padding: 30rpx; + border-bottom: 2rpx solid #f1f1f1; + .prod-info { + margin-left: 10rpx; + font-size: 28rpx; + width: 100%; + position: relative; + height: 160rpx; + -webkit-flex: 1; + -ms-flex: 1; + -webkit-box-flex: 1; + -moz-box-flex: 1; + flex: 1; + .prodname { + font-size: 28rpx; + line-height: 40rpx; + max-height: 86rpx; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + word-break: break-all; + } + .prod-info-cont { + color: #999; + line-height: 40rpx; + margin-top: 10rpx; + font-size: 22rpx; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + word-break: break-all; + } + } + } + .order-num { + padding: 20rpx 30rpx; + display: flex; + justify-content: space-between; + font-size: 28rpx; + .clear-btn { + width: 32rpx; + height: 32rpx; + font-size: 0; + vertical-align: top; + margin-top: 6rpx; + margin-left: 42rpx; + position: relative; + &::after { + content: " "; + display: block; + position: absolute; + left: -10px; + top: 1px; + width: 1px; + height: 12px; + background: #ddd; + } + .clear-list-btn { + width: 100%; + height: 100%; + vertical-align: middle; + } + } + } + .total-num { + text-align: right; + padding: 20rpx 30rpx; + font-size: 28rpx; + .prodprice { + display: inline-block; + color: #333; + } + .prodcount { + margin-right: 20rpx; + } + } + .price-nums { + .prodprice { + position: absolute; + bottom: 0; + } + .prodcount { + position: absolute; + bottom: 5rpx; + right: 0; + color: #999; + font-family: verdana; + } + } +} +.order-state { + display: flex; + align-items: center; +} +.order-msg { + background: #fff; + margin-top: 15rpx; + padding: 0 30rpx; + font-size: 28rpx; + .msg-item { + border-top: 2rpx solid #f1f1f1; + &:first-child { + border: 0; + } + .item { + position: relative; + display: flex; + padding: 16rpx 0; + align-items: center; + .item-tit { + line-height: 48rpx; + } + .item-txt { + -webkit-box-flex: 1; + -moz-box-flex: 1; + flex: 1; + font-family: arial; + max-height: 48rpx; + overflow: hidden; + line-height: 48rpx; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + word-break: break-all; + } + .item-txt.price { + padding: 0; + text-align: right; + } + input { + flex: 1; + } + .coupon-btn { + display: block; + margin: 0 30rpx; + line-height: 28rpx; + color: #999; + } + .arrow { + width: 15rpx; + height: 15rpx; + border-top: 2rpx solid #999; + border-right: 2rpx solid #999; + transform: rotate(45deg); + position: absolute; + right: 0rpx; + } + } + .item.payment { + border-top: 2rpx solid #f1f1f1; + color: #eb2444; + } + .item.coupon { + border-bottom: 2rpx solid #e1e1e1; + } + } +} +.submit-order-footer { + position: fixed; + bottom: 0; + width: 100%; + max-width: 750rpx; + background: #fff; + margin: auto; + display: -webkit-flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: flex; + font-size: 26rpx; + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); + .sub-order { + flex: 1; + margin: 0 30rpx; + line-height: 100rpx; + display: block; + text-align: left; + font-size: 28rpx; + .item-txt { + .price { + display: inline; + color: #eb2444; + font-size: 28rpx; + } + } + } + .footer-box { + padding: 0 10rpx; + width: 200rpx; + background: #eb2444; + text-align: center; + line-height: 100rpx; + color: #fff; + } +} +.clearfix { + &:after { + content: " "; + display: table; + clear: both; + } +} +.popup-hide { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 999; + background-color: rgba(0, 0, 0, 0.3); +} +.popup-box { + position: absolute; + bottom: 0; + width: 100%; + height: 80%; + overflow: hidden; + background-color: #fff; +} +.popup-tit { + position: relative; + height: 46px; + line-height: 46px; + padding-left: 10px; + font-size: 16px; + color: #333; + font-weight: bold; +} +.close { + color: #aaa; + border-radius: 12px; + line-height: 20px; + text-align: center; + height: 20px; + width: 20px; + font-size: 18px; + padding: 1px; + top: 10px; + right: 10px; + position: absolute; + &::before { + content: "\2716"; + } +} +.coupon-tabs { + display: flex; + font-size: 14px; + justify-content: space-around; + border-bottom: 1px solid #f2f2f2; +} +.coupon-tab { + padding: 10px 0; +} +.coupon-tab.on { + border-bottom: 2px solid #eb2444; + font-weight: 600; +} +.popup-cnt { + height: calc(100% - 88px); + overflow: auto; + padding: 0 10px; + background: #f4f4f4; +} +.coupon-ok { + position: fixed; + bottom: 0; + width: 100%; + height: 60px; + line-height: 50px; + font-size: 14px; + text-align: center; + box-shadow: 0px -1px 1px #ddd; + background: rgba(255, 255, 255, 0.9); + text { + border-radius: 20px; + display: inline-block; + height: 20px; + line-height: 20px; + width: 450rpx; + padding: 7px; + background: -o-linear-gradient(right, #f45c43, #eb2444); + background: linear-gradient(right, #f45c43, #eb2444); + background: -webkit-linear-gradient(right, #f45c43, #eb2444); + color: #fff; + box-shadow: -1px 3px 3px #aaa; + } +} +.botm-empty { + height: 60px; +} +checkbox { + .wx-checkbox-input { + border-radius: 50%; + width: 35rpx; + height: 35rpx; + } + .wx-checkbox-input.wx-checkbox-input-checked { + background: #eb2444; + border-color: #eb2444; + &::before { + text-align: center; + font-size: 22rpx; + color: #fff; + background: transparent; + transform: translate(-50%, -50%) scale(1); + -webkit-transform: translate(-50%, -50%) scale(1); + } + } +} diff --git a/src/pages/submit-order/submit-order.vue b/src/pages/submit-order/submit-order.vue new file mode 100644 index 0000000..6eb18ab --- /dev/null +++ b/src/pages/submit-order/submit-order.vue @@ -0,0 +1,527 @@ + + + + + diff --git a/src/utils/http.js b/src/utils/http.js index 8a2fe3e..f4dbb86 100644 --- a/src/utils/http.js +++ b/src/utils/http.js @@ -133,6 +133,12 @@ const http = { } }) }, + onRequestFail: (params, responseData) => { + console.error('============== 请求异常 ==============') + console.log('接口地址: ', params.url) + console.log('异常信息: ', responseData) + console.error('============== 请求异常 end ==========') + }, /** * 登录成功后执行 * @param {Object} result 登录成功返回的数据