253 lines
5.2 KiB
Vue
253 lines
5.2 KiB
Vue
<template>
|
|
<view class="warp">
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in images" :key="index" @click.stop="picClick(images,index)">
|
|
<image mode="aspectFill" :src="item.thumb || item.path"></image>
|
|
<view class="shop-del" @tap.stop="shopChoose(item,index)">
|
|
<image class="delimg" :src='STATIC_URL+"shop-del.png"'></image>
|
|
</view>
|
|
<view class="shop-add" v-if="item.checked">
|
|
<view class="">
|
|
<text class="active" @tap.stop="relationShop(item,index,'images')">关联商品</text>
|
|
<text class="lines"></text>
|
|
<text class="active" @tap.stop="del(item,index,'images')">删除图片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item" v-if="images.length < 3">
|
|
<image @tap="handleUploadImage('images')" :src='STATIC_URL+"32.png"'></image>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="shop-pic">
|
|
<view class="background-image sure" @tap="sure"> {{ i18n['保存'] }}</view>
|
|
</view> -->
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
UploadImage
|
|
} from '@/common/utils/index'
|
|
export default {
|
|
data() {
|
|
return {
|
|
images_ids: '',
|
|
images: [],
|
|
index: '',
|
|
count: 3
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.setNavigationBarTitle(this.i18n['店铺轮播图'])
|
|
},
|
|
onShow() {
|
|
this.getStore()
|
|
},
|
|
methods: {
|
|
//获取店铺信息
|
|
getStore() {
|
|
this.$api.post(global.apiUrls.getShopSwiper).then(res => {
|
|
if (res.data.code == 1) {
|
|
this.images = res.data.data;
|
|
this.images.forEach(item => {
|
|
item.checked = false
|
|
})
|
|
}
|
|
console.log(this.images)
|
|
})
|
|
},
|
|
del(item, index, type) {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否删除该轮播图',
|
|
confirmColor: "#FF9300",
|
|
success(res) {
|
|
if (res.confirm) {
|
|
that.$api.post(global.apiUrls.getDelShopSwiper, {
|
|
aid: item.aid
|
|
}).then(res => {
|
|
that.$message.info(res.data.msg)
|
|
that.images.splice(index, 1)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
shopChoose(item, index) {
|
|
let list = this.images;
|
|
this.images[index].checked = !this.images[index].checked;
|
|
list = list.map((item, i) => {
|
|
if (i == index) {
|
|
item.checked = item.checked;
|
|
} else {
|
|
item.checked = false;
|
|
}
|
|
item.checked = item.checked;
|
|
return item;
|
|
})
|
|
this.images = list
|
|
console.log(this.images)
|
|
},
|
|
picClick(item, index) {
|
|
console.log(item)
|
|
uni.previewImage({
|
|
urls: item,
|
|
current: index
|
|
});
|
|
},
|
|
relationShop(item, index) {
|
|
uni.navigateTo({
|
|
url: '/pages/md/associatedGoods/associatedGoods?thumb=' + item.thumb + '&id=' + item.aid
|
|
})
|
|
},
|
|
// 上传图片
|
|
handleUploadImage(imgtype) {
|
|
let that = this;
|
|
uni.chooseImage({
|
|
count: 1, // 默认3
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
success: function(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
// 开始上传
|
|
new UploadImage(res.tempFiles, {
|
|
complete: function(res) {
|
|
console.log(res);
|
|
that[imgtype].push(...res);
|
|
that.sure(res[0].path)
|
|
},
|
|
})
|
|
|
|
}
|
|
});
|
|
},
|
|
sure(character) {
|
|
let that = this;
|
|
console.log(character)
|
|
that.$api.post(global.apiUrls.getAddShopSwiper, {
|
|
thumb: character,
|
|
}).then(res => {
|
|
that.$message.info(res.data.msg)
|
|
that.getStore()
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
|
|
.list {
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
.shop-del {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 16rpx;
|
|
border-radius: 50%;
|
|
|
|
.iconfont {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.shop-add {
|
|
width: 136rpx;
|
|
height: 122rpx;
|
|
position: absolute;
|
|
top: 76rpx;
|
|
right: 16rpx;
|
|
background: #fff;
|
|
box-shadow: 0px 3px 24px 1px rgba(153, 153, 153, 0.16);
|
|
|
|
view {
|
|
width: 136rpx;
|
|
height: 122rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
font-size: 24rpx;
|
|
|
|
.active {
|
|
display: block;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
}
|
|
|
|
.lines {
|
|
width: 104rpx;
|
|
height: 0px;
|
|
border-bottom: 1rpx solid #FFFFFF;
|
|
opacity: 0.12;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 334rpx;
|
|
height: 250rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.delimg {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
|
|
.shop-pic {
|
|
width: 702rpx;
|
|
height: 400rpx;
|
|
margin: 0 auto;
|
|
|
|
image {
|
|
width: 702rpx;
|
|
height: 400rpx;
|
|
}
|
|
|
|
.background-image {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
position: fixed;
|
|
bottom: 64rpx;
|
|
left: 32rpx;
|
|
background: linear-gradient(126deg, #FFB037 0%, #FE6304 100%);
|
|
border-radius: 100rpx;
|
|
}
|
|
|
|
.sure {
|
|
bottom: 184rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|