积分兑换详情页替换与接口对接

pages/activity/point/exchange_detail.vue

@@ -2,13 +2,14 @@
 <template>
 	<s-layout title="兑换详情" navbar="normal" :leftWidth="0" :rightWidth="0">
 		<view class="main">
+			<!-- 收货地址 -->
 			<view class="t-address">
 				<view class="t">
-					<text class="l">TEST TQQQ</text>
+					<text class="l">{{ state.orderInfo.receiverName }}</text>
-					<text class="r">13615935246</text>
+					<text class="r">{{ state.orderInfo.receiverMobile }}</text>
 				</view>
 				<view class="b">
-					北京市 北京市 北京市 北京市
+					{{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
 				</view>
 				<image
 					src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png"
@@ -17,22 +18,23 @@
 
 			<view class="c-goods">
 				<view class="t">
-					共1件商品
+					共{{item.count}}件商品
 				</view>
 
-				<view class="b-detail">
+				<view class="b-detail" v-for="(item,index) in state.orderInfo.items" :key="item.goods_id">
-					<image
+					<image :src="item.picUrl" class="img" mode=""></image>
-						src="https://zysc.fjptzykj.com:3000/shangcheng/21cf998c40ecd9d506f884bbd7540afc2e7928ab0e4ab54afede1fcc48a10972.png"
-						class="img" mode=""></image>
 					<view class="right">
 						<view class="t">
-							Xiaomi Citi 2 冰冰蓝 8GB + 128GB <text class="r">x1</text>
+							<view class="ss-line-2" style="    width: 88%;">
+								{{item.spuName}}
+							</view>
+							<text class="r">x{{item.count}}</text>
 						</view>
 						<view class="c">
-							冰冰蓝，8+128
+							{{item.properties.map((property) => property.valueName).join(' ')}}
 						</view>
 						<view class="b">
-							10积分
+							10积分（待对接接口）
 						</view>
 					</view>
 				</view>
@@ -44,8 +46,8 @@
 						订单编号:
 					</view>
 					<view class="r">
-						wx23556151561321321351213
+						{{ state.orderInfo.no }}
-						<view class="copy-btn">
+						<view class="copy-btn" @click="onCopy">
 							复制
 						</view>
 					</view>
@@ -56,7 +58,7 @@
 						订单状态:
 					</view>
 					<view class="r">
-						未发货
+						{{ formatOrderStatus(state.orderInfo) }}
 					</view>
 				</view>
 				<view class="ddxx">
@@ -64,7 +66,7 @@
 						下单时间:
 					</view>
 					<view class="r">
-						2024-10-18 15:46:03
+						{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
 					</view>
 				</view>
 				<view class="ddxx">
@@ -72,7 +74,7 @@
 						支付积分
 					</view>
 					<view class="r">
-						10
+						10（待接口对接）
 					</view>
 				</view>
 			</view>
@@ -82,61 +84,189 @@
 <script setup>
 	import sheep from '@/sheep';
 	import {
-		onLoad,
+		onLoad
-		onReachBottom
 	} from '@dcloudio/uni-app';
 	import {
 		reactive,
 		ref
 	} from 'vue';
-	import PointApi from '@/sheep/api/promotion/point';
+	import {
-	import SLayout from '@/sheep/components/s-layout/s-layout.vue';
+		isEmpty
+	} from 'lodash-es';
+	import {
+		fen2yuan,
+		formatOrderStatus,
+		formatOrderStatusDescription,
+		handleOrderButtons,
+	} from '@/sheep/hooks/useGoods';
+	import OrderApi from '@/sheep/api/trade/order';
+	import DeliveryApi from '@/sheep/api/trade/delivery';
+	import PickUpVerify from '@/pages/order/pickUpVerify.vue';
 
-	// 计算页面高度
-	const {
-		safeAreaInsets,
-		safeArea
-	} = sheep.$platform.device;
 	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
-	const pageHeight =
+	const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
-		(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
 
-	const sPointCardRef = ref();
+	const state = reactive({
-	// 查询活动列表
+		orderInfo: {},
-	const activityPageParams = reactive({
+		merchantTradeNo: '', // 商户订单号
-		pageNo: 1, // 页码
+		comeinType: '', // 进入订单详情的来源类型
-		pageSize: 5, // 每页数量
 	});
 
-	const activityTotal = ref(0); // 活动总数
+	// ========== 门店自提（核销） ==========
-	const activityCount = ref(0); // 已加载活动数量
+	const systemStore = ref({}); // 门店信息
-	const loadStatus = ref(''); // 页面加载状态
+
-	async function getActivityList() {
+	// 复制
-		loadStatus.value = 'loading';
+	const onCopy = () => {
+		sheep.$helper.copyText(state.orderInfo.no);
+	};
+
+	// 去支付
+	function onPay(payOrderId) {
+		sheep.$router.go('/pages/pay/index', {
+			id: payOrderId,
+		});
+	}
+
+	// 查看商品
+	function onGoodsDetail(id) {
+		sheep.$router.go('/pages/goods/index', {
+			id,
+		});
+	}
+
+	// 取消订单
+	async function onCancel(orderId) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要取消订单吗?',
+			success: async function(res) {
+				if (!res.confirm) {
+					return;
+				}
+				const {
+					code
+				} = await OrderApi.cancelOrder(orderId);
+				if (code === 0) {
+					await getOrderDetail(orderId);
+				}
+			},
+		});
+	}
+
+	// 查看物流
+	async function onExpress(id) {
+		sheep.$router.go('/pages/order/express/log', {
+			id,
+		});
+	}
+
+	// 确认收货 TODO 芋艿：待测试
+	async function onConfirm(orderId, ignore = false) {
+		// 需开启确认收货组件
+		// todo: 芋艿：待接入微信
+		// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+		// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+		let isOpenBusinessView = true;
+		if (
+			sheep.$platform.name === 'WechatMiniProgram' &&
+			!isEmpty(state.orderInfo.wechat_extra_data) &&
+			isOpenBusinessView &&
+			!ignore
+		) {
+			mpConfirm(orderId);
+			return;
+		}
+
+		// 正常的确认收货流程
+		const {
+			code
+		} = await OrderApi.receiveOrder(orderId);
+		if (code === 0) {
+			await getOrderDetail(orderId);
+		}
+	}
+
+	// #ifdef MP-WEIXIN
+	// 小程序确认收货组件
+	function mpConfirm(orderId) {
+		if (!wx.openBusinessView) {
+			sheep.$helper.toast(`请升级微信版本`);
+			return;
+		}
+		wx.openBusinessView({
+			businessType: 'weappOrderConfirm',
+			extraData: {
+				merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
+				transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
+			},
+			success(response) {
+				console.log('success:', response);
+				if (response.errMsg === 'openBusinessView:ok') {
+					if (response.extraData.status === 'success') {
+						onConfirm(orderId, true);
+					}
+				}
+			},
+			fail(error) {
+				console.log('error:', error);
+			},
+			complete(result) {
+				console.log('result:', result);
+			},
+		});
+	}
+
+	// #endif
+
+	// 评价
+	function onComment(id) {
+		sheep.$router.go('/pages/goods/comment/add', {
+			id,
+		});
+	}
+
+	const pickUpVerifyRef = ref();
+
+	async function getOrderDetail(id) {
+		// 对详情数据进行适配
+		let res;
+		if (state.comeinType === 'wechat') {
+			// TODO 芋艿：微信场景下
+			res = await OrderApi.getOrder(id, {
+				merchant_trade_no: state.merchantTradeNo,
+			});
+		} else {
+			res = await OrderApi.getOrder(id);
+		}
+		if (res.code === 0) {
+			state.orderInfo = res.data;
+			handleOrderButtons(state.orderInfo);
+			// 配送方式：门店自提
+			if (res.data.pickUpStoreId) {
 				const {
 					data
-		} = await PointApi.getPointActivityPage(activityPageParams);
+				} = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
-		await sPointCardRef.value.concatActivity(data.list);
+				systemStore.value = data || {};
-		activityCount.value = sPointCardRef.value.getActivityCount();
-		activityTotal.value = data.total;
-
-		loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
 			}
-
+			if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
-	// 加载更多
+				pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
-	function loadMore() {
+			}
-		if (state.loadStatus !== 'noMore') {
+		} else {
-			activityPageParams.pageNo += 1;
+			sheep.$router.back();
-			getActivityList();
 		}
 	}
 
-	// 上拉加载更多
+	onLoad(async (options) => {
-	onReachBottom(() => {
+		let id = 0;
-		loadMore();
+		if (options.id) {
-	});
+			id = options.id;
-	onLoad(() => {
+		}
-		getActivityList();
+		// TODO 芋艿：下面两个变量，后续接入
+		state.comeinType = options.comein_type;
+		if (state.comeinType === 'wechat') {
+			state.merchantTradeNo = options.merchant_trade_no;
+		}
+		await getOrderDetail(id);
 	});
 </script>
 
@@ -149,7 +279,7 @@
 			padding-bottom: 0;
 
 			.t {
-				font-size: 19px;
+				font-size: 30rpx;
 				color: black;
 				display: flex;
 				font-weight: 700;
@@ -161,7 +291,7 @@
 			}
 
 			.b {
-				font-size: 17px;
+				font-size: 26rpx;
 				color: rgba(156, 143, 114);
 			}
 
@@ -177,7 +307,7 @@
 			background: white;
 
 			&>.t {
-				font-size: 19px;
+				font-size: 30rpx;
 				border-bottom: 1px solid rgba(240, 240, 240);
 				padding-bottom: 15px;
 			}
@@ -194,11 +324,13 @@
 
 				.right {
 					flex: 1;
+
 					.t {
-						font-size: 14px;
+						font-size: 26rpx;
 						font-weight: 500;
 						display: flex;
 						justify-content: space-between;
+
 						.r {
 							color: rgba(134, 139, 151);
 						}
@@ -218,30 +350,52 @@
 
 		.b-goodsDetail {
 			margin: 9px 0;
-			padding: 15px 10px;
+			padding: 7px 10px;
 			background: white;
 		}
 
 		.ddxx {
 			display: flex;
 			justify-content: space-between;
-			margin: 10px 0;
+			margin: 8px 0;
 
 			.l {
-				font-size: 17px;
+				font-size: 15px;
-				.r{
+
-				}
+				.r {}
 			}
 
 			.r {
-				font-size: 16px;
+				font-size: 14px;
 				color: rgba(102, 102, 102);
 				display: flex;
 				align-items: center;
+
 				.copy-btn {
+					width: 3.125rem;
+					line-height: 1.5625rem;
+					border-radius: 0.78125rem;
+					padding: 0;
+					background: #eeeeee;
+					font-size: 0.6875rem;
+					font-weight: 400;
+					color: #333333;
+					position: relative;
+					text-align: center;
 					margin-left: 10px;
-					padding:3px 5px;
+					&:after {
-					border:1px solid black;
+						content: ' ';
+						width: 200%;
+						height: 200%;
+						position: absolute;
+						top: 0;
+						left: 0;
+						// border: 1px solid rgba(0, 0, 0, 0.2);
+						transform: scale(0.5);
+						transform-origin: 0 0;
+						box-sizing: border-box;
+						border-radius: 10px;
+					}
 				}
 			}
 

pages/goods/point.vue

@@ -166,6 +166,7 @@
             count: sku.count,
           },
         ],
+		point: true,
       }),
     });
   }

pages/order/confirm.vue

@@ -5,26 +5,14 @@
 
 		<!-- 商品信息 -->
 		<view class="order-card-box ss-m-b-14">
-      <s-goods-item
+			<s-goods-item v-for="item in state.orderInfo.items" :key="item.skuId" :img="item.picUrl"
-        v-for="item in state.orderInfo.items"
+				:title="item.spuName" :skuText="item.properties.map((property) => property.valueName).join(' ')"
-        :key="item.skuId"
+				:price="item.price" :num="item.count" marginBottom="10" />
-        :img="item.picUrl"
-        :title="item.spuName"
-        :skuText="item.properties.map((property) => property.valueName).join(' ')"
-        :price="item.price"
-        :num="item.count"
-        marginBottom="10"
-      />
 			<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
 				<view class="item-title">订单备注</view>
 				<view class="ss-flex ss-col-center">
-          <uni-easyinput
+					<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
-            maxlength="20"
+						:inputBorder="false" :clearable="false" />
-            placeholder="建议留言前先与商家沟通"
-            v-model="state.orderPayload.remark"
-            :inputBorder="false"
-            :clearable="false"
-          />
 				</view>
 			</view>
 		</view>
@@ -40,32 +28,25 @@
 						</text>
 					</view>
 				</view>
-        <view
+				<view v-if="state.orderPayload.pointActivityId" class="order-item ss-flex ss-col-center ss-row-between">
-          v-if="state.orderPayload.pointActivityId"
-          class="order-item ss-flex ss-col-center ss-row-between"
-        >
 					<view class="item-title">兑换积分</view>
 					<view class="ss-flex ss-col-center">
 						<image
 							src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
-              class="score-img"
+							class="score-img" />
-            />
 						<text class="item-value ss-m-r-24">
 							{{ state.orderInfo.usePoint }}
 						</text>
 					</view>
 				</view>
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between"
-          class="order-item ss-flex ss-col-center ss-row-between"
+					v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId">
-          v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
-        >
 					<view class="item-title">积分抵扣</view>
 					<view class="ss-flex ss-col-center">
 						{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
 						<image
 							src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
-              class="score-img"
+							class="score-img" />
-            />
 						<text class="item-value ss-m-r-24">
 							{{
                 state.pointStatus || state.orderPayload.pointActivityId
@@ -74,18 +55,13 @@
               }}
 						</text>
 						<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
-              <checkbox
+							<checkbox :checked="state.pointStatus"
-                :checked="state.pointStatus"
+								:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
-                :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
-              />
 						</checkbox-group>
 					</view>
 				</view>
 				<!-- 快递配置时，信息的展示 -->
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 1">
-          class="order-item ss-flex ss-col-center ss-row-between"
-          v-if="addressState.deliveryType === 1"
-        >
 					<view class="item-title">运费</view>
 					<view class="ss-flex ss-col-center">
 						<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
@@ -95,55 +71,32 @@
 					</view>
 				</view>
 				<!-- 门店自提时，需要填写姓名和手机号 -->
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 2">
-          class="order-item ss-flex ss-col-center ss-row-between"
-          v-if="addressState.deliveryType === 2"
-        >
 					<view class="item-title">联系人</view>
 					<view class="ss-flex ss-col-center">
-            <uni-easyinput
+						<uni-easyinput maxlength="20" placeholder="请填写您的联系姓名" v-model="addressState.receiverName"
-              maxlength="20"
+							:inputBorder="false" :clearable="false" />
-              placeholder="请填写您的联系姓名"
-              v-model="addressState.receiverName"
-              :inputBorder="false"
-              :clearable="false"
-            />
 					</view>
 				</view>
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 2">
-          class="order-item ss-flex ss-col-center ss-row-between"
-          v-if="addressState.deliveryType === 2"
-        >
 					<view class="item-title">联系电话</view>
 					<view class="ss-flex ss-col-center">
-            <uni-easyinput
+						<uni-easyinput maxlength="20" placeholder="请填写您的联系电话" v-model="addressState.receiverMobile"
-              maxlength="20"
+							:inputBorder="false" :clearable="false" />
-              placeholder="请填写您的联系电话"
-              v-model="addressState.receiverMobile"
-              :inputBorder="false"
-              :clearable="false"
-            />
 					</view>
 				</view>
 				<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.type === 0">
-          class="order-item ss-flex ss-col-center ss-row-between"
-          v-if="state.orderInfo.type === 0"
-        >
 					<view class="item-title">优惠券</view>
 					<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
 						<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
 							-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
 						</text>
-            <text
+						<text class="item-value" :class="
-              class="item-value"
-              :class="
                 state.couponInfo.filter((coupon) => coupon.match).length > 0
                   ? 'text-red'
                   : 'text-disabled'
-              "
+              " v-else>
-              v-else
-            >
 							{{
                 state.couponInfo.filter((coupon) => coupon.match).length > 0
                   ? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
@@ -153,10 +106,8 @@
 						<text class="_icon-forward item-icon" />
 					</view>
 				</view>
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between"
-          class="order-item ss-flex ss-col-center ss-row-between"
+					v-if="state.orderInfo.price.discountPrice > 0">
-          v-if="state.orderInfo.price.discountPrice > 0"
-        >
 					<view class="item-title">活动优惠</view>
 					<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
 						<text class="item-value text-red">
@@ -165,10 +116,7 @@
 						<text class="_icon-forward item-icon" />
 					</view>
 				</view>
-        <view
+				<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.price.vipPrice > 0">
-          class="order-item ss-flex ss-col-center ss-row-between"
-          v-if="state.orderInfo.price.vipPrice > 0"
-        >
 					<view class="item-title">会员优惠</view>
 					<view class="ss-flex ss-col-center">
 						<text class="item-value text-red">
@@ -187,19 +135,11 @@
 		</view>
 
 		<!-- 选择优惠券弹框 -->
-    <s-coupon-select
+		<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
-      v-model="state.couponInfo"
+			@close="state.showCoupon = false" />
-      :show="state.showCoupon"
-      @confirm="onSelectCoupon"
-      @close="state.showCoupon = false"
-    />
 
 		<!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 -->
-    <s-discount-list
+		<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
-      v-model="state.orderInfo"
-      :show="state.showDiscount"
-      @close="state.showDiscount = false"
-    />
 
 		<!-- 底部 -->
 		<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
@@ -209,10 +149,7 @@
 						￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
 					</view>
 				</view>
-        <button
+				<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm">
-          class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
-          @tap="onConfirm"
-        >
 					提交订单
 				</button>
 			</view>
@@ -221,13 +158,21 @@
 </template>
 
 <script setup>
-  import { reactive, ref, watch } from 'vue';
+	import {
-  import { onLoad } from '@dcloudio/uni-app';
+		reactive,
+		ref,
+		watch
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
 	import AddressSelection from '@/pages/order/addressSelection.vue';
 	import sheep from '@/sheep';
 	import OrderApi from '@/sheep/api/trade/order';
 	import TradeConfigApi from '@/sheep/api/trade/config';
-  import { fen2yuan } from '@/sheep/hooks/useGoods';
+	import {
+		fen2yuan
+	} from '@/sheep/hooks/useGoods';
 
 	const state = reactive({
 		orderPayload: {},
@@ -296,7 +241,10 @@
 
 	// 创建订单&跳转
 	async function submitOrder() {
-    const { code, data } = await OrderApi.createOrder({
+		const {
+			code,
+			data
+		} = await OrderApi.createOrder({
 			items: state.orderPayload.items,
 			couponId: state.orderPayload.couponId,
 			remark: state.orderPayload.remark,
@@ -324,10 +272,14 @@
 			sheep.$router.redirect('/pages/pay/index', {
 				id: data.payOrderId,
 			});
-    } else {
+		} else if(!state.orderPayload.point) {
 			sheep.$router.redirect('/pages/order/detail', {
 				id: data.id,
 			});
+		}else{
+			sheep.$router.redirect('/pages/activity/point/exchange_detail', {
+				id: data.id,
+			});
 		}
 	}
 
@@ -368,7 +320,10 @@
 		}
 
 
-    const { data, code } = await OrderApi.settlementOrder(parm);
+		const {
+			data,
+			code
+		} = await OrderApi.settlementOrder(parm);
 		if (code !== 0) {
 			return;
 		}
@@ -388,7 +343,10 @@
 		state.orderPayload = JSON.parse(options.data);
 		await getOrderInfo();
 		// 获取交易配置
-    const { data, code } = await TradeConfigApi.getTradeConfig();
+		const {
+			data,
+			code
+		} = await TradeConfigApi.getTradeConfig();
 		if (code === 0) {
 			addressState.value.isPickUp = data.deliveryPickUpEnabled;
 		}

pages/user/user_vip/list.vue

@@ -138,8 +138,13 @@
 			},
 		}).then((res) => {
 			console.log(res,"-----------试用---------------")
+			if(res.code == 200){
 				sheep.$helper.toast('试用开通成功');
 				sheep.$router.go('/pages/index/user')
+			}else{
+				sheep.$helper.toast(res.msg);
+			}
+			
 		});
 	}