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

602 lines
13 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
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
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
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
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
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
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 }}
  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;
  217. },
  218. data() {
  219. return {
  220. titleIndex: 0,
  221. titleList: [
  222. // 0 供应商报价
  223. this.$t('pages.index.index.supplierQuotation'),
  224. this.$t('pages.index.index.supplierBillLading')
  225. ],
  226. form: {
  227. "addressId": "",
  228. "num": 1,
  229. "price": '',
  230. "transactionTime": dayjs(new Date()).format("YYYY-MM-DD")
  231. },
  232. address: {
  233. name: '请选择地址',
  234. addressDetail: '',
  235. },
  236. addressTotal: 0,
  237. fileList : [],//商品主图
  238. reportFileList : [],//检测报告
  239. reportFileVideoList : [],//检测视频
  240. contentFileList : [],//商品内容
  241. contentFileVideoList : [],//商品详情视频
  242. unitList : [],//规格列表
  243. unit : {//选中的规格
  244. specsName : '请选择规格'
  245. },
  246. }
  247. },
  248. onShow() {
  249. this.getUnitList()
  250. this.getAddressDefault()
  251. },
  252. onLoad() {
  253. },
  254. methods: {
  255. //获取默认地址
  256. getAddressDefault() {
  257. return new Promise((success, fail) => {
  258. this.$api('addressList', {
  259. pageNo: 1,
  260. pageSize: 1,
  261. }, res => {
  262. if (res.code == 200) {
  263. this.address = res.result.records[0];
  264. }
  265. })
  266. })
  267. },
  268. // 查询规格
  269. getUnitList(){
  270. this.$api('specsList', {
  271. pageNo : 1,
  272. pageSize : 9999999,
  273. }, res => {
  274. if(res.code == 200){
  275. this.unitList = [res.result.records]
  276. }
  277. })
  278. },
  279. //获取地址列表
  280. getAddressList() {
  281. this.$refs.addressList
  282. .getAddressList()
  283. .then(res => {
  284. if (res.total == 0) {
  285. this.toAddress()
  286. }
  287. })
  288. },
  289. // 跳转到添加地址页面
  290. toAddress(){
  291. this.$refs.addressPopup.close()
  292. return uni.navigateTo({
  293. url: '/pages_order/center/addressListManage?type=back'
  294. })
  295. },
  296. // 提交报价/提交审核
  297. confirmBtn() {
  298. //TODO
  299. this.form.addressId = this.address.id
  300. this.form.specsId = this.unit.id
  301. // 商品主图
  302. this.form.pic = this.fileList.map(n => n.url).join(',')
  303. // 检测报告
  304. this.form.report = this.reportFileList.map(n => n.url).join(',')
  305. // 检测视频
  306. this.form.reportVideo = this.reportFileVideoList.map(n => n.url).join(',')
  307. // 商品内容-详情图片
  308. this.form.picDetail = this.contentFileList.map(n => n.url).join(',')
  309. // 商品内容-详情视频
  310. this.form.video = this.contentFileVideoList.map(n => n.url).join(',')
  311. if (this.$utils.verificationAll(this.form, {
  312. "pic": '请上传主图',
  313. // "picDetail": '请上传内容图片',
  314. specsId : "请选择规格",
  315. "addressId": '请选择提货地点',
  316. "num": '请选择吨数',
  317. "price": '请输入单价',
  318. "transactionTime": '请选择交货时间',
  319. })) {
  320. return
  321. }
  322. this.$api('addProduct', this.form, res => {
  323. if (res.code == 200) {
  324. uni.showToast({
  325. title: '提交成功',
  326. icon: 'none'
  327. })
  328. setTimeout(() => {
  329. uni.reLaunch({
  330. url: '/pages/index/index'
  331. })
  332. }, 1000)
  333. }
  334. })
  335. },
  336. // 选中规格时
  337. unitListConfirm(e){
  338. this.unit = e.value[0]
  339. },
  340. openAddress() {
  341. this.$refs.addressPopup.open('bottom')
  342. // this.getAddressList()
  343. this.$nextTick(() => {
  344. this.getAddressList()
  345. })
  346. },
  347. // 选择地址
  348. selectAddress(e) {
  349. this.address = e
  350. this.$refs.addressPopup.close()
  351. },
  352. startDateChange(val) {
  353. this.$nextTick(() => {
  354. this.form.transactionTime = dayjs(val.value).format("YYYY-MM-DD")
  355. });
  356. },
  357. startDateOpen() {
  358. this.$refs.startDateRef.open();
  359. },
  360. // 联系我们
  361. contactUs() {
  362. this.$refs.customerServicePopup.open()
  363. },
  364. //地图上选择地址
  365. selectAddr() {
  366. Position.getLocation(res => {
  367. Position.selectAddress(res.longitude, res.latitude, success => {
  368. this.setAddress(success)
  369. })
  370. })
  371. Position.getLocationDetail(res => {
  372. console.log(res);
  373. this.form.address = res
  374. })
  375. },
  376. // 上传图片
  377. afterRead(e) {
  378. let self = this
  379. e.file.forEach(file => {
  380. self.$Oss.ossUpload(file.url).then(url => {
  381. self[e.name].push({
  382. url
  383. })
  384. })
  385. })
  386. },
  387. // 删除图片
  388. deleteImage(e) {
  389. this[e.name].splice(e.index, 1)
  390. },
  391. },
  392. }
  393. </script>
  394. <style scoped lang="scss">
  395. .page {
  396. height: 100vh;
  397. .frame {
  398. background-color: #FFF;
  399. .title {
  400. display: flex;
  401. font-size: 30rpx;
  402. font-weight: 700;
  403. padding: 0rpx 0 0rpx 20rpx;
  404. margin: 20rpx 0 0 0;
  405. >span:nth-of-type(1) {
  406. margin: 4rpx 0 0 8rpx;
  407. background-color: #FFF;
  408. }
  409. >span:nth-of-type(2) {
  410. margin: 0 0 0 8rpx;
  411. background-color: #FFF;
  412. }
  413. }
  414. .basic-info {
  415. display: flex;
  416. flex-direction: column;
  417. gap: 10rpx;
  418. //margin-top: 20rpx;
  419. padding: 20rpx 20rpx 20rpx 20rpx;
  420. .addressA {
  421. display: flex;
  422. align-items: center;
  423. background-color: #FFF;
  424. height: 80rpx;
  425. .title {
  426. display: flex;
  427. align-items: center;
  428. justify-content: flex-start;
  429. font-weight: 400;
  430. width: 30%;
  431. }
  432. .address {
  433. width: 70%;
  434. display: flex;
  435. padding: 20rpx;
  436. background-color: #fff;
  437. image {
  438. width: 30rpx;
  439. height: 30rpx;
  440. margin: 10rpx;
  441. }
  442. view {
  443. //margin: 20rpx;
  444. overflow: hidden; //超出的文本隐藏
  445. text-overflow: ellipsis; //溢出用省略号显示
  446. white-space: nowrap; //溢出不换行
  447. }
  448. .icon {
  449. display: flex;
  450. justify-content: center;
  451. align-items: center;
  452. margin-left: auto;
  453. }
  454. }
  455. }
  456. .Tip {
  457. display: flex;
  458. align-items: center;
  459. justify-content: center;
  460. .span {
  461. color: #999;
  462. font-size: 24rpx;
  463. }
  464. }
  465. .btns {
  466. width: 100%;
  467. display: flex;
  468. flex-direction: column;
  469. align-items: center;
  470. justify-content: center;
  471. gap: 20rpx;
  472. .ljxd {
  473. display: flex;
  474. align-items: center;
  475. justify-content: center;
  476. width: 500rpx;
  477. height: 70rpx;
  478. border-radius: 40rpx;
  479. color: #FFF;
  480. font-size: 28rpx;
  481. margin: 20rpx 10rpx 0 0;
  482. background: $uni-color;
  483. //margin-top: 20rpx;
  484. border-radius: 40rpx;
  485. }
  486. .lxwm {
  487. display: flex;
  488. align-items: center;
  489. justify-content: center;
  490. width: 500rpx;
  491. height: 70rpx;
  492. border-radius: 40rpx;
  493. color: #000000;
  494. font-size: 28rpx;
  495. margin: 20rpx 10rpx 0 0;
  496. background: #f1f1f1;
  497. //margin-top: 20rpx;
  498. border-radius: 40rpx;
  499. }
  500. .tip {
  501. display: flex;
  502. align-items: center;
  503. justify-content: center;
  504. font-size: 24rpx;
  505. color: #999;
  506. //width: 500rpx;
  507. }
  508. }
  509. .item {
  510. display: flex;
  511. align-items: center;
  512. background-color: #FFF;
  513. margin: 10rpx 0 0 0;
  514. padding: 10rpx 20rpx;
  515. >view:nth-of-type(1) {
  516. width: 30%;
  517. // font-weight: 700;
  518. }
  519. >view:nth-of-type(2) {
  520. flex: 1;
  521. border-radius: 10rpx;
  522. overflow: hidden;
  523. input {
  524. background-color: #00000011;
  525. font-size: 28rpx;
  526. padding: 16rpx 8rpx 16rpx 15rpx;
  527. }
  528. }
  529. }
  530. }
  531. }
  532. // .input-color{
  533. // padding: 20rpx;
  534. // border-radius: 20rpx;
  535. // }
  536. }
  537. </style>