铝交易,微信公众号
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.

655 lines
15 KiB

9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
9 months ago
8 months ago
9 months ago
7 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
9 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
9 months ago
  1. <template>
  2. <view class="page">
  3. <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="frame">
  5. <view class="title">
  6. <span
  7. style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
  8. <span>{{ $t('other.aluminumProducts') }}</span>
  9. </view>
  10. <view class="basic-info">
  11. <!--供应商名称-->
  12. <!-- <view v-if="titleIndex == 1" class="item">
  13. <view>{{ $t('other.supplierName') }}</view>
  14. <view>华南铝业有限公司</view>
  15. </view> -->
  16. <!--商品主图-->
  17. <view class="item">
  18. <view>商品主图</view>
  19. <view class="">
  20. <uv-upload
  21. :fileList="fileList"
  22. :maxCount="1"
  23. multiple
  24. width="150rpx"
  25. height="150rpx"
  26. name="fileList"
  27. @delete="deleteImage"
  28. @afterRead="afterRead"
  29. :previewFullImage="true"></uv-upload>
  30. </view>
  31. </view>
  32. <!--商品详情-->
  33. <view class="item">
  34. <view>详情图片</view>
  35. <view class="">
  36. <uv-upload
  37. :fileList="contentFileList"
  38. :maxCount="3"
  39. multiple
  40. width="150rpx"
  41. height="150rpx"
  42. name="contentFileList"
  43. @delete="deleteImage"
  44. @afterRead="afterRead"
  45. :previewFullImage="true"></uv-upload>
  46. </view>
  47. </view>
  48. <view class="item">
  49. <view>详情视频</view>
  50. <view class="">
  51. <uv-upload
  52. :fileList="contentFileVideoList"
  53. :maxCount="3"
  54. multiple
  55. accept="video"
  56. width="150rpx"
  57. height="150rpx"
  58. name="contentFileVideoList"
  59. @delete="deleteImage"
  60. @afterRead="afterRead"
  61. :previewFullImage="true"></uv-upload>
  62. </view>
  63. </view>
  64. <!--商品规格-->
  65. <view class="item"
  66. @click="$refs.unitListPicker.open()">
  67. <view>{{ $t('components.productSpe') }}</view>
  68. <view>
  69. {{ unit.specsName }}
  70. </view>
  71. <view class="icon">
  72. <uv-icon name="arrow-right" size="30rpx"></uv-icon>
  73. </view>
  74. </view>
  75. <view class="addressA" @click="openAddress">
  76. <view class="title">提货地点</view>
  77. <view class="address" style="width: 70%">
  78. <image mode="" src="/static/image/address/selectIcon.png"></image>
  79. <view class="">
  80. {{ address.name + address.phone + address.address + address.addressDetail }}
  81. </view>
  82. <view class="icon">
  83. <uv-icon name="arrow-right" size="30rpx"></uv-icon>
  84. </view>
  85. </view>
  86. </view>
  87. <!--提货地点-->
  88. <!--<view class="currentRegion">-->
  89. <!-- <view>{{ $t('components.pickupLocation') }}</view>-->
  90. <!-- <view @click.stop="selectAddr">-->
  91. <!-- <input class="input" disabled v-model="form.currentRegion"-->
  92. <!-- :placeholder=" $t('components.selectRegion')">-->
  93. <!-- </input>-->
  94. <!-- <view class="orientation">-->
  95. <!-- <img src="../../static/image/address/selectIcon.png"-->
  96. <!-- style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">-->
  97. <!-- </view>-->
  98. <!-- </view>-->
  99. <!--</view>-->
  100. <!--详细地址-->
  101. <!-- <view v-if="address.addressDetail" class="item">
  102. <view>{{ $t('components.detailedAddress') }}</view>
  103. <view>
  104. <view class="">
  105. {{ address.address + ' ' + address.addressDetail }}
  106. </view>
  107. </view>
  108. </view> -->
  109. <view class="item"
  110. @click="$refs.startDateRef.open()">
  111. <view>{{ $t('components.deliveryDate') }}</view>
  112. <view>
  113. {{ form.transactionTime }}
  114. <uv-datetime-picker
  115. ref="startDateRef"
  116. v-model="form.transactionTime" mode="date"
  117. @confirm="startDateChange"></uv-datetime-picker>
  118. </view>
  119. <view class="icon">
  120. <uv-icon name="arrow-right" size="30rpx"></uv-icon>
  121. </view>
  122. </view>
  123. <!--暂定数量-->
  124. <view class="item">
  125. <view>{{ $t('other.tentativeQuantity') }}</view>
  126. <view>
  127. <uv-number-box v-model="form.num"></uv-number-box>
  128. </view>
  129. </view>
  130. <!--单价-->
  131. <view class="item">
  132. <view>{{ $t('components.unitPrice') }}</view>
  133. <view>
  134. <input v-model="form.price" clearable
  135. class="input-color"
  136. placeholder="请输入单价"></input>
  137. </view>
  138. </view>
  139. <!-- 检测报告 -->
  140. <view class="item">
  141. <view>检测报告</view>
  142. <view class="">
  143. <uv-upload
  144. :fileList="reportFileList"
  145. :maxCount="3"
  146. multiple
  147. width="150rpx"
  148. height="150rpx"
  149. name="reportFileList"
  150. @delete="deleteImage"
  151. @afterRead="afterRead"
  152. :previewFullImage="true"></uv-upload>
  153. </view>
  154. </view>
  155. <view class="item">
  156. <view>检测视频</view>
  157. <view class="">
  158. <uv-upload
  159. :fileList="reportFileVideoList"
  160. :maxCount="3"
  161. multiple
  162. accept="video"
  163. width="150rpx"
  164. height="150rpx"
  165. name="reportFileVideoList"
  166. @delete="deleteImage"
  167. @afterRead="afterRead"
  168. :previewFullImage="true"></uv-upload>
  169. </view>
  170. </view>
  171. <!--提交报价和提交审核-->
  172. <view class="btns">
  173. <span @click="confirmBtn" class="ljxd">
  174. {{ titleIndex == 0 ? $t('other.submitQuotation') : $t('other.submitReview') }}
  175. </span>
  176. <span class="lxwm" @click="contactUs">
  177. {{ $t('components.contactUs') }}
  178. </span>
  179. <span class="tip">如有疑问请联系我们</span>
  180. </view>
  181. </view>
  182. </view>
  183. <!-- 联系客服弹框 -->
  184. <customerServicePopup ref="customerServicePopup" />
  185. <!-- 地址选择弹框 -->
  186. <uv-popup ref="addressPopup" :round="30">
  187. <addressList ref="addressList" height="60vh" @select="selectAddress" />
  188. <view class="uni-color-btn"
  189. @click="toAddress">
  190. 添加地址
  191. </view>
  192. </uv-popup>
  193. <uv-picker ref="unitListPicker"
  194. keyName="specsName"
  195. :columns="unitList"
  196. itemHeight="80"
  197. @confirm="unitListConfirm"></uv-picker>
  198. </view>
  199. </template>
  200. <script>
  201. import topbar from "@/components/base/topbar.vue";
  202. import tabber from "@/components/base/tabbar.vue";
  203. import customerServicePopup from "@/components/config/customerServicePopup.vue";
  204. import Position from "@/utils/position";
  205. import dayjs from "dayjs";
  206. import AddressList from "@/pages_order/components/address/addressList.vue";
  207. export default {
  208. name: "offer",
  209. components: {
  210. AddressList,
  211. customerServicePopup,
  212. tabber,
  213. topbar
  214. },
  215. onLoad(options) {
  216. this.titleIndex = options.titleIndex || 0;//默认供应商报价
  217. this.type = options.type
  218. if(options.type = 'edit'){
  219. this.form = this.$store.state.orderDetail
  220. // 商品主图
  221. this.fileList = this.form.pic ? this.form.pic.split(',').map(url => {
  222. return {
  223. url
  224. }
  225. }) : []
  226. // 检测报告
  227. this.reportFileList = this.form.report ? this.form.report.split(',').map(url => {
  228. return {
  229. url
  230. }
  231. }) : []
  232. // 检测视频
  233. this.reportFileVideoList = this.form.reportVideo ? this.form.reportVideo.split(',').map(url => {
  234. return {
  235. url
  236. }
  237. }) : []
  238. // 商品内容-详情图片
  239. this.contentFileList = this.form.picDetail ? this.form.picDetail.split(',').map(url => {
  240. return {
  241. url
  242. }
  243. }) : []
  244. // 商品内容-详情视频
  245. this.contentFileVideoList = this.form.video ? this.form.video.split(',').map(url => {
  246. return {
  247. url
  248. }
  249. }) : []
  250. }
  251. },
  252. data() {
  253. return {
  254. titleIndex: 0,
  255. titleList: [
  256. // 0 供应商报价
  257. this.$t('pages.index.index.supplierQuotation'),
  258. this.$t('pages.index.index.supplierBillLading')
  259. ],
  260. form: {
  261. "addressId": "",
  262. "num": 1,
  263. "price": '',
  264. "transactionTime": dayjs(new Date()).format("YYYY-MM-DD")
  265. },
  266. address: {
  267. name: '请选择地址',
  268. addressDetail: '',
  269. },
  270. addressTotal: 0,
  271. fileList : [],//商品主图
  272. reportFileList : [],//检测报告
  273. reportFileVideoList : [],//检测视频
  274. contentFileList : [],//商品内容
  275. contentFileVideoList : [],//商品详情视频
  276. unitList : [],//规格列表
  277. unit : {//选中的规格
  278. specsName : '请选择规格'
  279. },
  280. type : '',
  281. }
  282. },
  283. onShow() {
  284. this.getUnitList()
  285. this.getAddressDefault()
  286. },
  287. methods: {
  288. //获取默认地址
  289. getAddressDefault() {
  290. return new Promise((success, fail) => {
  291. this.$api('addressList', {
  292. pageNo: 1,
  293. pageSize: 1,
  294. }, res => {
  295. if (res.code == 200) {
  296. this.address = res.result.records[0];
  297. }
  298. })
  299. })
  300. },
  301. // 查询规格
  302. getUnitList(){
  303. this.$api('specsList', {
  304. pageNo : 1,
  305. pageSize : 9999999,
  306. }, res => {
  307. if(res.code == 200){
  308. this.unitList = [res.result.records]
  309. if(this.type == 'edit'){
  310. res.result.records.forEach(n => {
  311. if(n.id == this.form.specsId){
  312. this.unit = n
  313. }
  314. })
  315. }
  316. }
  317. })
  318. },
  319. //获取地址列表
  320. getAddressList() {
  321. this.$refs.addressList
  322. .getAddressList()
  323. .then(res => {
  324. if (res.total == 0) {
  325. this.toAddress()
  326. }
  327. })
  328. },
  329. // 跳转到添加地址页面
  330. toAddress(){
  331. this.$refs.addressPopup.close()
  332. return uni.navigateTo({
  333. url: '/pages_order/center/addressListManage?type=back'
  334. })
  335. },
  336. // 提交报价/提交审核
  337. confirmBtn() {
  338. //TODO
  339. this.form.addressId = this.address.id
  340. this.form.specsId = this.unit.id
  341. // 商品主图
  342. this.form.pic = this.fileList.map(n => n.url).join(',')
  343. // 检测报告
  344. this.form.report = this.reportFileList.map(n => n.url).join(',')
  345. // 检测视频
  346. this.form.reportVideo = this.reportFileVideoList.map(n => n.url).join(',')
  347. // 商品内容-详情图片
  348. this.form.picDetail = this.contentFileList.map(n => n.url).join(',')
  349. // 商品内容-详情视频
  350. this.form.video = this.contentFileVideoList.map(n => n.url).join(',')
  351. if (this.$utils.verificationAll(this.form, {
  352. "pic": '请上传主图',
  353. // "picDetail": '请上传内容图片',
  354. specsId : "请选择规格",
  355. "addressId": '请选择提货地点',
  356. "num": '请选择吨数',
  357. "price": '请输入单价',
  358. "transactionTime": '请选择交货时间',
  359. })) {
  360. return
  361. }
  362. let api = 'addProduct'
  363. if(this.type == 'edit'){
  364. api = 'updateProduct'
  365. }
  366. this.$api(api, this.form, res => {
  367. if (res.code == 200) {
  368. uni.showToast({
  369. title: '提交成功',
  370. icon: 'none'
  371. })
  372. setTimeout(() => {
  373. uni.reLaunch({
  374. url: '/pages/index/index'
  375. })
  376. }, 1000)
  377. }
  378. })
  379. },
  380. // 选中规格时
  381. unitListConfirm(e){
  382. this.unit = e.value[0]
  383. },
  384. openAddress() {
  385. this.$refs.addressPopup.open('bottom')
  386. // this.getAddressList()
  387. this.$nextTick(() => {
  388. this.getAddressList()
  389. })
  390. },
  391. // 选择地址
  392. selectAddress(e) {
  393. this.address = e
  394. this.$refs.addressPopup.close()
  395. },
  396. startDateChange(val) {
  397. this.$nextTick(() => {
  398. this.form.transactionTime = dayjs(val.value).format("YYYY-MM-DD")
  399. });
  400. },
  401. startDateOpen() {
  402. this.$refs.startDateRef.open();
  403. },
  404. // 联系我们
  405. contactUs() {
  406. this.$refs.customerServicePopup.open()
  407. },
  408. //地图上选择地址
  409. selectAddr() {
  410. Position.getLocation(res => {
  411. Position.selectAddress(res.longitude, res.latitude, success => {
  412. this.setAddress(success)
  413. })
  414. })
  415. Position.getLocationDetail(res => {
  416. console.log(res);
  417. this.form.address = res
  418. })
  419. },
  420. // 上传图片
  421. afterRead(e) {
  422. let self = this
  423. e.file.forEach(file => {
  424. self.$Oss.ossUpload(file.url).then(url => {
  425. self[e.name].push({
  426. url
  427. })
  428. })
  429. })
  430. },
  431. // 删除图片
  432. deleteImage(e) {
  433. this[e.name].splice(e.index, 1)
  434. },
  435. },
  436. }
  437. </script>
  438. <style scoped lang="scss">
  439. .page {
  440. height: 100vh;
  441. .frame {
  442. background-color: #FFF;
  443. .title {
  444. display: flex;
  445. font-size: 30rpx;
  446. font-weight: 700;
  447. padding: 0rpx 0 0rpx 20rpx;
  448. margin: 20rpx 0 0 0;
  449. >span:nth-of-type(1) {
  450. margin: 4rpx 0 0 8rpx;
  451. background-color: #FFF;
  452. }
  453. >span:nth-of-type(2) {
  454. margin: 0 0 0 8rpx;
  455. background-color: #FFF;
  456. }
  457. }
  458. .basic-info {
  459. display: flex;
  460. flex-direction: column;
  461. gap: 10rpx;
  462. //margin-top: 20rpx;
  463. padding: 20rpx 20rpx 20rpx 20rpx;
  464. .addressA {
  465. display: flex;
  466. align-items: center;
  467. background-color: #FFF;
  468. // height: 80rpx;
  469. .title {
  470. display: flex;
  471. align-items: center;
  472. justify-content: flex-start;
  473. font-weight: 400;
  474. width: 30%;
  475. }
  476. .address {
  477. width: 70%;
  478. display: flex;
  479. padding: 20rpx;
  480. background-color: #fff;
  481. image {
  482. width: 30rpx;
  483. height: 30rpx;
  484. margin: 10rpx;
  485. flex-shrink: 0;
  486. }
  487. view {
  488. //margin: 20rpx;
  489. // overflow: hidden; //超出的文本隐藏
  490. // text-overflow: ellipsis; //溢出用省略号显示
  491. // white-space: nowrap; //溢出不换行
  492. }
  493. .icon {
  494. display: flex;
  495. justify-content: center;
  496. align-items: center;
  497. margin-left: auto;
  498. }
  499. }
  500. }
  501. .Tip {
  502. display: flex;
  503. align-items: center;
  504. justify-content: center;
  505. .span {
  506. color: #999;
  507. font-size: 24rpx;
  508. }
  509. }
  510. .btns {
  511. width: 100%;
  512. display: flex;
  513. flex-direction: column;
  514. align-items: center;
  515. justify-content: center;
  516. gap: 20rpx;
  517. .ljxd {
  518. display: flex;
  519. align-items: center;
  520. justify-content: center;
  521. width: 500rpx;
  522. height: 70rpx;
  523. border-radius: 40rpx;
  524. color: #FFF;
  525. font-size: 28rpx;
  526. margin: 20rpx 10rpx 0 0;
  527. background: $uni-color;
  528. //margin-top: 20rpx;
  529. border-radius: 40rpx;
  530. }
  531. .lxwm {
  532. display: flex;
  533. align-items: center;
  534. justify-content: center;
  535. width: 500rpx;
  536. height: 70rpx;
  537. border-radius: 40rpx;
  538. color: #000000;
  539. font-size: 28rpx;
  540. margin: 20rpx 10rpx 0 0;
  541. background: #f1f1f1;
  542. //margin-top: 20rpx;
  543. border-radius: 40rpx;
  544. }
  545. .tip {
  546. display: flex;
  547. align-items: center;
  548. justify-content: center;
  549. font-size: 24rpx;
  550. color: #999;
  551. //width: 500rpx;
  552. }
  553. }
  554. .item {
  555. display: flex;
  556. align-items: center;
  557. background-color: #FFF;
  558. margin: 10rpx 0 0 0;
  559. padding: 10rpx 20rpx;
  560. >view:nth-of-type(1) {
  561. width: 30%;
  562. // font-weight: 700;
  563. }
  564. >view:nth-of-type(2) {
  565. flex: 1;
  566. border-radius: 10rpx;
  567. overflow: hidden;
  568. input {
  569. background-color: #00000011;
  570. font-size: 28rpx;
  571. padding: 16rpx 8rpx 16rpx 15rpx;
  572. }
  573. }
  574. }
  575. }
  576. }
  577. // .input-color{
  578. // padding: 20rpx;
  579. // border-radius: 20rpx;
  580. // }
  581. }
  582. </style>