- 新增订单创建、支付、快捷下单等功能 - 优化商品详情页展示,支持商品信息动态加载 - 调整用户中心界面,新增佣金和余额展示 - 修复地址管理模块的字段命名问题 - 更新API接口路径,适配新后端服务 - 删除冗余页面和代码,提升代码可维护性master
| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||