GoodsForm1.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  2. <seller-base :show="false">
  3. <view class="div container">
  4. <view class="div common-header-wrap">
  5. <view :style="'height:'+navHeight+'px'"></view>
  6. <view class="common-header-holder"></view>
  7. <view class="common-header-fixed">
  8. <title-header />
  9. <uni-nav-bar title="商品发布" class="common-header" left-icon="back" @clickLeft="goBack()">
  10. </uni-nav-bar>
  11. </view>
  12. </view>
  13. <step :options="options" :active="0"></step>
  14. <view class="div main-content">
  15. <view class="div" @click="showPopup('classVisible')">
  16. <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">商品分类</text><text class="span" slot="right">{{goods_class.gc_name}}</text></flex-line>
  17. </view>
  18. <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="nextStep">下一步</view></view>
  19. </view>
  20. <!--服务分类-->
  21. <uni-popup background-color="#fff" ref="classVisible" type="bottom">
  22. <view class="container">
  23. <view class="div toolbar">
  24. <text class="button toolbar-item cancel-item" @click="cancelClass">取消</text>
  25. <view class="div picker-header">选择分类</view>
  26. <text class="button toolbar-item confirm-item" @click="confirmClass">确定</text>
  27. </view>
  28. <picker-view class="popup-content" indicator-style="height:80rpx" @change="onClassChange" :value="gcPicker">
  29. <picker-view-column v-for="(item,index) in buildItems" :key="index">
  30. <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.value}}</text></view>
  31. </picker-view-column>
  32. </picker-view>
  33. </view>
  34. </uni-popup>
  35. </view>
  36. </seller-base>
  37. </template>
  38. <script>
  39. import {getFontSize} from '@/util/common'
  40. import TitleHeader from '../../TitleHeader'
  41. import { urlencode } from '@/util/common'
  42. import SellerBase from '../SellerBase'
  43. import { mapState, mapActions } from 'vuex'
  44. import Step from '../../Step'
  45. import { getGoodsClass } from '../../../api/sellerGoods'
  46. import flexLine from '../../flexLine'
  47. export default {
  48. data(){
  49. return {
  50. navHeight: 0,
  51. gcPicker:[0,0,0],
  52. controller:'Sellergoodsonline',
  53. options: [{ title: '选择商品分类' }, { title: '填写商品详情' }, { title: '上传商品图片' }],
  54. classVisible: false,
  55. goods_class: {},
  56. commonid:0,
  57. store_bind_class: false
  58. }
  59. },
  60. computed:{
  61. fontSize(){
  62. return getFontSize()
  63. },
  64. ...mapState({
  65. items: state => state.goodsclass.items
  66. }),
  67. buildItems: function () {
  68. if (!this.items || !this.store_bind_class || !this.items[0]) {
  69. return []
  70. }
  71. let items = new Array()
  72. if (this.store_bind_class.bind_all) {
  73. this.getDefaultItems(this.items, items)
  74. } else {
  75. this.getDefaultItems(this.store_bind_class.goods_class, items)
  76. }
  77. return items
  78. }
  79. },
  80. onLoad: function (option) {
  81. var action=option.action
  82. this.commonid = option.commonid?option.commonid:''
  83. if(action=='add'){
  84. this.controller='Sellergoodsadd'
  85. }
  86. getGoodsClass(this.controller).then(res => {
  87. this.store_bind_class = res.result
  88. }).catch(error => {
  89. uni.showToast({icon:'none',title: error.message})
  90. })
  91. this.fetchGoodsclassList()
  92. },
  93. components:{
  94. TitleHeader,
  95. SellerBase,
  96. flexLine,
  97. Step
  98. },
  99. mounted(){
  100. // #ifdef MP-WEIXIN
  101. this.navHeight = uni.getMenuButtonBoundingClientRect().height
  102. // #endif
  103. },
  104. methods:{
  105. showPopup(id){
  106. this.$refs[id].open()
  107. },
  108. hidePopup(id){
  109. this.$refs[id].close()
  110. },
  111. goBack(){uni.navigateBack({delta:1})},
  112. ...mapActions({
  113. fetchGoodsclassList: 'fetchGoodsclassList'
  114. }),
  115. getDefaultItems (_item, defaultItems) {
  116. defaultItems.push({
  117. flex: 1,
  118. values: _item,
  119. textAlign: 'center'
  120. })
  121. defaultItems.push({
  122. flex: 1,
  123. values: _item[0].children,
  124. textAlign: 'center'
  125. })
  126. defaultItems.push({
  127. flex: 1,
  128. values: (_item[0].children && _item[0].children.length) ? _item[0].children[0].children : [],
  129. textAlign: 'center'
  130. })
  131. },
  132. cancelClass () {
  133. this.hidePopup('classVisible')
  134. },
  135. confirmClass () {
  136. let values = []
  137. for(var i in this.gcPicker){
  138. values[i]=this.buildItems[i]['values'][this.gcPicker[i]]
  139. if(!values[i]){
  140. values[i]={
  141. id:0,
  142. value:''
  143. }
  144. }
  145. }
  146. var temp = values[2]
  147. if (!temp.id) {
  148. temp = values[1]
  149. }
  150. if (!temp.id) {
  151. temp = values[0]
  152. }
  153. this.goods_class={
  154. gc_name : temp.value,
  155. gc_id : temp.id
  156. }
  157. this.hidePopup('classVisible')
  158. },
  159. onClassChange (e) {
  160. let value=e.detail.value
  161. let gcPicker=this.gcPicker
  162. for(var i in value){
  163. gcPicker[i]=value[i]
  164. i=parseInt(i)
  165. if(i<(value.length-1)){
  166. if(!this.buildItems[i]['values'].length || !this.buildItems[i]['values'][value[i]]['children'] || !this.buildItems[i]['values'][value[i]]['children'].length){
  167. this.buildItems[i+1]['values']=[]
  168. gcPicker[i+1]=0
  169. }else if(!this.buildItems[i+1]['values'].length || this.buildItems[i]['values'][value[i]]['children'][0]['id']!=this.buildItems[i+1]['values'][0]['id']){
  170. this.buildItems[i+1]['values']=this.buildItems[i]['values'][value[i]]['children']
  171. gcPicker[i+1]=0
  172. }
  173. }
  174. }
  175. this.gcPicker=gcPicker
  176. this.$forceUpdate()
  177. },
  178. nextStep () {
  179. if (!this.goods_class.gc_id) {
  180. uni.showToast({icon:'none',title: '请选择商品分类'})
  181. return
  182. }
  183. uni.redirectTo({url:'/pages/seller/goods/GoodsForm2'+'?'+urlencode({ class_id: this.goods_class.gc_id, commonid: this.commonid })})
  184. }
  185. }
  186. }
  187. </script>
  188. <style scoped lang="scss">
  189. .main-content{background: #fff;padding:0 $pageSpace}
  190. .container{
  191. background: #fff;
  192. }
  193. .toolbar {
  194. height: 2rem;
  195. display: flex;
  196. flex-direction: row;
  197. justify-content: space-between;
  198. align-items: center;
  199. background-color: #f0f2f5;
  200. .toolbar-item {
  201. font-size:$fontSize;
  202. border: none;
  203. border-radius: 0;
  204. background-color: #f0f2f5;
  205. }
  206. .cancel-item {
  207. margin-left: 0.5rem;
  208. color: #4e545d;
  209. }
  210. .confirm-item {
  211. margin-right: 0.5rem;
  212. color: red;
  213. }
  214. .picker-header {
  215. color: #4e545d;
  216. line-height: 2rem;
  217. font-size:$h2;
  218. }
  219. }
  220. .popup-content {
  221. padding: 0 40rpx;
  222. height: 300rpx;
  223. }
  224. .popup-item-wrapper{
  225. display: flex;
  226. justify-content: center;
  227. align-items: center;
  228. }
  229. .popup-item {
  230. font-size: 30rpx;
  231. line-height:80rpx;
  232. text-align: center;
  233. overflow: hidden;
  234. text-overflow: ellipsis;
  235. white-space: nowrap;
  236. }
  237. </style>