goods.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995
  1. <template>
  2. <view class="padding">
  3. <view class="text-white padding bg radius">
  4. <div style="color: red">新增商品默认库存为1000件,需要修改可点击操作批量修改库存</div>
  5. <u-form :model="shop" label-position="top">
  6. <u-form-item label="商品标题">
  7. <u-input v-model="shop.goodsName" placeholder="请填写商品标题" />
  8. </u-form-item>
  9. <u-form-item label="商品分类">
  10. <u-input v-model="shop.classifyName" placeholder="请选择" :disabled="true" @click="getflshow()" />
  11. </u-form-item>
  12. <u-form-item label="商品标签">
  13. <!-- <u-input v-model="" placeholder="请填写" /> -->
  14. <view class="flex align-center flex-wrap margin-bottom-sm">
  15. <view v-for="(item, index) in goodsLabel" :key="index" class="btn flex align-center margin-top">
  16. <view>{{ item }}</view>
  17. <view class="margin-left-sm" @tap.stop="bindupdata(index)">x</view>
  18. </view>
  19. <view class="btns margin-top" @click="addtype1()">+添加</view>
  20. </view>
  21. </u-form-item>
  22. <u-form-item label="商品原价(选填)">
  23. <u-input v-model="shop.originalMoney" @input="ZheKouInput" placeholder="请填写" />
  24. </u-form-item>
  25. <u-form-item label="打包费(选填)">
  26. <u-input v-model="shop.packMoney" placeholder="请填写" />
  27. </u-form-item>
  28. <u-form-item label="商品售价">
  29. <u-input v-model="shop.goodsMoney" @input="ZheKouInput" placeholder="请填写" />
  30. </u-form-item>
  31. <view class="padding bg radius margin-tb" style="padding: 10px 0">
  32. <view>
  33. <view class="text-lg" style="color: #333">商品描述(选填)</view>
  34. <view class="margin-tb-sm">
  35. <u-input
  36. v-model="shop.goodsDescribe"
  37. type="textarea"
  38. height="200"
  39. placeholde="请描述一下您的特长"
  40. maxlengt="200"
  41. :clearable="false"
  42. style="background: #f5f5f5"
  43. />
  44. </view>
  45. </view>
  46. <view>
  47. <view class="text-lg margin-top-sm text-black">商品封面图</view>
  48. <view class="flex" style="overflow: hidden; flex-wrap: wrap">
  49. <view v-if="shop.goodsCover.length">
  50. <view class="margin-top flex margin-right-sm flex-wrap">
  51. <view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative">
  52. <image :src="shop.goodsCover" style="width: 100%; height: 100%"></image>
  53. <view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImgs()">
  54. <u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="margin-top" @click="addImage(1)" v-if="shop.goodsCover.length <= 0">
  60. <view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
  61. <view>
  62. <view class="text-center">
  63. <image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
  64. </view>
  65. <view class="text-center text-black">添加图片</view>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view>
  72. <view class="text-lg margin-top-sm text-black">商品轮播图(可多张)</view>
  73. <view class="flex" style="overflow: hidden; flex-wrap: wrap">
  74. <view v-if="goodsPicture.length">
  75. <view class="margin-top flex margin-right-sm flex-wrap">
  76. <view
  77. class="flex"
  78. style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
  79. v-for="(image, index) in goodsPicture"
  80. :key="index"
  81. >
  82. <image :src="image" style="width: 100%; height: 100%"></image>
  83. <view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index, 'lb')">
  84. <u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="margin-top" @click="addImages(1)" v-if="goodsPicture.length <= 5">
  90. <view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
  91. <view>
  92. <view class="text-center">
  93. <image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
  94. </view>
  95. <view class="text-center text-black">添加图片</view>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view>
  102. <view class="text-lg margin-top-sm text-black">商品详情图(可多张)(选填)</view>
  103. <view class="flex" style="overflow: hidden; flex-wrap: wrap">
  104. <view v-if="goodsParticularsPicture.length">
  105. <view class="margin-top flex margin-right-sm flex-wrap">
  106. <view
  107. class="flex"
  108. style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
  109. v-for="(image, index) in goodsParticularsPicture"
  110. :key="index"
  111. >
  112. <image :src="image" style="width: 100%; height: 100%"></image>
  113. <view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index, 'sq')">
  114. <u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. <view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length <= 5">
  120. <view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
  121. <view>
  122. <view class="text-center">
  123. <image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
  124. </view>
  125. <view class="text-center text-black">添加图片</view>
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. </view>
  131. <!-- <view>
  132. <view class="text-lg margin-top-sm text-black">商品详情图(可多张)</view>
  133. <editor id="editor"
  134. style="height:350rpx;color: #000000;font-size: 28rpx;width: 100%;border: 2rpx solid #F0F0F0;padding: 16rpx;"
  135. placeholder="请输入商品详情" @ready="onEditorReady" @input="getText"></editor>
  136. </view>
  137. <view>
  138. <view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length<=1">
  139. <view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
  140. class="flex justify-center align-center">
  141. <view>
  142. <view class="text-center">
  143. <image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
  144. </image>
  145. </view>
  146. <view class="text-center text-black">添加图片</view>
  147. </view>
  148. </view>
  149. </view>
  150. </view> -->
  151. </view>
  152. <u-form-item label="规格类型">
  153. <u-input v-model="attrsType" placeholder="请选择" :disabled="true" @click="ggShow()" />
  154. </u-form-item>
  155. <u-form-item label="商品规格" v-if="attrsid == 2">
  156. <view style="width: 100%">
  157. <view style="display: flex; width: 100%">
  158. <u-input style="width: 80%" v-model="attrs" placeholder="请选择" :disabled="true" @click="openguige()" />
  159. <view style="width: 20%; text-align: right; color: #ff4701" v-if="attrs" @click="goGuiGeItem()">修改价格</view>
  160. </view>
  161. <view style="color: #ff4701; font-size: 24upx">*修改商品、商品售价后,商品规格将重置,请谨慎操作!</view>
  162. </view>
  163. </u-form-item>
  164. </u-form>
  165. </view>
  166. <u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">提交</u-button>
  167. <!-- 规格弹框 -->
  168. <u-popup v-model="Guigeshow" mode="bottom" border-radius="14" :closeable="closeable">
  169. <view>
  170. <scroll-view scroll-y="true">
  171. <view class="padding" style="margin-bottom: 70px">
  172. <view>规格类型</view>
  173. <view class="flex align-center margin-top-sm flex-wrap">
  174. <view class="" v-for="(item, indexs) in list" :key="indexs">
  175. <view class="btn margin-top-sm flex align-center flex-wrap" :class="listIndex == indexs ? 'boxH' : ''" @click="bindguige(indexs, 1, item.ruleName)">
  176. {{ item.ruleName }}
  177. </view>
  178. <!-- <view class="btns margin-top-sm" @click="addtype(1)">+添加</view> -->
  179. </view>
  180. </view>
  181. <view v-for="(name, index) in attrList.ruleValue" :key="index">
  182. <view class="margin-top-sm">{{ name.value }}</view>
  183. <view class="flex align-center flex-wrap margin-top-sm">
  184. <!-- :class="typeIndex1 == index&&typeIndex == ind?'active':''" -->
  185. <view class="btn margin-top-sm" v-for="(ite, ind) in name.detail1" :key="ind" @click="bindguige(ind, 2, name.detail, index)" v-if="name.detail1">
  186. {{ ite }}
  187. </view>
  188. <!-- <view class="btns margin-top-sm">+添加</view> -->
  189. </view>
  190. </view>
  191. </view>
  192. </scroll-view>
  193. <view class="addguige" @click="bindget()">确定</view>
  194. </view>
  195. </u-popup>
  196. <u-select v-model="flshow" :list="ClassifyList" valueName="classifyId" labelName="classifyName" @confirm="confirm"></u-select>
  197. <!-- 规格类型 -->
  198. <u-select v-model="ggshow" :list="attrList1" valueName="id" labelName="name" @confirm="ggconfirm"></u-select>
  199. <!-- 添加规格弹框 -->
  200. <u-popup v-model="show2" mode="center" border-radius="14" width="500rpx" height="300rpx" :closeable="closeable">
  201. <view>
  202. <view class="padding">
  203. <view>添加标签</view>
  204. <view>
  205. <u-input v-model="typeName" placeholder="请填写" />
  206. </view>
  207. </view>
  208. <view class="addguiges" @click="bindclose1()">确定</view>
  209. </view>
  210. </u-popup>
  211. <!-- 用于图片压缩的canvas画布 -->
  212. <canvas
  213. :style="{
  214. width: cw + 'px',
  215. height: cw + 'px',
  216. position: 'absolute',
  217. zIndex: -1,
  218. left: '-10000rpx',
  219. top: '-10000rpx'
  220. }"
  221. canvas-id="zipCanvas"
  222. ></canvas>
  223. <!--画布结束-->
  224. </view>
  225. </template>
  226. <script>
  227. import configdata from '@/common/config.js'
  228. import getLessLimitSizeImage from '@/utils/imageCompress.js'
  229. export default {
  230. data() {
  231. return {
  232. shop: {
  233. goodsName: '',
  234. classifyId: '',
  235. classifyName: '',
  236. goodsLabel: [],
  237. attr: [],
  238. sku: [],
  239. originalMoney: '',
  240. packMoney: 0,
  241. goodsMoney: '',
  242. goodsDescribe: '',
  243. //详情图
  244. goodsCover: '',
  245. goodsPicture: [],
  246. goodsParticularsPicture: [],
  247. shopId: uni.getStorageSync('shopId')
  248. },
  249. shops: {
  250. goodsName: '',
  251. classifyId: '',
  252. classifyName: '',
  253. goodsLabel: [],
  254. attr: [],
  255. sku: [],
  256. originalMoney: '',
  257. packMoney: 0,
  258. goodsMoney: '',
  259. goodsDescribe: '',
  260. //详情图
  261. goodsCover: '',
  262. goodsPicture: [],
  263. goodsParticularsPicture: [],
  264. shopId: uni.getStorageSync('shopId')
  265. },
  266. attrs: '',
  267. goodsLabel: [],
  268. goodsPicture: [],
  269. goodsParticularsPicture: [],
  270. customStyle: {
  271. backgroundColor: '#FFCC00',
  272. color: '#000000',
  273. border: 0
  274. },
  275. status: 1,
  276. customStyle1: {
  277. color: '#000000',
  278. position: 'fixed',
  279. bottom: '15rpx',
  280. left: '0rpx',
  281. right: '0rpx',
  282. margin: '0rpx 50rpx',
  283. backgroundColor: '#FFCC00'
  284. },
  285. Guigeshow: false,
  286. //详情图
  287. goodsCover: [],
  288. shopId: '',
  289. page: 1,
  290. limit: 100,
  291. list: [],
  292. listIndex: 0,
  293. typeIndex: 0,
  294. typeIndex1: 0,
  295. wdIndex: 0,
  296. show: false,
  297. typeName: '',
  298. shows: false,
  299. typeperature: '',
  300. flshow: false,
  301. ggshow: false,
  302. ClassifyList: [],
  303. attrList: {},
  304. attrLists: [],
  305. shopId: '',
  306. show2: false,
  307. update: 0,
  308. count: 6,
  309. editorCtx: '',
  310. htmlMessage: '',
  311. closeable: true,
  312. attrsType: '多规格',
  313. attrsid: 2,
  314. attrList1: [
  315. {
  316. name: '单规格',
  317. id: 1
  318. },
  319. {
  320. name: '多规格',
  321. id: 2
  322. }
  323. ],
  324. //画板边长默认是屏幕宽度,正方形画布
  325. cw: uni.getSystemInfoSync().windowWidth
  326. }
  327. },
  328. onLoad(option) {
  329. console.log('option', option)
  330. if (option.goodsId) {
  331. this.update = 1
  332. uni.setNavigationBarTitle({
  333. title: '修改商品'
  334. })
  335. this.goodsDet(option.goodsId)
  336. } else {
  337. this.update = 0
  338. }
  339. // console.log(option, '店铺id')
  340. // this.shopId = option.shopId
  341. this.shopId = this.$queue.getData('shopId')
  342. this.getguige()
  343. // this.onEditorReady();
  344. },
  345. onShow() {
  346. let list = this.$queue.getData('guigeSelectItemList')
  347. if (list) {
  348. this.shop.sku = list
  349. this.$queue.remove('guigeSelectItemList')
  350. }
  351. this.getClassifyList()
  352. },
  353. methods: {
  354. ZheKouInput(e) {
  355. console.log(e)
  356. this.attrs = ''
  357. this.shop.attr = []
  358. if (this.attrsid == 1) {
  359. this.guigeclect()
  360. } else {
  361. this.getgoodslist()
  362. }
  363. },
  364. goGuiGeItem() {
  365. this.$queue.setData('guigeSelectItemList', this.shop.sku)
  366. uni.navigateTo({
  367. url: '/my/publish/guigeitem'
  368. })
  369. },
  370. //获取分类
  371. getflshow() {
  372. console.log(this.ClassifyList.length)
  373. if (this.ClassifyList.length == 0) {
  374. uni.navigateTo({
  375. url: '/my/store/fenlei'
  376. })
  377. } else {
  378. this.flshow = true
  379. }
  380. },
  381. // 规格类型
  382. ggShow() {
  383. this.ggshow = true
  384. },
  385. //获取商品规格列表
  386. getgoodslist() {
  387. let ruleValues = this.attrList.ruleValue
  388. for (var j = 0; j < ruleValues.length; j++) {
  389. let details = ruleValues[j].detail
  390. ruleValues[j].detail = ruleValues[j].detail.toString()
  391. }
  392. let data = {
  393. attrName: this.attrList.ruleName,
  394. attrValue: ruleValues,
  395. ruleId: this.attrList.id
  396. }
  397. this.$Request
  398. .postJsonBB(
  399. '/admin/goods/isFormatAttr',
  400. {
  401. coverImg: this.shop.goodsCover,
  402. originalPrice: this.shop.originalMoney,
  403. price: this.shop.goodsMoney
  404. },
  405. data
  406. )
  407. .then((res) => {
  408. if (res.code == 0) {
  409. // this.shop.sku.push(res.data.value)
  410. this.shop.sku = res.data.value
  411. console.log(res.data.value, '111', this.shop.sku)
  412. }
  413. })
  414. },
  415. //获取规格
  416. bindget() {
  417. this.getgoodslist()
  418. this.attrs = this.attrList.ruleName
  419. var obj = {}
  420. obj.attrName = this.attrList.ruleName
  421. obj.attrValue = this.attrList.ruleValue
  422. obj.ruleId = this.attrList.id
  423. this.shop.attr.push(obj)
  424. this.Guigeshow = false
  425. },
  426. //商品分类
  427. confirm(e) {
  428. // console.log(e)
  429. this.shop.classifyName = e[0].label
  430. this.shop.classifyId = e[0].value
  431. },
  432. //规格分类
  433. ggconfirm(e) {
  434. // console.log(e)
  435. this.attrsType = e[0].label
  436. this.attrsid = e[0].value
  437. if (e[0].value == 1) {
  438. this.shop.attr = []
  439. this.guigeclect()
  440. }
  441. },
  442. // 单规格
  443. guigeclect() {
  444. let data = {
  445. coverImg: this.shop.goodsCover,
  446. originalPrice: this.shop.originalMoney,
  447. price: this.shop.goodsMoney
  448. }
  449. this.$Request.getA('/admin/goods/onlyFormatAttr', data).then((res) => {
  450. if (res.code == 0) {
  451. // this.shop.sku.push(res.data.value)
  452. this.shop.sku = res.data.value
  453. console.log(res.data.value, '111', this.shop.sku)
  454. }
  455. })
  456. },
  457. addtype(index) {
  458. if (index == 1) {
  459. this.show = true
  460. } else if (index == 2) {
  461. this.shows = true
  462. }
  463. },
  464. bindclose() {
  465. if (index == 1) {
  466. this.show = false
  467. } else if (index == 2) {
  468. this.shows = false
  469. }
  470. },
  471. //弹框规格切换
  472. bindguige(index, e, name, index1) {
  473. // console.log(index, e, name)
  474. if (e == 1) {
  475. this.listIndex = index
  476. this.attrList = this.list[index]
  477. } else if (e == 2) {
  478. this.typeIndex = index
  479. this.typeIndex1 = index1
  480. } else if (e == 3) {
  481. this.wdIndex = index
  482. }
  483. },
  484. //规格弹框
  485. openguige() {
  486. if (!this.attrList.ruleValue) {
  487. uni.showToast({
  488. title: '暂无规格',
  489. icon: 'none',
  490. duration: 1000
  491. })
  492. return
  493. }
  494. // 打开规格选项弹框
  495. this.Guigeshow = true
  496. },
  497. //获取商品规格
  498. getguige() {
  499. let data = {
  500. // page: this.page,
  501. // limit: this.limit,
  502. shopId: this.shopId
  503. }
  504. this.$Request.getA('/selfGoodsRule/list', data).then((res) => {
  505. if (res.code == 0) {
  506. // this.shop.sku = res.data
  507. if (res.data.length > 0) {
  508. this.list = res.data
  509. this.list.forEach((res) => {
  510. res.ruleValue.forEach((ret) => {
  511. ret.detail = ret.detail.split(',')
  512. ret.detail1 = ret.detail
  513. })
  514. })
  515. console.log('this.attrList', this.list)
  516. this.attrList = this.list[0]
  517. if (this.shop.attr && this.shop.attr.length > 0) {
  518. for (var i in res.data) {
  519. if (this.shop.attr[0].ruleId == res.data[i].id) {
  520. this.attrs = res.data[i].ruleName
  521. }
  522. }
  523. }
  524. }
  525. }
  526. })
  527. },
  528. // 商品类型
  529. getClassifyList() {
  530. let data = {
  531. shopId: this.shopId
  532. }
  533. this.$Request.getA('/admin/goods/selectAllClassify', data).then((res) => {
  534. if (res.code == 0) {
  535. this.ClassifyList = res.data
  536. this.counts = this.ClassifyList[0].classifyId
  537. if (this.shop.classifyId != '') {
  538. for (var i in res.data) {
  539. if (this.shop.classifyId == res.data[i].classifyId) {
  540. this.shop.classifyName = res.data[i].classifyName
  541. }
  542. }
  543. }
  544. }
  545. })
  546. },
  547. getStarttime(e) {
  548. console.log(e)
  549. console.log(this.shop)
  550. this.shop.openTime = e.hour + ':' + e.minute
  551. },
  552. getEndtime(e) {
  553. console.log(e)
  554. this.shop.closeTime = e.hour + ':' + e.minute
  555. },
  556. // 详情图删除
  557. removeImg(index, texts) {
  558. if (texts == 'lb') {
  559. this.goodsPicture.splice(index, 1)
  560. } else if (texts == 'sq') {
  561. this.goodsParticularsPicture.splice(index, 1)
  562. }
  563. },
  564. // 身份证 资格证删除
  565. removeImgs() {
  566. // if (index == 1) {
  567. this.shop.goodsCover = ''
  568. // }
  569. },
  570. bindOpen(e) {
  571. console.log(e)
  572. let that = this
  573. uni.chooseLocation({
  574. success: function (res) {
  575. console.log('位置名称:' + res.name)
  576. console.log('详细地址:' + res.address)
  577. console.log('纬度:' + res.latitude)
  578. console.log('经度:' + res.longitude)
  579. that.shop.detailedAddress = res.address
  580. that.shop.shopLat = res.latitude
  581. that.shop.shopLng = res.longitude
  582. }
  583. })
  584. },
  585. // 图片上传
  586. addImages(e) {
  587. if (e == 1) {
  588. var num = this.goodsPicture.length
  589. this.count = 6 - num
  590. }
  591. if (e == 2) {
  592. var num = this.goodsParticularsPicture.length
  593. this.count = 6 - num
  594. }
  595. let that = this
  596. uni.chooseImage({
  597. count: this.count,
  598. sourceType: ['album', 'camera'],
  599. success: (res) => {
  600. for (let i = 0; i < res.tempFiles.length; i++) {
  601. //这里的id和页面中写的html代码的canvas的id要一致
  602. let canvasId = 'zipCanvas'
  603. //原图的路径
  604. let imagePath = res.tempFiles[i].path
  605. //大小限制
  606. let limitSize = 1024 * 2
  607. //初始绘画区域是画布自身的宽度也就是屏幕宽度
  608. let drawWidth = uni.getSystemInfoSync().windowWidth
  609. let that = this
  610. getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
  611. uni.showLoading({
  612. title: '上传中'
  613. })
  614. uni.uploadFile({
  615. url: that.config('APIHOST1') + '/alioss/upload',
  616. filePath: resPath,
  617. name: 'file',
  618. success: (uploadFileRes) => {
  619. if (e == 1) {
  620. if (that.goodsPicture.length < 6) {
  621. that.goodsPicture.push(JSON.parse(uploadFileRes.data).data)
  622. }
  623. } else if (e == 2) {
  624. if (that.goodsParticularsPicture.length < 6) {
  625. that.goodsParticularsPicture.push(JSON.parse(uploadFileRes.data).data)
  626. }
  627. console.log(that.goodsParticularsPicture)
  628. }
  629. uni.hideLoading()
  630. },
  631. fail: () => {
  632. uni.showToast({
  633. title: '上传失败',
  634. icon: 'error'
  635. })
  636. }
  637. })
  638. })
  639. }
  640. }
  641. })
  642. },
  643. // 图片上传
  644. addImage(e) {
  645. let that = this
  646. uni.chooseImage({
  647. count: 1,
  648. sourceType: ['album', 'camera'],
  649. success: (res) => {
  650. for (let i = 0; i < res.tempFiles.length; i++) {
  651. //这里的id和页面中写的html代码的canvas的id要一致
  652. let canvasId = 'zipCanvas'
  653. //原图的路径
  654. let imagePath = res.tempFiles[i].path
  655. //大小限制
  656. let limitSize = 1024 * 2
  657. //初始绘画区域是画布自身的宽度也就是屏幕宽度
  658. let drawWidth = uni.getSystemInfoSync().windowWidth
  659. let that = this
  660. getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
  661. uni.showLoading({
  662. title: '上传中'
  663. })
  664. uni.uploadFile({
  665. url: that.config('APIHOST1') + '/alioss/upload',
  666. filePath: resPath,
  667. name: 'file',
  668. success: (uploadFileRes) => {
  669. if (e == 1) {
  670. that.shop.goodsCover = JSON.parse(uploadFileRes.data).data
  671. }
  672. uni.hideLoading()
  673. },
  674. fail: () => {
  675. uni.showToast({
  676. title: '上传失败',
  677. icon: 'error'
  678. })
  679. }
  680. })
  681. })
  682. }
  683. }
  684. })
  685. },
  686. config: function (name) {
  687. var info = null
  688. if (name) {
  689. var name2 = name.split('.') //字符分割
  690. if (name2.length > 1) {
  691. info = configdata[name2[0]][name2[1]] || null
  692. } else {
  693. info = configdata[name] || null
  694. }
  695. if (info == null) {
  696. let web_config = cache.get('web_config')
  697. if (web_config) {
  698. if (name2.length > 1) {
  699. info = web_config[name2[0]][name2[1]] || null
  700. } else {
  701. info = web_config[name] || null
  702. }
  703. }
  704. }
  705. }
  706. return info
  707. },
  708. // 发布
  709. submit() {
  710. this.shop.goodsPicture = this.goodsPicture
  711. this.shop.goodsPicture = this.goodsPicture.toString()
  712. this.shop.goodsParticularsPicture = this.goodsParticularsPicture.toString()
  713. this.shop.goodsLabel = this.goodsLabel.toString()
  714. if (!this.shop.goodsName) {
  715. uni.showToast({
  716. title: '请填写商品标题',
  717. icon: 'none',
  718. duration: 1000
  719. })
  720. return
  721. }
  722. if (!this.shop.classifyName) {
  723. uni.showToast({
  724. title: '请选择商品分类',
  725. icon: 'none',
  726. duration: 1000
  727. })
  728. return
  729. }
  730. if (!this.shop.goodsLabel) {
  731. uni.showToast({
  732. title: '请填写商品标签',
  733. icon: 'none',
  734. duration: 1000
  735. })
  736. return
  737. }
  738. if (!this.shop.originalMoney) {
  739. this.shop.originalMoney = this.shop.goodsMoney
  740. // uni.showToast({
  741. // title: '请填写商品原价',
  742. // icon: 'none',
  743. // duration: 1000
  744. // })
  745. // return
  746. }
  747. // console.log(this.shop.packMoney,'------------')
  748. // if (this.shop.packMoney*1 != '') {
  749. // uni.showToast({
  750. // title: '请填写商品打包费',
  751. // icon: 'none',
  752. // duration: 1000
  753. // })
  754. // return
  755. // }
  756. if (!this.shop.goodsMoney) {
  757. uni.showToast({
  758. title: '请填写商品售价',
  759. icon: 'none',
  760. duration: 1000
  761. })
  762. return
  763. }
  764. if (!this.shop.goodsDescribe) {
  765. this.shop.goodsDescribe = '无'
  766. // uni.showToast({
  767. // title: '请填写商品描述',
  768. // icon: 'none',
  769. // duration: 1000
  770. // })
  771. // return
  772. }
  773. if (!this.shop.goodsCover) {
  774. uni.showToast({
  775. title: '请上传商品封面图',
  776. icon: 'none',
  777. duration: 1000
  778. })
  779. return
  780. }
  781. if (!this.shop.goodsPicture) {
  782. uni.showToast({
  783. title: '请上传商品轮播图',
  784. icon: 'none',
  785. duration: 1000
  786. })
  787. return
  788. }
  789. if (!this.shop.goodsParticularsPicture) {
  790. this.goodsParticularsPicture = [this.Tupian('/xiangqing/12ecc56005731327e02f42f0d851848.png')]
  791. // uni.showToast({
  792. // title: '请上传商品详情图',
  793. // icon: 'none',
  794. // duration: 1000
  795. // })
  796. // return
  797. }
  798. if (this.attrsid == 2) {
  799. if (this.shop.attr.length == 0) {
  800. uni.showToast({
  801. title: '请选择商品规格',
  802. icon: 'none',
  803. duration: 1000
  804. })
  805. return
  806. }
  807. }
  808. let shops = this.shop
  809. for (var i = 0; i < shops.attr.length; i++) {
  810. let attrValues = shops.attr[i].attrValue
  811. for (var j = 0; j < attrValues.length; j++) {
  812. let details = attrValues[j].detail
  813. let detailss = ''
  814. for (var z = 0; z < details.length; z++) {
  815. detailss = detailss + details[z]
  816. }
  817. shops.attr[i].attrValue[j].detail = detailss
  818. }
  819. }
  820. if (this.update == 0) {
  821. var url = '/admin/goods/insertGoods'
  822. }
  823. if (this.update == 1) {
  824. var url = '/admin/goods/update'
  825. }
  826. this.$Request.postJsonA(url, shops).then((res) => {
  827. if (res.code == 0) {
  828. uni.showToast({
  829. title: '操作成功',
  830. icon: 'none'
  831. })
  832. setTimeout(function () {
  833. uni.navigateBack()
  834. }, 1000)
  835. } else {
  836. uni.showToast({
  837. title: res.msg,
  838. icon: 'none'
  839. })
  840. }
  841. })
  842. },
  843. //删除规格
  844. bindupdata(index) {
  845. console.log('this.shop.goodsLabel', typeof this.goodsLabel)
  846. this.goodsLabel.splice(index, 1)
  847. },
  848. addtype1() {
  849. this.typeName = ''
  850. this.show2 = true
  851. },
  852. bindclose1() {
  853. if (!this.typeName) {
  854. uni.showToast({
  855. title: '请填写规格',
  856. icon: 'none',
  857. duration: 1000
  858. })
  859. return
  860. }
  861. this.goodsLabel.push(this.typeName)
  862. this.show2 = false
  863. },
  864. // 获取商铺详情
  865. goodsDet(goodsId) {
  866. let data = {
  867. goodsId: goodsId
  868. }
  869. this.$Request.getA('/admin/goods/selectGoodsById', data).then((res) => {
  870. if (res.code == 0) {
  871. this.dataCentre = res.data
  872. this.shop = res.data
  873. this.getClassifyList()
  874. if (this.shop.goodsLabel) {
  875. this.goodsLabel = this.shop.goodsLabel.split(',')
  876. }
  877. if (this.shop.goodsPicture) {
  878. this.goodsPicture = this.shop.goodsPicture.split(',')
  879. }
  880. if (this.shop.goodsParticularsPicture) {
  881. this.goodsParticularsPicture = this.shop.goodsParticularsPicture.split(',')
  882. }
  883. if (res.data.attr.length == 0) {
  884. this.attrsid = 1
  885. this.attrsType = '单规格'
  886. } else {
  887. this.attrsid = 2
  888. this.attrsType = '多规格'
  889. }
  890. this.getguige()
  891. }
  892. })
  893. }
  894. }
  895. }
  896. </script>
  897. <style>
  898. page {
  899. background-color: #f5f5f5;
  900. }
  901. .bg {
  902. background-color: #ffffff;
  903. }
  904. .btn {
  905. border: 1upx solid #cccccc;
  906. border-radius: 10px;
  907. padding: 0rpx 30rpx;
  908. margin-right: 25rpx;
  909. height: 30px;
  910. line-height: 30px;
  911. }
  912. .boxH {
  913. background: #fcd202;
  914. border: none;
  915. }
  916. .btns {
  917. border: 1upx dashed #333333;
  918. border-radius: 28px;
  919. padding: 0rpx 35rpx;
  920. margin-right: 25rpx;
  921. height: 30px;
  922. line-height: 30px;
  923. }
  924. .active {
  925. background: #fcd202;
  926. border: none;
  927. }
  928. .actives {
  929. background: #fcd202;
  930. border: none;
  931. }
  932. .addguige {
  933. width: 90%;
  934. margin: 0 auto;
  935. background: #fcd202;
  936. box-shadow: 0px 10upx 20upx 0px #ffd9b3;
  937. border-radius: 16upx;
  938. text-align: center;
  939. height: 88upx;
  940. line-height: 88upx;
  941. position: fixed;
  942. bottom: 25upx;
  943. left: 0;
  944. right: 0;
  945. }
  946. .addguiges {
  947. width: 90%;
  948. margin: 0 auto;
  949. background: #fcd202;
  950. box-shadow: 0px 10upx 20upx 0px #ffd9b3;
  951. border-radius: 16upx;
  952. text-align: center;
  953. height: 88upx;
  954. line-height: 88upx;
  955. /* position: fixed;
  956. bottom: 25upx;
  957. left: 0;
  958. right: 0; */
  959. }
  960. .u-input__textarea {
  961. background-color: #f5f5f5 !important;
  962. padding: 10rpx !important;
  963. }
  964. </style>