21 changed files with 1410 additions and 778 deletions
Unified View
Diff Options
-
+2 -2api/api.js
-
+3 -1components/base/tabbar.vue
-
+125 -123components/user/productList.vue
-
+2 -1locale/en.json
-
+2 -1locale/zh-Hans.json
-
+6 -0pages.json
-
+0 -1pages/index/center2.vue
-
+1 -2pages/index/clearanceService.vue
-
+0 -6pages/index/index.vue
-
+388 -0pages_order/auth/customsClearApply.vue
-
+34 -14pages_order/auth/registerShop.vue
-
+213 -0pages_order/center/addressListManage.vue
-
+21 -3pages_order/center/helpFeedback.vue
-
+130 -159pages_order/center/systemSet.vue
-
+234 -235pages_order/components/address/addressList.vue
-
+215 -212pages_order/components/address/redactAddress.vue
-
+21 -12pages_order/components/order/orderList.vue
-
+4 -2pages_order/order/pendingOrder.vue
-
+1 -0pages_order/static/order/3.svg
-
+7 -3pages_order/tradingPlatform/confirmOrder.vue
-
+1 -1store/store.js
+ 2
- 2
api/api.js
View File
+ 3
- 1
components/base/tabbar.vue
View File
+ 125
- 123
components/user/productList.vue
View File
| @ -1,143 +1,145 @@ | |||||
| <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 || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" 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="favorable">--> | |||||
| <!-- <view class="t">--> | |||||
| <!-- 限时优惠--> | |||||
| <!-- </view>--> | |||||
| <!-- <view class="p">--> | |||||
| <!-- ￥48--> | |||||
| <!-- </view>--> | |||||
| <!--</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 productList" | |||||
| @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> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| name: "productList", | |||||
| props : ['list'], | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 立即购买 | |||||
| immediatePurchase(item) { | |||||
| console.log("====") | |||||
| var itemStr = encodeURIComponent(JSON.stringify(item)); | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| export default { | |||||
| name: "productList", | |||||
| props: { | |||||
| productList: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 立即购买 | |||||
| immediatePurchase(item) { | |||||
| console.log("====") | |||||
| var itemStr = encodeURIComponent(JSON.stringify(item)); | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| </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> | ||||
+ 2
- 1
locale/en.json
View File
+ 2
- 1
locale/zh-Hans.json
View File
+ 6
- 0
pages.json
View File
+ 0
- 1
pages/index/center2.vue
View File
+ 1
- 2
pages/index/clearanceService.vue
View File
+ 0
- 6
pages/index/index.vue
View File
+ 388
- 0
pages_order/auth/customsClearApply.vue
View File
| @ -0,0 +1,388 @@ | |||||
| <template> | |||||
| <view class="registerShop"> | |||||
| <navbar :title="$t('other.domesticCustomsClearanceApplication')" leftClick @leftClick="$utils.navigateBack"/> | |||||
| <view class="frame"> | |||||
| <!--基本信息--> | |||||
| <view class="basicInfo"> | |||||
| <!--用户名--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('components.username') }}</view> | |||||
| <view> | |||||
| <input v-model="form.userName" :placeholder="$t('components.enterUserName')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <!--密码--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('components.password') }}</view> | |||||
| <view> | |||||
| <input v-model="form.password" password clearable :placeholder="$t('components.enterYourPassword')" | |||||
| clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <!--公司名称--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('other.companyName') }}</view> | |||||
| <view> | |||||
| <input v-model="form.companyName" type="number" :placeholder="$t('other.enterCompanyName')" | |||||
| clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <!--税收编码--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('other.taxCode') }}</view> | |||||
| <view> | |||||
| <input v-model="form.taxCode" :placeholder="$t('other.enterTaxCode')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <!--公司地址--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('other.companyAddress') }}</view> | |||||
| <view> | |||||
| <input v-model="form.address" :placeholder="$t('other.enterCompanyAddress')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <!--dian--> | |||||
| <view class="item"> | |||||
| <view>{{ $t('components.lxPhone') }}</view> | |||||
| <view> | |||||
| <input v-model="form.phone" :placeholder="$t('components.plePhoneNumber')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <view class="item"> | |||||
| <view>{{ $t('other.companyAccount') }}</view> | |||||
| <view> | |||||
| <input v-model="form.bankAccount" :placeholder="$t('other.enterCompanyAccount')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| <view class="item"> | |||||
| <view>{{ $t('components.bankName') }}</view> | |||||
| <view> | |||||
| <input v-model="form.bankNama" :placeholder="$t('components.enterBankName')" clearable></input> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--证件信息--> | |||||
| <view class="certificateInfo"> | |||||
| <!--营业执照--> | |||||
| <view class="certificateInfoItem"> | |||||
| <view class="title"> | |||||
| <span | |||||
| style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> | |||||
| <span>{{ $t('components.businessLicense') }}</span> | |||||
| </view> | |||||
| <view class="upload"> | |||||
| <uv-upload | |||||
| :fileList="yyzzfileList" | |||||
| :maxCount="4" | |||||
| multiple | |||||
| width="150rpx" | |||||
| height="150rpx" | |||||
| @delete="(file) => deleteImage(0, file)" | |||||
| @afterRead="(file) => afterRead(0, file)" | |||||
| :previewFullImage="true"></uv-upload> | |||||
| </view> | |||||
| </view> | |||||
| <!--基本户信息--> | |||||
| <view class="certificateInfoItem"> | |||||
| <view class="title"> | |||||
| <span | |||||
| style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> | |||||
| <span>{{ $t('components.basicAccountInfo') }}</span> | |||||
| </view> | |||||
| <view class="upload"> | |||||
| <uv-upload | |||||
| :fileList="jbhxxfileList" | |||||
| :maxCount="4" | |||||
| multiple | |||||
| width="150rpx" | |||||
| height="150rpx" | |||||
| @delete="(file) => deleteImage(1, file)" | |||||
| @afterRead="(file) => afterRead(1, file)" | |||||
| :previewFullImage="true"></uv-upload> | |||||
| </view> | |||||
| </view> | |||||
| <!--收款银行--> | |||||
| <view class="certificateInfoItem"> | |||||
| <view class="title"> | |||||
| <span | |||||
| style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> | |||||
| <span>{{ $t('components.receivingBank') }}</span> | |||||
| </view> | |||||
| <view class="upload"> | |||||
| <uv-upload | |||||
| :fileList="skyhfileList" | |||||
| :maxCount="4" | |||||
| multiple | |||||
| width="150rpx" | |||||
| height="150rpx" | |||||
| @delete="(file) => deleteImage(2, file)" | |||||
| @afterRead="(file) => afterRead(2, file)" | |||||
| :previewFullImage="true"></uv-upload> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="bottom"> | |||||
| <view class="btns"> | |||||
| <span @click="applyReview" class="sqsh"> | |||||
| {{ $t('components.submitReview') }} | |||||
| </span> | |||||
| <span @click="contactUs" class="lxwm"> | |||||
| {{ $t('components.contactUs') }} | |||||
| </span> | |||||
| </view> | |||||
| <view class="others"> | |||||
| <span @click="applyReview" class="zcxz"> | |||||
| {{ $t('components.registrationNotice') }} | |||||
| </span> | |||||
| <span @click="contactUs" class="kjhtyl"> | |||||
| {{ $t('other.frameworkContractPreview') }} | |||||
| </span> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| // onLoad(option) { | |||||
| // this.titleIndex = option.identity | |||||
| // }, | |||||
| data() { | |||||
| return { | |||||
| // titleIndex: 0, | |||||
| // titleList: [ | |||||
| // // 采购商注册 供应商注册 国内清关申请 | |||||
| // this.$t('other.buyerRegistration'), | |||||
| // this.$t('other.supplierRegistration'), | |||||
| // this.$t('other.domesticCustomsClearanceApplication') | |||||
| // ], | |||||
| form: { | |||||
| "address": "", | |||||
| "bankAccount": "", | |||||
| "bankInfo": "", | |||||
| "bankNama": "", | |||||
| "basicAccount": "", | |||||
| "businessLicense": "", | |||||
| "companyName": "", | |||||
| "id": "", | |||||
| "password": "", | |||||
| "phone": "", | |||||
| "role": 0, | |||||
| "taxCode": "", | |||||
| "userName": "" | |||||
| }, | |||||
| yyzzfileList: [], | |||||
| jbhxxfileList: [], | |||||
| skyhfileList: [], | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 申请审核 | |||||
| applyReview() { | |||||
| this.form.basicAccount = this.jbhxxfileList.join(",") //基本户信息照片上传 | |||||
| this.form.bankInfo = this.skyhfileList.join(",") //收款银行照片上传 | |||||
| this.form.businessLicense =this.yyzzfileList.join(",") //营业执照上传 | |||||
| this.$api('addCustoms',this.form, res => { | |||||
| if (res.code == 200) { | |||||
| uni.redirectTo({ | |||||
| url: '/pages/index/clearanceService' | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 联系我们 | |||||
| contactUs() { | |||||
| }, | |||||
| // 上传图片 | |||||
| afterRead(type, e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| if (type == 0) { | |||||
| self.yyzzfileList.push({url}) | |||||
| } else if (type == 1) { | |||||
| self.jbhxxfileList.push({url}) | |||||
| } else if (type == 2) { | |||||
| self.skyhfileList.push({url}) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 删除图片 | |||||
| deleteImage(type, e) { | |||||
| console.log(e, type, "===========") | |||||
| if (type == 0) { | |||||
| this.yyzzfileList.splice(e.index, 1) | |||||
| } else if (type == 1) { | |||||
| this.jbhxxfileList.splice(e.index, 1) | |||||
| } else if (type == 2) { | |||||
| this.skyhfileList.splice(e.index, 1) | |||||
| } | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .registerShop { | |||||
| .frame { | |||||
| height: 79vh; | |||||
| overflow: auto; | |||||
| .basicInfo { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 5rpx; | |||||
| background-color: #FFF; | |||||
| margin-top: 20rpx; | |||||
| padding: 20rpx; | |||||
| .item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| background-color: #FFF; | |||||
| height: 80rpx; | |||||
| // margin: 10rpx 0 0 0; | |||||
| padding: 10rpx 0 0 20rpx; | |||||
| > view:nth-of-type(1) { | |||||
| width: 30%; | |||||
| // font-weight: 700; | |||||
| } | |||||
| > view:nth-of-type(2) { | |||||
| width: 70%; | |||||
| border-radius: 10rpx; | |||||
| overflow: hidden; | |||||
| input { | |||||
| background-color: #f5f5f5; | |||||
| font-size: 28rpx; | |||||
| padding: 16rpx 8rpx 16rpx 15rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .certificateInfo { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 20rpx; | |||||
| background-color: #FFF; | |||||
| margin-top: 20rpx; | |||||
| padding: 20rpx; | |||||
| .certificateInfoItem { | |||||
| .title { | |||||
| display: flex; | |||||
| // padding-top: 40rpx; | |||||
| font-size: 30rpx; | |||||
| font-weight: 700; | |||||
| padding: 0 0 0 20rpx; | |||||
| > span:nth-of-type(1) { | |||||
| margin: 4rpx 0 0 8rpx; | |||||
| background-color: #FFF; | |||||
| } | |||||
| > span:nth-of-type(2) { | |||||
| margin: 0 0 0 8rpx; | |||||
| background-color: #FFF; | |||||
| } | |||||
| } | |||||
| .upload { | |||||
| margin: 5rpx 0 0 40rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .bottom { | |||||
| position: fixed; | |||||
| bottom: 10rpx; | |||||
| left: 0; | |||||
| right: 0; | |||||
| background-color: #FFF; | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 40rpx; | |||||
| .sqsh { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #293143; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| .lxwm { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 40%; | |||||
| height: 70rpx; | |||||
| border-radius: 40rpx; | |||||
| color: #000000; | |||||
| font-size: 28rpx; | |||||
| margin: 20rpx 10rpx 0 0; | |||||
| background: #f2f2f2; | |||||
| //margin-top: 20rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| .others { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 200rpx; | |||||
| color: #707070; | |||||
| font-size: 24rpx; | |||||
| .zcxz { | |||||
| text-decoration: underline; | |||||
| } | |||||
| .kjhtyl { | |||||
| text-decoration: underline; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 34
- 14
pages_order/auth/registerShop.vue
View File
+ 213
- 0
pages_order/center/addressListManage.vue
View File
| @ -0,0 +1,213 @@ | |||||
| <template> | |||||
| <view class="address"> | |||||
| <navbar title="地址管理" leftClick @leftClick="leftClick" /> | |||||
| <view class="address-list"> | |||||
| <addressList | |||||
| controls | |||||
| ref="addressList" | |||||
| @deleteAddress="deleteAddress" | |||||
| @editAddress="editAddress" | |||||
| @editDefault="editDefault"/> | |||||
| </view> | |||||
| <redactAddress | |||||
| ref="addressPopup" | |||||
| :addressDetail="addressDetail" | |||||
| @saveOrUpdate="saveOrUpdate" | |||||
| :title="title"></redactAddress> | |||||
| <view class="add-btn"> | |||||
| <view @click="addBtn" class="btn"> | |||||
| 新增地址 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import redactAddress from '../components/address/redactAddress.vue' | |||||
| import addressList from '../components/address/addressList.vue' | |||||
| export default { | |||||
| components: { | |||||
| redactAddress, | |||||
| addressList | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| title: '新增地址', | |||||
| type : '', | |||||
| } | |||||
| }, | |||||
| onLoad(args) { | |||||
| this.type = args.type | |||||
| if(this.type == 'back'){ | |||||
| this.addBtn() | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.getAddressList() | |||||
| }, | |||||
| methods: { | |||||
| //获取地址列表 | |||||
| getAddressList() { | |||||
| this.$refs.addressList.getAddressList() | |||||
| }, | |||||
| //获取地址详情 | |||||
| editAddress(address) { | |||||
| this.$refs.addressPopup.open({...address}) | |||||
| }, | |||||
| //返回个人中心 | |||||
| leftClick() { | |||||
| uni.navigateBack(-1) | |||||
| }, | |||||
| //添加和修改地址 | |||||
| saveOrUpdate(addressDetail) { | |||||
| let data = { | |||||
| name: addressDetail.name, | |||||
| phone: addressDetail.phone, | |||||
| // address: addressDetail.address, | |||||
| addressDetail: addressDetail.addressDetail, | |||||
| // defaultId: addressDetail.defaultId || '0', | |||||
| latitude: addressDetail.latitude, | |||||
| longitude: addressDetail.longitude | |||||
| } | |||||
| if (addressDetail.id) { | |||||
| data.id = addressDetail.id | |||||
| } | |||||
| this.$api(data.id ? 'editAddress' : 'addAddress', data, res => { | |||||
| if (res.code == 200) { | |||||
| this.$refs.addressPopup.close() | |||||
| this.getAddressList() | |||||
| if(this.type == 'back'){ | |||||
| uni.navigateBack(-1) | |||||
| } | |||||
| uni.showToast({ | |||||
| title: '操作成功', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| //修改默认地址 | |||||
| editDefault(id) { | |||||
| this.$api('addressDefault', { | |||||
| id: id, | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| this.$refs.addressPopup.close() | |||||
| uni.showToast({ | |||||
| title: '操作成功', | |||||
| icon: 'none' | |||||
| }) | |||||
| this.getAddressList() | |||||
| } | |||||
| }) | |||||
| }, | |||||
| //删除地址 | |||||
| deleteAddress(id) { | |||||
| let self = this | |||||
| uni.showModal({ | |||||
| title: '删除地址', | |||||
| content: '确认删除此地址?删除后数据不可恢复', | |||||
| success(e) { | |||||
| if(e.confirm){ | |||||
| self.$api('addressDelete', { | |||||
| id | |||||
| }, res => { | |||||
| if (res.code == 200) { | |||||
| uni.showToast({ | |||||
| title: '删除成功', | |||||
| icon: 'none' | |||||
| }) | |||||
| self.getAddressList() | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| //点击新增按钮 | |||||
| addBtn() { | |||||
| this.title = '新增地址' | |||||
| this.$refs.addressPopup.open({ //初始化数据 | |||||
| name: '', | |||||
| phone: '', | |||||
| address: '', | |||||
| addressDetail: '', | |||||
| defaultId: '', | |||||
| latitude: '', | |||||
| longitude: '' | |||||
| }) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .address { | |||||
| width: 750rpx; | |||||
| margin: 0rpx auto; | |||||
| background: #F5F5F5; | |||||
| box-sizing: border-box; | |||||
| min-height: 100vh; | |||||
| .address-list { | |||||
| padding: 40rpx 20rpx 120rpx 20rpx; | |||||
| } | |||||
| .add-btn { | |||||
| position: fixed; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| left: 0; | |||||
| bottom: 0; | |||||
| width: 750rpx; | |||||
| height: 100rpx; | |||||
| background: white; | |||||
| .btn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 85%; | |||||
| height: 80rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| text-align: center; | |||||
| font-size: 28rpx; | |||||
| background: $uni-color; | |||||
| } | |||||
| } | |||||
| } | |||||
| @media all and (min-width: 961px) { | |||||
| .add-btn { | |||||
| left: 50% !important; | |||||
| transform: translateX(-50%); | |||||
| } | |||||
| } | |||||
| //选择位置地图样式 | |||||
| :deep(.uni-system-choose-location) { | |||||
| z-index: 99999 !important; | |||||
| } | |||||
| </style> | |||||
+ 21
- 3
pages_order/center/helpFeedback.vue
View File
+ 130
- 159
pages_order/center/systemSet.vue
View File
| @ -1,167 +1,138 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="frame"> | |||||
| <view class="content" v-for="(item, index) in list" :key="index"> | |||||
| <view class="title">{{ item.title }}</view> | |||||
| <view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)"> | |||||
| <view class="key"> | |||||
| <view class="img"> | |||||
| <img :src="item2.leftIcon" style="width: 100%; height: 100%;" /> | |||||
| </view> | |||||
| <view class="text"> | |||||
| {{ item2.text }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="value"> | |||||
| {{ item.rightIcon }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 语言切换 --> | |||||
| <!--<view style="padding: 20rpx;"--> | |||||
| <!-- @click="$refs.changeLanguage.open()">--> | |||||
| <!-- {{ $t('pages.index.index.language') }}--> | |||||
| <!--</view>--> | |||||
| <changeLanguage ref="changeLanguage" /> | |||||
| </view> | |||||
| <view class="page"> | |||||
| <navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack"/> | |||||
| <view class="frame"> | |||||
| <view class="content" v-for="(item, index) in list" :key="index"> | |||||
| <view class="title">{{ item.title }}</view> | |||||
| <view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)"> | |||||
| <view class="key"> | |||||
| <view class="img"> | |||||
| <img :src="item2.leftIcon" style="width: 100%; height: 100%;"/> | |||||
| </view> | |||||
| <view class="text"> | |||||
| {{ item2.text }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="value"> | |||||
| {{ item.rightIcon }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 语言切换 --> | |||||
| <!--<view style="padding: 20rpx;"--> | |||||
| <!-- @click="$refs.changeLanguage.open()">--> | |||||
| <!-- {{ $t('pages.index.index.language') }}--> | |||||
| <!--</view>--> | |||||
| <changeLanguage ref="changeLanguage"/> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import ChangeLanguage from "@/components/base/changeLanguage.vue"; | |||||
| export default { | |||||
| name: "systemSet", | |||||
| components: { | |||||
| ChangeLanguage, | |||||
| tabber, | |||||
| topbar | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| list: [{ | |||||
| title: `${this.$t('pageTitle.accountSetting')}`, | |||||
| itemList: [ | |||||
| // text: `${this.$t('pageTitle.switchAccount')}` | |||||
| { | |||||
| leftIcon: "../static/center/1.svg", | |||||
| text: `${this.$t('pageTitle.switchAccount')}`, | |||||
| rightIcon: ">" | |||||
| }, | |||||
| { | |||||
| leftIcon: "../static/center/2.svg", | |||||
| text: `${this.$t('pageTitle.forgotPasswordPage')}`, | |||||
| rightIcon: ">" | |||||
| }, | |||||
| { | |||||
| leftIcon: "../static/center/2.svg", | |||||
| text: this.$t('pageTitle.logout'), | |||||
| rightIcon: ">", | |||||
| type : 'logout', | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| title: `${this.$t('pageTitle.systemSetting')}`, | |||||
| itemList: [{ | |||||
| leftIcon: "../static/center/1.svg", | |||||
| text: `${this.$t('pageTitle.languageSwitch')}`, | |||||
| rightIcon: ">" | |||||
| }, | |||||
| { | |||||
| leftIcon: "../static/center/2.svg", | |||||
| text: `${this.$t('pageTitle.versionUpdate')}`, | |||||
| rightIcon: ">" | |||||
| }, | |||||
| { | |||||
| leftIcon: "../static/center/2.svg", | |||||
| text: this.$t('pageTitle.clearCache'), | |||||
| rightIcon: ">" | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| title: `${this.$t('pageTitle.identitySetting')}`, | |||||
| itemList: [{ | |||||
| leftIcon: "../static/center/2.svg", | |||||
| text: this.$t('pageTitle.switchIdentity'), | |||||
| rightIcon: ">" | |||||
| }, ] | |||||
| } | |||||
| ], | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| tapItem(item, index) { | |||||
| if (item.text === this.$t('pageTitle.languageSwitch')) { | |||||
| this.$refs.changeLanguage.open(); | |||||
| }else if(item.type){ | |||||
| this[item.type]() | |||||
| } | |||||
| }, | |||||
| logout(){ | |||||
| this.$store.commit('logout') | |||||
| }, | |||||
| }, | |||||
| } | |||||
| import topbar from "@/components/base/topbar.vue"; | |||||
| import tabber from "@/components/base/tabbar.vue"; | |||||
| import ChangeLanguage from "@/components/base/changeLanguage.vue"; | |||||
| import {navigateTo} from "@/utils/utils"; | |||||
| export default { | |||||
| name: "systemSet", | |||||
| components: {ChangeLanguage, tabber, topbar}, | |||||
| data() { | |||||
| return { | |||||
| list: [ | |||||
| { | |||||
| title: `${this.$t('pageTitle.accountSetting')}`, | |||||
| itemList: [ | |||||
| // text: `${this.$t('pageTitle.switchAccount')}` | |||||
| {leftIcon: "../static/center/1.svg", text: `${this.$t('pageTitle.switchAccount')}`, rightIcon: ">"}, | |||||
| {leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.forgotPasswordPage')}`, rightIcon: ">"}, | |||||
| {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.logout'), rightIcon: ">"}, | |||||
| {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.addressList'), rightIcon: ">",toUrl:'/pages_order/center/addressListManage'}, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| title: `${this.$t('pageTitle.systemSetting')}`, | |||||
| itemList: [ | |||||
| {leftIcon: "../static/center/1.svg", text: `${this.$t('pageTitle.languageSwitch')}`, rightIcon: ">"}, | |||||
| {leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.versionUpdate')}`, rightIcon: ">"}, | |||||
| {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.clearCache'), rightIcon: ">"}, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| title: `${this.$t('pageTitle.identitySetting')}`, | |||||
| itemList: [ | |||||
| {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.switchIdentity'), rightIcon: ">"}, | |||||
| ] | |||||
| } | |||||
| ], | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| tapItem(item, index) { | |||||
| if (item.text === this.$t('pageTitle.languageSwitch')) { | |||||
| this.$refs.changeLanguage.open(); | |||||
| } | |||||
| uni.navigateTo({ | |||||
| url: item.toUrl | |||||
| }) | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| background-color: #FFF; | |||||
| height: 100vh; | |||||
| .frame { | |||||
| padding: 40rpx; | |||||
| .content { | |||||
| margin-bottom: 40rpx; | |||||
| .title { | |||||
| font-size: 30rpx; | |||||
| color: #b0b0b0; | |||||
| } | |||||
| .item { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 20rpx 40rpx; | |||||
| .key { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #333333; | |||||
| font-size: 32rpx; | |||||
| .img { | |||||
| width: 40rpx; | |||||
| height: 40rpx; | |||||
| } | |||||
| .text { | |||||
| margin-left: 20rpx; | |||||
| } | |||||
| } | |||||
| .value { | |||||
| color: #999999; | |||||
| font-size: 36rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .page { | |||||
| background-color: #FFF; | |||||
| height: 100vh; | |||||
| .frame { | |||||
| padding: 40rpx; | |||||
| .content { | |||||
| margin-bottom: 40rpx; | |||||
| .title { | |||||
| font-size: 30rpx; | |||||
| color: #b0b0b0; | |||||
| } | |||||
| .item { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 20rpx 40rpx; | |||||
| .key { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #333333; | |||||
| font-size: 32rpx; | |||||
| .img { | |||||
| width: 40rpx; | |||||
| height: 40rpx; | |||||
| } | |||||
| .text { | |||||
| margin-left: 20rpx; | |||||
| } | |||||
| } | |||||
| .value { | |||||
| color: #999999; | |||||
| font-size: 36rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
+ 234
- 235
pages_order/components/address/addressList.vue
View File
| @ -1,245 +1,244 @@ | |||||
| <template> | <template> | ||||
| <scroll-view | |||||
| scroll-y="true" | |||||
| :style="{height: height}" | |||||
| @scrolltolower="moreAddress"> | |||||
| <uv-radio-group v-model="selectAddress" | |||||
| @change="editDefault" | |||||
| v-if="addressList.length > 0"> | |||||
| <view v-for="item in addressList" :key="item.id" class="address-item"> | |||||
| <view class="address-item-top" | |||||
| @click="select(item)"> | |||||
| <view class="img-box"> | |||||
| <image src="../../static/address/icon.png" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="address-info"> | |||||
| <view class="user-info"> | |||||
| <text class="user-name">{{ item.name }}</text> | |||||
| <text class="user-phone">{{ item.phone }}</text> | |||||
| <text v-if="item.defaultFlag == 1" class="is-default">默认</text> | |||||
| </view> | |||||
| <view class="address-detail"> | |||||
| {{ item.address + " " + item.addressDetail }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="controls" | |||||
| v-if="controls"> | |||||
| <view class="default-checkbox"> | |||||
| <uv-radio | |||||
| :name="item.id" | |||||
| label-disabled | |||||
| size="30rpx" | |||||
| icon-size="30rpx"> | |||||
| 默认地址 | |||||
| </uv-radio> | |||||
| </view> | |||||
| <view class="edit-btn"> | |||||
| <uv-icon name="edit-pen"></uv-icon> | |||||
| <text @click="editAddress(item)" class="control-title">编辑</text> | |||||
| </view> | |||||
| <view class="del-btn"> | |||||
| <uv-icon name="trash"></uv-icon> | |||||
| <text class="control-title" @click="deleteAddress(item.id)">删除</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </uv-radio-group> | |||||
| <view | |||||
| style="padding: 100rpx 0;" | |||||
| v-else> | |||||
| <uv-empty | |||||
| mode="history" | |||||
| textSize="28rpx" | |||||
| iconSize="100rpx"/> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <scroll-view | |||||
| scroll-y="true" | |||||
| :style="{height: height}" | |||||
| @scrolltolower="moreAddress"> | |||||
| <uv-radio-group v-model="selectAddress" | |||||
| @change="editDefault" | |||||
| v-if="addressList.length > 0"> | |||||
| <view v-for="item in addressList" :key="item.id" class="address-item"> | |||||
| <view class="address-item-top" | |||||
| @click="select(item)"> | |||||
| <view class="img-box"> | |||||
| <image src="/static/image/address/icon.png" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="address-info"> | |||||
| <view class="user-info"> | |||||
| <text class="user-name">{{ item.name }}</text> | |||||
| <text class="user-phone">{{ item.phone }}</text> | |||||
| <text v-if="item.id == selectAddress" class="is-default">默认</text> | |||||
| </view> | |||||
| <view class="address-detail"> | |||||
| {{ item.address + " " + item.addressDetail }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="controls" | |||||
| v-if="controls"> | |||||
| <view class="default-checkbox"> | |||||
| <uv-radio | |||||
| :name="item.id" | |||||
| label-disabled | |||||
| size="30rpx" | |||||
| icon-size="30rpx"> | |||||
| 默认地址 | |||||
| </uv-radio> | |||||
| </view> | |||||
| <view class="edit-btn"> | |||||
| <uv-icon name="edit-pen"></uv-icon> | |||||
| <text @click="editAddress(item)" class="control-title">编辑</text> | |||||
| </view> | |||||
| <view class="del-btn"> | |||||
| <uv-icon name="trash"></uv-icon> | |||||
| <text class="control-title" @click="deleteAddress(item.id)">删除</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </uv-radio-group> | |||||
| <view | |||||
| style="padding: 100rpx 0;" | |||||
| v-else> | |||||
| <uv-empty | |||||
| mode="history" | |||||
| textSize="28rpx" | |||||
| iconSize="100rpx"/> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| props : { | |||||
| controls : { | |||||
| default : false, | |||||
| type : Boolean, | |||||
| }, | |||||
| height : { | |||||
| default : 'calc(90vh - 180rpx)' | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectAddress : 0, | |||||
| queryParams: { | |||||
| pageNo: 1, | |||||
| pageSize: 10, | |||||
| }, | |||||
| addressList: [], | |||||
| total : 0, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //获取地址列表 | |||||
| getAddressList() { | |||||
| return new Promise((success, fail) => { | |||||
| this.$api('addressPage', this.queryParams, res => { | |||||
| if (res.code == 200) { | |||||
| this.addressList = res.result.records || []; | |||||
| this.total = res.result.total || 0; | |||||
| res.result.records.forEach(n => { //筛选默认地址 | |||||
| console.log(n); | |||||
| if (n.defaultFlag == 1) { | |||||
| this.selectAddress = n.id | |||||
| } | |||||
| }) | |||||
| success(res.result) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 加载更多 | |||||
| moreAddress(){ | |||||
| if(this.queryParams.pageSize > this.total){ | |||||
| return | |||||
| } | |||||
| this.queryParams.pageSize += 10 | |||||
| this.getAddressList() | |||||
| }, | |||||
| // 删除地址 | |||||
| deleteAddress(e){ | |||||
| this.$emit('deleteAddress', e) | |||||
| }, | |||||
| // 修改地址 | |||||
| editAddress(e){ | |||||
| this.$emit('editAddress', e) | |||||
| }, | |||||
| // 切换默认地址 | |||||
| editDefault(e){ | |||||
| this.$emit('editDefault', e) | |||||
| }, | |||||
| // 选择了地址 | |||||
| select(e){ | |||||
| this.$emit('select', e) | |||||
| }, | |||||
| } | |||||
| } | |||||
| export default { | |||||
| props : { | |||||
| controls : { | |||||
| default : false, | |||||
| type : Boolean, | |||||
| }, | |||||
| height : { | |||||
| default : 'calc(90vh - 180rpx)' | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectAddress : 0, | |||||
| queryParams: { | |||||
| pageNo: 1, | |||||
| pageSize: 10, | |||||
| }, | |||||
| addressList: [], | |||||
| total : 0, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //获取地址列表 | |||||
| getAddressList() { | |||||
| return new Promise((success, fail) => { | |||||
| this.$api('addressList', this.queryParams, res => { | |||||
| if (res.code == 200) { | |||||
| this.addressList = res.result.records || []; | |||||
| this.total = res.result.total || 0; | |||||
| this.addressList.forEach(n => { //筛选默认地址 | |||||
| if (n.defaultFlag == 1) { | |||||
| this.selectAddress = n.id | |||||
| } | |||||
| }) | |||||
| success(res.result) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 加载更多 | |||||
| moreAddress(){ | |||||
| if(this.queryParams.pageSize > this.total){ | |||||
| return | |||||
| } | |||||
| this.queryParams.pageSize += 10 | |||||
| this.getAddressList() | |||||
| }, | |||||
| // 删除地址 | |||||
| deleteAddress(e){ | |||||
| this.$emit('deleteAddress', e) | |||||
| }, | |||||
| // 修改地址 | |||||
| editAddress(e){ | |||||
| this.$emit('editAddress', e) | |||||
| }, | |||||
| // 切换默认地址 | |||||
| editDefault(e){ | |||||
| this.$emit('editDefault', e) | |||||
| }, | |||||
| // 选择了地址 | |||||
| select(e){ | |||||
| this.$emit('select', e) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .address-item { | .address-item { | ||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| overflow: hidden; | |||||
| margin-bottom: 20rpx; | |||||
| padding: 15rpx 15rpx 0rpx 15rpx; | |||||
| width: 680rpx; | |||||
| .address-item-top { | |||||
| border-bottom: 1px dashed #D3D1D1; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 0rpx 0rpx 15rpx 0rpx; | |||||
| .img-box { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| image { | |||||
| width: 75%; | |||||
| height: 75%; | |||||
| display: block; | |||||
| margin: 12.5% auto; | |||||
| } | |||||
| } | |||||
| .address-info { | |||||
| width: calc(100% - 120rpx); | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| .user-info { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text { | |||||
| display: block; | |||||
| line-height: 40rpx; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .user-name, | |||||
| .user-phone { | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .is-default { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #FEB773; | |||||
| color: white; | |||||
| width: 80rpx; | |||||
| height: 35rpx; | |||||
| border-radius: 20rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .address-detail { | |||||
| color: #4a4a4a; | |||||
| font-size: 26rpx; | |||||
| overflow: hidden; | |||||
| display: -webkit-box; | |||||
| -webkit-box-orient: vertical; | |||||
| -webkit-line-clamp: 2; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| } | |||||
| } | |||||
| .controls { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| font-size: 26rpx; | |||||
| padding: 15rpx 15rpx 25rpx 15rpx; | |||||
| .default-checkbox { | |||||
| display: flex; | |||||
| text { | |||||
| margin-left: 8rpx; | |||||
| } | |||||
| } | |||||
| .control-title { | |||||
| height: 30rpx; | |||||
| line-height: 30rpx; | |||||
| color: #666666; | |||||
| } | |||||
| view { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 23rpx; | |||||
| height: 23rpx; | |||||
| vertical-align: middle; | |||||
| margin-right: 8rpx; | |||||
| } | |||||
| } | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| overflow: hidden; | |||||
| margin-bottom: 20rpx; | |||||
| padding: 15rpx 15rpx 0rpx 15rpx; | |||||
| width: 680rpx; | |||||
| .address-item-top { | |||||
| border-bottom: 1px dashed #D3D1D1; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 0rpx 0rpx 15rpx 0rpx; | |||||
| .img-box { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| image { | |||||
| width: 75%; | |||||
| height: 75%; | |||||
| display: block; | |||||
| margin: 12.5% auto; | |||||
| } | |||||
| } | |||||
| .address-info { | |||||
| width: calc(100% - 120rpx); | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| .user-info { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text { | |||||
| display: block; | |||||
| line-height: 40rpx; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .user-name, | |||||
| .user-phone { | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .is-default { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #FEB773; | |||||
| color: white; | |||||
| width: 80rpx; | |||||
| height: 35rpx; | |||||
| border-radius: 20rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .address-detail { | |||||
| color: #4a4a4a; | |||||
| font-size: 26rpx; | |||||
| overflow: hidden; | |||||
| display: -webkit-box; | |||||
| -webkit-box-orient: vertical; | |||||
| -webkit-line-clamp: 2; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| } | |||||
| } | |||||
| .controls { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| font-size: 26rpx; | |||||
| padding: 15rpx 15rpx 25rpx 15rpx; | |||||
| .default-checkbox { | |||||
| display: flex; | |||||
| text { | |||||
| margin-left: 8rpx; | |||||
| } | |||||
| } | |||||
| .control-title { | |||||
| height: 30rpx; | |||||
| line-height: 30rpx; | |||||
| color: #666666; | |||||
| } | |||||
| view { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 23rpx; | |||||
| height: 23rpx; | |||||
| vertical-align: middle; | |||||
| margin-right: 8rpx; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||
+ 215
- 212
pages_order/components/address/redactAddress.vue
View File
| @ -1,220 +1,223 @@ | |||||
| <template> | <template> | ||||
| <uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}"> | |||||
| <view class="redact-address"> | |||||
| <view class="redact-address-title">{{title}}</view> | |||||
| <uv-form label-width="210rpx" :model="addressDetail" ref="form"> | |||||
| <uv-form-item label="联系人" prop="name"> | |||||
| <uv-input v-model="addressDetail.name" placeholder="请输入联系人姓名" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="手机号" prop="phone"> | |||||
| <uv-input v-model="addressDetail.phone" placeholder="请输入手机号" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="所在地区" prop="address"> | |||||
| <uv-input v-model="addressDetail.address" placeholder="请选择所在地区" border="none"> | |||||
| </uv-input> | |||||
| <template #right> | |||||
| <view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr"> | |||||
| <image src="../../static/address/selectIcon.png" mode="aspectFit"></image>定位 | |||||
| </view> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="详细地址" prop="addressDetail"> | |||||
| <uv-input v-model="addressDetail.addressDetail" placeholder="请输入详细地址" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| </uv-form> | |||||
| <view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view> | |||||
| </view> | |||||
| </uv-popup> | |||||
| <uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}"> | |||||
| <view class="redact-address"> | |||||
| <view class="redact-address-title">{{ title }}</view> | |||||
| <uv-form label-width="210rpx" :model="addressDetail" ref="form"> | |||||
| <uv-form-item label="联系人" prop="name"> | |||||
| <uv-input v-model="addressDetail.name" placeholder="请输入联系人姓名" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="手机号" prop="phone"> | |||||
| <uv-input v-model="addressDetail.phone" placeholder="请输入手机号" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="所在地区" prop="address"> | |||||
| <uv-input v-model="addressDetail.address" placeholder="请选择所在地区" border="none"> | |||||
| </uv-input> | |||||
| <template #right> | |||||
| <view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr"> | |||||
| <image src="../../static/address/selectIcon.png" mode="aspectFit"></image> | |||||
| 定位 | |||||
| </view> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="详细地址" prop="addressDetail"> | |||||
| <uv-input v-model="addressDetail.addressDetail" placeholder="请输入详细地址" border="none"> | |||||
| </uv-input> | |||||
| </uv-form-item> | |||||
| </uv-form> | |||||
| <view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址' }}</view> | |||||
| </view> | |||||
| </uv-popup> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Position from '@/utils/position.js' | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| addressDetail: {} | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| title: { | |||||
| type: String, | |||||
| default: '新增地址' | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| open(addressDetail) { | |||||
| this.addressDetail = addressDetail | |||||
| this.$refs.addressPopup.open('bottom') | |||||
| }, | |||||
| close(){ | |||||
| this.$refs.addressPopup.close() | |||||
| }, | |||||
| //新增和修改地址 | |||||
| onSubmit() { | |||||
| let isOk = this.parameterVerification(this.addressDetail) | |||||
| if (isOk && !isOk.auth) { | |||||
| return uni.showToast({ | |||||
| icon: 'none', | |||||
| title: isOk.title, | |||||
| 'zIndex': 10000 | |||||
| }) | |||||
| } | |||||
| this.$emit('saveOrUpdate', this.addressDetail) | |||||
| }, | |||||
| //验证用户参数合法性 | |||||
| parameterVerification(addressDetaila) { | |||||
| let { | |||||
| name, | |||||
| phone, | |||||
| address, | |||||
| addressDetail | |||||
| } = addressDetaila | |||||
| if (name.trim() == '') { | |||||
| return { | |||||
| title: '请填写联系人', | |||||
| auth: false | |||||
| } | |||||
| } else if (phone.trim() == '') { | |||||
| return { | |||||
| title: '请填写手机号', | |||||
| auth: false | |||||
| } | |||||
| } else if (address.trim() == '') { | |||||
| return { | |||||
| title: '请填写所在地区', | |||||
| auth: false | |||||
| } | |||||
| } else if (addressDetail.trim() == '') { | |||||
| return { | |||||
| title: '请填写详细地址', | |||||
| auth: false | |||||
| } | |||||
| } else if (phone.trim() != '') { | |||||
| if (!this.$utils.verificationPhone(phone)) { | |||||
| return { | |||||
| title: '手机号格式不合法', | |||||
| auth: false | |||||
| } | |||||
| } | |||||
| } | |||||
| return { | |||||
| title: '验证通过', | |||||
| auth: true | |||||
| } | |||||
| }, | |||||
| //地图上选择地址 | |||||
| selectAddr() { | |||||
| Position.getLocation(res => { | |||||
| Position.selectAddress(res.longitude, res.latitude, success => { | |||||
| this.setAddress(success) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| //提取用户选择的地址信息复制给表单数据 | |||||
| setAddress(res) { | |||||
| //经纬度信息 | |||||
| this.addressDetail.latitude = res.latitude | |||||
| this.addressDetail.longitude = res.longitude | |||||
| if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||||
| return this.addressDetail.address = res.name | |||||
| } | |||||
| if (res.address || res.name) { | |||||
| return this.addressDetail.address = res.address + res.name | |||||
| } | |||||
| this.addressDetail.address = '' //用户啥都没选就点击勾选 | |||||
| }, | |||||
| } | |||||
| } | |||||
| import Position from '@/utils/position.js' | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| addressDetail: {} | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| title: { | |||||
| type: String, | |||||
| default: '新增地址' | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| open(addressDetail) { | |||||
| this.addressDetail = addressDetail | |||||
| this.$refs.addressPopup.open('bottom') | |||||
| }, | |||||
| close() { | |||||
| this.$refs.addressPopup.close() | |||||
| }, | |||||
| //新增和修改地址 | |||||
| onSubmit() { | |||||
| let isOk = this.parameterVerification(this.addressDetail) | |||||
| if (isOk && !isOk.auth) { | |||||
| return uni.showToast({ | |||||
| icon: 'none', | |||||
| title: isOk.title, | |||||
| 'zIndex': 10000 | |||||
| }) | |||||
| } | |||||
| this.addressDetail.addressDetail = this.addressDetail.address + this.addressDetail.addressDetail | |||||
| this.$emit('saveOrUpdate', this.addressDetail) | |||||
| }, | |||||
| //验证用户参数合法性 | |||||
| parameterVerification(addressDetaila) { | |||||
| let { | |||||
| name, | |||||
| phone, | |||||
| address, | |||||
| addressDetail | |||||
| } = addressDetaila | |||||
| if (name.trim() == '') { | |||||
| return { | |||||
| title: '请填写联系人', | |||||
| auth: false | |||||
| } | |||||
| } else if (phone.trim() == '') { | |||||
| return { | |||||
| title: '请填写手机号', | |||||
| auth: false | |||||
| } | |||||
| } else if (address.trim() == '') { | |||||
| return { | |||||
| title: '请填写所在地区', | |||||
| auth: false | |||||
| } | |||||
| } else if (addressDetail.trim() == '') { | |||||
| return { | |||||
| title: '请填写详细地址', | |||||
| auth: false | |||||
| } | |||||
| } else if (phone.trim() != '') { | |||||
| if (!this.$utils.verificationPhone(phone)) { | |||||
| return { | |||||
| title: '手机号格式不合法', | |||||
| auth: false | |||||
| } | |||||
| } | |||||
| } | |||||
| return { | |||||
| title: '验证通过', | |||||
| auth: true | |||||
| } | |||||
| }, | |||||
| //地图上选择地址 | |||||
| selectAddr() { | |||||
| Position.getLocation(res => { | |||||
| Position.selectAddress(res.longitude, res.latitude, success => { | |||||
| this.setAddress(success) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| //提取用户选择的地址信息复制给表单数据 | |||||
| setAddress(res) { | |||||
| //经纬度信息 | |||||
| this.addressDetail.latitude = res.latitude | |||||
| this.addressDetail.longitude = res.longitude | |||||
| if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||||
| return this.addressDetail.address = res.name | |||||
| } | |||||
| if (res.address || res.name) { | |||||
| return this.addressDetail.address = res.address + res.name | |||||
| } | |||||
| this.addressDetail.address = '' //用户啥都没选就点击勾选 | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .redact-address { | |||||
| box-sizing: border-box; | |||||
| .redact-address-title { | |||||
| height: 80rpx; | |||||
| line-height: 80rpx; | |||||
| font-size: 30rpx; | |||||
| color: #333333; | |||||
| font-weight: 600; | |||||
| } | |||||
| .save { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 90%; | |||||
| height: 80rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 28rpx; | |||||
| margin: 0rpx auto; | |||||
| background: $uni-color; | |||||
| margin-top: 150rpx; | |||||
| } | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| //修改组件默认样式 | |||||
| .uv-form { | |||||
| padding: 30rpx 0rpx; | |||||
| } | |||||
| &::v-deep .uv-cell { | |||||
| padding: 0rpx 0rpx; | |||||
| font-size: 26rpx; | |||||
| &::after { | |||||
| border: none !important; | |||||
| } | |||||
| .uv-field__label { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 80rpx; | |||||
| } | |||||
| .uv-field__control, | |||||
| .uv-field__right-icon { | |||||
| height: 80rpx; | |||||
| font-size: 26rpx; | |||||
| border-bottom: 2rpx solid #cbc8c8; | |||||
| } | |||||
| .uv-field__right-icon { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 78rpx; | |||||
| color: #5FCC9F; | |||||
| } | |||||
| .uv-cell__value { | |||||
| height: 120rpx; | |||||
| } | |||||
| } | |||||
| &::v-deep .uv-field__error-message { | |||||
| color: #5AC796; | |||||
| font-size: 20rpx; | |||||
| margin-top: 10rpx; | |||||
| } | |||||
| } | |||||
| .redact-address { | |||||
| box-sizing: border-box; | |||||
| .redact-address-title { | |||||
| height: 80rpx; | |||||
| line-height: 80rpx; | |||||
| font-size: 30rpx; | |||||
| color: #333333; | |||||
| font-weight: 600; | |||||
| } | |||||
| .save { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 90%; | |||||
| height: 80rpx; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 28rpx; | |||||
| margin: 0rpx auto; | |||||
| background: $uni-color; | |||||
| margin-top: 150rpx; | |||||
| } | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| //修改组件默认样式 | |||||
| .uv-form { | |||||
| padding: 30rpx 0rpx; | |||||
| } | |||||
| &::v-deep .uv-cell { | |||||
| padding: 0rpx 0rpx; | |||||
| font-size: 26rpx; | |||||
| &::after { | |||||
| border: none !important; | |||||
| } | |||||
| .uv-field__label { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 80rpx; | |||||
| } | |||||
| .uv-field__control, | |||||
| .uv-field__right-icon { | |||||
| height: 80rpx; | |||||
| font-size: 26rpx; | |||||
| border-bottom: 2rpx solid #cbc8c8; | |||||
| } | |||||
| .uv-field__right-icon { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 78rpx; | |||||
| color: #5FCC9F; | |||||
| } | |||||
| .uv-cell__value { | |||||
| height: 120rpx; | |||||
| } | |||||
| } | |||||
| &::v-deep .uv-field__error-message { | |||||
| color: #5AC796; | |||||
| font-size: 20rpx; | |||||
| margin-top: 10rpx; | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
