|
@@ -1,129 +1,179 @@
|
|
|
-import { computed, ref, defineComponent, onMounted } from 'vue'
|
|
|
-import {
|
|
|
- Card,
|
|
|
- Cell,
|
|
|
- CellGroup,
|
|
|
- Checkbox,
|
|
|
- Image,
|
|
|
- Radio,
|
|
|
- RadioGroup,
|
|
|
- SubmitBar
|
|
|
-} from 'vant'
|
|
|
-import { carts } from '../cart'
|
|
|
+import { computed, ref, defineComponent, onMounted, reactive } from 'vue'
|
|
|
+import { Card, Cell, CellGroup, Popup, SubmitBar, Toast } from 'vant'
|
|
|
+import { addressType, cartConfirm } from '../cart'
|
|
|
import styles from '../index.module.less'
|
|
|
-import iconWx from '@views/shop-mall/images/icon-wx.png'
|
|
|
-import iconZfb from '@views/shop-mall/images/icon-zfb.png'
|
|
|
import Address from '../components/address'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import ColProtocol from '@/components/col-protocol'
|
|
|
+import Payment from '@/views/order-detail/payment'
|
|
|
+import { state } from '@/state'
|
|
|
+import ColPopup from '@/components/col-popup'
|
|
|
+import UserAuth from '@/views/order-detail/userAuth'
|
|
|
+import ColResult from '@/components/col-result'
|
|
|
export default defineComponent({
|
|
|
setup() {
|
|
|
- const list = carts.list
|
|
|
+ const list = cartConfirm.cartPromotionItemList
|
|
|
+ const calcAmount = cartConfirm.calcAmount
|
|
|
|
|
|
- const len = computed(() => {
|
|
|
- return list.length
|
|
|
- })
|
|
|
- const totalPrice = computed(() => {
|
|
|
- let price = 0
|
|
|
- list.forEach((n: any) => {
|
|
|
- price += n.price * n.quantity
|
|
|
- })
|
|
|
- return ((price * 100) / 100).toFixed(2)
|
|
|
- })
|
|
|
onMounted(() => {
|
|
|
- console.log(list, '确认订单商品')
|
|
|
+ // console.log(cartConfirm, '确认订单商品')
|
|
|
+ })
|
|
|
+
|
|
|
+ const payType = ref(0) // 0->未支付;1->支付宝;2->微信
|
|
|
+
|
|
|
+ const address = cartConfirm.memberReceiveAddressList.length
|
|
|
+ ? cartConfirm.memberReceiveAddressList.find(
|
|
|
+ (n: any) => n.defaultStatus
|
|
|
+ ) || cartConfirm.memberReceiveAddressList[0]
|
|
|
+ : {}
|
|
|
+
|
|
|
+ const agreeStatus = ref(false)
|
|
|
+ const paymentPopup = ref(false)
|
|
|
+ const authPopup = ref(false)
|
|
|
+ const orderInfo = reactive({
|
|
|
+ orderNo: '',
|
|
|
+ actualPrice: 0
|
|
|
})
|
|
|
+ // 提交
|
|
|
+ const onSubmit = () => {
|
|
|
+ if (!agreeStatus.value) {
|
|
|
+ Toast('请先阅读并同意《酷乐秀平台服务协议》')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const users = state.user.data
|
|
|
+ // 判断是否需要实名认证
|
|
|
+ if (!users?.realName || !users?.idCardNo) {
|
|
|
+ authPopup.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- const payType = ref('wx')
|
|
|
+ // 判断是否有订单号
|
|
|
+ if (orderInfo.orderNo) {
|
|
|
+ paymentPopup.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ createOrder()
|
|
|
+ }
|
|
|
+ const router = useRouter()
|
|
|
+ //创建订单
|
|
|
+ const createOrder = async () => {
|
|
|
+ const ids = list.reduce((arr, value: any) => {
|
|
|
+ arr.push(value.id)
|
|
|
+ return arr
|
|
|
+ }, [])
|
|
|
+ const body = {
|
|
|
+ cartIds: ids,
|
|
|
+ memberReceiveAddressId: (address as any)?.id,
|
|
|
+ payType: payType.value
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ let { code, data } = await request.post(
|
|
|
+ '/api-mall-portal/order/generateOrder',
|
|
|
+ { data: body }
|
|
|
+ )
|
|
|
+ if (code === 200) {
|
|
|
+ paymentPopup.value = true
|
|
|
+ orderInfo.orderNo = data?.order.orderSn || ''
|
|
|
+ orderInfo.actualPrice = data?.order.payAmount || 0
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+ }
|
|
|
+
|
|
|
+ //认证成功
|
|
|
+ const onAuthSuccess = () => {
|
|
|
+ authPopup.value = false
|
|
|
+ onSubmit() // 实名成功后自动支付
|
|
|
+ }
|
|
|
return () => (
|
|
|
- <div class={styles.cartConfirm}>
|
|
|
- <div class={styles.cartConfirmBox}>
|
|
|
- <Address />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style={{ marginTop: '20px' }}
|
|
|
- class={[styles.cartBox, styles.cartConfirmBox]}
|
|
|
- >
|
|
|
- {list.map((item: any) => (
|
|
|
- <div class={styles.cartItem}>
|
|
|
- <Card
|
|
|
- price={((item.price * item.quantity * 100) / 100).toFixed(2)}
|
|
|
- desc={item.productAttr}
|
|
|
- title={item.productName}
|
|
|
- thumb={item.productPic}
|
|
|
- num={item.quantity}
|
|
|
- ></Card>
|
|
|
+ <>
|
|
|
+ {list.length ? (
|
|
|
+ <div class={styles.cartConfirm}>
|
|
|
+ <div class={styles.cartConfirmBox}>
|
|
|
+ <Address item={address as any} />
|
|
|
</div>
|
|
|
- ))}
|
|
|
- <CellGroup border={false}>
|
|
|
- <Cell
|
|
|
- border={false}
|
|
|
- title="总额"
|
|
|
- value={'¥ ' + totalPrice.value}
|
|
|
- ></Cell>
|
|
|
- <Cell border={false} title="运费" value="¥ 0.00"></Cell>
|
|
|
- <Cell border={false} title="优惠卷" value="暂无可用优惠卷"></Cell>
|
|
|
- <Cell border={false} title="乐乐币抵扣" value="-¥ 0.00"></Cell>
|
|
|
- </CellGroup>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class={[styles.cartConfirmBox, styles.payWrap]}
|
|
|
- style={{ marginTop: '20px' }}
|
|
|
- >
|
|
|
- <RadioGroup v-model={payType.value}>
|
|
|
- <Cell
|
|
|
- border={false}
|
|
|
- v-slots={{
|
|
|
- title: () => (
|
|
|
- <div class={styles.payType}>
|
|
|
- <Image class={styles.payIcon} src={iconWx}></Image>
|
|
|
- <span
|
|
|
- style={{
|
|
|
- marginLeft: '14px',
|
|
|
- fontSize: '14px',
|
|
|
- fontWeight: 500
|
|
|
- }}
|
|
|
- >
|
|
|
- 微信支付
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- value: () => <Radio name="wx"></Radio>
|
|
|
- }}
|
|
|
- onClick={() => (payType.value = 'wx')}
|
|
|
- ></Cell>
|
|
|
- <Cell
|
|
|
- v-slots={{
|
|
|
- title: () => (
|
|
|
- <div class={styles.payType}>
|
|
|
- <Image class={styles.payIcon} src={iconZfb}></Image>
|
|
|
- <span
|
|
|
- style={{
|
|
|
- marginLeft: '14px',
|
|
|
- fontSize: '14px',
|
|
|
- fontWeight: 500
|
|
|
- }}
|
|
|
- >
|
|
|
- 支付宝支付
|
|
|
- </span>
|
|
|
+ <div
|
|
|
+ style={{ marginTop: '20px' }}
|
|
|
+ class={[styles.cartBox, styles.cartConfirmBox]}
|
|
|
+ >
|
|
|
+ <div class={styles.shopBox}>
|
|
|
+ {list.map((item: any) => (
|
|
|
+ <div
|
|
|
+ class={[styles.cartItem]}
|
|
|
+ style={{ marginBottom: '10px' }}
|
|
|
+ >
|
|
|
+ <Card
|
|
|
+ price={((item.price * item.quantity * 100) / 100).toFixed(
|
|
|
+ 2
|
|
|
+ )}
|
|
|
+ desc={item.productAttr}
|
|
|
+ title={item.productName}
|
|
|
+ thumb={item.productPic}
|
|
|
+ num={item.quantity}
|
|
|
+ ></Card>
|
|
|
</div>
|
|
|
- ),
|
|
|
- value: () => <Radio name="zfb"></Radio>
|
|
|
- }}
|
|
|
- onClick={() => (payType.value = 'zfb')}
|
|
|
- ></Cell>
|
|
|
- </RadioGroup>
|
|
|
- </div>
|
|
|
- <SubmitBar
|
|
|
- buttonText={`结算(${len.value})`}
|
|
|
- buttonColor="var(--van-primary)"
|
|
|
- disabled={len.value === 0}
|
|
|
- >
|
|
|
- <div class={styles.confirmBottom}>
|
|
|
- 合计 <span class={styles['price-des']}>¥{totalPrice.value}</span>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <CellGroup border={false}>
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ title="总额"
|
|
|
+ value={'¥ ' + calcAmount.totalAmount}
|
|
|
+ ></Cell>
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ title="运费"
|
|
|
+ value={calcAmount.freightAmount}
|
|
|
+ ></Cell>
|
|
|
+ {/* <Cell border={false} title="优惠卷" value="暂无可用优惠卷"></Cell>
|
|
|
+ <Cell border={false} title="乐乐币抵扣" value={"-¥" + calcAmount.promotionAmount}></Cell> */}
|
|
|
+ </CellGroup>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.payProtocol}>
|
|
|
+ <ColProtocol v-model={agreeStatus.value}></ColProtocol>
|
|
|
+ </div>
|
|
|
+ <SubmitBar
|
|
|
+ buttonText={`结算(${list.length})`}
|
|
|
+ buttonColor="var(--van-primary)"
|
|
|
+ disabled={list.length === 0}
|
|
|
+ onSubmit={() => onSubmit()}
|
|
|
+ >
|
|
|
+ <div class={styles.confirmBottom}>
|
|
|
+ 合计{' '}
|
|
|
+ <span class={styles['price-des']}>¥{(calcAmount.payAmount * 1000 / 1000).toFixed(2)}</span>
|
|
|
+ </div>
|
|
|
+ </SubmitBar>
|
|
|
+ <div style={{ height: 'var(--van-submit-bar-height)' }}></div>
|
|
|
+ <ColPopup v-model={authPopup.value}>
|
|
|
+ <UserAuth onSuccess={onAuthSuccess} />
|
|
|
+ </ColPopup>
|
|
|
+ <Popup
|
|
|
+ show={paymentPopup.value}
|
|
|
+ closeOnClickOverlay={false}
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ closeOnPopstate
|
|
|
+ safeAreaInsetBottom
|
|
|
+ style={{ minHeight: '30%' }}
|
|
|
+ >
|
|
|
+ <Payment
|
|
|
+ v-model={paymentPopup.value}
|
|
|
+ orderInfo={orderInfo}
|
|
|
+ paymentType="goodsPay"
|
|
|
+ onBackOut={() => (paymentPopup.value = false)}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
</div>
|
|
|
- </SubmitBar>
|
|
|
- <div style={{height: 'var(--van-submit-bar-height)'}}></div>
|
|
|
- </div>
|
|
|
+ ) : (
|
|
|
+ <ColResult
|
|
|
+ buttonText="去购物车"
|
|
|
+ onClick={() => {
|
|
|
+ router.push({path: '/cart'})
|
|
|
+ }}
|
|
|
+ ></ColResult>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
})
|