wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

我要找货接口对接，页面优化，反馈图片上传、页面优化

Browse Source
version/0412
mujinxia 1 year ago
parent 12c429415d
commit 482f8b5176
2 changed files with 467 additions and 429 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 175
      pages/news1/feedback.vue
  2. 721
      pages/news1/huoyuan.vue

175
pages/news1/feedback.vue
Unescape View File

@ -17,7 +17,7 @@
</view>
<view class="section1" v-if="OrderType == 0">
<u-form :model="form" ref="uForm">
<view class="section1Item">
<view class="section1Item c">
<u-form-item label="反馈类型" label-width="170">
<u-radio-group v-model="form.type">
@ -39,15 +39,24 @@
</u-form-item>
<u-form-item label="反馈类型" label-width="170" @click="typeShow = true">
<u-input v-model="form.shopText" placeholder="请选择门店" type="select" @click="typeShow = true" />
<u-action-sheet :list="shopList" :cancel-btn="false" v-model="typeShow"
@click="actionSheetCallback"></u-action-sheet>
<!-- <u-action-sheet :list="shopList" :cancel-btn="false" v-model="typeShow"
@click="actionSheetCallback"></u-action-sheet> -->
<u-picker :range="shopList" range-key="text" @confirm="actionSheetCallback($event)" v-model="typeShow"
mode="selector"></u-picker>
</u-form-item>
<u-form-item label="投诉内容" required label-width="150" label-position="top">
<u-input v-model="form.comment" class="textarea" placeholder="请填写投诉内容" type="textarea" />
<u-input v-model="form.comment" height="228" class="realAddr" placeholder="请填写投诉内容"
type="textarea"></u-input>
</u-form-item>
<u-upload :action="action" :header="header" :fileList="finishImageList" :previewFullImage="true"
@afterRead="afterRead" :maxCount="8" upload-text="上传照片" @delete="deletePic" name="1"
multiple></u-upload>
<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" @on-remove="transferRemove"
width="180" height="180" :file-list="finishImageList" :custom-btn="true" max-count="6">
<template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="$picUrl + '/static/news/icon-upload.png'"></image>
<view class="1">上传照片</view>
</view>
</template>
</u-upload>
</view>
<view class="section1Item" style="margin-top:20rpx;">
<u-form-item label="您的称呼" label-width="170">
@ -212,8 +221,8 @@ export default {
onLoad(params) {
},
onReachBottom() {
if (this.feedBackList.length < this.total && this.OrderType!=0) {
onReachBottom() {
if (this.feedBackList.length < this.total && this.OrderType != 0) {
this.pageNum++;
this.getFeedBack(this.OrderType)
}
@ -238,6 +247,35 @@ export default {
.catch(reject)
})
},
//接受上传返回的数据
transferSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.image_id = idList.join(',');
}
}
},
transferRemove(file, fileList) {
this.image_id = this.handleRemove(file, fileList);
},
handleRemove: function (file, fileList) {
let idList = []
fileList.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
return idList.join(',')
},
submit() {
const that = this
if (that.form.comment == '') {
@ -312,70 +350,7 @@ export default {
this.form.shopText = this.shopList[index].text;
this.shop_id = this.shopList[index].id
},
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
if (JSON.parse(result).code == 1) {
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
} else {
this[`fileList${event.name}`].splice(fileListLen, 1)
}
}
},
//上传照片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test',
token: getToken()
},
success: (res) => {
if (JSON.parse(res.data).code == 1) {
setTimeout(() => {
this.finishImageList.push({ url: JSON.parse(res.data).data.fullurl, path: JSON.parse(res.data).data.url })
resolve(res.data)
}, 1000)
} else {
uni.$u.toast(JSON.parse(res.data).msg)
resolve(res.data)
}
},
fail: (res) => {
console.log(res, "rrr")
}
});
})
},
//删除图片
deletePic(event) {
this.finishImageList.splice(event.index, 1)
},
}
}
</script>
@ -388,6 +363,45 @@ page {
}
.c {
padding-top: 20rpx;
overflow: hidden;
.slot-btn {
width: 180rpx;
height: 180rpx;
background: #F6F6F6;
border-radius: 10rpx;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #6D6D6D;
.l {
line-height: 30rpx;
margin-top: 10rpx;
}
image {
width: 50rpx;
height: 50rpx;
display: block;
margin: 0 auto;
margin-top: 30rpx;
}
}
}
.realAddr {
::v-deep .u-input {
padding: 10rpx 22upx !important;
background: #F7F8FA;
border-radius: 6rpx !important;
}
}
/* 订单tab */
.order-tab {
@ -464,13 +478,6 @@ page {
border: none;
}
// .textarea {
// height: 258rpx;
// border-radius: 3px;
// border: solid 1upx #F7F8FA;
// }
::v-deep .u-input__textarea {
padding: 26rpx;
}
@ -566,14 +573,17 @@ page {
color: #FF4D4D;
flex-shrink: 1;
}
.fbFlag2{
.fbFlag2 {
border: 1px solid #41B4EC;
color: #41B4EC;
}
.fbFlag3{
.fbFlag3 {
border: 1px solid #2DC37F;
color: #2DC37F
}
.fbTitleText {
flex: 1;
font-size: 28rpx;
@ -629,4 +639,5 @@ page {
justify-content: center;
flex-direction: column;
height: calc(100vh - 102rpx);
}</style>
}
</style>

721
pages/news1/huoyuan.vue
Unescape View File

@ -6,32 +6,32 @@
</view>
</view>
<image :src="$picUrl+'/static/news1/walletBg.png'" class="bgImg" mode="widthFix"></image>
<image :src="$picUrl + '/static/news1/walletBg.png'" class="bgImg" mode="widthFix"></image>
<view style="border:1px solid transparent;margin-top:-190px;position: relative;z-index: 9;">
<view class="process">
<view class="pItem" v-for="(item,index) in list" :key="index">
<view class="pItem" v-for="(item, index) in list" :key="index">
<image :src="item.icon" mode="widthFix" class="icon"></image>
<view class="title">{{item.title}}</view>
<view class="subTitle">{{item.subTitle}}</view>
<view class="title">{{ item.title }}</view>
<view class="subTitle">{{ item.subTitle }}</view>
</view>
</view>
<view class="formContent">
<u-form :model="form" ref="uForm">
<u-form :model="form" ref="uForm" boder>
<u-form-item label="商品名称" label-width="150">
<u-input placeholder="请填写您求购的商品名称" v-model="form.name" />
</u-form-item>
<u-form-item label="产品描述" label-width="150">
<u-form-item label="产品描述：" label-width="150">
<u-input maxlength="200" placeholder="如品牌、型号、参数 、配置、规格等，可复制电商标题、链接。" v-model="form.intro"
type="textarea" />
</u-form-item>
<u-form-item label="求购类型" label-width="150" @click="typeShow = true">
<u-input v-model="form.type" type="select" @click="typeShow = true" />
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow"
@click="actionSheetCallback"></u-action-sheet>
<u-input v-model="form.type" placeholder="请选择求购类型" type="select" @click="typeShow = true" />
<u-picker :range="type" range-key="text" @confirm="actionSheetCallback($event)" v-model="typeShow"
mode="selector"></u-picker>
</u-form-item>
<u-form-item label="交货日期" label-width="150" @click="timeShow = true">
<u-input v-model="form.date" type="select" @click="timeShow = true" />
<u-input v-model="form.date" type="select" placeholder="请选择交货日期" @click="timeShow = true" />
<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="timeChage"></u-picker>
</u-form-item>
<u-form-item label="求购数量" label-width="150">
@ -40,9 +40,9 @@
<u-form-item label="预估单价" label-width="150">
<view class="">
<view class="qujian">
<u-input placeholder="请输入价格区间" border v-model="form.startNum" />
<u-input placeholder="输入价格区间" border v-model="form.startNum" />
<text style="margin:0 10upx;">-</text>
<u-input placeholder="请输入价格区间" border v-model="form.endNum" />
<u-input placeholder="输入价格区间" border v-model="form.endNum" />
<text style="margin-left:10upx">元</text>
</view>
<u-checkbox-group>
@ -54,397 +54,424 @@
</view>
</u-form-item>
<u-form-item label="上传照片" label-width="150">
<view class="photo">
<view class="file_img" v-for="(image, imageIndex) in imageList" :key="imageIndex">
<text class="image-delete iconfont icon-shanchu"
@click="deleteImage(imageIndex)"></text>
<image :src="image.path"></image>
</view>
<view @click="chooseImage" class="slot-btn" hover-class="slot-btn__hover"
hover-stay-time="150">
<image src="/static/news/icon-upload.png"></image>
<view class="1">上传图片</view>
<view class="1">{{imageList.length>0?imageList.length:0}}/{{maxImageLength}}</view>
</view>
</view>
<u-form-item label="上传照片" label-width="150" class="c">
<u-upload :action="action" :header="header" @on-uploaded="transferSuccess"
@on-remove="transferRemove" width="180" height="180" :file-list="transferList"
:custom-btn="true" max-count="6">
<template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="$picUrl + '/static/news/icon-upload.png'"></image>
<view class="1">上传照片</view>
</view>
</template>
</u-upload>
</u-form-item>
<!-- <u-upload :fileList="finishImageList" :previewFullImage="true" @afterRead="afterRead" :maxCount="8"
width="180" height="180" upload-text="上传照片" @delete="deletePic" name="1" multiple></u-upload> -->
<u-form-item label="收货地址" label-width="150" @click="addrshow = true">
<u-input v-model="form.addr" type="select" @click="addrshow = true" />
<u-input v-model="form.addr" placeholder="请选择收货地址" type="select" @click="addrshow = true" />
<u-picker mode="region" v-model="addrshow" @confirm="getAddress"></u-picker>
</u-form-item>
<u-form-item label="备注" label-width="150" label-position="top">
<u-input v-model="form.remark" class="remarkInput" placeholder="请填写您要补充的内容，如规格、包装和运输等要求"
type="textarea" />
<u-form-item label="备注" class="self-form" label-width="150" label-position="top">
<u-input class="realAddr" height="258" type="textarea" placeholder="请填写您要补充的内容，如规格、包装和运输等要求"
v-model="form.remark">
</u-input>
</u-form-item>
</u-form>
<button class="submitBtn" @click="sureSubmit">确认发布</button>
<view class="submitBtn-box">
<button class="submitBtn" @click="sureSubmit">确认发布</button>
</view>
</view>
</view>
</view>
</template>
<script>
// import img from "@/static/news1/walletBg.png";
import * as help from '@/api/help'
import Config from '@/core/config'
import * as UploadApi from '@/api/upload'
export default {
data() {
let img= 'https://www.royaum.com.cn/static/news1/walletBg.png'
return {
background: {
background: 'url(' + img + ') center top no-repeat',
backgroundSize: '100%',
},
list: [{
icon: 'https://www.royaum.com.cn/static/news1/m1.png',
title: '发采购询价单',
subTitle: '填写所需信息一键发布询价'
},
{
icon: 'https://www.royaum.com.cn/static/news1/m2.png',
title: '卖家实时报价',
subTitle: '60分钟获取卖家报价'
},
{
icon: 'https://www.royaum.com.cn/static/news1/m3.png',
title: '卖家上架商品',
subTitle: '采购方案根据需要下单采购'
},
],
form: {
name: '',
intro: '',
type: '',
date: '',
num: '',
startNum: '',
endNum: '',
mianyi: true,
addr: '',
remark: ''
},
typeShow: false,
timeShow: false,
addrshow: false,
type: [{
text: '一件代发'
}],
timeParams: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
radioList: [{
name: '面议'
},
],
radio: '',
//照片
imageList: [],
maxImageLength:6,
imgage_ids: []
}
},
methods: {
getAddress(e) {
this.form.addr = e.province.name + e.city.name + e.area.name;
this.address_id = e.province.code
// import img from "@/static/news1/walletBg.png";
import * as help from '@/api/help'
import Config from '@/core/config'
import * as UploadApi from '@/api/upload'
export default {
data() {
let img = 'https://www.royaum.com.cn/static/news1/walletBg.png'
return {
background: {
background: 'url(' + img + ') center top no-repeat',
backgroundSize: '100%',
},
timeChage(e) {
this.form.date = e.year + '-' + e.month + '-' + e.day
list: [{
icon: 'https://www.royaum.com.cn/static/news1/m1.png',
title: '发采购询价单',
subTitle: '填写所需信息一键发布询价'
},
sureSubmit() {
// 确认发布 0000
const that = this;
that.uploadFile()
if (!that.form.name) {
return that.$toast('请输入商品名称')
}
if (!that.form.intro) {
return that.$toast('请输入商品信息')
}
if (!that.form.type) {
return that.$toast('请选择求购类型')
}
if (!that.form.date) {
return that.$toast('请选择交货日期')
}
if (!that.form.num) {
return that.$toast('请选择求购数量')
}
if (!that.form.startNum) {
return that.$toast('请输入最低价')
}
if (!that.form.endNum) {
return that.$toast('请输入最高价')
}
if (!that.form.mianyi) {
return that.$toast('请选择价格是否面议')
}
if (!that.form.mianyi) {
return that.$toast('请选择价格是否面议')
}
if (!that.form.remark) {
return that.$toast('请填写备注')
}
let params = {
goods_name: that.form.name,
goods_desc: that.form.intro,
type: that.form.type,
deliver_at: that.form.date,
num: that.form.num,
min_price: that.form.startNum,
max_price: that.form.endNum,
is_face: that.form.mianyi,
address_id: that.address_id,
remark: that.form.remark,
...that.imgage_ids
}
help.addGoodsSource(params)
.then(res => {
if (res.status) {
uni.showToast({
title: '发布成功',
icon: 'none',
duration: 2000
})
} else {
uni.showToast({
title: '发布失败',
icon: 'none',
duration: 2000
})
}
})
.finally()
{
icon: 'https://www.royaum.com.cn/static/news1/m2.png',
title: '卖家实时报价',
subTitle: '60分钟获取卖家报价'
},
actionSheetCallback(index) {
this.form.type = this.type[index].text;
{
icon: 'https://www.royaum.com.cn/static/news1/m3.png',
title: '卖家上架商品',
subTitle: '采购方案根据需要下单采购'
},
deleteImage(imageIndex) {
this.imageList.splice(imageIndex, 1)
],
form: {
name: '',
intro: '',
type: '',
date: '',
num: '',
startNum: '',
endNum: '',
mianyi: true,
addr: '',
remark: ''
},
// 选择图片
chooseImage() {
const app = this
const oldImageList = app.imageList
// 选择图片
uni.chooseImage({
count: app.maxImageLength - oldImageList.length,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success({
tempFiles
}) {
app.imageList = oldImageList.concat(tempFiles)
}
});
typeShow: false,
timeShow: false,
addrshow: false,
type: [{
text: '一件代发'
}],
timeParams: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
radioList: [{
name: '面议'
},
// 上传图片
uploadFile() {
const app = this
],
radio: '',
//照片
imageList: [],
maxImageLength: 6,
imgage_ids: [],
action: '',
header: '',
transferList: []
}
},
onReady() {
this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
this.header = {
'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
'Access-Token': uni.getStorageSync('AccessToken'),
'platform': "MP-WEIXIN",
}
},
methods: {
//接受上传返回的数据
transferSuccess(list) {
console.log(list)
if (list.length > 0) {
const {
imageList
} = app
// 批量上传
return new Promise((resolve, reject) => {
if (imageList.length > 0) {
UploadApi.image(imageList)
.then(fileIds => {
app.imgage_ids = fileIds;
resolve(fileIds)
})
.catch(reject)
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.imgage_ids = idList.join(',');
}
}
},
transferRemove(file, fileList) {
this.imgage_ids = this.handleRemove(file, fileList);
},
handleRemove: function (file, fileList) {
let idList = []
fileList.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
return idList.join(',')
},
getAddress(e) {
this.form.addr = e.province.name + e.city.name + e.area.name;
this.address_id = e.province.code
},
timeChage(e) {
this.form.date = e.year + '-' + e.month + '-' + e.day
},
sureSubmit() {
// 确认发布
const that = this;
if (!that.form.name) {
return that.$toast('请输入商品名称')
}
if (!that.form.intro) {
return that.$toast('请输入商品信息')
}
if (!that.form.type) {
return that.$toast('请选择求购类型')
}
if (!that.form.date) {
return that.$toast('请选择交货日期')
}
if (!that.form.num) {
return that.$toast('请选择求购数量')
}
if (!that.form.startNum) {
return that.$toast('请输入最低价')
}
if (!that.form.endNum) {
return that.$toast('请输入最高价')
}
if (!that.form.mianyi) {
return that.$toast('请选择价格是否面议')
}
if (!that.form.mianyi) {
return that.$toast('请选择价格是否面议')
}
if (!that.form.remark) {
return that.$toast('请填写备注')
}
let params = {
goods_name: that.form.name,
goods_desc: that.form.intro,
type: that.form.type,
deliver_at: that.form.date,
num: that.form.num,
min_price: that.form.startNum,
max_price: that.form.endNum,
is_face: that.form.mianyi,
address_id: that.address_id,
remark: that.form.remark,
imgage_ids: that.imgage_ids
}
help.addGoodsSource(params)
.then(res => {
if (res.status) {
uni.showToast({
title: '发布成功',
icon: 'none',
duration: 2000
})
that.transferList = []
that.imgage_ids = []
that.form = that.$options.data().form
} else {
resolve()
uni.showToast({
title: '发布失败',
icon: 'none',
duration: 2000
})
}
})
},
.finally()
},
actionSheetCallback(index) {
this.form.type = this.type[index].text;
}
}
}
</script>
<style lang="scss" scoped>
page {
min-height: 100%;
padding-bottom: 100upx;
}
page {
min-height: 100%;
padding-bottom: 100upx;
}
.huoyuan {
.process {
height: 266upx;
background: #FFFFFF;
border-radius: 14upx;
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 30upx;
// padding:0 28upx;
position: relative;
.pItem {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 56upx;
height: auto;
}
.c {
padding-top: 20rpx;
overflow: hidden;
.title {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #2D2D2D;
margin: 16upx 0;
}
.slot-btn {
width: 180rpx;
height: 180rpx;
background: #F6F6F6;
border-radius: 10rpx;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #6D6D6D;
.subTitle {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #8A8A8A;
width: 75%;
text-align: center;
.l {
line-height: 30rpx;
}
}
}
image {
width: 50rpx;
height: 50rpx;
display: block;
margin: 0 auto;
margin-top: 30rpx;
}
}
}
.self-form {
::v-deep .u-form-item {
border: none !important;
;
}
}
.realAddr {
::v-deep .u-input {
padding: 10rpx 22upx !important;
background: #F7F8FA;
}
.formContent {
margin: 0 30upx;
background-color: #fff;
border-radius: 14upx;
margin-top: 20upx;
padding: 0 38upx;
padding-bottom: 64upx;
}
::v-deep .u-form-item--left {
align-items: flex-start;
.huoyuan {
.process {
height: 266upx;
background: #FFFFFF;
border-radius: 14upx;
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 30upx;
// padding:0 28upx;
position: relative;
.pItem {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 56upx;
height: auto;
}
::v-deep .u-form-item--left__content__label {
.title {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #2D2D2D;
font-size: 28upx;
margin: 16upx 0;
}
.qujian {
width: 100%;
display: flex;
align-items: center;
.subTitle {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #8A8A8A;
width: 75%;
text-align: center;
}
}
}
.remarkInput {
width: 100%;
height: 246upx;
background: #F7F8FA;
border-radius: 3px 3px 3px 3px;
opacity: 1;
padding: 20upx !important;
.formContent {
margin: 0 30upx;
background-color: #fff;
border-radius: 14upx;
margin-top: 20upx;
padding: 0 38upx;
padding-bottom: 135upx;
::v-deep .u-form-item--left {
align-items: flex-start;
}
::v-deep .u-form-item--left__content__label {
color: #2D2D2D;
font-size: 28upx;
}
.qujian {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
}
}
.submitBtn {
height: 88upx;
margin: 64upx 0;
margin-bottom: 0;
line-height: 88upx;
// background: #FFAAA4;
background: #FE483B;
border-radius: 36px 36px 36px 36px;
opacity: 1;
font-size: 28upx;
.remarkInput {
// width: 100%;
// height: 246upx;
background: green;
border-radius: 3px;
padding: 20upx !important;
}
.submitBtn-box {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
padding: 30rpx 34rpx;
z-index: 88;
background: #fff;
}
.submitBtn {
height: 88upx;
line-height: 88upx;
// background: #FFAAA4;
background: #FE483B;
border-radius: 36px;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.navBarContent {
height: 88upx;
line-height: 88upx;
text-align: center;
position: relative;
text {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.navBarContent {
height: 88upx;
line-height: 88upx;
text-align: center;
position: relative;
}
text {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.bgImg {
width: 100%;
}
}
.file_img {
overflow: hidden;
position: relative;
.bgImg {
width: 100%;
image {
width: 80px;
height: 80px;
margin-right: 10rpx;
}
.photo {
.image-delete {
position: absolute;
top: -10rpx;
right: -10rpx;
height: 42rpx;
width: 42rpx;
background: rgba(0, 0, 0, 0.64);
border-radius: 50%;
color: #fff;
font-weight: bolder;
font-size: 22rpx;
z-index: 10;
display: flex;
justify-content: flex-start;
padding: 20rpx 0;
overflow: hidden;
.slot-btn {
width: 80px;
height: 80px;
background: #FFFFFF;
border-radius: 10rpx;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 24rpx;
font-weight: 500;
color: #D1D1D1;
image {
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
}
}
}
.file_img {
overflow: hidden;
position: relative;
image {
width: 80px;
height: 80px;
margin-right: 10rpx;
}
.image-delete {
position: absolute;
top: -10rpx;
right: -10rpx;
height: 42rpx;
width: 42rpx;
background: rgba(0, 0, 0, 0.64);
border-radius: 50%;
color: #fff;
font-weight: bolder;
font-size: 22rpx;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
justify-content: center;
align-items: center;
}
}
</style>

Write Preview
Loading…
Cancel
Save