parent
4f5a95b13f
commit
d7f4aae565
@ -0,0 +1,45 @@ |
||||
import { |
||||
POST |
||||
} from './Request.js'; |
||||
let app = getApp(); |
||||
let base = app.globalData.url; |
||||
|
||||
|
||||
//新增门店图片
|
||||
export const insertStoreImg = params => { |
||||
return POST('POST', `${base}/storeImg/insertStoreImg`, params).then(res => res.data); |
||||
} |
||||
|
||||
//查询门店图片列表
|
||||
export const getBsStoreImgByList = params => { |
||||
return POST('GET', `${base}/storeImg/getBsStoreImgByList`, params).then(res => res.data); |
||||
} |
||||
|
||||
//删除门店图片
|
||||
export const deleteStoreImg = params => { |
||||
return POST('GET', `${base}/storeImg/deleteStoreImg`, params).then(res => res.data); |
||||
} |
||||
|
||||
//根据id查询门店图片详情
|
||||
export const getStoreImgById = params => { |
||||
return POST('GET', `${base}/storeImg/getStoreImgById`, params).then(res => res.data); |
||||
} |
||||
|
||||
//新增门店产品
|
||||
export const insertStoreProduct = params => { |
||||
return POST('POST', `${base}/storeProduct/insertStoreProduct`, params).then(res => res.data); |
||||
} |
||||
//编辑门店产品
|
||||
export const editStoreProduct = params => { |
||||
return POST('POST', `${base}/storeProduct/editStoreProduct`, params).then(res => res.data); |
||||
} |
||||
|
||||
//门店产品列表
|
||||
export const getStoreProductByList = params => { |
||||
return POST('GET', `${base}/storeProduct/getStoreProductByList`, params).then(res => res.data); |
||||
} |
||||
|
||||
//查询门店产品详情
|
||||
export const getStoreProductById = params => { |
||||
return POST('GET', `${base}/storeProduct/getStoreProductById`, params).then(res => res.data); |
||||
} |
||||
@ -0,0 +1,298 @@ |
||||
<template> |
||||
<view class="next-bubble-menu" |
||||
> |
||||
|
||||
<view @click.stop="showContainer"> |
||||
<slot></slot> |
||||
</view> |
||||
<view class="mask" v-show="show && showUi" @click.stop="show=false"></view> |
||||
<view class="container" v-show="show && showUi"> |
||||
<view class="block" :style="{left: `calc(50% - ${(width*0.5).toFixed(0)}rpx)`}"> |
||||
<view class="arrow" |
||||
:style="{ |
||||
left:0, |
||||
top: showTop && (arrowTop+12)+'rpx' |
||||
}"> |
||||
</view> |
||||
<view class="list-container" |
||||
:style="'height:'+(dHeight?dHeight+'rpx':'auto')+';max-height:'+dMaxHeight+'rpx;border-radius:'+radius+'rpx;width:'+width+'rpx;left:'+ relativeAllow +'rpx;'"> |
||||
<view :class="'list-item '+(index==dataList.length-1?'':'bt')" v-for="(item,index) in dataList" :key="index" @click.stop="clickItem(item)"> |
||||
<image class="list-item-image" :src="item.iconSrc" v-if="item.iconSrc" /> |
||||
<text class="list-item-text">{{item.text}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
let closeOtherHooks = new Set() |
||||
const closeOtherPopUp = (closePopUp) => { |
||||
closeOtherHooks.forEach(hook => { |
||||
if (closePopUp !== hook) { //closePopUp当前页面关闭方法，hook所有页面的关闭方法 |
||||
hook() |
||||
} |
||||
}) |
||||
} |
||||
|
||||
export default { |
||||
props: { |
||||
bingEleId: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
//气泡框数据源 |
||||
dataList: { |
||||
type: Array, |
||||
default: () => { |
||||
return [] |
||||
} |
||||
}, |
||||
hasBar: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
radius: { |
||||
type: Number, |
||||
default: 8 |
||||
}, |
||||
dWidth: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
dHeight: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
dMaxHeight: { |
||||
type: Number, |
||||
default: 400 |
||||
}, |
||||
relativeAllow: { |
||||
type: Number, |
||||
default: -30 |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
show: false, |
||||
width: 0, |
||||
height: 0, |
||||
left: 0, |
||||
top: 0, |
||||
bottom: 0, |
||||
rectTop: 0, |
||||
screenWidth: 0, |
||||
showTop: false, |
||||
arrowTop: 0, |
||||
showUi: false |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
const closePopUp = () => { |
||||
this.show = false; |
||||
} |
||||
closeOtherHooks.add(closePopUp) //closeOtherHooks每个页面的关闭方法都加上 |
||||
this.closePopUp = closePopUp |
||||
|
||||
this.$nextTick(() => { |
||||
if (!this.bingEleId) return |
||||
// #ifdef APP-PLUS |
||||
uni.createSelectorQuery().in(this).select('.next-bubble-menu').boundingClientRect(res => { |
||||
let difference = res.left |
||||
uni.createSelectorQuery().select('#' + this.bingEleId).boundingClientRect(rect => { |
||||
const systemInfo = uni.getSystemInfoSync() |
||||
const windowHeight = systemInfo.windowHeight |
||||
this.screenWidth = systemInfo.screenWidth |
||||
if (!this.dWidth) { |
||||
this.width = this.px2rpx(rect.width, this.screenWidth) |
||||
} else { |
||||
let screenW = this.px2rpx(this.screenWidth, this.screenWidth) |
||||
this.width = this.dWidth > screenW ? screenW : this.dWidth |
||||
} |
||||
this.height = rect.height |
||||
this.rectTop = rect.top |
||||
this.bottom = windowHeight - rect.bottom |
||||
|
||||
}).exec() |
||||
}).exec() |
||||
// #endif |
||||
// #ifndef APP-PLUS |
||||
uni.createSelectorQuery().in(this).select('.next-bubble-menu').boundingClientRect(res => { |
||||
let difference = res.left |
||||
uni.createSelectorQuery().select('#' + this.bingEleId).boundingClientRect(rect => { |
||||
const systemInfo = uni.getSystemInfoSync() |
||||
const windowHeight = systemInfo.windowHeight |
||||
this.screenWidth = systemInfo.screenWidth |
||||
if (!this.dWidth) { |
||||
this.width = this.px2rpx(rect.width, this.screenWidth) |
||||
} else { |
||||
let screenW = this.px2rpx(this.screenWidth, this.screenWidth) |
||||
this.width = this.dWidth > screenW ? screenW : this.dWidth |
||||
} |
||||
this.height = rect.height |
||||
this.rectTop = rect.top |
||||
this.bottom = windowHeight - rect.bottom |
||||
}).exec() |
||||
}).exec() |
||||
// #endif |
||||
}) |
||||
}, |
||||
methods: { |
||||
showContainer() { |
||||
if (!this.bingEleId) return |
||||
else this.show = !this.show |
||||
if (this.show) { |
||||
closeOtherPopUp(this.closePopUp) //关掉其他的 |
||||
|
||||
this.$nextTick(res => { |
||||
// #ifdef APP-PLUS |
||||
let view = uni.createSelectorQuery().in(this).select(".list-container") |
||||
view.boundingClientRect(res => { |
||||
let arrHeight = res.height |
||||
let height = this.bottom - arrHeight - 15 |
||||
if (height < 0) { |
||||
this.showTop = true |
||||
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||
.screenWidth) |
||||
this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth) |
||||
} else { |
||||
this.showTop = false |
||||
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||
.screenWidth) |
||||
} |
||||
this.$nextTick(() => { |
||||
this.showUi = true |
||||
}) |
||||
}).exec() |
||||
// #endif |
||||
// #ifndef APP-PLUS |
||||
uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(res => { |
||||
const left = res.left |
||||
let arrHeight = res.height |
||||
let height = this.bottom - arrHeight - 15 |
||||
if (height < 0) { |
||||
this.showTop = true |
||||
if (this.hasBar) { |
||||
// #ifdef H5 |
||||
this.top = this.px2rpx((this.rectTop - arrHeight + 35), this |
||||
.screenWidth) |
||||
// #endif |
||||
// #ifndef H5 |
||||
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||
.screenWidth) |
||||
// #endif |
||||
} else { |
||||
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||
.screenWidth) |
||||
} |
||||
this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth) |
||||
} else { |
||||
this.showTop = false |
||||
if (this.hasBar) { |
||||
// #ifdef H5 |
||||
this.top = this.px2rpx(this.rectTop + this.height + 54, this |
||||
.screenWidth) |
||||
// #endif |
||||
// #ifndef H5 |
||||
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||
.screenWidth) |
||||
// #endif |
||||
} else { |
||||
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||
.screenWidth) |
||||
} |
||||
} |
||||
this.$nextTick(() => { |
||||
this.showUi = true |
||||
}) |
||||
}).exec() |
||||
// #endif |
||||
}) |
||||
} |
||||
}, |
||||
px2rpx(px, screenWidth) { |
||||
return px / (screenWidth / 750) |
||||
}, |
||||
//点击选项 |
||||
clickItem(item) { |
||||
this.show = false |
||||
this.$emit('change', item) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
$bgColor:#3da7e7; |
||||
$ftColor:#ffffff; |
||||
|
||||
.mask{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
z-index: 999999 !important; |
||||
// background:rgba(0, 0, 0, 0.5); |
||||
} |
||||
|
||||
.next-bubble-menu { |
||||
position: relative; |
||||
border: solid transparent 1px; |
||||
} |
||||
|
||||
.block { |
||||
/* position: fixed; */ |
||||
position: absolute; |
||||
z-index: 99999999 !important; |
||||
} |
||||
|
||||
.container{ |
||||
position: relative; |
||||
} |
||||
|
||||
.list-container { |
||||
box-sizing: border-box; |
||||
overflow: auto; |
||||
// padding: 16rpx 20rpx; |
||||
background-color: $bgColor; |
||||
box-shadow: 2rpx 4rpx 10rpx rgba(0,0,0,.1); |
||||
} |
||||
.arrow { |
||||
width: 0; |
||||
height: 0; |
||||
margin: -10rpx auto 0; |
||||
border-top: 10rpx solid transparent; |
||||
border-bottom: 10rpx solid $bgColor; |
||||
border-right: 10rpx solid transparent; |
||||
border-left: 10rpx solid transparent; |
||||
} |
||||
|
||||
.list-item { |
||||
line-height: 80rpx; |
||||
text-align: center; |
||||
color: $ftColor; |
||||
&:active{ |
||||
background-color:$ftColor; |
||||
color: $bgColor; |
||||
} |
||||
} |
||||
.bt{ |
||||
border-bottom: 1px solid $ftColor; |
||||
} |
||||
|
||||
.list-item .list-item-image { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.list-item .list-item-text { |
||||
vertical-align: middle; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
<template> |
||||
<view> |
||||
<!-- 菜单功能 --> |
||||
<view class="backcor6 all-container pd-main" > |
||||
<view class="funcss" v-for="(item,index) in funcList" :key="index" @click="jumpdesfun(item)"> |
||||
<image :src="item.img" mode="widthFix" class="funicon"></image> |
||||
<view class="width100 font14 mart5">{{item.title}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
funcList:[ |
||||
{ |
||||
title: '门店图片', |
||||
url: './storeImg/storeImg', |
||||
img: '/static/img/home4.png' |
||||
}, |
||||
{ |
||||
title: '门店产品', |
||||
url: './storeProduct/storeProduct', |
||||
img: '/static/img/home4.png' |
||||
}, |
||||
|
||||
], |
||||
storeId:'', |
||||
} |
||||
}, |
||||
onLoad(options){ |
||||
if(options.storeId){ |
||||
this.storeId = options.storeId; |
||||
} |
||||
}, |
||||
methods:{ |
||||
/** |
||||
* 跳转功能 |
||||
*/ |
||||
jumpdesfun(item) { |
||||
let that = this; |
||||
uni.navigateTo({ |
||||
url: item.url+"?storeId="+that.storeId |
||||
}) |
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 菜单 |
||||
.funcss { |
||||
width: 33%; |
||||
height: 100px; |
||||
border-right: 1px solid #e8e8e8; |
||||
border-bottom: 1px solid #e8e8e8; |
||||
background-color: #FFFFFF; |
||||
text-align: center; |
||||
display: inline-block; |
||||
|
||||
.funicon { |
||||
width: 35px; |
||||
padding-top: 15px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,291 @@ |
||||
<template> |
||||
<!-- backcorfff backcor6--> |
||||
<view class="all-container pd-main backcor6 font15"> |
||||
<view class="dis-flex width100 mart10"> |
||||
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||
<button class="btns bgRed " @click.stop = "clickToDelete()">删除</button> |
||||
</view> |
||||
<view class="mart20 backcorfff"> |
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="checkFlex fotct fontwig6"></view> |
||||
<view class="flex-1 fotct fontwig6">图片</view> |
||||
<next-bubble-menu class="flex-1" :d-width="200" :dataList="dataList" bingEleId="imgType" @change="getItem($event)"> |
||||
<view class=" fotct fontwig6 down " id="imgType">{{imgType.imgTypeText}}</view> |
||||
</next-bubble-menu> |
||||
|
||||
<view class="flex-1 fotct fontwig6">图片状态</view> |
||||
</view> |
||||
<checkbox-group @change="checkClick"> |
||||
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in imgDataList" :key="index"> |
||||
<view class="checkFlex fotct"> |
||||
<checkbox @click.stop class=" checkContainer" color="#FFC71E" |
||||
:value="String(item.id)" :checked="false" /> |
||||
</view> |
||||
<view class="flex-1 fotct"> |
||||
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
<view class="flex-1 fotct">{{item.type | filterType}}</view> |
||||
<view :class="' flex-1 fotct '+(item.status == 0 ? ' fcRed ':'')">{{ item.status | filterStatus}}</view> |
||||
</view> |
||||
</checkbox-group> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue" |
||||
|
||||
import {getBsStoreImgByList, |
||||
deleteStoreImg |
||||
} from '@/Utils/groupBuying.js'; |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
dataList: [{ |
||||
id: 0, |
||||
text: '全部', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
text: '菜品', |
||||
}, { |
||||
id: 2, |
||||
text: '环境', |
||||
},{ |
||||
id:3, |
||||
text:'菜单' |
||||
} |
||||
], |
||||
|
||||
imgType:{ |
||||
// isShowImgType:false, |
||||
imgTypeText:"图片类型", |
||||
imgTypeId:0, |
||||
}, |
||||
storeId:"",//门店id |
||||
imgDataList:[], |
||||
imgSelectList:[], |
||||
|
||||
|
||||
} |
||||
}, |
||||
components: { |
||||
nextBubleMenu |
||||
}, |
||||
onLoad(options){ |
||||
if(options.storeId){ |
||||
this.storeId = options.storeId; |
||||
} |
||||
}, |
||||
onShow(){ |
||||
this.imgType.imgTypeId=0; |
||||
this.imgType.imgTypeText="图片类型"; |
||||
this.getBsStoreImgByList(); |
||||
}, |
||||
filters:{ |
||||
filterType(type){ |
||||
switch (type) { |
||||
case 1: |
||||
return "菜品"; |
||||
case 2: |
||||
return "环境"; |
||||
case 3: |
||||
return "菜单"; |
||||
|
||||
default: |
||||
return "未知"; |
||||
} |
||||
|
||||
}, |
||||
filterStatus(value){ |
||||
switch (value) { |
||||
case 1: |
||||
return "正常"; |
||||
case 0: |
||||
return "失败"; |
||||
default: |
||||
return "未知"; |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
/* 获取列表 */ |
||||
getBsStoreImgByList(){ |
||||
let params={ |
||||
storeId:this.storeId, |
||||
type:this.imgType.imgTypeId, |
||||
} |
||||
if(params.type==0){ |
||||
delete params.type; |
||||
} |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
mask:true, |
||||
}) |
||||
this.imgDataList = []; |
||||
getBsStoreImgByList(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.imgDataList = res.return_data; |
||||
// console.log(res.return_data) |
||||
|
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
// 预览 |
||||
previewImage(img){ |
||||
uni.previewImage({ |
||||
current: 0, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls:[img] |
||||
}) |
||||
}, |
||||
getItem(data) { |
||||
console.log(data) |
||||
if (data.id == 0) { |
||||
this.imgType.imgTypeText = "图片类型"; |
||||
this.imgType.imgTypeId = data.id; |
||||
}else{ |
||||
this.imgType.imgTypeText = data.text; |
||||
this.imgType.imgTypeId = data.id; |
||||
} |
||||
this.getBsStoreImgByList(); |
||||
this.imgSelectList = []; |
||||
|
||||
}, |
||||
/* 点击去新增页面 */ |
||||
clickToAdd(){ |
||||
let that = this; |
||||
uni.navigateTo({ |
||||
url:"./storeImgAdd?storeId="+that.storeId |
||||
}) |
||||
}, |
||||
/* 点击删除 */ |
||||
clickToDelete(){ |
||||
if(this.imgSelectList.length==0){ |
||||
uni.showToast({ |
||||
icon:'none', |
||||
title:"请勾选想要删除的图片" |
||||
}) |
||||
return |
||||
} |
||||
let _this = this; |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: '确定要删除选中的这些图片吗?', |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
let params={ |
||||
id:_this.imgSelectList.join(",") |
||||
} |
||||
deleteStoreImg(params).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
_this.imgSelectList =[]; |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
setTimeout(()=>{ |
||||
_this.getBsStoreImgByList() |
||||
},2000) |
||||
}) |
||||
|
||||
} else if (res.cancel) { |
||||
|
||||
// console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
}, |
||||
// checkChange |
||||
checkClick(e) { |
||||
this.imgSelectList = e.detail.value; |
||||
console.log(this.imgSelectList,"this.imgSelectList") |
||||
}, |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.width60 { |
||||
width: 60px; |
||||
} |
||||
|
||||
.alin-stretch { |
||||
align-self: stretch; |
||||
} |
||||
|
||||
.btns { |
||||
width: 21%; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
background-color: #0083f5; |
||||
color: #FFFFFF; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
padding: 0px; |
||||
} |
||||
|
||||
.bgRed { |
||||
background-color: red; |
||||
} |
||||
.fcRed{ |
||||
color: red; |
||||
} |
||||
// 箭头 |
||||
|
||||
.down{ |
||||
&::after{ |
||||
content: ""; |
||||
display: inline-block; |
||||
border: solid black; |
||||
border-width: 0 1px 1px 0; |
||||
padding: 4px; |
||||
margin-left: 10px; |
||||
vertical-align: 3px; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
.up{ |
||||
&::after{ |
||||
content: ""; |
||||
display: inline-block; |
||||
border: solid black; |
||||
border-width: 0 2px 2px 0; |
||||
padding: 4px; |
||||
margin-left: 10px; |
||||
// vertical-align: 3px; |
||||
transform: rotate(225deg); |
||||
} |
||||
} |
||||
//checkbox |
||||
.checkContainer{ |
||||
width: 40px; |
||||
// height: 200rpx; |
||||
// line-height: 200rpx; |
||||
// padding-left: 10px; |
||||
} |
||||
.checkFlex{ |
||||
flex: 0.7; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,334 @@ |
||||
<template> |
||||
<view class="all-container pd-main font15" style="padding-bottom: 60px;"> |
||||
<view class="username"> |
||||
<view class="namecont font16">图片类型</view> |
||||
<picker mode="selector" style="width: 70%;" :range="imgTypeList" range-key="text" |
||||
@change="bindImgType"> |
||||
<view class=" text1 marRight10 font14" v-if="imgType"> |
||||
{{imgName}} |
||||
</view> |
||||
<view class=" text1 marRight10 fcor999 font14" v-else> |
||||
请选择图片类型 |
||||
</view> |
||||
</picker> |
||||
<image src="/static/img/jtg.png" mode="widthFix" class="iconw"></image> |
||||
</view> |
||||
<view> |
||||
<view class="imageUploadContainer"> |
||||
<view class="imageUploadList"> |
||||
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" :data-index="index"></image> |
||||
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> |
||||
</view> |
||||
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="footer-btn"> |
||||
<button class="backcor89 fcorfff" @click="clickToSave">保存</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import {insertStoreImg} from '@/Utils/groupBuying.js' |
||||
|
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
reqUrl: app.globalData.url, //请求地址 |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
imgTypeList: [ |
||||
{ |
||||
id: 1, |
||||
text: '菜品', |
||||
}, { |
||||
id: 2, |
||||
text: '环境', |
||||
},{ |
||||
id:3, |
||||
text:'菜单' |
||||
} |
||||
], //图片类型 |
||||
imgType: '', //" 1：菜品 2：环境，3：菜单", |
||||
imgName: '', //1：菜品 2：环境，3：菜单", |
||||
/* ================== */ |
||||
imgValue:[], |
||||
merId:'', |
||||
storeId:'', |
||||
|
||||
} |
||||
}, |
||||
|
||||
computed:{ |
||||
isShowDel(){ |
||||
return true |
||||
}, |
||||
isShowAdd(){ |
||||
if(this.imgValue.length>=1){ |
||||
return false |
||||
}else{ |
||||
return true |
||||
} |
||||
}, |
||||
|
||||
}, |
||||
onLoad(options){ |
||||
if(options.storeId){ |
||||
this.storeId = options.storeId; |
||||
} |
||||
}, |
||||
methods:{ |
||||
/* 点击保存 */ |
||||
clickToSave(){ |
||||
if(!this.imgType){ |
||||
uni.showToast({ |
||||
icon:'none', |
||||
title:"请选择图片类型" |
||||
}) |
||||
return |
||||
} |
||||
if(this.imgValue.length==0){ |
||||
uni.showToast({ |
||||
icon:'none', |
||||
title:"请选择图片" |
||||
}) |
||||
return |
||||
} |
||||
this.insertStoreImg(); |
||||
|
||||
}, |
||||
insertStoreImg(){ |
||||
let params={ |
||||
img:this.imgValue.join(","), |
||||
storeId:this.storeId, |
||||
type:this.imgType, |
||||
}; |
||||
console.log(params,"params") |
||||
|
||||
insertStoreImg(params).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
setTimeout(()=>{ |
||||
uni.navigateBack(); |
||||
},2000) |
||||
}) |
||||
}, |
||||
|
||||
// 删除 |
||||
deleteImage(data){ |
||||
let arr = this.imgValue.filter((item)=>item!=data); |
||||
this.imgValue = arr; |
||||
}, |
||||
// 预览 |
||||
previewImage(img){ |
||||
uni.previewImage({ |
||||
current: 0, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls:[img] |
||||
}) |
||||
}, |
||||
/* ====== */ |
||||
//图片类型 |
||||
bindImgType(e) { |
||||
this.imgType = this.imgTypeList[e.target.value].id; |
||||
this.imgName = this.imgTypeList[e.target.value].text; |
||||
}, |
||||
//上传图片 |
||||
upload() { |
||||
let that = this; |
||||
uni.chooseImage({ |
||||
count: 1, |
||||
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: ['camera', 'album'], |
||||
success: function(res) { |
||||
const tempFilePaths = res.tempFilePaths; |
||||
that.uploadFile(tempFilePaths[0]); |
||||
}, |
||||
error: function(e) { |
||||
console.log(e); |
||||
} |
||||
}); |
||||
}, |
||||
//上传 |
||||
uploadFile(imgURL) { |
||||
const that = this; |
||||
uni.uploadFile({ |
||||
url: that.reqUrl + '/fileUpload/uploadfile', |
||||
filePath: imgURL, |
||||
header: { |
||||
"Authorization": app.globalData.token |
||||
}, |
||||
name: 'files', |
||||
success: function(uploadFileRes) { |
||||
that.getImgSignedUrl(JSON.parse(uploadFileRes.data) |
||||
.return_data); |
||||
} |
||||
}); |
||||
}, |
||||
//查看临时图片路径 |
||||
getImgSignedUrl( item1) { |
||||
this.imgValue.push(item1); |
||||
console.log(this.imgValue,"this.imgValue") |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.username{ |
||||
width: calc(100% - 90upx); |
||||
height: 100upx; |
||||
display: flex; |
||||
align-items: center; |
||||
background-color: rgba($color: #ffffff, $alpha: 0.1); |
||||
border-bottom: 1px solid #f6f6f6; |
||||
padding: 8upx 45upx; |
||||
|
||||
input { |
||||
width: 50%; |
||||
height: 50upx; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
font-weight: blod; |
||||
} |
||||
|
||||
.get-code { |
||||
position: absolute; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
right: 7px; |
||||
z-index: 3; |
||||
border: 1px solid #bfbfbf; |
||||
width: 25%; |
||||
padding: 3px 5px; |
||||
border-radius: 22px; |
||||
|
||||
&:after { |
||||
content: " "; |
||||
width: 1upx; |
||||
height: 50upx; |
||||
position: absolute; |
||||
z-index: 3; |
||||
margin-right: 100%; |
||||
left: 0; |
||||
top: 20upx; |
||||
} |
||||
} |
||||
.namecont { |
||||
color: #666666; |
||||
width: 28%; |
||||
} |
||||
} |
||||
|
||||
/* 图片 */ |
||||
.imageUploadContainer{ |
||||
padding: 10upx 5upx; |
||||
margin: 10upx 5upx; |
||||
} |
||||
.name{ |
||||
text-align: center; |
||||
margin-top:-30upx; |
||||
} |
||||
.dragging{ |
||||
transform: scale(1.2) |
||||
} |
||||
|
||||
.imageUploadList{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.imageItem, .imageUpload{ |
||||
width: 200upx; |
||||
height: 200upx; |
||||
margin: 30upx 15upx 30upx; |
||||
} |
||||
|
||||
.imageDel{ |
||||
position: relative; |
||||
left: 180upx; |
||||
bottom: 225upx; |
||||
background-color: rgba(0,0,0,0.5); |
||||
width: 36upx; |
||||
text-align: center; |
||||
line-height: 35upx; |
||||
border-radius: 17upx; |
||||
color: white; |
||||
font-size: 30upx; |
||||
padding-bottom: 2upx; |
||||
} |
||||
|
||||
.imageItem image, .moveImage{ |
||||
width: 200upx; |
||||
height: 200upx; |
||||
border-radius: 8upx; |
||||
} |
||||
|
||||
.imageUpload{ |
||||
line-height: 200upx; |
||||
text-align: center; |
||||
font-size: 150upx; |
||||
color: #D9D9D9; |
||||
border: 1px solid #D9D9D9; |
||||
border-radius: 8upx; |
||||
} |
||||
|
||||
.moveImage{ |
||||
position: absolute; |
||||
} |
||||
.uni-list { |
||||
width: 260px; |
||||
} |
||||
.popup_foot { |
||||
display: flex; |
||||
border-top: 1px #F9F9F9 solid; |
||||
line-height: 40px; |
||||
height: 40px; |
||||
margin-top: 30px; |
||||
} |
||||
.build_01{ |
||||
line-height: 35px; |
||||
} |
||||
.build_01 input{ |
||||
background: #ededed; |
||||
} |
||||
.popup_foot_l { |
||||
width: 50%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup_foot_r { |
||||
width: 50%; |
||||
text-align: center; |
||||
border-left: 1px #F9F9F9 solid; |
||||
color: #5095D3; |
||||
} |
||||
|
||||
/* 底部按钮 */ |
||||
.footer-btn{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
button{ |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,268 @@ |
||||
<template> |
||||
<!-- backcorfff backcor6--> |
||||
<view class="all-container pd-main backcor6 font15"> |
||||
<view class=" width100 mart10"> |
||||
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||
</view> |
||||
<view class="mart20 backcorfff"> |
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="flex-1 fotct fontwig6 " ></view> |
||||
<view class="flex-1 fotct fontwig6">名称</view> |
||||
<view class="flex-1 fotct fontwig6">价格</view> |
||||
<!-- <view class="flex-1 fotct fontwig6">规格</view> --> |
||||
<view class="flex-1 fotct fontwig6">售卖数量</view> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in productList" @click="cilckToShowDetail(item)" :key="index"> |
||||
<view class="flex-1 fotct"> |
||||
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
<view class="flex-1 fotct text1">{{item.name}}</view> |
||||
<view class="flex-1 fotct">{{item.price}}</view> |
||||
<!-- <view class="flex-1 fotct text1">{{item.spec}}</view> --> |
||||
<view class="flex-1 fotct">{{item.saleCount}}</view> |
||||
<view class="flex-1 fotct fcor41c" @click.stop="clickToEdit(item)">编辑</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true" |
||||
radius="6" :showCloseIcon="true"> |
||||
<view class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>详情</text></view> |
||||
|
||||
<view class="dis-flex flex-wrap" v-if="productDetail"> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">名称</view> |
||||
<view class="flex-1 fotct ">{{productDetail.name}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">价格</view> |
||||
<view class="flex-1 fotct ">{{productDetail.price}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">规格</view> |
||||
<view class="flex-1 fotct ">{{productDetail.spec}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">售卖数量</view> |
||||
<view class="flex-1 fotct ">{{productDetail.saleCount}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight80">图片</view> |
||||
<view class="flex-1 fotct "> |
||||
<image :src="imgUrl+productDetail.img" @click.stop="previewImage(imgUrl+productDetail.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</wybPopup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
import {getStoreProductByList,getStoreProductById |
||||
} from '@/Utils/groupBuying.js'; |
||||
import wybPopup from '@/components/wyb-popup/wyb-popup.vue' |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
storeId:"",//门店id |
||||
productList:[], |
||||
productDetail:null, |
||||
|
||||
|
||||
|
||||
} |
||||
}, |
||||
|
||||
onLoad(options){ |
||||
if(options.storeId){ |
||||
this.storeId = options.storeId; |
||||
} |
||||
|
||||
|
||||
}, |
||||
onShow(){ |
||||
this.getStoreProductByList(); |
||||
}, |
||||
components:{ |
||||
wybPopup |
||||
}, |
||||
filters:{ |
||||
/* filterType(type){ |
||||
switch (type) { |
||||
case 1: |
||||
return "菜品"; |
||||
case 2: |
||||
return "环境"; |
||||
case 3: |
||||
return "菜单"; |
||||
|
||||
default: |
||||
return "未知"; |
||||
} |
||||
|
||||
}, |
||||
filterStatus(value){ |
||||
switch (value) { |
||||
case 1: |
||||
return "正常"; |
||||
case 0: |
||||
return "失败"; |
||||
default: |
||||
return "未知"; |
||||
} |
||||
} */ |
||||
}, |
||||
methods: { |
||||
/* 获取列表 */ |
||||
getStoreProductByList(){ |
||||
let params={ |
||||
storeId:this.storeId, |
||||
} |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
mask:true, |
||||
}) |
||||
getStoreProductByList(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.productList = res.return_data; |
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 点击行显示详情 */ |
||||
cilckToShowDetail(data){ |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
}) |
||||
let params={ |
||||
id:data.id |
||||
} |
||||
getStoreProductById(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.$refs.popup.show(); |
||||
this.productDetail =res.return_data; |
||||
|
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
hide(){ |
||||
this.productDetail=null; |
||||
}, |
||||
|
||||
// 预览 |
||||
previewImage(img){ |
||||
uni.previewImage({ |
||||
current: 0, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls:[img] |
||||
}) |
||||
}, |
||||
|
||||
/* 点击去新增页面 */ |
||||
clickToAdd(){ |
||||
let that = this; |
||||
uni.navigateTo({ |
||||
url:"./storeProductAdd?status=1&storeId="+that.storeId |
||||
}) |
||||
}, |
||||
/* 点击去编辑 */ |
||||
clickToEdit(data){ |
||||
let that = this; |
||||
uni.navigateTo({ |
||||
url:"./storeProductAdd?status=2&storeId="+that.storeId+"&id="+data.id |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.width60 { |
||||
width: 60px; |
||||
} |
||||
|
||||
.alin-stretch { |
||||
align-self: stretch; |
||||
} |
||||
|
||||
.btns { |
||||
width: 21%; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
background-color: #0083f5; |
||||
color: #FFFFFF; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
padding: 0px; |
||||
margin: 0 0 0 auto; |
||||
} |
||||
|
||||
.bgRed { |
||||
background-color: red; |
||||
} |
||||
.fcRed{ |
||||
color: red; |
||||
} |
||||
|
||||
/* 弹窗 */ |
||||
.pop-contain { |
||||
text-align: center; |
||||
padding-top: 50px; |
||||
background-color: #ffffff; |
||||
|
||||
.pop-title { |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: #ffffff; |
||||
|
||||
} |
||||
} |
||||
.flex-wrap{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.titleWidth{ |
||||
width: 80px; |
||||
text-align: center; |
||||
} |
||||
.minheight40{ |
||||
padding: 15px 0; |
||||
} |
||||
.minheight80{ |
||||
min-height: 80px; |
||||
line-height: 80px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,389 @@ |
||||
<template> |
||||
<view class="all-container pd-main font18 backcor6" style="padding-bottom: 60px;"> |
||||
<view class="form-gorup backcorfff"> |
||||
<view class="dis-flex marb10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">名称: |
||||
</view> |
||||
<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6" |
||||
class=" flex-1 " placeholder="请输入名称"> |
||||
</view> |
||||
<view class="dis-flex marb10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">价格: |
||||
</view> |
||||
<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6" |
||||
class=" flex-1 " placeholder="请输入价格(保留两位小数)"> |
||||
</view> |
||||
<view class="dis-flex marb10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">规格: |
||||
</view> |
||||
<input type="text" name="name" v-model.trim="productData.spec" placeholder-class="corf6" |
||||
class=" flex-1 " placeholder="请输入规格"> |
||||
</view> |
||||
<view class="imageUploadContainer"> |
||||
<view class="imageUploadList"> |
||||
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" :data-index="index"></image> |
||||
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> |
||||
</view> |
||||
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="footer-btn"> |
||||
<button class="backcor89 fcorfff" @click="clickToSave">保存</button> |
||||
</view> |
||||
|
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {insertStoreProduct,getStoreProductById,editStoreProduct} from '@/Utils/groupBuying.js' |
||||
|
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
reqUrl: app.globalData.url, //请求地址 |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
status:'',//1.新增 2.编辑 |
||||
productData:{ |
||||
name:'',//名称 |
||||
price:'',//价格 |
||||
spec:'',//规格 |
||||
storeId:'',//门店id |
||||
img:'',//图片 |
||||
|
||||
}, |
||||
imgValue:[],//图片 |
||||
|
||||
} |
||||
}, |
||||
|
||||
computed:{ |
||||
isShowDel(){ |
||||
return true |
||||
}, |
||||
isShowAdd(){ |
||||
if(this.imgValue.length>=1){ |
||||
return false |
||||
}else{ |
||||
return true |
||||
} |
||||
}, |
||||
|
||||
}, |
||||
onLoad(option) { |
||||
this.productData.storeId = option.storeId; |
||||
this.status=option.status; |
||||
if(this.status==1){ |
||||
uni.setNavigationBarTitle({ |
||||
title:"添加产品" |
||||
}) |
||||
}else{ |
||||
uni.setNavigationBarTitle({ |
||||
title:"编辑产品" |
||||
}) |
||||
} |
||||
if(option.id){ |
||||
this.productData.id =option.id; |
||||
this.getStoreProductById() |
||||
} |
||||
console.log(option,"=======") |
||||
}, |
||||
methods:{ |
||||
|
||||
clickToSave(){ |
||||
|
||||
if(!this.validate()) return; |
||||
|
||||
this.productData.img = this.imgValue.join(""); |
||||
|
||||
if(this.status==1){//1.新增 2.编辑 |
||||
this.insertStoreProduct() |
||||
return |
||||
} |
||||
if(this.status==2){ |
||||
this.editStoreProduct() |
||||
} |
||||
|
||||
|
||||
}, |
||||
/* 根据id查询详情 */ |
||||
getStoreProductById(){ |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
}) |
||||
let that =this; |
||||
let params={ |
||||
id:that.productData.id |
||||
} |
||||
getStoreProductById(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
console.log(res.return_data) ; |
||||
this.productData.name = res.return_data.name; |
||||
this.productData.price = res.return_data.price; |
||||
this.productData.spec = res.return_data.spec; |
||||
this.productData.img = res.return_data.img; |
||||
this.imgValue.push(res.return_data.img); |
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 增加 */ |
||||
insertStoreProduct(){ |
||||
insertStoreProduct(this.productData).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
setTimeout(()=>{ |
||||
uni.navigateBack(); |
||||
},1000) |
||||
}) |
||||
}, |
||||
/* 修改 */ |
||||
editStoreProduct(){ |
||||
editStoreProduct(this.productData).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
setTimeout(()=>{ |
||||
uni.navigateBack(); |
||||
},1000) |
||||
}) |
||||
}, |
||||
validate(){ |
||||
var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/; |
||||
if(!reg.test(this.productData.price)||this.productData.price==0){ |
||||
uni.showToast({ |
||||
title:"请输入正确的金额格式", |
||||
icon:"none" |
||||
}) |
||||
this.productData.price=""; |
||||
return |
||||
} |
||||
|
||||
|
||||
if(!this.productData.name||!this.productData.price||!this.productData.spec){ |
||||
uni.showToast({ |
||||
title:"请填写完整哦!", |
||||
icon:"none" |
||||
}) |
||||
return false |
||||
} |
||||
if(this.imgValue.length==0){ |
||||
uni.showToast({ |
||||
title:"请选择图片上传", |
||||
icon:"none" |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
return true |
||||
}, |
||||
|
||||
// 删除图片 |
||||
deleteImage(data){ |
||||
let arr = this.imgValue.filter((item)=>item!=data); |
||||
this.imgValue = arr; |
||||
}, |
||||
// 预览 |
||||
previewImage(img){ |
||||
uni.previewImage({ |
||||
current: 0, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls:[img] |
||||
}) |
||||
}, |
||||
//上传图片 |
||||
upload() { |
||||
let that = this; |
||||
uni.chooseImage({ |
||||
count: 1, |
||||
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: ['camera', 'album'], |
||||
success: function(res) { |
||||
const tempFilePaths = res.tempFilePaths; |
||||
that.uploadFile(tempFilePaths[0]); |
||||
}, |
||||
error: function(e) { |
||||
console.log(e); |
||||
} |
||||
}); |
||||
}, |
||||
//上传 |
||||
uploadFile(imgURL) { |
||||
const that = this; |
||||
uni.uploadFile({ |
||||
url: that.reqUrl + '/fileUpload/uploadfile', |
||||
filePath: imgURL, |
||||
header: { |
||||
"Authorization": app.globalData.token |
||||
}, |
||||
name: 'files', |
||||
success: function(uploadFileRes) { |
||||
that.getImgSignedUrl(JSON.parse(uploadFileRes.data) |
||||
.return_data); |
||||
} |
||||
}); |
||||
}, |
||||
//查看临时图片路径 |
||||
getImgSignedUrl( item1) { |
||||
this.imgValue.push(item1); |
||||
console.log(this.imgValue,"this.imgValue") |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
|
||||
|
||||
/* 表单 */ |
||||
.form-gorup { |
||||
padding: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
border-radius: 20rpx; |
||||
|
||||
input { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
border-radius: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
.form-gorup-title { |
||||
padding: 20rpx 0; |
||||
margin-bottom: 5rpx; |
||||
font-weight: 500; |
||||
|
||||
width: 74px; |
||||
white-space: nowrap; |
||||
text-align: right; |
||||
} |
||||
|
||||
/* 图片 */ |
||||
.imageUploadContainer{ |
||||
padding: 10upx 5upx; |
||||
margin: 10upx 5upx; |
||||
} |
||||
.name{ |
||||
text-align: center; |
||||
margin-top:-30upx; |
||||
} |
||||
.dragging{ |
||||
transform: scale(1.2) |
||||
} |
||||
|
||||
.imageUploadList{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.imageItem, .imageUpload{ |
||||
width: 200upx; |
||||
height: 200upx; |
||||
margin: 30upx 15upx 30upx; |
||||
} |
||||
|
||||
.imageDel{ |
||||
position: relative; |
||||
left: 180upx; |
||||
bottom: 225upx; |
||||
background-color: rgba(0,0,0,0.5); |
||||
width: 36upx; |
||||
text-align: center; |
||||
line-height: 35upx; |
||||
border-radius: 17upx; |
||||
color: white; |
||||
font-size: 30upx; |
||||
padding-bottom: 2upx; |
||||
} |
||||
|
||||
.imageItem image, .moveImage{ |
||||
width: 200upx; |
||||
height: 200upx; |
||||
border-radius: 8upx; |
||||
} |
||||
|
||||
.imageUpload{ |
||||
line-height: 200upx; |
||||
text-align: center; |
||||
font-size: 150upx; |
||||
color: #D9D9D9; |
||||
border: 1px solid #D9D9D9; |
||||
border-radius: 8upx; |
||||
} |
||||
|
||||
.moveImage{ |
||||
position: absolute; |
||||
} |
||||
.uni-list { |
||||
width: 260px; |
||||
} |
||||
.popup_foot { |
||||
display: flex; |
||||
border-top: 1px #F9F9F9 solid; |
||||
line-height: 40px; |
||||
height: 40px; |
||||
margin-top: 30px; |
||||
} |
||||
.build_01{ |
||||
line-height: 35px; |
||||
} |
||||
.build_01 input{ |
||||
background: #ededed; |
||||
} |
||||
.popup_foot_l { |
||||
width: 50%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup_foot_r { |
||||
width: 50%; |
||||
text-align: center; |
||||
border-left: 1px #F9F9F9 solid; |
||||
color: #5095D3; |
||||
} |
||||
|
||||
/* 底部按钮 */ |
||||
.footer-btn{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
button{ |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue