19 changed files with 1211 additions and 1257 deletions
Unified View
Diff Options
-
+5 -0api/api.js
-
+122 -126components/user/productList.vue
-
+1 -1locale/zh-Hans.json
-
+0 -3pages.json
-
+216 -163pages/index/center2.vue
-
+4 -1pages/index/tradingPlatform.vue
-
+2 -2pages_order/auth/loginAndRegisterAndForgetPassword.vue
-
+2 -2pages_order/auth/registerShop.vue
-
+4 -3pages_order/center/addressListManage.vue
-
+125 -124pages_order/components/order/myOrderList.vue
-
+9 -2pages_order/components/order/orderList.vue
-
+10 -6pages_order/mine/address.vue
-
+8 -10pages_order/order/myOrderDetail.vue
-
+169 -207pages_order/order/offerOrBillLading.vue
-
+435 -437pages_order/order/orderDetail2.vue
-
+38 -34pages_order/order/pendingOrder.vue
-
+2 -2pages_order/tradingPlatform/confirmOrder.vue
-
+58 -134pages_order/tradingPlatform/nowOrder.vue
-
+1 -0store/store.js
+ 5
- 0
api/api.js
View File
+ 122
- 126
components/user/productList.vue
View File
| @ -1,146 +1,142 @@ | |||||
| <template> | <template> | ||||
| <view class="list"> | |||||
| <view class="item" | |||||
| v-for="(item, index) in list" | |||||
| @click="immediatePurchase(item)" | |||||
| :key="index"> | |||||
| <image | |||||
| class="image" | |||||
| :src="item.pic" mode=""></image> | |||||
| <view class="info"> | |||||
| <view class="title"> | |||||
| {{ $t('other.aluminumProducts') }} | |||||
| </view> | |||||
| <view class="price"> | |||||
| <text>{{item.price}}</text> | |||||
| {{ $t('components.unitPrice2') }} | |||||
| </view> | |||||
| <view class="num"> | |||||
| 最多批发*快速下单 | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn"> | |||||
| <view class="change"> | |||||
| {{ $t('components.immediatePurchase') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="list"> | |||||
| <view class="item" v-for="(item, index) in list" @click="immediatePurchase(item)" :key="index"> | |||||
| <image class="image" :src="item.pic" mode="aspectFill"></image> | |||||
| <view class="info"> | |||||
| <view class="title"> | |||||
| {{ $t('other.aluminumProducts') }} | |||||
| </view> | |||||
| <view class="price"> | |||||
| <text>{{item.price}}</text> | |||||
| {{ $t('components.unitPrice2') }} | |||||
| </view> | |||||
| <view class="num"> | |||||
| <!-- 最多批发*快速下单 --> | |||||
| 库存数量：{{ item.num }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn"> | |||||
| <view class="change"> | |||||
| {{ $t('components.immediatePurchase') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| name: "productList", | |||||
| props: { | |||||
| list: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 立即购买 | |||||
| immediatePurchase(item) { | |||||
| console.log("====") | |||||
| // var itemStr = encodeURIComponent(JSON.stringify(item)); | |||||
| this.$store.state.productDetail = item | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/tradingPlatform/nowOrder`, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| export default { | |||||
| name: "productList", | |||||
| props: { | |||||
| list: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 立即购买 | |||||
| immediatePurchase(item) { | |||||
| console.log("====") | |||||
| // var itemStr = encodeURIComponent(JSON.stringify(item)); | |||||
| this.$store.state.productDetail = item | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/tradingPlatform/nowOrder`, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .list { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| flex-wrap: wrap; | |||||
| .list { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| flex-wrap: wrap; | |||||
| .item { | |||||
| position: relative; | |||||
| width: 300rpx; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| .item { | |||||
| position: relative; | |||||
| width: 300rpx; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| &:nth-child(odd) { | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| &:nth-child(odd) { | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .image { | |||||
| width: 300rpx; | |||||
| height: 250rpx; | |||||
| border-radius: 20rpx; | |||||
| } | |||||
| .image { | |||||
| width: 300rpx; | |||||
| height: 250rpx; | |||||
| border-radius: 20rpx; | |||||
| } | |||||
| .info { | |||||
| font-size: 26rpx; | |||||
| .info { | |||||
| font-size: 26rpx; | |||||
| .title { | |||||
| font-size: 30rpx; | |||||
| color: #000; | |||||
| } | |||||
| .title { | |||||
| font-size: 30rpx; | |||||
| color: #000; | |||||
| } | |||||
| .price { | |||||
| color: #D03F25; | |||||
| margin-top: 6rpx; | |||||
| .price { | |||||
| color: #D03F25; | |||||
| margin-top: 6rpx; | |||||
| text { | |||||
| font-size: 34rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| text { | |||||
| font-size: 34rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| .favorable { | |||||
| display: flex; | |||||
| background-image: url(/static/image/product/favorable.png); | |||||
| background-size: 100% 100%; | |||||
| width: fit-content; | |||||
| padding: 5rpx 10rpx; | |||||
| font-size: 18rpx; | |||||
| margin-top: 6rpx; | |||||
| .favorable { | |||||
| display: flex; | |||||
| background-image: url(/static/image/product/favorable.png); | |||||
| background-size: 100% 100%; | |||||
| width: fit-content; | |||||
| padding: 5rpx 10rpx; | |||||
| font-size: 18rpx; | |||||
| margin-top: 6rpx; | |||||
| .p { | |||||
| color: #fff; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .p { | |||||
| color: #fff; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .num { | |||||
| margin-top: 6rpx; | |||||
| font-size: 22rpx; | |||||
| color: #888; | |||||
| } | |||||
| } | |||||
| .num { | |||||
| margin-top: 6rpx; | |||||
| font-size: 22rpx; | |||||
| color: #888; | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| position: absolute; | |||||
| right: 0rpx; | |||||
| bottom: 0rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 50%; | |||||
| //background-color: $uni-color; | |||||
| .btn { | |||||
| position: absolute; | |||||
| right: 0rpx; | |||||
| bottom: 0rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 50%; | |||||
| //background-color: $uni-color; | |||||
| .change { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 22rpx; | |||||
| //margin: 20rpx 10rpx 0 0; | |||||
| padding: 10rpx 10rpx; | |||||
| background: #2b467a; | |||||
| border: 1px solid #757986; | |||||
| //margin-top: 20rpx; | |||||
| //border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .change { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 22rpx; | |||||
| //margin: 20rpx 10rpx 0 0; | |||||
| padding: 10rpx 10rpx; | |||||
| background: #2b467a; | |||||
| border: 1px solid #757986; | |||||
| //margin-top: 20rpx; | |||||
| //border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
+ 1
- 1
locale/zh-Hans.json
View File
+ 0
- 3
pages.json
View File
+ 216
- 163
pages/index/center2.vue
View File
| @ -1,180 +1,233 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.personalCenter')"/> | |||||
| <view class="frame"> | |||||
| <!-- 头部 --> | |||||
| <view class="head"> | |||||
| <view class="headImage"> | |||||
| <image src="1" mode=""></image> | |||||
| </view> | |||||
| <view class="info"> | |||||
| <view class="name"> | |||||
| {{userInfo.nickName}} | |||||
| </view> | |||||
| <view class="tips"> | |||||
| {{ $t('components.phoneNumber') }}： {{userInfo.phone}} | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="headBtn" @click="headBtn"> | |||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.personalCenter')" /> | |||||
| <view class="frame"> | |||||
| <!-- 头部 --> | |||||
| <view class="head"> | |||||
| <view class="headImage"> | |||||
| <image src="1" mode=""></image> | |||||
| </view> | |||||
| <view class="info"> | |||||
| <view class="name"> | |||||
| {{userInfo.nickName}} | |||||
| </view> | |||||
| <view class="tips"> | |||||
| {{ $t('components.phoneNumber') }}： {{userInfo.phone}} | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="headBtn" @click="headBtn"> | |||||
| {{ $t('components.roleSwitching') }} | {{ $t('components.roleSwitching') }} | ||||
| </view> --> | </view> --> | ||||
| <!-- <view class="setting"> | |||||
| <!-- <view class="setting"> | |||||
| <uv-icon name="setting" size="40rpx"></uv-icon> | <uv-icon name="setting" size="40rpx"></uv-icon> | ||||
| </view> --> | </view> --> | ||||
| </view> | |||||
| </view> | |||||
| <!-- 供应商 --> | |||||
| <view class="supplier" v-if="userShop"> | |||||
| <centerList :list="supplierList" | |||||
| @open="openCustomerServicePopup" | |||||
| @about="$refs.popup.open('gywm')"></centerList> | |||||
| </view> | |||||
| <!-- 供应商 --> | |||||
| <view class="supplier" v-if="userShop"> | |||||
| <centerList :list="supplierList" @open="openCustomerServicePopup" @about="$refs.popup.open('gywm')"> | |||||
| </centerList> | |||||
| </view> | |||||
| <!-- 采购商 --> | |||||
| <view class="purchaser" v-else> | |||||
| <centerList :list="purchaserList" @open="openCustomerServicePopup" | |||||
| @about="$refs.popup.open('gywm')"></centerList> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 采购商 --> | |||||
| <view class="purchaser" v-else> | |||||
| <centerList :list="purchaserList" @open="openCustomerServicePopup" @about="$refs.popup.open('gywm')"> | |||||
| </centerList> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 联系客服弹框 --> | |||||
| <customerServicePopup ref="customerServicePopup" /> | |||||
| <!-- 联系客服弹框 --> | |||||
| <customerServicePopup ref="customerServicePopup" /> | |||||
| <configPopup ref="popup"></configPopup> | |||||
| <tabber select="3"/> | |||||
| </view> | |||||
| <configPopup ref="popup"></configPopup> | |||||
| <tabber select="3" /> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import centerList from "@/components/base/centerList.vue"; | |||||
| import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||||
| import {mapGetters} from 'vuex' | |||||
| export default { | |||||
| name: "center2", | |||||
| components: {customerServicePopup, tabber, topbar,centerList}, | |||||
| computed: { | |||||
| ...mapGetters(['userShop',"userInfo"]), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // 供应商 | |||||
| supplierList: [ | |||||
| {text: `${this.$t('pageTitle.myOrders')}`,englishText:'myOrders', value: ">", imgUrl: '/static/image/center/14.svg', toPathUrl: '/pages_order/order/pendingOrder'}, | |||||
| {text: `${this.$t('components.contactCustomerService')}`, englishText:'contactCustomerService',value: ">", imgUrl: '/static/image/center/13.svg'}, | |||||
| {text: `${this.$t('components.systemSettings')}`,englishText:'systemSettings', value: ">", imgUrl: '/static/image/center/12.svg', toPathUrl: '/pages_order/center/systemSet'}, | |||||
| {text: `${this.$t('components.helpFeedback')}`,englishText:'systemSettings', value: ">", imgUrl: '/static/image/center/12.svg', toPathUrl: '/pages_order/center/helpFeedback'}, | |||||
| {text: `${this.$t('components.aboutUs')}`, englishText:'aboutUs',value: ">", imgUrl: '/static/image/center/13.svg'}, | |||||
| ], | |||||
| // 采购商 | |||||
| purchaserList: [ | |||||
| // this.$t('pages.index.index.companyProfile') | |||||
| { | |||||
| text: `${this.$t('other.Myorder')}`, | |||||
| englishText: 'Myorder', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/14.svg', | |||||
| toPathUrl: '/pages_order/order/myOrders' | |||||
| }, | |||||
| {text: `${this.$t('components.contactCustomerService')}`, englishText:'contactCustomerService',value: ">", imgUrl: '/static/image/center/13.svg'}, | |||||
| {text: `${this.$t('components.systemSettings')}`,englishText:'systemSettings', value: ">", imgUrl: '/static/image/center/12.svg', toPathUrl: '/pages_order/center/systemSet'}, | |||||
| {text: `${this.$t('components.helpFeedback')}`,englishText:'systemSettings', value: ">", imgUrl: '/static/image/center/12.svg', toPathUrl: '/pages_order/center/helpFeedback'}, | |||||
| {text: `${this.$t('components.aboutUs')}`, englishText:'aboutUs',value: ">", imgUrl: '/static/image/center/13.svg'}, | |||||
| ] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| openCustomerServicePopup() { | |||||
| console.log("打开客服弹框") | |||||
| this.$refs.customerServicePopup.open(); | |||||
| } | |||||
| }, | |||||
| } | |||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import centerList from "@/components/base/centerList.vue"; | |||||
| import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||||
| import { | |||||
| mapGetters | |||||
| } from 'vuex' | |||||
| export default { | |||||
| name: "center2", | |||||
| components: { | |||||
| customerServicePopup, | |||||
| tabber, | |||||
| topbar, | |||||
| centerList | |||||
| }, | |||||
| computed: { | |||||
| ...mapGetters(['userShop', "userInfo"]), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // 供应商 | |||||
| supplierList: [{ | |||||
| text: `${this.$t('pageTitle.myOrders')}`, | |||||
| englishText: 'myOrders', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/14.svg', | |||||
| toPathUrl: '/pages_order/order/pendingOrder' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.contactCustomerService')}`, | |||||
| englishText: 'contactCustomerService', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/13.svg' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.systemSettings')}`, | |||||
| englishText: 'systemSettings', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/12.svg', | |||||
| toPathUrl: '/pages_order/center/systemSet' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.helpFeedback')}`, | |||||
| englishText: 'systemSettings', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/12.svg', | |||||
| toPathUrl: '/pages_order/center/helpFeedback' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.aboutUs')}`, | |||||
| englishText: 'aboutUs', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/13.svg' | |||||
| }, | |||||
| ], | |||||
| // 采购商 | |||||
| purchaserList: [ | |||||
| // this.$t('pages.index.index.companyProfile') | |||||
| { | |||||
| text: `${this.$t('other.Myorder')}`, | |||||
| englishText: 'Myorder', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/14.svg', | |||||
| toPathUrl: '/pages_order/order/myOrders' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.contactCustomerService')}`, | |||||
| englishText: 'contactCustomerService', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/13.svg' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.systemSettings')}`, | |||||
| englishText: 'systemSettings', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/12.svg', | |||||
| toPathUrl: '/pages_order/center/systemSet' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.helpFeedback')}`, | |||||
| englishText: 'systemSettings', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/12.svg', | |||||
| toPathUrl: '/pages_order/center/helpFeedback' | |||||
| }, | |||||
| { | |||||
| text: `${this.$t('components.aboutUs')}`, | |||||
| englishText: 'aboutUs', | |||||
| value: ">", | |||||
| imgUrl: '/static/image/center/13.svg' | |||||
| }, | |||||
| ] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| openCustomerServicePopup() { | |||||
| console.log("打开客服弹框") | |||||
| this.$refs.customerServicePopup.open(); | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| background-color: #2e2e2e; | |||||
| height: calc(100vh - 120rpx); | |||||
| .frame { | |||||
| background-color: #2e2e2e; | |||||
| .head { | |||||
| display: flex; | |||||
| background-color: $uni-color; | |||||
| padding: 40rpx 20rpx; | |||||
| align-items: center; | |||||
| position: relative; | |||||
| color: #fff; | |||||
| box-shadow: 0 10rpx 20rpx rgba(89, 80, 80, 0.1); | |||||
| .headImage { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| background-image: url(/static/image/center/3.png); | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| border-radius: 50%; | |||||
| margin-right: 40rpx; | |||||
| } | |||||
| .info { | |||||
| font-size: 28rpx; | |||||
| .vip { | |||||
| background-color: #FCCC92; | |||||
| color: #FA6239; | |||||
| width: 100rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 40rpx; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| .name { | |||||
| font-size: 32rpx; | |||||
| } | |||||
| .tips { | |||||
| font-size: 26rpx; | |||||
| color: #ABABAB; | |||||
| } | |||||
| } | |||||
| .headBtn { | |||||
| margin-left: auto; | |||||
| padding: 15rpx 20rpx; | |||||
| background-color: $uni-color; | |||||
| color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 50rpx; | |||||
| } | |||||
| .setting { | |||||
| position: absolute; | |||||
| right: 50rpx; | |||||
| top: 50rpx; | |||||
| } | |||||
| } | |||||
| .supplier { | |||||
| } | |||||
| .purchaser { | |||||
| } | |||||
| } | |||||
| } | |||||
| .page { | |||||
| background-color: #2e2e2e; | |||||
| height: calc(100vh - 120rpx); | |||||
| .frame { | |||||
| background-color: #2e2e2e; | |||||
| .head { | |||||
| display: flex; | |||||
| background-color: $uni-color; | |||||
| padding: 40rpx 20rpx; | |||||
| align-items: center; | |||||
| position: relative; | |||||
| color: #fff; | |||||
| box-shadow: 0 10rpx 20rpx rgba(89, 80, 80, 0.1); | |||||
| .headImage { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| background-image: url(/static/image/center/3.png); | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| border-radius: 50%; | |||||
| margin-right: 40rpx; | |||||
| } | |||||
| .info { | |||||
| font-size: 28rpx; | |||||
| .vip { | |||||
| background-color: #FCCC92; | |||||
| color: #FA6239; | |||||
| width: 100rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 40rpx; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| .name { | |||||
| font-size: 32rpx; | |||||
| } | |||||
| .tips { | |||||
| font-size: 26rpx; | |||||
| color: #ABABAB; | |||||
| } | |||||
| } | |||||
| .headBtn { | |||||
| margin-left: auto; | |||||
| padding: 15rpx 20rpx; | |||||
| background-color: $uni-color; | |||||
| color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 50rpx; | |||||
| } | |||||
| .setting { | |||||
| position: absolute; | |||||
| right: 50rpx; | |||||
| top: 50rpx; | |||||
| } | |||||
| } | |||||
| .supplier {} | |||||
| .purchaser {} | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
+ 4
- 1
pages/index/tradingPlatform.vue
View File
+ 2
- 2
pages_order/auth/loginAndRegisterAndForgetPassword.vue
View File
+ 2
- 2
pages_order/auth/registerShop.vue
View File
+ 4
- 3
pages_order/center/addressListManage.vue
View File
+ 125
- 124
pages_order/components/order/myOrderList.vue
View File
| @ -1,133 +1,134 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <view v-for="(item, index) in list" v-if="list.length>0" :key="index" class="content" | |||||
| @click="lookDetail(item, index)"> | |||||
| <view class="left"> | |||||
| <image :src="item.pic" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="right"> | |||||
| <view class="text-hidden-1"> | |||||
| 订单状态：{{ orderStatusText(item.orderFlag) }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 公司名称：{{ item.companyName }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 单价：{{ item.price }} | |||||
| </view> | |||||
| <!--<view class="text-hidden-1">--> | |||||
| <!-- 数量：{{ item.num }}--> | |||||
| <!--</view>--> | |||||
| <view class="text-hidden-1"> | |||||
| 提货地址：{{ item.address }} | |||||
| </view> | |||||
| <!--<view class="text-hidden-1">--> | |||||
| <!-- 定金：{{ item.deposit }}--> | |||||
| <!--</view>--> | |||||
| <view class="text-hidden-1"> | |||||
| 提货时间：{{ item.takeTime }} | |||||
| </view> | |||||
| <!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||||
| <!--<view class="text-hidden-1">--> | |||||
| <!-- 审核状态：{{ item.auditStatus == 0? '审核中' : (item.auditStatus == 1? '审核通过' : '审核未通过') }}--> | |||||
| <!--</view>--> | |||||
| </view> | |||||
| </view> | |||||
| <!--无历史记录--> | |||||
| <view | |||||
| v-else | |||||
| style="padding: 100rpx 0;"> | |||||
| <uv-empty | |||||
| iconSize="100rpx" | |||||
| mode="history" | |||||
| textSize="28rpx"/> | |||||
| </view> | |||||
| </view> | |||||
| <view class="page"> | |||||
| <view v-for="(item, index) in list" v-if="list.length>0" :key="index" class="content" | |||||
| @click="lookDetail(item, index)"> | |||||
| <view class="left"> | |||||
| <image :src="item.pic" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="right"> | |||||
| <view class="text-hidden-1"> | |||||
| 订单状态：{{ orderStatusText(item.orderFlag) }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 公司名称：{{ item.companyName }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 单价：{{ item.price }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 购买数量：{{ item.num }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 规格：{{ item.specsName }} | |||||
| </view> | |||||
| <view class="text-hidden-1"> | |||||
| 提货地址：{{ item.address }} | |||||
| </view> | |||||
| <!--<view class="text-hidden-1">--> | |||||
| <!-- 定金：{{ item.deposit }}--> | |||||
| <!--</view>--> | |||||
| <view class="text-hidden-1"> | |||||
| 提货时间：{{ item.takeTime }} | |||||
| </view> | |||||
| <!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||||
| <!--<view class="text-hidden-1">--> | |||||
| <!-- 审核状态：{{ item.auditStatus == 0? '审核中' : (item.auditStatus == 1? '审核通过' : '审核未通过') }}--> | |||||
| <!--</view>--> | |||||
| </view> | |||||
| </view> | |||||
| <!--无历史记录--> | |||||
| <view v-else style="padding: 100rpx 0;"> | |||||
| <uv-empty iconSize="100rpx" mode="history" textSize="28rpx" /> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| name: "myOrderList", | |||||
| props: { | |||||
| list: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {} | |||||
| }, | |||||
| methods: { | |||||
| // 订单状态 0 未确认 1已确认 2已取消 3已付保证金 4 已退款 5已提货 | |||||
| orderStatusText(flag) { | |||||
| const statusMap = { | |||||
| 0: '未确认', | |||||
| 1: '已确认', | |||||
| 2: '已取消', | |||||
| 3: '已付保证金', | |||||
| 4: '已退款', | |||||
| 5: '已提货' | |||||
| }; | |||||
| return statusMap[flag] || '未知状态'; | |||||
| }, | |||||
| // 查看详情 | |||||
| lookDetail(item, index) { | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||||
| }); | |||||
| }, | |||||
| } | |||||
| } | |||||
| export default { | |||||
| name: "myOrderList", | |||||
| props: { | |||||
| list: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {} | |||||
| }, | |||||
| methods: { | |||||
| // 订单状态 0 未确认 1已确认 2已取消 3已付保证金 4 已退款 5已提货 | |||||
| orderStatusText(flag) { | |||||
| const statusMap = { | |||||
| 0: '未确认', | |||||
| 1: '已确认', | |||||
| 2: '已取消', | |||||
| 3: '已付保证金', | |||||
| 4: '已退款', | |||||
| 5: '已提货' | |||||
| }; | |||||
| return statusMap[flag] || '未知状态'; | |||||
| }, | |||||
| // 查看详情 | |||||
| lookDetail(item, index) { | |||||
| this.$store.state.orderDetail = item | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/order/myOrderDetail` | |||||
| }); | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 20rpx; | |||||
| height: calc(90vh - 180rpx); | |||||
| .content { | |||||
| display: flex; | |||||
| margin: 10rpx 0; | |||||
| .left { | |||||
| width: 200rpx; | |||||
| height: 100%; | |||||
| //height: 130rpx; | |||||
| border-radius: 10rpx; | |||||
| image { | |||||
| //width: 130rpx; | |||||
| //height: 130rpx; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border-radius: 10rpx; | |||||
| } | |||||
| } | |||||
| .right { | |||||
| width: calc(100% - 160rpx); | |||||
| color: #777; | |||||
| font-size: 24rpx; | |||||
| padding-left: 20rpx; | |||||
| line-height: 40rpx; | |||||
| background-color: #F8F8F8; | |||||
| } | |||||
| } | |||||
| } | |||||
| .page { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 20rpx; | |||||
| height: calc(90vh - 180rpx); | |||||
| .content { | |||||
| display: flex; | |||||
| margin: 10rpx 0; | |||||
| .left { | |||||
| width: 200rpx; | |||||
| height: 100%; | |||||
| //height: 130rpx; | |||||
| border-radius: 10rpx; | |||||
| image { | |||||
| //width: 130rpx; | |||||
| //height: 130rpx; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border-radius: 10rpx; | |||||
| } | |||||
| } | |||||
| .right { | |||||
| width: calc(100% - 160rpx); | |||||
| color: #777; | |||||
| font-size: 24rpx; | |||||
| padding-left: 20rpx; | |||||
| line-height: 40rpx; | |||||
| background-color: #F8F8F8; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
+ 9
- 2
pages_order/components/order/orderList.vue
View File
+ 10
- 6
pages_order/mine/address.vue
View File
+ 8
- 10
pages_order/order/myOrderDetail.vue
View File
+ 169
- 207
pages_order/order/offerOrBillLading.vue
View File
+ 435
- 437
pages_order/order/orderDetail2.vue
View File
| @ -1,445 +1,443 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.orderDetails')" leftClick @leftClick="$utils.navigateBack"/> | |||||
| <view class="info"> | |||||
| <view class="flex"> | |||||
| <!--订单基本信息--> | |||||
| <view class="server-item"> | |||||
| <view class="img-box"> | |||||
| <img :src="orderInfo.pic" style="width: 100%;height: 100%;"/> | |||||
| </view> | |||||
| <view class="server-info"> | |||||
| <view class="server-title"> | |||||
| {{ $t('other.aluminumProducts') }} | |||||
| </view> | |||||
| <view class="current-price"> | |||||
| <text class="unit">{{ $t('components.productSpecification') }}：</text> | |||||
| <text class="text"> {{ $t('other.specification') }}</text> | |||||
| </view> | |||||
| <view class="sales-volume" style="margin-top: 5px;"> | |||||
| <view class="desc"> {{ $t('other.pickupDate') }}：{{ orderInfo.takeTime }}</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--收货地址--> | |||||
| <view class="line address"> | |||||
| <view class="address-top"> | |||||
| <view class=""> | |||||
| {{ $t('components.shippingAddress') }} | |||||
| </view> | |||||
| <view class="copy"> | |||||
| <img style="width:40rpx;height:40rpx;" | |||||
| @click="$utils.copyText('1')" | |||||
| src="../static/order/copy.png"> | |||||
| </view> | |||||
| </view> | |||||
| <view class="addressDetail"> | |||||
| <view class="">{{ orderInfo.userName }} {{ orderInfo.phone }}</view> | |||||
| <view class=""> | |||||
| {{ orderInfo.address }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 订单信息 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderInfo') }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderNumber') }} | |||||
| </view> | |||||
| <view class=""> | |||||
| {{ orderInfo.id }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderTime') }} | |||||
| </view> | |||||
| <view class=""> | |||||
| {{ orderInfo.createTime }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 下单须知 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderNotice') }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="xdxz" style="line-height: 40rpx;"> | |||||
| <!--<uv-parse :content="content"></uv-parse>--> | |||||
| <view>1. 请您在收货时间前15分钟内到货，否则将视为放弃挂单。</view> | |||||
| <view>2. 请您在收货地址提供的手机号码收到货物</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--我要撤单和联系客服--> | |||||
| <view class="btns"> | |||||
| <view @click="backOrder" class="oneBtn"> | |||||
| {{ $t('other.withdrawOrder') }} | |||||
| </view> | |||||
| <view @click="$refs.customerServicePopup.open()" class="twoBtn"> | |||||
| {{ $t('components.contactCustomerService') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 联系客服弹框 --> | |||||
| <customerServicePopup ref="customerServicePopup"/> | |||||
| </view> | |||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.orderDetails')" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="info"> | |||||
| <view class="flex"> | |||||
| <!--订单基本信息--> | |||||
| <view class="server-item"> | |||||
| <view class="img-box"> | |||||
| <img :src="orderInfo.pic" style="width: 100%;height: 100%;" /> | |||||
| </view> | |||||
| <view class="server-info"> | |||||
| <view class="server-title"> | |||||
| {{ $t('other.aluminumProducts') }} | |||||
| </view> | |||||
| <view class="current-price"> | |||||
| <text class="unit">{{ $t('components.productSpecification') }}：</text> | |||||
| <text class="text"> {{ $t('other.specification') }}</text> | |||||
| </view> | |||||
| <view class="sales-volume" style="margin-top: 5px;"> | |||||
| <view class="desc"> {{ $t('other.pickupDate') }}：{{ orderInfo.takeTime }}</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--收货地址--> | |||||
| <view class="line address"> | |||||
| <view class="address-top"> | |||||
| <view class=""> | |||||
| {{ $t('components.shippingAddress') }} | |||||
| </view> | |||||
| <view class="copy"> | |||||
| <img style="width:40rpx;height:40rpx;" @click="$utils.copyText('1')" | |||||
| src="../static/order/copy.png"> | |||||
| </view> | |||||
| </view> | |||||
| <view class="addressDetail"> | |||||
| <view class="">{{ orderInfo.userName }} {{ orderInfo.phone }}</view> | |||||
| <view class=""> | |||||
| {{ orderInfo.address }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 订单信息 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderInfo') }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderNumber') }} | |||||
| </view> | |||||
| <view class=""> | |||||
| {{ orderInfo.id }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderTime') }} | |||||
| </view> | |||||
| <view class=""> | |||||
| {{ orderInfo.createTime }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 下单须知 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| {{ $t('components.orderNotice') }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="xdxz" style="line-height: 40rpx;"> | |||||
| <!--<uv-parse :content="content"></uv-parse>--> | |||||
| <view>1. 请您在收货时间前15分钟内到货，否则将视为放弃挂单。</view> | |||||
| <view>2. 请您在收货地址提供的手机号码收到货物</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--我要撤单和联系客服--> | |||||
| <view class="btns"> | |||||
| <view @click="backOrder" class="oneBtn"> | |||||
| {{ $t('other.withdrawOrder') }} | |||||
| </view> | |||||
| <view @click="$refs.customerServicePopup.open()" class="twoBtn"> | |||||
| {{ $t('components.contactCustomerService') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 联系客服弹框 --> | |||||
| <customerServicePopup ref="customerServicePopup" /> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||||
| export default { | |||||
| name: "orderDetail2", | |||||
| components: {customerServicePopup}, | |||||
| onLoad(options) { | |||||
| if (options.orderInfo) { | |||||
| this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo)); | |||||
| console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据 | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| orderInfo: {} | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 供应商根据挂单id查询挂单详情的接口 | |||||
| queryOrderInfo() { | |||||
| this.$api('getProductInfo', this.orderId, res => { | |||||
| console.log(res, "挂单详情信息") | |||||
| this.orderInfo = res.result | |||||
| }) | |||||
| }, | |||||
| // 撤单 | |||||
| backOrder() { | |||||
| let self = this | |||||
| uni.showModal({ | |||||
| title: self.$t('other.backOrderTitle'), | |||||
| content: self.$t('other.backOrderTitleConfirm'), | |||||
| success(e) { | |||||
| if (e.confirm) { | |||||
| self.$api('noShow', {id}, res => { | |||||
| if (res.code == 200) { | |||||
| uni.showToast({ | |||||
| title: self.$t('other.backOrderSuccess'), | |||||
| icon: 'none' | |||||
| }) | |||||
| uni.navigateBack(); | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| } | |||||
| import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||||
| export default { | |||||
| name: "orderDetail2", | |||||
| components: { | |||||
| customerServicePopup | |||||
| }, | |||||
| onLoad(options) { | |||||
| if (options.orderInfo) { | |||||
| this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo)); | |||||
| console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据 | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| orderInfo: {} | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 供应商根据挂单id查询挂单详情的接口 | |||||
| queryOrderInfo() { | |||||
| this.$api('getProductInfo', this.orderId, res => { | |||||
| console.log(res, "挂单详情信息") | |||||
| this.orderInfo = res.result | |||||
| }) | |||||
| }, | |||||
| // 撤单 | |||||
| backOrder() { | |||||
| let self = this | |||||
| uni.showModal({ | |||||
| title: self.$t('other.backOrderTitle'), | |||||
| content: self.$t('other.backOrderTitleConfirm'), | |||||
| success(e) { | |||||
| if (e.confirm) { | |||||
| self.$api('noShow', { | |||||
| id | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| uni.showToast({ | |||||
| title: self.$t('other.backOrderSuccess'), | |||||
| icon: 'none' | |||||
| }) | |||||
| uni.navigateBack(); | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| .info { | |||||
| margin: 10px; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| width: calc(100% - 40px); | |||||
| border-radius: 10px; | |||||
| .head-title { | |||||
| font-family: PingFang SC, PingFang SC-Bold; | |||||
| color: #2f2e2e; | |||||
| line-height: 30rpx; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .server-item { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| background: white; | |||||
| border-radius: 15rpx; | |||||
| box-sizing: border-box; | |||||
| margin: 20rpx 0rpx; | |||||
| width: 100%; | |||||
| .img-box { | |||||
| width: 150rpx; | |||||
| height: 150rpx; | |||||
| border-radius: 10rpx; | |||||
| overflow: hidden; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .server-info { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-around; | |||||
| width: calc(100% - 180rpx); | |||||
| box-sizing: border-box; | |||||
| padding: 10rpx 15rpx; | |||||
| .server-title { | |||||
| display: flex; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .coupon { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| background: #F29E45; | |||||
| color: white; | |||||
| width: 120rpx; | |||||
| height: 40rpx; | |||||
| border-radius: 10rpx; | |||||
| margin-left: 10rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| .time-coupon, | |||||
| .price { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| } | |||||
| .time-coupon { | |||||
| margin: 10rpx 0rpx; | |||||
| font-size: 26rpx; | |||||
| justify-content: space-between; | |||||
| width: 100%; | |||||
| .flex { | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| .time { | |||||
| color: #B8B8B8; | |||||
| margin-left: 6rpx; | |||||
| } | |||||
| } | |||||
| .sales-volume { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| color: #B8B8B8; | |||||
| font-size: 24rpx; | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .address { | |||||
| .address-top { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| image { | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| } | |||||
| } | |||||
| .addressDetail { | |||||
| color: #777; | |||||
| font-size: 26rpx; | |||||
| padding: 5px 0; | |||||
| } | |||||
| text { | |||||
| background-color: #F29E45; | |||||
| padding: 8rpx 10rpx; | |||||
| color: #fff; | |||||
| font-size: 20rpx; | |||||
| margin-left: 10px; | |||||
| border-radius: 5px; | |||||
| } | |||||
| } | |||||
| .min_tips { | |||||
| font-size: 22rpx; | |||||
| color: #777; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 5px 0; | |||||
| align-items: center; | |||||
| } | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 40rpx; | |||||
| .oneBtn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #293143; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| .twoBtn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 40rpx; | |||||
| color: #000000; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #f2f2f2; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| .xdxz { | |||||
| font-size: 24rpx; | |||||
| color: #777; | |||||
| line-height: 30rpx; | |||||
| } | |||||
| .current-price { | |||||
| font-size: 24rpx; | |||||
| color: #8c8888; | |||||
| .unit { | |||||
| } | |||||
| .text { | |||||
| } | |||||
| } | |||||
| .line { | |||||
| border-top: 2px dotted #00000011; | |||||
| padding: 20rpx 0; | |||||
| .t { | |||||
| padding: 5px 0; | |||||
| color: #000; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| } | |||||
| .head-div { | |||||
| .nickname { | |||||
| font-size: 30rpx; | |||||
| font-weight: 600; | |||||
| text-align: left; | |||||
| line-height: 42rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .tag { | |||||
| position: relative; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| image { | |||||
| height: 45rpx; | |||||
| width: 90rpx; | |||||
| vertical-align: middle; | |||||
| } | |||||
| .auth { | |||||
| position: absolute; | |||||
| white-space: nowrap; | |||||
| color: $uni-color; | |||||
| left: 23rpx; | |||||
| font-size: 17rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .days { | |||||
| font-size: 20rpx; | |||||
| font-weight: 400; | |||||
| text-align: left; | |||||
| line-height: 56rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| view { | |||||
| padding-left: 5px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn-x { | |||||
| color: $uni-color; | |||||
| border: 1px solid $uni-color; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| .btn { | |||||
| color: $uni-color; | |||||
| border: 1px solid $uni-color; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .page { | |||||
| .info { | |||||
| margin: 10px; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| width: calc(100% - 40px); | |||||
| border-radius: 10px; | |||||
| .head-title { | |||||
| font-family: PingFang SC, PingFang SC-Bold; | |||||
| color: #2f2e2e; | |||||
| line-height: 30rpx; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .server-item { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| background: white; | |||||
| border-radius: 15rpx; | |||||
| box-sizing: border-box; | |||||
| margin: 20rpx 0rpx; | |||||
| width: 100%; | |||||
| .img-box { | |||||
| width: 150rpx; | |||||
| height: 150rpx; | |||||
| border-radius: 10rpx; | |||||
| overflow: hidden; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .server-info { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-around; | |||||
| width: calc(100% - 180rpx); | |||||
| box-sizing: border-box; | |||||
| padding: 10rpx 15rpx; | |||||
| .server-title { | |||||
| display: flex; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .coupon { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| background: #F29E45; | |||||
| color: white; | |||||
| width: 120rpx; | |||||
| height: 40rpx; | |||||
| border-radius: 10rpx; | |||||
| margin-left: 10rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| .time-coupon, | |||||
| .price { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| } | |||||
| .time-coupon { | |||||
| margin: 10rpx 0rpx; | |||||
| font-size: 26rpx; | |||||
| justify-content: space-between; | |||||
| width: 100%; | |||||
| .flex { | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| .time { | |||||
| color: #B8B8B8; | |||||
| margin-left: 6rpx; | |||||
| } | |||||
| } | |||||
| .sales-volume { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| color: #B8B8B8; | |||||
| font-size: 24rpx; | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .address { | |||||
| .address-top { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| image { | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| } | |||||
| } | |||||
| .addressDetail { | |||||
| color: #777; | |||||
| font-size: 26rpx; | |||||
| padding: 5px 0; | |||||
| } | |||||
| text { | |||||
| background-color: #F29E45; | |||||
| padding: 8rpx 10rpx; | |||||
| color: #fff; | |||||
| font-size: 20rpx; | |||||
| margin-left: 10px; | |||||
| border-radius: 5px; | |||||
| } | |||||
| } | |||||
| .min_tips { | |||||
| font-size: 22rpx; | |||||
| color: #777; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 5px 0; | |||||
| align-items: center; | |||||
| } | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 40rpx; | |||||
| .oneBtn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #293143; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| .twoBtn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 40rpx; | |||||
| color: #000000; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #f2f2f2; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| .xdxz { | |||||
| font-size: 24rpx; | |||||
| color: #777; | |||||
| line-height: 30rpx; | |||||
| } | |||||
| .current-price { | |||||
| font-size: 24rpx; | |||||
| color: #8c8888; | |||||
| .unit {} | |||||
| .text {} | |||||
| } | |||||
| .line { | |||||
| border-top: 2px dotted #00000011; | |||||
| padding: 20rpx 0; | |||||
| .t { | |||||
| padding: 5px 0; | |||||
| color: #000; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| } | |||||
| .head-div { | |||||
| .nickname { | |||||
| font-size: 30rpx; | |||||
| font-weight: 600; | |||||
| text-align: left; | |||||
| line-height: 42rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .tag { | |||||
| position: relative; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| image { | |||||
| height: 45rpx; | |||||
| width: 90rpx; | |||||
| vertical-align: middle; | |||||
| } | |||||
| .auth { | |||||
| position: absolute; | |||||
| white-space: nowrap; | |||||
| color: $uni-color; | |||||
| left: 23rpx; | |||||
| font-size: 17rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .days { | |||||
| font-size: 20rpx; | |||||
| font-weight: 400; | |||||
| text-align: left; | |||||
| line-height: 56rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| view { | |||||
| padding-left: 5px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn-x { | |||||
| color: $uni-color; | |||||
| border: 1px solid $uni-color; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| .btn { | |||||
| color: $uni-color; | |||||
| border: 1px solid $uni-color; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
+ 38
- 34
pages_order/order/pendingOrder.vue
View File
| @ -1,49 +1,53 @@ | |||||
| <template> | <template> | ||||
| <!--我的挂单--> | |||||
| <view class="page"> | |||||
| <!--我的挂单--> | |||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.myOrders')" leftClick @leftClick="$utils.navigateBack"/> | |||||
| <navbar :title="$t('pageTitle.myOrders')" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="frame"> | |||||
| <view class="content"> | |||||
| <orderList :list="list" :show-back-order="true" @getList="getData"></orderList> | |||||
| </view> | |||||
| </view> | |||||
| <view class="frame"> | |||||
| <view class="content"> | |||||
| <orderList :list="list" :show-back-order="true" @getList="getData"></orderList> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import orderList from "../components/order/orderList.vue"; | |||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| export default { | |||||
| name: "pendingOrder", | |||||
| components: {tabber, topbar, orderList}, | |||||
| mixins: [mixinsList], | |||||
| data() { | |||||
| return { | |||||
| mixinsListApi: 'getMyProductlist', | |||||
| } | |||||
| }, | |||||
| methods: {}, | |||||
| } | |||||
| import orderList from "../components/order/orderList.vue"; | |||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| export default { | |||||
| name: "pendingOrder", | |||||
| components: { | |||||
| tabber, | |||||
| topbar, | |||||
| orderList | |||||
| }, | |||||
| mixins: [mixinsList], | |||||
| data() { | |||||
| return { | |||||
| mixinsListApi: 'getMyProductlist', | |||||
| } | |||||
| }, | |||||
| methods: {}, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| .page { | |||||
| .frame { | |||||
| padding: 30rpx; | |||||
| background-color: #f5f5f5; | |||||
| .frame { | |||||
| padding: 30rpx; | |||||
| background-color: #f5f5f5; | |||||
| .content { | |||||
| //height: calc(100vh - 120rpx); | |||||
| .content { | |||||
| //height: calc(100vh - 120rpx); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||