hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片显示优化

Browse Source
This commit is contained in:
苟川东 2025-04-28 15:06:38 +08:00
parent 2c2350554c
commit eb1b1d3e09
8 changed files with 89 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/config.js
View File

@ -3,7 +3,7 @@ let accountInfo = wx.getAccountInfoSync();
let envVersion = accountInfo.miniProgram.envVersion
//手动指定版本
envVersion = 'trial'
// envVersion = 'trial'
let hosts = {
"develop": 'http://wanyu.test',

56
components/me-icon/me-icon.css
View File

@ -1,45 +1,51 @@
.icon-arrow-up-line:before {
content: "\e90d";
}
.icon-progress-2-line:before {
content: "\e90e";
}
.icon-reset-left-line:before {
content: "\e90c";
}
.icon-upload-cloud-fill:before {
content: "\e90b";
}
.icon-arrow-right:before {
content: "\e90a";
}
.icon-info:before {
.icon-arrow-right-circle:before {
content: "\e900";
}
.icon-call:before {
.icon-arrow-right:before {
content: "\e901";
}
.icon-user:before {
.icon-arrow-up-line:before {
content: "\e902";
}
.icon-logout:before {
.icon-call:before {
content: "\e903";
}
.icon-navigation:before {
.icon-checkbox-blank-circle:before {
content: "\e904";
}
.icon-flashlight:before {
.icon-checkbox-circle:before {
content: "\e905";
}
.icon-time:before {
.icon-close-circle-fill:before {
content: "\e906";
}
.icon-arrow-right-circle:before {
.icon-flashlight:before {
content: "\e907";
}
.icon-checkbox-circle:before {
.icon-info:before {
content: "\e908";
}
.icon-checkbox-blank-circle:before {
.icon-logout:before {
content: "\e909";
}
.icon-navigation:before {
content: "\e90a";
}
.icon-progress-2-line:before {
content: "\e90b";
}
.icon-reset-left-fill:before {
content: "\e90c";
}
.icon-reset-left-line:before {
content: "\e90d";
}
.icon-time:before {
content: "\e90e";
}
.icon-upload-cloud-fill:before {
content: "\e90f";
}
.icon-user:before {
content: "\e910";
}

BIN
components/me-icon/me-icon.ttf
View File

Binary file not shown.

8
pages/order/arrived-on-site.vue
View File

@ -11,9 +11,15 @@
<view class="desc flex-l">请上传上门的打卡照片（最多 10 张）</view>
</view>
<view class="imgs-ctr">
<view v-for="(imgUrl, index) in images" :key="index" @click="delImg(index)" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<view class="img-item" v-for="(imgUrl, index) in images" :key="index">
<view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
<image class="img" mode="aspectFill" :src="imgUrl"></image>
</view>
<view class="del" @click="delImg(index)">
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
</view>
</view>
<view @click="upload()" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
hover-start-time="0" hover-stay-time="50">
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>

16
pages/order/complete-service.vue
View File

@ -11,9 +11,15 @@
<view class="desc flex-l">请上传完成图片（最多 10 张）</view>
</view>
<view class="imgs-ctr">
<view v-for="(imgUrl, index) in submitData.complete_images" :key="index" @click="delImg(index)" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<view class="img-item" v-for="(imgUrl, index) in submitData.complete_images" :key="index">
<view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
<image class="img" mode="aspectFill" :src="imgUrl"></image>
</view>
<view class="del" @click="delImg(index)">
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
</view>
</view>
<view @click="upload('complete')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
hover-start-time="0" hover-stay-time="50">
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
@ -59,9 +65,15 @@
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
<view class="up flex-c">点击上传</view>
</view>
<view v-else @click="delPaymentImg()" class="img-ctr">
<view v-else class="img-item">
<view @click="helpers.previewImage(submitData.payment_image)" class="img-ctr">
<image class="img" mode="aspectFill" :src="submitData.payment_image"></image>
</view>
<view class="del" @click="delPaymentImg()">
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
</view>
</view>
</view>
</view>
</view>

25
pages/order/order-info.vue
View File

@ -88,7 +88,7 @@
<view class="images">
<view class="title flex-l">上门图片</view>
<view class="imgs-ctr">
<view @click="previewImage(imgUrl)" v-for="(imgUrl, index) in data.arrive_images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<view @click="helpers.previewImage(imgUrl)" v-for="(imgUrl, index) in data.arrive_images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
<image class="img" mode="aspectFill" :src="imgUrl"></image>
</view>
</view>
@ -100,7 +100,7 @@
<view class="images line-after">
<view class="title flex-l">完成图片</view>
<view class="imgs-ctr">
<view @click="previewImage(imgUrl)" v-for="(imgUrl, index) in data.images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<view @click="helpers.previewImage(imgUrl)" v-for="(imgUrl, index) in data.images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<image class="img" mode="aspectFill" :src="imgUrl"></image>
</view>
</view>
@ -126,7 +126,7 @@
<view class="images">
<view class="title flex-l">收款凭证</view>
<view class="imgs-ctr">
<view @click="previewImage(data.image)" :key="index" class="img-ctr">
<view @click="helpers.previewImage(data.image)" :key="index" class="img-ctr">
<image class="img" mode="aspectFill" :src="data.image"></image>
</view>
</view>
@ -295,21 +295,6 @@ const getPriceDescText = () => {
const getOrderStatusText = (status) => {
return enums.WORKBENCH_STATUS_TEXT[status]
}
//预览图片
const previewImage = (url) => {
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
</script>
<style lang="scss" scoped>
@ -422,8 +407,8 @@ const previewImage = (url) => {
display: flex;
flex-wrap: wrap;
.img-ctr {
width: 100rpx;
height: 100rpx;
width: 120rpx;
height: 120rpx;
margin-right: 36rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;

19
static/css/form.scss
View File

@ -89,10 +89,19 @@
min-height: 100rpx;
display: flex;
flex-wrap: wrap;
.img-item {
position: relative;
.del {
position: absolute;
top: 0;
left: 94rpx;
width: 48rpx;
height: 48rpx;
}
}
.img-ctr {
width: 100rpx;
height: 100rpx;
margin-right: 36rpx;
width: 120rpx;
height: 120rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
.img {
@ -102,8 +111,8 @@
}
}
.up-ctr {
width: 100rpx;
height: 100rpx;
width: 120rpx;
height: 120rpx;
background: var(--contentBgColor);
border-radius: 8rpx;
margin-top: 16rpx;

14
utils/helpers.js
View File

@ -180,5 +180,19 @@ class helpers {
}, timeout)
}
static previewImage = (url) => {
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
}
export default helpers