From c9ece393fc028ffecca0915d1b9af62d51b5aef6 Mon Sep 17 00:00:00 2001 From: xuxueyang <xuxy@fengyuntec.com> Date: 星期二, 13 八月 2024 17:21:19 +0800 Subject: [PATCH] 1 --- sub_pages/customer/shopping/confirm.vue | 782 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 495 insertions(+), 287 deletions(-) diff --git a/sub_pages/customer/shopping/confirm.vue b/sub_pages/customer/shopping/confirm.vue index 86c51b8..bfd1426 100644 --- a/sub_pages/customer/shopping/confirm.vue +++ b/sub_pages/customer/shopping/confirm.vue @@ -1,325 +1,533 @@ <script> -import { - mapState -} from 'vuex' + import { + mapState + } from 'vuex' -export default { - name: "订单详情", - computed: { - ...mapState({ - address: state => { - return state.defaultaddress || {} - }, - }), + export default { + name: "订单详情", + computed: { + ...mapState({ + address: state => { + return state.defaultaddress || {} + }, + }), - }, - 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)); - this.dto = { - ...this.dto, - ...item - } - //先获取直接的全部地址 - // @ApiModelProperty(value = "订单商品") - // private List<FlowerCartListDTO> flowers; - // @ApiModelProperty(value = "打包费") - // private BigDecimal packing; + }, + async onShow() { - }, - data() { - return { - dto: { - remarks: '', - specialNeeds: '', - transportId: '', - addressId: '', - flowers: [], - }, - cacheAddressId: '', - transportList: [], + }, + onLoad(options) { + // 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 + } + this.$http.request('get', '/api/code/value', { + params: { + type: 'SPEC_REQ' + } + }).then(res => { + var data = res.data + this.need_columns = [data || []] + this.need_columns[0].unshift({ + label: '暂无', + value: '' + }) + }) + if (this.address.id) { + this.loadTransportList() + this.cacheAddressId = this.address.id + } + // + //先获取直接的全部地址 + // @ApiModelProperty(value = "订单商品") + // private List<FlowerCartListDTO> flowers; + // @ApiModelProperty(value = "打包费") + // private BigDecimal packing; + + // 两种情况,我合伙人是A,我进入页面前改成了B,我进去后还是获取了A——可以通过 + + if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) { + // 考虑一下,由后台实时获取,如果获取的合伙人id不一样,那么就刷新当前用户信息。 + + this.$http.request('get', '/api/current/customer/partner', { + params: { + // id: this.currentInfo.customerDTO.partnerId + } + }).then(async res => { + if (res.code == 0) { + this.partnerInfo = res.data || {} + if (this.partnerInfo.id !== this.currentInfo.customerDTO.partnerId) { + //刷新用户信息 + await dispatch('getCurrentInfo') + } + } + }) - } - }, - 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('支付失败') - } - }) + } - } - } + }, + data() { + return { + dto: { + remarks: '', + specialNeeds: '', + specialNeedsStr: '', + transportId: '', + addressId: '', + flowers: [], + }, + current_transport: {}, + cacheAddressId: '', + transportList: [], + show_select_need: false, + need_columns: [ + [] + ], + partnerInfo: {}, - } - } -} + } + }, + watch: { + address(nv, ov) { + if (nv && nv.id !== this.cacheAddressId) { + this.loadTransportList() + this.cacheAddressId = nv.id + + } else if (!nv.id) { + //说明id清空了 + if (!this.cacheAddressId) { + transportList = [] + this.cacheAddressId = '' + } + } + } + }, + methods: { + select_need(e) { + this.show_select_need = false + this.dto.specialNeedsStr = e.value[0].label + this.dto.specialNeeds = e.value[0].value + }, + async loadTransportList() { + if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) { + return + } + 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.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) { + + } else { + if (!this.dto.transportId) { + this.$message.showToast('请选择配送方式') + return + } + } + + if (!this.address.id) { + this.$message.showToast('请选择收货地址', { + duration: 2000 + }) + 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() + }, + async fail(err) { + console.error('pay fail', err) + tmp.$message.showToast('支付失败') + await tmp.$store.dispatch('sign_add', 'shopping') + uni.navigateBack() + } + }) + + } + } + + } else { + tmp.$message.showToast('获取微信信息失败'); + } + }, + error: res => { + tmp.$message.showToast('获取微信信息失败:' + res); + } + }); + + + } + } + } </script> <template> - <view class="page-confirm"> - <view class="p10"> - <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"> - <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> - <view class="item-each 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> - <view class="price"> - {{ item.price || 0 }}*{{ item.num }}扎 - </view> - <view class="desc m-t-12"> - <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view> - </view> - </view> - </view> - </view> - <view class="price"> - <view class="desc">打包费用:{{ dto.packing || 0 }}}</view> - <view class="m-l-a m-r-0"> - 共{{ dto.flowers.length }}件,小计<span class="t-red">¥{{ dto.totalAmount || 0 }}</span> - </view> - </view> - </view> - <!-- 查看商品列表,和选择运费 --> - <view class="transform-container p10"> - <view class="title flex"> - <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"> - <view class="title">{{ transform.name }}</view> - <view class="price">¥{{ transform.fee }}</view> - </view> - </view> + <view class="page-confirm"> + <view class="p10 bg-white br-4"> + <common-address-select ref="addressselect"></common-address-select> + </view> + <view> + <view class="flower-container m-t-12 br-4 p10"> + <view class="shopping-item " v-for="(item,index) of dto.flowers" :key="index"> + <!-- <view class="line-gray" v-if></view> --> + <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 m-t-12 flex"> + <image class="img img100 m-r-6" :src="item.url||item.cover"></image> + <view> + <view class="title"><span class="m-r-5" + style="display: inline-block;">{{item.categoryStr||''}}</span><span + v-if="item.levelStr" class="m-r-5" + style="display: inline-block;">{{ item.levelStr || '' }}</span>{{ item.name || '-' }} + </view> + <view class="price"> + {{ item.price || 0 }}*{{ item.num }}扎 + </view> + <view class="desc m-t-12"> + <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view> + </view> + </view> + </view> + </view> + <view class="price"> + <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="p10 bg-white m-t-20 br-4" v-if="partnerInfo&&partnerInfo.id"> + <view class="form-item flex "> + <view class="label">仓位名称</view> + <view class="m-l-a m-r-0 flex desc-gray"> + <view>{{partnerInfo.cityWarehouse|| '-'}}</view> + </view> + </view> + <view class="form-item flex "> + <view class="label">合伙人名称</view> + <view class="m-l-a m-r-0 flex desc-gray"> + <view>{{partnerInfo.name|| '-'}}</view> + </view> + </view> + <view class="form-item flex "> + <view class="label">联系方式</view> + <view class="m-l-a m-r-0 flex desc-gray"> + <view>{{partnerInfo.contactTel|| '-'}}</view> + </view> + </view> + <view class="form-item flex "> + <view class="label">提货地址</view> + <view class="m-l-a m-r-0 flex desc-gray"> + {{ partnerInfo['province'] || '' }}{{ partnerInfo['city'] && ('/' + partnerInfo['city']) || '' }}{{ + partnerInfo['region'] && ('/' + partnerInfo['region']) || '' + }}{{partnerInfo.address|| '-'}} + </view> + </view> + </view> - </view> - <view class="m-t-20" v-if="false"> - <view class="desc-red"> - 10kg以下的零买订单将收取打包费,花店建议购满20kg, 可选冷链物流 - </view> - <view class="desc"> - 预计装1Mini件,运费约18.00元(5公斤内18元,不满5公斤按5公斤计费,每件货不能超过5公斤),第一汤下单预计次日凌晨发货,备货高峰期除外,冷链汽车运输,发货后72小时左右到货,三线城市会推迟6-12小时,顺丰送货到店。 - 优势:价格便宜,顺丰配送 - 弊端:订单必须是5kg以内 - </view> - </view> - </view> + <!-- 查看商品列表,和选择运费 --> + <view class="br-4 transform-container m-t-12 p10" + v-if="!currentInfo.customerDTO||!currentInfo.customerDTO.partnerId"> + <view class="title"> + <view>运输方式:</view> + <view class="flex transform-list flex-wrap-normal"> + <view v-for="(transform,index) of transportList" + :class="[transform.id===dto.transportId?'cur':'']" :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="true"> + <view class="desc-red"> + 10kg以下的零买订单将收取打包费,花店建议购满20kg, 可选冷链物流 + </view> + <view class="desc"> + <!-- 预计装1Mini件,运费约18.00元(5公斤内18元,不满5公斤按5公斤计费,每件货不能超过5公斤), --> + 第一次下单预计次日凌晨发货,备货高峰期除外,冷链汽车运输,发货后72小时左右到货,三线城市会推迟6-12小时送货到店。 + <!-- 优势:价格便宜,顺丰配送 --> + <!-- 弊端:订单必须是5kg以内 --> + </view> + </view> + </view> - <view class="form-item p10"> - <view class="label">特殊需求</view> - <view class="m-l-a m-r-0 flex1 text-right"> - <view class="m-t-12 m-b-12"> - <u-textarea v-model="dto.remarks" placeholder="请输入特殊需求"> + <view class="p10 bg-white m-t-20 br-4"> + <view class="form-item flex "> + <view class="label">特殊需求</view> - </u-textarea> - </view> - </view> - </view> - <view class="form-item p10"> - <view class="label">留言</view> - <view class="m-l-a m-r-0 flex1 text-right"> - <view class="m-t-12 m-b-12"> - <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认"> + <view class="m-l-a m-r-0 flex " :class="[!dto.specialNeeds?'desc-gray':'']" @click="()=>{ + show_select_need=true + }"> + <view>{{dto.specialNeedsStr||dto.specialNeeds || '请选择'}}</view> + <u-icon class="m-l-a" name="arrow-right"></u-icon> + </view> + </view> + <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" clearable placeholder="填写内容需与卖家协商并确认"> - </u-textarea> - </view> - </view> - </view> + </u-textarea> + </view> + </view> + </view> + </view> - </view> - <view class="bottom-price flex"> - <view> - 合计:¥ {{ dto.totalAmount || 0 }} 元 - </view> - <view class="button-green-1" @click="submitOrder"> - 提交订单 - </view> - </view> - </view> + </view> + <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) || 0 }} + </view> + </view> + <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) + (dto.packing || 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> + + <u-picker :show="show_select_need" @confirm="select_need" keyName="label" :columns="need_columns" + @cancel="show_select_need=false"></u-picker> + </view> </template> <style scoped lang="scss"> -.page-confirm { - .flower-container { - .shopping-item { - padding: 28rpx 22rpx; - position: relative; + .page-confirm { + padding: 20rpx 30rpx; - .sup-title { - border-bottom: 2rpx solid #EEEEEE; - } + .bottom-price { + position: fixed; + background-color: #ffffff; + left: 0rpx; + padding: 20rpx; + z-index: 99; + z-index: 11; + right: 0rpx; + bottom: 0rpx; + } - .item-each { - padding-left: 88rpx; + .flower-container { + background-color: #ffffff; - .img { - width: 124rpx; - height: 124rpx; - } + .shopping-item { + padding: 10rpx 22rpx; + position: relative; - .title { - font-weight: 600; - font-size: 28rpx; + .sup-title { + border-bottom: 2rpx solid #EEEEEE; + line-height: 50rpx; - color: #000000; - line-height: 40rpx; + .icon-dp { + width: 36rpx; + height: 36rpx; + margin-top: 7rpx; + } + } - .level { - color: #20613D; - } - } + .item-each { + padding-left: 20rpx; - .price { - font-weight: 400; - font-size: 28rpx; - color: #CF0000; - line-height: 40rpx; - } + .img { + width: 124rpx; + height: 124rpx; + } - .desc { - font-weight: 400; - font-size: 24rpx; - color: #666666; - line-height: 34rpx; - } - } + .title { + font-weight: 600; + font-size: 28rpx; - .button-icons { - position: absolute; - } - } + color: #000000; + line-height: 40rpx; - } + .level { + color: #20613D; + } + } - .transform-container { - .transform-list { - .transform-item { - background: rgba(225, 240, 231, 0.38); - border-radius: 8rpx; - min-height: 112rpx; - border: 2rpx solid rgba(225, 240, 231, 0.38); - padding: 14rpx; - text-align: center; - margin: 0 auto; - max-width: 32%; + .price { + font-weight: 400; + font-size: 28rpx; + color: #CF0000; + line-height: 40rpx; + } - .title { - font-weight: 400; - font-size: 28rpx; - color: #000000; - line-height: 40rpx; - } + .desc { + font-weight: 400; + font-size: 24rpx; + color: #666666; + line-height: 34rpx; - .price { - font-weight: 600; - font-size: 32rpx; - color: #20613D; - line-height: 44rpx; - } - } + } + } - .transform-item.cur { - background: #E1F0E7; - border-radius: 8rpx; - border: 2rpx solid #20613D; - } - } + .button-icons { + position: absolute; + line-height: 40rpx; - .transform-list:nth-child(3n+0) { - margin-left: 0 - } + } + } - .transform-list:nth-child(3n+2) { - margin-right: 0; - } + } - } + .info-container { + .desc { + font-weight: 400; + font-size: 28rpx; + color: #666666; + line-height: 40rpx; - .bottom-price { - position: fixed; - left: 0rpx; - padding: 20rpx; - right: 0rpx; - bottom: 160rpx; - } -} + .value { + text-align: right; + } + } + } + + .transform-container { + background-color: #ffffff; + + .transform-list { + overflow-x: scroll; + + .transform-item { + background: rgba(225, 240, 231, 0.38); + border-radius: 8rpx; + //min-height: 112rpx; + border: 2rpx solid rgba(225, 240, 231, 0.38); + padding: 10rpx; + text-align: center; + //margin: 0 auto; + margin-left: 10rpx; + margin-top: 10rpx; + margin-right: auto; + max-width: 32%; + width: 130rpx; + min-width: 130rpx; + + .title { + font-weight: 400; + font-size: 24rpx; + color: #000000; + line-height: 40rpx; + word-break: break-word; + min-height: 90rpx + } + + .price { + font-weight: 600; + font-size: 30rpx; + color: #20613D; + //line-height: 44rpx; + } + } + + .transform-item.cur { + background: #E1F0E7; + border-radius: 8rpx; + border: 2rpx solid #20613D; + } + } + + .transform-list:nth-child(3n+0) { + margin-left: 0 + } + + .transform-list:nth-child(3n+2) { + margin-right: 0; + } + + .desc-red {} + + .desc {} + } + + } </style> \ No newline at end of file -- Gitblit v1.9.3