| hive-app/common/styles/index.css | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages.json | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/orderDetail.vue | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/orderList.vue | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/productDetail/combo.vue | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/productDetail/index.vue | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/productDetail/project.vue | ●●●●● patch | view | raw | blame | history | |
| hive-app/pages/workbench/productDetail/refillCard.vue | ●●●●● patch | view | raw | blame | history |
hive-app/common/styles/index.css
@@ -165,6 +165,9 @@ .placeholder{ color: #999999; } .left{ text-align: left; } .center{ text-align: center; } hive-app/pages.json
@@ -198,6 +198,17 @@ "scrollIndicator": "none" } } }, { "path": "./pages/workbench/orderDetail", "style": { "navigationBarTitleText": "订单详情", "navigationBarBackgroundColor":"#FFFFFF", "navigationBarTextStyle":"black", "app-plus":{ "scrollIndicator": "none" } } } ], "globalStyle": { hive-app/pages/workbench/orderDetail.vue
New file @@ -0,0 +1,9 @@ <template> <!-- 订单详情 --> </template> <script> </script> <style> </style> hive-app/pages/workbench/orderList.vue
@@ -43,6 +43,31 @@ <button class="blue-btn small-btn">取消订单</button> </view> </view> <view class="order"> <view class="flex justify-between order-number"> <text class="font-14">订单号: N202012123556</text> <text class="font-14 blue">已完成</text> </view> <view class="flex justify-between order-content"> <view class="flex flex-v"> <text class="font-12">李某某</text> <text class="font-12 gray mt-10">2020-12-15 18:11:01</text> </view> <view class="flex flex-v"> <text class="font-12">应付金额</text> <text class="font-12 mt-10">实付金额</text> </view> <view class="flex flex-v"> <text class="font-12">￥ 8000.00</text> <text class="font-12 mt-10">￥ 8000.00</text> </view> </view> <view class="flex justify-end"> <navigator url="./orderDetail"> <button class="blue-btn small-btn">查看详情</button> </navigator> </view> </view> </view> </view> </template> hive-app/pages/workbench/productDetail/combo.vue
New file @@ -0,0 +1,55 @@ <template> <!-- 套餐 --> <view> <view class="content"> <view class="content-title"> <text>套餐项目权益</text> </view> <view class="content-row flex justify-between"> <text>深层皮肤管理</text> <text>2次</text> </view> <view class="content-row flex justify-between"> <text>皮肤肌底修护液 (10%)</text> <text>2次</text> </view> </view> <view class="content mt-10"> <view class="content-title"> <text>套餐产品权益</text> </view> <view class="content-row flex justify-between"> <text>深层皮肤管理</text> <text>2次</text> </view> <view class="content-row flex justify-between"> <text>皮肤肌底修护液 (10%)</text> <text>2次</text> </view> </view> </view> </template> <script> </script> <style> .content{ text-align: center; background: #FFFFFF; padding: 0 10px; border-radius: 4px; box-shadow:0 -6px 6px rgba(237,234,244,0.5); font-size: 14px; } .content-title{ padding: 10px 0; } .content-row{ border-bottom: 1px solid #EDEAF4; padding: 10px 0; } .content-row:nth-last-child(1){ border: 0; } </style> hive-app/pages/workbench/productDetail/index.vue
@@ -1,5 +1,6 @@ <template> <!-- 商品详情 --> <!-- 默认是基础属性 1是项目 2是套餐 3是充值卡 --> <view> <!-- #ifndef H5 --> <view class="status_bar"></view> @@ -13,39 +14,122 @@ > <swiper-item v-for="(item,index) in bannerList" :key="index"> <image class="banner-img" :src="item.img" mode="aspectFill"></image> <view class="dots-container flex align-center justify-center"> <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text> </view> </swiper-item> </swiper> </swiper> </view> <view class="return-icon iconfont iconzuojiantou"></view> <view class="dots-container justify-center"> <view v-for="(item, index) in bannerList" :key="index"> <view :class="['dot', index === swiperIndex ? 'actives' : '']">1</view> <view class="return-icon iconfont iconzuojiantou" @click="goBack"></view> <view class="product-price"> <text class="font-20 red">￥128.00</text> <view class="font-14 flex justify-between"> <text>多肽沁妍水润面膜</text> <text class="gray">月销：122</text> </view> /3 </view> <view class="product-info mt-15"> <view class="product-info-row"> <h-tabs class="tab" :tabData="tabs" :config="{ color: '#abb1cc', activeColor: '#518EFF', underLineColor: '#518EFF', underLineHeight: 6, fontSize: '30', underLineWidth: 110, }" @tabClick="tabClick($event)" /> </view> <view v-if="tabIndex==0"> <image class="product-img" mode="aspectFit" src="../../../static/images/banner1.jpg"></image> </view> <view v-else class="product-all"> <view class="product-property"> <view class="product-property-row flex justify-between"> <text>商品编码</text> <text>123123000</text> </view> <view class="product-property-row flex justify-between"> <text>商品分类</text> <text>家居产品</text> </view> <view class="product-property-row flex justify-between"> <text>规格</text> <text>500ml</text> </view> <view class="product-property-row flex justify-between"> <text>每人限购次数</text> <text>1</text> </view> <view class="product-property-row flex justify-between"> <text>最大销售数量</text> <text>23</text> </view> </view> <project class="mt-10" v-if="type==1"></project> <combo class="mt-10" v-if="type==2"></combo> <refillCard class="mt-10" v-if="type==3"></refillCard> </view> </view> </view> </template> <script> import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue"; import project from './project.vue'; import combo from './combo.vue' import refillCard from './refillCard.vue' export default{ components: { HTabs, project, combo, refillCard }, data(){ return{ bannerList:[ {img:'../../../static/images/banner1.jpg'}, {img:'../../../static/images/banner1.jpg'} ] ], swiperIndex:0, tabs:[ { state: 1, name: '商品介绍' }, { state: 2, name: '商品属性' } ], tabIndex:0, type:3 } }, methods:{ swiperChange(e){ this.swiperIndex = e.detail.current; }, goBack(){ uni.navigateBack() }, tabClick(index){ this.tabIndex=index } } } </script> <style> page{ background: #F6F6F8; } .return-icon{ font-size: 28px; opacity: 0.5; @@ -62,15 +146,50 @@ height: 100%; } .dots-container { display: flex; padding-bottom: 17px; position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 2px 15px; } .dots-box{ .product-price{ background: #FFFFFF; padding: 10px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow:0 6px 6px rgba(237,234,244,0.5); } .dot{ .product-info{ background: #FFFFFF; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow:0 -6px 6px rgba(237,234,244,0.5); } .product-info-row{ background: #FFFFFF; margin: 0 10px; border-bottom: 1px solid #EDEAF4; } .product-img{ width: 100%; height: 640px; } .product-all{ background: #F6F6F8; } .product-property{ background: #FFFFFF; padding: 0 10px; font-size: 14px; border-radius: 4px; box-shadow:0 6px 6px rgba(237,234,244,0.5); } .product-property-row{ border-bottom: 1px solid #EDEAF4; padding: 10px 0; } .product-property-row:nth-last-child(1){ border: 0; } </style> hive-app/pages/workbench/productDetail/project.vue
New file @@ -0,0 +1,43 @@ <template> <!-- 商品（项目）--> <view class="content"> <view class="content-title"> <text>配料表</text> </view> <view class="content-row flex justify-between"> <text>小气泡1号溶液</text> <text>23ml</text> </view> <view class="content-row flex justify-between"> <text>皮肤肌底修护液 (10%)</text> <text>23ml</text> </view> <view class="content-row flex justify-between"> <text>皮肤肌底修护液 (10%)</text> <text>23ml</text> </view> </view> </template> <script> </script> <style> .content{ text-align: center; background: #FFFFFF; padding: 0 10px; border-radius: 4px; box-shadow:0 -6px 6px rgba(237,234,244,0.5); } .content-title{ padding: 10px 0; } .content-row{ border-bottom: 1px solid #EDEAF4; padding: 10px 0; } .content-row:nth-last-child(1){ border: 0; } </style> hive-app/pages/workbench/productDetail/refillCard.vue
New file @@ -0,0 +1,51 @@ <template> <!-- 充值卡 --> <view> <view class="content"> <view class="content-title"> <text>卡项产品可消费类型</text> </view> <view class="content-row left"> <text>深层皮肤管理</text> </view> <view class="content-row left"> <text>家具产品类型</text> </view> </view> <view class="content mt-10"> <view class="content-title"> <text>卡项产品可消产品</text> </view> <view class="content-row left"> <text>深层皮肤管理</text> </view> <view class="content-row left"> <text>皮肤肌底修护液 (10%)</text> </view> </view> </view> </template> <script> </script> <style> .content{ text-align: center; background: #FFFFFF; padding: 0 10px; border-radius: 4px; box-shadow:0 -6px 6px rgba(237,234,244,0.5); font-size: 14px; } .content-title{ padding: 10px 0; } .content-row{ border-bottom: 1px solid #EDEAF4; padding: 10px 0; } .content-row:nth-last-child(1){ border: 0; } </style>
