popups_goods.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <el-dialog width="70%" class="goods_popups" title="选择商品" :visible.sync="goodsDialog" :append-to-body="true">
  3. <div class="dflex_sb">
  4. <div></div>
  5. <div class="dflex_vertical_c margin_b_20">
  6. <div class="search_name">商品名称:</div>
  7. <el-input v-model="req.name" placeholder="请输入" class="search_input" @input="search" clearable></el-input>
  8. </div>
  9. </div>
  10. <el-table ref="goods" height="60vh" :data="tableDatas" highlight-current-row @selection-change="selectionChange" @row-click="choice">
  11. <el-table-column type="selection"></el-table-column>
  12. <el-table-column label="商品" width="400" align="center">
  13. <template slot-scope="scope">
  14. <div class="dflex_vertical_c">
  15. <el-image class="e_table_side_img100 margin_r_10" :src="scope.row.imgs" fit="cover"></el-image>
  16. <div class="left_just">
  17. <div class="ellipsis">{{ scope.row.name }}</div>
  18. </div>
  19. </div>
  20. </template>
  21. </el-table-column>
  22. <el-table-column label="价格" align="center">
  23. <template slot-scope="scope">
  24. <div class="price">{{ scope.row.price}}</div>
  25. <div class="m_price">{{ scope.row.marketPrice}}</div>
  26. </template>
  27. </el-table-column>
  28. <el-table-column label="状态" align="center">
  29. <template slot-scope="scope">
  30. <template v-if="scope.row.state==0">下架</template>
  31. <template v-if="scope.row.state==1">在售</template>
  32. <template v-if="scope.row.state==2">待审核</template>
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="数据统计" align="left" width="100">
  36. <template slot-scope="scope">
  37. <div class="left_just">
  38. <div>已售数:{{ scope.row.saleCnt }}</div>
  39. <div>访问数:{{ scope.row.visitCnt }}</div>
  40. <div>收藏数:{{ scope.row.collectCnt }}</div>
  41. <!-- <div>分享数:{{ scope.row.shareCnt }}</div> -->
  42. </div>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="标签" align="center" width="220">
  46. <template slot-scope="scope">
  47. <el-tag effect="plain" type="info" class="margin_r_5 margin_t_5" v-for="(item, i) in scope.row.goodsServiceTags" :key="i">{{ item.tagName }}</el-tag>
  48. </template>
  49. </el-table-column>
  50. </el-table>
  51. <el-pagination
  52. :current-page="req.page"
  53. :page-sizes="[10, 20, 30, 50, 100]"
  54. :page-size="req.rows"
  55. layout="total, sizes, prev, pager, next, jumper"
  56. :total="tableTotal"
  57. @size-change="sizeChange"
  58. @current-change="currentChange"
  59. ></el-pagination>
  60. <div class="btn pos_a">
  61. <el-button class="confirm_btn" @click="confirm">确 定</el-button>
  62. <el-button @click="goodsDialog = false">取 消</el-button>
  63. </div>
  64. </el-dialog>
  65. </template>
  66. <script>
  67. const __name = 'usemall-goods';
  68. export default {
  69. // props: {
  70. // limited: {
  71. // type: String,
  72. // required: true
  73. // }
  74. // },
  75. data() {
  76. return {
  77. goodsDialog: false,
  78. where_obj: {},
  79. req: {
  80. page: 1,
  81. rows: 10,
  82. orderby: 'sort asc',
  83. name: ''
  84. },
  85. tableDatas: [],
  86. tableTotal: 0,
  87. selectDatas: [],
  88. limited:'',
  89. hot:''
  90. };
  91. },
  92. methods: {
  93. loadData() {
  94. this.$axios.get("/goods/admin/list",
  95. {
  96. params:{
  97. 'curPage':this.req.page,
  98. 'pageSize':this.req.rows,
  99. 'goodsName':this.req.name,//商品名称搜索
  100. 'limited':this.limited,//是否限时精选;0否1是
  101. 'hot':this.hot,//是否热门;0否1是
  102. },
  103. headers:{
  104. 'Mall-Token': uni.getStorageSync("token")
  105. }
  106. }).then(response => {
  107. let res = response
  108. console.log(res)
  109. if (res.success) {
  110. this.tableDatas = res.data.list;
  111. this.tableTotal = res.data.totalCount;
  112. } else {
  113. }
  114. }).catch(res =>{
  115. });
  116. // this.$db[__name]
  117. // .whereif(this.req.name, { name: new RegExp(this.req.name) })
  118. // .where(this.where_obj)
  119. // .totable(this.req)
  120. // .then(res => {
  121. // if (res.code == 200) {
  122. // this.tableDatas = res.datas.rows;
  123. // this.tableTotal = res.datas.total;
  124. // }
  125. // });
  126. },
  127. search(e) {
  128. this.req.page = 1;
  129. this.req.name=e
  130. this.loadData();
  131. },
  132. show(data) {
  133. this.limited=data.limited
  134. this.hot=data.hot
  135. for (const key in data) {
  136. if (data.hasOwnProperty(key)) {
  137. this.where_obj[key] = data[key];
  138. }
  139. }
  140. this.goodsDialog = true;
  141. this.loadData();
  142. },
  143. choice(row) {
  144. this.$refs.goods.toggleRowSelection(row);
  145. },
  146. selectionChange(val) {
  147. this.selectDatas = val;
  148. },
  149. confirm() {
  150. if (this.selectDatas.length <= 0) {
  151. this.$message('请选择商品');
  152. return;
  153. }
  154. this.$emit('choiceGoods', this.selectDatas);
  155. let data = this.selectDatas.map(x => x.id);
  156. if(this.limited==0){
  157. var type='2'
  158. }else if(this.hot==0){
  159. var type='1'
  160. }
  161. this.$axios.put("/goods/admin/hot-limited-change",
  162. {
  163. "action": type,//1热门推荐、2限时精选
  164. "goodIds": data,
  165. "type": 1//1新增、0取消
  166. },
  167. {
  168. headers:{
  169. 'Mall-Token': uni.getStorageSync("token")
  170. }
  171. }).then(response => {
  172. let res = response
  173. if (res.success) {
  174. this.loadData();
  175. this.goodsDialog = false;
  176. } else {
  177. }
  178. }).catch(res =>{
  179. });
  180. },
  181. sizeChange(size) {
  182. this.req.rows = size;
  183. this.loadData();
  184. },
  185. currentChange(current) {
  186. this.req.page = current;
  187. this.loadData();
  188. }
  189. }
  190. };
  191. </script>
  192. <style>
  193. .goods_popups .btn {
  194. bottom: 20px;
  195. right: 20px;
  196. }
  197. </style>