qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

【up】纸商城页面

devlop
buffeyu 4 years ago
parent
da6f02c7bb
commit
d19852fc4b
17 changed files with 1421 additions and 438 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 433
      components/bussiness-components/packingStationItem.vue
  2. 315
      pages.json
  3. 206
      pages/client-detail/base-paper-deals.vue
  4. 38
      pages/client-detail/basic-information.vue
  5. 249
      pages/client-detail/equipment-information.vue
  6. 10
      pages/client-detail/index.vue
  7. 291
      pages/client-detail/lv-select.vue
  8. 49
      pages/client-detail/no-data.vue
  9. 4
      pages/client-detail/waste-paper-trading.vue
  10. 264
      pages/mall/index.vue
  11. BIN
      static/imgs/client-detail/arrow-right-icon.png
  12. BIN
      static/imgs/client-detail/no-data-icon.png
  13. BIN
      static/imgs/client-detail/yzjy-icon.png
  14. BIN
      static/imgs/mall/cut-icon.png
  15. BIN
      static/imgs/mall/grounding-icon.png
  16. BIN
      static/imgs/mall/sold-out-icon.png
  17. BIN
      static/imgs/mall/zsc-bg-icon.png

433
components/bussiness-components/packingStationItem.vue
View File

@ -1,228 +1,229 @@
<template> <template>
<view class="packing-area">
<view class="info">
<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image>
<view class="content">
<view class="title">
<text class="text">{{ info.enterpriseName }}</text>
<image
class="icon"
:src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"
></image>
</view>
<view class="desc">
<text>{{ transformBusiness(info.business) }}</text>
</view>
<view v-show="info.whetherCooperation === 1" class="box-area">
<view class="box">
<view><text class="title">月采购量</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">月采购额</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">最近购买</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text>
</view>
</view>
</view>
<view v-show="info.whetherCooperation === 0" class="box-area">
<view class="box">
<view><text class="title">法定代表人</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">注册资本</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">成立时间</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="other">
<view class="box">
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
<text class="text">{{ info.detailedAddress || '未知' }}</text>
</view>
<view class="divide"></view>
<view class="box">
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image>
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text>
</view>
</view>
</view>
<view class="packing-area">
<view class="info" @tap="goDetail">
<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image>
<view class="content">
<view class="title">
<text class="text">{{ info.enterpriseName }}</text>
<image class="icon" :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"></image>
</view>
<view class="desc">
<text>{{ transformBusiness(info.business) }}</text>
</view>
<view v-show="info.whetherCooperation === 1" class="box-area">
<view class="box">
<view><text class="title">月采购量</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">月采购额</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">最近购买</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text>
</view>
</view>
</view>
<view v-show="info.whetherCooperation === 0" class="box-area">
<view class="box">
<view><text class="title">法定代表人</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">注册资本</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text>
</view>
</view>
<view class="box">
<view><text class="title">成立时间</text></view>
<view style="margin-top: 16rpx">
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="other">
<view class="box">
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
<text class="text">{{ info.detailedAddress || '未知' }}</text>
</view>
<view class="divide"></view>
<view class="box">
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image>
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text>
</view>
</view>
</view>
</template> </template>
<script> <script>
import { go2 } from '@/utils/hook.js'
export default { export default {
props: {
info: {
type: Object,
default: () => ({
enterpriseName: '广州市金骏彩色印务有限公司',
enterpriseLogo: '',
business: '生产画册、书刊、包装盒、手提袋子、快递箱',
whetherCooperation: 1,
monthlyPurchaseQuantity: 100,
monthlyTradingQuota: 200,
lastTradingDate: '2020-12-12',
openingDate: '2020-12-12',
legalPerson: '张三',
registeredCapital: 1000,
contactNumber: '13888888888',
detailedAddress: '广州市天河区天河路'
})
}
},
methods: {
transformBusiness(business) {
let text = business?.trim() || '未知'
if (text.length > 17) {
text = text.substr(0, 17) + '...'
}
return '主营：' + text
},
transformDate(date) {
if (date) {
return date.split('-').join('/')
}
return ''
},
transformPhoneNum(phoneNum) {
if (phoneNum) {
if (this.hasLogin) {
return phoneNum
} else {
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
}
return '--'
}
},
computed: {
hasLogin() {
return this.$store.state.qnToken != ''
}
}
props: {
info: {
type: Object,
default: () => ({
enterpriseName: '广州市金骏彩色印务有限公司',
enterpriseLogo: '',
business: '生产画册、书刊、包装盒、手提袋子、快递箱',
whetherCooperation: 1,
monthlyPurchaseQuantity: 100,
monthlyTradingQuota: 200,
lastTradingDate: '2020-12-12',
openingDate: '2020-12-12',
legalPerson: '张三',
registeredCapital: 1000,
contactNumber: '13888888888',
detailedAddress: '广州市天河区天河路'
})
}
},
methods: {
goDetail() {
go2('client-detail', { id: this.info.enterpriseId })
},
transformBusiness(business) {
let text = business?.trim() || '未知'
if (text.length > 17) {
text = text.substr(0, 17) + '...'
}
return '主营：' + text
},
transformDate(date) {
if (date) {
return date.split('-').join('/')
}
return ''
},
transformPhoneNum(phoneNum) {
if (phoneNum) {
if (this.hasLogin) {
return phoneNum
} else {
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
}
return '--'
}
},
computed: {
hasLogin() {
return this.$store.state.qnToken != ''
}
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.packing-area { .packing-area {
width: 750rpx;
background-color: #fff;
.info {
width: 750rpx;
padding: 30rpx 32rpx 48rpx;
border-bottom: 2rpx solid #dddddd;
display: flex;
flex-direction: row;
align-items: flex-start;
.image {
width: 140rpx;
height: 140rpx;
flex-grow: 0;
flex-shrink: 0;
margin-right: 20rpx;
}
.content {
flex-grow: 1;
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.text {
font-size: 32rpx;
color: #000000;
font-weight: 600;
}
.icon {
width: 100rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
margin-left: 8rpx;
}
}
.desc {
margin-top: 14rpx;
font-size: 26rpx;
color: #333333;
}
.box-area {
margin-top: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.box {
width: 170rpx;
.title {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 24rpx;
color: #888888;
}
.value {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
}
}
}
}
.other {
width: 750rpx;
padding: 24rpx 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.divide {
width: 2rpx;
height: 32rpx;
background: #d8d8d8;
}
.box {
width: 340rpx;
margin: 0 32rpx;
display: flex;
flex-direction: row;
align-items: center;
.icon {
width: 52rpx;
height: 52rpx;
flex-grow: 0;
flex-shrink: 0;
margin-right: 10rpx;
}
.text {
font-size: 24rpx;
color: #555555;
}
}
}
width: 750rpx;
background-color: #fff;
.info {
width: 750rpx;
padding: 30rpx 32rpx 48rpx;
border-bottom: 2rpx solid #dddddd;
display: flex;
flex-direction: row;
align-items: flex-start;
.image {
width: 140rpx;
height: 140rpx;
flex-grow: 0;
flex-shrink: 0;
margin-right: 20rpx;
}
.content {
flex-grow: 1;
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.text {
font-size: 32rpx;
color: #000000;
font-weight: 600;
}
.icon {
width: 100rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
margin-left: 8rpx;
}
}
.desc {
margin-top: 14rpx;
font-size: 26rpx;
color: #333333;
}
.box-area {
margin-top: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.box {
width: 170rpx;
.title {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 24rpx;
color: #888888;
}
.value {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
}
}
}
}
.other {
width: 750rpx;
padding: 24rpx 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.divide {
width: 2rpx;
height: 32rpx;
background: #d8d8d8;
}
.box {
width: 340rpx;
margin: 0 32rpx;
display: flex;
flex-direction: row;
align-items: center;
.icon {
width: 52rpx;
height: 52rpx;
flex-grow: 0;
flex-shrink: 0;
margin-right: 10rpx;
}
.text {
font-size: 24rpx;
color: #555555;
}
}
}
} }
</style> </style>

315
pages.json
View File

@ -1,161 +1,158 @@
{ {
"pages": [
{
"path": "pages/client/index",
"style": {
"navigationBarTitleText": "客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-list/index",
"style": {
"navigationBarTitleText": "客户列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "客户搜索",
"navigationStyle": "custom"
}
},
{
"path": "pages/add-user/index",
"style": {
"navigationBarTitleText": "添加客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/trade/index",
"style": {
"navigationBarTitleText": "交易",
"navigationStyle": "custom"
}
},
{
"path": "pages/mall/index",
"style": {
"navigationBarTitleText": "商城"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/agreement/index",
"style": {
"navigationBarTitleText": "用户与隐私协议"
}
},
{
"path": "pages/client-detail/index",
"style": {
"navigationBarTitleText": "客户详情",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-credit/index",
"style": {
"navigationBarTitleText": "客户授信",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-signing/index",
"style": {
"navigationBarTitleText": "客户签约",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-credit-limit/index",
"style": {
"navigationBarTitleText": "授信额度",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-credit-list/index",
"style": {
"navigationBarTitleText": "客户授信列表",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/my-offer/index",
"style": {
"navigationBarTitleText": "我的报价",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"backgroundColorTop": "#FFFFFF"
},
"tabBar": {
"color": "#888",
"selectedColor": "#007AFF",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"pagePath": "pages/client/index",
"iconPath": "static/imgs/tabbar/client-gray.png",
"selectedIconPath": "static/imgs/tabbar/client-blue.png",
"text": "客户"
},
{
"pagePath": "pages/trade/index",
"iconPath": "static/imgs/tabbar/trade-gray.png",
"selectedIconPath": "static/imgs/tabbar/trade-blue.png",
"text": "交易"
},
{
"pagePath": "pages/mall/index",
"iconPath": "static/imgs/tabbar/mall-gray.png",
"selectedIconPath": "static/imgs/tabbar/mall-blue.png",
"text": "纸商城"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/imgs/tabbar/mine-gray.png",
"selectedIconPath": "static/imgs/tabbar/mine-blue.png",
"text": "我的"
}
]
},
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
}
"pages": [{
"path": "pages/client/index",
"style": {
"navigationBarTitleText": "客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-list/index",
"style": {
"navigationBarTitleText": "客户列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "客户搜索",
"navigationStyle": "custom"
}
},
{
"path": "pages/add-user/index",
"style": {
"navigationBarTitleText": "添加客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/trade/index",
"style": {
"navigationBarTitleText": "交易",
"navigationStyle": "custom"
}
},
{
"path": "pages/mall/index",
"style": {
"navigationBarTitleText": "商城",
"navigationStyle": "custom"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/agreement/index",
"style": {
"navigationBarTitleText": "用户与隐私协议"
}
},
{
"path": "pages/client-detail/index",
"style": {
"navigationBarTitleText": "客户详情",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-credit/index",
"style": {
"navigationBarTitleText": "客户授信",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-signing/index",
"style": {
"navigationBarTitleText": "客户签约",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-credit-limit/index",
"style": {
"navigationBarTitleText": "授信额度",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/client-credit-list/index",
"style": {
"navigationBarTitleText": "客户授信列表",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/my-offer/index",
"style": {
"navigationBarTitleText": "我的报价",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"backgroundColorTop": "#FFFFFF"
},
"tabBar": {
"color": "#888",
"selectedColor": "#007AFF",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [{
"pagePath": "pages/client/index",
"iconPath": "static/imgs/tabbar/client-gray.png",
"selectedIconPath": "static/imgs/tabbar/client-blue.png",
"text": "客户"
},
{
"pagePath": "pages/trade/index",
"iconPath": "static/imgs/tabbar/trade-gray.png",
"selectedIconPath": "static/imgs/tabbar/trade-blue.png",
"text": "交易"
},
{
"pagePath": "pages/mall/index",
"iconPath": "static/imgs/tabbar/mall-gray.png",
"selectedIconPath": "static/imgs/tabbar/mall-blue.png",
"text": "纸商城"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/imgs/tabbar/mine-gray.png",
"selectedIconPath": "static/imgs/tabbar/mine-blue.png",
"text": "我的"
}
]
},
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}]
}
} }

206
pages/client-detail/base-paper-deals.vue
View File

@ -1,22 +1,204 @@
<template> <template>
<view>
原纸交易
<view class="warpper">
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="sum-box">
<view class="">
<view class="title">
交易金额
</view>
<view class="value">
458 682.00
</view>
</view>
<view class="">
<view class="title">
总交易量(吨)
</view>
<view class="value">
125.7752
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="header">
<view class="left-title">
XJ 202112235389
</view>
<view class="right-title">
¥ 22045.78
</view>
</view>
<view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="">
<view class="title">
金蝶蓝白卡
</view>
<view class="desc">
白卡纸/金蝶蓝/350g/787*1092/2200张
</view>
</view>
</view>
<view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="">
<view class="title">
丽盈白卡
</view>
<view class="desc">
白卡纸/丽盈/350g/787*1092/2200张
</view>
</view>
</view>
<view class="other">
<view class="time">
2021-12-23 12:30:45
</view>
<view class="btn">
更多详情
<image class="icon" src="/static/imgs/client-detail/arrow-right-icon.png"></image>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view> </view>
</template> </template>
<script> <script>
export default {
data() {
return {
}
},
methods: {
import uGap from '@/components/u-gap/u-gap.vue'
export default {
components: { uGap },
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: false
}
} }
},
methods: {
downCallback() {},
upCallback() {}
} }
}
</script> </script>
<style>
<style lang="scss">
.warpper {
width: 750rpx;
.sum-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
// text-align: center;
height: 184rpx;
background: url('/static/imgs/client-detail/yzjy-icon.png') no-repeat;
background-size: 100%;
.title {
font-size: 26rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 500;
}
.value {
font-size: 56rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: left;
font-weight: 500;
margin-top: 16rpx;
}
}
.card-box {
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 88rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #DDDDDD;
padding: 0rpx 32rpx;
.left-title {
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.right-title {
font-size: 30rpx;
color: #FF5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
}
}
.content {
display: flex;
flex-direction: row;
align-items: center;
height: 148rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #DDDDDD;
padding: 0rpx 32rpx;
.image {
width: 100rpx;
height: 100rpx;
flex: 0 0 100rpx;
margin-right: 20rpx;
}
.title {
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.desc {
padding-top: 26rpx;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
}
.other {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 80rpx;
background: #FFFFFF;
padding: 0rpx 32rpx;
.time {
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.btn {
font-size: 28rpx;
color: #007AFF;
letter-spacing: 0;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
}
.icon {
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
}
}
</style> </style>

38
pages/client-detail/basic-information.vue
View File

@ -79,21 +79,21 @@
<view class="cf-info"> <view class="cf-info">
<view class="row"> <view class="row">
<view class="left"> <view class="left">
<view class="info-title"><text>产房面积：</text></view>
<view class="info-value"><text>{{info.plantArea}}m²</text></view>
<view class="title"><text>产房面积：</text></view>
<view class="value"><text>{{info.plantArea}}m²</text></view>
</view> </view>
<view class="right"> <view class="right">
<view class="info-title"><text>年营业额：</text></view>
<view class="info-value"><text>{{info.annualTurnover}}万</text></view>
<view class="title"><text>年营业额：</text></view>
<view class="value"><text>{{info.annualTurnover}}万</text></view>
</view> </view>
</view> </view>
<view class="row"> <view class="row">
<view class="left"> <view class="left">
<view class="info-title"><text>产房照片：</text></view>
<view class="title"><text>产房照片：</text></view>
<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view> <view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view>
</view> </view>
<view class="right"> <view class="right">
<view class="info-title"><text>租赁合同：</text></view>
<view class="title"><text>租赁合同：</text></view>
<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view> <view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view>
</view> </view>
</view> </view>
@ -264,10 +264,10 @@ export default {
this.seemoreFlag = !this.seemoreFlag this.seemoreFlag = !this.seemoreFlag
}, },
transformDate(date) { transformDate(date) {
if (date) {
return `${date[0]}/${date[1]}/${date[2]}`
}
return ''
if (date) {
return date.split('-').join('/')
}
return ''
}, },
previewImg(index, list) { previewImg(index, list) {
uni.previewImage({ uni.previewImage({
@ -451,15 +451,29 @@ export default {
align-items: center; align-items: center;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.title {
flex: 0 0 150rpx;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
margin-right: 8rpx;
}
.value {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.left { .left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
width: 60%;
} }
.right { .right {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
width: 40%;
} }
} }

249
pages/client-detail/equipment-information.vue
View File

@ -1,22 +1,247 @@
<template> <template>
<view>
设备信息
<view class="warpper">
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="card-box">
<view class="header">
<view class="title">全自动立体糊盒机</view>
<view class="desc">近30天</view>
</view>
<view class="content">
<view class="info">
<view class="">
<view class="value">8900件</view>
<view class="title">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
设备产能
</view>
</view>
<view class="">
<view class="value">89 h</view>
<view class="title">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
工作时长
</view>
</view>
<view class="">
<view class="value">86%</view>
<view class="title">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
开机率
</view>
</view>
</view>
<view class="shrink-box" v-if="!seemoreFlag">
<view class="row">
<view class="left">
<view class="title">设备图片：</view>
<view class="look-over">点击查看</view>
</view>
<view class="right">
<view class="title">购买年份：</view>
<view class="value">2019年</view>
</view>
</view>
<view class="row">
<view class="left">
<view class="title">购买金额：</view>
<view class="value">2000万</view>
</view>
<view class="right">
<view class="title">设备产能：</view>
<view class="value">2000个/天</view>
</view>
</view>
<view class="row">
<view class="left">
<view class="title">成色：</view>
<view class="value">9成新</view>
</view>
<view class="right">
<view class="title">设备类型：</view>
<view class="value">糊盒机</view>
</view>
</view>
<view class="row">
<view class="left">
<view class="title">最大输纸 长度：</view>
<view class="value">2000mm</view>
</view>
<view class="right">
<view class="title">最大输纸 宽度：</view>
<view class="value">2000mm</view>
</view>
</view>
<view class="row">
<view class="left">
<view class="title">最大输纸 厚度：</view>
<view class="value">2000mm</view>
</view>
<view class="right">
<view class="title">咬口：</view>
<view class="value">2000mm</view>
</view>
</view>
</view>
</view>
<view class="see-more">
<view class="" @tap="seemoreTap">
<text>设备详情</text>
<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view> </view>
</template> </template>
<script> <script>
export default {
data() {
return {
}
},
methods: {
import lvSelect from './lv-select.vue'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
components: { lvSelect, uGap },
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: false
},
seemoreFlag: true
} }
},
methods: {
seemoreTap() {
this.seemoreFlag = !this.seemoreFlag
},
downCallback() {},
upCallback() {}
} }
}
</script> </script>
<style>
<style lang="scss">
.warpper {
.card-box {
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 88rpx;
background: #ffffff;
padding: 0rpx 36rpx 0rpx 32rpx;
.title {
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.desc {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
text-align: right;
font-weight: 400;
}
}
.content {
border-bottom: 2rpx solid #dddddd;
border-top: 2rpx solid #dddddd;
.info {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
height: 148rpx;
background: #ffffff;
.value {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.title {
margin-top: 16rpx;
font-size: 24rpx;
color: #888888;
letter-spacing: 0;
text-align: center;
font-weight: 400;
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
width: 32rpx;
height: 32rpx;
padding-right: 6rpx;
}
}
.shrink-box {
background: #f7f8fa;
padding: 8rpx 36rpx 16rpx 32rpx;
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 16rpx;
.left {
display: flex;
flex-direction: row;
width: 60%;
}
.right {
display: flex;
flex-direction: row;
width: 40%;
}
.title {
flex: 0 0 140rpx;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.value {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.look-over {
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
font-weight: 400;
}
}
}
}
.see-more {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 80rpx;
line-height: 80rpx;
background: #ffffff;
padding: 0rpx 32rpx;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.icon {
width: 24rpx;
height: 24rpx;
}
}
}
}
</style> </style>

10
pages/client-detail/index.vue
View File

@ -7,7 +7,7 @@
<!-- </view> --> <!-- </view> -->
</qnHeader> </qnHeader>
<view> <view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF" class="segmented"></uni-segmented-control>
<view class="content"> <view class="content">
<view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view> <view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view>
@ -78,5 +78,13 @@ export default {
line-height: 40rpx; line-height: 40rpx;
font-weight: 500; font-weight: 500;
} }
.segmented {
height: 88rpx;
border-bottom: 2rpx solid #ECECEC;
font-size: 28rpx;
color: #333333;
text-align: center;
font-weight: 400;
}
} }
</style> </style>

291
pages/client-detail/lv-select.vue
View File

@ -0,0 +1,291 @@
<template>
<view style="position: relative;" :class="size === 'small' ? 'small' : ''">
<view class="uni-flex" :class="{unishadow :uniShadow}">
<view class="uni-search-form uni-circular uni-background">
<icon type="search" size="14" class="uni-icon-position"/>
<input
type="text"
:placeholder="placeholder"
v-model="inputVal"
@input="onInput"
@focus="onFocus"
></input>
<icon v-if="isShowClearIcon" type="clear" size="16" class="uni-icon-clear" @tap="clearInputValue"/>
</view>
<view class="uni-action">
<button
:disabled="loading"
class="uni-cu-btn uni-bg-gradual-green uni-shadow-blur uni-round"
:class="[type === 'primary' ? 'uni-primary' : (type === 'success' ? 'uni-success' : (type === 'warning' ? 'uni-warning' : 'uni-error'))]"
hover-class="hover"
@click="handleSearch"
>搜索</button>
</view>
</view>
<view v-if="isShowSelect">
<view class="uni-combox__selector" v-if="inputIsShow">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty " v-if="loading">
<view>加载中··· </view>
</view>
<view class="uni-combox__selector-empty " v-if="!loading && dataListLength === 0" @tap="closeDielog">
<view>{{emptyTips}}</view>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in dataList" :key="index" @tap="onSelectorClick(index)">
<text>{{item[showValue]}}</text>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'select',
props: {
// placeholder: {
// type: String,
// default: '请输入信息'
// },
infoList: {
type: Array,
default () {
return []
}
},
value: {
type: String,
default: ''
},
showValue: {
type: String,
default: 'name'
},
emptyTips: {
type: String,
default: '暂无数据'
},
loading: {
type: Boolean,
default: false
},
btnStyleColor: {
type: Object,
default() {
return {}
}
},
uniShadow: {
type: Boolean,
default: true
},
type: {
type: String,
default: 'primary'
},
size: {
type: String,
default: 'medium'
},
isShowSelect: {
type: Boolean,
default: true
}
},
data() {
return {
inputIsShow: false,
inputVal: '',
dataList: [],
placeholder: '请输入信息',
isShowClearIcon: false
}
},
computed: {
dataListLength() {
return this.dataList.length
}
},
watch: {
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
},
infoList: {
handler(newVal) {
this.dataList = newVal
},
deep: true,
immediate: true
},
inputVal(val) {
if(!val.length) {
this.isShowClearIcon = false
}
}
},
methods: {
closeDielog() {
this.inputIsShow = false
},
onFocus() {
if(this.dataList.length) {
this.inputIsShow = true
this.isShowClearIcon = !!this.inputVal
}
},
onSelectorClick(index) {
this.inputIsShow = false
this.isShowClearIcon = false
this.inputVal = this.dataList[index][this.showValue]
this.$emit('input', this.inputVal)
this.$emit('change', this.dataList[index])
},
onInput() {
this.$emit('input', this.inputVal)
},
handleSearch() {
this.inputIsShow = true
this.$emit('handleSearch')
},
clearInputValue() {
this.inputVal = ''
}
}
}
</script>
<style scoped lang="scss">
// $selectWidth: 75%; // 下拉选择框宽度
.small {
transform: scale(.9, .9);
}
.uni-primary {
background-color: $uni-color-primary;
}
.uni-success {
background-color: #67c23a;
}
.uni-warning {
background-color: $uni-color-warning;
}
.uni-error {
background-color: $uni-color-error;
}
.hover{
transition: all .6s;
transform: scale(0.8,0.8);
}
.uni-flex{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.unishadow{
box-shadow: 0rpx 1rpx 5rpx #DDDDDD;
}
.uni-search-form{
position: relative;
width: 60%;
margin: 10rpx;
padding: 10rpx 80rpx;
font-size: 30rpx;
color: #999999;
}
.uniRound{
border-radius: 5px;
}
.uni-circular{
border-radius: 100rpx;
}
.uni-icon-position{
position: absolute;
top: 50%;
left: 26rpx;
transform: translate(0,-50%);
}
.uni-icon-clear{
position: absolute;
top: 50%;
right: 26rpx;
transform: translate(0,-50%);
}
.uni-background{
background-color: #F5F5F5;
}
/* button */
.uni-action{
width:120rpx;
height: 66rpx;
}
.uni-cu-btn{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 28rpx;
border: none;
// background-color: $uni-color-primary;
}
.uni-shadow-blur{
box-shadow: 0rpx 1rpx 10rpx #C8C7CC;
}
.uni-round{
border-radius: 100rpx;
}
.uni-combox__selector {
position: absolute;
top: 100rpx;
left: 40rpx;
box-sizing: border-box;
width: 75%; // 下拉框宽度
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
z-index: 999;
}
.uni-combox__selector-scroll {
max-height: 200px;
box-sizing: border-box;
}
.uni-combox__selector::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: solid 6px #FFFFFF;
border-right: solid 6px transparent;
border-left: solid 6px transparent;
left: 50%;
top: -6px;
margin-left: -6px;
}
.uni-combox__selector-empty{
text-align: center;
color: #8F8F94;
padding: 20rpx 0;
font-size: 28rpx;
}
.uni-combox__selector-item {
/* #ifdef APP-NVUE */
display: flex;
/* #endif */
font-size: 24rpx;
margin: 0px 10px;
padding: 20rpx 10rpx;
color: #808080;
}
.uni-combox__selector-item:hover {
background-color: #DDDDDD;
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
border-bottom: none;
}
</style>

49
pages/client-detail/no-data.vue
View File

@ -0,0 +1,49 @@
<template>
<view class="warpper">
<image class="icon" src="/static/imgs/client-detail/no-data-icon.png"></image>
<view class="text">
{{ title }}
</view>
</view>
</template>
<script>
export default {
props: {
title:{
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.warpper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 25%;
.icon {
width: 560rpx;
height: 320rpx;
}
.text {
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
}
</style>

4
pages/client-detail/waste-paper-trading.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<view> <view>
废纸交易
<noData title="暂无废纸交易数据"></noData>
</view> </view>
</template> </template>
<script> <script>
import noData from './no-data'
export default { export default {
components:{noData},
data() { data() {
return { return {

264
pages/mall/index.vue
View File

@ -1,40 +1,254 @@
<template> <template>
<view class="content">
mall
<view class="warpper">
<uni-nav-bar>
<view slot="left" class="left-title">纸商城</view>
<view slot="right" class="right-title">分享</view>
</uni-nav-bar>
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="top-box">
<view class="">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
</view>
<view class="center">
<view class="title">
东莞市隆兴纸业有限公司
</view>
<view class="desc">
全部商品 39 &nbsp; | &nbsp;上新 9
</view>
</view>
<view class="right">
<view class="cut">
切换商城
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
</view>
<view class="set">
设置
</view>
</view>
</view>
<uGap></uGap>
<view v-for="(item,index) in 6" :key="index">
<view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="">
<view class="title">
<view class="">
金蝶蓝白卡
</view>
<view class="">
<image class="icon" :src="1 === 1 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image>
</view>
</view>
<view class="sub-title">
金桂/白卡纸/金蝶蓝
</view>
<view class="desc">
克重(价格)：200(3900) 235(3900) 255(390
0)255(390
</view>
</view>
</view>
<view class="other">
<view class="time">
5分钟前
</view>
<view class="btn">
<view class="">
编辑
</view>
<view class="divide"></view>
<view class="">
下架
</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view> </view>
</template> </template>
<script> <script>
export default {
import uGap from '@/components/u-gap/u-gap.vue'
export default {
components: { uGap },
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: false
}
}
},
methods: {
downCallback() {},
upCallback() {}
} }
}
</script> </script>
<style>
.content {
<style lang="scss">
.warpper {
width: 750rpx;
.left-title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.right-title {
font-size: 28rpx;
color: #007aff;
text-align: right;
font-weight: 500;
}
.top-box {
display: flex; display: flex;
flex-direction: column;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
justify-content: space-around;
height: 180rpx;
background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
background-size: 100%;
.image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.right {
width: 140rpx;
}
.center {
position: relative;
left: -20rpx;
}
.title {
font-size: 34rpx;
color: #FFFFFF;
letter-spacing: 2rpx;
font-weight: 600;
margin-bottom: 12rpx;
}
.desc {
opacity: 0.75;
font-size: 28rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 500;
padding-right: 32rpx;
}
.cut {
display: flex;
align-items: center;
font-size: 24rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.cut-icon {
width: 29.42rpx;
height: 26.67rpx;
margin-left: 10rpx;
}
}
.set {
opacity: 0.75;
font-size: 28rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 500;
position: relative;
top: 39rpx;
left: 60rpx;
}
} }
.text-area {
.content {
background: #FFFFFF;
border-bottom: 2rpx solid #DDDDDD;
display: flex; display: flex;
justify-content: center;
flex-direction: row;
padding: 24rpx 0rpx 24rpx 32rpx;
.image {
width: 100rpx;
height: 100rpx;
flex: 0 0 100rpx;
margin-right: 18rpx;
}
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 32rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
.icon {
position: relative;
top: -22rpx;
width: 150rpx;
height: 50rpx;
}
}
.sub-title {
position: relative;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
top: -4rpx;
}
.desc {
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
padding-top: 10rpx;
line-height: 1.4;
}
} }
.title {
font-size: 36rpx;
color: #8f8f94;
.other {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 80rpx;
background: #FFFFFF;
padding: 0rpx 32rpx;
.time {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.btn {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #007AFF;
letter-spacing: 0;
text-align: right;
font-weight: 400;
}
.divide {
width: 2rpx;
height: 32rpx;
background: #d8d8d8;
margin: 0 32rpx;
}
.icon {
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
} }
}
</style> </style>

BIN
static/imgs/client-detail/arrow-right-icon.png
View File

Before After
Width: 32  |  Height: 32  |  Size: 543 B

BIN
static/imgs/client-detail/no-data-icon.png
View File

Before After
Width: 560  |  Height: 320  |  Size: 41 KiB

BIN
static/imgs/client-detail/yzjy-icon.png
View File

Before After
Width: 750  |  Height: 184  |  Size: 138 KiB

BIN
static/imgs/mall/cut-icon.png
View File

Before After
Width: 24  |  Height: 24  |  Size: 382 B

BIN
static/imgs/mall/grounding-icon.png
View File

Before After
Width: 150  |  Height: 50  |  Size: 2.1 KiB

BIN
static/imgs/mall/sold-out-icon.png
View File

Before After
Width: 150  |  Height: 50  |  Size: 2.7 KiB

BIN
static/imgs/mall/zsc-bg-icon.png
View File

Before After
Width: 750  |  Height: 180  |  Size: 33 KiB
Write Preview
Loading…
Cancel
Save