新增订单组件

This commit is contained in:
唐明明
2021-12-31 17:54:48 +08:00
parent 61fddf2d3a
commit e2de02b68b
11 changed files with 992 additions and 577 deletions

16
.hbuilderx/launch.json Normal file
View File

@@ -0,0 +1,16 @@
{ // launch.json 配置了启动调试时相关设置configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

View File

@@ -27,9 +27,9 @@
<image src="@/static/dev/img-01.png" mode="widthFix"></image>
</view>
<!-- 精选推荐 -->
<view class="new-box">
<!-- <view class="new-box">
<view class="title">精选推荐</view>
</view>
</view> -->
<!-- 话题广场 -->
<view class="new-box">
<view class="title">话题广场</view>

View File

@@ -10,7 +10,12 @@
<!-- 订单产品 -->
<view class="block goods-box">
<view class="goods-item">
<image class="order-cover" src="https://yanxuan-item.nosdn.127.net/6d48e6ea51a06b1356ccda21497fdb14.png" mode="aspectFill"></image>
<view class="order-title">茅台王子酒 金王子 53 500毫升</view>
<view class="order-count">
<view class="order-price"><text></text>275.00</view>
<view class="order-sum">共1件</view>
</view>
</view>
</view>
<!-- 订单信息 -->
@@ -94,6 +99,42 @@
}
}
}
// 订单列表
.goods-item{
display: flex;
align-items: center;
padding: $padding;
.order-cover{
vertical-align: top;
width: 128rpx;
height: 128rpx;
}
.order-title{
@extend .ellipsis;
text-align: left;
flex: 1;
padding-left: $margin;
font-size: 28rpx;
line-height: 40rpx;
}
.order-count{
text-align: right;
padding-left: $margin;
line-height: 40rpx;
.order-price{
font-size: 30rpx;
font-weight: bold;
color: $text-price;
&>text{
font-size: 24rpx;
}
}
.order-sum{
font-size: 26rpx;
color: #777;
}
}
}
// 订单信息
.info-box{
.info-item{

View File

View File

@@ -0,0 +1,225 @@
<template>
<view>
<view class="order--content" :class="[pattern ? 'chunk': 'broad']">
<block v-if="!stores">
<view class="order--header">
<view class="order--no">
订单号{{orderInfo.no}}
</view>
<view class="stateText" :style="{color: stateColor}">
{{orderInfo.stateText}}
</view>
</view>
<view class="order--flex">
<image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
<view class="order--title">{{orderInfo.name}}</view>
<view class="order--count">
<view class="order--price"><text></text>{{orderInfo.price}}</view>
<view class="order--sum">{{orderInfo.sum}}</view>
</view>
</view>
</block>
<block v-else>
<view class="order--group">
<view class="order--group--header">
<image class="logo" v-if="orderInfo.store.logo != ''" :src="orderInfo.store.logo" mode="aspectFill"></image>
<view class="store">
{{orderInfo.store.name}}
</view>
<view class="stateText" :style="{color: stateColor}">
{{orderInfo.stateText}}
</view>
</view>
<view class="order--group--flex" v-for="(storeItem, storeGood) in orderInfo.storesGoods" :key="storeGood">
<image class="order--cover" :src="storeItem.cover" mode="aspectFill"></image>
<view class="order--title">{{storeItem.name}}</view>
<view class="order--count">
<view class="order--price"><text></text>{{storeItem.price}}</view>
<view class="order--sum">{{storeItem.sum}}</view>
</view>
</view>
</view>
</block>
<slot name="btns">
<view class="order--btns">
<block v-for="(btnItem, btnIndex) in orderBtns" :key="btnIndex">
<view class="item" @click="$emit('onBtn', {type: btnItem.type, order: orderInfo})" :style="btnItem.style">{{btnItem.text}}</view>
</block>
</view>
</slot>
</view>
</view>
</template>
<script>
export default{
props:{
// 订单样式否为块
pattern: {
type: Boolean,
default: true
},
// 店铺模式
stores: {
type: Boolean,
default: false
},
// 订单信息
orderInfo: {
type: Object,
default: () => {
return {
cover : "",
name : "",
price : "",
sum : 1,
stateText : ""
}
}
},
// 状态标签颜色
stateColor: {
type : String,
default : "#FF6160"
},
// 可操作按钮组
orderBtns: {
type : Array,
default : () => {
return [
{
text: "订单详情",
type: "info"
},{
text : "删除订单",
type : "delete",
style: { color: "#FF6160" }
}
]
}
}
}
}
</script>
<style scoped lang="scss">
$margin: 30rpx;
$radius: 10rpx;
.text-nowrap {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-ellipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.order--content{
background: white;
&.chunk{
margin: $margin $margin;
border-radius: $radius;
padding: $margin;
}
&.broad{
padding: $margin;
border-bottom: solid 1rpx #ddd;
}
.order--header{
display: flex;
justify-content: space-between;
padding-bottom: $margin;
align-items: center;
& > .order--no{
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
}
&> .stateText{
font-size: 26rpx;
}
}
.order--flex{
display: flex;
align-items: center;
.order--cover{
vertical-align: top;
width: 128rpx;
height: 128rpx;
}
.order--title{
@extend .text-ellipsis;
text-align: left;
flex: 1;
padding-left: $margin;
font-size: 28rpx;
line-height: 40rpx;
}
.order--count{
text-align: right;
padding-left: $margin;
line-height: 40rpx;
.order--price{
font-size: 30rpx;
font-weight: bold;
&>text{
font-size: 24rpx;
}
}
.order--sum{
font-size: 26rpx;
color: #777;
}
}
}
.order--group{
.order--group--header{
padding-bottom: $margin;
display: flex;
justify-content: space-between;
align-items: center;
&> .logo{
width: 38rpx;
height: 38rpx;
vertical-align: middle;
margin-right: $margin/2;
}
&> .store{
@extend .text-nowrap;
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
}
&> .stateText{
font-size: 26rpx;
}
}
.order--group--flex{
@extend .order--flex;
margin-bottom: $margin - 10;
&:last-child{
margin: 0;
}
}
}
.order--btns{
display: flex;
justify-content: flex-end;
padding-top: $margin - 10;
&> .item{
font-size: 26rpx;
margin-left: $margin/2;
color: #333;
line-height: 56rpx;
border: solid 1rpx #ddd;
padding: 0 ($margin - 10);
border-radius: 28rpx;
}
}
}
</style>

View File

@@ -0,0 +1,80 @@
{
"id": "oct-order",
"displayName": "oct-order",
"version": "1.0.0",
"description": "oct-order",
"keywords": [
"oct-order"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@@ -0,0 +1 @@
# 订单列表

View File

@@ -1,7 +1,7 @@
var isReady=false;var onReadyCallbacks=[];
var isServiceReady=false;var onServiceReadyCallbacks=[];
var __uniConfig = {"pages":["pages/index/index","pages/record/index","pages/store/index","pages/user/index","pages/auth/auth","pages/store/goods","pages/store/buy"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"ZH健康","navigationBarBackgroundColor":"#F3F6FB","backgroundColorTop":"#F3F6FB","backgroundColorBottom":"#F3F6FB"},"tabBar":{"borderStyle":"white","selectedColor":"#34CE98","list":[{"iconPath":"static/tabBar/tabBar_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png","pagePath":"pages/index/index","text":"发现"},{"iconPath":"static/tabBar/tabBar_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png","pagePath":"pages/record/index","text":"记录"},{"iconPath":"static/tabBar/tabBar_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png","pagePath":"pages/store/index","text":"商城"},{"iconPath":"static/tabBar/tabBar_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png","pagePath":"pages/user/index","text":"我的"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"健康监测","compilerVersion":"3.3.5","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniConfig = {"pages":["pages/index/index","pages/record/index","pages/store/index","pages/user/index","pages/auth/auth","pages/store/goods","pages/store/buy"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"ZH健康","navigationBarBackgroundColor":"#F3F6FB","backgroundColorTop":"#F3F6FB","backgroundColorBottom":"#F3F6FB"},"tabBar":{"borderStyle":"white","selectedColor":"#34CE98","list":[{"iconPath":"static/tabBar/tabBar_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png","pagePath":"pages/index/index","text":"发现"},{"iconPath":"static/tabBar/tabBar_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png","pagePath":"pages/record/index","text":"记录"},{"iconPath":"static/tabBar/tabBar_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png","pagePath":"pages/store/index","text":"商城"},{"iconPath":"static/tabBar/tabBar_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png","pagePath":"pages/user/index","text":"我的"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"健康监测","compilerVersion":"3.3.5","entryPagePath":"pages/store/buy","entryPageQuery":"","realEntryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"发现","navigationStyle":"custom"}},{"path":"/pages/record/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"记录","navigationStyle":"custom"}},{"path":"/pages/store/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"健康生活","titleNView":{"backgroundColor":"#FFFFFF","titleSize":"16","buttons":[{"float":"left","text":"","fontSrc":"/static/iconfont.ttf","color":"#666","fontSize":"20px"},{"float":"right","text":"","fontSrc":"/static/iconfont.ttf","color":"#666","fontSize":"20px"}]}}},{"path":"/pages/user/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"我的","navigationStyle":"custom"}},{"path":"/pages/auth/auth","meta":{},"window":{"navigationBarTitleText":"登录","navigationStyle":"custom"}},{"path":"/pages/store/goods","meta":{},"window":{"navigationStyle":"custom","navigationBarTitleText":"详情","titleNView":{"backgroundColor":"#FFFFFF","type":"transparent"}}},{"path":"/pages/store/buy","meta":{},"window":{"navigationBarTitleText":"确认订单","enablePullDownRefresh":false}}];
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__C29473D","name":"健康监测","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F3F6FB"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},"apple":{},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"allowsInlineMediaPlayback":true,"safearea":{"background":"#FFFFFF","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"3.3.5","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"borderStyle":"rgba(255,255,255,0.4)","selectedColor":"#34CE98","list":[{"iconPath":"static/tabBar/tabBar_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png","pagePath":"pages/index/index","text":"发现"},{"iconPath":"static/tabBar/tabBar_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png","pagePath":"pages/record/index","text":"记录"},{"iconPath":"static/tabBar/tabBar_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png","pagePath":"pages/store/index","text":"商城"},{"iconPath":"static/tabBar/tabBar_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png","pagePath":"pages/user/index","text":"我的"}],"height":"50px","child":["lauchwebview"],"selected":0},"launch_path":"__uniappview.html"}}
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__C29473D","name":"健康监测","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F3F6FB"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},"apple":{},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"arguments":"{\"id\":0,\"name\":\"pages/store/buy\",\"pathName\":\"pages/store/buy\",\"query\":\"\"}","allowsInlineMediaPlayback":true,"safearea":{"background":"#FFFFFF","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"3.3.5","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"borderStyle":"rgba(255,255,255,0.4)","selectedColor":"#34CE98","list":[{"iconPath":"static/tabBar/tabBar_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png","pagePath":"pages/index/index","text":"发现"},{"iconPath":"static/tabBar/tabBar_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png","pagePath":"pages/record/index","text":"记录"},{"iconPath":"static/tabBar/tabBar_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png","pagePath":"pages/store/index","text":"商城"},{"iconPath":"static/tabBar/tabBar_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png","pagePath":"pages/user/index","text":"我的"}],"height":"50px"},"launch_path":"__uniappview.html"}}