Browse Source

优化样式

devlop
杨阁辉 4 years ago
parent
commit
2bee43a9ea
6 changed files with 117 additions and 40 deletions
  1. 10
      pages.json
  2. 30
      pages/add-paper/index.vue
  3. 46
      pages/mall/index.vue
  4. 37
      pages/paper-detail/index.vue
  5. 34
      pages/store-settings/index.vue
  6. BIN
      static/imgs/trade/uploadImage.png

10
pages.json

@ -216,6 +216,16 @@
} }
} }
,{
"path" : "pages/paper-detail/index",
"style" :
{
"navigationBarTitleText": "纸商城详情",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

30
pages/add-paper/index.vue

@ -61,7 +61,7 @@
<view class="" @click="paperpopupShow()"> <view class="" @click="paperpopupShow()">
<text v-if="form.categoryId === null" class="add-paph-text">请选择纸种信息</text> <text v-if="form.categoryId === null" class="add-paph-text">请选择纸种信息</text>
<text v-else>{{ form.categoryName }}</text> <text v-else>{{ form.categoryName }}</text>
<text><uni-icons type="right" color="#999" size="18"></uni-icons></text>
<text><uni-icons type="right" color="#000000" size="18"></uni-icons></text>
</view> </view>
</view> </view>
<view class="add-paper-border"></view> <view class="add-paper-border"></view>
@ -117,7 +117,8 @@
</view> </view>
<view class="label_value label-select" @click="popueShow(index)"> <view class="label_value label-select" @click="popueShow(index)">
<text class="paper-price-title text-right">{{ item.stockUnit === '1' ? '张' : '吨' }}</text> <text class="paper-price-title text-right">{{ item.stockUnit === '1' ? '张' : '吨' }}</text>
<image class="image" src="../../static/imgs/client/down-arrow-icon.png" mode=""></image>
<uni-icons type="bottom" color="#000000" size="18"></uni-icons>
</view> </view>
</view> </view>
<view class="paper-price-item"> <view class="paper-price-item">
@ -184,12 +185,15 @@
mode="grid" mode="grid"
file-extname="png,jpg" file-extname="png,jpg"
:limit="6" :limit="6"
:image-styles="imageStyles"
@progress="progress" @progress="progress"
@success="success" @success="success"
@fail="fail" @fail="fail"
@select="select" @select="select"
@delete="deleteImage" @delete="deleteImage"
/>
>
<image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
</uni-file-picker>
</view> </view>
</view> </view>
<uGap></uGap> <uGap></uGap>
@ -299,6 +303,17 @@ export default {
brandName: null, brandName: null,
categoryId: null categoryId: null
}, },
imageStyles: {
width: 100,
height: 100,
background:'#000',
border: {
color: '#f1f1f1',
width: 1,
style: 'solid',
radius: '2rpx'
}
},
range: [{ value: 0, text: '是' }, { value: 1, text: '否' }], range: [{ value: 0, text: '是' }, { value: 1, text: '否' }],
placeholderStyle: 'text-align: right;', placeholderStyle: 'text-align: right;',
searchList: [ searchList: [
@ -553,6 +568,12 @@ export default {
.paper-price-image { .paper-price-image {
padding: 22rpx 32rpx; padding: 22rpx 32rpx;
} }
.paper-upload-image{
width: 184rpx;
height: 184rpx;
background: rgba(220,222,224,0.50);
border-radius: 10rpx;
}
.paper-price-textArea { .paper-price-textArea {
background: #f7f8fa; background: #f7f8fa;
border-radius: 20rpx; border-radius: 20rpx;
@ -652,5 +673,8 @@ export default {
padding: 10rpx 32rpx; padding: 10rpx 32rpx;
background-color: #ffffff; background-color: #ffffff;
} }
.paper-backColor{
background-color: rgba(220,222,224,1);
}
} }
</style> </style>

46
pages/mall/index.vue

@ -20,7 +20,7 @@
</view> </view>
<uGap></uGap> <uGap></uGap>
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view v-for="(item, index) in listData" :key="index">
<view v-for="(item, index) in listData" :key="index" @click="detailInfo(item)">
<view class="content"> <view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> <image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class=""> <view class="">
@ -109,26 +109,26 @@ export default {
}) })
}) })
}, },
downCallback() {
this.orderPagination.pageNum = 1
this.quertData()
.then(({ list, total }) => {
this.$refs.list.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.list.refreshFail()
})
},
upCallback() {
this.orderPagination.pageNum++
this.quertData()
.then(({ list, total }) => {
this.$refs.list.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.list.loadFail()
})
},
// downCallback() {
// this.orderPagination.pageNum = 1
// this.quertData()
// .then(({ list, total }) => {
// this.$refs.list.refreshSuccess({ list, total })
// })
// .catch(() => {
// this.$refs.list.refreshFail()
// })
// },
// upCallback() {
// this.orderPagination.pageNum++
// this.quertData()
// .then(({ list, total }) => {
// this.$refs.list.loadSuccess({ list, total })
// })
// .catch(() => {
// this.$refs.list.loadFail()
// })
// },
// //
checkMall() { checkMall() {
go2('switching-mall') go2('switching-mall')
@ -150,6 +150,10 @@ export default {
// //
setting(){ setting(){
go2('store-settings') go2('store-settings')
},
//
detailInfo(){
go2('paper-detail')
} }
} }
} }

