| @ -1,143 +1,145 @@ | |||
| <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> | |||
| <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> | |||
| <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> | |||
| @ -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> | |||
| @ -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> | |||
| @ -1,167 +1,138 @@ | |||
| <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> | |||
| <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> | |||
| <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> | |||
| @ -1,245 +1,244 @@ | |||
| <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> | |||
| <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> | |||
| <style scoped lang="scss"> | |||
| .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> | |||
| @ -1,220 +1,223 @@ | |||
| <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> | |||
| <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> | |||
| <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> | |||