From f8e8ad7f92b351154ebfbda6380a3254ac76a3ae Mon Sep 17 00:00:00 2001 From: xuxueyang <xuxy@fengyuntec.com> Date: 星期五, 26 七月 2024 17:04:09 +0800 Subject: [PATCH] update --- sub_pages/customer/shopping/confirm.vue | 316 +++++++++++++++++++++++++++++++++------------------- 1 files changed, 202 insertions(+), 114 deletions(-) diff --git a/sub_pages/customer/shopping/confirm.vue b/sub_pages/customer/shopping/confirm.vue index aee9080..3d7bfed 100644 --- a/sub_pages/customer/shopping/confirm.vue +++ b/sub_pages/customer/shopping/confirm.vue @@ -13,34 +13,14 @@ }), }, - watch: { - // address(nv, ov) { - // if (nv && nv.id) { - // //尝试更新一下 - // - // } - // } - }, async onShow() { - setTimeout(async () => { - if (this.address && this.address.id && this.cacheAddressId !== this.address.id) { - this.$message.showLoading() - const {code, data} = await this.$http.request('get', '/api/flower/customer/order/confirm/transports', { - data: { - addressId: this.address.id, - weight: this.dto.totalWeight || 0 - } - }) - this.$message.hideLoading() - this.transportList = [] - if (code === 0) { - this.transportList = data || [] - } - } - }, 200) + }, onLoad(options) { - let item = JSON.parse(decodeURIComponent(options.query.dto)); + // console.log('dto',options) + + // let item = JSON.parse(decodeURIComponent(options.query.dto)); + let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {} this.dto = { ...this.dto, ...item @@ -61,64 +41,108 @@ addressId: '', flowers: [], }, + current_transport: {}, cacheAddressId: '', transportList: [], } }, - methods: { - async submitOrder() { - if (!this.dto.transportId) { - this.$message.toast('请选择配送方式') - return - } - if (!this.dto.addressId) { - this.$message.toast('请选择收货地址') - return - } - this.$message.showLoading() - const {code, data} = await this.$http.request('post', '/api/customer/flower/order/confirm', { - data: { - ...this.dto - } - }) - this.$message.hideLoading() - if (code === 0) { - //提交信息 - console.log('pay,', data) - if (data && data['_testOrderId']) { - //回调 - this.$message.showLoading() - const {code, data} = await this.$http.request('get', '/api/customer/flower/order/callback/tmp', { - params: { - id: data['_testOrderId'] - } - }) - this.$message.hideLoading() - } else if (data) { - //微信接口 - let that = this - wx.requestPayment({ - ...data, - async success(res) { - console.log('pay success', res) - this.$message.showToast('支付成功') - //返回上一页 - await this.$store.dispatch('sign_add', 'shopping') - uni.navigateBack() - // uni.navigateTo({ - // url: '/pages/canteen/canteen-success/canteen-success' - // }) - }, - fail(err) { - console.error('pay fail', err) - that.$message.showToast('支付失败') - } - }) + watch: { + address(nv, ov) { + if (nv && nv.id !== this.cacheAddressId) { + this.loadTransportList() + this.cacheAddressId = nv.id + } + } + }, + methods: { + async loadTransportList() { + let that = this + { + console.log('address', that.address, that.cacheAddressId) + if (that.address && that.address.id && that.cacheAddressId !== that.address.id) { + that.$message.showLoading() + const {code, data} = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', { + data: { + addressId: that.address.id, + weight: that.dto.totalWeight || 0 + } + }) + that.$message.hideLoading() + that.transportList = [] + if (code === 0) { + that.transportList = data || [] + } } } + }, + async submitOrder() { + console.log('submitOrder', this.dto) + if (!this.dto.transportId) { + this.$message.showToast('请选择配送方式') + return + } + if (!this.address.id) { + this.$message.showToast('请选择收货地址') + return + } + this.dto.addressId = this.address.id + + let tmp = this + wx.login({ + success: async res => { + console.log(res) + if (res.code) { + tmp.$message.showLoading() + const {code, data} = await tmp.$http.request('post', '/api/customer/flower/order/commit', { + data: { + ...tmp.dto, + wxcode: res.code + } + }) + tmp.$message.hideLoading() + if (code === 0) { + //提交信息 + console.log('pay,', data) + if (data && data['_testOrderId']) { + //回调 + tmp.$message.showLoading() + const res2 = await tmp.$http.request('get', '/api/customer/flower/order/callback/tmp', { + params: { + id: res2.data['_testOrderId'] + } + }) + tmp.$message.hideLoading() + } else if (data) { + wx.requestPayment({ + ...data, + async success(res) { + console.log('pay success', res) + tmp.$message.showToast('支付成功') + //返回上一页 + await tmp.$store.dispatch('sign_add', 'shopping') + uni.navigateBack() + }, + fail(err) { + console.error('pay fail', err) + tmp.$message.showToast('支付失败') + } + }) + + } + } + + } else { + tmp.$message.showToast('获取微信信息失败'); + } + }, + error: res => { + tmp.$message.showToast('获取微信信息失败:' + res); + } + }); + } } @@ -127,18 +151,18 @@ <template> <view class="page-confirm"> - <view class="p10"> + <view class="p10 bg-white br-4"> <common-address-select ref="addressselect"></common-address-select> </view> <view> - <view class="flower-container"> - <view class="shopping-item m-t-20" v-for="(item,index) of dto.flowers" :key="index"> + <view class="flower-container m-t-12 br-4 p10"> + <view class="shopping-item m-b-20" v-for="(item,index) of dto.flowers" :key="index"> <u-divider v-if="index>0"></u-divider> - <view class="sup-title"> - <image class="icon-dp" src="/static/common/icon-dp.png"></image> - {{ item.supplierName || '-' }} + <view class="sup-title flex"> + <image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image> + <view>{{ item.supplierName || '-' }}</view> </view> - <view class="item-each flex"> + <view class="item-each m-t-12 flex"> <image class="img img100 m-r-6" :src="item.url||item.cover"></image> <view> <view class="title"><span>{{ item.levelStr || '-' }}</span> {{ item.name || '-' }}</view> @@ -152,25 +176,25 @@ </view> </view> <view class="price"> - <view class="desc">打包费用:{{ dto.packing || 0 }}}</view> - <view class="m-l-a m-r-0"> + <view class="m-l-a m-r-0 text-right"> 共{{ dto.flowers.length }}件,小计<span class="t-red">¥{{ dto.totalAmount || 0 }}</span> </view> </view> </view> <!-- 查看商品列表,和选择运费 --> - <view class="transform-container p10"> - <view class="title flex"> + <view class="br-4 transform-container m-t-12 p10"> + <view class="title"> <view>运输方式:</view> - <!-- <view>约</view>--> <view class="flex transform-list"> <view v-for="(transform,index) of transportList" :class="[transform.id===dto.transportId?'cur':'']" - :key="index" class="transform-item" @click="dto.transportId = transform.id"> + :key="index" class="transform-item" @click="()=>{ + dto.transportId = transform.id; + current_transport = transform + }"> <view class="title">{{ transform.name }}</view> <view class="price">¥{{ transform.fee }}</view> </view> </view> - </view> <view class="m-t-20" v-if="false"> <view class="desc-red"> @@ -184,29 +208,58 @@ </view> </view> - <view class="form-item p10"> - <view class="label">特殊需求</view> - <view class="m-l-a m-r-0 flex text-right"> - <u-textarea v-model="dto.remarks" placeholder="请输入特殊需求"> + <view class="p10 bg-white m-t-20 br-4"> + <view class="form-item "> + <view class="label">特殊需求</view> + <view class="m-l-a m-r-0 flex1"> + <view class="m-t-12 m-b-12"> + <u-textarea v-model="dto.specialNeeds" placeholder="请输入特殊需求"> - </u-textarea> + </u-textarea> + </view> + </view> </view> - </view> - <view class="form-item p10"> - <view class="label">留言</view> - <view class="m-l-a m-r-0 flex text-right"> - <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认"> + <view class="form-item m-t-12 "> + <view class="label">留言</view> + <view class="m-l-a m-r-0 flex1"> + <view class="m-t-12 m-b-12"> + <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认"> - </u-textarea> + </u-textarea> + </view> + </view> </view> </view> </view> - <view class="bottom-price flex"> - <view> - 合计:¥ {{ dto.totalAmount || 0 }} 元 + <view class="m-t-20 br-4 info-container p10 bg-white"> + <view class="desc flex"> + <view>商品金额:</view> + <view class="m-l-a m-r-0 text-right"> + {{ (dto.totalAmount || 0) - (dto.packing) || 0 }} + </view> </view> - <view class="button-green-1" @click="submitOrder"> + <view class="desc flex"> + <view>打包费:</view> + <view class="m-l-a m-r-0 text-right"> + {{ (dto.packing || 0) }} + </view> + </view> + <view class="desc flex"> + <view>运费:</view> + <view class="m-l-a m-r-0 text-right"> + {{ (current_transport.fee || 0) }} + </view> + </view> + </view> + + <view style="min-height:200rpx"> + </view> + <view class="bottom-price flex"> + <view class="m-t-12 m-l-0 m-r-a"> + 合计:<span class="t-red">¥ {{ (dto.totalAmount || 0) + (current_transport.fee || 0) || 0 }} </span>元 + </view> + <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder"> 提交订单 </view> </view> @@ -215,17 +268,37 @@ <style scoped lang="scss"> .page-confirm { + padding: 20rpx 30rpx; + + .bottom-price { + position: fixed; + background-color: #ffffff; + left: 0rpx; + padding: 20rpx; + right: 0rpx; + bottom: 0rpx; + } + .flower-container { + background-color: #ffffff; + .shopping-item { padding: 28rpx 22rpx; position: relative; .sup-title { border-bottom: 2rpx solid #EEEEEE; + line-height: 50rpx; + + .icon-dp { + width: 36rpx; + height: 36rpx; + margin-top: 7rpx; + } } .item-each { - padding-left: 88rpx; + padding-left: 20rpx; .img { width: 124rpx; @@ -256,27 +329,49 @@ font-size: 24rpx; color: #666666; line-height: 34rpx; + } } .button-icons { position: absolute; + line-height: 40rpx; + } } } + .info-container { + .desc { + font-weight: 400; + font-size: 28rpx; + color: #666666; + line-height: 40rpx; + + .value { + text-align: right; + } + } + } + .transform-container { + background-color: #ffffff; + .transform-list { .transform-item { background: rgba(225, 240, 231, 0.38); border-radius: 8rpx; - min-height: 112rpx; + //min-height: 112rpx; border: 2rpx solid rgba(225, 240, 231, 0.38); padding: 14rpx; text-align: center; - margin: 0 auto; + //margin: 0 auto; + margin-left: 20rpx; + margin-top: 10rpx; + margin-right: auto; max-width: 32%; + min-width: 120rpx; .title { font-weight: 400; @@ -289,7 +384,7 @@ font-weight: 600; font-size: 32rpx; color: #20613D; - line-height: 44rpx; + //line-height: 44rpx; } } @@ -310,12 +405,5 @@ } - .bottom-price { - position: fixed; - left: 0rpx; - padding: 20rpx; - right: 0rpx; - bottom: 160rpx; - } } </style> \ No newline at end of file -- Gitblit v1.9.3