37
pages/paper-detail/index.vue

@ -0,0 +1,37 @@
<template>
<view class="paper-detail">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="paper-detail-title">纸品详情</view>
<view slot="left"></view>
<view slot="right"></view>
</uni-nav-bar>
</view>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
export default {
data() {
return {
}
},
methods: {
back,
}
}
</script>
<style lang="scss">
.paper-detail{
.paper-detail-title {
width: 100%;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
}
</style>

34
pages/store-settings/index.vue

@ -36,14 +36,18 @@
@fail="fail" @fail="fail"
@select="select" @select="select"
@delete="deleteImage" @delete="deleteImage"
/>
>
<image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
</uni-file-picker>
<view class="store-image-text ">建议尺寸200*200像素尺寸不匹配时图片将被压缩或拉伸以铺满画面</view> <view class="store-image-text ">建议尺寸200*200像素尺寸不匹配时图片将被压缩或拉伸以铺满画面</view>
</view> </view>
</view> </view>
<view class="store-log"> <view class="store-log">
<view class="tore-setting-name"><text>背景图片</text></view> <view class="tore-setting-name"><text>背景图片</text></view>
<view class="store-log store-image-flex"> <view class="store-log store-image-flex">
<uni-file-picker class="stotr-image-widtht" :limit="1" fileMediatype="image" :image-styles="imageStylest" />
<uni-file-picker class="stotr-image-widtht" :limit="1" fileMediatype="image" :image-styles="imageStylest" >
<image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
</uni-file-picker>
<view class="store-image-text">建议尺寸750*370像素尺寸不匹配时图片将被压缩或拉伸以铺满画面</view> <view class="store-image-text">建议尺寸750*370像素尺寸不匹配时图片将被压缩或拉伸以铺满画面</view>
</view> </view>
</view> </view>
@ -62,24 +66,14 @@ export default {
storeName: '', storeName: '',
imageValue: [], imageValue: [],
imageStyles: { imageStyles: {
width: 100,
width: 120,
height: 100, height: 100,
border: {
color: '#f1f1f1',
width: 1,
style: 'dashed',
radius: '4rpx'
}
border: false
}, },
imageStylest: { imageStylest: {
width: 183, width: 183,
height: 94, height: 94,
border: {
color: '#f1f1f1',
width: 1,
style: 'dashed',
radius: '4rpx'
}
border: false
} }
} }
}, },
@ -158,9 +152,11 @@ export default {
} }
.stotr-image-widtht{ .stotr-image-widtht{
width: 100%; width: 100%;
background-color: rgba(220,222,224,1);
} }
.stotr-image-width{ .stotr-image-width{
width: 50%;
width: 48%;
background-color: rgba(220,222,224,1);
} }
.upload-btn{ .upload-btn{
position: absolute; position: absolute;
@ -168,5 +164,11 @@ export default {
bottom: 32rpx; bottom: 32rpx;
left: 32rpx; left: 32rpx;
} }
.paper-upload-image{
width: 120rpx;
height: 120rpx;
background: rgba(220,222,224,1);
border-radius: 10rpx;
}
} }
</style> </style>

BIN
static/imgs/trade/uploadImage.png

Before After
Width: 120  |  Height: 120  |  Size: 5.1 KiB
Loading…
Cancel
Save