4 changed files with 621 additions and 138 deletions
Unified View
Diff Options
-
+73 -0components/bottom/bottomBtn.vue
-
+40 -45pages.json
-
+196 -93pages/index/center.vue
-
+312 -0pages_order/order/refundsOrExchange.vue
+ 73
- 0
components/bottom/bottomBtn.vue
View File
| @ -0,0 +1,73 @@ | |||||
| <template> | |||||
| <view class="container" @click="$emit('confirm')"> | |||||
| <button | |||||
| :style="{ | |||||
| color: color, | |||||
| backgroundColor: backgroundColor, | |||||
| fontSize: fontSize, | |||||
| width: width, | |||||
| height: height, | |||||
| borderRadius: borderRadius | |||||
| }"> | |||||
| {{ text }} | |||||
| </button> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| props: { | |||||
| color: { | |||||
| default: '#000000' // 设置默认颜色值 | |||||
| }, | |||||
| backgroundColor: { | |||||
| default: '#FFFFFF' // 设置默认背景颜色 | |||||
| }, | |||||
| fontSize: { | |||||
| default: '14px' // 设置默认字体大小 | |||||
| }, | |||||
| text: { | |||||
| default: '按钮' // 设置默认文本内容 | |||||
| }, | |||||
| width: { | |||||
| default: '100px' // 设置默认宽度 | |||||
| }, | |||||
| height: { | |||||
| default: '200rpx' // 设置默认高度 | |||||
| }, | |||||
| borderRadius: { | |||||
| default: '20rpx' // 设置默认高度 | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="less"> | |||||
| .container { | |||||
| position: fixed; | |||||
| bottom: 50rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| /* 水平居中 */ | |||||
| align-items: center; | |||||
| /* 垂直居中 */ | |||||
| width: 100%; | |||||
| /* 使容器宽度覆盖整个屏幕 */ | |||||
| } | |||||
| button { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| </style> | |||||
+ 40
- 45
pages.json
View File
+ 196
- 93
pages/index/center.vue
View File
+ 312
- 0
pages_order/order/refundsOrExchange.vue
View File
| @ -0,0 +1,312 @@ | |||||
| <template> | |||||
| <view class="refundsOrExchange"> | |||||
| <navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="frame"> | |||||
| <!-- 商品简介 --> | |||||
| <view class="itme1"> | |||||
| <view class="left"> | |||||
| <img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||||
| </view> | |||||
| <view class="center"> | |||||
| <view>桌布退货</view> | |||||
| <view>产品规格：120*4*75【桌子尺寸】</view> | |||||
| </view> | |||||
| <view class="right">×3</view> | |||||
| </view> | |||||
| <!-- 申请类型&申请原因 --> | |||||
| <view class="item2"> | |||||
| <view class="type"> | |||||
| <span>申请类型</span> | |||||
| <span>退货退款</span> | |||||
| </view> | |||||
| <uv-line></uv-line> | |||||
| <view class="reason"> | |||||
| <view>申请原因</view> | |||||
| <view> | |||||
| <uv-input placeholder="请输入申请原因" border="none" clearable></uv-input> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 退货数量&申请金额--> | |||||
| <view class="item3"> | |||||
| <view class="type"> | |||||
| <span>{{titleIndex==0?'退货数量' :'换货数量'}}</span> | |||||
| <span> | |||||
| <uv-number-box :min="1" :max="100"></uv-number-box> | |||||
| </span> | |||||
| </view> | |||||
| <uv-line v-if='titleIndex == 0 ? true :false'></uv-line> | |||||
| <view class="reason" v-if='titleIndex == 0 ? true :false'> | |||||
| <view>申请原因</view> | |||||
| <view> | |||||
| <uv-input disabled placeholder="$" border="none" clearable></uv-input> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 申请说明 --> | |||||
| <view class="item4"> | |||||
| <view>申请说明(选填)</view> | |||||
| <view> | |||||
| <uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input> | |||||
| </view> | |||||
| <view> | |||||
| <uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx" | |||||
| @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 联系电话 --> | |||||
| <view class="item5"> | |||||
| <view class="phone"> | |||||
| <view>联系电话</view> | |||||
| <view> | |||||
| <uv-input placeholder="请输入联系电话" border="none" clearable></uv-input> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 底部按钮 --> | |||||
| <bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor' | |||||
| :fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width" | |||||
| :height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'> | |||||
| </bottomBtn> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import bottomBtn from "../../components/bottom/bottomBtn.vue" | |||||
| export default { | |||||
| onLoad(option) { | |||||
| this.titleIndex = option.index | |||||
| }, | |||||
| components: { | |||||
| bottomBtn | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| titleIndex: 0, | |||||
| title: ['申请换货', '申请退货'], | |||||
| fileList: [], | |||||
| bottomBtnStyle: { | |||||
| color: '#FFF', | |||||
| backgroundColor: '#fd5100', | |||||
| fontSize: '34rpx', | |||||
| text: '提交申请', | |||||
| width: '400rpx', | |||||
| height: '80rpx', | |||||
| borderRadius: '100rpx' | |||||
| }, | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| }, | |||||
| methods: { | |||||
| confirm() { | |||||
| console.log("==="); | |||||
| }, | |||||
| deleteImage(e) { | |||||
| this.fileList.splice(e.index, 1) | |||||
| }, | |||||
| afterRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.fileList.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="less" scoped> | |||||
| * { | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .refundsOrExchange { | |||||
| .frame { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 30rpx; | |||||
| width: 100%; | |||||
| padding-top: 40rpx; | |||||
| background-color: #f5f5f5; | |||||
| .itme1 { | |||||
| display: flex; | |||||
| height: 200rpx; | |||||
| background-color: #ffffff; | |||||
| .left { | |||||
| padding: 40rpx; | |||||
| width: 20%; | |||||
| border-radius: 10rpx; | |||||
| background-color: #ffffff; | |||||
| } | |||||
| .center { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| gap: 20rpx; | |||||
| width: 60%; | |||||
| padding: 0rpx 0 0 20rpx; | |||||
| background-color: #ffffff; | |||||
| // 给第一个 view 设置样式 | |||||
| >view:first-of-type { | |||||
| font-size: 36rpx; | |||||
| color: #333; | |||||
| } | |||||
| // 给第二个 view 设置样式 | |||||
| >view:nth-of-type(2) { | |||||
| font-size: 28rpx; | |||||
| color: #666666; | |||||
| } | |||||
| } | |||||
| .right { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 10%; | |||||
| color: #666666; | |||||
| background-color: #ffffff; | |||||
| } | |||||
| } | |||||
| .item2 { | |||||
| width: 100vw; | |||||
| .type { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| background-color: #FFF; | |||||
| height: 80rpx; | |||||
| padding: 0 0 0 20rpx; | |||||
| >span:nth-of-type(1) { | |||||
| width: 30%; | |||||
| } | |||||
| >span:nth-of-type(2) { | |||||
| width: 70%; | |||||
| } | |||||
| } | |||||
| .reason { | |||||
| 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%; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| width: 70%; | |||||
| padding: 0 20rpx 0 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| .item3 { | |||||
| width: 100vw; | |||||
| .type { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| background-color: #FFF; | |||||
| height: 80rpx; | |||||
| padding: 0 0 0 20rpx; | |||||
| >span:nth-of-type(1) { | |||||
| width: 70%; | |||||
| } | |||||
| >span:nth-of-type(2) { | |||||
| width: 30%; | |||||
| } | |||||
| } | |||||
| .reason { | |||||
| 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%; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| width: 70%; | |||||
| padding: 0 20rpx 0 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| .item4 { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| padding: 10rpx 0 0 20rpx; | |||||
| background-color: #FFF; | |||||
| >view:nth-of-type(1) { | |||||
| background-color: #FFF; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| margin: 10rpx 0 10rpx 0; | |||||
| background-color: #FFF; | |||||
| } | |||||
| } | |||||
| .item5 { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| padding: 0 0 0 20rpx; | |||||
| background-color: #FFF; | |||||
| .phone { | |||||
| 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%; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| width: 70%; | |||||
| padding: 0 20rpx 0 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||