多租户商城-商户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

385 lines
12 KiB

  1. <template>
  2. <div class="productGroupTool">
  3. <h3 class="toolTit">分组列表</h3>
  4. <div class="toolBox">
  5. <div class="itemBox">
  6. <label>标题</label>
  7. <el-input v-model="activeComponent.componentContent.title" maxlength="20" :placeholder="$t('common.defaulthint')"></el-input>
  8. </div>
  9. <tool-select :linkValue.sync='activeComponent.componentContent.textAlign' title="文字对齐方式" :options="alignList"></tool-select>
  10. <div class="itemBox">
  11. <div class="Tit">显示方式</div>
  12. <el-select v-model="activeComponent.componentContent.showType" :placeholder="$t('common.choose')">
  13. <el-option label="平铺" :value="1"></el-option>
  14. <el-option label="列表" :value="2"></el-option>
  15. </el-select>
  16. </div>
  17. <div class="textTit">添加分组</div>
  18. <div class="productGroupListBox">
  19. <draggable v-model="activeComponent.componentContent.productGroupData">
  20. <div v-for="(item, index) in activeComponent.componentContent.productGroupData" :key="index" class="item">
  21. <div class="listItemBox">
  22. <div class="addImgTit" @click="openAddProductGroup(item, index)">
  23. <div class="titLeft">
  24. <span class="iconfont">&#xe703;</span>
  25. <span class="iconfont">&#xe64a;</span>
  26. <span>分组</span>
  27. </div>
  28. <div class="titRight">
  29. <span class="iconfont" @click.stop="deleteItem(item, index)">&#xe633;</span>
  30. <span v-html="productGroupCurrent === index ? '&#xe660;' : '&#xe695;'" class="iconfont"></span>
  31. </div>
  32. </div>
  33. <div class="addBox" v-show="productGroupCurrent === index">
  34. <div class="addContent">
  35. <tool-single-img :imageUrl.sync='item.img' tip='建议尺寸5:4等比例图片'></tool-single-img>
  36. <div v-if="!item.data.groupName" class="addProductGroupBox" @click="addItemProductGroup(item, index)"><span class="iconfont">&#xe685;</span>添加分组</div>
  37. <div v-else class="productGroupName">
  38. <span>{{item.data.groupName}}</span>
  39. <div class="operation">
  40. <span class="iconfont" @click="replaceProductGroup(index)">&#xe66c;</span>
  41. <span class="iconfont" @click="deleteProductGroup(index)">&#xe633;</span>
  42. </div>
  43. </div>
  44. </div>
  45. <div @click="deleteItem(item, index)" class="deleteItem"><span class="iconfont">&#xe633;</span>删除内容</div>
  46. </div>
  47. </div>
  48. </div>
  49. </draggable>
  50. </div>
  51. </div>
  52. <div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length < 8" @click="addProductGroup"><span class="iconfont">&#xe64a;</span>添加分组</div>
  53. <div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length === 8"><span class="iconfont">&#xe608;</span>最多只能添加8个</div>
  54. <el-dialog
  55. title="提示"
  56. :visible.sync="dialogVisible"
  57. width="30%"
  58. :before-close="deleteItem">
  59. <span>点击确定删除此项</span>
  60. <span slot="footer" class="dialog-footer">
  61. <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
  62. <el-button type="primary" @click="dialogVisible = false">{{ $t('common.sure') }}</el-button>
  63. </span>
  64. </el-dialog>
  65. <el-dialog title="选择分组" :visible.sync="dialogProductGroup" width="480px">
  66. <product-group-select ref="productGroupSelect"></product-group-select>
  67. <span slot="footer" class="dialog-footer">
  68. <el-button @click="dialogProductGroup = false">{{ $t('common.cancel') }}</el-button>
  69. <el-button type="primary" @click="productGroupChanged">{{ $t('common.sure') }}</el-button>
  70. </span>
  71. </el-dialog>
  72. </div>
  73. </template>
  74. <script>
  75. import Draggable from 'vuedraggable'
  76. import {toolMixin} from '@@/config/mixin'
  77. import ProductGroupSelect from '../toolModule/product-group-select'
  78. import ToolSingleImg from '../toolModule/tool-single-img'
  79. import ToolSelect from '../toolModule/tool-select'
  80. // import imageSrc from '../../../assets/canvasImg'
  81. export default {
  82. mixins: [toolMixin],
  83. name: 'productGroupTool',
  84. components: {
  85. ToolSelect,
  86. ToolSingleImg,
  87. ProductGroupSelect,
  88. Draggable
  89. },
  90. data () {
  91. return {
  92. title: '', // 标题内容
  93. alignList: [
  94. {
  95. id: 1,
  96. label: '居左',
  97. value: 'left'
  98. },
  99. {
  100. id: 2,
  101. label: '居中',
  102. value: 'center'
  103. },
  104. {
  105. id: 3,
  106. label: '居右',
  107. value: 'right'
  108. }
  109. ],
  110. textAlign: 'left',
  111. productGroupCurrent: null,
  112. dialogVisible: false,
  113. dialogProductGroup: false,
  114. currentProductGroup: null
  115. }
  116. },
  117. computed: {
  118. },
  119. methods: {
  120. openAddProductGroup (item, index) {
  121. if (this.productGroupCurrent === index) {
  122. this.productGroupCurrent = null
  123. return false
  124. }
  125. this.productGroupCurrent = index
  126. },
  127. // 添加分组
  128. addProductGroup () {
  129. this.activeComponent.componentContent.productGroupData.push({
  130. data: [],
  131. img: ''
  132. })
  133. },
  134. // 删除内容
  135. deleteItem (item, index) {
  136. this.$confirm('确定删除此项?')
  137. .then(_ => {
  138. this.activeComponent.componentContent.productGroupData.splice(index, 1)
  139. })
  140. .catch(_ => {
  141. })
  142. },
  143. addItemProductGroup (item, index) {
  144. this.dialogProductGroup = true
  145. this.productGroupCurrent = index
  146. },
  147. // 替换分组
  148. replaceProductGroup (index) {
  149. this.dialogProductGroup = true
  150. this.productGroupCurrent = index
  151. console.log(this.productGroupCurrent)
  152. },
  153. // 删除已选分组
  154. deleteProductGroup (index) {
  155. this.activeComponent.componentContent.productGroupData[index].data = {}
  156. },
  157. // 选择分组
  158. productGroupChanged () {
  159. let nodesObj = this.$refs.productGroupSelect.productGroup
  160. console.log(nodesObj, this.productGroupCurrent)
  161. if (nodesObj) {
  162. var data = nodesObj
  163. this.dialogProductGroup = false
  164. this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].id = data.id
  165. this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].data = data
  166. }
  167. }
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. .productGroupTool {
  173. padding: 20px 20px 0 20px;
  174. h3 {
  175. font-size: 18px;
  176. font-weight: 500;
  177. height: 35px;
  178. line-height: 35px;
  179. color: #333333;
  180. margin-bottom: 20px;
  181. }
  182. .toolBox {
  183. padding-bottom: 10px;
  184. .textTit {
  185. height: 35px;
  186. line-height: 35px;
  187. font-size: 16px;
  188. color: #333333;
  189. font-weight: bold;
  190. }
  191. .itemBox {
  192. label {
  193. font-size: 14px;
  194. color: #666666;
  195. height: 40px;
  196. line-height: 40px;
  197. }
  198. margin-bottom: 15px;
  199. }
  200. }
  201. ::v-deep .ql-container {
  202. height: 200px;
  203. }
  204. .productGroupListBox {
  205. margin-top: 30px;
  206. .item {
  207. border: 1px solid #E8EAEC;
  208. border-radius: 4px;
  209. margin-bottom: 10px;
  210. }
  211. .listItemBox {
  212. .addImgTit {
  213. padding: 10px;
  214. display: flex;
  215. justify-content: space-between;
  216. align-items: center;
  217. background: #F6F7F9;
  218. cursor: pointer;
  219. .titLeft {
  220. display: flex;
  221. align-items: center;
  222. span {
  223. color: #7D7E80;
  224. }
  225. span:nth-child(1) {
  226. font-size: 28px;
  227. }
  228. span:nth-child(2) {
  229. font-size: 25px;
  230. margin: 0 6px;
  231. }
  232. span:nth-child(3) {
  233. font-size: 14px;
  234. }
  235. }
  236. .titRight {
  237. display: flex;
  238. align-items: center;
  239. span:nth-child(1) {
  240. width: 40px;
  241. text-align: center;
  242. display: block;
  243. height: 30px;
  244. line-height: 30px;
  245. }
  246. }
  247. }
  248. .addContent {
  249. padding: 13px;
  250. .addProductGroupBox {
  251. width: 100%;
  252. height: 35px;
  253. display: flex;
  254. align-items: center;
  255. justify-content: center;
  256. color: #ffffff;
  257. background: $mainColor;
  258. border-radius: 4px;
  259. margin: 15px 0;
  260. cursor: pointer;
  261. }
  262. .deleteItem {
  263. border-radius: 4px;
  264. background: $mainColor;
  265. text-align: center;
  266. height: 36px;
  267. color: #ffffff;
  268. font-size: 14px;
  269. display: flex;
  270. align-items: center;
  271. justify-content: center;
  272. cursor: pointer;
  273. margin-bottom: 10px;
  274. span {
  275. font-size: 18px;
  276. color: #ffffff;
  277. margin-right: 5px;
  278. }
  279. }
  280. .productGroupName {
  281. height: 35px;
  282. display: flex;
  283. align-items: center;
  284. background: #e9e9e9;
  285. padding: 0 10px;
  286. justify-content: space-between;
  287. span {
  288. color: #333333;
  289. }
  290. span {
  291. color: #333333;
  292. }
  293. .operation {
  294. display: flex;
  295. span {
  296. width: 35px;
  297. display: block;
  298. height: 35px;
  299. line-height: 35px;
  300. text-align: center;
  301. cursor: pointer;
  302. }
  303. }
  304. }
  305. }
  306. .deleteItem {
  307. padding: 10px;
  308. display: flex;
  309. align-items: center;
  310. justify-content: center;
  311. background: #F6F7F9;
  312. cursor: pointer;
  313. color: $mainColor;
  314. font-size: 14px;
  315. span {
  316. font-size: 16px;
  317. margin-right: 5px;
  318. }
  319. }
  320. }
  321. }
  322. .addImgBtn {
  323. border-radius: 4px;
  324. background: $mainColor;
  325. text-align: center;
  326. height: 36px;
  327. color: #ffffff;
  328. font-size: 14px;
  329. display: flex;
  330. align-items: center;
  331. justify-content: center;
  332. cursor: pointer;
  333. span {
  334. font-size: 20px;
  335. margin-right: 5px;
  336. }
  337. }
  338. .classList {
  339. .classTit {
  340. display: flex;
  341. justify-content: space-between;
  342. height: 50px;
  343. align-items: center;
  344. padding:0 20px;
  345. background: #eeeeee;
  346. span {
  347. display: block;
  348. width: 100px;
  349. text-align: center;
  350. }
  351. }
  352. .classListBox {
  353. max-height: 300px;
  354. overflow-y: auto;
  355. .classItemBox {
  356. display: flex;
  357. padding: 0 20px;
  358. align-items: center;
  359. border-bottom: 1px solid #eeeeee;
  360. div {
  361. display: flex;
  362. flex: 1;
  363. justify-content: space-between;
  364. height: 50px;
  365. align-items: center;
  366. span:nth-child(1) {
  367. padding-left: 5px;
  368. }
  369. span {
  370. display: block;
  371. width: 100px;
  372. text-align: left;
  373. }
  374. span:nth-child(2) {
  375. text-align: center;
  376. }
  377. }
  378. }
  379. }
  380. }
  381. }
  382. </style>