Browse Source
feat: 新增订单创建、支付及商品详情功能，优化用户界面和交互体验
- 新增订单创建、支付、快捷下单等功能 - 优化商品详情页展示，支持商品信息动态加载 - 调整用户中心界面，新增佣金和余额展示 - 修复地址管理模块的字段命名问题 - 更新API接口路径，适配新后端服务 - 删除冗余页面和代码，提升代码可维护性master
33 changed files with 3494 additions and 1061 deletions
Split View
Diff Options
-
+4 -1.cursor/rules/md.mdc
-
+4 -1App.vue
-
+1 -1api/api.js
-
+93 -3api/model/index.js
-
+3 -3api/model/login.js
-
+1931 -0apijson.json
-
+0 -4components/base/tabbar.vue
-
+2 -2config.js
-
+8 -8pages.json
-
+33 -53pages/index/category.vue
-
+105 -80pages/index/center.vue
-
+82 -66pages/index/index.vue
-
+1 -0pages/index/order.vue
-
+4 -4pages_order/auth/wxLogin.vue
-
+0 -331pages_order/center/help.vue
-
+2 -2pages_order/components/address/addressList.vue
-
+3 -3pages_order/components/address/redactAddress.vue
-
+1 -1pages_order/components/product/submit.vue
-
+1 -1pages_order/components/product/submitUnitSelect.vue
-
+4 -4pages_order/mine/address.vue
-
+61 -18pages_order/mine/help.vue
-
+12 -10pages_order/mine/individualTeam.vue
-
+266 -0pages_order/mine/promotion.vue
-
+805 -0pages_order/order/createOrder.vue
-
+16 -46pages_order/order/pictureOrder.vue
-
+0 -362pages_order/order/refundsOrExchange.vue
-
+17 -47pages_order/order/voiceOrder.vue
-
+34 -9pages_order/product/productDetail.vue
-
BINpages_order/static/createOrder/account.png
-
BINpages_order/static/createOrder/address.png
-
BINpages_order/static/createOrder/coupon.png
-
BINpages_order/static/createOrder/wx.png
-
+1 -1store/store.js
+ 4
- 1
.cursor/rules/md.mdc
View File
+ 4
- 1
App.vue
View File
+ 1
- 1
api/api.js
View File
+ 93
- 3
api/model/index.js
View File
+ 3
- 3
api/model/login.js
View File
+ 1931
- 0
apijson.json
File diff suppressed because it is too large
View File
+ 0
- 4
components/base/tabbar.vue
View File
+ 2
- 2
config.js
View File
+ 8
- 8
pages.json
View File
+ 33
- 53
pages/index/category.vue
View File
+ 105
- 80
pages/index/center.vue
View File
+ 82
- 66
pages/index/index.vue
View File
+ 1
- 0
pages/index/order.vue
View File
+ 4
- 4
pages_order/auth/wxLogin.vue
View File
+ 0
- 331
pages_order/center/help.vue
View File
| @ -1,331 +0,0 @@ | |||
| <template> | |||
| <!-- 帮助与反馈 --> | |||
| <view class="help"> | |||
| <navbar title="帮助与反馈" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="help-box"> | |||
| <view> | |||
| <view class="help-issue"> | |||
| <text>问题和意见</text> | |||
| <text style="color: #BD3624;">*</text> | |||
| </view> | |||
| <uv-textarea v-model="value" :count="true" border="none" height="400" | |||
| placeholder="请把发现的问题提交给我们，感谢您的参与(必填)" | |||
| :text-style="{color:'#BCB7B7',fontSize:'28rpx'}" /> | |||
| </view> | |||
| <view> | |||
| <view class="help-issue"> | |||
| <text>问题截图</text> | |||
| <text style="color: #BD3624;">*</text> | |||
| </view> | |||
| <view class="help-screenshot"> | |||
| <uv-upload :fileList="fileList" multiple :maxCount="3" width="180rpx" | |||
| height="180rpx" multiple @afterRead="afterRead" @delete="deleteImage"> | |||
| <image src="../static/help/uploading.png" mode="aspectFill" | |||
| style="width: 180rpx;height: 180rpx;" /> | |||
| </uv-upload> | |||
| </view> | |||
| </view> | |||
| <!-- <view> | |||
| <view class="help-issue"> | |||
| <text>联系方式</text> | |||
| <text style="color: #BD3624;">*</text> | |||
| </view> | |||
| <uv-input placeholder="请输入联系方式" fontSize="24rpx" border="bottom" | |||
| :custom-style="{backgroundColor: '#fff'}"> | |||
| <template #prefix> | |||
| <uv-text text="联系姓名" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" /> | |||
| </template> | |||
| </uv-input> | |||
| <uv-input placeholder="请输入联系姓名" border="none" fontSize="24rpx" | |||
| :custom-style="{backgroundColor: '#fff'}"> | |||
| <template #prefix> | |||
| <uv-text text="联系方式" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" /> | |||
| </template> | |||
| </uv-input> | |||
| </view> --> | |||
| <view class="help-button"> | |||
| <view>确认</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="帮助与反馈" leftClick @leftClick="$utils.navigateBack"/> | |||
| <view class="frame"> | |||
| <!--帮助与反馈--> | |||
| <view class="helpFeedback"> | |||
| <view class="title"> 问题和意见 <span style="color: red;">*</span></view> | |||
| <view class="desc"> | |||
| <textarea placeholder="请把发现的问题提交给我们，感谢您的参与(必填)"/> | |||
| </view> | |||
| </view> | |||
| <!--问题截图--> | |||
| <view class="problemImg"> | |||
| <view class="title">问题截图<span style="color: red;">*</span></view> | |||
| <view class="img"> | |||
| <uv-upload | |||
| :fileList="fileList" | |||
| :maxCount="5" | |||
| multiple | |||
| width="150rpx" | |||
| height="150rpx" | |||
| @delete="deleteImage" | |||
| @afterRead="afterRead" | |||
| :previewFullImage="true"> | |||
| </uv-upload> | |||
| </view> | |||
| </view> | |||
| <!--联系方式--> | |||
| <view class="name_phone"> | |||
| <view class="title">联系方式<span style="color: red;">*</span></view> | |||
| <view class="items"> | |||
| <view class="item"> | |||
| <view>联系姓名</view> | |||
| <view> | |||
| <input placeholder="请输入联系姓名" clearable></input> | |||
| </view> | |||
| </view> | |||
| <view class="item"> | |||
| <view>联系电话</view> | |||
| <view> | |||
| <input placeholder="请输入联系电话" clearable></input> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!--提交反馈--> | |||
| <view class="btns"> | |||
| <view @click="submitFeedback" class="btn"> | |||
| 提交反馈 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import topbar from "@/components/base/topbar.vue"; | |||
| import tabber from "@/components/base/tabbar.vue"; | |||
| export default { | |||
| name: "helpFeedback", | |||
| components: {tabber, topbar}, | |||
| data() { | |||
| return { | |||
| fileList: [], | |||
| } | |||
| }, | |||
| methods: { | |||
| // 提交反馈 | |||
| submitFeedback() { | |||
| }, | |||
| 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 scoped lang="scss"> | |||
| .page { | |||
| height: 100vh; | |||
| background-color: #f2f5f5; | |||
| .frame { | |||
| padding: 40rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| gap: 40rpx; | |||
| .helpFeedback { | |||
| .title { | |||
| } | |||
| .desc { | |||
| margin-top: 20rpx; | |||
| height: 300rpx; | |||
| border-radius: 40rpx; | |||
| overflow: hidden; | |||
| padding: 20rpx; | |||
| font-size: 28rpx; | |||
| background-color: #fff; | |||
| } | |||
| } | |||
| .problemImg { | |||
| .img { | |||
| margin-top: 20rpx; | |||
| height: 150rpx; | |||
| border-radius: 40rpx; | |||
| overflow: hidden; | |||
| padding: 20rpx; | |||
| font-size: 28rpx; | |||
| background-color: #fff; | |||
| } | |||
| } | |||
| .name_phone { | |||
| .title { | |||
| } | |||
| .items { | |||
| margin-top: 20rpx; | |||
| .item { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #FFF; | |||
| height: 80rpx; | |||
| padding: 10rpx 0 0 20rpx; | |||
| border-bottom: 1px solid #efefef; | |||
| > 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: #FFF; | |||
| font-size: 28rpx; | |||
| padding: 16rpx 8rpx 16rpx 15rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .btns { | |||
| width: 100%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| gap: 20rpx; | |||
| .btn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 500rpx; | |||
| height: 70rpx; | |||
| border-radius: 40rpx; | |||
| color: #FFF; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 10rpx 0 0; | |||
| background: $uni-color; | |||
| //margin-top: 20rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| value: "", | |||
| fileList: [] | |||
| } | |||
| }, | |||
| onLoad(args) { | |||
| }, | |||
| methods: { | |||
| 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 scoped lang="scss"> | |||
| .help { | |||
| .help-box { | |||
| width: 92%; | |||
| margin-left: 4%; | |||
| .help-issue { | |||
| margin: 20rpx; | |||
| font-size: 28rpx; | |||
| font-weight: 600; | |||
| color: #333333; | |||
| } | |||
| .help-screenshot { | |||
| display: flex; | |||
| align-items: center; | |||
| background-color: #fff; | |||
| padding: 20rpx; | |||
| } | |||
| .help-button { | |||
| display: flex; | |||
| justify-content: center; | |||
| font-size: 24rpx; | |||
| flex-shrink: 0; | |||
| margin-top: 60rpx; | |||
| view { | |||
| padding: 14rpx 120rpx; | |||
| border-radius: 38rpx; | |||
| } | |||
| view:nth-child(1) { | |||
| background: $uni-color; | |||
| color: #fff; | |||
| } | |||
| view:nth-child(2) { | |||
| color: #FFFDF6; | |||
| background-color: #C83741; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 2
- 2
pages_order/components/address/addressList.vue
View File
+ 3
- 3
pages_order/components/address/redactAddress.vue
View File
+ 1
- 1
pages_order/components/product/submit.vue
View File
+ 1
- 1
pages_order/components/product/submitUnitSelect.vue
View File
+ 4
- 4
pages_order/mine/address.vue
View File
+ 61
- 18
pages_order/mine/help.vue
View File
+ 12
- 10
pages_order/mine/individualTeam.vue
View File
+ 266
- 0
pages_order/mine/promotion.vue
View File
| @ -0,0 +1,266 @@ | |||
| <template> | |||
| <view class="promotion"> | |||
| <navbar title="二维码" | |||
| bgColor="rgb(235, 51, 0)" | |||
| color="#fff" | |||
| leftClick @leftClick="$utils.navigateBack" /> | |||
| <image | |||
| class="image" | |||
| :src="promotionUrl" mode="aspectFill"></image> | |||
| <!-- <canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> --> | |||
| <view class="btn" | |||
| v-if="promotionUrl" | |||
| @click="preservationImg(promotionUrl)"> | |||
| 保存到相册 | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| name: 'Promotion', | |||
| computed: { | |||
| ...mapState(['userInfo', 'promotionUrl']), | |||
| }, | |||
| data() { | |||
| return { | |||
| url: '', | |||
| title: '', | |||
| baseUrl: 'https://image.hhlm1688.com/', | |||
| canvas: {}, | |||
| imagePath : '', | |||
| // imagePath: 'https://image.hhlm1688.com/2025-03-06/32fbb8e2-160b-4cbf-9a49-a72de231de20.png', | |||
| // imagePath: 'https://image.hhlm1688.com/2025-02-27/2fe7e417-54ad-4911-b9ba-84ac7d48e66d.png', | |||
| // imagePath: 'https://image.hhlm1688.com/2025-02-26/6539d2fa-558d-47db-9681-ecffec5b6c5d.png', | |||
| index : 0, | |||
| } | |||
| }, | |||
| onShow() { | |||
| let that = this; | |||
| // that.draw() | |||
| if(!that.promotionUrl){ | |||
| // that.getQrCode() | |||
| this.getImageInfo() | |||
| } | |||
| // that.$store.commit('getUserInfo') | |||
| }, | |||
| methods: { | |||
| getImageInfo(){ | |||
| let that = this; | |||
| uni.showLoading({ | |||
| title: "拼命绘画中..." | |||
| }) | |||
| uni.getImageInfo({ | |||
| src: `${this.$config.baseUrl}/info/createQrCode?token=${uni.getStorageSync('token')}`, | |||
| success : res => { | |||
| uni.hideLoading() | |||
| that.$store.commit('setPromotionUrl', res.path) | |||
| }, | |||
| fail : err => { | |||
| uni.showToast({ | |||
| icon: 'none', | |||
| title: '绘画失败', | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| getQrCode() { | |||
| uni.showLoading({ | |||
| title: "拼命绘画中..." | |||
| }) | |||
| let that = this; | |||
| that.$api('getInviteCode', res => { | |||
| if (res.code == 200) { | |||
| that.url = res.result.url | |||
| that.title = res.result.name | |||
| that.imagePath = that.$config.aliOss.url + res.result.url | |||
| that.$store.commit('setPromotionUrl', that.imagePath) | |||
| // that.draw() | |||
| uni.hideLoading() | |||
| } | |||
| }) | |||
| }, | |||
| draw() { | |||
| uni.showLoading({ | |||
| title: "拼命绘画中..." | |||
| }) | |||
| let that = this; | |||
| wx.createSelectorQuery() | |||
| .select('#myCanvas') // 绘制的canvas的id | |||
| .fields({ | |||
| node: true, | |||
| size: true | |||
| }) | |||
| .exec((res) => { | |||
| console.log("----------1") | |||
| const canvas = res[0].node | |||
| // 渲染上下文 | |||
| const ctx = canvas.getContext('2d') | |||
| // Canvas 画布的实际绘制宽高 | |||
| const width = res[0].width | |||
| const height = res[0].height | |||
| console.log(width, height); | |||
| // 初始化画布大小 | |||
| const dpr = wx.getWindowInfo().pixelRatio | |||
| //根据dpr调整 | |||
| // dpr 2 4 | |||
| // 3 6 | |||
| let Ratio = dpr * 2 | |||
| canvas.width = width * dpr | |||
| canvas.height = height * dpr | |||
| that.canvas = canvas | |||
| ctx.scale(dpr, dpr) | |||
| ctx.clearRect(0, 0, width, height) | |||
| // ctx.fillStyle = '#fff' | |||
| // ctx.fillRect(0, 0, canvas.width, canvas.height) | |||
| //图片 | |||
| const bgImage = canvas.createImage() | |||
| bgImage.src = that.configList.qr_code | |||
| //二维码图片 | |||
| const coderImage = canvas.createImage() | |||
| coderImage.src = '../static/logo.png' | |||
| // coderImage.src = that.baseUrl + that.url | |||
| let size = 0; | |||
| console.log("----------2") | |||
| bgImage.onload = () => { | |||
| canvas.width = bgImage.width | |||
| canvas.height = bgImage.height | |||
| ctx.drawImage(bgImage, | |||
| 0, 0, bgImage.width, bgImage.height) | |||
| size = Math.floor(canvas.width / 3) | |||
| ctx.drawImage(coderImage, | |||
| canvas.width / 2 - (size / 2), canvas.height * 0.46, size, size) | |||
| that.canvasToTempFilePath() | |||
| } | |||
| console.log("----------3") | |||
| coderImage.onload = () => { | |||
| ctx.drawImage(coderImage, | |||
| canvas.width / 2 - (size / 2), canvas.height * 0.46, size, size) | |||
| that.canvasToTempFilePath() | |||
| } | |||
| }) | |||
| }, | |||
| canvasToTempFilePath(){ | |||
| let that = this; | |||
| that.index++ | |||
| if(that.index < 2){ | |||
| return | |||
| } | |||
| // 绘制完成后存储路径 | |||
| setTimeout(() => { | |||
| wx.canvasToTempFilePath({ | |||
| x: 0, | |||
| y: 0, | |||
| width: that.canvas.width, | |||
| height: that.canvas.height, | |||
| canvas : that.canvas, | |||
| success: (res) => { | |||
| var tempFilePath = res.tempFilePath; | |||
| that.imagePath = tempFilePath | |||
| that.$store.commit('setPromotionUrl', res.tempFilePath) | |||
| uni.hideLoading() | |||
| that.load = false | |||
| } | |||
| }); | |||
| }, 200); | |||
| }, | |||
| back() { | |||
| uni.navigateBack(-1) | |||
| }, | |||
| async preservationImg(img) { | |||
| await this.$authorize('scope.writePhotosAlbum') | |||
| this.imgApi(img); | |||
| }, | |||
| imgApi(image) { | |||
| /* 获取图片的信息 */ | |||
| uni.getImageInfo({ | |||
| src: image, | |||
| success: function(image) { | |||
| /* 保存图片到手机相册 */ | |||
| uni.saveImageToPhotosAlbum({ | |||
| filePath: image.path, | |||
| success: function() { | |||
| uni.showModal({ | |||
| title: '保存成功', | |||
| content: '图片已成功保存到相册', | |||
| showCancel: false | |||
| }); | |||
| }, | |||
| complete(res) { | |||
| console.log(res); | |||
| } | |||
| }); | |||
| } | |||
| }); | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .promotion { | |||
| width: 100%; | |||
| height: 100vh; | |||
| background-color: $uni-color; | |||
| } | |||
| .image{ | |||
| width: 100%; | |||
| height: calc(100vh - 320rpx); | |||
| } | |||
| #myCanvas { | |||
| position: fixed; | |||
| left: 100%; | |||
| /* visibility: hidden */ | |||
| /* visibility: hidden; */ | |||
| /* margin-top: 100rpx; */ | |||
| width: 750rpx; | |||
| height: calc(100vh - 120rpx); | |||
| /* line-height: 20px; */ | |||
| background-color: rgba(255, 255, 255, 1); | |||
| text-align: center; | |||
| } | |||
| .btn{ | |||
| position: fixed; | |||
| // top: 58vh; | |||
| bottom: 0; | |||
| margin: 0; | |||
| width: 750rpx; | |||
| height: 100rpx; | |||
| padding: 0; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| background-color: #fff; | |||
| color: $uni-color; | |||
| } | |||
| </style> | |||
+ 805
- 0
pages_order/order/createOrder.vue
View File
| @ -0,0 +1,805 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <!-- 导航栏 --> | |||
| <navbar :title="titleMap[type]" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" /> | |||
| <view class="bac"></view> | |||
| <view class="box"> | |||
| <!-- 送礼 --> | |||
| <view class="give-type" v-if="type == 'give'"> | |||
| <view class="tab-box"> | |||
| <view class="tab-item" :class="{'active': isGive === 1}" | |||
| @click="isGive = 1"> | |||
| <text>单人礼包</text> | |||
| <text class="desc">送给1位好友，可同时送多件礼品</text> | |||
| </view> | |||
| <view class="tab-item" :class="{'active': isGive === 2}" | |||
| @click="isGive = 2"> | |||
| <text>多人礼包</text> | |||
| <text class="desc">送给多位好友，每人1件礼品</text> | |||
| </view> | |||
| <view class="tab-item" :class="{'active': isGive === 3}" | |||
| @click="isGive = 3"> | |||
| <text>抽奖礼包</text> | |||
| <text class="desc">好友抽奖，中奖者获得礼品</text> | |||
| </view> | |||
| </view> | |||
| <!-- <view class="tips"> | |||
| <text>支付后分享给好友收礼</text> | |||
| <text class="guide" @click="$refs.popup.open('gift_guide')">指南</text> | |||
| </view> --> | |||
| </view> | |||
| <!-- 多人礼包人数 --> | |||
| <view class="cell-item" v-if="type == 'give' && isGive === 2"> | |||
| <view class="cell-item-left"> | |||
| <uv-icon name="gift" size="40" color="#E3441A"></uv-icon> | |||
| <view class="user-name">礼包份数</view> | |||
| </view> | |||
| <view class="cell-item-right"> | |||
| <view class="stepper"> | |||
| <text class="minus" :class="{disabled: multiNum <= multiMinNum}" | |||
| @click="multiNum > multiMinNum && multiNum--">-</text> | |||
| <text class="num">{{multiNum}}</text> | |||
| <text class="plus" :class="{disabled: multiNum >= multiMaxNum}" | |||
| @click="multiNum < multiMaxNum && multiNum++">+</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 抽奖礼包说明 --> | |||
| <view class="lucky-box" v-if="type == 'give' && isGive === 3"> | |||
| <view class="title">抽奖规则</view> | |||
| <view class="tips-list"> | |||
| <view class="tip-item">• 好友参与抽奖</view> | |||
| <view class="tip-item">• 系统随机抽取中奖者</view> | |||
| <view class="tip-item">• 中奖者填写地址领取礼品</view> | |||
| </view> | |||
| </view> | |||
| <!-- 商品详情 --> | |||
| <view class="product-item" v-for="item in payOrderProduct" :key="item.id"> | |||
| <view class="img-box"> | |||
| <image :src="item.image && item.image.split(',')[0]" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="server-info"> | |||
| <view class="server-title">{{ item.name }}</view> | |||
| <view class="texture"> | |||
| 材质：{{ item.material }} | |||
| </view> | |||
| <view class="stepper"> | |||
| <uv-number-box button-size="60" v-model="item.selectNum" | |||
| :max="item.num"></uv-number-box> | |||
| </view> | |||
| <view class="sales-volume"> | |||
| <view class="desc">已售出 {{ item.payNum }}单</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 地址 --> | |||
| <view @click="openAddress" class="cell-item"> | |||
| <view class="cell-item-left"> | |||
| <image src="@/pages_order/static/createOrder/address.png" mode="widthFix" class="cell-icon"></image> | |||
| <view class="user-name">{{ address.name }}</view> | |||
| <view class="user-address">{{ address.address }}</view> | |||
| </view> | |||
| <view class="cell-item-right"> | |||
| <uv-icon name="arrow-right"></uv-icon> | |||
| </view> | |||
| </view> | |||
| <!-- 备注 --> | |||
| <!-- <view class="cell-item"> | |||
| <view class="cell-item-left"> | |||
| <image src="@/pages_order/static/createOrder/coupon.png" mode="widthFix" class="cell-icon"></image> | |||
| <view class="user-name">备注</view> | |||
| </view> | |||
| <view class="cell-item-right remark-input"> | |||
| <uv-textarea v-model="remark" border="none" height="40rpx" placeholder="请输入订单备注信息" :count="false" :auto-height="false" /> | |||
| </view> | |||
| </view> --> | |||
| <view class="cell-list"> | |||
| <uv-radio-group v-model="payMethod"> | |||
| <view style="width: 710rpx;"> | |||
| <!-- 账户余额 --> | |||
| <view class="cell-item"> | |||
| <view class="cell-item-left"> | |||
| <image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon"> | |||
| </image> | |||
| <view class="user-name">账户余额</view> | |||
| <view class="descript">(余额: {{ riceInfo.balance }})</view> | |||
| </view> | |||
| <view class="cell-item-right"> | |||
| <uv-radio activeColor="#E3441A" | |||
| size="40rpx" | |||
| icon-size="30rpx" | |||
| :name="1"/> | |||
| </view> | |||
| </view> | |||
| <!-- 微信支付 --> | |||
| <view class="cell-item"> | |||
| <view class="cell-item-left"> | |||
| <image src="@/pages_order/static/createOrder/wx.png" mode="widthFix" class="cell-icon"> | |||
| </image> | |||
| <view class="user-name">微信支付</view> | |||
| <view class="descript"></view> | |||
| </view> | |||
| <view class="cell-item-right"> | |||
| <uv-radio | |||
| activeColor="#E3441A" | |||
| size="40rpx" | |||
| icon-size="30rpx" | |||
| :name="0"/> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-radio-group> | |||
| </view> | |||
| <!-- 优惠券 --> | |||
| <!-- <view @click="openCoupon" class="cell-item"> | |||
| <view class="cell-item-left"> | |||
| <image src="@/pages_order/static/createOrder/coupon.png" mode="widthFix" class="cell-icon"></image> | |||
| <view class="user-name">优惠券</view> | |||
| <view class="descript">(￥{{ coupon.money || 0}})</view> | |||
| </view> | |||
| <view class="cell-item-right"> | |||
| <radio color="#E3441A" :value="2" :checked="coupon.id" /> | |||
| </view> | |||
| </view> --> | |||
| <!-- 提示 --> | |||
| <view class="hint" | |||
| v-if="payOrderProduct[0] && payOrderProduct[0].orderDetails"> | |||
| {{ payOrderProduct[0].orderDetails }} | |||
| </view> | |||
| <!-- 用户协议 --> | |||
| <view class="agreement"> | |||
| <radio color="#E3441A" @click="agreement = !agreement" :checked="agreement" /> | |||
| 本人已同意<text @click="$refs.popup.open('user_xy')">《用户使用协议》</text> | |||
| </view> | |||
| <!-- 下单 --> | |||
| <view class="submit"> | |||
| <view class="price"> | |||
| <view> | |||
| <text style="color: #000;">合计</text> | |||
| ￥<text style="font-size: 18px; | |||
| font-weight: 600;">{{ totalPrice }}</text>元 | |||
| </view> | |||
| </view> | |||
| <view class="btn" @click="submit"> | |||
| 立即支付 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 地址选择 --> | |||
| <uv-popup ref="addressPopup" :round="30" style="padding-bottom: 90rpx;"> | |||
| <addressList ref="addressList" height="60vh" @select="selectAddress" /> | |||
| <view class="add-btn"> | |||
| <view @click="$utils.navigateTo('/pages_order/mine/address')" class="button-submit">新增地址</view> | |||
| </view> | |||
| </uv-popup> | |||
| <!-- 优惠券选择--> | |||
| <!-- <uv-popup ref="couponPopup" :round="30"> | |||
| <couponList ref="couponList" height="60vh" @select="selectCoupon" /> | |||
| </uv-popup> --> | |||
| <configPopup ref="popup"></configPopup> | |||
| <!-- <kefu></kefu> --> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import addressList from '../components/address/addressList.vue' | |||
| // import couponList from '@/components/couponList/couponList.vue' | |||
| import { | |||
| mapState | |||
| } from 'vuex' | |||
| export default { | |||
| components: { | |||
| addressList, | |||
| // couponList | |||
| }, | |||
| data() { | |||
| return { | |||
| address: { | |||
| name: '请选择地址', | |||
| address: '', | |||
| }, | |||
| addressTotal: 0, | |||
| remark: '', | |||
| num: 1, | |||
| agreement: false, | |||
| coupon: {}, | |||
| payMethod : 0, | |||
| isGive : 0, | |||
| type : '', | |||
| titleMap : { | |||
| def : '确认订单', | |||
| give : '送礼清单', | |||
| }, | |||
| multiNum: 2, // 多人礼包人数 | |||
| multiMinNum: 2, // 最小人数 | |||
| multiMaxNum: 100, // 最大人数 | |||
| } | |||
| }, | |||
| computed: { | |||
| totalPrice() { | |||
| let price = 0 | |||
| this.payOrderProduct.forEach(n => { | |||
| price += n.price * n.num | |||
| }) | |||
| if (this.coupon.id) { | |||
| price -= this.coupon.money | |||
| } | |||
| return Number(price).toFixed(2) | |||
| }, | |||
| ...mapState(['userInfo', 'payOrderProduct']), | |||
| }, | |||
| onLoad(args) { | |||
| this.type = args.type || 'def' | |||
| if(this.type == 'give'){ | |||
| this.isGive = 1 | |||
| } | |||
| this.$store.commit('getUserInfo') | |||
| }, | |||
| onShow() { | |||
| this.getAddressList() | |||
| // this.getCouponList() | |||
| }, | |||
| methods: { | |||
| // 打开 | |||
| getAddressList() { | |||
| // 获取地址列表 | |||
| this.$refs.addressList.getAddressList().then(res => { | |||
| this.addressTotal = res.total | |||
| if (this.addressTotal != 0) { | |||
| this.address = res.records[0] | |||
| } | |||
| }) | |||
| }, | |||
| //获取优惠券列表 | |||
| getCouponList() { | |||
| this.$refs.couponList.getCouponList() | |||
| }, | |||
| // 打开选择地址 | |||
| openAddress() { | |||
| if (this.addressTotal == 0) { | |||
| return uni.navigateTo({ | |||
| url: '/pages_order/mine/address?type=back' | |||
| }) | |||
| } | |||
| this.$refs.addressPopup.open('bottom') | |||
| }, | |||
| // 选择地址 | |||
| selectAddress(e) { | |||
| this.address = e | |||
| this.$refs.addressPopup.close() | |||
| }, | |||
| // 打开优惠券选择 | |||
| openCoupon() { | |||
| if (this.addressTotal == 0) { | |||
| return uni.navigateTo({ | |||
| url: '/pages_order/mine/address?type=back' | |||
| }) | |||
| } | |||
| this.$refs.couponPopup.open('bottom') | |||
| }, | |||
| // 选择优惠券 | |||
| selectCoupon(e) { | |||
| //判断优惠券限制 | |||
| let { | |||
| useMoney | |||
| } = e | |||
| let productTotalPrice = 0 | |||
| this.payOrderProduct.forEach(item => { | |||
| productTotalPrice += item.price | |||
| }) | |||
| if (productTotalPrice < useMoney) { | |||
| return uni.showToast({ | |||
| title: `此优惠券需要满${useMoney}使用`, | |||
| icon: "none" | |||
| }) | |||
| } | |||
| this.coupon = e | |||
| this.$refs.couponPopup.close() | |||
| }, | |||
| submit() { | |||
| let addressId = this.address.id | |||
| if (!addressId) { | |||
| uni.showToast({ | |||
| title: '请选择地址', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| if (!this.agreement) { | |||
| uni.showToast({ | |||
| title: '请先同意使用协议', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| let data = {} | |||
| let api = '' | |||
| // if(this.type != 'give'){ | |||
| // let list = [] | |||
| // this.payOrderProduct.forEach(n => { | |||
| // list.push({ | |||
| // num: n.selectNum || 1, | |||
| // shopId: n.shopId || n.id, | |||
| // }) | |||
| // }) | |||
| // data = { | |||
| // addressId, | |||
| // payType : this.payMethod, | |||
| // list: JSON.stringify(list), | |||
| // remark: this.remark || '', // 添加备注字段 | |||
| // } | |||
| // api = 'createOrder' | |||
| // this.deleteCart(this.payOrderProduct.map(n => n.id).join(',')) | |||
| // } else { | |||
| data = { | |||
| addressId, | |||
| num: this.payOrderProduct[0].selectNum || 1, | |||
| productId: this.payOrderProduct[0].id, | |||
| payType : this.payMethod, | |||
| // isGive : this.isGive, | |||
| // memberNum : 1, | |||
| // remark: this.remark || '', // 添加备注字段 | |||
| } | |||
| api = 'createOrder' | |||
| // } | |||
| if(this.coupon.id){ | |||
| data.couponId = this.coupon.id | |||
| } | |||
| // if(this.isGive == 2){ | |||
| // data.memberNum = this.multiNum | |||
| // } | |||
| this.$api(api, data, res => { | |||
| if (res.code == 200) { | |||
| if(this.payMethod == 1){ | |||
| // uni.showToast({ | |||
| // title: '下单成功', | |||
| // icon: 'none' | |||
| // }) | |||
| this.paySuccess(res) | |||
| return | |||
| } | |||
| uni.requestPaymentWxPay(res) | |||
| .then(e => { | |||
| uni.showToast({ | |||
| title: '下单成功', | |||
| icon: 'none' | |||
| }) | |||
| this.paySuccess(res) | |||
| }).catch(n => { | |||
| setTimeout(uni.redirectTo, 700, { | |||
| url: '/pages/index/order' | |||
| }) | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| paySuccess(res){ | |||
| if(this.type == 'def'){ | |||
| setTimeout(uni.redirectTo, 700, { | |||
| url: '/pages/index/order' | |||
| }) | |||
| }else{ | |||
| setTimeout(uni.redirectTo, 700, { | |||
| url: `/pages_order/order/instantGift?id=${res.message}` | |||
| }) | |||
| } | |||
| }, | |||
| // 删除购物车 | |||
| deleteCart(ids) { | |||
| this.$api('deleteCart', { | |||
| ids | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| overflow: auto; | |||
| padding-bottom: 300rpx; | |||
| .bac { | |||
| width: 100%; | |||
| height: 100px; | |||
| background: $uni-color; | |||
| } | |||
| .give-type { | |||
| background: #fff; | |||
| border-radius: 20rpx; | |||
| padding: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| .tab-box { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .tab-item { | |||
| width: 30%; | |||
| background: #F8F8F8; | |||
| border-radius: 20rpx; | |||
| padding: 20rpx; | |||
| text-align: center; | |||
| text { | |||
| display: block; | |||
| &.desc { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-top: 10rpx; | |||
| } | |||
| } | |||
| &.active { | |||
| background: rgba($uni-color, 0.1); | |||
| color: $uni-color; | |||
| .desc { | |||
| color: $uni-color; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .tips { | |||
| margin-top: 20rpx; | |||
| font-size: 26rpx; | |||
| color: #999; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| .guide { | |||
| color: $uni-color; | |||
| text-decoration: underline; | |||
| } | |||
| } | |||
| } | |||
| .box { | |||
| padding: 20rpx; | |||
| margin-top: -150rpx; | |||
| // 商品详情 | |||
| .product-item { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| background: white; | |||
| border-radius: 15rpx; | |||
| box-sizing: border-box; | |||
| padding: 25rpx; | |||
| margin: 20rpx 0rpx; | |||
| .img-box { | |||
| width: 200rpx; | |||
| height: 200rpx; | |||
| background: #ccc; | |||
| border-radius: 10rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .server-info { | |||
| width: calc(100% - 200rpx); | |||
| box-sizing: border-box; | |||
| padding: 10rpx 20rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-around; | |||
| .server-title { | |||
| font-size: 34rpx; | |||
| } | |||
| .texture { | |||
| color: #B8B8B8; | |||
| margin: 10rpx 0rpx; | |||
| } | |||
| .stepper { | |||
| margin-bottom: 10rpx; | |||
| &::v-deep .uv-number-box__input { | |||
| color: $uni-color !important; | |||
| width: 100rpx !important; | |||
| } | |||
| } | |||
| .sales-volume { | |||
| display: flex; | |||
| align-items: center; | |||
| color: #B8B8B8; | |||
| font-size: 26rpx; | |||
| image { | |||
| width: 25rpx; | |||
| height: 25rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| //cell单元格(地址) | |||
| .cell-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| background: white; | |||
| border-radius: 20rpx; | |||
| padding: 20rpx; | |||
| box-sizing: border-box; | |||
| .cell-item-left { | |||
| display: flex; | |||
| align-items: center; | |||
| width: 90%; | |||
| .cell-icon { | |||
| width: 40rpx; | |||
| } | |||
| .user-name, | |||
| .user-address { | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| width: 150rpx; | |||
| padding-left: 20rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .descript { | |||
| color: #888888; | |||
| } | |||
| .user-address { | |||
| width: calc(100% - 230rpx); | |||
| } | |||
| } | |||
| .cell-item-right { | |||
| width: 10%; | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| &.remark-input { | |||
| width: 70%; | |||
| justify-content: flex-start; | |||
| &::v-deep .uv-textarea { | |||
| width: 100%; | |||
| padding: 0; | |||
| background-color: transparent; | |||
| } | |||
| &::v-deep .uv-textarea__field { | |||
| padding: 0; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| .stepper { | |||
| display: flex; | |||
| align-items: center; | |||
| text { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 44rpx; | |||
| height: 44rpx; | |||
| &.minus, &.plus { | |||
| background: #F8F8F8; | |||
| border-radius: 50%; | |||
| font-size: 32rpx; | |||
| &.disabled { | |||
| color: #ccc; | |||
| } | |||
| } | |||
| &.num { | |||
| margin: 0 20rpx; | |||
| color: $uni-color; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .cell-list { | |||
| margin: 20rpx 0rpx; | |||
| border-radius: 20rpx; | |||
| overflow: hidden; | |||
| .cell-item { | |||
| border-radius: 0rpx; | |||
| } | |||
| } | |||
| // 提示 | |||
| .hint { | |||
| font-size: 26rpx; | |||
| margin-top: 80rpx; | |||
| color: #BFBFBF; | |||
| } | |||
| // 用户协议 | |||
| .agreement { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| padding: 10px 0; | |||
| .van-checkbox { | |||
| margin-right: 5rpx; | |||
| } | |||
| text { | |||
| color: $uni-color; | |||
| } | |||
| } | |||
| // 下单 | |||
| .submit { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 60px; | |||
| background-color: #fff; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .price { | |||
| color: #F39637; | |||
| padding: 0 20px; | |||
| } | |||
| .btn { | |||
| background: $uni-color; | |||
| color: white; | |||
| width: 120px; | |||
| height: 45px; | |||
| border-radius: 23px; | |||
| font-size: 16px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| //新增地址按钮 | |||
| .add-btn { | |||
| width: 100%; | |||
| .button-submit { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 596rpx; | |||
| height: 90rpx; | |||
| background: #E3441A; | |||
| border-radius: 46rpx; | |||
| margin: 20rpx auto; | |||
| font-size: 28rpx; | |||
| font-family: PingFang SC, PingFang SC-Regular; | |||
| font-weight: 400; | |||
| text-align: center; | |||
| color: #ffffff; | |||
| } | |||
| } | |||
| .multi-box, .lucky-box { | |||
| background: #fff; | |||
| border-radius: 20rpx; | |||
| padding: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| .title { | |||
| font-size: 28rpx; | |||
| font-weight: 500; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| } | |||
| .multi-box { | |||
| .stepper { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| text { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| &.minus, &.plus { | |||
| background: #F8F8F8; | |||
| border-radius: 50%; | |||
| font-size: 36rpx; | |||
| &.disabled { | |||
| color: #ccc; | |||
| } | |||
| } | |||
| &.num { | |||
| margin: 0 40rpx; | |||
| color: $uni-color; | |||
| font-size: 32rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .lucky-box { | |||
| .tips-list { | |||
| .tip-item { | |||
| font-size: 26rpx; | |||
| color: #666; | |||
| line-height: 2; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 16
- 46
pages_order/order/pictureOrder.vue
View File
+ 0
- 362
pages_order/order/refundsOrExchange.vue
View File
| @ -1,362 +0,0 @@ | |||
| <template> | |||
| <view class="refundsOrExchange"> | |||
| <navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/> | |||
| <view class="frame"> | |||
| <!-- 商品简介 --> | |||
| <view class="itme1" @click="openSpPopup"> | |||
| <view class="left"> | |||
| <img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||
| </view> | |||
| <view class="center"> | |||
| <view>{{ commodity.title }}</view> | |||
| <view>{{ commodity.smallTitle }}</view> | |||
| </view> | |||
| <view class="right">×{{ commodity.total }}</view> | |||
| </view> | |||
| <!--<commoditySelect ></commoditySelect>--> | |||
| <!-- 申请类型&申请原因 --> | |||
| <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> | |||
| <!-- 底部按钮 --> | |||
| <!--商品选择--> | |||
| <uv-popup ref="spPopup" :round="30"> | |||
| <commoditySelect | |||
| :commodityList="commodityList" | |||
| @selectSp="selectCommodity" | |||
| /> | |||
| </uv-popup> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import commoditySelect from "../components/commodity/commoditySelect.vue" | |||
| export default { | |||
| onLoad(option) { | |||
| this.titleIndex = option.index | |||
| }, | |||
| components: { | |||
| commoditySelect | |||
| }, | |||
| data() { | |||
| return { | |||
| titleIndex: 0, | |||
| title: ['申请换货', '申请退货'], | |||
| fileList: [], | |||
| bottomBtnStyle: { | |||
| color: '#FFF', | |||
| backgroundColor: '#fd5100', | |||
| fontSize: '34rpx', | |||
| text: '提交申请', | |||
| width: '400rpx', | |||
| height: '80rpx', | |||
| borderRadius: '100rpx', | |||
| bottom: '40rpx' | |||
| }, | |||
| commodityList: [ | |||
| { | |||
| title: '商品名称', | |||
| smallTitle: '产品规格：120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| { | |||
| title: '商品名称1', | |||
| smallTitle: '产品规格：120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| { | |||
| title: '商品名称2', | |||
| smallTitle: '产品规格：120*4*75【桌子尺寸】', | |||
| total:1, | |||
| } | |||
| ], | |||
| commodity: { | |||
| title: '商品名称', | |||
| smallTitle: '产品规格：120*4*75【桌子尺寸】', | |||
| total:1, | |||
| }, | |||
| } | |||
| }, | |||
| mounted() { | |||
| }, | |||
| methods: { | |||
| openSpPopup() { | |||
| this.$refs.spPopup.open('bottom'); | |||
| }, | |||
| // 选择退换货商品回调 | |||
| selectCommodity(e) { | |||
| console.log(e, "selectCommodity--e") | |||
| this.commodity = e | |||
| this.$refs.spPopup.close() | |||
| }, | |||
| 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="scss" 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> | |||
+ 17
- 47
pages_order/order/voiceOrder.vue
View File
+ 34
- 9
pages_order/product/productDetail.vue
View File
BIN
pages_order/static/createOrder/account.png
View File
| Before | After |
|---|---|
|
|
| Width: 48 | Height: 39 | Size: 839 B |
BIN
pages_order/static/createOrder/address.png
View File
| Before | After |
|---|---|
|
|
| Width: 44 | Height: 46 | Size: 1.6 KiB |
BIN
pages_order/static/createOrder/coupon.png
View File
| Before | After |
|---|---|
|
|
| Width: 60 | Height: 60 | Size: 1.5 KiB |
BIN
pages_order/static/createOrder/wx.png
View File
| Before | After |
|---|---|
|
|
| Width: 58 | Height: 48 | Size: 2.2 KiB |