167 lines
4.1 KiB
Vue
167 lines
4.1 KiB
Vue
<!-- +----------------------------------------------------------------------
|
||
| 麦沃德科技赋能开发者，助力商协会发展
|
||
+----------------------------------------------------------------------
|
||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||
+----------------------------------------------------------------------
|
||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||
+----------------------------------------------------------------------
|
||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||
+----------------------------------------------------------------------
|
||
| 组件-产品维护 开发者: 麦沃德科技-半夏
|
||
+---------------------------------------------------------------------- -->
|
||
|
||
<template>
|
||
<view class="component-member-product" v-if="loadEnd">
|
||
<view class="product-list" v-if="productList.length">
|
||
<view class="list-item" v-for="item in productList" :key="item.id">
|
||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||
<view class="item-name text-ellipsis-more">{{item.name}}</view>
|
||
<view class="item-group flex flex-center">
|
||
<view class="group-btn" style="background: #FFB656;" @click="handleEdit(item.id)">修改</view>
|
||
<view class="group-btn" style="background: #FF626E;" @click="handleDelete(item.id)">删除</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
export default {
|
||
name: "componentMemberProduct",
|
||
data() {
|
||
return {
|
||
// 加载完成
|
||
loadEnd: false,
|
||
// 产品列表
|
||
productList: [],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
themeColor: state => state.app.themeColor,
|
||
})
|
||
},
|
||
mounted() {
|
||
uni.showLoading({
|
||
title: "加载中"
|
||
})
|
||
this.getProductList(() => {
|
||
this.loadEnd = true
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
methods: {
|
||
// 获取产品列表
|
||
getProductList(fn) {
|
||
this.$util.request("member.product.list").then(res => {
|
||
if (fn) fn()
|
||
if (res.code == 1) {
|
||
this.productList = res.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
if (fn) fn()
|
||
console.error('获取产品列表 ', error)
|
||
})
|
||
},
|
||
// 修改产品
|
||
handleEdit(id) {
|
||
this.$util.toPage({
|
||
mode: 1,
|
||
path: "/pages/member/product/edit?id=" + id
|
||
})
|
||
},
|
||
// 删除产品
|
||
handleDelete(id) {
|
||
uni.showModal({
|
||
title: "系统提示",
|
||
content: "是否删除该产品？",
|
||
confirmColor: "#E50002",
|
||
confirmText: "删除",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: "加载中"
|
||
})
|
||
this.$util.request("member.product.delete", {
|
||
id: id
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.getProductList(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
icon: "success",
|
||
title: "删除成功"
|
||
})
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
uni.hideLoading()
|
||
console.error('删除产品 ', error)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.component-member-product {
|
||
.product-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 2fr);
|
||
column-gap: 28rpx;
|
||
row-gap: 32rpx;
|
||
|
||
.list-item {
|
||
padding: 32rpx;
|
||
background: #FFF;
|
||
border-radius: 16rpx;
|
||
|
||
.item-image {
|
||
width: 100%;
|
||
height: 266rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 24rpx;
|
||
color: #5A5B6E;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
line-height: 34rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.item-group {
|
||
margin-top: 24rpx;
|
||
column-gap: 16rpx;
|
||
|
||
.group-btn {
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |